/* ============================================================
   Koine — marketing site
   Implements docs/koine-brand.html (Brand direction v1).

   Palette: parchment ground, ink text, lapis brand, gold at detail
   scale only, rubric red reserved exclusively for "live".
   Type: Literata carries headlines, scripture and saved quotes;
   IBM Plex Sans runs the live machinery (buttons, captions, labels);
   Plex Mono for technical surfaces. The KOINE wordmark is the SVG
   at /assets/branding/koine-wordmark.svg (same outlines as the app).
   Depth comes from hairlines and soft shadow, never dark panels.
   ============================================================ */
/* Self-hosted (scripts/vendor-fonts.mjs). These used to come from
   fonts.googleapis.com, which every CSP in vercel.json except the /p/ block
   refuses — so the whole site silently rendered in Georgia + system-ui. Serving
   them from our own origin satisfies the inherited default-src 'self'. */
@import url('/assets/fonts/fonts.css');

:root{
  /* ---- brand tokens (exact values from the brand doc) ---- */
  --ground:#F6F1E7;
  --ground-raised:#FDFAF3;
  --ink:#182131;
  --slate:#5C6677;
  --lapis:#274E8D;
  --lapis-ink:#1D3C6E;
  --gold:#C9992F;
  --gold-ink:#8A661C;
  --rubric:#BC3A28;
  --hairline:rgba(24,33,49,.14);
  --hairline-soft:rgba(24,33,49,.08);
  --on-lapis:#F6F1E7;
  /* Text on an inverted (parchment) chip: lapis on light, dark ground on dark. */
  --on-invert:#274E8D;
  --shadow:0 1px 2px rgba(24,33,49,.05),0 6px 24px rgba(24,33,49,.06);
  --shadow-lift:0 2px 4px rgba(24,33,49,.06),0 18px 44px -12px rgba(24,33,49,.20);

  /* ---- deep (lapis) surfaces: bands, page heroes, final CTA, footer ---- */
  --deep:var(--lapis);
  --deeper:var(--lapis-ink);
  --on-deep:#F6F1E7;
  /* Alpha steps are tuned so even the faintest tier clears WCAG AA (4.5:1) on
     lapis. Anything lighter reads nicely but fails on a projector or in sun. */
  --on-deep-soft:rgba(246,241,231,.88);
  --on-deep-faint:rgba(246,241,231,.75);
  --hairline-on-deep:rgba(246,241,231,.20);
  --hairline-on-deep-soft:rgba(246,241,231,.12);

  /* ---- type ---- */
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1200px;
  /* Floating header chrome — shared by .topbar and .home-fold (siblings). */
  --topbar-inset:14px;
  --topbar-h:64px;
  --topbar-h-compact:52px;

  /* Aliases kept so inline styles authored against the old names still
     resolve to brand values. Prefer the tokens above in new work. */
  --paper:var(--ground);
  --paper-2:#F0EADD;
  --white:var(--ground-raised);
  --line:var(--hairline);
  --line-2:var(--hairline-soft);
  --line-dark:var(--hairline-on-deep);
  --text:var(--ink);
  --ink-soft:#39445A;
  --muted:var(--slate);
  --faint:#8A93A2;
  --blue:var(--lapis);
  --blue-bright:#8FB0DC;
  --navy:var(--lapis);
  --live:var(--rubric);
}

/* No dark theme. The site is a single parchment-and-lapis palette in every
   colour scheme: the brand art (the paper-ripple heroes, the gold rules, the
   photographic hero crops) is lit for a light ground and a dark inversion of
   it read as a different product. A prefers-color-scheme:dark block here is
   how that comes back — if a dark palette is ever wanted, it needs the art
   redone alongside it, not just token swaps. */

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--lapis);text-decoration:none;text-underline-offset:3px;}
a:hover{text-decoration:underline;}
/* Literata carries every heading. SemiBold 600 is the display weight; the
   brand never sets headings heavier than that. */
h1,h2,h3,h4{
  margin:0;color:var(--ink);
  font-family:var(--serif);font-weight:600;line-height:1.16;letter-spacing:-.01em;
  text-wrap:balance;
}
p{margin:0;}
em{font-family:var(--serif);}
.mono{font-family:var(--mono);font-size:.86em;font-variant-numeric:tabular-nums;}
:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--lapis);outline-offset:2px;border-radius:2px;
}
.container{width:min(var(--maxw),100% - 56px);margin-inline:auto;}
@media(max-width:600px){.container{width:min(var(--maxw),100% - 36px);}}

/* Eyebrow labels are gold at label scale — one of gold's four sanctioned uses. */
.eyebrow{font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);display:inline-flex;align-items:center;gap:.7em;}
/* On a lapis ground, gold label text only reaches ~3.2:1 — under AA for
   12px type. The brand shows gold-on-parchment and gold-on-dark-ground, never
   gold-on-lapis, so label text there is parchment and gold is kept for the
   rules, borders and glyphs where a 3:1 icon threshold applies. */
.eyebrow--light{color:var(--on-deep);}

/* Gold hairline accent, used where the old waveform motif sat. */
.motif{display:block;height:2px;width:104px;background:var(--gold);border-radius:1px;opacity:.9;}
.motif--center{margin-inline:auto;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;height:50px;padding:0 22px;
  font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:0;border-radius:8px;cursor:pointer;
  border:1px solid transparent;transition:transform .12s,background .15s,color .15s,border-color .15s;
  text-decoration:none;white-space:nowrap;}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
/* Primary — lapis. .btn-ink and .btn-blue are both primary; the names predate
   the brand and are kept so page markup did not need rewriting. */
.btn-ink,.btn-blue{background:var(--lapis);color:var(--on-lapis);border-color:var(--lapis);}
.btn-ink:hover,.btn-blue:hover{background:var(--lapis-ink);border-color:var(--lapis-ink);}
/* Secondary — lapis outline on a light ground. */
.btn-line{background:transparent;color:var(--lapis);border-color:var(--lapis);}
.btn-line:hover{background:rgba(39,78,141,.06);}
/* On deep (lapis) surfaces. */
.btn-light{background:var(--on-deep);color:var(--on-invert);border-color:var(--on-deep);}
.btn-light:hover{background:#fff;border-color:#fff;}
.btn-ghost{background:transparent;color:var(--on-deep);border-color:var(--hairline-on-deep);}
.btn-ghost:hover{border-color:var(--on-deep);background:rgba(246,241,231,.08);}
.btn-sm{height:42px;padding:0 16px;font-size:.94rem;}

/* ---- header ---- */
/* Floating glass bar: inset from the viewport edges, rounded, soft blur.
   Sticky so it stays in view while scrolling without locking flush to the top. */
.topbar{
  position:sticky;top:var(--topbar-inset);z-index:60;
  width:min(var(--maxw),calc(100% - (var(--topbar-inset) * 2)));
  margin:var(--topbar-inset) auto 0;
  border-radius:18px;
  background:color-mix(in srgb,var(--ground-raised) 66%,transparent);
  backdrop-filter:saturate(170%) blur(18px);-webkit-backdrop-filter:saturate(170%) blur(18px);
  border:1px solid color-mix(in srgb,var(--hairline) 70%,transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb,var(--ground-raised) 55%,transparent) inset,
    var(--shadow-lift);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .topbar{background:var(--ground-raised);border-color:var(--hairline-soft);}
}
.topbar-in{display:flex;align-items:center;gap:24px;height:var(--topbar-h);}
/* The bar already constrains width — drop the global .container side gutters
   so the wordmark and actions sit inside the pill, not a second inset. */
.topbar > .container.topbar-in,
.topbar .nav-drawer > .container{width:100%;padding-inline:22px;box-sizing:border-box;}
@media(max-width:600px){
  :root{--topbar-inset:10px;}
  .topbar{border-radius:14px;}
  .topbar > .container.topbar-in,
  .topbar .nav-drawer > .container{padding-inline:16px;}
}
/* Compact mode once the page scrolls (class from home.js): shorter, fully
   rounded, a little clearer, quieter shadow. Hover, keyboard focus, or the
   sticky .is-expanded pin (set on first hover/focus, cleared on the next
   downward scroll) restores the full bar so nav targets stay comfortable —
   and because the open dropdown lives inside the header, the bar stays
   expanded while its menus are in use.

   Layout footprint stays 64px either way: compact shortens the bar and adds
   the lost height as margin-bottom; expand grows the bar and drops the margin.
   A negative margin here used to make hover expand the document and trigger
   scroll anchoring (the whole page jumped a few pixels). overflow-anchor
   none is a belt for browsers that still try to compensate. */
.topbar{
  overflow-anchor:none;
  transition:border-radius .22s ease,background-color .22s ease,box-shadow .22s ease,margin-bottom .22s ease;
}
.topbar-in{transition:height .22s ease;}
.topbar .brand-wordmark{transition:transform .22s ease,height .22s ease;}
.topbar.is-scrolled:not(:hover):not(:focus-within):not(.is-expanded){
  --topbar-h:var(--topbar-h-compact);
  margin-bottom:calc(64px - var(--topbar-h-compact));
  /* Half the compact height, not 999px: the rendered capsule is identical
     (radii clamp at half-height either way), but interpolating 18px → 26px
     keeps the corners in step with the shrinking height. A 999px target
     races ahead of the height transition and the ends go bulbous mid-morph. */
  border-radius:calc(var(--topbar-h-compact) / 2);
  background:color-mix(in srgb,var(--ground-raised) 52%,transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb,var(--ground-raised) 45%,transparent) inset,
    var(--shadow);
}
.topbar.is-scrolled:not(:hover):not(:focus-within):not(.is-expanded) .brand-wordmark{height:22px;}
@media(prefers-reduced-motion:reduce){
  .topbar,.topbar-in,.topbar .brand-wordmark{transition:none;}
}
/* The logo opts out of the global a:hover underline — an underline would cut
   through the E's gold arm. The gold roll below is the affordance instead. */
.brand{display:inline-flex;align-items:center;text-decoration:none;}
.brand:hover{text-decoration:none;}

/* Official SVG wordmark (same Bricolage outlines as the app). Inline so each
   letter can carry a gold flood layer. transform-origin left keeps the mark
   locked to the gutter on hover so the nav beside it never shifts. */
.brand-wordmark{
  display:block;height:26px;width:auto;color:var(--lapis);
  transform-origin:left center;transition:transform .22s ease;
  overflow:visible;
}
.brand-wordmark--on-deep,.foot .brand-wordmark{color:var(--on-deep);}
.foot .brand-wordmark{height:20px;}
.brand-wordmark .bw-base{fill:currentColor;}
.brand-wordmark .bw-gold,.brand-wordmark .bw-earm{fill:var(--gold);}
/* Gold flood on hover: each letter's gold path is clipped away at rest and
   opens on hover. inset grows from the visual head (the glyph group is
   y-flipped, so CSS "bottom" is the painted top). The E's arm is a separate
   always-on rect (.bw-earm), matching the app mark at rest. */
.brand-wordmark .bw-gold{
  clip-path:inset(100% 0 0 0);
  transition:clip-path .22s ease;
}
.brand:hover .brand-wordmark{transform:scale(1.06);}
.brand:hover .brand-wordmark .bw-gold{clip-path:inset(0 0 0 0);}
/* Roll E → N → I → O → K (E has no delay). */
.brand:hover .brand-wordmark .bw-n .bw-gold{transition-delay:.07s;}
.brand:hover .brand-wordmark .bw-i .bw-gold{transition-delay:.14s;}
.brand:hover .brand-wordmark .bw-o .bw-gold{transition-delay:.21s;}
.brand:hover .brand-wordmark .bw-k .bw-gold{transition-delay:.28s;}
@media(prefers-reduced-motion:reduce){
  .brand-wordmark,.brand-wordmark .bw-gold{transition:none;}
  .brand:hover .brand-wordmark{transform:none;}
  .brand:hover .brand-wordmark .bw-gold{transition-delay:0s;}
}
/* Visible-to-screen-readers name, since the wordmark SVG is aria-hidden. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.nav{display:flex;align-items:center;gap:30px;margin-left:18px;}
.nav>a{font-size:.97rem;font-weight:400;color:var(--ink);text-decoration:none;}
.nav>a:hover{color:var(--lapis);text-decoration:none;}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:16px;}
.quiet-link{font-size:.97rem;font-weight:600;color:var(--ink);}
.quiet-link:hover{color:var(--lapis);text-decoration:none;}

/* ---- two-level nav: dropdown menus ---- */
.nav-item{position:relative;display:flex;align-items:center;}
.nav-top{appearance:none;background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:.97rem;font-weight:400;color:var(--ink);display:inline-flex;align-items:center;gap:.4em;}
.nav-top:hover,.nav-item.is-open .nav-top{color:var(--lapis);}
.nav-top.active,.nav>a.active{color:var(--lapis);font-weight:600;}
.nav-top .caret{transition:transform .16s;opacity:.6;}
.nav-item.is-open .nav-top .caret{transform:rotate(180deg);}
.nav-menu{position:absolute;top:100%;left:-22px;margin-top:14px;z-index:70;
  min-width:320px;overflow:hidden;
  background:var(--ground-raised);border:1px solid var(--hairline-soft);border-radius:10px;box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;}
.nav-item.is-open .nav-menu{opacity:1;visibility:visible;transform:none;}
.nav-item--download .nav-menu{left:auto;right:-22px;}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
.nav-cols{display:flex;gap:34px;padding:24px 26px;}
.nav-col{display:flex;flex-direction:column;gap:2px;min-width:244px;}
.nav-col-k{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px;}
.nav-col a,.nav-option{display:block;padding:9px 12px;margin:0 -12px;border-radius:7px;text-decoration:none;}
.nav-col a:hover{background:var(--ground);text-decoration:none;}
.nav-col a b,.nav-option b{display:block;font-size:.96rem;font-weight:600;color:var(--ink);}
.nav-col a span,.nav-option span{display:block;font-size:.84rem;color:var(--slate);line-height:1.35;margin-top:2px;}
.nav-col a:hover b,.nav-col a[aria-current=page] b{color:var(--lapis);}
.nav-option--soon{cursor:default;}
.nav-option--soon b{color:var(--ink-soft);}
.nav-option--soon span{color:var(--slate);font-style:italic;}
.nav-menu-foot{display:block;padding:16px 26px;border-top:1px solid var(--hairline-soft);background:var(--ground);text-decoration:none;}
.nav-menu-foot:hover{background:var(--paper-2);text-decoration:none;}
.nav-menu-foot b{display:block;font-size:.96rem;font-weight:600;color:var(--ink);}
.nav-menu-foot:hover b,.nav-menu-foot[aria-current=page] b{color:var(--lapis);}
.nav-menu-foot span{display:block;font-size:.84rem;color:var(--slate);line-height:1.35;margin-top:2px;}

/* ---- mobile: burger + drawer ---- */
.nav-burger{display:none;appearance:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto;}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .18s,opacity .18s;}
.nav-burger span+span{margin-top:5px;}
.nav-burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger[aria-expanded=true] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-drawer{display:none;border-top:1px solid var(--hairline-soft);background:transparent;
  max-height:calc(100dvh - var(--topbar-h) - (var(--topbar-inset) * 2));overflow-y:auto;}
.nav-drawer[hidden]{display:none;}
.drawer-in{padding:18px 0 22px;display:flex;flex-direction:column;gap:2px;}
/* Groups are collapsed <details> so the whole menu fits one phone screen;
   summaries read as peers of the solo links (Pricing, Company). */
.drawer-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;font-size:1.05rem;font-weight:600;color:var(--ink);
  padding:10px 0;border-bottom:1px solid var(--hairline-soft);}
.drawer-group summary::-webkit-details-marker{display:none;}
.drawer-group summary::after{content:"";width:8px;height:8px;flex:none;margin-right:4px;
  border-right:1.5px solid var(--gold-ink);border-bottom:1.5px solid var(--gold-ink);
  transform:rotate(45deg);transition:transform .18s ease;}
.drawer-group[open] summary::after{transform:rotate(-135deg);}
.drawer-links{display:flex;flex-direction:column;padding-left:14px;}
.drawer-links a,.drawer-solo{font-size:1.05rem;font-weight:600;color:var(--ink);padding:10px 0;
  border-bottom:1px solid var(--hairline-soft);text-decoration:none;}
.drawer-links a{font-size:.98rem;font-weight:500;}
.drawer-links a[aria-current=page],.drawer-solo.active{color:var(--lapis);}
.drawer-disabled{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--hairline-soft);color:var(--ink-soft);font-size:.98rem;}
.drawer-disabled b{font-weight:500;}
.drawer-disabled em{font-family:var(--sans);font-size:.78rem;font-style:normal;color:var(--slate);}
.drawer-cta{display:flex;flex-direction:column;gap:11px;margin-top:18px;}
.drawer-cta .btn{width:100%;}
.drawer-login{align-self:center;font-size:.97rem;font-weight:600;color:var(--ink);padding:6px 0;}
.drawer-login:hover{color:var(--lapis);text-decoration:none;}

/* ---- first viewport (hero + stats) ---- */
/* Flex so the ticker keeps its natural height and is never clipped; the hero
   grows into whatever space is left under the floating topbar (bar + inset). */
.home-fold{position:relative;display:flex;flex-direction:column;
  height:calc(100svh - var(--topbar-h) - var(--topbar-inset));min-height:520px;overflow:hidden;}
@supports (height:100dvh){
  .home-fold{height:calc(100dvh - var(--topbar-h) - var(--topbar-inset));}
}

/* ---- hero ---- */
.hero{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:flex-start;
  border-bottom:1px solid var(--hairline);overflow:hidden;background:var(--ground);}
/* Fill the hero slot; parallax is transform-only so size/placement stay stable.
   Video uses the same box as the old still — muted seamless loop (~1.25s
   crossfade baked into the file; first 2s of source trimmed). */
.hero-art{position:absolute;inset:0;width:100%;height:100%;
  padding:0 clamp(16px,3vw,40px);box-sizing:border-box;
  object-fit:contain;object-position:center bottom;pointer-events:none;user-select:none;
  will-change:transform;z-index:0;display:block;background:transparent;
  /* Feather top + side edges into the band so the frame never shows a hard
     cut (the rings above the heads read as clipped otherwise); the bottom
     stays opaque where the people stand. */
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%),
    linear-gradient(180deg,transparent 0%,#000 16%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%),
    linear-gradient(180deg,transparent 0%,#000 16%,#000 100%);
  mask-composite:intersect;}
video.hero-art{border:0;}
.hero-in{position:relative;z-index:2;width:min(var(--maxw),100% - 56px);margin-inline:auto;
  padding:clamp(72px,14vh,140px) 0 0;padding-left:clamp(12px,4vw,48px);}
.hero-copy{max-width:34rem;will-change:transform,opacity,filter;}
.hero h1{font-size:clamp(2.2rem,4.2vw,3.15rem);line-height:1.1;letter-spacing:-.015em;color:var(--ink);
  max-width:32rem;hyphens:none;-webkit-hyphens:none;}
.hero-copy>p{margin-top:16px;font-size:1.08rem;color:var(--slate);max-width:28rem;line-height:1.45;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.hero-fine{margin-top:20px;color:var(--slate);font-size:.92rem;}
.band--dark .hero-fine{color:var(--on-deep-soft);}
.band--dark .hero-fine a{color:var(--on-deep);text-decoration:underline;}
@media(max-width:860px){
  /* Let the fold grow past one screen: copy + big video stage win the first
     viewport, the stats peek from below the edge as a scroll cue. */
  .home-fold{height:auto;min-height:calc(100svh - var(--topbar-h) - var(--topbar-inset));}
  .hero{flex-direction:column;}
  .hero-in{width:min(var(--maxw),100% - 36px);padding:48px 0 26px;padding-left:0;}
  .hero-copy{max-width:32rem;}
  /* On phones the letterboxed strip behind the copy reads tiny. Give the video
     its own stage below the copy: tall enough that the cover crop zooms in,
     anchored on the right of the frame where the speaking man sits (the left
     listeners fall away — the speaker is the story). */
  .hero-art{position:relative;inset:auto;order:2;flex:1 1 auto;
    min-height:clamp(360px,46svh,540px);
    width:100%;height:auto;padding:0;
    object-fit:cover;object-position:100% 56%;}
  .ticker .t{padding:16px 8px;}
}
@media(max-width:600px){
  .hero-in{padding-top:32px;}
  .hero-copy{max-width:24rem;}
}
@media(prefers-reduced-motion:reduce){
  .hero-art,.hero-copy{will-change:auto;transform:none!important;}
}

/* ---- thin ticker / trust row: hairlines, not a dark panel ---- */
.ticker{position:relative;z-index:3;flex:0 0 auto;background:var(--ground-raised);
  border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline);}
.ticker-in{display:flex;flex-wrap:wrap;align-items:center;gap:0;}
.ticker .t{flex:1 1 0;min-width:160px;padding:22px 8px;text-align:center;border-left:1px solid var(--hairline-soft);}
.ticker .t:first-child{border-left:0;}
.ticker .t b{display:block;font-family:var(--serif);font-size:1.55rem;font-weight:600;letter-spacing:-.01em;color:var(--lapis);}
.ticker .t span{font-size:.86rem;color:var(--slate);}

/* ---- generic band ---- */
.band{padding:88px 0;}
.band--paper{background:var(--ground);}
.band--white{background:var(--ground-raised);border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);}
/* "dark" bands are lapis — the brand surface. If something is Koine-branded, it is lapis. */
.band--dark{background:var(--deep);color:var(--on-deep-soft);}
.band--dark h2,.band--dark h3,.band--dark h4,.band--dark b{color:var(--on-deep);}
/* Scoped to prose links only. A blanket `.band--dark a` — even with :not(.btn)
   — outranks component rules like .band--dark .store-badge (":not()" carries a
   class's worth of specificity), which paints parchment text on a parchment
   button. Components own their own colours; this only recolours inline links. */
.band--dark :is(p,li,dd,figcaption,summary) a{color:var(--on-deep);}
.band-head{max-width:46rem;}
.band-head.center{margin-inline:auto;text-align:center;}
.band-head h2{font-size:clamp(1.9rem,3.2vw,2.7rem);margin-top:16px;}
.band-head>p{margin-top:18px;font-size:1.12rem;color:var(--slate);}
.band--dark .band-head>p{color:var(--on-deep-soft);}

/* ---- listeners band: paper art (left) + copy (right), hero-style ----
   Same light ground and contained video treatment as the fold hero; text
   sits on the right so it clears the silhouette cluster on the left. */
.listeners-band{position:relative;overflow:hidden;border-bottom:0;
  background:var(--ground);min-height:clamp(420px,72vh,720px);
  display:flex;align-items:center;
  /* Room for the art's downward parallax so silhouette bottoms aren't clipped. */
  --listeners-parallax-room:clamp(72px,12vh,140px);
  /* The horizontal band the copy column occupies, derived from the same
     container maths .listeners-band-in uses: the gutter outside the container,
     plus the copy's own max-width, plus a gap. The art subtracts this so the
     two never share space at any width. */
  --lb-copy-col:calc((100% - min(var(--maxw),100% - 56px)) / 2 + 28rem + clamp(20px,3vw,56px));
  --lb-pad-l:clamp(16px,3vw,40px);}
/* Soft dissolve at the top only — no bottom scrim (it was eating the torsos). */
.listeners-band::before{content:"";position:absolute;left:0;right:0;top:0;z-index:3;
  height:clamp(20px,4vh,40px);pointer-events:none;
  background:linear-gradient(180deg,var(--ground) 0%,transparent 100%);}
/* The art stops short of the copy instead of running the full width behind it.
   object-fit:contain sizes the frame off the BOX width, so a full-bleed box
   always drew the figures across the whole band; the old right-hand mask fade
   was a fixed percentage trying to clear a text column whose width is fixed in
   rem. Those two disagree as the viewport changes, and around 1000-1300px the
   headline landed on top of opaque paper figures.

   Deriving the right edge from the same container maths .listeners-band-in uses
   means the clear zone is correct at every width by construction rather than by
   a percentage that happens to work at one size. The trailing term is the copy
   column plus its gutter. */
/* Offsets and an explicit size, no padding. A mask covers the BORDER box while
   object-fit paints inside the CONTENT box, so any padding puts the fades at
   the wrong place — the old bottom stop landed in the empty parallax room and
   left the video's own near-cream background drawing a hard box edge across the
   band. Sizing the element to exactly the area the frame should occupy means
   plain percentage stops land on the frame's real edges.

   Width rather than `right`: this is a replaced element with a 16:9 intrinsic
   ratio, so width:auto resolves from that ratio instead of from the offsets,
   and with left+width both set the browser drops `right` as over-constrained —
   the box kept spanning the whole band. Height is explicit for the same reason.

   contain + bottom alignment then makes the box's left, right and bottom edges
   the frame's own edges; only the top can have slack above it, which is empty
   paper either way. The height leaves the parallax room below so the art can
   drift down without reaching the wave. */
.listeners-band-art{position:absolute;top:0;left:var(--lb-pad-l);
  width:calc(100% - var(--lb-copy-col) - var(--lb-pad-l));
  height:calc(100% - var(--listeners-parallax-room));
  padding:0;box-sizing:border-box;
  object-fit:contain;object-position:left bottom;pointer-events:none;user-select:none;
  will-change:transform;z-index:0;display:block;background:transparent;border:0;
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,#000 7%,#000 88%,transparent 100%),
    linear-gradient(180deg,transparent 0%,#000 5%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent 0%,#000 7%,#000 88%,transparent 100%),
    linear-gradient(180deg,transparent 0%,#000 5%,#000 88%,transparent 100%);
  mask-composite:intersect;}
.listeners-band-in{position:relative;z-index:2;width:min(var(--maxw),100% - 56px);margin-inline:auto;
  display:flex;justify-content:flex-end;align-items:center;padding:clamp(48px,8vh,88px) 0;}
.listeners-band-copy{max-width:28rem;will-change:transform,opacity,filter;
  padding-left:clamp(12px,4vw,48px);}
.listeners-band-copy h2{color:var(--ink);font-size:clamp(2rem,3.8vw,3rem);line-height:1.12;
  letter-spacing:-.015em;margin-top:15px;max-width:18ch;}
.listeners-band-copy p{margin-top:18px;max-width:28rem;color:var(--slate);font-size:1.08rem;line-height:1.45;}
/* Beige wave overlay — ticker-weight paper band with a wavy leading edge. */
.listeners-band-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:4;
  height:clamp(52px,8vh,72px);pointer-events:none;line-height:0;will-change:transform;}
.listeners-band-wave svg{display:block;width:100%;height:100%;}
.listeners-band-wave path{fill:var(--ground);}
/* A phone has no second column to put the art in, so the old rules dropped it
   behind the copy at 55% opacity. The video is 16:9 and the copy block is about
   the same height, which meant the figures sat directly under the paragraph:
   grey text over grey paper shapes, cropped mid-body top and bottom. It read as
   a rendering fault rather than a background.

   Stacking gives each one its own space. The art comes back to full opacity and
   is cropped deliberately with cover; initListenersBandParallax pins it here
   and shortens the copy's throw, keyed off this rule making it non-absolute. */
@media(max-width:860px){
  .listeners-band{min-height:0;flex-direction:column;align-items:stretch;
    --listeners-parallax-room:0px;}
  /* left/top are reset because the desktop rule insets the frame, and on a
     relatively positioned element those offsets would shift it instead. */
  .listeners-band-art{position:relative;left:auto;top:auto;right:auto;bottom:auto;order:2;
    width:100%;height:clamp(180px,25svh,250px);padding:0;
    object-fit:cover;object-position:center 38%;opacity:1;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 100%);}
  .listeners-band-in{order:1;width:min(var(--maxw),100% - 36px);justify-content:flex-start;
    padding:52px 0 32px;}
  .listeners-band-copy{max-width:32rem;padding-left:0;}
  .listeners-band-wave{height:48px;}
}
@media(max-width:600px){
  .listeners-band-in{padding:40px 0 28px;}
  .listeners-band-copy{max-width:24rem;}
}
@media(prefers-reduced-motion:reduce){
  .listeners-band-art,.listeners-band-copy,.listeners-band-wave{will-change:auto;transform:none!important;}
}

/* ---- live demo ---- */
.demo-head{max-width:48rem;}
.demo-head h2{font-size:clamp(1.9rem,3.3vw,2.7rem);margin-top:14px;}
.demo-head>p{margin-top:16px;color:var(--on-deep-soft);font-size:1.1rem;}
.demo-switch{display:inline-flex;gap:30px;margin-top:30px;border-bottom:1px solid var(--hairline-on-deep-soft);}
.demo-switch button{appearance:none;background:none;border:0;cursor:pointer;font-family:var(--sans);
  font-size:1.02rem;font-weight:600;color:var(--on-deep-faint);padding:0 0 14px;position:relative;}
.demo-switch button .k{display:block;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-deep-faint);margin-bottom:5px;}
.demo-switch button.is-active{color:var(--on-deep);}
.demo-switch button.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);}
.demo-switch button.is-active .k{color:var(--on-deep);}

.demo-stage{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:center;margin-top:54px;}
@media(max-width:860px){.demo-stage{grid-template-columns:1fr;gap:40px;justify-items:center;}}

/* ---- the phone mock ----
   The product itself is a light surface: parchment ground, ink text, depth from
   hairlines. Live captions are sans; only scripture is set in the serif. */
.phone{width:316px;border-radius:42px;padding:12px;background:var(--deeper);box-shadow:var(--shadow-lift);}
/* Explicit colour so anything added inside the mock inherits ink, not the
   parchment text colour of the surrounding lapis band. */
.phone-screen{background:var(--ground);color:var(--ink);border-radius:32px;overflow:hidden;
  height:632px;display:flex;flex-direction:column;}
.ph-head{display:flex;align-items:center;gap:10px;padding:18px 18px 12px;}
.ph-live{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rubric);border:1px solid currentColor;padding:5px 12px;border-radius:999px;}
.ph-live i{width:7px;height:7px;border-radius:50%;background:var(--rubric);animation:blip 1.6s ease-in-out infinite;}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.ph-live i{animation:none;}}
.ph-route{margin-left:auto;font-size:.8rem;font-weight:600;color:var(--lapis);}
.ph-stream{flex:1;padding:6px 18px 0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;}
.ph-line{opacity:0;transform:translateY(8px);animation:lineUp .5s forwards;}
.ph-line .src{font-size:.76rem;color:var(--slate);margin-bottom:3px;}
/* Live text is sans — the interface machinery, not the Word. */
.ph-line .trn{font-family:var(--sans);font-size:1.08rem;line-height:1.45;color:var(--ink);}
.ph-line.rtl .trn,.ph-line.rtl .src{direction:rtl;text-align:right;}
.ph-line.faded{opacity:.45;}
@keyframes lineUp{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ph-line{animation:none;opacity:1;transform:none;}}
/* Scripture card — gold rule, gold-ink reference, Literata for the passage. */
.ph-verse{margin:8px 18px 0;padding:12px 14px;border-left:3px solid var(--gold);
  background:color-mix(in srgb,var(--gold) 8%,transparent);border-radius:0 8px 8px 0;
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;}
.ph-verse.show{opacity:1;transform:none;}
.ph-verse b{display:block;font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:5px;}
.ph-verse p{font-family:var(--serif);font-size:1rem;color:var(--ink);line-height:1.55;}
.ph-wave{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:38px;margin:14px 0;}
.ph-wave i{width:3px;border-radius:2px;background:var(--lapis);height:6px;opacity:.55;}
.ph-wave.play i{animation:eq 1s ease-in-out infinite;}
@keyframes eq{0%,100%{height:6px}50%{height:var(--h,22px)}}
@media(prefers-reduced-motion:reduce){.ph-wave.play i{animation:none;}}
.ph-foot{display:flex;align-items:center;gap:10px;justify-content:center;padding:0 18px 16px;
  color:var(--slate);font-size:.78rem;font-weight:600;}
.ph-foot .lc-dot{width:5px;height:5px;border-radius:50%;background:var(--lapis);}

/* two-way conversation bubbles (personal / conversation demos) */
.ph-line .who{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);margin-bottom:5px;}
.ph-line.side-they,.ph-line.side-you{max-width:90%;padding:10px 13px;border-radius:14px;}
.ph-line.side-they{align-self:flex-start;background:var(--ground-raised);border:1px solid var(--hairline-soft);border-bottom-left-radius:4px;}
.ph-line.side-you{align-self:flex-end;text-align:right;background:color-mix(in srgb,var(--lapis) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--lapis) 24%,transparent);border-bottom-right-radius:4px;}
.ph-line.side-you .who{color:var(--lapis);}
.ph-line.side-you .trn,.ph-line.side-they .trn{font-size:1.02rem;}

.demo-copy .motif{margin-bottom:22px;}
.demo-copy h3{font-size:1.6rem;color:var(--on-deep);}
.demo-copy>p{margin-top:14px;color:var(--on-deep-soft);font-size:1.06rem;max-width:34rem;}
/* Ticks default to a light ground — most of them now live on parchment. The
   deep-surface variant is opt-in via .band--dark / .pagehero--dark, so a tick
   list dropped into a light section can never inherit parchment-on-parchment. */
.ticks{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:13px;}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:1rem;}
.ticks li svg{flex:none;color:var(--gold-ink);margin-top:4px;}
.ticks li b{color:var(--ink);font-weight:600;}
.band--dark .ticks li,.pagehero--dark .ticks li,.final .ticks li{color:var(--on-deep-soft);}
.band--dark .ticks li b,.pagehero--dark .ticks li b,.final .ticks li b{color:var(--on-deep);}
.band--dark .ticks li svg,.pagehero--dark .ticks li svg,.final .ticks li svg{color:var(--gold);}
.demo-note{margin-top:26px;color:var(--on-deep-faint);font-size:.85rem;}

/* ---- cinematic real-media demo (home) ---- */
.demo-showcase{padding:94px 0 0;background:var(--ground);overflow:hidden;}
.demo-showcase-head{max-width:760px;text-align:center;will-change:transform,opacity,filter;}
.demo-showcase-head h2{font-size:clamp(2rem,4vw,3.25rem);margin-top:15px;}
.demo-showcase-head p{margin:18px auto 0;max-width:650px;color:var(--slate);font-size:1.08rem;}
.demo-showcase-head .demo-tech{margin-top:12px;color:var(--slate-faint);font-size:.78rem;font-weight:550;letter-spacing:.02em;}
.demo-showcase-shell{position:relative;width:min(1120px,calc(100% - 170px));min-height:720px;margin:52px auto 0;
  color:#fff;overflow:visible;isolation:isolate;will-change:transform;}
@media(prefers-reduced-motion:reduce){
  .demo-showcase-head,.demo-showcase-shell{will-change:auto;transform:none!important;filter:none!important;opacity:1!important;}
}
.demo-cinema{position:absolute;inset:0;overflow:visible;border-radius:28px;background:#15233a;}
.demo-cinema-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;
  clip-path:inset(0 round 28px);
  opacity:.32;filter:saturate(.72) blur(8px);transform:none;
  transition:opacity .8s ease,filter .8s ease;}
.demo-cinema-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(9,17,30,.92) 0%,rgba(9,17,30,.46) 24%,rgba(9,17,30,.08) 52%,rgba(9,17,30,.4) 77%,rgba(9,17,30,.9) 100%),
  linear-gradient(0deg,rgba(9,17,30,.78) 0%,transparent 38%,rgba(9,17,30,.3) 100%);
  clip-path:inset(0 round 28px);}
.demo-stage-progress{position:absolute;z-index:7;right:0;bottom:0;left:0;height:4px;overflow:hidden;
  border-radius:0 0 28px 28px;background:rgba(255,255,255,.16);clip-path:inset(0 round 0 0 28px 28px);
  pointer-events:none;}
.demo-stage-progress span{display:block;width:0;height:100%;border-radius:0 999px 999px 0;background:#63b6ff;
  box-shadow:0 0 14px rgba(99,182,255,.5);transition:width .15s linear;}
.demo-speakers{position:absolute;z-index:4;top:42px;left:50%;display:flex;align-items:center;gap:12px;
  width:min(1128px,calc(100% - 72px));padding:4px;overflow-x:auto;scrollbar-width:none;justify-content:center;
  transform:translateX(-50%);transition:left .65s cubic-bezier(.2,.8,.2,1),top .65s cubic-bezier(.2,.8,.2,1),
  transform .65s cubic-bezier(.2,.8,.2,1),flex-direction .1s;}
.demo-speakers::-webkit-scrollbar{display:none;}
.demo-speaker{appearance:none;display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 102px;width:102px;padding:9px 7px;
  border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(15,25,42,.68);
  box-shadow:0 14px 34px rgba(0,0,0,.18);backdrop-filter:blur(18px);color:#fff;cursor:pointer;text-align:center;
  font-family:var(--sans);transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;}
.demo-speaker:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.48);text-decoration:none;}
.demo-speaker.is-active{border-color:rgba(230,193,104,.9);box-shadow:0 0 0 1px rgba(230,193,104,.24),0 18px 42px rgba(0,0,0,.22);}
.demo-speaker-image{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;background:#24334b;}
.demo-speaker-image img{width:100%;height:100%;object-fit:cover;}
.demo-speaker-copy{min-width:0;max-width:100%;display:block;line-height:1.2;}
.demo-speaker-copy strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:.68rem;font-weight:600;white-space:nowrap;}
.demo-speaker-copy span{display:none;margin-top:5px;color:rgba(255,255,255,.7);font-size:.7rem;white-space:nowrap;}
.demo-enter{position:absolute;z-index:3;left:50%;top:53%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;
  padding:15px 20px;border:1px solid rgba(255,255,255,.44);border-radius:999px;background:rgba(246,241,231,.94);
  color:#1d3c6e;font-family:var(--sans);font-weight:600;font-size:.94rem;cursor:pointer;
  box-shadow:0 22px 54px rgba(0,0,0,.25);transition:opacity .3s,transform .3s;}
.demo-enter:hover{transform:translate(-50%,-50%) scale(1.02);}
.demo-context{position:absolute;z-index:2;left:72px;bottom:72px;width:min(390px,32vw);opacity:0;
  transform:translateY(18px);transition:opacity .5s .18s,transform .5s .18s;}
.demo-context-kind{display:block;margin-bottom:12px;color:#e5c36f;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;}
.demo-context h3{color:#fff;font-size:clamp(1.55rem,2.2vw,2.25rem);text-wrap:balance;}
.demo-context p{margin-top:14px;color:rgba(255,255,255,.76);font-size:.94rem;line-height:1.55;}
.demo-context-credit{display:block;margin-top:18px;color:rgba(255,255,255,.52);font-size:.72rem;}
.demo-handoff{position:absolute;z-index:5;right:-72px;top:50%;width:350px;opacity:0;
  transform:translate(42px,-44%) scale(.94);transition:opacity .55s .12s,transform .7s cubic-bezier(.2,.8,.2,1);}
.demo-handoff-card,.demo-browser-preview{border:1px solid rgba(255,255,255,.32);background:rgba(248,246,240,.96);
  color:#182131;box-shadow:0 30px 78px rgba(0,0,0,.38),0 5px 18px rgba(0,0,0,.2);backdrop-filter:blur(22px);}
.demo-handoff-card{padding:24px;border-radius:26px;text-align:center;}
.demo-handoff-kicker{display:flex;align-items:center;justify-content:center;gap:7px;color:#8a661c;font-size:.66rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.demo-handoff-kicker i{width:7px;height:7px;border-radius:50%;background:#36a166;box-shadow:0 0 0 5px rgba(54,161,102,.12);}
.demo-qr-wrap{position:relative;display:grid;place-items:center;width:186px;height:186px;margin:17px auto 15px;padding:9px;
  border:1px solid rgba(39,78,141,.13);border-radius:19px;background:#fff;}
.demo-qr-wrap img{display:block;width:100%;height:100%;border-radius:10px;}
.demo-qr-mark{position:absolute;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:#274e8d;color:#f6f1e7;font-family:var(--serif);font-size:1.25rem;font-weight:700;
  box-shadow:0 0 0 5px #fff;}
.demo-handoff.is-unavailable .demo-qr-wrap{background:
  linear-gradient(135deg,rgba(39,78,141,.08),rgba(201,153,47,.08)),#fff;}
.demo-handoff.is-unavailable .demo-qr-wrap::after{content:"Phone replay\\Acoming soon";white-space:pre;text-align:center;
  color:#5c6677;font-size:.78rem;font-weight:650;line-height:1.35;}
.demo-handoff.is-unavailable .demo-qr-mark{display:none;}
.demo-handoff-card h3{font-size:1.35rem;line-height:1.15;color:#182131;}
.demo-handoff-copy{margin:9px auto 17px;color:#5c6677;font-size:.78rem;line-height:1.48;}
.demo-language-label{display:block;color:#5c6677;font-size:.68rem;font-weight:600;margin-bottom:6px;text-align:left;}
.demo-language{width:100%;appearance:none;padding:11px 36px 11px 12px;border:1px solid rgba(24,33,49,.16);
  border-radius:9px;background:#fffdf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23274E8D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:#182131;font:600 .86rem var(--sans);}
.demo-open-link{display:flex;align-items:center;justify-content:center;margin-top:10px;padding:11px 14px;border-radius:9px;
  background:#274e8d;color:#fff;font-size:.82rem;font-weight:650;text-decoration:none;}
.demo-open-link:hover{background:#1f3f73;text-decoration:none;}
.demo-handoff-note{margin-top:9px;color:#7b8492;font-size:.65rem;line-height:1.35;}
.demo-browser-preview{margin-top:11px;border-radius:18px;overflow:hidden;}
.demo-browser-preview summary{cursor:pointer;padding:13px 17px;color:#274e8d;font-size:.74rem;font-weight:650;list-style:none;}
.demo-browser-preview summary::-webkit-details-marker{display:none;}
.demo-browser-preview summary::after{content:"+";float:right;color:#8a661c;font-size:1rem;line-height:.8;}
.demo-browser-preview[open] summary::after{content:"−";}
.demo-browser-preview[open]{padding-bottom:15px;}
.demo-caption-card{flex:1;min-height:148px;margin-top:14px;padding:15px;border-left:3px solid #c9992f;
  border-radius:0 9px 9px 0;background:rgba(201,153,47,.08);overflow:hidden;}
.demo-browser-preview .demo-caption-card{min-height:122px;margin:0 15px;padding:12px;}
.demo-caption-source{display:block;color:#8a661c;font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;}
.demo-caption-stream{display:flex;min-height:92px;flex-direction:column;justify-content:center;}
.demo-caption-card p{margin:0;color:#182131;line-height:1.42;}
.demo-caption-previous{min-height:1.25em;color:#7b8492!important;font-size:.72rem!important;opacity:.7;}
.demo-caption-active{margin-top:7px!important;font-size:1.02rem;font-weight:520;}
.demo-caption-active.is-listening{color:#687385;font-weight:400;}
.demo-caption-original{margin-top:9px!important;padding-top:8px;border-top:1px solid rgba(39,78,141,.12);
  color:#687385!important;font-size:.7rem!important;line-height:1.4!important;}
.demo-caption-original::before{content:"Original  ";color:#274e8d;font-size:.57rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;}
.demo-phone-controls{display:flex;align-items:center;gap:12px;margin-top:17px;}
.demo-browser-preview .demo-phone-controls{margin:14px 15px 0;}
.demo-play{appearance:none;width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#274e8d;color:#f6f1e7;cursor:pointer;}
.demo-pause-icon{display:none;}
.demo-play.is-playing .demo-play-icon{display:none;}
.demo-play.is-playing .demo-pause-icon{display:block;}
.demo-progress-wrap{flex:1;}
.demo-progress{height:4px;border-radius:99px;background:rgba(39,78,141,.15);overflow:hidden;}
.demo-progress span{display:block;width:0;height:100%;border-radius:inherit;background:#274e8d;}
.demo-time{display:flex;justify-content:space-between;margin-top:6px;color:#5c6677;font:400 .61rem var(--mono);}
.demo-volume-mix{display:grid;gap:8px;margin-top:13px;padding-top:11px;border-top:1px solid rgba(24,33,49,.1);}
.demo-browser-preview .demo-volume-mix{margin:12px 15px 0;}
.demo-volume-mix label{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:9px;}
.demo-volume-mix label>span{display:flex;justify-content:space-between;color:#5c6677;font-size:.62rem;font-weight:600;}
.demo-volume-mix output{color:#274e8d;font-family:var(--mono);font-weight:400;}
.demo-volume-mix input{width:100%;height:4px;margin:0;accent-color:#274e8d;cursor:pointer;}
.demo-volume-mix input:disabled{opacity:.35;cursor:not-allowed;}
.demo-showcase-shell.is-engaged .demo-cinema-video{opacity:1;filter:saturate(.92);transform:scale(1);}
.demo-showcase-shell.is-engaged .demo-enter{opacity:0;pointer-events:none;transform:translate(-50%,-44%);}
.demo-showcase-shell.is-engaged .demo-speakers{left:-31px;top:50%;width:66px;max-height:calc(100% - 54px);
  padding:4px;overflow-x:visible;overflow-y:auto;flex-direction:column;transform:translateY(-50%);align-items:flex-start;}
.demo-showcase-shell.is-engaged .demo-speaker{flex:0 0 58px;width:58px;height:58px;padding:6px;border-radius:50%;}
.demo-showcase-shell.is-engaged .demo-speaker.is-active{transform:scale(1.08);}
.demo-showcase-shell.is-engaged .demo-speaker-copy{position:absolute;left:70px;width:210px;opacity:0;pointer-events:none;
  transition:opacity .2s;}
.demo-showcase-shell.is-engaged .demo-speaker-copy strong{font-size:.88rem;text-align:left;}
.demo-showcase-shell.is-engaged .demo-speaker-copy span{display:block;text-align:left;}
.demo-showcase-shell.is-engaged .demo-speaker:hover .demo-speaker-copy,
.demo-showcase-shell.is-engaged .demo-speaker:focus-visible .demo-speaker-copy{opacity:1;}
.demo-showcase-shell.is-engaged .demo-speaker-image{width:44px;height:44px;}
.demo-showcase-shell.is-engaged .demo-context{opacity:1;transform:none;}
.demo-showcase-shell.is-engaged .demo-handoff{opacity:1;transform:translate(0,-50%) scale(1);}
@media(max-width:1050px){
  .demo-showcase-shell{width:calc(100% - 96px);min-height:720px;}
  .demo-context{left:108px;bottom:34px;width:300px;}
  .demo-handoff{right:-42px;width:330px;}
  .demo-showcase-shell.is-engaged .demo-speakers{left:-24px;}
}
@media(max-width:760px){
  .demo-showcase{padding-top:70px;}
  .demo-showcase-shell{width:100%;min-height:1030px;margin-top:38px;}
  .demo-cinema{border-radius:0;box-shadow:none;}
  .demo-cinema-video,.demo-cinema-shade{clip-path:none;}
  .demo-speakers{top:24px;width:calc(100% - 20px);gap:9px;justify-content:flex-start;}
  .demo-speaker{flex-basis:86px;width:86px;padding:7px 5px;}
  .demo-speaker-image{width:48px;height:48px;}
  .demo-speaker-copy strong{font-size:.82rem;}
  .demo-speaker-copy span{font-size:.66rem;}
  .demo-cinema-video{height:48%;object-position:center top;}
  .demo-cinema-shade{background:linear-gradient(0deg,#15233a 50%,rgba(21,35,58,.12) 80%,rgba(21,35,58,.36) 100%);}
  .demo-showcase-shell.is-engaged .demo-speakers{left:50%;top:18px;width:calc(100% - 20px);max-height:none;padding:4px;
    overflow-x:auto;overflow-y:hidden;transform:translateX(-50%);flex-direction:row;justify-content:flex-start;align-items:center;}
  .demo-showcase-shell.is-engaged .demo-speaker{width:58px;height:58px;padding:5px;}
  .demo-showcase-shell.is-engaged .demo-speaker-image{width:46px;height:46px;}
  .demo-showcase-shell.is-engaged .demo-speaker-copy{display:none;}
  .demo-context{left:24px;right:24px;bottom:auto;top:390px;width:auto;text-align:center;}
  .demo-context p{display:none;}
  .demo-context-credit{margin-top:9px;}
  .demo-handoff,.demo-showcase-shell.is-engaged .demo-handoff{right:auto;left:50%;top:auto;bottom:26px;width:min(350px,calc(100% - 34px));
    transform:translateX(-50%) scale(.96);transform-origin:center bottom;}
  .demo-showcase-shell.is-engaged .demo-handoff{opacity:1;}
  .demo-browser-preview{display:none;}
  .demo-enter{top:35%;}
}
@media(prefers-reduced-motion:reduce){
  .demo-cinema-video,.demo-speakers,.demo-enter,.demo-context,.demo-handoff{transition:none;}
}

/* ---- vertical hover catalogue + listener phone ---- */
.demo-showcase-shell{margin-top:70px;margin-bottom:178px;}
.demo-speaker{position:relative;}
.demo-speakers,.demo-showcase-shell.is-engaged .demo-speakers{left:-52px;top:50%;width:58px;max-height:none;padding:2px;gap:7px;
  overflow:visible;flex-direction:column;transform:translateY(-50%);align-items:flex-start;justify-content:center;}
.demo-speaker,.demo-showcase-shell.is-engaged .demo-speaker{flex:0 0 54px;width:54px;height:54px;padding:5px;border-radius:50%;}
.demo-speaker-image,.demo-showcase-shell.is-engaged .demo-speaker-image{width:42px;height:42px;}
.demo-speaker-copy,.demo-showcase-shell.is-engaged .demo-speaker-copy{position:absolute;z-index:9;left:66px;top:50%;
  width:max-content;max-width:235px;padding:9px 12px;border:1px solid rgba(255,255,255,.2);border-radius:11px;
  background:rgba(13,23,39,.94);box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;
  transform:translate(8px,-50%);transition:opacity .18s,transform .18s;}
.demo-speaker-copy::before{content:"";position:absolute;right:100%;top:50%;margin-top:-6px;
  border:6px solid transparent;border-right-color:rgba(13,23,39,.94);}
.demo-speaker-copy strong,.demo-showcase-shell.is-engaged .demo-speaker-copy strong{overflow:visible;color:#fff;
  font-size:.8rem;text-align:left;text-overflow:clip;}
.demo-speaker-copy span,.demo-showcase-shell.is-engaged .demo-speaker-copy span{display:block;margin-top:3px;
  color:rgba(255,255,255,.68);font-size:.65rem;text-align:left;}
.demo-speaker:hover .demo-speaker-copy,.demo-speaker:focus-visible .demo-speaker-copy{opacity:1;transform:translate(0,-50%);}
.demo-showcase-shell.is-previewing .demo-cinema-video,.demo-showcase-shell.is-engaged .demo-cinema-video{
  opacity:1;filter:saturate(.92);transform:none;}
.demo-showcase-shell.is-previewing .demo-context,.demo-showcase-shell.is-engaged .demo-context{opacity:1;transform:none;}

.demo-stage-prompt{position:absolute;z-index:3;left:50%;top:50%;width:min(470px,calc(100% - 120px));
  color:#fff;text-align:center;pointer-events:none;transform:translate(-50%,-50%);
  transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .3s;}
.demo-stage-prompt-arrow{position:absolute;right:calc(100% + 20px);top:50%;width:clamp(190px,19vw,300px);
  color:#e6c168;filter:drop-shadow(0 3px 10px rgba(0,0,0,.32));transform:translateY(-50%);
  animation:demo-prompt-point 1.6s ease-in-out infinite;}
@keyframes demo-prompt-point{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-9px)}}
.demo-stage-prompt span{display:block;margin-bottom:12px;color:#e6c168;font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;}
.demo-stage-prompt strong{display:block;font-family:var(--serif);font-size:clamp(1.55rem,3vw,2.35rem);
  font-weight:600;line-height:1.18;letter-spacing:-.025em;text-shadow:0 3px 24px rgba(0,0,0,.35);}
.demo-stage-prompt-mobile{display:none!important;}
.demo-stage-prompt p{margin:14px 0 0;color:rgba(255,255,255,.7);font-size:.76rem;}
.demo-showcase-shell.is-previewing .demo-stage-prompt,.demo-showcase-shell.is-engaged .demo-stage-prompt{
  visibility:hidden;opacity:0;transform:translate(-50%,-44%);}

.demo-stage-audio{position:absolute;z-index:8;top:auto;bottom:-82px;left:50%;display:grid;
  grid-template-columns:116px minmax(260px,1fr) auto;grid-template-areas:"sound balance languages";
  align-items:center;gap:0 16px;width:min(760px,calc(100% - 80px));padding:11px 14px;
  border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#172335;
  box-shadow:0 18px 46px rgba(3,10,20,.28);color:rgba(234,239,246,.76);font-family:var(--sans);
  transform:translateX(-50%);}
.demo-stage-sound{grid-area:sound;appearance:none;display:flex;align-items:center;justify-content:center;gap:7px;
  min-width:0;height:36px;padding:0 10px;border:1px solid rgba(169,92,38,.3);border-radius:999px;
  background:#fff3e8;color:#874a21;cursor:pointer;font:600 .68rem var(--sans);text-align:left;}
.demo-stage-sound svg{color:#a65b27;flex:none;}
.demo-stage-sound-on{display:none;}
.demo-stage-sound-copy{display:flex;align-items:center;line-height:1;}
.demo-stage-sound-copy strong{font-size:.65rem;font-weight:750;white-space:nowrap;}
.demo-stage-sound-copy small{display:none;}
.demo-stage-sound:hover{border-color:rgba(169,92,38,.5);}
.demo-stage-sound[aria-pressed="true"]{border-color:rgba(97,178,249,.34);background:rgba(60,137,207,.16);color:#91caff;}
.demo-stage-sound[aria-pressed="true"] svg{color:#74bdff;}
.demo-stage-sound[aria-pressed="true"] .demo-stage-sound-off{display:none;}
.demo-stage-sound[aria-pressed="true"] .demo-stage-sound-on{display:block;}
.demo-stage-balance{grid-area:balance;display:grid;min-width:0;gap:3px;}
.demo-stage-balance-labels{display:flex;align-items:center;justify-content:space-between;color:rgba(234,239,246,.72);
  font-size:.62rem;font-weight:650;}
.demo-stage-balance-labels>span{display:flex;gap:4px;white-space:nowrap;}
.demo-stage-balance-labels output{display:none;}
.demo-stage-balance input,.demo-phone-balance input{--balance:90%;appearance:none;width:100%;height:18px;margin:0;
  background:transparent;cursor:pointer;}
.demo-stage-balance input::-webkit-slider-runnable-track,.demo-phone-balance input::-webkit-slider-runnable-track{
  height:5px;border-radius:999px;background:rgba(224,233,244,.25);}
.demo-stage-balance input::-webkit-slider-thumb,.demo-phone-balance input::-webkit-slider-thumb{appearance:none;width:17px;height:17px;
  margin-top:-6px;border:2px solid #fff;border-radius:50%;background:var(--lapis);box-shadow:0 1px 6px rgba(20,39,69,.34);}
.demo-stage-balance input::-moz-range-track,.demo-phone-balance input::-moz-range-track{height:5px;border:0;border-radius:999px;background:rgba(224,233,244,.25);}
.demo-stage-balance input::-moz-range-progress,.demo-phone-balance input::-moz-range-progress{height:5px;border-radius:999px;background:transparent;}
.demo-stage-balance input::-moz-range-thumb,.demo-phone-balance input::-moz-range-thumb{width:15px;height:15px;border:2px solid #fff;
  border-radius:50%;background:var(--lapis);box-shadow:0 1px 6px rgba(20,39,69,.34);}
.demo-stage-balance input:disabled,.demo-phone-balance input:disabled{opacity:.42;cursor:not-allowed;}
.demo-stage-languages{grid-area:languages;display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:38px;padding-left:16px;border-left:1px solid rgba(255,255,255,.09);}
.demo-stage-languages[hidden]{display:none;}
.demo-stage-languages>span{color:rgba(234,239,246,.58);font-size:.58rem;font-weight:650;line-height:1;}
.demo-stage-language-options{display:flex;align-items:center;gap:5px;}
.demo-stage-language-options button{appearance:none;display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.045);cursor:pointer;}
.demo-stage-language-options button span:first-child{font-size:.92rem;line-height:1;}
.demo-stage-language-options button span:last-child{display:none;}
.demo-stage-language-options button:hover{border-color:rgba(110,183,247,.45);background:rgba(86,157,221,.1);}
.demo-stage-language-options button.is-active{border-color:#77bcf7;background:rgba(69,143,210,.18);
  box-shadow:0 0 0 2px rgba(119,188,247,.18);}

.demo-handoff{position:absolute;z-index:5;inset:0;width:auto;opacity:0;pointer-events:none;
  transform:none;transition:opacity .45s .12s;}
.demo-phone-wrap{position:absolute;right:-70px;top:53%;width:316px;pointer-events:auto;isolation:isolate;perspective:1400px;
  transform:translate(46px,-50%) scale(.84);transform-origin:center;transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.demo-showcase-shell.is-engaged .demo-handoff{opacity:1;transform:none;}
.demo-showcase-shell.is-engaged .demo-phone-wrap{transform:translate(0,-50%) scale(.88);}
.demo-phone-flipper{position:relative;width:316px;height:636px;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.75,.25,1);}
.demo-phone-flipper.is-flipped{transform:rotateY(180deg);}
.demo-phone{position:absolute;z-index:2;inset:0;width:316px;padding:8px;border:1px solid rgba(255,255,255,.24);border-radius:42px;background:#111923;
  box-shadow:0 34px 90px rgba(0,0,0,.54),0 6px 18px rgba(0,0,0,.32);}
.demo-phone-front,.demo-phone-back{backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.demo-phone-back{transform:rotateY(180deg);}
.demo-phone-screen{position:relative;height:620px;padding:16px 16px 15px;overflow:hidden;border-radius:34px;
  background:radial-gradient(circle at 50% 105%,rgba(9,72,83,.24),transparent 42%),#090f17;color:#f6f7f9;
  display:flex;flex-direction:column;font-family:var(--sans);}
.demo-listener-header{position:absolute;z-index:6;top:16px;right:16px;left:16px;display:flex;flex-direction:column;gap:7px;}
.demo-listener-header::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:-16px;height:154px;
  background:linear-gradient(180deg,rgba(9,15,23,.97) 0%,rgba(9,15,23,.84) 53%,rgba(9,15,23,.42) 78%,transparent 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 57%,rgba(0,0,0,.72) 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 57%,rgba(0,0,0,.72) 76%,transparent 100%);pointer-events:none;}
.demo-listener-titlebar{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;min-height:34px;}
.demo-listener-titlebar>strong{overflow:hidden;color:#fff;text-align:center;text-overflow:ellipsis;white-space:nowrap;
  font-size:.76rem;font-weight:760;letter-spacing:-.01em;}
.demo-listener-back,.demo-listener-settings-button{appearance:none;display:grid;place-items:center;width:34px;height:34px;padding:0;
  border:0;border-radius:11px;background:transparent;color:#f4f6f8;cursor:pointer;}
.demo-listener-back{justify-self:start;}
.demo-listener-actions{display:flex;align-items:center;justify-content:flex-end;gap:1px;}
.demo-listener-dot{width:7px;height:7px;border-radius:50%;background:#50d989;box-shadow:0 0 0 2px rgba(80,217,137,.12);}
.demo-listener-settings-button[aria-expanded="true"]{color:#5fb1ff;background:rgba(90,170,245,.08);}
.demo-listener-pills{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;}
.demo-language-pill,.demo-ask-pill{appearance:none;display:inline-flex;align-items:center;justify-content:center;height:33px;margin:0;
  border:1px solid rgba(137,157,184,.24);border-radius:999px;background:rgba(255,255,255,.06);color:#7b8798;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);cursor:pointer;font-size:.59rem;font-weight:650;}
.demo-language-pill{min-width:0;max-width:205px;padding:0 10px;gap:3px;}
.demo-language-pill>svg:first-child{color:#4ba9ff;flex:none;}
.demo-language-pill>svg:last-child{margin-left:1px;color:#4a91d0;flex:none;}
.demo-language-from{overflow:hidden;max-width:61px;text-overflow:ellipsis;white-space:nowrap;}
.demo-language-arrow{color:#526074;}
.demo-language-pill strong{overflow:hidden;color:#65b4ff;font-size:inherit;font-weight:800;text-overflow:ellipsis;white-space:nowrap;}
.demo-ask-pill{flex:none;gap:5px;padding:0 10px;color:#65b4ff;font-weight:800;}
.demo-language-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.demo-listener-recorded{position:absolute;z-index:5;top:102px;right:19px;left:19px;display:flex;align-items:center;gap:5px;
  margin:0;color:#7c8796;font-size:.51rem;line-height:1.3;}
.demo-listener-recorded svg{flex:none;color:#738199;}
.demo-listener-transcript{position:absolute;z-index:1;inset:0 16px 88px;min-height:0;padding:128px 3px 14px;overflow:hidden;}
.demo-listener-transcript::before{content:"";position:absolute;z-index:1;right:0;bottom:0;left:0;height:34px;
  background:linear-gradient(180deg,transparent,rgba(9,15,23,.7));pointer-events:none;}
.demo-caption-flow{position:relative;z-index:0;display:flex;min-height:100%;flex-direction:column;justify-content:flex-start;}
.demo-listener-transcript p{margin:0;color:#f4f4f2;font-family:var(--serif);font-weight:540;letter-spacing:-.012em;}
.demo-listener-transcript .demo-caption-previous{display:flex;min-height:0;flex-direction:column;gap:12px;margin-bottom:16px;}
.demo-listener-transcript .demo-caption-previous:empty{display:none;}
/* A finished line keeps its size. The listener itself never shrinks one — in
   styles.css, .lv-tline and .lv-tline.is-live are the same type and differ only
   in colour — and shrinking it here made the phone on the front page look like a
   caption ticker rather than the product being sold. */
.demo-caption-history-line{color:#e6ebf3!important;font-size:1rem!important;line-height:1.34!important;opacity:1;}
.demo-listener-transcript .demo-caption-active{font-size:1rem;line-height:1.34;color:#6ab2ff;
  transform-origin:50% 100%;}
/* The "listening" placeholder is not a transcript line and stays small. */
.demo-listener-transcript .demo-caption-active.is-listening{color:#8793a3;}

/* Highlighting, as in the listener: drag to select, or click a finished line to
   mark it (styles.css .lv-tline is-marked; user-select:text is what allows the
   drag in the first place). */
.demo-caption-history-line{cursor:pointer;-webkit-user-select:text;user-select:text;
  border-radius:8px;padding:2px 7px;margin:0 -7px;transition:background .16s ease;}
.demo-caption-history-line:hover{background:rgba(255,255,255,.055);}
.demo-caption-history-line.is-marked,
.demo-caption-history-line.is-marked:hover{background:rgba(251,191,36,.22);}
.demo-listener-transcript .demo-caption-active{-webkit-user-select:text;user-select:text;}
.demo-listener-transcript ::selection{background:rgba(251,191,36,.34);}

/* The Bible card, copied from the live listener's own verse card
   (styles.css .listener-site[data-listener-state="joined"] .lv-verse-inline):
   dark paper, blue hairline, "● BIBLE" capsule hung over the top-left edge. */
.demo-verse{position:relative;margin:15px 0 3px;border-radius:16px;
  border:1px solid rgba(106,178,255,.26);
  background:linear-gradient(150deg,rgba(28,34,40,.96),rgba(24,29,35,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.demo-verse-kicker{position:absolute;top:-9px;left:12px;z-index:2;display:inline-flex;
  align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  border:1px solid rgba(106,178,255,.24);background:#1a1f24;color:#6ab2ff;
  font-family:var(--sans);font-size:8.5px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;box-shadow:0 4px 10px rgba(0,0,0,.3);}
.demo-verse-kicker i{display:block;width:5px;height:5px;border-radius:999px;background:#6ab2ff;}
.demo-verse-head{display:block;width:100%;padding:13px 14px;border:0;background:transparent;
  color:inherit;text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.demo-verse-ref{font-family:var(--serif);font-size:.9rem;font-weight:650;line-height:1.2;color:#e4edf7;}
.demo-verse.is-expanded .demo-verse-ref{font-size:1.04rem;}
.demo-verse-version{margin-left:7px;font-family:var(--sans);font-size:8.5px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:rgba(106,178,255,.86);white-space:nowrap;}
.demo-verse-text{display:-webkit-box;margin:7px 0 0;color:rgba(228,237,247,.72);
  font-family:var(--serif);font-size:.86rem;line-height:1.36;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;-webkit-user-select:text;user-select:text;}
.demo-verse.is-expanded .demo-verse-text{display:block;overflow:visible;}
.demo-listener-transcript .demo-caption-active.is-listening{color:#8793a3;font-family:var(--sans);font-size:.74rem;font-weight:550;}
.demo-listener-footer{position:absolute;z-index:4;right:0;bottom:0;left:0;padding-top:18px;
  background:linear-gradient(180deg,transparent,rgba(9,15,23,.93) 20%,#090f17 47%);}
.demo-phone-note{margin:0 16px 5px;color:#738091;text-align:center;font-size:.48rem;line-height:1.25;}
.demo-listener-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:57px;padding:5px 8px 7px;
  border-top:1px solid rgba(137,157,184,.12);background:rgba(9,15,23,.88);}
.demo-listener-nav button,.demo-listener-nav button:disabled{appearance:none;display:flex;min-width:0;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;padding:0;border:0;background:transparent;color:#667386;
  opacity:1;pointer-events:none;font:600 .45rem var(--sans);}
.demo-listener-nav button.is-active{color:#62b4ff;}
.demo-listener-nav-icon{height:18px;font-size:1rem;font-weight:400;line-height:18px;}
.demo-listener-nav button.is-active .demo-listener-nav-icon{filter:drop-shadow(0 0 6px rgba(98,180,255,.28));}
.demo-language-menu,.demo-listener-settings{position:absolute;z-index:8;top:58px;right:11px;left:11px;padding:11px;
  border:1px solid rgba(130,151,177,.25);border-radius:22px;background:rgba(24,30,38,.96);
  box-shadow:0 26px 60px rgba(0,0,0,.5);backdrop-filter:blur(24px) saturate(1.4);}
.demo-language-menu[hidden],.demo-listener-settings[hidden]{display:none;}
.demo-language-menu-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:3px 4px 10px;}
.demo-language-menu-heading strong{font-size:.72rem;}
.demo-language-menu-heading span{color:#8490a0;font-size:.52rem;}
.demo-language-options{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.demo-language-options button{appearance:none;display:flex;align-items:center;justify-content:flex-start;gap:7px;min-height:39px;
  padding:7px 10px;border:1px solid rgba(137,157,184,.18);border-radius:999px;background:rgba(255,255,255,.05);
  color:#e7ebf0;cursor:pointer;font-size:.61rem;font-weight:700;}
.demo-language-option-flag{font-size:.9rem;line-height:1;}
.demo-language-options button.is-active{border-color:rgba(74,159,239,.55);background:rgba(51,125,198,.24);color:#6ab8ff;}
.demo-listener-settings-actions{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;padding:1px 3px;}
.demo-listener-settings-actions>span{color:#fff;font-size:.72rem;font-weight:800;}
.demo-listener-settings-actions button{appearance:none;padding:5px 9px;border:0;border-radius:999px;background:rgba(77,154,224,.18);
  color:#66b5ff;cursor:pointer;font-size:.56rem;font-weight:750;}
.demo-settings-group{overflow:hidden;border:1px solid rgba(137,157,184,.2);border-radius:15px;background:rgba(255,255,255,.045);}
.demo-settings-head{display:flex;align-items:center;gap:8px;height:43px;padding:0 10px;color:#f4f7fa;}
.demo-settings-head svg{color:#5eb1fa;}
.demo-settings-head strong{margin-right:auto;font-size:.65rem;}
.demo-settings-head>span{color:#7d8999;font-size:.65rem;}
.demo-listener-settings .demo-volume-mix{display:grid;gap:5px;margin:0;padding:10px 10px 11px;border-top:1px solid rgba(137,157,184,.18);}
.demo-listener-settings .demo-phone-balance{display:grid;grid-template-columns:1fr;gap:3px;}
.demo-listener-settings .demo-phone-balance-labels{display:flex;align-items:center;justify-content:space-between;color:#dce2ea;font-size:.58rem;font-weight:650;}
.demo-phone-balance-labels>span{display:flex;gap:4px;white-space:nowrap;}
.demo-listener-settings .demo-volume-mix output{color:#8995a5;font-family:var(--sans);font-size:.54rem;font-weight:650;}
.demo-listener-settings .demo-volume-mix p{margin:0 1px;color:#7f8a99;font-size:.49rem;line-height:1.35;}

.demo-phone-qr-screen{align-items:center;justify-content:center;padding:35px 27px 26px;
  background:radial-gradient(circle at 50% 20%,rgba(39,78,141,.13),transparent 38%),#f6f1e7;color:#182131;text-align:center;}
.demo-phone-qr-heading{display:flex;flex-direction:column;align-items:center;}
.demo-phone-qr-brand{display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:14px;
  background:var(--lapis);color:#f6f1e7;font-family:var(--serif);font-size:1.15rem;font-weight:600;
  box-shadow:0 8px 24px rgba(39,78,141,.2);}
.demo-phone-qr-heading>span:nth-child(2){color:var(--gold-ink);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.demo-phone-qr-heading h3{margin:9px 0 8px;color:#182131;font-family:var(--serif);font-size:1.36rem;line-height:1.15;}
.demo-phone-qr-heading p{margin:0;max-width:238px;color:#5c6677;font-size:.68rem;line-height:1.5;}
.demo-phone-qr{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:24px;color:var(--lapis-ink);text-decoration:none;}
.demo-phone-qr:hover{text-decoration:none;}
.demo-phone-qr .demo-qr-box{position:relative;display:grid;place-items:center;width:188px;height:188px;padding:8px;
  border:1px solid rgba(24,33,49,.1);border-radius:20px;background:#fff;overflow:hidden;
  box-shadow:0 14px 35px rgba(24,33,49,.12);transition:transform .2s,box-shadow .2s;}
.demo-phone-qr:hover .demo-qr-box{transform:translateY(-2px);box-shadow:0 18px 42px rgba(24,33,49,.17);}
.demo-qr-box img{display:block;width:100%;height:100%;border-radius:8px;}
.demo-phone-qr .demo-qr-box .demo-qr-mark{width:32px;height:32px;border-radius:9px;font-size:.86rem;box-shadow:0 0 0 5px #fff;}
.demo-qr-copy{display:flex;flex-direction:column;gap:3px;}
.demo-phone-qr .demo-qr-copy strong{color:var(--lapis-ink);font-size:.72rem;}
.demo-phone-qr .demo-qr-copy span{color:var(--slate);font-size:.58rem;line-height:1.35;}
.demo-phone-qr-note{margin:auto 0 0;color:#8a93a2;font-size:.55rem;line-height:1.4;}
.demo-phone-qr.is-unavailable{cursor:default;opacity:.55;pointer-events:none;}
.demo-phone-qr.is-unavailable .demo-qr-box{background:linear-gradient(135deg,rgba(39,78,141,.09),rgba(201,153,47,.1)),#fff;}
.demo-phone-qr.is-unavailable .demo-qr-box img,.demo-phone-qr.is-unavailable .demo-qr-mark{display:none;}
.demo-phone-qr.is-unavailable .demo-qr-box::after{content:"Phone replay\Aavailable on\Athe first two events";white-space:pre;text-align:center;
  color:#687385;font-size:.68rem;font-weight:600;line-height:1.4;}
.demo-phone-flip-toggle{appearance:none;display:flex;align-items:center;justify-content:center;gap:7px;min-width:172px;height:38px;
  margin:15px auto 0;padding:0 17px;border:1px solid rgba(24,33,49,.12);border-radius:999px;background:var(--ground-raised);
  color:var(--lapis-ink);box-shadow:0 10px 30px rgba(9,17,30,.18);cursor:pointer;font:600 .7rem var(--sans);
  transition:transform .2s,background .2s,opacity .2s;}
.demo-phone-flip-toggle:hover{background:#fff;transform:translateY(-2px);}
.demo-phone-flip-toggle[aria-pressed="true"] svg{transform:rotateY(180deg);}
.demo-phone-flip-toggle:disabled{cursor:not-allowed;opacity:.62;transform:none;}

@media(max-width:1050px){
  .demo-speakers,.demo-showcase-shell.is-engaged .demo-speakers{left:-44px;}
  .demo-phone-wrap{right:-68px;}
}
@media(max-width:760px){
  .demo-showcase-shell{min-height:1140px;margin-top:52px;margin-bottom:150px;}
  .demo-speakers,.demo-showcase-shell.is-engaged .demo-speakers{left:8px;top:50%;width:48px;gap:5px;
    transform:translateY(-50%);flex-direction:column;}
  .demo-speaker,.demo-showcase-shell.is-engaged .demo-speaker{flex-basis:46px;width:46px;height:46px;padding:4px;}
  .demo-speaker-image,.demo-showcase-shell.is-engaged .demo-speaker-image{width:36px;height:36px;}
  .demo-speaker-copy{display:none;}
  .demo-stage-audio,.demo-showcase-shell.is-engaged .demo-stage-audio{top:auto;right:16px;bottom:-126px;left:16px;width:auto;
    grid-template-columns:108px minmax(0,1fr);grid-template-areas:"sound balance" "languages languages";
    gap:8px 10px;padding:10px;transform:none;}
  .demo-stage-sound{height:36px;padding:0 8px;}
  .demo-stage-languages{justify-content:center;min-width:0;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.08);border-left:0;}
  .demo-stage-prompt{top:31%;left:57%;width:calc(100% - 104px);text-align:left;}
  .demo-stage-prompt-arrow{right:calc(100% + 8px);width:62px;}
  .demo-stage-prompt strong{font-size:1.4rem;}
  .demo-stage-prompt-desktop{display:none!important;}
  .demo-stage-prompt-mobile{display:block!important;}
  .demo-stage-prompt p{font-size:.68rem;}
  .demo-context{left:70px;right:18px;top:400px;bottom:auto;width:auto;text-align:left;}
  .demo-handoff,.demo-showcase-shell.is-engaged .demo-handoff{inset:0;width:auto;transform:none;}
  .demo-phone-wrap,.demo-showcase-shell.is-engaged .demo-phone-wrap{right:auto;left:50%;top:auto;bottom:78px;
    transform:translateX(-50%) scale(.84);transform-origin:center bottom;}
}
@media(prefers-reduced-motion:reduce){
  .demo-phone-wrap,.demo-speaker-copy,.demo-phone-qr,.demo-phone-flipper,.demo-phone-flip-toggle{transition:none!important;}
  .demo-stage-prompt-arrow{animation:none!important;}
}

/* ---- how it works (numerals + hairlines) ---- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:50px;border-top:1px solid var(--hairline);}
.flow .step{padding:34px 30px 34px 0;border-left:1px solid var(--hairline);padding-left:30px;}
.flow .step:first-child{border-left:0;padding-left:0;}
.flow .num{font-family:var(--mono);font-size:1.5rem;font-weight:400;color:var(--gold-ink);letter-spacing:.02em;line-height:1;}
.flow .step h3{font-size:1.24rem;margin:14px 0 8px;}
.flow .step p{color:var(--slate);font-size:1rem;}
@media(max-width:860px){.flow{grid-template-columns:1fr;}.flow .step{border-left:0;padding-left:0;border-top:1px solid var(--hairline);}.flow .step:first-child{border-top:0;}}
/* four-step variant. These follow the .flow mobile query above, so they must
   restate every breakpoint they care about — otherwise repeat(4,1fr) wins on phones. */
.flow--four{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){
  .flow--four{grid-template-columns:1fr 1fr;}
  .flow--four .step:nth-child(3),.flow--four .step:nth-child(4){border-top:1px solid var(--hairline);}
  .flow--four .step:nth-child(odd){border-left:0;padding-left:0;}
}
@media(max-width:560px){.flow--four{grid-template-columns:1fr;}}
.band--dark .flow{border-top-color:var(--hairline-on-deep);}
.band--dark .flow .step{border-left-color:var(--hairline-on-deep);}
.band--dark .flow .step p{color:var(--on-deep-soft);}
.band--dark .flow .num{color:var(--gold);}
@media(max-width:1000px){.band--dark .flow--four .step:nth-child(3),.band--dark .flow--four .step:nth-child(4){border-top-color:var(--hairline-on-deep);}}
@media(max-width:860px){.band--dark .flow .step{border-top-color:var(--hairline-on-deep);}}

/* ---- use cases ---- */
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 34px;margin-top:52px;}
.use{display:flex;flex-direction:column;}
.use-img{aspect-ratio:4/3;overflow:hidden;border-radius:10px;box-shadow:var(--shadow);}
.use-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.use:hover .use-img img{transform:scale(1.04);}
@media(prefers-reduced-motion:reduce){.use:hover .use-img img{transform:none;}}
.use h3{font-size:1.28rem;margin:20px 0 8px;}
.use p{color:var(--slate);font-size:.99rem;}
.uses--four{grid-template-columns:repeat(4,1fr);gap:34px 26px;}
.uses--four .use h3{font-size:1.15rem;margin-top:17px;}
.uses--four .use p{font-size:.95rem;}
@media(max-width:860px){.uses,.uses--four{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.uses,.uses--four{grid-template-columns:1fr;}}

/* ---- pricing path router ---- */
/* Three short links that classify the buyer before the full catalog.
   Not cards: hairline columns, same weight as a nav row. */
.price-path-lead{margin:0 0 22px;font-size:1.05rem;color:var(--slate);max-width:36rem;}
.price-path{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);}
.price-path-item{display:flex;flex-direction:column;gap:8px;padding:26px 28px;border-left:1px solid var(--hairline);
  text-decoration:none;color:inherit;min-height:100%;}
.price-path-item:first-child{border-left:0;padding-left:0;}
.price-path-item:hover{background:var(--ground-raised);}
.price-path-item:hover .price-path-go{border-bottom-color:transparent;}
.price-path-k{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);}
.price-path-item strong{font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.price-path-go{margin-top:4px;font-weight:600;color:var(--lapis);border-bottom:1px solid var(--lapis);
  align-self:flex-start;padding-bottom:2px;}
.price-path-item--quiet strong{font-size:1.2rem;}
.price-path-item--quiet .price-path-go{font-weight:500;color:var(--slate);border-bottom-color:var(--hairline);}
@media(max-width:760px){
  .price-path{grid-template-columns:1fr;border-top:0;}
  .price-path-item{border-left:0;border-top:1px solid var(--hairline);padding-left:0;}
  .price-path-item:first-child{border-top:0;}
}

/* Compact personal strip — secondary to organization/event pricing */
.price-personal{display:grid;grid-template-columns:1.1fr 1.4fr;gap:36px;align-items:start;
  padding:28px 0 8px;border-top:1px solid var(--hairline);}
.price-personal-copy .e-k{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);}
.price-personal-copy h3{font-size:1.45rem;margin:8px 0 10px;}
.price-personal-copy p{color:var(--slate);font-size:.98rem;max-width:28rem;}
.price-personal-plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.price-personal-plan{display:flex;flex-direction:column;gap:6px;padding:18px 0 18px 22px;border-left:1px solid var(--hairline);}
.price-personal-name{font-weight:600;color:var(--ink);}
.price-personal-amt{font-family:var(--serif);font-size:1.7rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);}
.price-personal-amt span{font-family:var(--sans);font-size:.95rem;font-weight:400;color:var(--slate);}
.price-personal-note{font-size:.9rem;color:var(--slate);margin-bottom:8px;}
.price-personal-plan .btn{align-self:flex-start;margin-top:4px;}
@media(max-width:760px){
  .price-personal{grid-template-columns:1fr;gap:22px;}
  .price-personal-plans{grid-template-columns:1fr;}
  .price-personal-plan{padding-left:0;border-left:0;border-top:1px solid var(--hairline);}
}

/* ---- pricing columns ---- */
.price-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:52px;border-top:1px solid var(--ink);}
.price-col{padding:34px 30px;border-left:1px solid var(--hairline);}
.price-col:first-child{border-left:0;padding-left:0;}
.price-col.feat{background:var(--ground-raised);}
.price-col .plabel{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);}
.price-col h3{font-size:1.45rem;margin:10px 0 6px;}
.price-col .amt{font-family:var(--serif);font-size:2.4rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);}
.price-col .amt span{font-family:var(--sans);font-size:1rem;font-weight:400;color:var(--slate);}
.price-col>p{margin:12px 0 20px;color:var(--slate);font-size:.97rem;}
.price-col a.pcta{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--lapis);
  border-bottom:1px solid var(--lapis);padding-bottom:2px;text-decoration:none;}
.price-col a.pcta:hover{border-bottom-color:transparent;text-decoration:none;}
@media(max-width:760px){.price-row{grid-template-columns:1fr;border-top:0;}.price-col{border-left:0;border-top:1px solid var(--hairline);padding-left:0;}}

/* ---- final cta ---- */
.final{background:var(--deep);color:var(--on-deep-soft);}
.final-in{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;padding:74px 0;}
.final h2{font-size:clamp(1.8rem,3vw,2.5rem);color:var(--on-deep);max-width:22ch;}
.final .eyebrow{color:var(--on-deep);margin-bottom:14px;}

/* ---- footer ---- */
.foot{background:var(--deeper);color:var(--on-deep-soft);padding:60px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;}
.foot .blurb{margin-top:16px;max-width:24rem;font-size:.92rem;color:var(--on-deep-soft);}
.foot h4{color:var(--on-deep);font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 14px;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot ul a{color:var(--on-deep-soft);font-size:.92rem;text-decoration:none;}
.foot ul a:hover{color:var(--on-deep);text-decoration:underline;}
.foot-bar{margin-top:46px;padding-top:22px;border-top:1px solid var(--hairline-on-deep-soft);display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--on-deep-faint);font-size:.84rem;}
.foot-bar .legal{display:flex;gap:18px;flex-wrap:wrap;}
.foot-bar a{color:var(--on-deep-faint);text-decoration:none;}
.foot-bar a:hover{color:var(--on-deep);text-decoration:underline;}
/* Attribution both companies require of anyone showing their store badge. It
   sits below the copyright line, quieter than it, because it is a notice
   rather than navigation. Carried in English on every locale: these are the
   marks' registered forms, not copy. */
.foot-trademarks{flex-basis:100%;margin:14px 0 0;color:var(--on-deep-faint);opacity:.72;
  font-size:.75rem;line-height:1.6;max-width:60rem;}

@media(max-width:960px){
  .nav{display:none;}
  /* At tablet widths, keep both account actions as one right-aligned cluster
     beside the burger. The burger's desktop auto margin used to put a lone
     Start free button halfway across the bar. */
  .nav-burger{display:block;margin-left:8px;}
  .nav-drawer:not([hidden]){display:block;}
  .topbar-in{gap:0;}
  .nav-actions{margin-left:auto;}
}
@media(max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  /* The brand cell carries the blurb and the two store badges. At half of a
     phone's width that is ~123px — narrower than a single badge, so the pair
     had nowhere to go but wrap and then get squeezed. Give it the full row;
     the link columns pair up underneath it. */
  .foot-grid > :first-child{grid-column:1/-1;}
  .ticker .t{flex-basis:50%;border-top:1px solid var(--hairline-soft);}
}
@media(max-width:600px){
  /* A phone header has room for the identity and menu only. Login and Start
     free remain available inside the drawer, but disappear together here. */
  .nav-actions{display:none;}
  .nav-burger{margin-left:auto;}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .nav-burger{padding:10px 0 10px 8px;}
  .brand-wordmark{height:24px;}
}
.skip{position:absolute;left:-999px;}
.skip:focus{left:14px;top:10px;background:var(--ground-raised);color:var(--ink);padding:10px 14px;border-radius:8px;z-index:99;}

/* ---- subpage heroes ---- */
/* The page hero comes in a parchment and a lapis variant. Rather than have the
   two fight over selector specificity — which silently broke the sub-heading and
   the fine print in turn — the variant only reassigns tokens, and every rule
   below reads those tokens. Colour follows the surface, not the cascade. */
.pagehero{
  padding:62px 0 54px;border-bottom:1px solid var(--hairline);background:var(--ground);
  --ph-heading:var(--ink);--ph-body:var(--ink-soft);--ph-meta:var(--slate);--ph-link:var(--ink);
}
.pagehero--dark{
  background:var(--deep);color:var(--on-deep-soft);border-bottom:2px solid var(--gold);
  --ph-heading:var(--on-deep);--ph-body:var(--on-deep-soft);--ph-meta:var(--on-deep-soft);--ph-link:var(--on-deep);
}
/* Steel-paper hero — muted blue cardstock, full-bleed under the floating
   topbar. Tested first on education; roll out by swapping pagehero--dark. */
.pagehero--paper{
  margin-top:calc(0px - var(--topbar-h) - var(--topbar-inset));
  padding-top:calc(62px + var(--topbar-h) + var(--topbar-inset));
  padding-bottom:64px;
  border-bottom:0;
  color:var(--ink-soft);
  background-color:#a5b5c5;
  background-image:url("/assets/branding/steel-paper-grain.png");
  background-size:200px 200px;
  background-repeat:repeat;
  --ph-heading:var(--ink);
  --ph-body:var(--ink-soft);
  --ph-meta:var(--slate);
  --ph-link:var(--lapis);
}
.pagehero--paper .eyebrow--light{color:var(--gold-ink);}
/* Keep education markup (btn-light / btn-ghost) working on the light paper. */
.pagehero--paper .btn-light{
  background:var(--lapis);color:var(--on-lapis);border-color:var(--lapis);
}
.pagehero--paper .btn-light:hover{background:var(--lapis-ink);border-color:var(--lapis-ink);}
.pagehero--paper .btn-ghost{
  background:transparent;color:var(--lapis);border-color:var(--lapis);
}
.pagehero--paper .btn-ghost:hover{background:rgba(39,78,141,.08);border-color:var(--lapis-ink);color:var(--lapis-ink);}
.mobile-app-hero{background-color:var(--ground);background-image:none;}
.app-embed .pagehero--paper{margin-top:0;padding-top:28px;}
.pagehero .crumb{color:var(--ph-meta);font-size:.86rem;}
.pagehero .crumb a{color:var(--ph-link);font-weight:600;text-decoration:none;}
.pagehero .crumb a:hover{text-decoration:underline;}
.pagehero .eyebrow{margin:16px 0 0;}
.pagehero h1{font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.1;margin-top:14px;max-width:20ch;color:var(--ph-heading);}
.pagehero>.container>p,.pagehero p.ph-sub{margin-top:18px;font-size:1.16rem;color:var(--ph-body);max-width:42rem;}
.pagehero>.container>p.hero-fine{font-size:.92rem;color:var(--ph-meta);max-width:none;}
.pagehero>.container>p.hero-fine a{color:var(--ph-link);text-decoration:underline;}
.pagehero .hero-actions{margin-top:28px;}

/* ---- art hero: the landing hero's paper-ripple, bled in from the right ----
   Every subpage shares the lapis text panel; the art lives only where no text
   does. Each page picks its crop of the letters with art--k/o/i/n/e. */
.pagehero--art{
  margin-top:calc(0px - var(--topbar-h) - var(--topbar-inset));
  padding-top:calc(64px + var(--topbar-h) + var(--topbar-inset));
  padding-bottom:72px;
  border-bottom:2px solid var(--gold);
  position:relative;overflow:hidden;
  background:var(--deep);
  --ph-heading:var(--on-deep);--ph-body:var(--on-deep-soft);--ph-meta:var(--on-deep-soft);--ph-link:var(--on-deep);
}
.pagehero-art{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  object-fit:cover;object-position:var(--art-pos,58% 46%);
}
/* Text stays on solid lapis at every viewport: the column is capped short of
   the reveal, and this overlay keeps everything left of the reveal lapis-solid. */
.pagehero--art::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,
    var(--deep) 0%,var(--deep) 56%,
    color-mix(in srgb,var(--deep) 70%,transparent) 68%,
    transparent 86%);
}
.pagehero--art .container{position:relative;z-index:2;}
.pagehero--art .container>*{max-width:54%;}
.pagehero--art .container>h1{max-width:min(20ch,54%);}
.pagehero--art .container>p{max-width:min(42rem,54%);}
.pagehero--art .container>p.hero-fine{max-width:min(42rem,54%);}
.art--k{--art-pos:8% 46%;}
.art--o{--art-pos:34% 46%;}
.art--i{--art-pos:50% 46%;}
.art--n{--art-pos:66% 46%;}
.art--e{--art-pos:88% 46%;}
.app-embed .pagehero--art{margin-top:0;padding-top:28px;}
@media(max-width:760px){
  .pagehero--art{
    padding-top:calc(48px + var(--topbar-h) + var(--topbar-inset));
    padding-bottom:56px;
  }
  .pagehero-art{opacity:.14;}
  .pagehero--art::before{background:rgba(16,23,36,.5);}
  .pagehero--art .container>*{max-width:none;}
  .pagehero--art .container>h1{max-width:20ch;}
  .pagehero--art .container>p,.pagehero--art .container>p.hero-fine{max-width:42rem;}
  /* Same escape as h1 and p above, and needed for the same reason: the release
     on line ~1303 is a `>*` rule, so .pagehero--art-light's own `>*` cap of
     48% (a desktop measure, keeping copy off the artwork) ties it on
     specificity and wins on order. h1 and p out-specify it by naming an
     element; the badge row has to name its class. Left capped, 48% of a phone
     is narrower than one badge and the pair stacks. */
  .pagehero--art .container>.store-badges{max-width:none;}
}
/* Light art hero — the landing hero's calm: full-bleed paper scene, ink text
   on the calm zone, only a parchment scrim for insurance. */
.pagehero--art-light{
  background:var(--ground);
  border-bottom:2px solid var(--gold);
  --ph-heading:var(--ink);--ph-body:var(--ink-soft);--ph-meta:var(--slate);--ph-link:var(--lapis);
  min-height:min(86vh,940px);
  display:flex;align-items:center;
}
/* Art is a true half-bleed: it covers the full height of the right half so the
   subject itself (not just the frame) fills the space; text stays in the
   standard container gutter, capped to the left half. A soft mask feathers
   the inner cut edge into the parchment. */
  .pagehero--art-light .pagehero-art{
    inset:0 0 0 auto;
    width:50%;height:100%;
  object-fit:cover;object-position:100% 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24%);
}
.pagehero--art-light .container>*{max-width:min(48%,600px);}
.pagehero--art-light::before{
  background:linear-gradient(90deg,
    var(--ground) 0%,
    color-mix(in srgb,var(--ground) 72%,transparent) 40%,
    transparent 56%);
}
.pagehero--art-light .eyebrow--light{color:var(--gold-ink);}
.pagehero--art-light .btn-light{background:var(--lapis);color:var(--on-lapis);border-color:var(--lapis);}
.pagehero--art-light .btn-light:hover{background:var(--lapis-ink);border-color:var(--lapis-ink);}
.pagehero--art-light .btn-ghost{background:transparent;color:var(--lapis);border-color:var(--lapis);}
.pagehero--art-light .btn-ghost:hover{background:rgba(39,78,141,.08);color:var(--lapis-ink);border-color:var(--lapis-ink);}
@media(max-width:760px){
  .pagehero--art-light{min-height:0;}
  .pagehero--art-light .pagehero-art{width:100%;opacity:.16;}
  .pagehero--art-light::before{background:color-mix(in srgb,var(--ground) 55%,transparent);}
}

/* Mirrored variant: scene on the left, text column on the right. */
.pagehero--flip::before{
  background:linear-gradient(270deg,
    var(--ground) 0%,
    color-mix(in srgb,var(--ground) 72%,transparent) 40%,
    transparent 56%);
}
.pagehero--flip .container>*{margin-left:auto;margin-right:0;}
.pagehero--flip .crumb,.pagehero--flip .hero-actions{text-align:right;}
@media(max-width:760px){
  .pagehero--flip .container>*{margin-left:0;}
  .pagehero--flip .crumb,.pagehero--flip .hero-actions{text-align:left;}
}
/* Flip pages use a physically flopped asset (-flip.webp), so the scene's own
   composition crops correctly; only the anchor and the feather direction
   change here. */
.pagehero--art.pagehero--flip .pagehero-art{
  inset:0 auto 0 0;object-position:0% 100%;
  -webkit-mask-image:linear-gradient(270deg,transparent 0,#000 24%);
  mask-image:linear-gradient(270deg,transparent 0,#000 24%);
}

@keyframes ph-art-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes ph-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pagehero--art .pagehero-art{animation:ph-art-in 1.1s cubic-bezier(.2,.7,.2,1) both;}
.pagehero--art .crumb,.pagehero--art .eyebrow,.pagehero--art h1,.pagehero--art .ph-sub,.pagehero--art .hero-actions,.pagehero--art .hero-fine{
  animation:ph-rise .7s cubic-bezier(.2,.7,.2,1) both;
}
.pagehero--art .eyebrow{animation-delay:.05s;}
.pagehero--art h1{animation-delay:.12s;}
.pagehero--art .ph-sub{animation-delay:.2s;}
.pagehero--art .hero-actions{animation-delay:.28s;}
.pagehero--art .hero-fine{animation-delay:.36s;}
@media(prefers-reduced-motion:reduce){
  .pagehero--art .pagehero-art,.pagehero--art .crumb,.pagehero--art .eyebrow,.pagehero--art h1,.pagehero--art .ph-sub,.pagehero--art .hero-actions,.pagehero--art .hero-fine{animation:none;}
}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 36px;margin-top:50px;}
.grid3 .it .ic{color:var(--lapis);margin-bottom:14px;display:block;}
.grid3 .it .ic-img{width:76px;height:76px;border-radius:18px;display:block;box-shadow:0 10px 24px rgba(17,26,47,.18),0 1px 3px rgba(17,26,47,.12);}
.grid3 .it h3{font-size:1.18rem;margin:0 0 8px;}
.grid3 .it p{color:var(--slate);font-size:.98rem;}
.grid3 .it p+p{margin-top:10px;}
.use-link{display:inline-block;font-weight:600;color:var(--lapis);font-size:.95rem;text-decoration:none;}
.use-link:hover{text-decoration:underline;}
.band--dark .use-link{color:var(--on-deep);text-decoration:underline;}
.band--dark .grid3 .it .ic{color:var(--gold);}
@media(max-width:860px){.grid3{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.grid3{grid-template-columns:1fr;}}

/* split rows for content pages */
.rows{margin-top:46px;}
.row2{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding:42px 0;border-top:1px solid var(--hairline);align-items:start;}
.row2:first-child{border-top:0;}
.row2 .r-k{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);}
.row2 h3{font-size:1.5rem;margin:12px 0 0;}
.row2 .r-body p{color:var(--slate);font-size:1.04rem;}
.row2 .r-body .ticks{margin-top:18px;}
.band--dark .row2{border-top-color:var(--hairline-on-deep);}
.band--dark .row2 .r-k{color:var(--on-deep);}
.band--dark .row2 .r-body p{color:var(--on-deep-soft);}
@media(max-width:760px){
  .row2{grid-template-columns:1fr;gap:18px;}
}

/* faq */
.faq{max-width:820px;margin-top:46px;}
.faq details{border-top:1px solid var(--hairline);}
.faq details:last-child{border-bottom:1px solid var(--hairline);}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-family:var(--serif);font-size:1.1rem;
  font-weight:600;color:var(--ink);position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:4px;top:19px;font-family:var(--sans);font-size:1.4rem;
  color:var(--lapis);font-weight:400;line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{margin:0 0 22px;color:var(--slate);}

/* contact form */
.formgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;margin-top:10px;align-items:start;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  padding:13px 14px;border:1px solid var(--hairline);border-radius:8px;background:var(--ground-raised);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--lapis);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lapis) 16%,transparent);}
.field textarea{min-height:130px;resize:vertical;}
.contact-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:20px;}
.contact-list li b{display:block;color:var(--ink);font-size:.96rem;font-weight:600;}
.contact-list li span,.contact-list li a{color:var(--slate);font-size:.96rem;}
.booking-card{margin:0 0 38px;padding:28px;border:1px solid var(--hairline);border-radius:12px;background:var(--ground-raised);box-shadow:var(--shadow);}
.booking-card h2{font-size:1.7rem;font-weight:600;letter-spacing:-.02em;margin:10px 0 10px;}
.booking-card p{color:var(--slate);margin:0 0 20px;}
.booking-card .btn{width:100%;}
.booking-meta{display:block;margin-top:11px;color:var(--slate);font-size:.82rem;text-align:center;}
@media(max-width:760px){.formgrid{grid-template-columns:1fr;gap:34px;}}

/* prose */
.prose{max-width:48rem;margin-top:10px;}
.prose p{margin:0 0 16px;color:var(--ink);font-size:1.04rem;}
.prose h3{font-size:1.3rem;margin:30px 0 10px;}

/* full pricing (4 cols + feature lists) */
.price-row.cols4{grid-template-columns:repeat(4,1fr);}
.price-col ul.pf{list-style:none;margin:16px 0 22px;padding:0;display:flex;flex-direction:column;gap:10px;}
.price-col ul.pf li{display:flex;gap:9px;font-size:.92rem;color:var(--ink);align-items:flex-start;}
.price-col ul.pf li svg{flex:none;color:var(--gold-ink);margin-top:3px;}
.price-col .btn{margin-top:8px;}
@media(max-width:860px){.price-row.cols4{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.price-row.cols4{grid-template-columns:1fr;}}

/* plan "best for" + enterprise row */
.price-col .pbest{font-size:.88rem;color:var(--slate);margin:10px 0 0;min-height:40px;}
.price-col .pbest b{color:var(--ink);font-weight:600;}
.ent{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  margin-top:0;padding:30px;border:1px solid var(--hairline);border-radius:10px;background:var(--ground-raised);box-shadow:var(--shadow);}
.ent .e-k{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);}
.ent h3{font-size:1.35rem;margin:6px 0 6px;}
.ent p{color:var(--slate);font-size:.98rem;max-width:46rem;}

/* ---- price calculator (sits on a lapis band) ---- */
.calc{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;margin-top:46px;align-items:start;}
.calc-controls{display:flex;flex-direction:column;gap:28px;}
.calc-field>.lab{display:flex;justify-content:space-between;align-items:baseline;font-size:.95rem;
  font-weight:600;color:var(--on-deep-soft);margin-bottom:12px;}
.calc-field>.lab b{color:var(--on-deep);font-family:var(--mono);font-size:1rem;font-weight:400;}
.calc input[type=range]{width:100%;accent-color:var(--gold);height:6px;cursor:pointer;}
.calc-hint{display:block;margin-top:9px;font-size:.84rem;color:var(--on-deep-faint);}
.calc-check{display:flex;align-items:center;gap:11px;color:var(--on-deep-soft);font-weight:400;font-size:.96rem;margin-bottom:11px;cursor:pointer;}
.calc-check input{width:18px;height:18px;accent-color:var(--gold);}
.calc-check .ap{margin-left:auto;color:var(--on-deep);font-weight:600;}
/* "Included" rows the pages render inline. Gold tick, parchment text. */
.calc-incl{display:flex;align-items:center;gap:11px;color:var(--on-deep-soft);font-size:.96rem;margin-bottom:11px;}
.calc-incl:last-child{margin-bottom:0;}
.calc-incl .tick{color:var(--gold);font-weight:600;}
.calc-incl .val{margin-left:auto;color:var(--on-deep);font-weight:600;}
.calc-out{border-left:2px solid var(--gold);padding-left:28px;}
.calc-out .rec{color:var(--on-deep);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;}
.calc-out .price{margin:10px 0 2px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.calc-out .amount{font-family:var(--serif);font-size:2.9rem;font-weight:600;letter-spacing:-.02em;color:var(--on-deep);line-height:1;}
.calc-out .per{color:var(--on-deep-soft);font-weight:400;}
.calc-out .sub{color:var(--on-deep-soft);font-size:.94rem;margin-top:8px;}
.calc-out .cta{margin-top:22px;width:100%;}
.calc-call{display:block;margin-top:14px;color:var(--on-deep);font-size:.88rem;font-weight:600;text-align:center;text-decoration:underline;text-underline-offset:3px;}
.calc-call[hidden]{display:none;}
.calc-call:hover{color:var(--gold);}
.calc-out .note{margin-top:14px;font-size:.82rem;color:var(--on-deep-faint);}
.calc[hidden],.calc-addons[hidden]{display:none;}
@media(max-width:860px){.calc{grid-template-columns:1fr;gap:32px;}.calc-out{border-left:0;border-top:2px solid var(--gold);padding-left:0;padding-top:24px;}}

.calc-extra{margin-top:56px;padding-top:42px;border-top:1px solid var(--hairline-on-deep-soft);}
.calc-extra-head{max-width:760px;}
.calc-extra-head h3{font-size:1.7rem;margin:8px 0 8px;}
.calc-extra-head p{color:var(--on-deep-soft);margin:0;}

.home-calc{margin-top:42px;}
.home-calc-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--hairline-on-deep-soft);
  background:rgba(246,241,231,.08);border-radius:999px;}
.home-calc-tabs button{appearance:none;border:0;background:transparent;color:var(--on-deep-soft);font:inherit;
  font-family:var(--sans);font-weight:600;padding:10px 18px;border-radius:999px;cursor:pointer;}
.home-calc-tabs button.is-active{background:var(--on-deep);color:var(--on-invert);}
.home-calc .calc{margin-top:34px;}
@media(max-width:560px){.home-calc-tabs{display:grid;grid-template-columns:1fr;align-items:stretch;border-radius:18px;width:100%;}.home-calc-tabs button{border-radius:14px;}}

/* image gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px;}
.gallery.g3{grid-template-columns:repeat(3,1fr);}
.gallery.g2{grid-template-columns:repeat(2,1fr);}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;display:block;box-shadow:var(--shadow);}
.gallery figcaption{margin-top:12px;font-size:.92rem;color:var(--slate);line-height:1.45;}
.gallery figcaption b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px;}
@media(max-width:860px){.gallery,.gallery.g3{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.gallery,.gallery.g2,.gallery.g3{grid-template-columns:1fr;}}

/* media band — product image + text */
.media{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.media.flip .m-img{order:2;}
.media .m-img img{width:100%;height:auto;border-radius:10px;box-shadow:var(--shadow-lift);display:block;}
.media .m-txt .eyebrow{margin-bottom:14px;}
.media .m-txt h2{font-size:clamp(1.55rem,2.5vw,2rem);}
.media .m-txt>p{margin-top:14px;color:var(--slate);font-size:1.04rem;}
.media .m-txt .ticks{margin-top:18px;}
@media(max-width:860px){.media{grid-template-columns:1fr;gap:30px;}.media.flip .m-img{order:0;}}

/* glance / facts list (company) */
.facts{border-top:1px solid var(--hairline);margin-top:10px;}
.facts .frow{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--hairline);}
.facts dt{color:var(--slate);}
.facts dd{margin:0;color:var(--ink);font-weight:600;text-align:right;}

/* Secondary note inside a calculator label ("· up to 8"). */
.calc-field .lab-note{font-weight:400;color:var(--on-deep-faint);font-family:var(--sans);font-size:.9rem;}

/* store badges — Apple and Google draw them, we only size them.
   These used to be our own lockups: the Apple logo set next to the words "App
   Store" in our type, and a generic play triangle next to "Google Play". Both
   companies' brand guidelines forbid exactly that — the badge must be their
   supplied artwork, unmodified. Provenance, locale variants and the geometry
   quoted below: src/assets/badges/README.md.

   HEIGHT IS THE ONLY DIMENSION WE SET. The two badges are drawn to different
   proportions — Apple 119.66x40 (2.99:1), Google 564x168 (3.36:1) — so equal
   heights are what makes a pair read as a pair, and width follows. Sizing to a
   shared width instead would leave the Apple badge visibly the taller of the
   two. The row gap is a third of the badge height, which clears Google's stated
   minimum clear space of one quarter (Apple's is smaller); Google ships that
   clear space baked into the PNG as transparent margin, which we trim, so this
   gap is the whole of it rather than half. */
.store-badges{--badge-h:46px;display:flex;flex-wrap:wrap;align-items:center;
  gap:calc(var(--badge-h)/3);margin-top:24px;}
.store-badges--center{justify-content:center;}
/* flex:none, everywhere a badge sits in a flex row. Artwork is not copy: a
   badge allowed to shrink does not reflow, it distorts — height is pinned by
   the rule below, so a squeezed row comes out 4% narrow at full height, which
   is a modified badge. The row wraps instead. */
.store-badge{flex:none;display:inline-flex;border-radius:9px;text-decoration:none;}
.store-badge img{display:block;height:var(--badge-h);width:auto;}
.store-badge:hover{opacity:.85;text-decoration:none;}
.store-badge:focus-visible{outline:2px solid currentColor;outline-offset:4px;}
@media(max-width:640px){.store-badges{--badge-h:40px;}}

/* ---------- app chooser -------------------------------------------------
   The site-wide Download menu lands here before any store opens or artifact
   starts downloading. The two groups explain the product's two jobs first;
   platform cards then carry the real release state and final action. */
.app-platforms{scroll-margin-top:110px;}
.app-platform-groups{display:grid;gap:68px;margin-top:52px;}
.app-platform-group{display:grid;gap:26px;}
.app-platform-group-head{
  display:grid;grid-template-columns:minmax(150px,.42fr) minmax(0,1fr);gap:28px;
  align-items:start;padding-top:24px;border-top:1px solid var(--hairline);}
.app-platform-group-head h2{font-size:clamp(1.55rem,2.7vw,2.15rem);}
.app-platform-group-head p{max-width:46rem;margin-top:8px;color:var(--slate);}
.app-platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.app-platform-card{
  scroll-margin-top:110px;display:flex;flex-direction:column;min-height:100%;
  padding:28px;border:1px solid var(--hairline);border-radius:14px;
  background:var(--ground-raised);box-shadow:var(--shadow);}
.app-platform-card:target{
  border-color:var(--lapis);box-shadow:0 0 0 3px rgba(39,78,141,.10),var(--shadow);}
.app-platform-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.app-platform-card-head h3{font-size:1.45rem;}
.app-platform-card>p{margin-top:14px;color:var(--slate);}
.app-status{
  flex:none;display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;
  border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.2;}
.app-status--live{color:#23633a;background:rgba(70,150,89,.10);border:1px solid rgba(70,150,89,.26);}
.app-status--soon{color:var(--gold-ink);background:rgba(201,153,47,.11);border:1px solid rgba(201,153,47,.32);}
.app-platform-list{display:grid;gap:9px;margin:20px 0 0;padding:0;list-style:none;color:var(--ink);font-size:.94rem;}
.app-platform-list li{position:relative;padding-left:22px;}
.app-platform-list li::before{
  content:"";position:absolute;left:2px;top:.48em;width:7px;height:12px;
  border-right:2px solid var(--lapis);border-bottom:2px solid var(--lapis);
  transform:rotate(45deg);}
.app-platform-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:auto;padding-top:26px;}
.app-platform-note{color:var(--slate);font-size:.82rem;}
.app-platform-badges{margin-top:auto;padding-top:26px;}
.app-btn-disabled{
  cursor:not-allowed;background:rgba(92,102,119,.08);color:var(--slate);
  border-color:var(--hairline);}

@media(max-width:760px){
  .app-platform-groups{gap:52px;margin-top:40px;}
  .app-platform-group-head{grid-template-columns:1fr;gap:10px;}
  .app-platform-grid{grid-template-columns:1fr;}
  .app-platform-card{padding:24px;}
}

@media(max-width:430px){
  .app-platform-card-head{display:grid;gap:10px;}
  .app-status{justify-self:start;}
  .app-platform-actions .btn{width:100%;white-space:normal;text-align:center;}
}

/* The footer runs the same artwork one size down. */
.foot-badges{--badge-h:38px;display:flex;flex-wrap:wrap;align-items:center;
  gap:calc(var(--badge-h)/3);margin-top:18px;}
.foot-badges a{flex:none;display:inline-flex;text-decoration:none;}
.foot-badges img{display:block;height:var(--badge-h);width:auto;}
.foot-badges a:hover{opacity:.85;text-decoration:none;}
/* Pre-launch state. A listing still in review must not render as something
   clickable, and dimming or greying the official badge would itself be
   modifying it — so this drops the artwork and says it in words instead.
   Driven by the iosLive / androidLive flags in scripts/site-chrome.mjs. */
.foot-badges .soon{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--hairline-on-deep);
  border-radius:8px;padding:9px 14px;color:var(--on-deep);opacity:.6;font-size:.86rem;}
.foot-badges .soon em{font-style:normal;opacity:.8;font-size:.76rem;}

/* cost comparison strip (events pricing) */
.costcompare{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;}
.costcompare .cc{border:1px solid var(--hairline);border-radius:10px;padding:20px 22px;background:var(--ground-raised);}
.costcompare .cc b{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink);margin-bottom:6px;}
.costcompare .cc span{color:var(--slate);font-size:.92rem;}
.costcompare .cc.win{border-color:var(--lapis);box-shadow:var(--shadow);}
@media(max-width:860px){.costcompare{grid-template-columns:1fr;}}

/* language list (product page) */
.lang-list p{color:var(--slate);font-size:1rem;line-height:1.75;}
.lang-list p b{color:var(--ink);font-weight:600;}

/* ---- Phone reading density ---------------------------------------------
   Measured on a 375x812 phone the homepage ran 19.9 screens, and 44% of
   that height was text. Desktop has room for a subtitle under every h2 and
   three supporting bullets per claim; in a 375px column the same copy
   stacks into a wall people scroll past instead of reading.

   Two treatments on purpose. Copy that restates its own heading — the
   band-head lead, the blurb under a card title — is hidden outright,
   because a "show more" control for a sentence you already read in the
   heading is just more chrome. Copy that carries claims you cannot get
   anywhere else (the tick lists) collapses behind a real toggle instead,
   so nothing substantive becomes unreachable on a phone.

   initPhoneDensity in home.js supplies that toggle. It sets the
   data-collapsed attribute the rules below key off, so with JS disabled
   the attribute never appears and the full list renders exactly as it does
   today. Everything here is inside the phone breakpoint; desktop is
   untouched. */
.more-toggle{display:none;}

@media(max-width:860px){
  /* 88px top and bottom is a desktop rhythm. At this width it stops reading
     as breathing room and starts reading as a gap between unrelated pages. */
  .band{padding:56px 0;}
  .band-head>p{display:none;}
  .band-head h2{margin-top:10px;}
  /* Escape hatch for the case the rule above gets wrong: a band whose lead is
     the only body copy it has, so hiding it leaves a bare heading over a pair
     of buttons. Closing CTA bands are the usual shape. */
  .band-head--keep>p{display:block;}

  .ticks[data-collapsed="true"] li:nth-child(n+3){display:none;}
  .more-toggle{
    display:inline-flex;align-items:center;gap:7px;margin-top:15px;
    appearance:none;background:none;border:0;padding:0;cursor:pointer;
    font:inherit;font-size:.95rem;font-weight:600;color:var(--lapis);
  }
  .band--dark .more-toggle,
  .final .more-toggle,
  .pagehero--dark .more-toggle{color:var(--gold);}
  .more-toggle::after{
    content:"";width:7px;height:7px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
  }
  .more-toggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg);}

  /* The thumbnail, the title and the "See X setup ->" link already say what
     the card is. The sentence between them is the third telling. */
  .use p{display:none;}
  .use h3{margin-top:12px;}

  /* Four industry cards stack into 2.7 screens of thumbnails. Two of them
     plus the same toggle keeps the shelf legible without inventing an
     "all industries" page that does not exist to link to. */
  .uses--four[data-collapsed="true"] .use:nth-child(n+3){display:none;}
  .uses--four + .more-toggle{margin-top:22px;}

  /* Sliders and a live total want a pointer and a wide readout. On a phone
     the estimator is 1.8 screens of fiddly controls sitting directly under
     a pricing table that already links to the full comparison. */
  #calculator{display:none;}
}

/* ---- Testimonial quotes -------------------------------------------------
   Used by the #proof band on the homepage. That section ships commented out
   until there are real churches to quote, but the styling lives here so
   uncommenting it is the only step. Written to work on paper and on the deep
   band, since a quote wall reads better as a dark break between two light
   sections. */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:46px;}
.quote{margin:0;display:flex;flex-direction:column;gap:18px;
  padding:28px 26px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid var(--hairline-on-deep);}
.band--paper .quote,.band--white .quote{
  background:var(--ground-raised);border-color:var(--hairline);}
.quote blockquote{margin:0;font-family:var(--serif);font-size:1.12rem;line-height:1.5;
  color:var(--on-deep);}
.band--paper .quote blockquote,.band--white .quote blockquote{color:var(--ink);}
.quote figcaption{display:flex;flex-direction:column;gap:3px;margin-top:auto;
  font-size:.92rem;color:var(--on-deep-soft);}
.band--paper .quote figcaption,.band--white .quote figcaption{color:var(--slate);}
.quote figcaption b{font-weight:600;}
@media(max-width:860px){
  .quotes{grid-template-columns:1fr;gap:16px;margin-top:32px;}
  .quote{padding:22px 20px;}
  .quote blockquote{font-size:1.04rem;}
}

/* ---- Capability comparison table ---------------------------------------
   Used on the pricing page. Deliberately a real <table> rather than a grid of
   divs: it is tabular data, and a screen reader announcing "row: a passage is
   read, column: Koine" is exactly the reading order the content wants.

   No tick/cross columns. A tick claims a competitor lacks something, which is
   not verifiable from outside; a sentence describing what each does is both
   honest and more persuasive than a symbol. */
.cmp-wrap{margin-top:64px;}
.cmp-wrap h2{font-size:clamp(1.7rem,2.6vw,2.2rem);}
.cmp-lede{margin-top:14px;max-width:44rem;color:var(--slate);font-size:1.08rem;}
.cmp{width:100%;border-collapse:collapse;margin-top:30px;font-size:.98rem;}
.cmp thead th{
  text-align:left;vertical-align:bottom;padding:0 18px 14px;
  font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:600;border-bottom:1px solid var(--hairline);}
.cmp thead th:last-child{color:var(--lapis);}
.cmp tbody th{
  text-align:left;vertical-align:top;padding:18px;font-weight:600;color:var(--ink);
  width:22%;border-bottom:1px solid var(--hairline-soft);}
.cmp tbody td{
  vertical-align:top;padding:18px;color:var(--slate);line-height:1.5;
  border-bottom:1px solid var(--hairline-soft);}
/* The Koine column carries the weight — tinted, inked, and the only one with a
   rule down its edges, so the eye lands there without needing a "winner" badge. */
.cmp tbody td:last-child{
  color:var(--ink);background:var(--ground-raised);
  box-shadow:inset 1px 0 0 var(--hairline),inset -1px 0 0 var(--hairline);}
.cmp thead th:last-child{background:var(--ground-raised);
  box-shadow:inset 1px 0 0 var(--hairline),inset -1px 0 0 var(--hairline);}
.cmp tbody tr:last-child td:last-child{box-shadow:inset 1px 0 0 var(--hairline),
  inset -1px 0 0 var(--hairline),inset 0 -1px 0 var(--hairline);}
.cmp-lbl{display:none;}
.cmp-note{margin-top:18px;color:var(--slate);font-size:.9rem;max-width:46rem;}

/* A three-column table cannot survive 375px. Each row becomes a small stacked
   card: the situation as a heading, then the two answers labelled by the
   data-label attributes the markup does not need to repeat visually on desktop. */
@media(max-width:760px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto;}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .cmp tbody tr{margin-top:18px;border:1px solid var(--hairline);border-radius:12px;
    overflow:hidden;background:var(--ground-raised);}
  /* width:auto has to be repeated at this specificity — the desktop rule is
     `.cmp tbody th{width:22%}`, which outranks the blanket `.cmp th` reset
     above and squeezed the row heading to one word per line. */
  .cmp tbody th{width:auto;padding:16px 18px 10px;border-bottom:0;font-size:1.05rem;
    font-family:var(--serif);}
  .cmp tbody td{padding:0 18px 14px;border-bottom:0;box-shadow:none!important;
    background:transparent;}
  .cmp-lbl{display:block;margin-bottom:4px;
    font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);}
  .cmp tbody td:last-child{color:var(--ink);border-top:1px solid var(--hairline-soft);
    padding-top:14px;}
  .cmp tbody td:last-child .cmp-lbl{color:var(--lapis);}
}

/* ---- Status-quo table (homepage #alternatives) --------------------------
   Five columns instead of the pricing page's three, so type and padding step
   down. The narrowing lives in a min-width query on purpose: `.cmp--status
   tbody th` and `.cmp tbody th` have identical specificity, so a plain rule
   written after the 760px block would outrank the stacked-card reset at every
   width and re-impose a 19% column on a phone. Below 761px this contributes
   nothing and the shared .cmp card layout runs untouched. */
.cmp--status{margin-top:38px;}
@media(min-width:761px){
  .cmp--status{font-size:.92rem;}
  .cmp--status thead th{padding:0 14px 12px;}
  .cmp--status tbody th{width:19%;padding:15px 14px;}
  .cmp--status tbody td{padding:15px 14px;}
}

/* "Even with no translation" is a second value proposition, not a fifth
   column — streaming the untranslated room serves people who are hard of
   hearing, in the nursery, or at home. Hairline-separated below the table so
   it cannot dilute the comparison, which is the one thing a matrix must not
   have to share attention with. */
.cmp-aside{margin-top:54px;padding-top:34px;border-top:1px solid var(--hairline);}
.cmp-aside h3{font-size:1.32rem;margin:10px 0 0;}
.cmp-aside .ticks{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px 34px;}
@media(max-width:860px){
  .cmp-aside{margin-top:40px;padding-top:28px;}
  .cmp-aside .ticks{grid-template-columns:1fr;gap:13px;}
}

/* Named competitor matrix (homepage #compare).

   Ten capability rows against four products. Two of them go against us — voice
   cloning and entry price — and they are in the table deliberately: a matrix
   where the author wins every row is read as an advertisement and discounted
   wholesale, so the losses are what make the wins legible.

   The dash is "not advertised", never "absent". That distinction is the whole
   legal footing of the section (see the comment above the markup), so it is
   stated in the lede, spelled out for screen readers in every cell, and must
   survive any future restyle. Do not turn it into a red cross.

   Six columns cannot reflow into cards the way .cmp does — a matrix read as ten
   stacked lists of four is unreadable. It scrolls sideways instead, with the
   capability column pinned so the row you are reading keeps its label. */
.mx-scroll{margin-top:30px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.matrix{width:100%;min-width:660px;border-collapse:collapse;font-size:.95rem;}
.matrix thead th{
  vertical-align:bottom;padding:0 14px 13px;
  font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:600;border-bottom:1px solid var(--hairline);}
.matrix thead th:first-child{text-align:left;}
.matrix tbody th{
  text-align:left;vertical-align:middle;padding:15px 18px 15px 0;
  font-weight:600;color:var(--ink);line-height:1.4;width:34%;
  border-bottom:1px solid var(--hairline-soft);}
.matrix tbody td{
  text-align:center;vertical-align:middle;padding:15px 14px;
  color:var(--slate);line-height:1.4;border-bottom:1px solid var(--hairline-soft);}

/* The Koine column is tinted and ruled down both edges — the eye lands there
   without a "winner" badge, which would undercut the two rows we lose. */
.matrix thead th.mx-us,.matrix tbody td.mx-us{
  background:var(--ground-raised);color:var(--ink);
  box-shadow:inset 1px 0 0 var(--hairline),inset -1px 0 0 var(--hairline);}
.matrix thead th.mx-us{color:var(--lapis);}
.matrix tbody tr:last-child td.mx-us{box-shadow:inset 1px 0 0 var(--hairline),
  inset -1px 0 0 var(--hairline),inset 0 -1px 0 var(--hairline);}

.mx-t{font-weight:600;color:var(--ink);}
.mx-y::before{content:"";display:inline-block;width:8px;height:15px;
  border-right:2.5px solid var(--slate);border-bottom:2.5px solid var(--slate);
  transform:rotate(45deg) translateY(-2px);}
.mx-us.mx-y::before{border-color:var(--lapis);}
.mx-n::before{content:"–";color:var(--slate);opacity:.42;font-size:1.15rem;}

.mx-hint{display:none;}
.mx-note{margin-top:20px;color:var(--slate);font-size:.9rem;max-width:46rem;}

@media(max-width:860px){
  /* Pinning the label column costs an opaque background; the band is --ground,
     and the Koine column keeps its own tint because .mx-us sets one too. */
  .matrix thead th:first-child,.matrix tbody th{
    position:sticky;left:0;z-index:1;background:var(--ground);
    box-shadow:1px 0 0 var(--hairline-soft);}
  .matrix tbody th{width:52%;padding-right:14px;font-size:.92rem;}
  .matrix thead th:first-child{padding-left:0;}
  .mx-hint{display:block;margin-top:12px;color:var(--slate);font-size:.82rem;}
}

/* Seven-vendor variant. The matrix started as Koine against three church tools;
   it now also carries the event/enterprise platforms, because half the buyers
   are conferences, classrooms and civic rooms and a church-only table answers a
   question they never asked.

   Eight columns need a two-row head: a colgroup band naming each group, then the
   product names. The band tells a reader why Wordly is sitting next to Glossa —
   without it the set looks arbitrary. */
.matrix--wide{min-width:960px;}
.matrix--wide tbody th{width:26%;padding-right:14px;font-size:.93rem;}
.matrix--wide thead th,.matrix--wide tbody td{padding-left:9px;padding-right:9px;}
.matrix--wide tbody td{font-size:.9rem;}
.mx-grp{
  text-align:center;font-size:.68rem;color:var(--slate);font-weight:600;
  padding-bottom:9px;border-bottom:1px solid var(--hairline-soft);}
/* Only the second group needs the divider — it separates the two, rather than
   fencing each one in. */
.matrix thead th.mx-grp + th.mx-grp{border-left:1px solid var(--hairline-soft);}

@media(max-width:860px){
  /* The desktop rule below this file's earlier block pins `thead th:first-child`,
     which in a two-row head also matches the FIRST PRODUCT NAME in row two —
     Glossa would have been frozen to the left edge on top of the label column.
     Scope it to the first header row. */
  .matrix thead th:first-child{position:static;box-shadow:none;background:none;}
  .matrix thead tr:first-child th:first-child{
    position:sticky;left:0;z-index:1;background:var(--ground);
    box-shadow:1px 0 0 var(--hairline-soft);}
  /* 44% of a 960px table is wider than a 375px phone, so the pinned labels
     covered the viewport and you had to scroll before seeing a single answer.
     22% leaves the Koine column and a sliver of the next one visible beside the
     label, which is both the reading order and the scroll affordance. */
  .matrix--wide tbody th,
  .matrix--wide thead tr:first-child th:first-child{width:22%;font-size:.86rem;}
}

/* ---------- languages band (chips generated from /translations.js) ---------- */
.lang-headline{font-size:clamp(1.7rem,3vw,2.5rem);}
.lang-headline .lang-rotor{color:var(--lapis);white-space:nowrap;}
.lang-headline .lang-rotor::after{content:"";display:inline-block;width:2px;height:.85em;background:var(--lapis);margin-left:2px;vertical-align:-.08em;animation:lang-caret 1s steps(1) infinite;}
@keyframes lang-caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.lang-headline .lang-rotor::after{animation:none}}
.lang-wall{margin-top:34px;}
.lang-grid{display:flex;flex-wrap:wrap;gap:8px;}
.lang-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--hairline);border-radius:999px;background:#FFFFFF;font-size:.92rem;color:var(--ink);line-height:1.2;}
.lang-chip svg{width:12px;height:12px;flex:none;color:var(--lapis);opacity:.85;}
.lang-chip--captions{background:transparent;color:var(--slate);border-style:dashed;}
.lang-chip--captions .lang-chip-tag{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-ink);}
.lang-legend{margin-top:18px;font-size:.95rem;color:var(--slate);}
.lang-legend b{color:var(--ink);font-weight:650;}

/* ---------- landing-page editorial pass ----------
   The hero and its proof ticker deliberately stay untouched. Below the fold,
   each section gets one job and the page ends at pricing instead of starting
   three new sales arguments (vendor matrix, language wall, calculator). The
   detailed versions already live on the pricing and product pages. */
main > .home-fold ~ .band{padding-block:76px;}
main > .home-fold ~ #compare,
main > .home-fold ~ #languages,
main > .home-fold ~ #calculator{display:none;}

/* How it works: keep the real booth photograph, tighten the explanation under it. */
main > .home-fold ~ #how .flow{margin-top:38px;}
main > .home-fold ~ #how .flow .step{padding-top:28px;padding-bottom:8px;}

/* The old "why a room system" band lived here as three card columns, with a
   `.ticks li:nth-child(n+3)` rule that silently hid the third bullet of every
   card. It is now the #alternatives status-quo table, and an id'd section no
   longer matches `:not([id])` — so both the card layout and the truncation
   rule are gone rather than left to match nothing. */

/* Keep the platform loop and use cases, but remove the excess vertical runway. */
main > .home-fold ~ #loop .flow{margin-top:38px;}
main > .home-fold ~ #loop .hero-actions{margin-top:30px;}
main > .home-fold ~ #industries .uses{margin-top:40px;}

/* The listener-app section repeats the broader platform loop. Retain the three
   concrete listener benefits and let the app page carry the exhaustive list. */
main > .home-fold ~ section.band--paper:not([id]) .media.flip .ticks li:nth-child(3),
main > .home-fold ~ section.band--paper:not([id]) .media.flip .ticks li:nth-child(5){display:none;}

/* Pricing is the decision point, so it now hands directly into the final CTA. */
main > .home-fold ~ #pricing .price-row{margin-top:40px;}
main > .home-fold ~ #pricing .price-col{padding-top:28px;padding-bottom:28px;}

@media(max-width:860px){
  main > .home-fold ~ .band{padding-block:64px;}
}

@media(max-width:560px){
  main > .home-fold ~ .band{padding-block:52px;}
  main > .home-fold ~ #how .flow{margin-top:28px;}
  main > .home-fold ~ #industries .uses{margin-top:32px;}
}

/* ---------- simple landing demo ----------
   The demo is an ordinary section, not a scroll scene. Three speakers are
   visible first; the full catalogue stays behind one compact control. */
main > .home-fold + .demo-showcase{padding-top:76px;overflow:hidden;}
main > .home-fold + .demo-showcase .demo-showcase-head,
main > .home-fold + .demo-showcase .demo-showcase-shell{
  transform:none!important;opacity:1!important;filter:none!important;will-change:auto;}
main > .home-fold + .demo-showcase .demo-showcase-shell{
  min-height:650px;margin-top:42px;margin-bottom:118px;}
main > .home-fold + .demo-showcase .demo-stage-prompt-arrow{display:none;animation:none;}
main > .home-fold + .demo-showcase .demo-speakers,
main > .home-fold + .demo-showcase .demo-showcase-shell.is-engaged .demo-speakers{justify-content:center;}
.demo-speakers-toggle{
  appearance:none;display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;padding:0;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(15,25,42,.74);
  color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.18);cursor:pointer;font:700 .72rem var(--sans);}
.demo-speakers-toggle:hover,.demo-speakers-toggle:focus-visible{
  border-color:rgba(230,193,104,.9);background:rgba(31,48,73,.94);}
.demo-speaker[hidden]{display:none!important;}
main > .home-fold + .demo-showcase .demo-stage-audio{opacity:0;pointer-events:none;}
main > .home-fold + .demo-showcase .demo-showcase-shell.is-engaged .demo-stage-audio{opacity:1;pointer-events:auto;}

@media(max-width:760px){
  main > .home-fold + .demo-showcase{padding-top:56px;}
  main > .home-fold + .demo-showcase .demo-showcase-shell{min-height:540px;margin-top:34px;margin-bottom:62px;}
  main > .home-fold + .demo-showcase .demo-showcase-shell.is-engaged{min-height:900px;margin-bottom:62px;}
  main > .home-fold + .demo-showcase .demo-stage-prompt{top:30%;}
  main > .home-fold + .demo-showcase .demo-stage-audio,
  main > .home-fold + .demo-showcase .demo-showcase-shell.is-engaged .demo-stage-audio{display:none;}
  main > .home-fold + .demo-showcase .demo-context{display:none;}
  main > .home-fold + .demo-showcase .demo-cinema-video{height:360px;}
  main > .home-fold + .demo-showcase .demo-speakers,
  main > .home-fold + .demo-showcase .demo-showcase-shell.is-engaged .demo-speakers{top:250px;}
  main > .home-fold + .demo-showcase .demo-phone-wrap,
  main > .home-fold + .demo-showcase .demo-showcase-shell.is-engaged .demo-phone-wrap{
    top:380px;bottom:auto;transform:translateX(-50%) scale(.72);transform-origin:center top;}
  .demo-speakers-toggle{flex-basis:46px;width:46px;height:46px;}
}