/*
 * sunva.ai — home. The page is an incoming call.
 *
 * Colours come from the app (sunva_app lib/core/theme): the logo's indigo
 * #2C2E76 and amber #E4A347, the sign-in screens' night (indigo falling to
 * near-black, light from below), the glow #A3A8FF, and the warm paper #F5F3EE
 * for the one daylight section.
 *
 * Two typefaces, two jobs. Instrument Serif is what people say: the headline,
 * the lines of a call, the quotes. Manrope is what Sunva tells you: the one
 * line, the labels, the interface. Both are served from assets/fonts (SIL OFL),
 * so the page loads nothing from anyone else.
 */

@font-face { font-family: 'Manrope'; src: url('fonts/manrope-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/manrope-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/manrope-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/manrope-700.woff2') format('woff2'); font-weight: 700 800; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/instrument-serif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/instrument-serif-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* night */
  --night: #07081d;
  --night-deep: #04051a;
  --night-lift: #0c0d2e;
  --indigo: #2c2e76;
  --glow: #a3a8ff;
  --amber: #e4a347;
  --amber-lit: #f0bd6b;
  --cream: #efece5;
  --cream-2: rgba(239, 236, 229, .66);
  --cream-3: rgba(239, 236, 229, .42);
  --rule: rgba(163, 168, 255, .14);

  /* day */
  --paper: #f5f3ee;
  --paper-2: #ecead3;
  --ink: #12131f;
  --ink-2: #4f5266;
  --ink-3: #7c7f8f;
  --hair: #e2ded3;

  --sans: 'Manrope', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --serif: 'Instrument Serif', 'Noto Serif', Georgia, serif;

  --gutter: clamp(20px, 5vw, 72px);
  --shell: 1240px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--night); color-scheme: dark; }
html.lenis, html.lenis body { height: auto; }

body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font: 500 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 60; background: var(--night-lift); padding: 10px 16px; border-radius: 12px; }

/* A still film grain over everything: the night reads as material, not flat. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main { position: relative; }

.h2 {
  font: 400 clamp(44px, 6.4vw, 104px)/.96 var(--serif);
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* ------------------------------------------------------------ buttons */

/* Every button is the app's AppButton (sunva_app lib/ui/app_button.dart): a
   pill lit from above. The fill is a shade lighter at the top, a 2px rim is
   bright on its upper edge and deeper below (a gradient border, drawn as the
   border-box layer under the fill), a soft glow in the button's own colour
   and a close shadow set it on the page, and it presses in to 98%. The
   variants are the app's:
     .btn-light      ivory, indigo ink: the primary action on a dark screen
     .btn-primary    the brand indigo, white
     .btn-secondary  the dark card's own grey, cream ink
   and a coloured one built from --hue, as the app builds its danger button
   from maroon. */
.btn-light, .btn-primary, .btn-secondary, .btn-hue {
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease), filter .25s;
}
.btn-light:hover, .btn-primary:hover, .btn-secondary:hover, .btn-hue:hover { filter: brightness(1.06); }
.btn-light:active, .btn-primary:active, .btn-secondary:active, .btn-hue:active { transform: scale(.98); }
.btn-light {
  background:
    linear-gradient(180deg, #fffcf2, #ede4cc) padding-box,
    linear-gradient(180deg, #ffffff, #cfc3a2) border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14), 0 3px 6px rgba(0, 0, 0, .40);
  color: #14153f;
}
.btn-primary {
  background:
    linear-gradient(180deg, hsl(238 46% 45%), #2c2e76) padding-box,
    linear-gradient(180deg, hsl(238 46% 66%), hsl(238 46% 25%)) border-box;
  box-shadow: 0 4px 14px rgba(44, 46, 118, .18), 0 3px 6px rgba(0, 0, 0, .18);
  color: #fff;
}
.btn-secondary {
  background:
    linear-gradient(180deg, #202128, #1d1f27) padding-box,
    linear-gradient(180deg, #383b4b, #383b4b) border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25), 0 3px 6px rgba(0, 0, 0, .40);
  color: #f1efea;
}
.btn-hue {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--hue), #fff 14%), var(--hue)) padding-box,
    linear-gradient(180deg, color-mix(in oklab, var(--hue), #fff 36%), color-mix(in oklab, var(--hue), #000 12%)) border-box;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--hue) 30%, transparent), 0 3px 6px rgba(0, 0, 0, .40);
  color: #fff;
}

/* ------------------------------------------------------------ header */

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px var(--gutter);
  transition: background .5s, backdrop-filter .5s, padding .4s var(--ease);
}

.bar.stuck {
  padding-block: 12px;
  background: rgba(7, 8, 29, .62);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.bar.on-paper { background: rgba(245, 243, 238, .78); color: var(--ink); }
.bar.on-paper .mark { --mark-ink: var(--indigo); }
.bar.on-paper nav .get {
  background:
    linear-gradient(180deg, hsl(238 46% 45%), #2c2e76) padding-box,
    linear-gradient(180deg, hsl(238 46% 66%), hsl(238 46% 25%)) border-box;
  box-shadow: 0 4px 14px rgba(44, 46, 118, .18), 0 3px 6px rgba(0, 0, 0, .18);
  color: #fff;
}

.brand { flex: 1; display: inline-flex; align-items: center; gap: 10px; font: 700 21px/1 var(--sans); letter-spacing: -.03em; }
.brand .mark { width: 22px; height: 30px; }

.bar nav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; font-weight: 600; }
.bar nav a:not(.get) { opacity: .72; transition: opacity .25s; }
.bar nav a:not(.get):hover { opacity: 1; }
.bar nav .get { padding: 9px 18px; font-weight: 800; letter-spacing: .01em; }

/* ------------------------------------------------------------ 1 · the landing rings */

.ring-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 120px var(--gutter) 80px;
  overflow: hidden;
  isolation: isolate;
  /* a dark room with one light on in it: near-black, warmed toward the
     phone, the corners falling away */
  background:
    radial-gradient(55% 70% at 74% 52%, rgba(44, 46, 118, .62), transparent 70%),
    radial-gradient(30% 40% at 80% 30%, rgba(228, 163, 71, .14), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .6) 100%),
    linear-gradient(180deg, #04050f, #06071a 60%, #070820);
}

/* Shafts of light falling behind the phone, amber and indigo, soft-edged
   like light through a gap in a door. */
.beams { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.beams i {
  position: absolute;
  top: -20%;
  height: 140%;
  border-radius: 50%;
  filter: blur(46px);
  transform: rotate(24deg);
  transform-origin: top center;
  mix-blend-mode: screen;
}
.beams i:nth-child(1) { left: 58%; width: 9vw; background: linear-gradient(180deg, rgba(240, 189, 107, .0), rgba(240, 189, 107, .34) 35%, rgba(228, 163, 71, .0) 80%); }
.beams i:nth-child(2) { left: 66%; width: 4vw; background: linear-gradient(180deg, rgba(255, 228, 186, 0), rgba(255, 228, 186, .3) 40%, transparent 78%); }
.beams i:nth-child(3) { left: 74%; width: 13vw; background: linear-gradient(180deg, rgba(163, 168, 255, 0), rgba(120, 126, 255, .3) 40%, transparent 85%); }
.motion .beams i { animation: sway 14s ease-in-out infinite alternate; }
.motion .beams i:nth-child(2) { animation-duration: 11s; animation-delay: -4s; }
.motion .beams i:nth-child(3) { animation-duration: 17s; animation-delay: -8s; }
@keyframes sway { to { transform: rotate(18deg) translateX(-3vw); opacity: .7; } }

/* Generic signal rings: the call section's phone and the finale. */
.rings {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: -1;
  width: 0;
  height: 0;
}
.rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(118vmin, 1100px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(163, 168, 255, .22);
  translate: -50% -50%;
  scale: calc(.28 + var(--k, 0) * .24);
  opacity: calc(.9 - var(--k, 0) * .2);
}
.rings i:nth-child(2) { --k: 1; }
.rings i:nth-child(3) { --k: 2; }
.rings i:nth-child(4) { --k: 3; }
.motion .rings i { animation: signal 7.2s linear infinite; opacity: 0; }
.motion .rings i:nth-child(2) { animation-delay: -1.8s; }
.motion .rings i:nth-child(3) { animation-delay: -3.6s; }
.motion .rings i:nth-child(4) { animation-delay: -5.4s; }
@keyframes signal {
  0% { scale: .2; opacity: 0; }
  12% { opacity: .9; }
  100% { scale: 1.15; opacity: 0; }
}

.hero-in {
  width: 100%;
  max-width: calc(var(--shell) + 40px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.hero-copy { position: relative; z-index: 2; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239, 236, 229, .12);
  background: rgba(255, 255, 255, .04);
  font-size: 14px;
  font-weight: 600;
  color: var(--cream-2);
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: #6fd39b; box-shadow: 0 0 0 4px rgba(111, 211, 155, .15); }

.hero-title {
  margin-top: clamp(20px, 3.4vh, 34px);
  font: 400 clamp(76px, 10.4vw, 172px)/.88 var(--serif);
  letter-spacing: -.045em;
  padding: 0 .04em .08em 0;
  margin-left: -.04em;
  white-space: nowrap;
  background: linear-gradient(180deg, #fffaf1 25%, #efe6d6 70%, #d9b78a 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title .ch {
  display: inline-block;
  /* Each letter is clipped to its own box: pad the box so the L's foot, the
     e's and t's terminals and the g's tail aren't cut off at its edges. */
  padding: .02em .12em .2em;
  margin: -.02em -.12em -.2em;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-sub {
  max-width: 34ch;
  margin-top: clamp(16px, 2.6vh, 28px);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--cream-2);
  text-wrap: balance;
}

.hero-sub .lead { display: block; margin-bottom: 4px; color: var(--cream); }

/* The phone and its light */
.hero-stage {
  --pw: clamp(250px, min(25vw, (100svh - 200px) * .46), 350px);
  position: relative;
  justify-self: center;
  width: min(calc(var(--pw) * 1.75), 100%);
  display: grid;
  place-items: center;
  padding: 30px 0;
}
.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: calc(var(--pw) * 2.4);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(240, 189, 107, .22), transparent 60%),
    radial-gradient(closest-side, rgba(120, 126, 255, .38), transparent 100%);
  filter: blur(20px);
}
.hero-stage .phone {
  transform: rotate(-4deg);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .2),
    inset 0 0 0 4px #050507,
    -14px 0 40px -18px rgba(240, 189, 107, .55),
    0 70px 120px -30px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(0, 0, 0, .7);
}

.float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(42, 44, 82, .82), rgba(24, 25, 54, .82));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 60px -18px rgba(0, 0, 0, .8);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  font-size: 14px;
  color: var(--cream);
  text-align: left;
  translate: var(--mx, 0) var(--my, 0);
  transition: translate .8s var(--ease);
}
.float b { display: block; font-size: 14.5px; font-weight: 700; }
.float small { display: block; font-size: 13px; color: var(--cream-2); }
.float.f1 { left: -17%; top: 9%; width: min(300px, 64%); }
.float.f1 .n-app { width: 40px; height: 40px; border-radius: 11px; }
.float.f1 .n-app svg { width: 22px; height: 30px; }
.float.f1 .n-line { font-size: 13.5px; }
.float.f2 { right: -2%; top: 52%; }
.tick { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(111, 211, 155, .14); }
.tick svg { width: 20px; height: 20px; fill: rgba(111, 211, 155, .25); stroke: #8fe0b2; stroke-width: 1.6; stroke-linejoin: round; }
.tick .ck { fill: none; stroke-linecap: round; }
.float.f3 { left: 2%; bottom: 12%; padding: 10px 16px 10px 10px; }
.float .lang { padding: 5px 10px; border-radius: 99px; background: rgba(228, 163, 71, .16); color: var(--amber-lit); font-weight: 700; font-size: 13px; }

.motion .float { opacity: 0; }

@media (max-width: 1023px) {
  .ring-hero { padding-top: 110px; padding-bottom: 0; align-items: start; }
  .hero-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 36px; }
  .hero-copy { display: grid; justify-items: center; }
  .hero-sub { margin-inline: auto; text-wrap: balance; }
  .hero-stage { --pw: clamp(240px, 62vw, 340px); margin-bottom: calc(var(--pw) * -.7); }
  .float.f1 { left: 0; }
  .beams i:nth-child(1) { left: 20%; width: 22vw; }
  .beams i:nth-child(2) { left: 46%; width: 10vw; }
  .beams i:nth-child(3) { left: 62%; width: 28vw; }
  .ring-hero { background:
    radial-gradient(90% 50% at 50% 85%, rgba(44, 46, 118, .7), transparent 70%),
    radial-gradient(130% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .6) 100%),
    linear-gradient(180deg, #04050f, #06071a 60%, #070820); }
}

/* Slide to answer. The whole track is the button; the thumb can be dragged. */
.slide { margin-top: clamp(28px, 4.6vh, 48px); display: grid; justify-items: start; gap: 14px; }
@media (max-width: 1023px) { .slide { justify-items: center; text-align: center; } }

/* Styled as the app's AppButton (sunva_app lib/ui/app_button.dart): a pill
   lit from above, its fill a shade lighter at the top, a 2px rim bright on
   the upper edge and deeper below, a soft glow in its own colour and a close
   shadow setting it on the page, pressing in to 98%. The track is the app's
   `light` variant (ivory, indigo ink: the primary action on a deep-indigo
   screen); the thumb is its `primary`, the brand indigo with white. */
.slide-track {
  --rim: 2px;
  position: relative;
  width: min(370px, calc(100vw - 40px));
  height: 66px;
  padding: 0;
  border: var(--rim) solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #fffcf2, #ede4cc) padding-box,
    linear-gradient(180deg, #ffffff, #cfc3a2) border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .14), 0 3px 6px rgba(0, 0, 0, .40);
  color: #14153f;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease);
}
.slide-track:active:not(.dragging) { transform: scale(.98); }

/* The indigo follows the thumb in (--x from home.js); once answered the
   whole pill is the app's primary button and the thumb turns ivory. */
.slide-track::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  z-index: 0;
  width: calc(var(--x, 0px) + 56px);
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, hsl(238 46% 45%), #2c2e76) padding-box,
    linear-gradient(180deg, hsl(238 46% 66%), hsl(238 46% 25%)) border-box;
  opacity: 0;
  transition: width .5s var(--ease), opacity .25s;
}
.slide-track.dragging::before { transition: opacity .25s; opacity: 1; }
.answered .slide-track::before { opacity: 1; width: calc(100% - 6px); }
.slide-track:focus-visible { outline-offset: 6px; border-radius: 999px; }

.slide-thumb {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: var(--rim) solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(180deg, hsl(238 46% 45%), #2c2e76) padding-box,
    linear-gradient(180deg, hsl(238 46% 66%), hsl(238 46% 25%)) border-box;
  box-shadow: 0 4px 14px rgba(44, 46, 118, .18), 0 3px 6px rgba(0, 0, 0, .18);
  cursor: grab;
  transition: transform .5s var(--ease);
}
.slide-thumb svg { width: 21px; height: 21px; fill: #fff; transition: fill .4s; }
.slide-thumb { touch-action: none; user-select: none; -webkit-user-select: none; }
.slide-track { user-select: none; -webkit-user-select: none; }

/* Alive while it waits: the thumb peeks to the right now and then and its
   ring pulses, chevrons run toward the end, and it lifts under the pointer.
   All of it stops once you've touched it. */
.slide-thumb::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(44, 46, 118, .45);
  pointer-events: none;
}
.motion .slide-track:not(.touched) .slide-thumb { animation: peek 4.2s var(--ease) 2.4s infinite; }
.motion .slide-track:not(.touched) .slide-thumb::after { animation: ring-out 2.1s ease-out 2.4s infinite; }
@keyframes peek { 0%, 70%, 100% { transform: translateX(0); } 78% { transform: translateX(22px); } 86% { transform: translateX(0); } 91% { transform: translateX(8px); } }
@keyframes ring-out { 0% { box-shadow: 0 0 0 0 rgba(44, 46, 118, .45); } 100% { box-shadow: 0 0 0 14px rgba(44, 46, 118, 0); } }
@media (hover: hover) {
  .slide-track:not(.dragging):hover .slide-thumb { scale: 1.06; }
}
.slide-thumb { transition: transform .5s var(--ease), scale .25s var(--ease), background .4s; }
.answered .slide-thumb { animation: none !important; }
.answered .slide-thumb::after { animation: none !important; }

.slide-label { grid-auto-flow: column; justify-content: center; align-items: center; gap: 12px; }
.chev { display: inline-flex; gap: 1px; }
.chev i { width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); color: #2c2e76; opacity: .2; }
.motion .chev i { animation: chev 1.6s ease-in-out infinite; }
.motion .chev i:nth-child(2) { animation-delay: .18s; }
.motion .chev i:nth-child(3) { animation-delay: .36s; }
@keyframes chev { 0%, 100% { opacity: .15; } 40% { opacity: .85; } }
.slide-thumb { transition: transform .5s var(--ease), background .4s; }
.answered .slide-thumb {
  background:
    linear-gradient(180deg, #fffcf2, #ede4cc) padding-box,
    linear-gradient(180deg, #ffffff, #cfc3a2) border-box;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
}
.answered .slide-thumb svg { fill: #14153f; }
.slide-track.dragging .slide-thumb { transition: none; cursor: grabbing; }

.slide-label, .slide-done {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 52px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .01em;
  pointer-events: none;
  transition: opacity .35s;
}
.shine { color: #14153f; }
.motion .shine {
  background: linear-gradient(100deg, #14153f 40%, #6f73c9 50%, #14153f 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 3.2s linear infinite;
}
@keyframes shine { from { background-position: 125% 0; } to { background-position: -125% 0; } }

.slide-done { padding: 0 52px 0 0; color: #fff; opacity: 0; }
.answered .slide-label { opacity: 0; }
.answered .slide-done { opacity: 1; }

.slide-hint { width: min(370px, calc(100vw - 40px)); font-size: 14px; color: var(--cream-3); text-align: center; }

/* The opening: caller, title, line, slider, each a beat after the last. */
.motion .hi { opacity: 0; }
.motion .hero-title.hi { opacity: 1; }
.motion .hero-title .ch { opacity: 0; transform: translateY(.32em); }

/* ------------------------------------------------------------ 2 · the call */

/* The room takes the colour of the language being spoken: --hue is a deep
   avatar colour from the app (lib/core/theme/app_tokens.dart), --lit its
   light. home.js sets both from CALL. */
@property --hue { syntax: '<color>'; inherits: true; initial-value: #2c2e76; }
@property --lit { syntax: '<color>'; inherits: true; initial-value: #a3a8ff; }

.call {
  position: relative;
  overflow: clip;
  /* the day's paper tucks 36px under this (.day margin-top): keep that out
     of the screen the call fills */
  padding-bottom: 36px;
  transition: --hue 1.1s var(--ease), --lit 1.1s var(--ease);
  background:
    radial-gradient(60% 75% at 82% 55%, color-mix(in oklab, var(--hue) 95%, transparent), transparent 70%),
    radial-gradient(40% 50% at 82% 55%, color-mix(in oklab, var(--lit) 22%, transparent), transparent 70%),
    radial-gradient(70% 60% at 0% 0%, color-mix(in oklab, var(--hue) 40%, transparent), transparent 70%),
    var(--night-deep);
}

/* A faint dot grid, like a speaker grille, fading out to the left. */
.call::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .09) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 15%, #000 75%);
}

.call-stage {
  position: relative;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 130px var(--gutter) 150px;
}

.call-bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 56px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream-2);
}
.on-air { display: inline-flex; align-items: center; gap: 10px; color: var(--cream); }
.on-air i { width: 8px; height: 8px; border-radius: 50%; background: #6fd39b; box-shadow: 0 0 14px rgba(111, 211, 155, .8); }
.motion .on-air i { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.timer { font-variant-numeric: tabular-nums; }

/* The instruction this call is following: set once, in the app. */
.rule-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: rgba(228, 163, 71, .1);
  border: 1px solid rgba(228, 163, 71, .28);
  color: var(--cream-2);
  font-size: 13.5px;
}
.rule-chip svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; }
.rule-chip q { color: var(--amber-lit); font-weight: 600; quotes: '“' '”'; }
@media (max-width: 1180px) { .rule-chip { order: 5; flex-basis: 100%; justify-content: flex-start; width: fit-content; flex-grow: 0; } }
@media (max-width: 699px) { .rule-chip { font-size: 12.5px; border-radius: 16px; align-items: flex-start; } .rule-chip svg { margin-top: 2px; } }

/* The language picker */
.lang-pick { position: relative; margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lp-label { color: var(--cream-3); }
.dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--lit); box-shadow: 0 0 0 3px color-mix(in oklab, var(--lit) 25%, transparent); }
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px 0 16px;
  font-size: 15px;
  font-weight: 800;
}
.lp-btn .dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
.lp-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.lp-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.lp-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: 360px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: rgba(14, 15, 40, .92);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
  transform-origin: top right;
}
.lp-menu[hidden] { display: none; }
.lp-menu:not([hidden]) { animation: menu .28s var(--ease); }
@keyframes menu { from { opacity: 0; transform: scale(.96) translateY(-6px); } }
.lp-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cream-2);
  cursor: pointer;
}
.lp-menu li { min-width: 0; }
.lp-menu li small { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--cream-3); }
.lp-menu li .dot { box-shadow: none; }
.lp-menu li:hover, .lp-menu li.active { background: rgba(255, 255, 255, .08); color: var(--cream); }
.lp-menu li[aria-selected="true"] { color: var(--cream); background: rgba(255, 255, 255, .12); }

/* Text on the left, the phone on the right. */
.call-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 96px); align-items: start; }
.call-text { position: relative; min-width: 0; }

.lines { display: grid; gap: clamp(28px, 4.5svh, 52px); }
.line { max-width: 18ch; font-size: clamp(30px, min(3.5vw, 5.4svh), 56px); }
.line.sunva { justify-self: end; text-align: right; }
.line .who { display: block; margin-bottom: 12px; font: 600 13px/1 var(--sans); letter-spacing: .02em; color: var(--lit); transition: color .6s; }
.line.sunva .who { color: var(--amber); }
.said { font: 400 1em/1.08 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.said:not(:lang(en)):not(:lang(hi-Latn)) { font-size: .82em; line-height: 1.3; letter-spacing: 0; }
.line.them .said { color: var(--cream); }
.line.sunva .said { color: var(--amber-lit); }
.meant { margin-top: 12px; font-size: 15.5px; color: var(--cream-3); }
.meant:empty { display: none; }
.said, .meant { transition: opacity .25s, filter .25s; }
.swapping .said, .swapping .meant { opacity: 0; filter: blur(6px); }

.fold { display: grid; justify-items: start; gap: 22px; margin-top: 100px; }
.fold-say { font: 400 clamp(40px, 4.8vw, 80px)/.98 var(--serif); letter-spacing: -.025em; }
.fold-say span { display: block; }
.fold-sub { max-width: 38ch; color: var(--cream-2); text-wrap: pretty; }
.fold-sub b { color: var(--cream); font-weight: 700; }

/* The notification you get, in the phone's own dark glass. The icon is the
   app's: indigo arcs on white. */
.notice, .hu {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08));
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  text-align: left;
}
.notice { width: min(440px, 100%); padding: 16px 18px; border-radius: 26px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }
.n-app { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; --mark-ink: var(--indigo); }
.n-app svg { width: 24px; height: 32px; }
.n-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.n-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.n-top b { font-size: 15px; font-weight: 700; }
.n-top small { font-size: 12.5px; color: var(--cream-3); }
.n-line { font-size: 15px; line-height: 1.4; color: var(--cream); }

/* ---- the phone, shared with the screens section ---- */

.phone {
  position: relative;
  width: var(--pw, 340px);
  padding: calc(var(--pw, 340px) * .032);
  border-radius: calc(var(--pw, 340px) * .16);
  background: linear-gradient(150deg, #4a4b55 0%, #16171c 22%, #0b0b0f 60%, #2a2b33 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .16),
    inset 0 0 0 4px #050507,
    0 60px 120px -40px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(0, 0, 0, .7);
}
.phone::before, .phone::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #2a2b33; }
.phone::before { left: -2px; top: 22%; height: 9%; }
.phone::after { right: -2px; top: 28%; height: 14%; }

.screen {
  position: relative;
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border-radius: calc(var(--pw, 340px) * .13);
  background: #000;
  container-type: inline-size;
  isolation: isolate;
}
.scr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s; }

.island { position: absolute; z-index: 3; left: 50%; top: 2.9cqw; width: 31cqw; height: 9.2cqw; border-radius: 99px; background: #000; translate: -50% 0; }
.sbar {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 15cqw;
  padding: 1.6cqw 8cqw 0 9.5cqw;
  font: 600 4.2cqw/1 var(--sans);
  color: #12131f;
}
.sbar.light { color: #fff; }
.sys { display: inline-flex; align-items: flex-end; gap: .7cqw; }
.sys i { width: .9cqw; background: currentColor; border-radius: .3cqw; }
.sys i:nth-child(1) { height: 1.6cqw; }
.sys i:nth-child(2) { height: 2.4cqw; }
.sys i:nth-child(3) { height: 3.2cqw; }
.sys b { width: 6.4cqw; height: 3.2cqw; margin-left: 1.4cqw; border-radius: 1cqw; background: currentColor; }

/* The heads-up banner the call ends with, dropped onto the phone. */
.hu {
  position: absolute;
  z-index: 4;
  left: 3.5cqw;
  right: 3.5cqw;
  top: 14cqw;
  gap: 3cqw;
  padding: 3.4cqw 3.8cqw;
  border-radius: 6.5cqw;
  background: rgba(40, 41, 60, .78);
  box-shadow: 0 6cqw 14cqw -4cqw rgba(0, 0, 0, .6);
}
.motion .hu { opacity: 0; } /* home.js drops it in at the end of the call */
.hu .n-app { width: 10cqw; height: 10cqw; border-radius: 2.6cqw; }
.hu .n-app svg { width: 5.4cqw; height: 7.4cqw; }
.hu .n-top b { font-size: 3.7cqw; }
.hu .n-top small { font-size: 3.1cqw; }
.hu .n-line { font-size: 3.6cqw; line-height: 1.35; }

.call-phone { position: relative; --pw: clamp(220px, 26vw, 340px); }

/* With motion the phone stands on the floor of the screen, beside the
   controls: it takes the height from the picker down to the bottom (the
   phone is about 2.1 widths tall) and grows downward, not up into the bar. */
@media (min-width: 900px) and (min-height: 600px) {
  .motion .call-stage { --pw: clamp(220px, min(28vw, (100svh - 220px) * .47), 370px); }
  .motion .call-body { grid-template-columns: minmax(0, 1fr) calc(var(--pw) + 20px); }
  .motion .call-phone { --pw: inherit; position: absolute; right: var(--gutter); bottom: clamp(20px, 3.5vh, 40px); }
}
.call-phone .rings { top: 50%; z-index: 0; }
.call-phone .rings i { width: calc(var(--pw) * 2.6); border-color: color-mix(in oklab, var(--lit) 35%, transparent); }
.call-phone .phone { z-index: 1; }

/* Without motion everything shows: the phone holds still beside the lines,
   on the screen the call ends with. */
html:not(.motion) .call-phone { position: sticky; top: 14vh; }
html:not(.motion) .scr-live { opacity: 0; }

/* With motion the stage is one screen tall and the call plays itself in it
   (home.js); the controls under it pause, jump and replay. */
.motion .call-stage {
  height: 100svh;
  min-height: 560px;
  padding-block: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.motion .call-bar { padding-top: clamp(84px, 12vh, 116px); margin-bottom: 0; }
.motion .call-body { min-height: 0; align-items: center; padding-top: 28px; }
/* hidden until the call plays them in (home.js), so nothing flashes first */
.motion .line { opacity: 0; }
.motion .call-text {
  height: 100%;
  overflow: hidden;
  /* Old lines drift up and out instead of colliding with the bar. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.motion .lines { will-change: transform; }
.motion .fold { position: absolute; inset: 0; margin: 0; align-content: center; pointer-events: none; }
.motion .fold > * { opacity: 0; }
.motion .scr-after { opacity: 0; }

/* the controls */
.call-ctrl { display: none; }
.motion .call-ctrl {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0 clamp(26px, 5vh, 48px);
}
.cc-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
}
.cc-play svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cc-play .i-play { fill: currentColor; stroke: none; }
.cc-play .i-play, .cc-play .i-replay { display: none; }
.is-paused .cc-play .i-pause, .is-ended .cc-play .i-pause { display: none; }
.is-paused .cc-play .i-play { display: block; }
.is-ended .cc-play .i-replay { display: block; }

/* Sound on / off, the app's secondary button with a label */
.cc-sound { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 13px; font-size: 14px; font-weight: 700; }
.cc-sound[hidden] { display: none; }
.cc-sound:disabled { opacity: .45; cursor: default; }
.cc-sound svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc-sound .i-on { display: none; }
.is-sound .cc-sound .i-on { display: block; }
.is-sound .cc-sound .i-off { display: none; }
.is-sound .cc-sound { color: var(--amber-lit); }
@media (max-width: 480px) { .cc-sound-l { display: none; } .cc-sound { width: 48px; padding: 0; justify-content: center; } }
.cc-steps { flex: 1; max-width: 560px; display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 6px; }
.cc-steps button { height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.cc-steps i { position: relative; display: block; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(239, 236, 229, .16); transition: height .2s; }
@media (hover: hover) { .cc-steps button:hover i { height: 5px; } }
.cc-steps i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--lit); transform-origin: left; transform: scaleX(var(--p, 0)); }
.cc-steps .last i::after { background: var(--amber); }

@media (min-width: 900px) {
  /* On a wide screen the notification lands on the phone instead. */
  .fold .notice { display: none; }
}

/* No room for the phone beside the call on narrow or short screens: the
   notification lands in the text instead. */
@media (max-width: 899px), (max-height: 599px) {
  .fold .notice { display: flex; }
  .call-body { grid-template-columns: 1fr; }
  .call-phone { display: none; }
  .fold { justify-items: center; text-align: center; }
  .motion .fold { justify-items: center; }
}

/* ------------------------------------------------------------ 3 · the day, on paper */


.day {
  position: relative;
  padding: clamp(110px, 16vh, 180px) var(--gutter) clamp(90px, 12vh, 140px);
  background: var(--paper);
  color: var(--ink);
  border-radius: 36px 36px 0 0;
  margin-top: -36px;
  z-index: 2;
}

.day-head, .log { max-width: var(--shell); margin-inline: auto; }
.day-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px 80px; align-items: end; margin-bottom: clamp(48px, 8vh, 80px); }
.day .h2 { max-width: 12ch; }
.lede { max-width: 36ch; color: var(--ink-2); font-size: 18px; }

/* The calls down the left on a line through the day; the picked one's card
   on the right. Each call is one <article>: display: contents lets its
   button sit in the list column and its card in the card column, all the
   cards sharing one cell, only the picked one shown. */
.log {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* five calls with an equal, stretchy gap between each (the card's spare
     height goes there), then the note: the list starts at the card's top
     and the note ends at its bottom */
  grid-template-rows: auto 1fr auto 1fr auto 1fr auto 1fr auto auto;
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.call-entry { display: contents; }

.ce-btn {
  grid-column: 1;
  position: relative;
  display: grid;
  grid-template-columns: 42px 14px 36px minmax(0, 1fr) auto;
  grid-template-areas: "time dot av name pill" "time dot av line line";
  align-items: center;
  gap: 1px 12px;
  width: 100%;
  padding: 11px 14px 11px 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background .35s, box-shadow .35s;
}
/* the line through the day, behind the dots: it reaches past each tile
   into the space between them, and sits under the picked tile's card */
.ce-btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: calc(42px + 12px + 6.5px);
  top: -60px;
  bottom: -60px;
  width: 1px;
  background: var(--hair);
}
.call-entry:first-child .ce-btn::before { top: 50%; }
.call-entry:last-of-type .ce-btn::before { bottom: 50%; }

.ce-btn time { grid-area: time; justify-self: end; font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ce-dot {
  grid-area: dot;
  position: relative;
  justify-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px #c9c4b6;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.ce-av {
  grid-area: av;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  opacity: .55;
  transition: opacity .35s;
}
.ce-text { display: contents; }
.ce-text b { grid-area: name; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ce-line { grid-area: line; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.ce-btn .pill { grid-area: pill; justify-self: end; }
.ce-btn .ce-text b, .ce-btn .ce-line, .ce-btn time { opacity: .62; transition: opacity .35s; }

/* hover: the text comes up and the dot grows, nothing else */
@media (hover: hover) {
  .ce-btn:hover .ce-text b, .ce-btn:hover .ce-line, .ce-btn:hover time, .ce-btn:hover .ce-av { opacity: 1; }
  .ce-btn:hover .ce-dot { transform: scale(1.35); box-shadow: inset 0 0 0 2px var(--ink-3); }
}

/* the picked call: an app card, its dot lit in the caller's colour */
.call-entry.on .ce-btn {
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 19, 31, .045), 0 10px 22px -6px rgba(18, 19, 31, .08);
}
.call-entry.on .ce-text b, .call-entry.on .ce-line, .call-entry.on time, .call-entry.on .ce-av { opacity: 1; }
.call-entry.on .ce-dot { transform: scale(1.35); background: var(--c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 18%, transparent); }

.pill {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e5e5f3;
  color: var(--indigo);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.pill.spam { background: #f1e2e0; color: #6b2020; }
.pill.gold { background: #f6e5c4; color: #6b4510; }
.pill.soon { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--ink-2); }

/* the card */
.dp {
  grid-column: 2;
  grid-row: 1 / -1;
  max-width: 540px;
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2vw, 26px);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(18, 19, 31, .06), 0 30px 60px -24px rgba(18, 19, 31, .22);
}
.call-entry.on .dp { display: flex; }
.motion .call-entry.on .dp { animation: dp-in .55s var(--ease); }
@keyframes dp-in { from { opacity: 0; transform: translateY(10px); } }

.dp-head { display: flex; align-items: center; gap: 12px; }
.ce-av.big { width: 42px; height: 42px; font-size: 13.5px; opacity: 1; }
.dp-who { flex: 1; display: grid; gap: 1px; min-width: 0; }
.dp-who b { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.dp-who small { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.dp-sec { display: grid; gap: 5px; padding-top: 14px; border-top: 1px solid #efece4; }
.dp-label { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.dp-said { font: italic 400 clamp(19px, 1.6vw, 23px)/1.22 var(--serif); color: var(--indigo); text-wrap: balance; }
.dp-said:not(:lang(en)):not(:lang(hi-Latn)) { font-style: normal; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; }
.dp-meant { font-size: 13.5px; color: var(--ink-3); }
.dp-did { font-size: 14.5px; font-weight: 600; line-height: 1.45; letter-spacing: -.005em; }
.dp-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 13px;
  background: #faf1de;
  border: 1px solid #f0dcb4;
  color: #5b3b0c;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.dp-rule svg { flex: none; width: 15px; height: 15px; margin-top: 2px; fill: none; stroke: #b9802c; stroke-width: 2; stroke-linecap: round; }
.dp-rule small { display: block; margin-bottom: 1px; font-size: 11.5px; font-weight: 700; color: #a06f27; }

/* the one line you got, as your phone showed it */
.dp-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto; /* at the foot of the card, however tall */
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #23244a, #191a38);
  color: var(--cream);
  box-shadow: 0 14px 30px -14px rgba(18, 19, 31, .5);
}
.dp-note .n-app { width: 32px; height: 32px; border-radius: 8px; }
.dp-note .n-app svg { width: 16px; height: 23px; }
.dp-note .n-top b { font-size: 13px; }
.dp-note .n-top small { font-size: 11.5px; }
.dp-note .n-line { font-size: 13px; }

/* without scripts every card shows, each after its call */
html:not(.js) .log { grid-template-columns: 1fr; grid-template-rows: none; }
html:not(.js) .dp { display: flex; grid-column: 1; grid-row: auto; position: static; margin: 4px 0 28px; }

.next { grid-column: 1; align-self: end; display: flex; align-items: center; gap: 12px; margin: 22px 0 0 calc(42px + 12px); color: var(--ink-2); font-size: 14.5px; }

/* On a wide screen every card is laid out in the one cell, the unpicked
   ones invisible, so the cell is the tallest card's height and the list
   beside it doesn't move when you pick another call. */
@media (min-width: 900px) {
  .js .dp { display: flex; visibility: hidden; align-self: stretch; }
  .js .call-entry:nth-child(1) .ce-btn { grid-row: 1; }
  .js .call-entry:nth-child(2) .ce-btn { grid-row: 3; }
  .js .call-entry:nth-child(3) .ce-btn { grid-row: 5; }
  .js .call-entry:nth-child(4) .ce-btn { grid-row: 7; }
  .js .call-entry:nth-child(5) .ce-btn { grid-row: 9; }
  .js .next { grid-row: 10; }
  .js .call-entry.on .dp { visibility: visible; }
}

@media (max-width: 899px) {
  .log { grid-template-columns: 1fr; grid-template-rows: none; }
  .dp { grid-column: 1; grid-row: auto; position: static; margin: 6px 0 18px; }
}

/* ------------------------------------------------------------ 3b · the app's own screens */

/* One phone held still while you scroll past six empty steps (.tour-steps);
   home.js shows the step at the middle of the window: its line on the left,
   its screen in the phone, and the outline (.spot) round the part it's about.
   Dark only: it sits between the day's paper and the languages' night. */
.screens {
  position: relative;
  overflow-x: clip; /* the phone's glow; clip keeps the stage sticky */
  padding-top: clamp(100px, 14vh, 160px);
  background:
    radial-gradient(50% 40% at 72% 45%, rgba(44, 46, 118, .55), transparent 70%),
    #0b0c22;
}

.sc-head {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px 80px;
  align-items: end;
}
.screens .h2 { max-width: 11ch; }
.screens .lede { color: var(--cream-2); }

.tour { position: relative; }

.tour-stage {
  --pw: clamp(220px, min(34vw, (100svh - 150px) * .45), 340px);
  position: sticky;
  top: 0;
  height: 100svh;
  max-width: calc(1120px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 72px var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 6vw, 110px);
}

/* The six empty steps you scroll through, laid over the held stage. */
.tour-steps { margin-top: -100svh; pointer-events: none; }
.tour-steps li { height: 78svh; }
.tour-steps li:first-child { height: 90svh; }
.tour-steps li:last-child { height: 100svh; }

/* left: the line, and the rail showing where you are */
.tour-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.msgs { display: grid; order: 2; }
.msg { grid-area: 1 / 1; max-width: 34rem; }
.msg h3 { max-width: 12ch; font: 400 clamp(40px, 5vw, 80px)/.98 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.msg p { max-width: 34ch; margin-top: 22px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--cream-2); text-wrap: pretty; }

.js .msg { opacity: 0; transform: translateY(28px); transition: opacity .5s var(--ease), transform .7s var(--ease); pointer-events: none; }
.js .msg.past { transform: translateY(-28px); }
.js .msg.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }

.rail { display: grid; gap: 8px; order: 1; }
.rail button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rail i { width: 3px; height: 100%; border-radius: 3px; background: rgba(239, 236, 229, .18); transition: background .4s, height .4s var(--ease); }
@media (hover: hover) { .rail button:hover i { background: rgba(239, 236, 229, .45); } }
.rail [aria-current] i { background: var(--amber); }

/* right: the phone, its screens stacked */
.tour-phone { position: relative; justify-self: center; }
.tour-phone::before {
  content: '';
  position: absolute;
  inset: -20% -40%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(163, 168, 255, .22), transparent);
  pointer-events: none;
}
.tour-phone .scr { opacity: 0; transform: scale(1.04); transition: opacity .55s var(--ease), transform .8s var(--ease); }
.tour-phone .scr.on { opacity: 1; transform: none; }

.spot {
  position: absolute;
  z-index: 1;
  /* data-spot is the part's own edge; the outline stands --gap off it. */
  --gap: 2cqw;
  left: calc(var(--x, 5%) - var(--gap));
  top: calc(var(--y, 35%) - var(--gap));
  width: calc(var(--w, 90%) + 2 * var(--gap));
  height: calc(var(--h, 14%) + 2 * var(--gap));
  border-radius: calc(5cqw + var(--gap));
  box-shadow: 0 0 0 1.5px rgba(228, 163, 71, .85), 0 0 14px rgba(228, 163, 71, .14);
  transition: left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease), opacity .4s;
  pointer-events: none;
}
.motion .spot { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 1.5px rgba(228, 163, 71, .85), 0 0 20px rgba(228, 163, 71, .22); } }
.spot.moving { opacity: .35; }

/* Without scripts: the lines simply stack beside the first screen. */
html:not(.js) .msgs { gap: 48px; }
html:not(.js) .msg { grid-area: auto; }
html:not(.js) .tour-stage { position: static; height: auto; padding-block: 60px 120px; }
html:not(.js) .tour-steps, html:not(.js) .rail, html:not(.js) .spot { display: none; }

/* Tablets: a bigger share of the width for the phone. */
@media (min-width: 700px) and (max-width: 1023px) {
  .tour-stage { --pw: clamp(220px, min(40vw, (100svh - 150px) * .45), 340px); }
}

/* Phones: the phone on top, the line under it, the rail as dots. */
@media (max-width: 699px) {
  .sc-head { grid-template-columns: 1fr; }
  .tour-stage {
    --pw: clamp(140px, min(60vw, (100svh - 340px) * .45), 300px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    justify-items: center;
    gap: 22px;
    padding-top: max(80px, calc(env(safe-area-inset-top) + 72px));
    text-align: center;
  }
  .tour-phone { order: -1; }
  .tour-copy { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  .msg { max-width: 30ch; justify-self: center; }
  .msg h3 { max-width: none; font-size: clamp(26px, 7.4vw, 38px); }
  .msg p { margin: 10px auto 0; font-size: 15.5px; }
  .js .msg { transform: translateY(14px); }
  .js .msg.past { transform: translateY(-14px); }
  .rail { order: 3; grid-auto-flow: column; gap: 0; }
  .rail button { width: 40px; height: 40px; }
  .rail i { width: 8px; height: 8px; border-radius: 50%; }
  .rail [aria-current] i { width: 20px; border-radius: 4px; }
  .tour-steps li { height: 70svh; }
}

@media (max-width: 699px) and (max-height: 700px) {
  .tour-stage { gap: 14px; padding-top: 70px; }
  .msg p { font-size: 14.5px; line-height: 1.45; }
}

@media (max-height: 599px) {
  .motion .call-stage { min-height: 0; }
  .motion .call-bar { padding-top: 64px; }
  .call .line { font-size: clamp(22px, 6.2svh, 36px); }
  .motion .lines { gap: 18px; }
  .call .meant { margin-top: 6px; font-size: 13.5px; }
  .call .fold-say { font-size: clamp(30px, 9svh, 54px); }
  .motion .call-ctrl { padding-bottom: 14px; }
}

/* Short landscape screens (phones turned sideways, of any width): side by
   side again, the phone sized to the height. Undoes the portrait stack. */
@media (orientation: landscape) and (max-height: 560px) {
  .tour-stage {
    --pw: clamp(130px, (100svh - 100px) * .45, 240px);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: none;
    align-content: center;
    justify-items: stretch;
    gap: 28px;
    padding-top: 60px;
    text-align: left;
  }
  .tour-phone { order: 0; }
  .tour-copy { grid-template-columns: auto minmax(0, 1fr); gap: 20px; justify-items: start; }
  .msg { max-width: 34rem; justify-self: start; }
  .msg h3 { max-width: 14ch; font-size: clamp(26px, 4vw, 40px); }
  .msg p { margin: 10px 0 0; font-size: 15px; }
  .rail { order: 0; grid-auto-flow: row; }
  .rail button { width: 28px; height: 30px; }
  .rail i, .rail [aria-current] i { width: 3px; height: 100%; border-radius: 3px; }
  .tour-steps li { height: 78svh; }
}

/* ------------------------------------------------------------ 4 · languages */

.langs {
  position: relative;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(100px, 14vh, 160px);
}
.langs .h2 { max-width: 13ch; }

.greet {
  display: flex;
  flex-wrap: wrap;
  gap: .08em .42em;
  margin: clamp(44px, 7vh, 80px) 0 clamp(36px, 6vh, 60px);
  font: 400 clamp(40px, 6.2vw, 100px)/1.18 var(--serif);
  letter-spacing: -.01em;
}
.greet span { position: relative; color: var(--cream); font-weight: 300; }
.greet span:first-child { font-weight: 400; }
.greet span::after {
  content: attr(data-l);
  position: absolute;
  left: 0;
  top: 100%;
  font: 600 13px/1 var(--sans);
  letter-spacing: .01em;
  color: var(--amber);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s, transform .3s var(--ease);
}
@media (hover: hover) { .greet span:hover::after { opacity: 1; transform: none; } }
.motion .greet span { color: rgba(239, 236, 229, .16); transition: color .5s; }
.motion .greet span.lit { color: var(--cream); }
.motion .greet span.now { color: var(--amber-lit); }

.langs-note { max-width: 44ch; font-size: 18px; color: var(--cream-2); }

/* ------------------------------------------------------------ 5 · setup */

/* The heading holds still on the left while the three steps run down the
   right on one line, each node lighting as its step comes in. */
.setup {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(100px, 14vh, 170px) var(--gutter) clamp(110px, 16vh, 180px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(40px, 6vw, 100px);
  align-items: start;
}
.setup-head { position: sticky; top: 120px; display: grid; gap: 24px; }
.setup .h2 { max-width: 12ch; font-size: clamp(44px, 5.6vw, 86px); }
.setup .lede { max-width: 30ch; color: var(--cream-2); }

.steps { display: grid; gap: clamp(44px, 7vh, 72px); }
.step {
  --done: 0;
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 26px;
  align-items: start;
}
/* the line down to the next node, filling amber as the step completes */
.step:not(:last-child)::before,
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21.5px;
  top: 52px;
  bottom: calc(-1 * clamp(44px, 7vh, 72px) + 8px);
  width: 1px;
  background: var(--rule);
}
.step:not(:last-child)::after { background: var(--amber); transform-origin: top; transform: scaleY(var(--done)); transition: transform 1.2s var(--ease) .9s; }

.node {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  font: 400 22px/1 var(--serif);
  color: var(--cream-2);
  transition: border-color .6s, color .6s, background .6s, box-shadow .6s;
}
.step.in .node, html:not(.js) .node { border-color: var(--amber); color: #1d1406; background: var(--amber); box-shadow: 0 0 0 6px rgba(228, 163, 71, .12); }
.step.in { --done: 1; }

.s-copy { padding-top: 8px; }
.s-copy h3 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.s-copy p { margin-top: 10px; max-width: 30ch; font-size: 16.5px; color: var(--cream-2); text-wrap: pretty; }

/* the little piece of the app each step shows */
.s-ui {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, #17183a, #121330);
  border: 1px solid rgba(163, 168, 255, .12);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7);
}
.s-ui small { font-size: 12.5px; font-weight: 600; color: var(--cream-3); }

.boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.boxes b {
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: 19px;
  font-weight: 700;
  color: transparent;
  transition: color .2s, border-color .3s;
}
.step.in .boxes b, html:not(.js) .boxes b { color: var(--cream); border-color: rgba(163, 168, 255, .5); }
.boxes b:nth-child(2) { transition-delay: .12s; }
.boxes b:nth-child(3) { transition-delay: .24s; }
.boxes b:nth-child(4) { transition-delay: .36s; }
.boxes b:nth-child(5) { transition-delay: .48s; }
.boxes b:nth-child(6) { transition-delay: .6s; }

.s-ui .row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 4px 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
}
.fwd .row + .row, .grp .row + .row { border-top: 1px solid rgba(255, 255, 255, .06); }

.sw { position: relative; flex: none; width: 40px; height: 24px; margin-left: auto; border-radius: 99px; background: rgba(255, 255, 255, .14); transition: background .35s; }
.sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease); }
.step.in .sw, html:not(.js) .sw { background: var(--glow); }
.step.in .sw::after, html:not(.js) .sw::after { transform: translateX(16px); }
.fwd .row:nth-of-type(2) .sw, .fwd .row:nth-of-type(2) .sw::after { transition-delay: .25s; }
.fwd .row:nth-of-type(3) .sw, .fwd .row:nth-of-type(3) .sw::after { transition-delay: .5s; }

.av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--c); font: 700 11.5px/1 var(--sans); font-style: normal; color: #fff; }
.grp em { margin-left: auto; padding: 4px 10px; border: 1px solid rgba(163, 168, 255, .35); border-radius: 99px; font-size: 12.5px; font-style: normal; font-weight: 700; color: #c9ccff; }
.grp .note { font: italic 400 19px/1.2 var(--serif); color: var(--amber-lit); }
.js .grp .row { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease); }
.step.in .grp .row { opacity: 1; transform: none; }
.grp .row:nth-of-type(2) { transition-delay: .2s; }
.grp .row:nth-of-type(3) { transition-delay: .4s; }

@media (max-width: 1023px) {
  .setup { grid-template-columns: 1fr; }
  .setup-head { position: static; }
  .setup .h2 { max-width: 14ch; }
}

@media (max-width: 699px) {
  .step { grid-template-columns: 44px minmax(0, 1fr); gap: 18px 18px; }
  .s-ui { grid-column: 2; }
  .boxes b { height: 40px; font-size: 17px; }
}

/* ------------------------------------------------------------ 6 · privacy */

.privacy {
  position: relative;
  padding: clamp(110px, 16vh, 170px) max(var(--gutter), (100% - var(--shell)) / 2);
  background:
    radial-gradient(60% 55% at 85% 20%, rgba(44, 46, 118, .55), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(44, 46, 118, .35), transparent 70%),
    var(--night-lift);
}

.p-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 100px); align-items: center; margin-bottom: clamp(56px, 9vh, 96px); }
.p-head { display: grid; align-content: start; gap: 24px; }
.privacy .h2 { max-width: 10ch; }
.seal { max-width: 36ch; color: var(--cream-2); }
.text-link { justify-self: start; font-weight: 700; border-bottom: 1.5px solid var(--amber); padding-bottom: 3px; transition: color .25s; }
.text-link:hover { color: var(--amber-lit); }

/* the vault: a transcript, locked */
.vault {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  border: 1px solid rgba(163, 168, 255, .16);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.v-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.v-from { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--cream-2); }
.v-from .ce-av { width: 28px; height: 28px; font-size: 11px; font-style: normal; opacity: 1; }
.v-state { display: inline-grid; font-size: 13px; font-weight: 700; }
.v-state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; transition: opacity .4s; }
.v-locked { color: var(--amber-lit); }
.v-open { color: #9ae6bb; opacity: 0; }
.lock { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lock .shackle { transition: transform .5s var(--ease); }
.v-open .shackle { transform: translateY(-2.5px) translateX(3px) rotate(18deg); transform-origin: 16px 10.5px; }

.v-text {
  min-height: 3.1em;
  font: 400 clamp(22px, 2.1vw, 30px)/1.3 var(--serif);
  color: var(--cream);
  overflow-wrap: anywhere;
  transition: color .5s;
}
.vault.locked .v-text { color: rgba(239, 236, 229, .5); letter-spacing: .02em; }
.vault.open .v-locked { opacity: 0; }
.vault.open .v-open { opacity: 1; }

.v-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule); }
.v-meta { font-size: 13px; color: var(--cream-3); }
.v-btn { min-height: 40px; padding: 0 16px; font-size: 13.5px; font-weight: 700; }

/* the three promises, each with its proof */
.nevers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: clamp(16px, 2vw, 28px); }
/* each card spans the list's three rows (subgrid), so the proofs, the titles
   and the lines below them all line up across the three */
.never {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 10px;
  padding: 14px 14px 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid rgba(163, 168, 255, .12);
}
.never h3 { margin: 12px 10px 0; font: 400 clamp(24px, 2.1vw, 30px)/1.08 var(--serif); letter-spacing: -.01em; }
.never p { margin: 0 10px; font-size: 15px; line-height: 1.5; color: var(--cream-2); }

.n-stage {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 150px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(4, 5, 26, .55);
  border: 1px solid rgba(255, 255, 255, .05);
}
.n-stage .ce-av { width: 34px; height: 34px; font-size: 12px; font-style: normal; opacity: 1; }
.ns-call { display: flex; align-items: center; gap: 10px; }
.ns-call > span:not(.ns-flat) { display: grid; gap: 1px; flex: 1; }
.ns-call b { font-size: 14px; font-weight: 700; }
.ns-call small { font-size: 12px; color: var(--cream-3); }
/* a waveform with nothing on it */
.ns-flat { display: flex; align-items: center; gap: 3px; }
.ns-flat i { width: 3px; height: 3px; border-radius: 2px; background: rgba(239, 236, 229, .25); }
.ns-nots { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-nots span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(111, 211, 155, .1);
  color: #9ae6bb;
  font-size: 12px;
  font-weight: 700;
}
.ns-nots span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(135deg, transparent 45%, currentColor 45% 60%, transparent 60%); }

.ns-b { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.ns-b.them { justify-self: start; background: rgba(255, 255, 255, .08); color: var(--cream); border-bottom-left-radius: 4px; }
.ns-b.ai { justify-self: end; background: linear-gradient(180deg, hsl(238 46% 45%), #2c2e76); color: #fff; border-bottom-right-radius: 4px; }

.ns-del { display: flex; align-items: center; gap: 10px; }
.ns-del > span:last-child { display: grid; gap: 1px; }
.ns-del b { font-size: 14px; font-weight: 700; }
.ns-del small { font-size: 12px; color: #f29a9a; }
.ns-key { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(229, 142, 142, .12); }
.ns-key svg { width: 18px; height: 18px; fill: none; stroke: #f29a9a; stroke-width: 1.8; stroke-linecap: round; }
.ns-cipher { font-size: 12.5px; line-height: 1.5; letter-spacing: .04em; color: rgba(239, 236, 229, .28); overflow-wrap: anywhere; }

@media (max-width: 1023px) {
  .p-top { grid-template-columns: minmax(0, 1fr); }
  .nevers { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 16px; max-width: 560px; }
  .never { grid-row: auto; grid-template-rows: auto auto 1fr; }
}

/* ------------------------------------------------------------ 7 · questions */

.faq {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(110px, 16vh, 180px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 50px 100px;
}
.q-head { display: grid; align-content: start; gap: 22px; }
.q-head p { color: var(--cream-2); }
.q-head a { color: var(--cream); border-bottom: 1px solid var(--cream-3); }
.faq .h2 { max-width: 9ch; }

.qa details { border-top: 1px solid var(--rule); }
.qa details:last-child { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--cream-2), var(--cream-2)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--cream-2), var(--cream-2)) center / 1.5px 14px no-repeat;
  transition: transform .4s var(--ease);
}
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { max-width: 54ch; padding: 0 0 26px; color: var(--cream-2); }
.qa details[open] p { animation: open .5s var(--ease); }

/* ------------------------------------------------------------ 8 · get it */

.finale {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: clamp(140px, 22vh, 240px) var(--gutter) clamp(120px, 18vh, 200px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background:
    radial-gradient(90% 70% at 50% 120%, rgba(44, 46, 118, .95), rgba(44, 46, 118, .3) 45%, transparent 70%),
    var(--night);
}
.finale .rings { top: 42%; }
.finale .rings i { width: min(90vmin, 820px); }
.finale-title { font: 400 clamp(64px, 11vw, 180px)/.9 var(--serif); letter-spacing: -.04em; text-wrap: balance; }
.finale-sub { color: var(--cream-2); font-size: 18px; margin-bottom: 18px; }

.cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }

/* Store badges in the stores' own style: black, a grey edge, the logo, two
   lines of type. Each carries a small tag until the app is live there. */
.store {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 20px 0 14px;
  border-radius: 12px;
  background: #000;
  box-shadow: inset 0 0 0 1.5px #a6a6a6;
  color: #fff;
  transition: transform .3s var(--ease), box-shadow .4s;
}
@media (hover: hover) { .store:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #fff, 0 14px 34px rgba(0, 0, 0, .55); } }
.store .logo { flex: none; width: 28px; height: 28px; }
.store .apple { width: 30px; height: 30px; margin-top: -4px; fill: #fff; }
.store span { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.store small { font: 600 10.5px/1 var(--sans); letter-spacing: .06em; white-space: nowrap; }
.store small.dl { font-size: 12px; font-weight: 500; letter-spacing: .01em; }
.store b { font: 600 23px/1 var(--sans); letter-spacing: -.015em; white-space: nowrap; }
.store .soon {
  position: absolute;
  top: -9px;
  right: -8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--amber);
  color: #1d1406;
  font: 800 10px/1 var(--sans);
  font-style: normal;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------ footer */

.site-foot { position: relative; border-top: 1px solid var(--rule); background: var(--night-deep); }
.site-foot .cols { max-width: var(--shell); margin: 0 auto; padding: 56px var(--gutter) 38px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 32px; }
.site-foot .brand { gap: 0; font-size: 22px; }
.site-foot .brand .mark { margin-right: 10px; }
.site-foot .brand span { color: var(--amber); }
.f-brand p { margin: 12px 0 0; max-width: 18rem; color: var(--cream-2); font-size: 14.5px; }
.f-brand .f-fine { color: var(--cream-3); font-size: 13px; }
.site-foot nav { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--cream-2); }
.site-foot nav b { margin-bottom: 4px; font-size: 13px; color: var(--cream-3); font-weight: 600; }
.site-foot nav a:hover { color: #fff; }
.site-foot .base { max-width: var(--shell); margin: 0 auto; padding: 18px var(--gutter) 28px; display: flex; justify-content: space-between; border-top: 1px solid rgba(163, 168, 255, .08); font-size: 13px; color: var(--cream-3); }

@property --gx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
/* ------------------------------------------------------------ the name, big */

/* "sunva.ai" across the whole width under the footer, the bottom of its
   letters sinking off the page. The letters are engraved: barely there, an
   edge of light along their tops. A light in the hero's amber and indigo
   follows the pointer (--gx, --gy from the script) and lights them where it
   passes; on touch it drifts across by itself. */
.giant {
  --gx: 50%;
  --gy: 30%;
  position: relative;
  overflow: hidden;
  height: calc(var(--gs) * .78);
  --gs: min(25.5vw, 400px);
  margin-top: 8px;
  user-select: none;
  -webkit-user-select: none;
}
.giant-in {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: .06em;
  translate: -50% 0;
  font: 800 var(--gs)/.82 var(--sans);
  letter-spacing: -.065em;
  white-space: nowrap;
}
.g-mark { flex: none; width: .5em; height: .7em; margin: .06em .04em 0 0; --mark-ink: rgba(239, 236, 229, .1); filter: drop-shadow(0 0 30px rgba(228, 163, 71, .25)); }
.g-word {
  padding-right: .06em;
  background:
    radial-gradient(28vw 22vw at var(--gx) var(--gy), rgba(240, 189, 107, .95), rgba(163, 168, 255, .55) 45%, transparent 75%),
    linear-gradient(180deg, rgba(239, 236, 229, .16), rgba(239, 236, 229, .03) 70%);
  background-attachment: scroll;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.g-word em { font-style: normal; font-size: .38em; letter-spacing: -.02em; vertical-align: .14em; margin-left: .02em; } /* on the baseline, lifted clear of the cut */
/* the light is measured in the word's own box (the script sets it there) */
.giant.lit .g-word { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .giant:not(.pointer) .g-word { animation: drift 9s ease-in-out infinite alternate; }
}
@keyframes drift { from { --gx: 8%; } to { --gx: 92%; } }

/* ------------------------------------------------------------ smaller screens */

@media (max-width: 1080px) {
  .bar nav .wide { display: none; }
  .day-head, .faq { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .bar { padding-top: max(14px, env(safe-area-inset-top)); }
  .ring-hero { padding-top: 96px; }
  .hero-title { font-size: clamp(66px, 21vw, 120px); }
  .status { font-size: 12.5px; }
  .hero-stage { --pw: min(64vw, 280px); }
  .float { font-size: 13px; }
  /* on a phone the cards are smaller and hang off the phone's sides, so the
     screen inside stays readable */
  .float { gap: 9px; padding: 9px 12px 9px 9px; border-radius: 15px; }
  .float.f1 { left: -3%; top: 3%; width: min(262px, 76%); }
  .float.f1 .n-app { width: 30px; height: 30px; border-radius: 8px; }
  .float.f1 .n-app svg { width: 16px; height: 22px; }
  .float b { font-size: 12.5px; }
  .float.f1 .n-top small { font-size: 11px; }
  .float.f1 .n-line { font-size: 11.5px; line-height: 1.35; }
  .float small { font-size: 11.5px; }
  .tick { width: 28px; height: 28px; }
  .tick svg { width: 15px; height: 15px; }
  .float.f2 { right: -3%; top: 57.5%; }
  .slide-hint { max-width: none; font-size: 13px; text-align: center; }
  .float.f3 { display: none; }
  .finale .rings i { width: 150vmin; }

  .call-bar { gap: 10px 12px; font-size: 13px; }
  .lp-label { display: none; }
  .line { font-size: clamp(28px, 8.4vw, 42px); max-width: 15ch; }
  .meant { font-size: 14.5px; }

  .day { border-radius: 26px 26px 0 0; }
  .next { align-items: baseline; gap: 10px; margin-left: 0; font-size: 13.5px; }
  .ce-btn { grid-template-columns: 36px 12px 32px minmax(0, 1fr) auto; gap: 1px 10px; padding: 10px 10px 10px 0; }
  .ce-btn::before { left: calc(36px + 10px + 5.5px); }
  .ce-btn time { font-size: 12px; }
  .ce-av { width: 32px; height: 32px; font-size: 11px; }
  .ce-text b { font-size: 14.5px; }
  .ce-line { font-size: 13px; }
  .dp { padding: 18px 16px; gap: 14px; border-radius: 18px; }
}

/* the narrowest phones: each call's pill gets its own line */
@media (max-width: 380px) {
  .ce-btn { grid-template-columns: 34px 12px 32px minmax(0, 1fr); grid-template-areas: "time dot av name" "time dot av line" "time dot av pill"; }
  .ce-btn::before { left: calc(34px + 10px + 5.5px); }
  .ce-btn .pill { justify-self: start; margin-top: 4px; }
  .lp-menu li small { display: none; }
}

@media (max-width: 720px) {


  .qa summary { font-size: 17px; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Fingers need room: on touch screens every small link and control gets a
   44px-tall target, without changing how it looks. */
@media (pointer: coarse) {
  .brand, .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  /* padding, not display: on phones these links are hidden and must stay so */
  .bar nav .wide { padding-block: 10px; }
  .bar nav .get { min-height: 44px; }
  .site-foot nav { gap: 0; }
  .site-foot nav a { display: flex; align-items: center; min-height: 44px; }
  .site-foot nav b { margin-bottom: 0; }
  .rail button { min-width: 44px; min-height: 44px; }
}