/* Glance website, "Read Along" style: one continuous Glance Blue background,
   white type, the yellow reading highlight as the accent, white and glass cards,
   pill buttons. Geist only (Geist Mono for script text). The menu bar and island
   are the app's own. */

:root {
  /* Accent slot ("primary") mapped to Glance Blue. */
  --primary: #0b6bff;
  --primary-hover: #005ae6;
  --secondary: #749ae8;
  --highlight: #ffd60a;       /* Highlight Yellow, island only */
  --fg: #171717;
  --gray-900: #111827;
  --gray-700: #374151;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --navy: #0d1b3e;
  --ice: #dce8f8;
  --sky: linear-gradient(180deg, #1559e0 0%, #3d7fe8 35%, #7fa8f0 65%, #c9daf8 88%, #f4f7fe 100%);
  --sky-deep: linear-gradient(180deg, #1559e0 0%, #3373e6 45%, #6d9cee 100%);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --menubar-height: 32px;
  --font: Geist, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
  font-family: var(--font);
  color: #fff;
  background: #0757e3;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; line-height: 1.5; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { flex: none; }

/* ---------- The one background: Glance Blue, fixed behind every section ---------- */

/* Fixed, so it is the same everywhere and no section ever shows an edge. Darker
   than #0B6BFF away from the center so white body text stays at WCAG AA. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 38%, #0a66f8 0%, #0860ef 32%, #0656de 62%, #054ac9 100%);
}

/* ---------- Menu bar and island ---------- */

.menubar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--menubar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #000;
  color: rgba(250, 250, 250, 0.6);
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.5s ease-in-out;
}
.scrolled .menubar { transform: translateY(-100%); }
/* Past the top, the island leaves with the menu bar so it never covers content. */
.island { transition: translate 0.5s ease-in-out, opacity 0.4s ease-in-out; }
.scrolled .island { translate: 0 -110%; opacity: 0; pointer-events: none; }
.menubar__left, .menubar__right { display: flex; align-items: center; gap: 16px; }
.menubar__app { display: flex; align-items: center; gap: 8px; color: rgba(250, 250, 250, 0.9); font-weight: 600; }
.menubar__right { color: rgba(250, 250, 250, 0.9); }
.menubar__clock { font-size: 12px; }

.island {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 60;
  width: 344px;               /* 320px body + the two 12px fillets */
  height: 100px;
  transform: translateX(-50%);
  transform-origin: top center;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.12));
  animation: island-grow 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15) 0.3s both;
}
.island__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A window of exactly two lines; the second fades out at the bottom, like the app. */
.island__text {
  position: absolute;
  top: 40px;
  left: 28px;
  right: 28px;
  height: 48px;               /* 2 lines x 24px */
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  animation: fade-in 0.4s ease 0.8s both;
}
.island__lines { transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); }
.island__text .w { transition: color 0.15s ease; }
.island__text .w.read { color: rgba(255, 255, 255, 0.4); }
.island__text .w.now { color: var(--highlight); }

@keyframes island-grow {
  from { transform: translateX(-50%) scaleY(0.32); }
  to { transform: translateX(-50%) scaleY(1); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Shared pieces ---------- */

.section { padding: 80px 24px; }
.head { max-width: 672px; margin: 0 auto 48px; text-align: center; }
.h2 { font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
/* Accent: the reading highlight, a yellow bar under the words, like the hero's current word. */
.mark { position: relative; display: inline-block; white-space: nowrap; }
.mark::after { content: ""; position: absolute; left: 0.02em; right: 0.02em; bottom: -0.02em; height: 0.08em; border-radius: 9px; background: var(--highlight); }
.sub { margin-top: 16px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.96); text-wrap: balance; }
.dim { color: rgba(255, 255, 255, 0.4); }
.hl { color: var(--highlight); }

/* Pill buttons from the hero: white with blue text, black, and solid blue on white cards. */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.2s ease, box-shadow 0.25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn--white { background: #fff; color: #0650d9; box-shadow: 0 14px 40px -12px rgba(0, 25, 110, 0.45); }
.btn--black { background: #000; color: #fff; box-shadow: 0 14px 40px -12px rgba(0, 25, 110, 0.45); }
.btn--black:hover { background: #111; }
.btn--blue { background: var(--primary); color: #fff; box-shadow: 0 10px 24px -10px rgba(11, 107, 255, 0.7); }
.btn--blue:focus-visible { outline-color: var(--primary); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn--block { width: 100%; }

.card { padding: 24px; border-radius: 20px; background: #fff; color: var(--gray-900); box-shadow: 0 20px 40px -24px rgba(0, 20, 90, 0.55); }
.card h3 { margin-bottom: 6px; font-size: 18px; font-weight: 700; color: var(--gray-900); }
.card p { font-size: 15px; line-height: 1.6; color: #4b5563; }
.card a { color: var(--primary); font-weight: 500; text-decoration: none; }
/* App-icon style tiles: Glance Blue gradient, white solid glyphs. */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, #3b8bff 0%, #0b6bff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 40, 120, 0.15), 0 6px 14px -6px rgba(11, 107, 255, 0.6);
}
.ico svg { width: 26px; height: 26px; }

/* ---------- Hero: Read Along ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 150px 24px 120px;
  overflow: hidden;
  text-align: center;
}

/* Background script lines. Two nested masks, both fully feathered, so there is
   no edge anywhere: the outer fades the rows out toward the bottom of the hero,
   the inner opens a big soft hole behind the text. */
.streams {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 62%, transparent 100%);
  animation: fade-in 1.5s ease 0.1s both;
}
.streams__rows {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 110px 0 40px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.75) 72%, #000 100%);
          mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.75) 72%, #000 100%);
}
.row { white-space: nowrap; font-family: var(--mono); font-weight: 600; font-size: clamp(20px, 2.2vw, 30px); color: rgba(255, 255, 255, 0.13); will-change: transform; animation: marquee-l var(--t, 60s) linear infinite; }
.row span { display: inline-block; padding-right: 2ch; }
.row:nth-child(odd) { animation-name: marquee-r; }
@keyframes marquee-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 8px;
  border-radius: 999px;
  background: rgba(0, 30, 120, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  font-size: 14.5px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.tag kbd { padding: 2px 7px; border-radius: 6px; background: var(--highlight); color: #0a1f5c; font-family: var(--mono); font-size: 12px; }

.headline { margin-top: 30px; font-size: clamp(46px, 8.8vw, 132px); line-height: 0.98; font-weight: 700; letter-spacing: -0.05em; color: #fff; }
.headline .line { display: block; }
/* Colors switch instantly (no tween): any blend between yellow and white or blue looks muddy. The underline carries the motion. */
.headline .w { position: relative; display: inline-block; color: #fff; transition: none; }
.headline .w::after { content: ""; position: absolute; left: 0.02em; right: 0.02em; bottom: -0.04em; height: 0.07em; border-radius: 9px; background: var(--highlight); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
/* Solid colors only, so a word never passes through translucent yellow over blue. */
.reading .headline .w { color: #9cc0ff; }
.reading .headline .w.read { color: #fff; }
.reading .headline .w.now { color: var(--highlight); }
.reading .headline .w.now::after { transform: scaleX(1); }
.headline .wi { display: inline-block; animation: 1.1s var(--ease) var(--d, 0s) both; }
.headline .l1 .wi { animation-name: in-left; }
.headline .l2 .wi { animation-name: in-right; }

.lede { max-width: 600px; margin-top: 30px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.97); text-wrap: balance; }
.hero .actions { margin-top: 36px; }
.fineprint { margin-top: 22px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.97); }
.fineprint .sep { margin: 0 7px; opacity: 0.6; }

/* Entrances */
@keyframes in-left { from { opacity: 0; transform: translate3d(-90px, 0, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes in-right { from { opacity: 0; transform: translate3d(90px, 0, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes in-up { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes in-down { from { opacity: 0; transform: translate3d(0, -18px, 0); } to { opacity: 1; transform: none; } }
.a-l, .a-r, .a-u, .a-d, .a-f { animation: 1.15s var(--ease) var(--d, 0s) both; }
.a-l { animation-name: in-left; }
.a-r { animation-name: in-right; }
.a-u { animation-name: in-up; }
.a-d { animation-name: in-down; }
.a-f { animation-name: fade-in; }

/* ---------- White sections (voice + pricing) ---------- */

/* Two white "sheets" on the blue page: full width with large rounded corners, so the
   blue -> white -> blue change is a clean, deliberate edge rather than a gradient. */
.section--light {
  position: relative;
  margin: 24px 0;
  padding-top: 112px;
  padding-bottom: 112px;
  border-radius: 48px;
  background: #fff;
  color: #0b1533;
  box-shadow: 0 -30px 60px -40px rgba(0, 20, 90, 0.35), 0 30px 60px -40px rgba(0, 20, 90, 0.35);
}
.section--light .h2 { color: #0b1533; }
.section--light .sub { color: #4b5563; }
/* On white the accent becomes a yellow highlighter behind the words. */
.section--light .mark::after { left: -0.06em; right: -0.06em; bottom: 0.06em; height: 0.36em; border-radius: 4px; z-index: -1; }
.section--light .mark { isolation: isolate; }
.section--light .cell--story { background: #f3f7ff; box-shadow: inset 0 0 0 1px #dbe6fb, 0 18px 36px -28px rgba(0, 20, 90, 0.35); }
.section--light .status-pill { box-shadow: 0 0 0 1px #dbe6fb; }
.section--light .plan { box-shadow: 0 0 0 1px #e5e7eb, 0 30px 60px -32px rgba(0, 20, 90, 0.45); }

/* ---------- Bento (follows your voice) ---------- */

.bento {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 12px;
  max-width: 1152px;
  margin: 0 auto;
}
.cell { display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border-radius: 22px; overflow: hidden; }
.cell h3 { margin-bottom: 4px; font-size: 20px; font-weight: 700; }
.cell p { font-size: 14px; line-height: 1.6; }
.cell { min-height: 460px; }
/* Side cards: light, so the black notch reads like the hero's island. */
.cell--story { background: #fff; color: var(--gray-900); box-shadow: 0 24px 48px -28px rgba(0, 20, 90, 0.6); }
.cell--story .cell__foot h3 { color: inherit; }
.cell--story .cell__foot p { color: #4b5563; }
.mini-notch--sm { width: min(292px, 100%); filter: drop-shadow(0 8px 14px rgba(13, 27, 62, 0.22)); }
.mini-notch--sm .mini-notch__text { left: 26px; right: 26px; font-size: 12.5px; }
.story-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 20px 0 8px; }

/* Status under the notch. */
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 600; color: var(--primary); transition: color 0.25s ease; }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill.is-wait { color: #d97706; }
.status-pill.is-wait i { border-radius: 1px; width: 8px; height: 9px; background: linear-gradient(90deg, currentColor 35%, transparent 35% 65%, currentColor 65%); }
.status-pill.is-back { color: #16a34a; }

/* What you said off script: a caption-style speech bubble, not a form field. */
.bubble { position: relative; display: flex; flex-direction: column; gap: 6px; width: min(260px, 100%); min-height: 76px; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--navy); color: #fff; box-shadow: 0 10px 24px -12px rgba(13, 27, 62, 0.5); transition: opacity 0.35s ease; }
.bubble.is-idle { opacity: 0.45; }
.bubble__label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.bubble__dots { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; height: 12px; }
.bubble__dots i { width: 3px; height: 100%; border-radius: 2px; background: rgba(255, 255, 255, 0.7); transform: scaleY(0.3); }
.bubble:not(.is-idle) .bubble__dots i { animation: talk 0.5s ease-in-out infinite alternate; }
.bubble__dots i:nth-child(2) { animation-delay: -0.2s; }
.bubble__dots i:nth-child(3) { animation-delay: -0.35s; }
.bubble__dots i:nth-child(4) { animation-delay: -0.1s; }
@keyframes talk { to { transform: scaleY(1); } }
.adlib__words { min-height: 22px; font-size: 15px; line-height: 1.45; }
.adlib__words span { opacity: 0; transition: opacity 0.25s ease; }
.adlib__words span.in { opacity: 1; }
.mini-notch__text .w.hold { animation: hold 1s ease-in-out infinite alternate; }
@keyframes hold { from { opacity: 1; } to { opacity: 0.45; } }

/* Script preview: the skipped line is struck and an arrow jumps past it. */
.preview { position: relative; width: min(268px, 100%); padding-left: 22px; }
.preview ol { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.preview li { padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.85); font-size: 13px; line-height: 1.35; color: var(--gray-500); transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease; }
.preview li.current { background: #fff; color: var(--gray-900); box-shadow: inset 3px 0 0 var(--primary), var(--shadow-sm); }
.preview li.done { color: var(--gray-400); }
.preview li.flash { background: #fff1e8; color: #c2410c; text-decoration: line-through; }
.preview li.skipped { opacity: 0.55; text-decoration: line-through; }
.preview__jump { position: absolute; left: 0; top: 14px; bottom: 14px; width: 18px; height: calc(100% - 28px); color: var(--primary); opacity: 0; transition: opacity 0.3s ease; }
.preview.jumped .preview__jump { opacity: 1; }

/* Skipped words flash, then stay dim and struck through. */
.mini-notch__text .w.skip-flash { color: #ff9f6b; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mini-notch__text .w.skipped { color: rgba(255, 255, 255, 0.25); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); }
.skip-hint { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--blue-50); color: var(--primary); font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.skip-hint.is-on { opacity: 1; transform: none; }

/* Middle card: glass on the blue page, white bars and type. */
.cell--sky { position: relative; background: linear-gradient(180deg, #0a4fd2 0%, #0742b4 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 24px 48px -28px rgba(0, 20, 90, 0.7); color: #fff; }
.cell--sky > * { position: relative; z-index: 1; }
.cell__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cell__foot h3 { color: inherit; }
.cell__foot p { max-width: 340px; color: rgba(255, 255, 255, 0.92); }
.voice { flex: 1; display: flex; flex-direction: column; align-items: center; margin-top: -24px; } /* cancel the card's top padding so the notch is flush */
.mini-notch { position: relative; width: min(344px, 100%); height: 84px; filter: drop-shadow(0 8px 14px rgba(13, 27, 62, 0.3)); }
.mini-notch__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-notch__text {
  position: absolute;
  top: 16px;
  left: 30px;
  right: 30px;
  height: 44px;               /* 2 lines x 22px */
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 22px;
  text-align: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.mini-notch__text .island__lines { transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.2, 1); }
.mini-notch__text .w { transition: color 0.15s ease; }
.mini-notch__text .w.read { color: rgba(255, 255, 255, 0.4); }
.mini-notch__text .w.now { color: var(--highlight); }

/* Bars driven by the words (script.js sets --s per bar on every word). */
.bars { display: flex; justify-content: center; align-items: flex-end; gap: 10px; height: 106px; margin: auto 0; padding: 16px 0; box-sizing: content-box; } /* centered between the notch and the title */
.bars i { --s: 0.3; width: 16px; height: 100%; border-radius: 8px; background: #fff; transform: scaleY(var(--s)); transform-origin: bottom; transition: transform 0.16s ease-out; }
.bars.is-quiet i { transition-duration: 0.35s; }

/* ---------- Steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1152px; margin: 0 auto; }
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 240px;
  padding: 32px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 28, 110, 0.32), rgba(0, 28, 110, 0.22));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.step > div { position: relative; z-index: 1; }
.step__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.step h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.step h3 kbd, .step h3 .key { font-family: inherit; }
.step p { max-width: 240px; margin-top: 8px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.step__num {
  position: absolute;
  right: -6px;
  bottom: -22px;
  font-size: 150px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  user-select: none;
}

/* ---------- Features ---------- */

/* Desktop and tablet: centered cards, icon on top. */
.features .card { display: flex; flex-direction: column; align-items: center; padding: 32px 28px; text-align: center; }
.features .card p { max-width: 300px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1152px; margin: 0 auto; }

/* ---------- Free (the reference's featured plan card) ---------- */

.plan { max-width: 440px; margin: 0 auto; border-radius: 26px; overflow: hidden; background: #fff; color: var(--gray-900); box-shadow: 0 30px 60px -28px rgba(0, 20, 90, 0.7); }
.plan__top { padding: 36px 32px 32px; background: linear-gradient(160deg, #0b6bff 0%, #0650d9 55%, #0544bd 100%); color: #fff; }
.plan__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.plan__name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.plan__name img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.plan__badge { padding: 4px 12px; border-radius: 999px; background: var(--highlight); color: #0a1f5c; font-size: 12px; font-weight: 700; }
.plan__price { font-size: 72px; line-height: 1; font-weight: 700; letter-spacing: -0.05em; }
.plan__desc { margin: 12px 0 24px; font-size: 15px; color: #fff; }
.plan__bottom { padding: 20px 32px 36px; }
.plan__label { margin-bottom: 16px; font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; color: #6b7280; }
.checks { display: flex; flex-direction: column; gap: 14px; font-size: 15px; color: var(--gray-700); }
.checks li { display: flex; gap: 12px; }
.checks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan__web { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-200); font-size: 15px; color: #4b5563; }
.plan__web a { color: var(--primary); font-weight: 500; text-decoration: none; }

/* ---------- FAQ: one card per question, blue round plus ---------- */

.faq { display: flex; flex-direction: column; gap: 12px; max-width: 768px; margin: 0 auto; }
.faq details { padding: 16px 20px; border-radius: 18px; background: #fff; color: var(--gray-900); box-shadow: 0 16px 32px -24px rgba(0, 20, 90, 0.6); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 500; color: #1f2937; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; border-radius: 6px; }
.faq details p { margin-top: 12px; padding-right: 24px; font-size: 15px; line-height: 1.65; color: #4b5563; }
.faq details p a { color: var(--primary); font-weight: 500; text-decoration: none; }

/* ---------- Final call to action ---------- */

.section--cta { padding-top: 40px; padding-bottom: 96px; }

/* The closing showpiece: light rises from the bottom toward a glowing notch. The CSS
   background is the static version (no WebGL, or reduced motion); the canvas covers it
   once the shader is running. */
.cta {
  position: relative;
  isolation: isolate;
  max-width: 1152px;
  margin: 0 auto;
  padding: 168px 24px 112px;
  border-radius: 32px;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(42% 46% at 50% 0%, rgba(255, 214, 10, 0.18) 0%, transparent 40%),
    radial-gradient(60% 80% at 50% 0%, #5aa2ff 0%, rgba(11, 107, 255, 0.85) 30%, rgba(11, 107, 255, 0) 75%),
    radial-gradient(80% 60% at 30% 100%, rgba(11, 107, 255, 0.45), transparent 70%),
    radial-gradient(70% 60% at 75% 95%, rgba(90, 162, 255, 0.25), transparent 70%),
    linear-gradient(180deg, #0a2a78 0%, #071433 70%);
  box-shadow: 0 40px 80px -40px rgba(0, 12, 50, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.cta__gl { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.cta.has-gl .cta__gl { opacity: 1; }

/* A small notch at the top edge with a soft halo, where the light is heading. */
.cta__notch { position: absolute; top: 0; left: 50%; z-index: -1; width: 168px; height: 34px; transform: translateX(-50%); border-radius: 0 0 18px 18px; background: #000;
  box-shadow: 0 0 40px 10px rgba(90, 162, 255, 0.45), 0 0 120px 40px rgba(11, 107, 255, 0.35); }
.cta__notch::before, .cta__notch::after { content: ""; position: absolute; top: 0; width: 10px; height: 10px; }
.cta__notch::before { left: -10px; background: radial-gradient(circle at 0 100%, transparent 9.5px, #000 10px); }
.cta__notch::after { right: -10px; background: radial-gradient(circle at 100% 100%, transparent 9.5px, #000 10px); }

/* Feathered darkening only behind the copy, so it stays AA on any frame. */
.cta__scrim { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 46% 40% at 50% 62%, rgba(4, 12, 40, 0.6) 0%, rgba(4, 12, 40, 0.38) 45%, rgba(4, 12, 40, 0) 100%); }

.cta__title { color: #fff; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.045em; }
.cta__title > span { display: block; }
.cta__up { position: relative; display: inline-block; transition: color 0.01s linear 0.9s; }
.cta__up::after { content: ""; position: absolute; left: 0.02em; right: 0.06em; bottom: -0.04em; height: 0.08em; border-radius: 9px; background: var(--highlight); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease) 1s; }
.cta.is-in .cta__up { color: var(--highlight); }
.cta.is-in .cta__up::after { transform: scaleX(1); }
.cta__sub { margin: 22px auto 36px; max-width: 576px; font-size: 18px; color: #fff; text-wrap: balance; }
.cta .btn--black { background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); backdrop-filter: blur(8px); }
.cta .btn--black:hover { background: rgba(0, 0, 0, 0.7); }

/* Scroll-in: "down" settles first, then "up" rises with the light. */
.js .cta__l1, .js .cta__l2, .js .cta__sub, .js .cta .actions { opacity: 0; }
.cta.is-in .cta__l1 { animation: in-down 0.9s var(--ease) 0.05s both; }
.cta.is-in .cta__l2 { animation: rise 1.1s var(--ease) 0.45s both; }
.cta.is-in .cta__sub { animation: in-up 0.9s var(--ease) 0.9s both; }
.cta.is-in .actions { animation: in-up 0.9s var(--ease) 1.05s both; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 46px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); }
.footer__inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; max-width: 1152px; margin: 0 auto; padding: 56px 24px; }
.footer__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 20px; font-weight: 700; color: #fff; }
.footer__logo img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.footer__brand p:last-child { max-width: 384px; font-size: 14px; line-height: 1.65; }
.footer__col { display: flex; flex-direction: column; gap: 16px; }
.footer__col a { text-decoration: none; }
.footer__col a:hover { color: var(--highlight); }
.footer__copy { padding-bottom: 24px; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.85); }

/* ---------- Medium screens ---------- */

@media (max-width: 1080px) {
  .menubar__left span:not(.menubar__app) { display: none; }
}

@media (max-width: 900px) {
  /* Tablet: the voice card full width on top, the other two side by side. */
  .bento { grid-template-columns: 1fr 1fr; }
  .cell--sky { grid-column: 1 / -1; order: -1; min-height: 420px; }
  .cell--story { min-height: 400px; }
  .features { grid-template-columns: 1fr 1fr; }
  /* Three steps get cramped below ~900px: stack them in a readable column. */
  .steps { grid-template-columns: 1fr; max-width: 560px; gap: 16px; }
  .step { min-height: 0; }
  .step p { max-width: 75%; }
}

/* ---------- Phones ---------- */

@media (max-width: 640px) {
  /* Respect notches and home indicators when the page runs edge to edge. */
  .menubar { height: calc(var(--menubar-height) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  /* Keep the pretend menu bar minimal on phones: app glyph left, clock right. */
  .menubar__left span:not(.menubar__app), .menubar__app { font-size: 0; gap: 0; }
  .menubar__app svg { width: 15px; height: 15px; }
  .menubar__right svg { display: none; }
  .menubar__clock { font-size: 12px; }
  .island { top: env(safe-area-inset-top); width: min(344px, calc(100vw - 96px)); }
  .island__text { left: 22px; right: 22px; }
  .clock__day, .clock__ampm { display: none; }
  .island__text { font-size: 14px; }

  .section { padding: 56px max(16px, env(safe-area-inset-right)) 56px max(16px, env(safe-area-inset-left)); }
  .head { margin-bottom: 28px; }
  .h2 { font-size: 34px; line-height: 1.1; }
  .section--light { margin: 12px 0; padding-top: 72px; padding-bottom: 72px; border-radius: 32px; }
  .sub { font-size: 16px; }

  /* Hero: fills the first screen, content centered a bit above middle. */
  .hero { min-height: 100svh; padding: calc(124px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 72px max(20px, env(safe-area-inset-left)); }
  .streams__rows { padding-top: 96px; -webkit-mask-image: radial-gradient(ellipse 90% 52% at 50% 46%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.8) 80%, #000 100%); mask-image: radial-gradient(ellipse 90% 52% at 50% 46%, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.8) 80%, #000 100%); }
  .row { font-size: 18px; }
  .tag { font-size: 13px; }
  .headline { margin-top: 24px; font-size: clamp(34px, 10.2vw, 60px); line-height: 1.02; }
  .lede { margin-top: 24px; font-size: 16px; }
  .hero .actions { margin-top: 28px; }
  .actions { flex-direction: column; width: 100%; max-width: 420px; }
  .btn { width: 100%; min-height: 52px; font-size: 16px; }
  .btn--sm { min-height: 48px; }
  .fineprint { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 18px; font-size: 13px; line-height: 1.6; }
  .fineprint .sep { display: none; }

  /* Cards: one column, readable text, comfortable padding. */
  .bento, .features { grid-template-columns: 1fr; gap: 12px; }
  .cell { min-height: 0; gap: 28px; padding: 22px; }
  .cell--story { min-height: 360px; }
  .cell h3 { font-size: 19px; }
  .cell p, .card p, .step p { font-size: 15px; }
  .cell--sky { min-height: 0; }
  .voice { margin-top: -22px; }
  .mini-notch__text { left: 26px; right: 26px; font-size: 13px; }
  .bars { height: 92px; gap: 8px; padding: 20px 0 4px; }
  .bars i { width: 14px; border-radius: 7px; }
  .cell__foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .card { padding: 24px; }
  .ico { width: 52px; height: 52px; border-radius: 13px; }
  /* Phones: one grouped list, like iOS Settings. Icon left, text right, hairlines inset from the text. */
  .features { gap: 0; border-radius: 22px; background: #fff; box-shadow: 0 20px 40px -24px rgba(0, 20, 90, 0.55); overflow: hidden; }
  .features .card { position: relative; display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; padding: 18px 18px; border: 0; border-radius: 0; box-shadow: none; background: none; text-align: left; }
  .features .card .ico { grid-row: 1 / span 2; margin: 0; }
  .features .card h3 { align-self: center; min-height: 26px; margin: 0 0 2px; padding-top: 2px; }
  .features .card p { max-width: none; }
  .features .card + .card::before { content: ""; position: absolute; top: 0; left: 86px; right: 0; height: 1px; background: var(--gray-200); }
  .ico svg { width: 28px; height: 28px; }
  .card h3 { font-size: 19px; }
  .step { padding: 22px; }
  .step p { max-width: 80%; }
  .step__num { font-size: 104px; }

  .plan__top { padding: 28px 22px 24px; }
  .plan__bottom { padding: 20px 22px 28px; }
  .checks { font-size: 15px; }
  .plan__web { font-size: 15px; }

  .faq { gap: 10px; }
  .faq details { padding: 0 16px; }
  .faq summary { min-height: 64px; padding: 12px 0; font-size: 16px; }
  .faq summary::after { width: 32px; height: 32px; font-size: 20px; }
  .faq details p { margin-top: 0; padding: 0 0 16px; font-size: 15px; }

  .section--cta { padding-top: 24px; padding-bottom: 56px; }
  .cta { padding: 172px 20px 64px; border-radius: 26px; }
  .cta__notch { width: 120px; height: 26px; }
  .cta__scrim { background: radial-gradient(ellipse 95% 48% at 50% 52%, rgba(4, 12, 40, 0.62) 0%, rgba(4, 12, 40, 0.4) 50%, rgba(4, 12, 40, 0) 100%); }
  .cta__title { font-size: clamp(32px, 9.4vw, 44px); }
  .cta__sub { font-size: 17px; }

  .footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding: 40px max(20px, env(safe-area-inset-right)) 24px max(20px, env(safe-area-inset-left)); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col { gap: 4px; }
  .footer__col a { padding: 10px 0; font-size: 16px; }
  .footer__copy { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Small phones (360 and below): a touch tighter. */
@media (max-width: 370px) {
  .tag { font-size: 12px; }
  .h2 { font-size: 30px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .cta__l1, .js .cta__l2, .js .cta__sub, .js .cta .actions { opacity: 1; animation: none !important; }
  .cta__up { color: var(--highlight); transition: none; }
  .cta__up::after { transform: scaleX(1); transition: none; }
  .row, .streams, .headline .wi, .a-l, .a-r, .a-u, .a-d, .a-f { animation: none !important; }
  .headline .w, .headline .w::after, .btn { transition: none; }
  .island, .island__text { animation: none; }
  .bars i { transition: none; }
  .mini-notch__text .island__lines, .mini-notch__text .w, .adlib, .adlib__words span, .skip-hint { transition: none; }
  .mini-notch__text .w.hold, .bubble__dots i { animation: none !important; }
  .preview li, .preview__jump, .bubble, .status-pill { transition: none; }
  .island__lines, .island__text .w, .menubar, .island, .faq summary::after, .btn { transition: none; }
}