/* ============================================================
   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:#FBFAF7;
  --ground-raised:#FFFFFF;
  --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:#F3F1EC;
  --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) 80%,transparent);
  backdrop-filter:saturate(120%) blur(18px);-webkit-backdrop-filter:saturate(120%) 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);
  /* 84%, not 52%: over the lapis bands a thinner glass turned the whole bar
     blue and the lapis wordmark all but vanished into it. */
  background:color-mix(in srgb,var(--ground-raised) 84%,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-inline-start: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-inline-start:auto;display:flex;align-items:center;gap:16px;}
/* Language picker: a generated <details> of links (langSwitchBlock in
   scripts/site-locales.mjs), stamped after the account actions, in the phone
   drawer and in the footer bar. Logical offsets, so it sits right under
   dir=rtl without a mirrored rule. */
.lang-switch{position:relative;margin-inline-start:10px;flex:none;}
.lang-switch summary{
  appearance:none;list-style:none;cursor:pointer;font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1;
  color:var(--ink);padding:6px 11px;border:1px solid var(--hairline);
  border-radius:999px;background:var(--ground-raised);
}
.lang-switch summary::-webkit-details-marker{display:none;}
.lang-switch-list{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:80;
  min-width:11.5rem;max-height:min(70vh,24rem);overflow:auto;
  padding:8px;border:1px solid var(--hairline-soft);border-radius:10px;
  background:var(--ground-raised);box-shadow:var(--shadow-lift);
}
.lang-switch-list a{
  display:block;padding:7px 10px;border-radius:7px;text-decoration:none;
  font-size:.9rem;font-weight:600;color:var(--ink);
}
.lang-switch-list a:hover,.lang-switch-list a[aria-current=true]{
  background:var(--ground);color:var(--lapis);text-decoration:none;
}
.drawer-cta .lang-switch{margin:14px 0 0;align-self:center;}
.drawer-cta .lang-switch-list{inset-inline-end:auto;left:50%;transform:translateX(-50%);}
.foot-bar .lang-switch summary{
  color:var(--on-deep);border-color:var(--hairline-on-deep);background:transparent;
}
.foot-bar .lang-switch-list{top:auto;bottom:calc(100% + 8px);}
/* The list is a light card even in the dark footer, so its links must not
   take the footer's on-deep link colours (.foot-bar a, later in this file,
   would otherwise win on source order). */
.foot-bar .lang-switch-list a{color:var(--ink);}
.foot-bar .lang-switch-list a:hover,.foot-bar .lang-switch-list a[aria-current=true]{
  color:var(--lapis);text-decoration:none;
}
.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%;inset-inline-start:-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{inset-inline-start:auto;inset-inline-end:-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-inline-start: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-inline-end: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-inline-start: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;}
/* The venue hero (assets/js/venue-hero.js): the 3:2 venue covers the hero like
   object-fit: cover, as one stage so the speaker video, listeners and smoke
   stay on the picture; --fx/--fy keep the speaker and the front rows in view
   when the hero crops it. Mirrored so the speaker stands right of the copy. */
/* A touch wider than the hero and anchored left, so the mirrored speaker's
   walk (toward the copy) stays clear of the headline and buttons at every
   desktop width while all five listeners stay in frame. */
.venue-hero{padding:0;-webkit-mask-image:none;mask-image:none;overflow:hidden;container-type:size;
  --w:max(106cqw,150cqh);--h:calc(var(--w) / 1.5);--fx:.45;--fy:.6;}
/* A soft glow behind the copy so it reads on the venue (Mathias, 2026-09-25:
   "add some whiteness behind the text", in the picture's own colour and
   reaching up and to the left). The colour is the venue's lit wall. It
   belongs to the copy, so it follows the text at every width and fades with
   it on scroll. */
main>.home-fold .hero-copy{position:relative;}
main>.home-fold .hero-copy::before{content:"";position:absolute;inset:-170px -50px -20px -210px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(246,237,221,.92) 0%,rgba(246,237,221,.76) 55%,rgba(246,237,221,0) 100%);}
.venue-stage{position:absolute;width:var(--w);height:var(--h);
  left:clamp(calc(100cqw - var(--w)),calc(50cqw - var(--w) * var(--fx)),0px);
  top:clamp(calc(100cqh - var(--h)),calc(50cqh - var(--h) * var(--fy)),0px);
  transform:scaleX(-1);}
.venue-stage>*{position:absolute;pointer-events:none;}
.venue-room,.venue-mist,.venue-silk{inset:0;width:100%;height:100%;}
.venue-room{object-fit:cover;max-width:none;}
.venue-above{left:0;width:100%;max-width:none;}
.venue-speaker{object-fit:fill;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
  mask-composite:intersect;}
.venue-listener{opacity:0;transition:opacity .9s ease;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.venue-listener.is-listening{opacity:1;animation:venue-arrive 1.4s ease-out 4.6s both;}
.venue-listener>*{position:absolute;inset:0;width:100%;height:100%;max-width:none;}
/* Drawn the right way round inside the mirrored stage. */
/* Calmer than the raw flag (Mathias, 2026-09-25): a little softer, with a
   touch of the stone figure showing through. */
.venue-flag{transform:scaleX(-1);opacity:.8;filter:saturate(.66);}
/* The person's shading (venue-shade-<n>.webp: lit side white) over the flag. */
.venue-shading{mix-blend-mode:multiply;}
@keyframes venue-arrive{0%{filter:brightness(1);}35%{filter:brightness(1.35) saturate(1.1);}100%{filter:brightness(1);}}
.venue-mist{filter:blur(16px);opacity:.62;}
.venue-silk{filter:blur(.8px);opacity:.72;}
.venue-glow{width:9%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(217,169,58,.3) 0%,rgba(217,169,58,.1) 38%,rgba(217,169,58,0) 70%);}
/* The language's own name above its listener, once its smoke arrives. */
.venue-label{transform:translate(-50%,-100%) scaleX(-1);opacity:0;transition:opacity .6s ease;white-space:nowrap;}
.venue-label.is-listening{opacity:1;transition-delay:4.2s;}
.venue-label>span{display:inline-block;padding:3px 10px;border-radius:999px;font-size:clamp(11px,.85vw,13px);font-weight:600;
  color:var(--ink);background:color-mix(in srgb,var(--ground) 82%,transparent);box-shadow:0 2px 10px rgba(24,33,49,.12);}
.hero-in{position:relative;z-index:2;width:min(var(--maxw),100% - 56px);margin-inline:auto;
  padding:clamp(72px,14vh,140px) 0 0;padding-inline-start: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-inline-start: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;}
}
/* The home fold runs under the floating glass header, so the venue fills the
   whole window from its top edge and shows through the bar (Mathias,
   2026-09-25). --under is the header's footprint: its inset, height and border. */
main>.home-fold{--under:calc(var(--topbar-h) + var(--topbar-inset) + 2px);
  margin-top:calc(-1 * var(--under));height:100svh;}
@supports(height:100dvh){main>.home-fold{height:100dvh;}}
main>.home-fold .hero-in{padding-top:calc(clamp(72px,14vh,140px) + var(--under));}
@media(max-width:860px){
  main>.home-fold{height:auto;min-height:100svh;}
  main>.home-fold .hero-in{padding-top:calc(48px + var(--under));}
}
@media(max-width:600px){
  main>.home-fold .hero-in{padding-top:calc(32px + var(--under));}
}
@media(max-width:860px){
  /* Full screen on phones and tablets too (Mathias, 2026-09-25: the venue as a
     strip under the copy "does NOT look good"): the venue sits behind the
     copy and the hero is at least one screen tall, so the speaker and the lit
     listeners are in the first view. venue-hero.js lights only listeners that
     are on screen. */
  main>.home-fold .hero{min-height:100svh;}
  .venue-hero{position:absolute;inset:0;order:0;width:100%;height:100%;min-height:0;--fx:.5;}
}
@media(max-width:600px){
  /* A portrait phone: zoomed out to the speaker's whole walk and the three
     middle listeners, anchored to the bottom of the screen; the room carries
     on above the stage behind the headline (.venue-above). */
  .venue-hero{--w:195cqw;--fx:.515;}
}
@media(prefers-reduced-motion:reduce){
  .hero-art,.hero-copy{will-change:auto;transform:none!important;}
  .venue-listener,.venue-label{transition:none;}
  .venue-listener.is-listening{animation:none;}
  .venue-label.is-listening{transition-delay:0s;}
}

/* ---- 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-inline-start:1px solid var(--hairline-soft);}
.ticker .t:first-child{border-inline-start: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);}

/* ---- homepage fork: talk to a room, or a conversation (2026-09-26) ----
   Replaced the four-number ticker in the same place under the hero, so it
   keeps the ticker's paper band and hairlines. */
.fork{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);}
.fork-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.fork-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;align-items:baseline;
  padding:20px 28px;color:var(--ink);text-decoration:none;transition:background .2s;}
.fork-card+.fork-card{border-inline-start:1px solid var(--hairline-soft);}
.fork-card:hover{background:rgba(39,78,141,.05);text-decoration:none;}
.fork-k{grid-column:1/-1;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);}
.fork-card b{grid-column:1;margin-top:4px;font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--lapis);}
.fork-p{grid-column:1;margin-top:3px;font-size:.9rem;color:var(--slate);}
.fork-go{grid-column:2;grid-row:2/4;align-self:center;font-size:.9rem;font-weight:600;color:var(--lapis);white-space:nowrap;}
@media(max-width:760px){
  .fork-in{grid-template-columns:minmax(0,1fr);}
  .fork-card{padding:16px 4px;grid-template-columns:minmax(0,1fr);}
  .fork-card+.fork-card{border-inline-start:0;border-top:1px solid var(--hairline-soft);}
  .fork-go{grid-column:1;grid-row:auto;margin-top:6px;}
  .fork-card b{font-size:1.18rem;}
}

/* ---- 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-inline-start: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-inline-start: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:start;}
.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-inline-start: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:22px;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:start;}
.demo-showcase-shell.is-engaged .demo-speaker-copy span{display:block;text-align:start;}
.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:16px;}
}
@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:22px;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:16px;}
  .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);}
[data-currency-picker] label{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;}
[data-currency-picker] select{min-height:44px;padding:8px 32px 8px 14px;border:1px solid var(--hairline);border-radius:10px;background:var(--ground-raised);color:var(--ink);font:inherit;cursor:pointer;}
[data-currency-picker] select:focus-visible{outline:2px solid var(--lapis);outline-offset:3px;}
.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:1120px){
  .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-inline-start:8px;}
  .nav-drawer:not([hidden]){display:block;}
  .topbar-in{gap:0;}
  .nav-actions{margin-inline-start: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;}
  /* A 2x2 grid, not wrapped flex: centred flex items of different heights
     left the hairlines at four different heights, and the 1.55rem figures
     broke "No per-listener fees" at its hyphen. */
  .ticker-in{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
  .ticker .t{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:16px 8px;border-top:0;}
  .ticker .t:nth-child(odd){border-inline-start:0;}
  .ticker .t:nth-child(n+3){border-top:1px solid var(--hairline-soft);}
  /* No text-wrap:balance here: balancing prefers "No per- / listener fees". */
  .ticker .t b{font-size:1.2rem;line-height:1.25;}
  .ticker .t span{font-size:.8rem;}
}
@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;}
  /* The language picker stays: someone who cannot read the page needs it
     before the menu. It takes over the auto margin the actions had. */
  .lang-switch{margin-inline-start:auto;}
  .nav-burger{margin-inline-start:8px;}
}
@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;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;inset-inline-start: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;--art-op:.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;--art-op:.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%);
}

/* Ends at --art-op, not 1: an animation with fill `both` outranks the phone
   rules below, which used to leave the art at full strength behind the text. */
@keyframes ph-art-in{from{opacity:0;transform:scale(1.04)}to{opacity:var(--art-op,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;}}
/* the full ladder: Free, Lite, Standard, Pro, Campus */
.price-row.cols5{grid-template-columns:repeat(5,1fr);}
.price-row.cols5 .price-col{padding:30px 20px;}
.price-row.cols5 .price-col:first-child{padding-left:0;}
@media(min-width:1181px){.price-row.cols5 .price-col .plabel{min-height:3.3em;}}
@media(max-width:1180px){.price-row.cols5{grid-template-columns:repeat(3,1fr);}.price-row.cols5 .price-col:nth-child(3n+1){border-left:0;padding-left:0;}}
@media(max-width:860px){.price-row.cols5{grid-template-columns:1fr 1fr;}.price-row.cols5 .price-col:nth-child(3n+1){border-left:1px solid var(--hairline);padding-left:20px;}.price-row.cols5 .price-col:nth-child(2n+1){border-left:0;padding-left:0;}}
@media(max-width:560px){.price-row.cols5{grid-template-columns:1fr;}.price-row.cols5 .price-col:nth-child(n){border-left:0;padding-left:0;}}

/* 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;}

/* Station order (pricing #station, station #kits): a plain form card. It works
   as a GET form to the console without JS; home.js fills in the totals. */
.station-order{margin-top:26px;padding:30px;border:1px solid var(--hairline);border-radius:10px;background:var(--ground-raised);box-shadow:var(--shadow);}
.station-order h3{font-size:1.35rem;margin:0 0 18px;}
.station-order-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 18px;}
.station-order .field small{display:block;margin-top:6px;color:var(--slate);font-size:.84rem;}
.station-order-sum{display:flex;flex-wrap:wrap;gap:10px 36px;margin:4px 0 20px;}
.station-order-sum div{display:flex;flex-direction:column;gap:2px;}
.station-order-sum dt{font-size:.86rem;color:var(--slate);}
.station-order-sum dd{margin:0;font-size:1.25rem;font-weight:600;color:var(--ink);}
.station-order-sum dd span:last-child{font-size:.92rem;font-weight:400;color:var(--slate);}
.station-order .hero-fine{margin-top:14px;font-size:.86rem;max-width:52rem;}
@media(max-width:860px){.station-order-fields{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.station-order{padding:22px 18px;}.station-order-fields{grid-template-columns:1fr;}}

/* ---- 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-download-icon{flex:none;width:19px;height:19px;fill:currentColor;}
.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);}

/* Compatibility proof: text marks keep this factual and compact without
   implying native plugins or official partnerships with the named tools. */
.compat-panel{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:44px;align-items:center;
  padding:34px;border:1px solid var(--hairline);border-radius:14px;background:var(--ground-raised);box-shadow:var(--shadow);}
.compat-copy h2{margin-top:9px;font-size:clamp(1.65rem,3vw,2.35rem);}
.compat-copy p{max-width:48rem;margin-top:12px;color:var(--slate);}
.compat-copy .use-link{display:inline-block;margin-top:16px;}
.compat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.compat-list span{
  display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 14px;
  border:1px solid var(--hairline);border-radius:9px;background:var(--paper);color:var(--ink);
  font-size:.88rem;font-weight:600;text-align:center;}

@media(max-width:760px){
  .compat-panel{grid-template-columns:1fr;gap:26px;padding:24px;}
}

/* Documentation is an operating surface, so it stays denser than the
   marketing pages and keeps navigation beside the task instead of in tabs. */
.docs-hero{padding-bottom:54px;}
.docs-hero .ph-sub{max-width:720px;}
.docs-shell{
  display:grid;grid-template-columns:230px minmax(0,780px);gap:64px;align-items:start;
  padding-top:46px;padding-bottom:96px;
}
.docs-sidebar{
  position:sticky;top:86px;border:1px solid var(--hairline);border-radius:12px;
  background:var(--ground-raised);box-shadow:0 12px 34px rgba(26,38,58,.06);overflow:hidden;
}
.docs-sidebar summary{
  list-style:none;padding:17px 18px;border-bottom:1px solid var(--hairline);
  color:var(--ink);font-size:.84rem;font-weight:700;letter-spacing:.02em;cursor:pointer;
}
.docs-sidebar summary::-webkit-details-marker{display:none;}
.docs-sidebar summary::after{content:"−";float:right;color:var(--blue);}
.docs-sidebar:not([open]) summary::after{content:"+";}
.docs-nav{display:grid;padding:10px;}
.docs-nav a{
  display:block;padding:9px 10px;border-radius:7px;color:var(--slate);font-size:.87rem;line-height:1.25;
}
.docs-nav a:hover{background:var(--paper);color:var(--ink);}
.docs-nav a[aria-current="page"]{background:rgba(36,89,151,.1);color:var(--blue);font-weight:700;}
.docs-nav-k{
  padding:12px 10px 5px;color:var(--gold-ink);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.docs-article{min-width:0;}
.docs-article>header{padding-bottom:30px;border-bottom:1px solid var(--hairline);}
.docs-article>header h1{max-width:760px;margin-top:10px;font-size:clamp(2.1rem,5vw,3.5rem);}
.docs-article>header p{max-width:700px;margin-top:14px;color:var(--slate);font-size:1.08rem;line-height:1.65;}
.docs-updated{display:block;margin-top:14px;color:var(--muted);font-size:.78rem;}
.docs-section{padding:34px 0;border-bottom:1px solid var(--hairline);scroll-margin-top:92px;}
.docs-section:last-child{border-bottom:0;}
.docs-section h2{font-size:clamp(1.45rem,3vw,2rem);}
.docs-section h3{margin-top:26px;font-family:var(--sans);font-size:1rem;}
.docs-section p,.docs-section li{color:var(--slate);line-height:1.72;}
.docs-section p{margin-top:12px;}
.docs-section ul,.docs-section ol{display:grid;gap:8px;margin:15px 0 0;padding-left:22px;}
.docs-section a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(36,89,151,.3);text-underline-offset:3px;}
.docs-note{
  margin-top:20px;padding:17px 19px;border-left:3px solid var(--gold);border-radius:0 9px 9px 0;
  background:rgba(185,137,42,.08);color:var(--ink);font-size:.92rem;line-height:1.6;
}
.docs-note--blue{border-left-color:var(--blue);background:rgba(36,89,151,.07);}
.docs-steps{counter-reset:docs-step;list-style:none!important;padding:0!important;gap:14px!important;}
.docs-steps>li{
  counter-increment:docs-step;position:relative;min-height:42px;padding:10px 14px 10px 52px;
  border:1px solid var(--hairline);border-radius:10px;background:var(--ground-raised);
}
.docs-steps>li::before{
  content:counter(docs-step);position:absolute;left:13px;top:10px;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;background:var(--blue);color:white;font-weight:700;font-size:.8rem;
}
.docs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px;}
.docs-card{
  display:block;padding:21px;border:1px solid var(--hairline);border-radius:12px;background:var(--ground-raised);
  box-shadow:0 10px 28px rgba(26,38,58,.05);color:var(--ink);
}
.docs-card:hover{transform:translateY(-2px);border-color:rgba(36,89,151,.3);}
.docs-card b{display:block;font-family:var(--serif);font-size:1.12rem;}
.docs-card span{display:block;margin-top:7px;color:var(--slate);font-size:.88rem;line-height:1.5;}
.docs-map{display:grid;gap:12px;margin-top:22px;}
.docs-map-row{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:17px 0;border-top:1px solid var(--hairline);
}
.docs-map-row b{color:var(--ink);}.docs-map-row span{color:var(--slate);line-height:1.55;}
.docs-next{display:flex;justify-content:space-between;gap:16px;margin-top:34px;padding-top:22px;border-top:1px solid var(--hairline);}
.docs-next a{color:var(--blue);font-weight:700;}

@media(max-width:1050px){
  .docs-shell{grid-template-columns:210px minmax(0,1fr);gap:38px;}
}
@media(max-width:760px){
  .docs-shell{display:block;padding-top:24px;padding-bottom:70px;}
  .docs-sidebar{position:static;margin-bottom:30px;}
  .docs-article>header h1{font-size:2.2rem;}
  .docs-cards{grid-template-columns:1fr;}
  .docs-map-row{grid-template-columns:1fr;gap:5px;}
  .docs-next{display:grid;}
}

@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;}

}

/* ---- 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;}
}

/* A table of other people's offers, with no Koine column (the Norwegian price
   guide, the ways to translate a service), favours no column: the last one is
   styled like the rest, on desktop and in the phone cards. */
.cmp--even thead th:last-child{color:var(--gold-ink);background:none;box-shadow:none;}
.cmp--even tbody td:last-child,
.cmp--even tbody tr:last-child td:last-child{color:var(--slate);background:none;box-shadow:none;}
@media(max-width:760px){
  .cmp--even tbody td:last-child{border-top:0;padding-top:0;}
  .cmp--even tbody td:last-child .cmp-lbl{color:var(--gold-ink);}
}

/* "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;}
}

/* ---------- 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. The vendor matrix, the language wall and the
   calculator used to sit here hidden by a display:none — 16KB of markup every
   visitor downloaded and nobody saw. They are deleted from index.html now
   (git history keeps the copy); the pricing page carries the comparison and
   the churches page the estimator. */
main > .home-fold ~ .band{padding-block:76px;}

/* 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;}


/* 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;}
}

/* Speaker-catalogue toggle, used by the prospect demo pages, which copy this
   stylesheet verbatim (scripts/prospect/page.mjs). The homepage no longer
   carries the speaker demo; its home-only overrides were removed 2026-09-25. */
.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;}
@media(max-width:760px){.demo-speakers-toggle{flex-basis:46px;width:46px;height:46px;}}


/* ---- Status-quo table on a phone: one alternative at a time ------------
   Built by initStatusTables() in home.js. Desktop never sees the strip and
   data-cmp-view matches nothing there; under 760px the strip picks which
   "what you do today" column each stacked card shows beside Koine's answer.
   The hide rule and the show rules share one specificity, so the show rules
   must stay below the hide rule. */
.cmp-tabs{display:none;}
@media(max-width:760px){
  .cmp-tabs{display:flex;gap:4px;margin-top:26px;padding:4px;
    border:1px solid var(--hairline);border-radius:999px;background:var(--ground-raised);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .cmp-tabs::-webkit-scrollbar{display:none;}
  /* Three equal cells that wrap their label, rather than a strip that scrolls:
     a pill cut off at the viewport edge reads as broken, and every label here
     fits in two short lines. */
  .cmp-tabs button{appearance:none;flex:1 1 0;min-width:0;border:0;background:transparent;font:inherit;
    font-size:.78rem;font-weight:600;line-height:1.15;color:var(--slate);padding:8px 8px;border-radius:999px;
    text-align:center;cursor:pointer;}
  .cmp-tabs button[aria-selected=true]{background:var(--lapis);color:var(--on-lapis);}
  .cmp-tabs button:focus-visible{outline:2px solid var(--lapis);outline-offset:2px;}
  .cmp--status[data-cmp-view]{margin-top:14px;}
  .cmp--status[data-cmp-view] tbody td:not(:last-child){display:none;}
  .cmp--status[data-cmp-view="1"] tbody td:nth-child(2),
  .cmp--status[data-cmp-view="2"] tbody td:nth-child(3),
  .cmp--status[data-cmp-view="3"] tbody td:nth-child(4){display:block;}
}

/* ---- Demo stage: avatar column inside the frame ------------------------
   The engaged speaker column used to sit at left:-31px, hanging off the
   stage's edge like a rendering fault. It now lives inside the frame
   (left:22px, 58px wide), so the title block below it starts to its right on
   desktop widths; phones centre that block and are untouched. */
@media(min-width:761px){.demo-showcase-shell.is-engaged .demo-context{left:100px;}}

/* ---- Homepage "Hear it yourself" demo (2026-09-25) ---------------------
   Phone-first: the listener's screen is the product, so a large phone plays
   the real translated voice and captions (demo-media CDN, captions.json)
   while the talk and language pick beside it. No speaker video and no faces:
   the webcam sermon read as cheap next to the venue hero (Mathias). Script:
   initHearDemo() in home.js. The generic .demo-* rules above stay for the
   prospect pages. */
.hear{position:relative;padding:96px 0 104px;background:var(--ground);overflow:hidden;}
.hear::before{content:"";position:absolute;left:66%;top:50%;width:980px;height:980px;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,var(--ground-raised) 0%,rgba(253,250,243,.7) 45%,rgba(253,250,243,0) 100%);}
.hear-in{position:relative;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);column-gap:48px;
  grid-template-areas:"copy stage" "talks stage" "langs stage";grid-template-rows:auto auto 1fr;align-items:start;}
.hear-copy{grid-area:copy;padding-top:48px;}
.hear-copy h2{margin-top:14px;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.08;}
.hear-copy>p{margin-top:16px;max-width:31rem;font-size:1.1rem;color:var(--slate);}
.hear-talkbox{grid-area:talks;}
.hear-langbox{grid-area:langs;}
.hear-stage{grid-area:stage;justify-self:center;}
.hear-k{display:block;margin-top:34px;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);}
.hear-talks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px;max-width:31rem;}
.hear-talk{appearance:none;display:block;padding:16px 18px;border:1px solid var(--hairline);border-radius:16px;
  background:var(--ground-raised);text-align:start;font:inherit;color:var(--ink);cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .2s;}
.hear-talk:hover{border-color:rgba(39,78,141,.4);transform:translateY(-1px);}
.hear-talk[aria-pressed="true"]{border-color:var(--lapis);box-shadow:0 0 0 3px rgba(39,78,141,.12);}
/* Norwegian "Universitetsforelesning" is one 23-letter word: let it hyphenate
   rather than widen the whole grid past a phone screen. */
.hear-talk b{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:600;hyphens:auto;overflow-wrap:anywhere;}
.hear-talk span{display:block;margin-top:4px;font-size:.86rem;color:var(--slate);}
.hear-langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;max-width:31rem;}
.hear-lang{appearance:none;height:40px;padding:0 16px;border:1px solid var(--hairline);border-radius:999px;
  background:var(--ground-raised);font:600 .92rem var(--sans);color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
.hear-lang:hover{border-color:rgba(39,78,141,.4);}
.hear-lang[aria-pressed="true"]{background:var(--lapis);border-color:var(--lapis);color:#fff;}
.hear-lang small{font-weight:500;opacity:.7;margin-inline-start:5px;}
.hear-copy>p.hear-tech{margin-top:12px;font-size:.84rem;font-weight:500;color:var(--slate);}
/* On a laptop the QR moves the demo to the visitor's own phone; on a phone
   the link does the same job and the code is hidden. */
.hear-onphone{display:flex;align-items:center;gap:16px;margin-top:26px;}
.hear-onphone[hidden]{display:none;}
.hear-qr{width:96px;height:96px;padding:6px;border:1px solid var(--hairline);border-radius:12px;background:#fff;}
.hear-qr-label{display:block;margin-bottom:4px;font-size:.84rem;color:var(--slate);}
.hear-join{font-size:.88rem;font-weight:600;}
.hear-talks:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));max-width:40rem;}
.hear-phone{position:relative;width:344px;height:690px;padding:10px;border-radius:56px;background:#1b2330;
  box-shadow:0 0 0 1px rgba(24,33,49,.2),0 40px 90px -24px rgba(24,33,49,.45),0 12px 30px -10px rgba(24,33,49,.25);}
.hear-screen{position:relative;height:100%;overflow:hidden;border-radius:46px;background:#0b111b;color:#eef1f6;
  display:flex;flex-direction:column;font-family:var(--sans);}
.hear-island{position:absolute;top:12px;left:50%;width:108px;height:31px;border-radius:20px;background:#000;transform:translateX(-50%);}
.hear-status{display:flex;justify-content:space-between;padding:17px 30px 0;font-size:.8rem;font-weight:600;}
.hear-bar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:22px 18px 0;}
.hear-bar svg{opacity:.8;}
.hear-bar strong{text-align:center;font-size:.95rem;}
.hear-live{justify-self:end;display:flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;letter-spacing:.08em;color:#8fd6a8;}
.hear-live i{width:7px;height:7px;border-radius:50%;background:#3ec27a;box-shadow:0 0 0 4px rgba(62,194,122,.15);}
.hear-pill{align-self:center;display:flex;align-items:center;gap:7px;margin-top:14px;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:.8rem;color:#c9d2e0;}
.hear-pill b{color:#8ec5ff;font-weight:600;}
.hear-captions{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
  padding:0 26px 26px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 38%);mask-image:linear-gradient(180deg,transparent 0%,#000 38%);}
.hear-line{font-family:var(--serif);font-size:1.12rem;line-height:1.42;color:rgba(238,241,246,.34);}
.hear-line.is-now{font-size:1.42rem;line-height:1.36;color:#fff;animation:hear-in .5s ease-out both;}
@keyframes hear-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.hear-hint{color:rgba(238,241,246,.5);font-size:.95rem;}
.hear-player{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;margin:0 14px 16px;padding:12px 16px 12px 12px;
  border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);}
.hear-play{appearance:none;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;
  background:#fff;color:#0b111b;cursor:pointer;}
.hear-play .hear-ico-pause,.hear.is-playing .hear-play .hear-ico-play{display:none;}
.hear.is-playing .hear-play .hear-ico-pause{display:block;}
.hear-wave{display:flex;align-items:center;gap:3px;height:30px;}
.hear-wave i{flex:1;height:18%;border-radius:2px;background:rgba(142,197,255,.55);}
.hear-time{font-size:.78rem;font-variant-numeric:tabular-nums;color:#9aa6b8;}
.hear-home{width:130px;height:5px;margin:0 auto 9px;border-radius:3px;background:rgba(255,255,255,.35);}
.hear-start{position:absolute;inset:0;z-index:3;display:grid;place-items:center;align-content:center;gap:16px;
  border:0;border-radius:46px;background:radial-gradient(circle at 50% 46%,rgba(39,78,141,.55),rgba(11,17,27,.2) 60%),rgba(11,17,27,.55);
  color:#fff;font:inherit;cursor:pointer;transition:opacity .35s;}
.hear.is-started .hear-start{opacity:0;pointer-events:none;}
.hear-start-btn{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#fff;color:var(--lapis);
  box-shadow:0 0 0 12px rgba(255,255,255,.12),0 0 0 26px rgba(255,255,255,.05);}
.hear-start strong{font-family:var(--serif);font-size:1.35rem;font-weight:600;}
.hear-start>span:last-child{font-size:.85rem;color:rgba(255,255,255,.72);}
.hear-credit{margin-top:14px;text-align:center;font-size:.76rem;color:var(--slate);}
@media(max-width:960px){
  .hear{padding:64px 0 72px;}
  .hear-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "talks" "stage" "langs";grid-template-rows:none;}
  .hear-copy{padding-top:0;text-align:center;}
  .hear-talkbox,.hear-langbox{text-align:center;}
  .hear-copy>p,.hear-talks,.hear-langs{margin-inline:auto;}
  .hear-talkbox .hear-k{margin-top:26px;}
  .hear-stage{margin-top:28px;}
  .hear-langbox .hear-k{margin-top:22px;}
  .hear-langs{justify-content:center;}
  .hear-onphone{justify-content:center;}
  .hear-qr,.hear-qr-label{display:none;}
  .hear-talks:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr));}
  .hear::before{left:50%;top:60%;}
}
@media(max-width:600px){
  .hear-phone{width:312px;height:640px;border-radius:50px;padding:9px;}
  .hear-screen,.hear-start{border-radius:41px;}
  .hear-line.is-now{font-size:1.28rem;}
  /* Three cards across a phone hyphenate German into ribbons; stack them as rows. */
  .hear-talks,.hear-talks:has(> :nth-child(3)){grid-template-columns:minmax(0,1fr);gap:8px;}
  .hear-talk{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 16px;}
  .hear-talk b{font-size:1rem;}
  .hear-talk span{margin-top:0;font-size:.8rem;text-align:end;}
}
@media(max-width:350px){
  .hear-phone{width:290px;height:600px;}
}
@media(prefers-reduced-motion:reduce){
  .hear-line.is-now{animation:none;}
}

/* ---- Footer trust line + homepage proof band ---------------------------
   Where the data lives, stated on every page above the legal bar; and the
   one-church proof band (#proof) that replaced the parked testimonial shelf. */
.foot-trust{flex-basis:100%;margin:36px 0 0;max-width:64rem;color:var(--on-deep-soft);font-size:.9rem;line-height:1.55;}
.foot-trust a{color:var(--on-deep);text-decoration:underline;}
.proof-source{margin-top:18px;color:var(--on-deep-faint);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.proof-also{margin-top:10px;color:var(--on-deep-soft);font-size:.92rem;}

/* ---- Header menu icons -------------------------------------------------
   Stamped by scripts/site-chrome.mjs (ICON_PATHS / ICON_FOR). A tinted tile
   with a lapis line icon sits in the first grid column; title and blurb take
   the second. The rules sit at the end of the sheet on purpose: the earlier
   ".nav-col a span" and ".nav-menu-foot span" blurb rules match the icon's
   own span at equal specificity, and source order settles it. */
.nav-col a,.nav-option,.nav-menu-foot{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;}
.nav-col a>b,.nav-option>b,.nav-menu-foot>b{grid-column:2;}
.nav-col a>span:not(.nav-ic),.nav-option>span:not(.nav-ic),.nav-menu-foot>span:not(.nav-ic){grid-column:2;}
.nav-col a .nav-ic,.nav-option .nav-ic,.nav-menu-foot .nav-ic{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;margin:0;
  border-radius:9px;background:rgba(39,78,141,.09);color:var(--lapis);}
.nav-ic svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.nav-col a:hover .nav-ic,.nav-menu-foot:hover .nav-ic{background:rgba(39,78,141,.16);}
.nav-option--soon .nav-ic{opacity:.55;}
.nav-col{min-width:262px;}
/* Phone drawer: the same icon, smaller, inline with the label. */
.drawer-links a{display:flex;align-items:center;gap:10px;}
.drawer-links .nav-ic{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;
  background:rgba(39,78,141,.09);color:var(--lapis);}
.drawer-links .nav-ic svg{width:16px;height:16px;}

/* ---- Right-to-left and non-Latin locales ---------------------------------
   `scripts/i18n.mjs pages` bakes dir="rtl" into the prerendered <html> tag for
   Arabic and src/i18n.js sets it at runtime. The chrome's left/right offsets
   above are logical (margin-inline-start, inset-inline-end, …), so the browser
   mirrors them from the dir attribute alone; what remains is the one physical
   transform origin and the script-specific font stacks. Scoped so every LTR
   Latin locale is untouched. */
:lang(ar){
  --sans:'IBM Plex Sans','Segoe UI','Tahoma','Geeza Pro','Noto Naskh Arabic',system-ui,sans-serif;
  --serif:'Literata','Georgia','Noto Naskh Arabic','Times New Roman',serif;
}
:lang(zh){
  --sans:'IBM Plex Sans','PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
  --serif:'Literata','Songti SC','Noto Serif SC','SimSun',serif;
}
:lang(ko){
  --sans:'IBM Plex Sans','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',system-ui,sans-serif;
  --serif:'Literata','Apple SD Gothic Neo','Noto Serif KR',serif;
}
html[dir="rtl"] .brand-wordmark{transform-origin:right center;}

/* ---- Homepage "More in Koine" tiles (2026-09-25) -----------------------
   Station, overlays, BibleSense and the listener app were four full
   sections; each is now one tile linking to its own page. */
.more-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:34px;}
.more-tile{display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;border:1px solid var(--hairline);border-radius:16px;
  background:var(--ground-raised);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;}
.more-tile:hover{border-color:rgba(39,78,141,.4);transform:translateY(-2px);box-shadow:var(--shadow-lift);text-decoration:none;}
.more-tile .nav-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:8px;border-radius:11px;
  background:rgba(39,78,141,.09);color:var(--lapis);}
.more-tile .nav-ic svg{width:20px;height:20px;}
.more-tile b{font-family:var(--serif);font-size:1.12rem;font-weight:600;}
.more-tile span:last-child{font-size:.92rem;color:var(--slate);}
@media(max-width:960px){.more-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.more-tiles{grid-template-columns:minmax(0,1fr);gap:10px;}.more-tile{padding:16px 18px;}}
@media(prefers-reduced-motion:reduce){.more-tile:hover{transform:none;}}


/* ============================================================
   Declutter pass (2026-09-27, Mathias: "too much text", "the paper feel
   becomes a little saturated"). Three moves, all here so they stay
   reviewable in one place:
   1. A lighter ground: near-white page, white raised surfaces. Parchment
      stays in the tokens for the app surfaces that still use it.
   2. Quiet labels: eyebrows and row keys are small sentence-case lapis,
      not spaced gold capitals, so one heading per section does the work.
   3. Clean heroes: no paper scene. Copy on the left; where a picture helps,
      the real listener screen (.pmock) or Station tablet (.tmock) on the
      right, built from the homepage demo's own phone styles.
   ============================================================ */
.eyebrow,.row2 .r-k,.hear-k,.fork-k,.price-col .plabel,.ent .e-k,.price-path-k,.price-personal-copy .e-k,.nav-col-k{
  text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:600;color:var(--lapis);
}
.nav-col-k{font-size:.8rem;color:var(--slate);}
.proof-source,.foot h4,.cmp-lbl,.cmp thead th{text-transform:none;letter-spacing:0;}
.cmp thead th{font-size:.9rem;}
.proof-source{font-size:.95rem;}
.foot h4{font-size:.9rem;}
.eyebrow--light,.band--dark .eyebrow,.final .eyebrow{color:var(--on-deep);}
.band{padding:80px 0;}

/* ---- clean page hero (replaces the paper-art hero on every subpage) ---- */
.pagehero--art-light,.pagehero--clean{
  margin-top:calc(0px - var(--topbar-h) - var(--topbar-inset));
  padding-top:calc(72px + var(--topbar-h) + var(--topbar-inset));
  padding-bottom:72px;
  min-height:0;display:block;position:relative;overflow:hidden;
  background:var(--ground);border-bottom:1px solid var(--hairline-soft);
  --ph-heading:var(--ink);--ph-body:var(--ink-soft);--ph-meta:var(--slate);--ph-link:var(--lapis);
}
.pagehero--art-light::before,.pagehero--clean::before{content:none;}
.pagehero--art-light .pagehero-art{display:none;}
.pagehero--art-light .container>*,.pagehero--clean .container>*,
.pagehero--flip .container>*{max-width:none;margin-left:0;margin-right:0;}
.pagehero--flip .crumb,.pagehero--flip .hero-actions{text-align:left;}
.pagehero--art-light h1,.pagehero--clean h1{max-width:18ch;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.06;}
.pagehero--art-light .container>p,.pagehero--clean .container>p,.ph-copy>p{max-width:36rem;}
.pagehero--art-light .container>p.hero-fine,.pagehero--clean .container>p.hero-fine,.ph-copy>p.hero-fine{max-width:36rem;}
:is(.pagehero--art-light,.pagehero--clean) .btn-light{background:var(--lapis);color:var(--on-lapis);border-color:var(--lapis);}
:is(.pagehero--art-light,.pagehero--clean) .btn-light:hover{background:var(--lapis-ink);border-color:var(--lapis-ink);}
:is(.pagehero--art-light,.pagehero--clean) .btn-ghost{background:transparent;color:var(--lapis);border-color:var(--lapis);}
:is(.pagehero--art-light,.pagehero--clean) .btn-ghost:hover{background:rgba(39,78,141,.06);color:var(--lapis-ink);border-color:var(--lapis-ink);}
:is(.pagehero--art-light,.pagehero--clean) .eyebrow--light{color:var(--lapis);}
.app-embed :is(.pagehero--art-light,.pagehero--clean){margin-top:0;padding-top:28px;}

/* Split hero: copy left, product right. */
.ph-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center;}
.pagehero .container.ph-split>*{max-width:none;}
.ph-copy>p.ph-sub,.ph-copy>p{margin-top:18px;font-size:1.16rem;color:var(--ph-body);}
.ph-copy>p.hero-fine{font-size:.92rem;color:var(--ph-meta);}
.ph-copy>p.hero-fine a{color:var(--ph-link);text-decoration:underline;}
.ph-copy .hero-actions{margin-top:28px;}
.ph-visual{justify-self:end;}
@media(max-width:900px){
  .ph-split{grid-template-columns:minmax(0,1fr);gap:40px;}
  .ph-visual{justify-self:center;}
}

/* ---- static listener phone (.pmock) ----
   Same device as the homepage demo (.hear-phone), smaller and without the
   player: a header, the language pill, and captions with the newest line
   bright. Put the caption text in the target language and mark the captions
   data-i18n-skip so a German page still shows what a listener sees. */
.pmock .hear-phone{width:292px;height:588px;border-radius:48px;padding:9px;}
.pmock .hear-screen{border-radius:40px;}
.pmock .hear-bar{grid-template-columns:1fr auto;gap:10px;padding:22px 22px 0;}
.pmock .hear-bar strong{text-align:start;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pmock .hear-captions{padding:0 22px 22px;gap:12px;}
.pmock .hear-line{margin:0;font-size:1rem;}
.pmock .hear-line.is-now{font-size:1.22rem;animation:none;}
.pmock-verse{margin:0 14px 14px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);}
.pmock-verse b{display:block;font-size:.72rem;font-weight:600;color:#8ec5ff;}
.pmock-verse p{margin:6px 0 0;font-family:var(--serif);font-size:.98rem;line-height:1.4;color:#eef1f6;}
@media(max-width:600px){.pmock .hear-phone{width:264px;height:532px;border-radius:44px;}.pmock .hear-screen{border-radius:36px;}}

/* ---- static Station tablet (.tmock) ----
   A landscape tablet split in two: each person reads the other in their own
   language. Same dark screen as the phone so the two read as one product. */
.tmock{width:min(520px,100%);aspect-ratio:4/3;padding:12px;border-radius:28px;background:#1b2330;
  box-shadow:0 0 0 1px rgba(24,33,49,.2),0 40px 90px -24px rgba(24,33,49,.45);}
.tmock-screen{height:100%;display:grid;grid-template-columns:1fr 1fr;border-radius:18px;overflow:hidden;background:#0b111b;color:#eef1f6;}
.tmock-side{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:22px 20px;}
.tmock-side+.tmock-side{border-inline-start:1px solid rgba(255,255,255,.08);}
.tmock-lang{align-self:flex-start;margin-bottom:auto;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);font:600 .74rem var(--sans);color:#8ec5ff;}
.tmock-line{margin:0;font-family:var(--serif);font-size:.95rem;line-height:1.4;color:rgba(238,241,246,.4);}
.tmock-line.is-now{font-size:1.12rem;color:#fff;}
.tmock-side:first-child{transform:rotate(180deg);}
@media(max-width:600px){.tmock-line{font-size:.82rem;}.tmock-line.is-now{font-size:.95rem;}.tmock-side{padding:14px;}}

/* ---- homepage: the demo phone IS the hero ---- */
.hear--hero{
  margin-top:calc(0px - var(--topbar-h) - var(--topbar-inset));
  padding-top:calc(40px + var(--topbar-h) + var(--topbar-inset));
  padding-bottom:88px;
}
.hear--hero .hear-copy{padding-top:56px;}
.hear--hero .hear-copy h1{font-size:clamp(2.6rem,5.2vw,4.2rem);line-height:1.02;letter-spacing:-.02em;}
.hear--hero .hear-copy>p{font-size:1.2rem;color:var(--ink-soft);}
.hear--hero .hero-actions{margin-top:28px;}
.hear--hero .hear-k{margin-top:40px;}
@media(max-width:960px){.hear--hero .hear-copy{padding-top:12px;}.hear--hero .hero-actions{justify-content:center;}}
.app-embed .hear--hero{margin-top:0;padding-top:28px;}

/* Setting links without pictures: a quiet grid of text cards. */
.uses--text .use{padding:24px;border:1px solid var(--hairline);border-radius:16px;background:var(--ground-raised);}
.uses--text .use h3{margin-top:0;}
@media(max-width:600px){
  .uses--text{gap:10px;margin-top:28px;}
  .uses--text .use{padding:18px 20px;}
  .more-tiles{margin-top:10px;}
  .more-tile span:last-child{display:none;}
  .more-tile{flex-direction:row;align-items:center;gap:14px;}
  .more-tile .nav-ic{margin-bottom:0;flex:0 0 auto;}
}
/* A tablet in the split hero needs a definite width: min(…,100%) inside an
   auto grid track resolves against nothing and squeezes the copy column. */
.ph-visual:has(.tmock){width:min(480px,42vw);}
.ph-visual .tmock{width:100%;}
@media(max-width:900px){.ph-visual:has(.tmock){width:min(520px,100%);}}