/* didao.app — layout and components. Every colour, type style and space comes from didao-tokens.css.
   Loaded after css/waitlist-form.css, so page-level rules here win where both style the band. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-6); -webkit-text-size-adjust: 100%; }
body { font: var(--font-body); overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1 { font: var(--font-hero); letter-spacing: var(--tracking-heading); text-wrap: balance; font-optical-sizing: auto; }
h2 { font: var(--font-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; font-optical-sizing: auto; }
h3 { font: var(--font-card); letter-spacing: var(--tracking-heading); text-wrap: balance; font-optical-sizing: auto; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
[lang="zh-Hans"] { font-family: var(--font-cjk); }
a { text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
button, select, input { font: inherit; color: inherit; }
::selection { background: var(--highlight); color: var(--ink); }
:focus-visible { outline: 2px solid var(--coral-text); outline-offset: 3px; border-radius: var(--radius-sm); }
html { scrollbar-color: var(--mutedtext) var(--background); accent-color: var(--coral-text); caret-color: var(--coral-text); }
a, button, select, summary { -webkit-tap-highlight-color: transparent; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--page-gutter)); margin-inline: auto; padding-inline: var(--page-gutter); }
.skip-link { position: absolute; z-index: 10; top: var(--space-3); left: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--background); color: var(--ink); font: var(--font-label); border-radius: var(--radius-md); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* ---------- Controls ---------- */
.btn-primary { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-6); font: 700 17px/1 var(--font-sans); text-decoration: none; transition: transform 160ms var(--ease-out); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.pill-outline { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6); border: 2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: var(--font-label); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.pill-outline:hover { background: var(--highlight); }
.pill-outline:active { transform: scale(.97); }
.pill-small { min-height: 44px; padding: 0 var(--space-4); }

/* ---------- Discs and inline poses ---------- */
.disc { display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--disc); }
.disc > img { grid-area: 1 / 1; width: 82%; }
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
/* Without the floating companion, each section shows its pose beside its headline. */
.pose-inline.disc { width: 64px; height: 64px; margin-top: .1em; }
.ghost-float .pose-inline { display: none; }

/* ---------- 0 · Header ---------- */
.header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--header-h); }
.brand { display: block; border-radius: var(--radius-sm); }
.brand img { width: auto; height: 40px; }

/* ---------- 1 · Hero ---------- */
.hero { padding-top: var(--space-12); }
.hero-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-head .head-row { justify-content: center; }
.accent { color: var(--coral-text); }
.hero-line { font: var(--font-lead); color: var(--mutedtext); margin-top: var(--space-6); max-width: 30em; }
.join { width: 100%; max-width: 560px; margin-top: var(--space-10); display: grid; justify-items: center; }
.join .waitlist-success { text-align: center; }

.stage { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(32px, 7vw, 96px); margin-top: var(--space-16); padding: var(--space-16) var(--space-8) var(--space-20); background: var(--warmsurface); border: 1px solid var(--hairline); border-radius: var(--radius-stage); }
.clip { display: grid; justify-items: center; gap: var(--space-4); width: clamp(220px, 24vw, 300px); }
.clip-offset { margin-top: 64px; }
.clip figcaption { font: var(--font-label); }
/* CSS phone frame: rounded rect with a bezel, never a device image. */
.phone { position: relative; width: 100%; aspect-ratio: 288 / 606; padding: 10px; border-radius: 40px; background: var(--bezel); }
.phone video, .phone > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; background: var(--charcoal); }
.clip-placeholder { display: none; position: absolute; inset: 10px; border-radius: 30px; background: var(--background); place-items: center; }
.clip-placeholder .disc { width: 62%; aspect-ratio: 1; }
.clip.is-missing video { display: none; }
.clip.is-missing .clip-placeholder { display: grid; }

/* ---------- 2 · Proof bar (as built) ---------- */
.proof { position: relative; z-index: 2; margin-top: var(--space-16); }
.proof-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); padding-block: var(--space-8); border-block: 1px solid var(--hairline); background: var(--background); }
.proof-list li { display: flex; align-items: center; justify-content: center; gap: var(--space-3); font: var(--font-label); text-align: left; }
.proof-list .icon { color: var(--coral-text); }

/* ---------- 3 · Benefits ---------- */
.benefits { padding-block: var(--space-24); }
.benefit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-16); }
.benefit { display: grid; justify-items: start; align-content: start; gap: var(--space-4); }
.disc-benefit { width: 96px; height: 96px; margin-bottom: var(--space-2); }
.benefit p { color: var(--mutedtext); max-width: 26em; }
.benefit-swap .pose-b { opacity: 0; }
.benefit-swap .disc > img { transition: opacity 180ms var(--ease-out); }
.benefit-swap:hover .pose-a { opacity: 0; }
.benefit-swap:hover .pose-b { opacity: 1; }

/* ---------- 4 · How it works ---------- */
.how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: center; padding-block: var(--space-16) var(--space-24); }
.how-still { grid-column: 1 / span 6; justify-self: center; width: clamp(220px, 24vw, 300px); }
.how-copy { grid-column: 7 / -1; }
.steps { counter-reset: step; display: grid; gap: var(--space-8); margin-top: var(--space-10); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; column-gap: var(--space-4); align-items: baseline; }
.steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: 50%; font: 700 16px/1 var(--font-sans); align-self: start; }
.step-text { font: var(--font-card); letter-spacing: var(--tracking-heading); }
.step-example { grid-column: 2; font: var(--font-small); color: var(--mutedtext); margin-top: var(--space-2); }
.step-example [lang] { font: var(--font-example); color: var(--ink); }

/* ---------- 5 · Features ---------- */
.features { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: center; padding-block: var(--space-16) var(--space-24); }
.features-copy { grid-column: 1 / span 7; }
/* Every row is the same height and every icon sits on its item's first line, even when an item wraps. */
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-6) var(--space-10); margin-top: var(--space-10); }
.feature-list li { display: flex; align-items: flex-start; gap: var(--space-3); font: var(--font-item); }
.feature-list .icon { margin-top: .05em; }
.feature-list .icon { color: var(--coral-text); }
.features-clips { grid-column: 8 / -1; display: flex; justify-content: center; gap: var(--space-6); }
.clip-small { width: clamp(140px, 13vw, 190px); }
.clip-small .phone { padding: 7px; border-radius: 28px; }
.clip-small .phone video, .clip-small .clip-placeholder { border-radius: 22px; }
.clip-small .clip-placeholder { inset: 7px; }
.clip-small .clip-small.clip-offset { margin-top: 48px; }

/* ---------- 6 · Early-access band ---------- */
.early-access { padding: clamp(72px, 9vw, 112px) var(--page-gutter); }
.early-access .inner { max-width: 900px; }
.early-access h2 { font: var(--font-heading); letter-spacing: var(--tracking-heading); margin: 0 0 var(--space-4); }
.early-access h2 .line { display: inline-block; }
.early-access .lede { font: var(--font-lead); margin: 0 0 var(--space-8); }
.early-access .on-coral { display: grid; justify-items: center; }
.band-pose { display: block; width: clamp(96px, 11vw, 132px); margin: 0 auto var(--space-4); }
.band-fallback { display: inline-flex; align-items: center; gap: .35em; min-height: 48px; font: 700 18px/1.2 var(--font-sans); }
.band-fallback:hover { text-decoration-thickness: 4px; }
.early-access :focus-visible { outline-color: var(--on-coral); }

/* ---------- 10 · FAQ (as built) ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); padding-block: var(--space-32) var(--space-24); }
.faq-head { grid-column: 1 / span 4; }
.faq-head .head-row { position: sticky; top: var(--space-8); justify-content: flex-start; }
.faq-head h2 { max-width: 8ch; }
.faq-list { grid-column: 5 / -1; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; padding-block: var(--space-4); font: var(--font-question); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { margin-left: auto; transition: transform 200ms var(--ease-out); }
.faq details[open] > summary .icon { transform: rotate(45deg); }
.faq summary:hover span { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px; }
.faq details p { max-width: 60ch; color: var(--mutedtext); padding-bottom: var(--space-6); margin-top: calc(-1 * var(--space-2)); }

/* ---------- 11 · Footer (as built) ---------- */
.footer { border-top: 1px solid var(--hairline); margin-top: var(--space-12); }
.footer-inner { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-8); min-height: 200px; padding-block: var(--space-12) var(--space-10); }
.footer-peek { position: absolute; left: calc(var(--page-gutter) + 170px); top: 0; width: 120px; transition: opacity 180ms var(--ease-out), transform 260ms var(--ease-out); }
/* ghost-peek's baseline sits at 96.1% of its height: park that line on the footer hairline. */
.peek-light { width: 120px; transform: translateY(calc(-96.1% - .5px)); }
.peek-dark { display: none; width: 76px; transform: translateY(-50%); margin-left: 20px; }
/* With the floating companion, the dock appears only when the companion arrives. */
.ghost-float .footer-peek { opacity: 0; transform: translateY(12px); }
.ghost-float .footer.is-docked .footer-peek { opacity: 1; transform: none; }
.footer-logo { width: auto; height: 34px; }
.footer-line { font: var(--font-small); color: var(--mutedtext); margin-top: var(--space-3); }
.footer-side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.footer-nav a { color: var(--ink); font: var(--font-label); text-decoration: none; padding-block: var(--space-3); }
.footer-nav a:hover { text-decoration: underline; text-underline-offset: .3em; }
.theme-control { display: flex; align-items: center; gap: var(--space-3); font: var(--font-small); color: var(--mutedtext); }
.theme-control select { min-height: 44px; padding: 0 var(--space-8) 0 var(--space-3); border: 1.5px solid var(--control-border); border-radius: 999px; background: var(--background); color: var(--ink); font: var(--font-label); cursor: pointer; }

/* Dark: the ghost needs a peach disc to keep its charcoal outline. */
[data-theme="dark"] .peek-light { display: none; }
[data-theme="dark"] .peek-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .peek-light { display: none; }
  :root:not([data-theme="light"]) .peek-dark { display: block; }
}

/* ---------- Companion ghost (js/companion-ghost.js) ---------- */
.companion { position: fixed; z-index: 5; bottom: 18vh; width: var(--ghost-size); height: var(--ghost-size); pointer-events: none; }
.companion-move, .companion-hop { width: 100%; height: 100%; will-change: transform; }
.companion-move { transition: opacity 180ms var(--ease-out); }
.companion.is-away .companion-move { opacity: 0; }
.companion-hop { position: relative; display: grid; place-items: center; pointer-events: auto; cursor: pointer; }
.companion.is-away .companion-hop { pointer-events: none; }
.companion-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--disc); }
.companion-img { grid-area: 1 / 1; position: relative; width: 82%; opacity: 0; transition: opacity 180ms var(--ease-out); }
.companion-img.is-on { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: start; }
  .proof-list li { justify-content: flex-start; }
  .benefit-list { gap: var(--space-12) var(--space-8); }
  .features-copy { grid-column: 1 / -1; }
  .features-clips { grid-column: 1 / -1; margin-top: var(--space-16); }
}

@media (max-width: 800px) {
  .hero { padding-top: var(--space-8); }
  .stage { flex-direction: column; align-items: center; gap: var(--space-12); padding: var(--space-10) var(--space-4) var(--space-12); border-radius: 28px; }
  .clip { width: min(78vw, 320px); }
  .clip-offset { margin-top: 0; }
  .benefit-list { grid-template-columns: 1fr; max-width: 520px; }
  .how { padding-block: var(--space-8) var(--space-20); }
  .how-still, .how-copy { grid-column: 1 / -1; }
  .how-copy { order: -1; margin-bottom: var(--space-12); }
  .how-still { width: min(64vw, 280px); }
  .faq-head, .faq-list { grid-column: 1 / -1; }
  .faq-head .head-row { position: static; margin-bottom: var(--space-8); }
  .faq-head h2 { max-width: none; }
}

@media (max-width: 640px) {
  .feature-list { grid-template-columns: 1fr; grid-auto-rows: auto; gap: var(--space-4); }
  .clip-small { width: min(40vw, 170px); }
  .clip-small.clip-offset { margin-top: 32px; }
  .benefits { padding-block: var(--space-16); }
  .faq { padding-block: var(--space-20) var(--space-16); }
  .footer-peek { left: auto; right: var(--page-gutter); }
  .footer-inner { flex-direction: column; align-items: flex-start; padding-top: var(--space-16); }
}

@media (max-width: 420px) {
  .proof-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-6); }
  .early-access h2 { font-size: clamp(30px, 8.6vw, 38px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Contrast: css/waitlist-form.css fades the band placeholder to 70% (3.1:1 on coral). Full charcoal is 4.9:1. */
.on-coral .waitlist-field::placeholder { opacity: 1; }