/* The combined page: C's cinematic hero and pricing, B's hands-on demo between them.
   Mobile first. Hero styles are scoped to .scene so they never reach the redrawn phone,
   which uses the same class names (.prompt, .tag, .orb, .note) for the app's own parts. */

/* ---------- Header ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px; background: linear-gradient(#000 20%, rgba(0,0,0,0));
}
.top { transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; }
.top.solid { background: rgba(0,0,0,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--hair); }
.top nav { display: flex; align-items: center; gap: 2px; }
.top nav a { display: inline-grid; place-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; color: var(--soft); text-decoration: none; border-radius: 999px; }
.top nav a:hover { color: var(--ivory); }
.top nav .get { border: 1px solid rgba(237,235,230,.2); background: rgba(237,235,230,.06); color: var(--ivory); margin-left: 4px; }
@media (max-width: 379.98px) { .top nav a[href="#demo"] { display: none; } }
section[id] { scroll-margin-top: 64px; }

/* ---------- 1. Hero ---------- */
.hero {
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh;
  padding: 66px var(--gutter) 22px; display: grid; justify-items: center; align-content: center; gap: 14px; text-align: center;
}
.sky { position: absolute; inset: 0; z-index: -1; background: url(img/stars.svg) center / 900px auto; }
.sky::after { content: ""; position: absolute; inset: 0; background: url(img/stars.svg) 30% 20% / 1500px auto; opacity: .5; }
h1 { font-size: clamp(42px, 7vw, 92px); line-height: 1; letter-spacing: -0.04em; font-weight: 600; color: var(--ivory); }
h1 .ln { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
h1 .ln > span { display: inline-block; }
.hero .lede { margin: 14px auto 0; max-width: 31rem; font-size: clamp(16px, 1.5vw, 19px); color: var(--soft); text-wrap: balance; }

.scene { margin: 0; position: relative; width: 100%; display: grid; justify-items: center; }
.scene .hole-box { position: relative; width: min(66vw, 31svh, 520px); aspect-ratio: 1; }
.scene .bh { width: 100%; height: 100%; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); }
.scene .halo { position: absolute; inset: -24%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(150,155,190,.14), rgba(150,155,190,.04) 55%, transparent 72%); }
.scene .flare { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(237,219,184,.45), rgba(237,219,184,0) 70%); opacity: 0; }
.scene .orb { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; z-index: 2; background: #fff8ea; box-shadow: 0 0 9px 3px rgba(237,219,184,.75), 0 0 28px 9px rgba(237,219,184,.25); opacity: 0; }
.scene .tag { position: absolute; left: 0; top: 0; z-index: 3; white-space: nowrap; font-size: 14px; color: rgba(237,235,230,.86); opacity: 0; }
.scene .prompt { position: absolute; left: 0; right: 0; top: 78%; font-size: 15px; color: var(--text); opacity: 0; }

.scene .slot { position: relative; width: min(92vw, 380px); margin-top: -4px; }
.scene .said { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; column-gap: .27em; margin-bottom: 10px; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.35; color: var(--ivory); }
.scene .said .wd { display: inline-block; }
.scene .note {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 0 12px; align-items: center; text-align: left;
  padding: 12px 15px; border-radius: 22px; background: rgba(58, 58, 64, .62); border: 1px solid rgba(237,235,230,.08);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.scene .note img { grid-row: span 2; width: 38px; height: 38px; border-radius: 9px; }
.scene .note b { font-size: 15px; font-weight: 600; color: var(--ivory); }
.scene .note time { font-size: 13px; color: var(--soft); }
.scene .note span { grid-column: 2 / 4; font-size: 15px; color: var(--text); }
/* With motion the sentence and the notification share one slot; without it, both show (the last frame). */
html.motion .scene .slot { height: 76px; }
html.motion .scene .said { position: absolute; inset: 0; margin: 0; }
html.motion .scene .note { position: absolute; left: 0; right: 0; top: 4px; opacity: 0; }

.scene .again { position: absolute; right: 0; top: 0; min-height: 44px; font-size: 13px; }
.cta { display: grid; justify-items: center; gap: 8px; margin-top: 6px; }
.meta { font-size: 13px; color: var(--faint); }

html.motion .hero .pitch > *, html.motion .hero .cta { visibility: hidden; }

/* short phones (and landscape): keep the badge in the first screen */
@media (max-height: 620px) and (max-width: 959.98px) {
  .hero { gap: 10px; padding-top: 60px; }
  h1 { font-size: 36px; }
  .hero .lede { margin-top: 8px; font-size: 15px; }
  .scene .hole-box { width: min(56vw, 27svh); }
  html.motion .scene .slot { height: 68px; }
}

@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 32px; text-align: left; padding: 96px max(48px, 6vw) 48px; }
  .pitch { grid-column: 1; grid-row: 1; align-self: end; }
  .hero .lede { margin-left: 0; }
  .hero .cta { grid-column: 1; grid-row: 2; align-self: start; justify-items: start; margin-top: 24px; }
  .scene { grid-column: 2; grid-row: 1 / span 2; }
  .scene .hole-box { width: min(58svh, 520px); }
  .scene .again { right: 4%; top: 8%; }
}

/* ---------- 2. The guided demo ---------- */
.try { padding: 64px var(--gutter) 56px; border-top: 1px solid var(--hair); background: radial-gradient(60% 50% at 50% 40%, rgba(150,155,190,.06), transparent 70%); }
.try-head { text-align: center; max-width: 34rem; margin: 0 auto 10px; }
.eyebrow { margin-bottom: 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.try-head h2, .pricing h2 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; color: var(--ivory); text-wrap: balance; }
.try-head p:last-child { margin-top: 10px; font-size: 15px; color: var(--soft); text-wrap: pretty; }

.demo { display: grid; gap: 14px; justify-items: center; max-width: 64rem; margin: 0 auto; }
.modes { display: inline-flex; flex-wrap: wrap; justify-content: center; padding: 4px; gap: 2px; border-radius: 26px; background: rgba(237,235,230,.06); border: 1px solid var(--hair); }
.modes button {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--soft);
}
.modes button:hover { color: var(--ivory); }
.modes button[aria-selected="true"] { background: var(--ivory); color: #000; }
@media (max-width: 359.98px) { .modes button { padding: 0 9px; font-size: 14px; } }

/* on a phone: heading, tabs, the line, the phone, steps, saved.
   on a desktop: the phone on the left, everything else stacked beside it. */
.stage { display: grid; width: 100%; max-width: 26rem; gap: 14px; }
/* small enough that the phone and both steps usually share the screen; demo.js brings the
   phone back into view when a step is pressed with it scrolled away */
.rig { position: relative; --pw: max(180px, min(64vw, 260px, calc((100svh - 380px) / 2.17))); }
html:not(.js) .rig, html:not(.js) .demo > .line, html:not(.js) .ledger .saved { display: none; }

/* the instruction and the "heard" sentence share one fixed-height line, so nothing jumps */
.line { display: grid; min-height: 3.1em; align-items: center; width: 100%; max-width: 26rem; font-size: 17px; }
.line > * { grid-area: 1 / 1; }
.how { text-align: center; font-size: 15px; line-height: 1.4; color: var(--soft); }
.line .said { text-align: center; font-size: 18px; line-height: 1.35; color: var(--ivory); }
.line .said .wd { display: inline-block; }
.line:has(.said:not(:empty)) .how { visibility: hidden; }

.scripts { width: 100%; max-width: 26rem; display: grid; gap: 10px; justify-items: start; }
.script { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
html.js .script:not(.on) { display: none; }
html:not(.js) .script + .script { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hair); }
.step {
  width: 100%; min-height: 44px; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; text-align: left;
  padding: 12px 14px; border-radius: 18px; cursor: pointer; background: rgba(237,235,230,.04); border: 1px solid var(--hair); color: var(--text);
  transition: border-color .3s, background-color .3s;
}
.step:hover { border-color: rgba(237,235,230,.3); }
.step .n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(237,235,230,.28); color: var(--soft); transition: background-color .3s, color .3s, border-color .3s;
}
.step .k { display: block; font-size: 13px; font-weight: 600; color: var(--soft); }
.step .q { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--text); }
.step[aria-current="step"] { border-color: rgba(237,219,184,.55); background: rgba(237,219,184,.05); }
.step[aria-current="step"] .n { border-color: var(--champagne); color: var(--champagne); }
.step[data-done] .n { background: var(--ivory); border-color: var(--ivory); color: #000; }
.step[aria-busy="true"] { cursor: progress; }
@media (max-width: 959.98px) {
  .step { padding: 10px 12px; gap: 10px; }
  .step .q { font-size: 14.5px; }
}
.reply { padding: 4px 14px 0 54px; font-size: 15px; color: var(--soft); }
.reply .k { display: block; font-size: 13px; font-weight: 600; }
html.js .reply { display: none; }
.replay { justify-self: start; }

.ledger { width: 100%; max-width: 26rem; border-top: 1px solid var(--hair); padding-top: 10px; }
.rule { margin-top: 6px; font-size: 13px; color: var(--faint); }
.saved { list-style: none; margin: 0; padding: 0; }
.saved li { padding: 8px 0 10px; border-bottom: 1px solid var(--hair); }
.saved .when { font-size: 12px; font-weight: 500; color: var(--faint); }
.saved .text { margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--text); }
.saved .meta2 { margin-top: 3px; font-size: 12px; color: var(--soft); }
.saved .meta2:empty { display: none; }
.saved .remind { color: var(--champagne); }

@media (min-width: 960px) {
  .try { padding: 72px max(48px, 6vw); }
  .demo { grid-template-columns: 300px 26rem; grid-template-rows: auto auto auto 1fr; column-gap: 72px; row-gap: 16px;
    justify-content: center; justify-items: start; align-items: start;
    grid-template-areas: "rig head" "rig modes" "rig line" "rig stage"; }
  .try-head { grid-area: head; text-align: left; margin: 0; }
  .modes { grid-area: modes; }
  .demo > .line { grid-area: line; }
  .rig { grid-area: rig; justify-self: center; align-self: center; --pw: min(300px, calc((100svh - 160px) / 2.18)); }
  .stage { grid-area: stage; max-width: none; }
  .line { min-height: 3em; max-width: none; }
  .how, .line .said { text-align: left; }
  .line .said { font-size: 20px; }
  .scripts, .ledger { max-width: none; }
}
/* shorter desktop windows (768–860 px tall): the same layout, tighter, so the phone and the
   steps still share one screen */
@media (min-width: 960px) and (max-height: 860px) {
  .try { padding-top: 40px; padding-bottom: 40px; }
  .demo { row-gap: 12px; }
  .eyebrow { margin-bottom: 6px; }
  .try-head h2 { font-size: 40px; }
  .try-head p:last-child { margin-top: 6px; font-size: 14px; }
  .line { min-height: 2.6em; }
  .line .said { font-size: 18px; }
  .step { padding: 9px 12px; }
  .step .q { font-size: 14px; }
  .saved li { padding: 6px 0 8px; }
  .rig { --pw: min(300px, calc((100svh - 110px) / 2.18)); }
}

/* ---------- 3. Pricing (C's) ---------- */
.pricing { padding: 72px var(--gutter) 80px; max-width: 72rem; margin: 0 auto; border-top: 1px solid var(--hair); text-align: center; }
.pricing .launch { margin: 12px auto 0; max-width: 34rem; font-size: 15px; color: var(--soft); }
.plans { margin: 36px auto 28px; display: grid; gap: 12px; max-width: 30rem; text-align: left; }
.plan { position: relative; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--hair); background: rgba(237,235,230,.03); }
.plan.best { border-color: rgba(237,219,184,.6); background: rgba(237,219,184,.05); }
.plan .flag { position: absolute; top: -11px; left: 20px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--champagne); color: #000; }
.plan h3 { font-size: 15px; font-weight: 600; color: var(--soft); }
.plan.best h3 { color: var(--champagne); }
.plan .amt { margin-top: 6px; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--ivory); }
.plan .amt small { font-size: 15px; font-weight: 400; color: var(--soft); }
.plan ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 15px; color: var(--soft); }
.plan li::before { content: "✓"; margin-right: 8px; color: var(--champagne); }
@media (min-width: 900px) { .plans { max-width: none; grid-template-columns: repeat(4, 1fr); } }