/* /ask-echo: the hero, the morning walkthrough (a scroll-driven reel of real
   product screens), why it is different, its limits and the call to action.
   Tokens come from site.css. Without js/pages/ask-echo.js every scene is
   simply shown in order; the script only adds the typing, the reveal and
   "Play the morning". */

/* Hero: night stage with a composer that holds the first question. */
.ae-hero { background: radial-gradient(120% 90% at 85% 10%, var(--night-3) 0%, var(--night) 60%); color: var(--night-ink); }
.ae-hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(64px, 12vh, 140px); }
.ae-hero-copy { display: grid; gap: 22px; justify-items: start; }
.ae-hero .eyebrow { color: var(--mint); }
.ae-hero h1 { font-size: clamp(2.8rem, 6.6vw, 6rem); letter-spacing: -.05em; line-height: .95; }
.ae-hero h1 em { font-style: normal; color: var(--mint); }
.ae-hero .page-lead { color: var(--night-muted); max-width: 46ch; }
.ae-hero .button { background: var(--mint); color: var(--night); border-color: var(--mint); }
.ae-hero .button-ghost { background: transparent; color: var(--night-ink); border-color: var(--night-line); }
.ae-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ae-composer { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 10px 14px; align-items: center; padding: 22px; border-radius: 22px; background: var(--night-2); border: 1px solid var(--night-line); box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .8), 0 0 0 1px rgba(185, 231, 216, .04) inset; }
.ae-composer-label { grid-column: 1 / -1; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--night-muted); }
.ae-composer-text { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--mint) 45%, transparent); background: var(--night); min-height: 1.6em; }
.ae-composer-send { font-weight: 700; padding: 16px 20px; border-radius: 14px; background: var(--green); color: var(--white); }
.ae-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -.15em; background: var(--mint); animation: ae-blink 1.1s steps(2, start) infinite; }
@keyframes ae-blink { to { visibility: hidden; } }

/* Statement */
.ae-statement { background: var(--white); border-bottom: 1px solid var(--rule); padding-block: clamp(64px, 11vh, 120px); }
.ae-statement .wrap { display: grid; gap: 18px; }
.ae-statement-text { font-size: clamp(2rem, 4.4vw, 4rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; max-width: 24ch; color: var(--muted); text-wrap: balance; }
.ae-statement-text strong { color: var(--ink); }

/* Watch: the narrated film of the walkthrough below. */
.ae-watch { padding-block: clamp(64px, 10vh, 120px); display: grid; gap: 24px; }
.ae-watch-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; }
.ae-watch-heading h2 { font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.045em; margin-top: 12px; }
.ae-meta { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ae-video { border-radius: 18px; overflow: hidden; border: 1px solid var(--rule); background: var(--night); box-shadow: 0 50px 100px -60px rgba(15, 30, 46, .5); }
.ae-video .film-embed video, .ae-video .film-embed img { display: block; border: 0; border-radius: 0; }
.ae-video .film-embed figcaption { display: none; }
.ae-watch { scroll-margin-top: var(--header); }
.ae-transcript > p + p { margin-top: 8px; }

/* The film: a dark reel of scenes. */
.ae-film { background: var(--night); color: var(--night-ink); padding-block: clamp(72px, 12vh, 140px); scroll-margin-top: var(--header); }
.ae-film .eyebrow { color: var(--mint); }
.ae-film-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; }
.ae-film-heading h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); letter-spacing: -.045em; margin-top: 12px; }
.ae-film-lead { color: var(--night-muted); max-width: 52ch; margin-top: 12px; }
.ae-play { color: var(--night-ink); border-color: var(--night-line); }
.ae-play[aria-pressed="true"] { border-color: var(--mint); color: var(--mint); }
.ae-play[hidden] { display: none; }

/* The reel: the scene list, pinned while the film plays. */
.ae-reel { position: sticky; top: var(--header); z-index: 2; list-style: none; margin: clamp(28px, 5vh, 48px) 0 0; padding: 12px 0; display: flex; gap: 8px; overflow-x: auto; background: color-mix(in srgb, var(--night) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--night-line); scrollbar-width: none; }
.ae-reel a { display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--night-line); color: var(--night-muted); text-decoration: none; font-size: 14px; transition: color .25s, border-color .25s, background .25s; }
.ae-reel a span { font: 600 12px var(--mono); letter-spacing: .06em; }
.ae-reel a:hover, .ae-reel a[aria-current="step"] { color: var(--night); background: var(--mint); border-color: var(--mint); }

/* A scene: the question and what it means on the left, the real screen on
   the right, held in view while the copy scrolls past. */
.ae-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: clamp(48px, 9vh, 112px); border-bottom: 1px solid var(--night-line); scroll-margin-top: calc(var(--header) + 72px); }
.ae-scene-copy { display: grid; gap: 18px; align-content: start; padding-top: clamp(0px, 4vh, 48px); }
.ae-time { font: 600 clamp(2.4rem, 5vw, 4.4rem)/1 var(--mono); letter-spacing: -.04em; color: color-mix(in srgb, var(--mint) 70%, transparent); }
.ae-ask { justify-self: start; font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 600; padding: 14px 18px; border-radius: 18px 18px 18px 4px; background: var(--night-3); border: 1px solid var(--night-line); min-height: 1.6em; }
.ae-scene h3 { font-size: clamp(1.6rem, 2.8vw, 2.5rem); letter-spacing: -.035em; line-height: 1.08; color: var(--white); }
.ae-scene p { color: var(--night-muted); max-width: 52ch; }
.ae-scene .ae-ask { color: var(--night-ink); }
.ae-yours { border-left: 2px solid var(--mint); padding-left: 14px; }
.ae-yours strong { color: var(--mint); }

.ae-screen { position: sticky; top: calc(var(--header) + 88px); margin: 0; justify-self: center; width: min(100%, 400px); border-radius: 26px; overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px rgba(185, 231, 216, .18), 0 70px 140px -50px rgba(0, 0, 0, .85), 0 0 120px -30px color-mix(in srgb, var(--mint) 35%, transparent); }
.ae-screen img { display: block; width: 100%; height: auto; }
.ae-screen-wide { position: static; grid-column: 1 / -1; width: 100%; max-width: 1100px; border-radius: 18px; }

.ae-note { margin-top: 28px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--night-muted); }

/* Enhanced: each scene types its question, then the screen rises in. */
.ae-film.is-enhanced .ae-scene [data-screen] { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.ae-film.is-enhanced .ae-scene.is-shown [data-screen] { opacity: 1; transform: none; }
.ae-film.is-enhanced .ae-scene .ae-scene-copy > :not(.ae-time):not(.ae-ask) { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s; }
.ae-film.is-enhanced .ae-scene.is-shown .ae-scene-copy > :not(.ae-time):not(.ae-ask) { opacity: 1; transform: none; }
.ae-ask.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.1em; background: var(--mint); animation: ae-blink 1.1s steps(2, start) infinite; }

/* Why */
.ae-why { padding-block: clamp(72px, 12vh, 140px); display: grid; gap: 18px; }
.ae-why h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); letter-spacing: -.045em; }
.ae-why-lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--ink-2); max-width: 60ch; }
.ae-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.ae-why-card { padding: 26px; border-radius: 18px; border: 1px solid var(--rule); background: var(--paper); display: grid; gap: 10px; align-content: start; }
.ae-why-card h3 { font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.2; }
.ae-why-card p { color: var(--muted); }

/* Limits */
.ae-limits { background: var(--sage); padding-block: clamp(64px, 10vh, 120px); }
.ae-limits .wrap { display: grid; gap: 18px; }
.ae-limits h2 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.045em; }
.ae-limits-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ae-limits-list li { padding: 18px 20px; border-radius: 14px; background: var(--white); border: 1px solid color-mix(in srgb, var(--green) 25%, var(--rule)); font-weight: 600; }
.ae-limits-note { color: var(--green-2); max-width: 60ch; }

/* Call to action */
.ae-cta { padding-block: clamp(72px, 12vh, 140px); display: grid; gap: 16px; justify-items: start; }
.ae-cta h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); letter-spacing: -.045em; }
.ae-cta p { color: var(--muted); max-width: 56ch; }
.ae-cta .button-ghost { color: var(--ink); }

@media (max-width: 900px) {
  .ae-hero-inner, .ae-scene { grid-template-columns: 1fr; }
  .ae-scene-copy { padding-top: 0; }
  .ae-screen { position: static; width: min(100%, 360px); }
  .ae-why-grid { grid-template-columns: 1fr; }
  .ae-limits-list { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .ae-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Motion is decoration here, never meaning: without it, everything is shown. */
@media (prefers-reduced-motion: reduce) {
  .ae-caret, .ae-ask.is-typing::after { animation: none; }
  .ae-film.is-enhanced .ae-scene [data-screen],
  .ae-film.is-enhanced .ae-scene .ae-scene-copy > :not(.ae-time):not(.ae-ask) { opacity: 1; transform: none; transition: none; }
}