/* Home page. Layout: hero (ask + theme fan) → guest moment → four chapters alternating
   text/media → theme shelf → how → pricing → privacy → questions → last call. */
.home section { position: relative; padding-block: clamp(56px, 8vw, 104px); }
.section-head { display: grid; gap: 10px; max-width: 760px; margin-bottom: 28px; }
.section-head .muted { font-size: 18px; }

/* hero */
.hero { padding-block: clamp(28px, 5vw, 64px) clamp(40px, 6vw, 72px) !important; overflow: hidden; }
.hero__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; } }
.hero__text { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.hero__lead { font-size: clamp(18px, 2vw, 20px); max-width: 34em; color: var(--ink-2); }
.hero__ask { display: grid; gap: 12px; width: 100%; max-width: 520px; padding: 18px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.hero__label { font: 600 18px/1.2 var(--display); }
.hero__input { font-size: 20px; min-height: 56px; }
.hero__go { width: 100%; min-height: 54px; font-size: 18px; }
.hero__fine { font-size: 14px; color: var(--ink-2); }
.hero__fan { position: relative; height: clamp(400px, 52vw, 560px); max-width: 560px; width: 100%; margin: 0 auto; }
.fan { position: absolute; top: 50%; display: block; width: 46%; aspect-ratio: 9 / 15; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; transition: transform .25s; }
.fan svg { width: 100%; height: 100%; }
.fan--left { left: 0; transform: translateY(-50%) rotate(-8deg) scale(.86); border: 8px solid var(--frame); }
.fan--right { right: 0; transform: translateY(-50%) rotate(8deg) scale(.86); border: 8px solid var(--frame); }
.fan--mid { left: 27%; z-index: 2; transform: translateY(-50%); }
.fan--mid.device { padding: 8px; }
.fan:hover { transform: translateY(-52%) rotate(var(--r, 0deg)) scale(var(--s, 1)); }
.fan--left:hover { --r: -6deg; --s: .9; }
.fan--right:hover { --r: 6deg; --s: .9; }
.fan .soon-badge { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 760px) { .hero .shapes-deco { display: none; } }
@media (max-width: 520px) { .hero__fan { height: 380px; } .fan { width: 52%; } .fan--mid { left: 24%; } }

/* guest moment */
.moment { background: var(--paper-2); }
.moment__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .moment__in { grid-template-columns: 420px 1fr; gap: 64px; } }
.moment__text { display: grid; gap: 14px; max-width: 34em; }
.chat { display: grid; gap: 10px; padding: 16px; border-radius: 26px; background: #e9e4f7; color: #1d1633; box-shadow: var(--shadow); max-width: 420px; width: 100%; margin: 0 auto; font-size: 15px; }
.chat__head { display: flex; gap: 10px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid rgba(29, 22, 51, .1); }
.chat__head small { display: block; color: #6b6488; font-size: 13px; }
.chat__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #ff3d7f; color: #fff; font-weight: 700; }
.bubble { margin: 0; max-width: 86%; padding: 9px 12px; border-radius: 16px 16px 16px 4px; background: #fff; line-height: 1.4; }
.bubble b { display: block; font-size: 13px; color: #d81b60; }
.bubble--card { padding: 6px; display: grid; gap: 6px; }
.bubble--card img { border-radius: 11px; width: 100%; height: auto; }
.bubble--card span { padding: 0 6px 4px; }
.bubble--card span b { color: #1d1633; font-size: 15px; }
.bubble--card small { color: #6b6488; }
.bubble--out { justify-self: end; border-radius: 16px 16px 4px 16px; background: #dcf8e8; }

/* chapters */
.chapter__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .chapter__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; } .chapter--flip .chapter__text { order: 2; } }
.chapter__text { display: grid; gap: 16px; justify-items: start; max-width: 32em; }
.chapter__text > p:not(.eyebrow) { font-size: 18px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.ticks li::before { content: ""; width: 0; height: 0; margin-top: 7px; border-left: 9px solid var(--play); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.chapter__media { display: grid; gap: 18px; justify-items: center; }
.chapter__media .device { width: 100%; margin: 0; }
.chapter__media--one .device { max-width: 300px; }
.chapter__media--two { grid-template-columns: 1fr 1fr; align-items: start; }
.chapter__media--two .device { max-width: 280px; }
.chapter__media--two .device:nth-child(2) { margin-top: 48px; }
.book-spread { grid-template-columns: 1fr 1fr; align-items: start; }
.book-spread img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); }
.book-spread__page { margin-top: 40px; }
.book-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.book-toggle .is-on { background: var(--ink); color: var(--paper); }
.example-note { margin-top: 28px !important; font-size: 14px; color: var(--ink-2); text-align: center; }

/* theme shelf */
.themes { background: var(--paper-2); }
.theme-filter { margin-bottom: 24px; }
.shelf { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tcard { display: grid; gap: 14px; align-content: start; padding: 14px 14px 18px; border-radius: 26px; background: var(--card); box-shadow: 0 1px 0 var(--line), var(--shadow); min-width: 0; }
.tcard[hidden] { display: none; }
.tcard__media { position: relative; display: block; aspect-ratio: 9 / 13; border-radius: 18px; overflow: hidden; background: #070b24; }
.tcard__media video, .tcard__media img, .tcard__media svg { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tcard__media .pill { position: absolute; bottom: 10px; left: 10px; }
.tcard__body { display: grid; gap: 6px; padding: 0 4px; }
.tcard__body h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tcard__body .kind { font: 500 13px/1 var(--body); color: var(--ink-2); }
.tcard__for { font-size: 14px; color: var(--ink-2); }
.tcard__actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 4px; }
.tcard__actions .btn { flex: 1 1 auto; }
.tcard--idea { place-content: center; text-align: center; padding: 28px; background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.tcard--idea p { color: var(--ink-2); }

/* how */
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 860px) { .how__steps { grid-template-columns: repeat(3, 1fr); } }
.how__steps li { counter-increment: s; display: grid; gap: 8px; padding: 22px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.how__steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--play); color: #fff; font: 800 18px/1 var(--display); }
.how__steps b { font: 600 22px/1.2 var(--display); }
.how__steps span { color: var(--ink-2); }

/* pricing */
.pricing__in { display: grid; gap: 24px; align-items: center; padding: clamp(24px, 4vw, 44px) !important; border-radius: 30px; background: var(--ink); color: var(--paper); }
.pricing__in > div { display: grid; gap: 12px; max-width: 40em; }
.pricing__in .muted { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.pricing__in .eyebrow { color: var(--ticket); }
@media (min-width: 860px) { .pricing__in { grid-template-columns: 1fr auto; } }
.pricing .wrap.pricing__in { width: calc(100% - 32px); }

/* privacy */
.private__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .private__list { grid-template-columns: 1fr 1fr; } }
.private__list li { display: grid; gap: 4px; padding: 18px 20px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.private__list b { font: 600 19px/1.2 var(--display); }
.private__list span { color: var(--ink-2); }

/* faq */
.faq__in { display: grid; gap: 8px; align-items: start; }
@media (min-width: 900px) { .faq__in { grid-template-columns: 340px 1fr; gap: 48px; } }
.faq__list { display: grid; gap: 10px; }
.faq details { padding: 16px 20px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.faq summary { cursor: pointer; font: 600 18px/1.3 var(--display); }
.faq details p { margin-top: 10px; color: var(--ink-2); }
.faq a { color: var(--play-deep); }

/* last call */
.last { text-align: center; padding-block: clamp(56px, 8vw, 96px) !important; }
.last__in { display: grid; gap: 22px; justify-items: center; }