/* Wavely — landing.css (v3, 2026-09-28 — VISUAL_GAP_ANALYSIS.md; v2 kept in archive/v2/)
   Landing-only layout: the lit hero room, stages with their own ground, object sections,
   pricing on a stage, the FAQ, the closing. Resting states are finished states: no JS,
   reduced motion or a narrow/touch viewport renders the complete page. Arrival and the one pin
   are ADDED by landing.js. Tokens only — no raw colors here. */

.section { padding-block: var(--s-96); }
@media (min-width: 1024px) { .section { padding-block: var(--s-128); } }
.section--quiet { padding-block: var(--s-64); }
@media (min-width: 1024px) { .section--quiet { padding-block: var(--s-96); } }
.section--stage { padding-block: var(--s-64); }
@media (min-width: 1024px) { .section--stage { padding-block: var(--s-96); } }
.cv { content-visibility: auto; contain-intrinsic-size: auto 720px; }
.section__head { display: grid; gap: var(--s-16); margin-bottom: var(--s-48); }
.section__head .eyebrow { margin-bottom: var(--s-8); }

/* Stage ground: plate + glow live in their own clipped layer. The stage clips too (v3.1, founder 2026-09-30:
   no light may spill past a panel's edge onto the page). */
.stage::before, .stage::after { display: none; }
.stage__ground { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: -1; pointer-events: none; }
.stage__ground::before { content: ""; position: absolute; inset: 0; background: var(--glow-ember); }
.stage__ground::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: var(--veil-ember); }
.stage__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }

/* ---------- Hero (unpinned; the waveform scrubs on scroll-out): the room ---------- */
.hero { position: relative; min-height: 100dvh; display: grid; align-content: end; overflow: hidden; isolation: isolate; padding-block: calc(72px + var(--s-24)) 0; }
.hero__atmo { position: absolute; inset: 0; z-index: -3; }
.hero__atmo img { width: 100%; height: 100%; object-fit: cover; opacity: .72; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
/* Scrim reaches ≥ 70% under the copy column only; the stage side stays lit (§3c) */
.hero__scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, var(--scrim) 0%, var(--scrim) 40%, rgb(11 11 15 / .35) 62%, transparent 78%), linear-gradient(180deg, var(--bg) 0%, transparent 16%, transparent 80%, var(--bg) 100%); }
.hero__glow { position: absolute; inset: 0; z-index: -1; background: var(--glow-ember); --glow-x: 70%; --glow-y: 68%; pointer-events: none; }
.hero__grid { display: grid; gap: var(--s-48); align-items: end; }
.hero__copy { display: grid; gap: var(--s-24); align-content: center; padding-bottom: var(--s-24); }
.hero__title { max-width: none; font-size: clamp(3rem, 1.25rem + 5.5vw, 7rem); }
.hero__title .line { display: block; white-space: nowrap; }
.hero__sub { max-width: 44ch; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); }
.hero__stage { position: relative; display: grid; justify-items: center; z-index: 0; }
.hero__stage .frame { width: min(100%, 402px); }
@media (min-width: 1024px) {
  .hero { align-content: center; padding-block: calc(72px + var(--s-32)) 0; }
  .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--s-64); align-items: center; }
  .hero__stage { justify-items: end; align-self: end; margin-bottom: -96px; } /* the phone sinks into the band (one edge-cross) */
  .hero__stage .frame { width: min(440px, calc(72dvh * 402 / 874)); }
  .hero__copy { padding-bottom: var(--s-96); }
}
@media (min-width: 1024px) and (min-height: 1000px) { .hero__stage .frame { width: min(440px, calc(76dvh * 402 / 874)); } }
@media (min-width: 1600px) { .hero__stage .frame { width: min(480px, calc(76dvh * 402 / 874)); } .hero__title { font-size: clamp(3rem, 1.25rem + 5.2vw, 8rem); } }
/* Phones: the object touches the viewport edge and fades at the crop line */
@media (max-width: 1023px) {
  .hero__stage { margin-inline: calc(-1 * var(--gutter)); margin-bottom: -48px; }
  .hero__stage .frame { width: min(76vw, 340px); aspect-ratio: auto; height: 46dvh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .hero__stage .frame img { object-position: top; }
  .lit.hero__stage::before { inset: -8% -30% -12%; }
}

/* The waveform room's floor: the band fades the phone into --bg, aligned to the page grid (§43) */
.hero__wave { position: relative; z-index: 1; margin-top: 0; padding-top: var(--s-96); padding-bottom: var(--s-64); background: linear-gradient(180deg, transparent, var(--bg) 96px); }
.hero__wave .wave { height: 96px; }
@media (min-width: 768px) { .hero__wave .wave { height: 160px; } }
@media (min-width: 1280px) { .hero__wave .wave { height: 200px; } }
.wave__caption { position: absolute; top: calc(100% + var(--s-8)); left: var(--tick); transform: translateX(-50%); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.beats { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); margin-top: var(--s-48); padding-top: var(--s-16); border-top: 1px solid var(--edge-soft); font-size: var(--fs-meta); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.beat { display: inline-flex; align-items: center; gap: var(--s-8); min-height: 32px; transition: color var(--t-std) var(--ease); }
.beat.is-on { color: var(--text); }
.beat__n { color: var(--text-muted); }
.beat.is-on .beat__n { color: var(--ember); }
.beat__glyph { width: 20px; height: 20px; position: relative; display: inline-grid; place-items: center; }
.beat__glyph svg { width: 20px; height: 20px; }
.beat .flame { width: 20px; height: 20px; }
.beat .dl { transition: color var(--t-std) var(--ease); }
.beat .dl.is-on { color: var(--ember); }
.beat .dl.is-on path { stroke: var(--ember); }

/* Arrival (§7 v3: 120ms delayed start, 90ms line stagger so the choreography is perceivable) */
.js .arrive { opacity: 1; transform: none; }
.js.pre-load .arrive { opacity: 0; transform: translateY(24px); }
.js.pre-load .hero__stage.arrive { opacity: 0; transform: scale(1.03); }
.js.fonts-ready .arrive { transition: opacity var(--t-arrive) var(--ease-out), transform var(--t-arrive) var(--ease-out); }
.js.fonts-ready .hero__sub.arrive { transition-delay: 260ms; }
.js.fonts-ready .hero__ctas.arrive { transition-delay: 320ms; }
.js.fonts-ready .hero__stage.arrive { transition-delay: 200ms; transition-duration: 640ms; }
.mask-line { display: block; overflow: hidden; }
.js .mask-line .line { display: block; transform: none; }
.js.pre-load .mask-line .line { transform: translateY(110%); }
.js.fonts-ready .mask-line .line { transition: transform var(--t-arrive) var(--ease-out); }
.js.fonts-ready .mask-line:nth-child(2) .line { transition-delay: 90ms; }
.js.fonts-ready .mask-line:nth-child(3) .line { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  .js.pre-load .arrive, .js.pre-load .hero__stage.arrive { transform: none; }
  .js.pre-load .mask-line .line { transform: none; }
  .js.fonts-ready .arrive, .js.fonts-ready .mask-line .line { transition-duration: 160ms; transition-delay: 0ms; }
}

/* ---------- Pain (quiet): a display fragment + a statement, never a ten-line column ---------- */
.pain { display: grid; gap: var(--s-32); }
.pain__lead { display: grid; gap: var(--s-24); }
.pain__lead .d2 { max-width: 12ch; }
.pain__copy { display: grid; gap: var(--s-16); align-content: end; }
@media (min-width: 1024px) { .pain { grid-template-columns: 7fr 5fr; gap: var(--s-96); align-items: end; } }

/* ---------- Wave explainer (quiet, one large lit card that rises into the section above) ---------- */
.explain-section { position: relative; }
.explain { display: grid; gap: var(--s-48); align-items: center; }
@media (min-width: 900px) { .explain { grid-template-columns: minmax(300px, 5fr) 7fr; gap: var(--s-96); } .explain__card { margin-top: calc(-1 * var(--s-64)); } }
.explain__card { width: 100%; max-width: 420px; margin-inline: auto; }
.explain__card .wave-card__art { aspect-ratio: 9 / 16; }
.wave-card__art .chips { position: absolute; left: var(--s-12); right: var(--s-12); bottom: var(--s-12); }
.explain__copy { display: grid; gap: var(--s-24); }
.explain__copy strong { font-weight: 500; color: var(--text); }
.explain__rail { margin-top: var(--s-64); }
.wave-card__stats { font-size: var(--fs-meta); font-variant-numeric: tabular-nums; color: var(--text-muted); display: flex; gap: var(--s-16); align-items: center; }
.wave-card__stats .flame { width: 18px; height: 18px; }
.card-hover { transition: transform var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease); }
@media (hover: hover) and (pointer: fine) { .card-hover:hover { transform: translateY(-2px); box-shadow: var(--edge-top), inset 0 0 0 1px var(--border-hover); } }

/* ---------- Screens (stage, the one pin) ---------- */
.screens-stage { --glow-x: 76%; --glow-y: 62%; }
.screens-stage .section__head { margin-bottom: var(--s-32); }
.screens__side { display: grid; align-content: center; min-width: 0; }
.screens { display: grid; gap: var(--s-48); }
.screens__list { display: grid; gap: var(--s-24); }
.screen-item { display: grid; gap: var(--s-8); padding-left: var(--s-24); position: relative; }
.screen-item::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--hairline); border-radius: 1px; }
.screen-item::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--ember); border-radius: 1px; transform: scaleY(0); transform-origin: top; transition: transform var(--t-std) var(--ease); }
.screen-item.is-on::after { transform: scaleY(1); }
.screen-item h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-d4); line-height: var(--lh-d4); color: var(--text-muted); transition: color var(--t-std) var(--ease); }
.screen-item.is-on h3 { color: var(--text); }
.screen-item p { color: var(--text-muted); max-width: 40ch; }
.screens__phone { position: relative; }
.frame-stack { position: relative; }
.frame-stack img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-max) var(--ease), transform var(--t-max) var(--ease); transform: translateY(8px); }
.frame-stack img.is-on { opacity: 1; transform: none; }
/* No pin (and the strip of full screenshots) on narrow/touch/reduced-motion AND on short screens where the
   pinned panel could not fit under the nav (founder, 2026-09-29: never a cut-off screenshot). */
@media (max-width: 1023px), (hover: none), (prefers-reduced-motion: reduce), (max-height: 799px) {
  .screens__phone { display: none; }
  .screens__list { display: flex; gap: var(--s-16); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-12); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .screens__list::-webkit-scrollbar { display: none; }
  .screen-item { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; padding-left: 0; }
  .screen-item::before, .screen-item::after { display: none; }
  .screen-item .frame { margin-bottom: var(--s-12); }
  .screen-item h3 { font-size: var(--fs-d5); color: var(--text); }
}
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) and (min-height: 800px) {
  .screen-item .frame { display: none; }
  /* Pinned layout (founder, 2026-09-30): the phone as big as the viewport allows and centered in its
     column, not pushed to the panel's edge. Vertical panel padding drops to 48 so the phone gets the
     room; the pin holds the panel 88px from the top, so height = 100vh − 88 − 2×48 − 24. */
  .screens-stage { padding-top: var(--s-48); padding-bottom: var(--s-48); }
  .screens { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-48); align-items: center; }
  .screens__list { gap: var(--s-16); }
  .screens__phone { display: grid; justify-items: center; margin-right: 0; }
  .screens__phone .frame { height: min(920px, calc(100vh - 88px - 2 * var(--s-48) - 24px)); width: auto; }
}
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) and (min-height: 800px) and (max-height: 900px) {
  .screens-stage .section__head { margin-bottom: var(--s-16); gap: var(--s-8); }
  .screen-item p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- Hub teaser: an object section (the real hub row design, real data) ---------- */
.teaser { display: grid; gap: var(--s-48); }
.teaser__copy { display: grid; gap: var(--s-16); }
.teaser .btn { justify-self: start; }
@media (min-width: 1024px) { .teaser { grid-template-columns: 5fr 7fr; gap: var(--s-64); align-items: center; } .desk { margin-right: calc(-1 * (var(--gutter) + var(--s-16))); } }
.desk { padding: var(--s-16); display: grid; gap: var(--s-8); container-type: inline-size; }
.desk__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-4) var(--s-8) var(--s-12); border-bottom: 1px solid var(--hairline); }
.desk__tabs { display: flex; gap: var(--s-4); }
.desk__tab { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-12); font-weight: 500; font-size: var(--fs-meta); color: var(--text-muted); position: relative; }
.desk__tab.is-on { color: var(--text); }
.desk__tab.is-on::after { content: ""; position: absolute; left: var(--s-12); right: var(--s-12); bottom: 0; height: 2px; background: var(--ember); }
.desk__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s-12); align-items: center; min-height: 72px; padding: var(--s-8); border-radius: var(--r-8); }
.desk__thumb { width: 36px; height: 64px; border-radius: var(--r-4); overflow: hidden; background: var(--surface); }
.desk__thumb img { width: 100%; height: 100%; object-fit: cover; }
.desk__meta { display: grid; gap: 2px; min-width: 0; }
.desk__title { font-weight: 500; font-size: var(--fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk__sub { font-size: var(--fs-micro); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk__row .wave { height: 28px; margin-top: var(--s-4); --played: 0%; }
.desk__row:nth-child(2) .wave { --played: 38%; }
.desk__dl { white-space: nowrap; }
@container (max-width: 520px) { .desk__row { grid-template-columns: 36px minmax(0, 1fr); } .desk__dl { grid-column: 2; justify-self: start; } }
@media (hover: hover) and (pointer: fine) { .desk__row:hover { background: var(--overlay-1); } }

/* ---------- Who it's for: two light cards with real cover thumbnails ---------- */
.who { display: grid; gap: var(--s-24); }
@media (min-width: 768px) { .who { grid-template-columns: 1fr 1fr; gap: var(--s-32); } }
.who__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-24); align-items: start; padding: var(--s-24); }
.who__item h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-d4); line-height: var(--lh-d4); margin-bottom: var(--s-8); }
.who__item p { color: var(--text-muted); max-width: 44ch; }
.who__thumb { width: 96px; height: 96px; border-radius: var(--r-12); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--overlay-edge); }
.who__thumb img { width: 100%; height: 100%; object-fit: cover; }
.who__credit { display: block; margin-top: var(--s-12); font-size: var(--fs-micro); color: var(--text-muted); }
@media (max-width: 479px) { .who__item { grid-template-columns: 1fr; } }

/* ---------- Pricing (stage): a decision on its own ground ---------- */
.pricing-stage { --glow-x: 50%; --glow-y: 0%; }
.plans { display: grid; gap: var(--s-16); }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { position: relative; display: grid; gap: var(--s-12); align-content: start; padding: var(--s-32); overflow: hidden; }
.plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tier-color, var(--tier-basic)); }
.plan--basic { --tier-color: var(--tier-basic); }
.plan--gold { --tier-color: var(--tier-gold); }
.plan--platinum { --tier-color: var(--tier-platinum); }
.plan--opal { --tier-color: var(--tier-opal); }
.plan--obsidian { --tier-color: var(--tier-obsidian); }
.plan .tier { justify-self: start; position: relative; }
.plan .tier::before { content: ""; position: absolute; inset: -16px -24px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--tier-color, var(--tier-basic)) 12%, transparent), transparent 70%); z-index: -1; pointer-events: none; }
.plan--featured { box-shadow: var(--edge-top), inset 0 0 0 1px var(--ember-a-45); }
.plan__price { display: flex; align-items: baseline; gap: var(--s-4); margin-top: var(--s-8); font-variant-numeric: tabular-nums; }
.plan__price .display { font-size: var(--fs-56); line-height: 1; letter-spacing: -0.01em; }
.plan__per { font-size: var(--fs-meta); color: var(--text-muted); }
.plan__stats { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.plan__for { color: var(--text-muted); padding-top: var(--s-12); border-top: 1px solid var(--hairline); }
.plan__tag { font-size: var(--fs-meta); color: var(--text-muted-surface); }
.specialists { margin-top: var(--s-32); padding-top: var(--s-24); border-top: 1px solid var(--hairline); }
.specialists__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-d5); line-height: var(--lh-d5); margin-bottom: var(--s-16); }
.specialists__grid { display: grid; gap: var(--s-16); }
@media (min-width: 640px) { .specialists__grid { grid-template-columns: 1fr 1fr; } }
.plan--compact { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-12) var(--s-16); padding: var(--s-24); }
.plan--compact .plan__body { display: grid; gap: var(--s-4); }
.plan--compact .plan__price { margin: 0; }
.plan--compact .plan__price .display { font-size: var(--fs-price); }
.plan--compact .plan__for { border: 0; padding: 0; }
.pricing__foot { margin-top: var(--s-32); display: grid; gap: var(--s-16); max-width: 70ch; }
.pricing__foot a:not(.btn) { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.pricing__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); }

/* ---------- FAQ: head left, questions right ---------- */
.faq-layout { display: grid; gap: var(--s-16); align-items: start; }
@media (min-width: 1024px) { .faq-layout { grid-template-columns: 5fr 7fr; gap: var(--s-96); } .faq-layout .section__head { position: sticky; top: calc(72px + var(--s-24)); } }
.faq { display: grid; gap: 0; max-width: 70ch; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); min-height: 64px; padding: var(--s-16) 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-d5); line-height: var(--lh-d5); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--fs-d5); color: var(--text-muted); flex: none; width: 24px; text-align: center; transition: transform var(--t-std) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline-offset: 4px; border-radius: var(--r-4); }
.faq p { color: var(--text-muted); padding-bottom: var(--s-24); max-width: 60ch; }
@supports (interpolate-size: allow-keywords) { .faq details { interpolate-size: allow-keywords; } .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-max) var(--ease), content-visibility var(--t-max) allow-discrete; } .faq details[open]::details-content { block-size: auto; } }

/* ---------- Closing (stage, warm): the emissive mark ---------- */
.closing { --glow-x: 50%; --glow-y: 32%; text-align: center; display: grid; gap: var(--s-24); justify-items: center; padding-block: var(--s-64) var(--s-96); }
.closing .d2 { max-width: none; }
.closing__mark { width: min(420px, 80%); aspect-ratio: 16 / 9; display: grid; place-items: center; margin-bottom: calc(-1 * var(--s-24)); }
.closing__mark img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 40%, transparent 78%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 40%, transparent 78%); }
.closing__sub { color: var(--text-muted); font-size: var(--fs-lede); }

/* CSP: no inline style attributes — fixed values live here */
.ring--28 { --used: 28; }