@import url("fonts.css");
/* Shared stylesheet, linked by every page. Extracted verbatim from the identical inline copies.
   Order matters: the head block first, then the block that used to follow the nav. */
:root{
  /* measured from joininlive.ai, do not substitute */
  --blue:#3229E0;          /* primary ground */
  --ink:#212E21;           /* second ground; headings on white */
  --acid:#EEFF00;          /* accent ground; display type on blue */
  --cream:#F4F3E8;         /* text on ink only */
  --void:#FFFFFF;

  --panel:#F5F5F2;
  --panel-2:#ECECE6;
  --line:#E2E2DC;
  --line-2:#C9C9C0;
  --dim:#4A4F48;
  --dimmer:#666B64;
  --acid-ink:#212E21;
  --deep:#3229E0;
  --deep-2:#241CB4;
  --blue-lift:#4A41FF;
  --mint:#0C7E54;
  --font:museo-sans,"Museo Sans",Figtree,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --track:-0.02em;
  --maxw:100%;

  /* Type scale: the only font sizes the site uses. Headings are fluid, measured from joininlive.ai; text steps are fixed.
     Nothing is set below 12px. See site/design-doc/02-TYPOGRAPHY.md. */
  /* rem, so a reader's browser font size is respected; at the default 16px these render exactly as the px values noted. */
  /* Each heading matches joininlive.ai at 390 and 1440 wide: a straight line between those two widths, and the live
     site's own formula (the second term) from 1440 up. The min() caps H1 and H2 on narrow phones so the longest word
     in any heading ("underneath." in H1, "entertainment" in H2) still fits the column; re-measure when a heading changes. */
  --fs-h1:min(15.8vw,max(calc(3.413rem + 2.839vw),calc(1rem + 5.52vw)));   /* 61.6px at 390 (capped), 95.5px at 1440 */
  --fs-h2:min(13.4vw,max(calc(2.574rem + 1.851vw),calc(1rem + 3.6vw)));    /* 48.4px at 390, 67.8px at 1440 */
  --fs-h3:max(calc(1.734rem + .864vw),calc(.96875rem + 1.72vw));    /* 31.1px at 390, 40.2px at 1440 */
  --fs-h4:max(calc(1.367rem + .432vw),calc(1.0625rem + .77vw));     /* 23.6px at 390, 28.1px at 1440 */
  --fs-stat:clamp(2.5rem,4.2vw,4rem);          /* 40 to 64px */
  --fs-stat-sm:clamp(1.75rem,2.6vw,2.5rem);    /* 28 to 40px */
  --fs-title:clamp(1.25rem,1.5vw,1.5rem);      /* 20 to 24px */
  --fs-lead:clamp(1.25rem,1rem + .5vw,1.5rem); /* 20 to 24px: a clear step (about 1.3x) above body on desktop */
  --fs-lg:1.3125rem;   /* 21px */
  --fs-base:1.125rem;  /* 18px */
  --fs-md:1rem;        /* 16px */
  --fs-sm:.875rem;     /* 14px */
  --fs-xs:.8125rem;    /* 13px */
  --fs-2xs:.75rem;     /* 12px */
  /* Measure for running text: 50ch keeps the longest line near 72 characters and a typical line near 66 (the
     readable 45 to 75 range), measured on the legal pages, which have the shortest words. */
  --measure:50ch;

  /* Weights: only the three the site loads (fonts.css). 400 and 600 are not loaded and must not be used. */
  --fw-light:300;
  --fw-medium:500;
  --fw-bold:700;

  --lh-body:1.55;
  --lh-ui:1.35;
  --track-caps:.1em;
  /* One line height per role: headings as measured, titles, mock-up titles, stats. */
  --lh-h1:.898;
  --lh-h2:.968;
  --lh-h3:1.038;
  --lh-h4:1.069;
  --lh-title:1.1;
  --lh-mock:1.25;
  --lh-stat:.86;
  --track-stat:-.05em;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Reduced motion is gentler, not zero: every animation stops, and so does every transition except inside .jilrt, which
   keeps its colour and opacity easing on purpose (why-it-pays/index.html limits it to those properties). */
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important} *:not(.jilrt):not(.jilrt *){transition:none!important} }

body{
  margin:0;
  background:var(--void);color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-base);font-weight:var(--fw-light);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.d{font-family:var(--font);margin:0;font-weight:var(--fw-light);letter-spacing:var(--track);line-height:.92;text-wrap:balance}
/* As on joininlive.ai: H1 and section H2 are bold as a whole; H3 and H4 are light, with 700 only on strong and b.
   An H2 set in the smaller block-heading role (.pr-w h2, .nv-hd h2) sets light itself. */
h1,h2{font-weight:var(--fw-bold)}
h4{font-weight:var(--fw-light);letter-spacing:var(--track);line-height:var(--lh-h4)}
b,strong{font-weight:var(--fw-bold)}
h1 strong,h2 strong,h3 strong,h4 strong,h1 b,h2 b,h3 b,h4 b,.d strong,.hero h1 .l2{font-weight:var(--fw-bold)}
p{margin:0}
a{color:inherit;text-decoration:none}
/* The acid ring alone vanished on white and acid grounds; the ink ring at the edge keeps focus visible there. */
:focus-visible{outline:2px solid var(--acid);outline-offset:4px;box-shadow:0 0 0 2px var(--ink)}
.wrap{max-width:100%;margin:0 auto;padding:0 4%}
.lbl{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.hero .lbl{color:rgba(255,255,255,.72)}
.hl{background:var(--acid);color:var(--acid-ink);padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
em.it{font-style:italic;font-weight:var(--fw-bold)}

.btn{display:inline-flex;align-items:center;gap:9px;font-weight:var(--fw-medium);font-size:var(--fs-md);padding:14px 32px;border:1px solid currentColor;color:var(--blue);border-radius:300px;transition:background-color .16s ease,color .16s ease,border-color .16s ease,opacity .16s ease,transform .16s cubic-bezier(.23,1,.32,1);background:transparent;letter-spacing:normal;line-height:var(--lh-body)}
.btn.p{background:transparent;color:var(--blue)}
.hero .btn.p{background:var(--acid);border-color:var(--acid);color:var(--acid-ink)}
@media (hover:hover) and (pointer:fine){ .hero .btn.p:hover{background:#F4FF66;border-color:#F4FF66;color:var(--acid-ink);opacity:1} }
.hero .btn:not(.p){background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
@media (hover:hover) and (pointer:fine){ .hero .btn:not(.p):hover{background:#fff;color:var(--blue);border-color:#fff;opacity:1} }
/* A filled pill stays at full strength; the .72 dim below is for outlined pills. */
@media (hover:hover) and (pointer:fine){ .btn.p:hover{background:var(--blue);color:#fff;opacity:1} }
@media (hover:hover) and (pointer:fine){ .btn:hover{opacity:.72} }
.btn:active{transform:scale(.97)}


/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;mix-blend-mode:normal}

.logo .mark{display:block;height:26px;width:auto}
.nav-in{max-width:100%;margin:0 auto;padding:20px 4%;display:flex;align-items:center;gap:26px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-base);letter-spacing:-.05em;color:var(--blue)}
.nav-in{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);max-width:none;padding-left:4%;padding-right:4%}
.nav-links{display:flex;gap:clamp(20px,2vw,30px);margin-left:auto;font-size:var(--fs-md);color:var(--ink);font-family:var(--font);font-weight:var(--fw-medium);letter-spacing:0}
.nav-links a{position:relative;padding-bottom:3px}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{color:var(--ink)} }
@media (hover:hover) and (pointer:fine){ .nav-links a:hover::after{transform:scaleX(1)} }
.nav-links a.here{color:var(--blue)}
.nav-links a.here::after{transform:scaleX(1)}
.nav .navcta{padding:11px 26px;font-size:var(--fs-md);margin-left:clamp(20px,2vw,30px);border-radius:999px}
@media (hover:hover) and (pointer:fine){ .nav .navcta:hover{background:#3129D7;border-color:#3129D7;color:#fff;opacity:1} }
.burger{display:none;flex:none;margin-left:14px;width:40px;height:40px;background:transparent;border:1px solid var(--line-2);border-radius:2px;cursor:pointer;position:relative;transition:transform .12s cubic-bezier(.23,1,.32,1)}
/* Library icons inline with text (scripts/icons.mjs). Sized in em by their markup, so they follow the font size. */
.ico{display:inline-block;flex:none;vertical-align:-.125em}
.btn .ico{width:1.1em;height:1.1em}
.burger:active{transform:scale(.94)}
/* Lucide menu and x, stacked: the open state cross-fades and turns one into the other. */
.burger svg{position:absolute;inset:0;margin:auto;width:20px;height:20px;stroke-width:1.75;color:var(--ink);transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s ease,color .2s ease}
.burger svg[data-icon="lucide:x"]{opacity:0;transform:rotate(-45deg)}
.burger[aria-expanded="true"] svg{color:var(--blue)}
.burger[aria-expanded="true"] svg[data-icon="lucide:menu"]{opacity:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] svg[data-icon="lucide:x"]{opacity:1;transform:none}
@media (max-width:1180px){
  .nav-links{display:none}
  .nav-in{min-height:64px;padding-top:12px;padding-bottom:12px;gap:12px}
  .burger{display:block;margin-left:10px}
  .nav .navcta{margin-left:auto;height:40px;padding:0 18px;white-space:nowrap}
}
@media (max-width:360px){
  .logo .mark{height:22px}
  .nav .navcta{padding:0 14px;font-size:var(--fs-sm)}
}
.drawer{
  position:fixed;top:64px;left:0;right:0;z-index:55;background:var(--panel);
  border-bottom:1px solid var(--line);padding:14px 4% 26px;
  display:flex;flex-direction:column;max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;
}
/* With motion.js running, JILMotion animates the drawer in and out; without it, CSS gives it an entrance. */
html:not(.jlm-ready) .drawer{transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1)}
@starting-style{ html:not(.jlm-ready) .drawer{opacity:0;transform:translateY(-6px)} }
.drawer a{padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--font);font-weight:var(--fw-medium);font-size:var(--fs-lg);letter-spacing:var(--track)}
.drawer a:last-child{border-bottom:0}
@media (hover:hover) and (pointer:fine){ .drawer a:hover{color:var(--blue)} }
.drawer .dcta{color:var(--blue);padding-top:22px}
.drawer .dcta .ico{stroke-width:2.5}
/* The drawer is display:flex, which overrides the hidden attribute, so it opened on every page load. */
.drawer[hidden]{display:none}
@media (min-width:1181px){ .drawer{display:none!important} }

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(78vh,700px);display:flex;align-items:flex-end;border-bottom:0;overflow:hidden;background:var(--deep);color:#fff}
.hero-in{position:relative;max-width:100%;margin:0 auto;padding:0 4% 52px;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,4vw,80px);align-items:end}
.hero-art{--hero-gap:clamp(56px,7vh,80px);display:flex;justify-content:flex-end;align-items:flex-end;padding-top:calc(89px + var(--hero-gap));padding-bottom:calc(var(--hero-gap) - 54px);min-width:0}
@media (max-width:1000px){.hero-in{grid-template-columns:1fr;gap:36px}.hero-art{justify-content:flex-start;padding-top:0}}
.hero h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--track);max-width:17ch}
.hero h1 .l2{display:block;color:var(--acid)}
.hero .say{margin-top:24px}
/* Hero lead: the H4 role, as the live site sets it, in solid white. */
.hero .say p{font-size:var(--fs-h4);font-weight:var(--fw-light);line-height:var(--lh-h4);letter-spacing:var(--track);
  color:#fff;max-width:var(--measure);text-wrap:pretty}
.hero .say p b{color:var(--acid);font-weight:var(--fw-bold)}
.hero .say p b.hi{color:var(--acid);font-weight:var(--fw-bold)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.hero .fine{margin-top:24px;font-size:var(--fs-sm);color:rgba(255,255,255,.66);max-width:56ch;line-height:1.6}
.hero .top{position:relative;padding-top:112px;max-width:none;min-width:0}
.one{display:block}
.one .prose{max-width:66ch}

/* ---------- example cards (image slots) ---------- */
#showcards{background:var(--deep);border-bottom:0}
.cards{max-width:100%;margin:0 auto;padding:0 4% 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){ .cards{grid-template-columns:1fr;gap:16px;padding-bottom:40px} }
.card{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;display:block;
  transition:transform .25s cubic-bezier(.23,1,.32,1);background-size:cover;background-position:center}
@media (hover:hover) and (pointer:fine){ .card:hover{transform:translateY(-3px)} }
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(6,8,26,.86));z-index:1}
.glow{position:absolute;inset:0;opacity:.9;background-repeat:no-repeat;background-size:150% 150%;background-position:26% 14%}
.c1 .glow{background-image:radial-gradient(closest-side,#2B6BE8,rgba(43,107,232,0))}
.c2 .glow{background-image:radial-gradient(closest-side,#7A2BE8,rgba(122,43,232,0))}
.c3 .glow{background-image:radial-gradient(closest-side,#E8368F,rgba(232,54,143,0))}


.cu{position:absolute;z-index:2;left:18px;right:18px;top:16px;display:flex;flex-direction:column;gap:5px}
.cu-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);
  letter-spacing:var(--track-caps);color:#fff;opacity:.9;margin-bottom:4px}
.cu-dot{width:5px;height:5px;border-radius:99px;background:var(--acid);flex:none}
@media (prefers-reduced-motion:no-preference){ .cu-dot{animation:blip 1.7s ease-in-out infinite} }
.cu-row{display:flex;justify-content:space-between;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:rgba(255,255,255,.85);margin-top:3px}
.cu-row b{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;color:#fff}
.cu-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.cu-bar.tall{height:7px;margin-top:4px}
/* Full width, cut back to --w with a rounded clip (as .phone .bar i), so a new value never triggers layout. */
.cu-bar i{display:block;height:100%;width:100%;border-radius:99px;background:var(--acid);
  clip-path:inset(0 calc(100% - var(--w,0%)) 0 0 round 99px);transition:clip-path 1.2s cubic-bezier(.22,1,.36,1)}
.cu-bar i.k2{background:#6A5CFF} .cu-bar i.k3{background:#42E3A4}
.cu-score{display:flex;align-items:baseline;gap:9px;margin-top:2px}
.cu-score b{font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-stat-sm);letter-spacing:-.05em;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.cu-score span{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:rgba(255,255,255,.65)}
.cu-pips{display:flex;gap:3px;margin-top:5px}
.cu-pips i{flex:1;height:4px;border-radius:1px;background:var(--acid)}
.cu-pips i.off{background:rgba(255,255,255,.2)}
.cu-count{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:.08em;color:rgba(255,255,255,.72);margin-top:7px}
.cu-count b{color:#fff;font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
@media (max-width:900px){ .cu{left:16px;right:16px;top:14px} }
.c1{background-image:radial-gradient(90% 70% at 30% 20%,#2B6BE8,#0B1B4A 60%,#060A24),
     repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px)}
.c2{background-image:radial-gradient(80% 70% at 70% 25%,#7A2BE8,#2A0F5C 62%,#0B0620),
     repeating-linear-gradient(65deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px)}
.c3{background-image:radial-gradient(85% 75% at 40% 30%,#E8368F,#5C1140 60%,#1B0616),
     repeating-linear-gradient(95deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px)}
.card-cap{position:absolute;left:0;bottom:18px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-left:18px}
.card-cap b{font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-title);letter-spacing:-.03em;
  line-height:1.12;color:#fff;background:transparent;padding:1px 0}
.card-cap b:last-child{background:var(--acid);color:var(--acid-ink);padding:1px 7px;margin-left:-1px}

/* ---------- marquee ---------- */
@media (prefers-reduced-motion:no-preference){ }
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- section frame ---------- */
section{border-bottom:1px solid var(--line);position:relative;scroll-margin-top:96px}
.sec{max-width:100%;margin:0 auto;padding:104px 4%}
@media (max-width:760px){ .sec{padding:70px 6%} }
.head{display:flex;flex-direction:column;gap:18px}
.head h2{font-size:var(--fs-h2);max-width:20ch;line-height:var(--lh-h2);letter-spacing:var(--track);color:var(--blue)}
.head p{color:var(--dim);font-size:var(--fs-lead);max-width:46ch}
@media (min-width:1100px){
  .head{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:22px clamp(40px,5vw,110px);align-items:end}
  .head .lbl{grid-column:1 / -1}
  .head h2{grid-column:1;margin:0;max-width:none}
  .head p{grid-column:2;justify-self:start;max-width:40ch;line-height:var(--lh-body);padding-bottom:.5em}
}

/* ---------- gap numbers ---------- */
.leak{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media (max-width:880px){ .leak{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .leak{grid-template-columns:minmax(0,1fr)} }
.lk{background:var(--panel);padding:30px 22px;display:flex;flex-direction:column;gap:8px;transition:background .2s}
@media (hover:hover) and (pointer:fine){ .lk:hover{background:var(--panel-2)} }
.lk b{font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-stat);letter-spacing:var(--track-stat);line-height:var(--lh-stat);color:var(--dim);font-variant-numeric:tabular-nums}
.lk span{font-family:var(--font);font-size:var(--fs-sm);letter-spacing:normal;color:var(--dimmer);line-height:var(--lh-body)}
.lk.you{background:var(--panel-2)}
.lk.you b{color:var(--blue)} .lk.you span{color:var(--blue)}

/* ---------- what it is ---------- */
.two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:70px;align-items:start}
@media (max-width:960px){ .two{grid-template-columns:1fr;gap:40px} }
.buffword{margin-top:44px;display:flex;flex-direction:column;gap:16px;max-width:100%}
.buffword .w{font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-stat);letter-spacing:-.05em;line-height:.9}
.buffword .w s{text-decoration:none;color:var(--blue)}
.buffword p{color:var(--dim);font-size:var(--fs-base)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips span{font-family:var(--font);font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:.08em;border:1px solid var(--line-2);color:var(--dim);padding:5px 11px;border-radius:99px}

/* phone */
.feed{padding:10px;display:flex;flex-direction:column;gap:8px}
.bf{color:#fff;background:#1A1E44;border:1px solid #2A3060;border-radius:11px;padding:10px 11px;display:flex;flex-direction:column;gap:8px}
.bf .q{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:var(--lh-mock);letter-spacing:var(--track);color:#fff}
.opt{display:flex;flex-direction:column;gap:4px}
.orow{display:flex;justify-content:space-between;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:#A9AED0}
.orow b{color:#fff;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.bar{height:5px;border-radius:99px;background:#333A70;overflow:hidden}
/* Full width, cut back to --w with a rounded clip, so a new value never triggers layout. */
.bar i{display:block;height:100%;width:100%;border-radius:99px;
  clip-path:inset(0 calc(100% - var(--w,0%)) 0 0 round 99px);transition:clip-path 1s cubic-bezier(.22,1,.36,1)}
.chat{display:flex;gap:7px;align-items:flex-start;padding:0 2px}
.av{width:19px;height:19px;border-radius:99px;flex:none;background:linear-gradient(140deg,var(--blue),var(--mint));font-family:var(--font);font-size:var(--fs-2xs);display:grid;place-items:center;color:#0B0D22;font-weight:var(--fw-bold)}
.chat p{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:#A9AED0;line-height:var(--lh-ui)}
.chat p b{color:#fff;font-weight:var(--fw-bold);display:block;font-size:var(--fs-2xs)}
.cta-mini{font-family:var(--font);font-size:var(--fs-sm);letter-spacing:normal;text-transform:none;background:var(--acid);color:var(--acid-ink);padding:5px 9px;border-radius:99px;align-self:flex-start;font-weight:var(--fw-medium)}
/* Hero phone, drawn as an iPhone 15 Pro: brushed titanium band, black glass bezel, Dynamic Island with its lens,
   side buttons, a glass sheen, and a screen held to the real 393:852 ratio so the feed runs off the bottom like a
   scrolling app. The colours here are device artwork, not brand colours. */
.phone{position:relative;flex:none;width:330px;max-width:100%;padding:3px;border-radius:56px;
  background:linear-gradient(90deg,#4A4C55 0%,#A7AAB4 2.5%,#5E616B 5%,#3A3C44 12%,#34363E 50%,#3A3C44 88%,#5E616B 95%,#A7AAB4 97.5%,#4A4C55 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.18),
    0 70px 90px -40px rgba(12,6,70,.85),0 30px 40px -22px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.25)}
.phone .side,.phone .side::before,.phone .side::after{position:absolute;width:4px;border-radius:2px;
  background:linear-gradient(90deg,#2E3038,#9A9DA7 45%,#4D5058)}
.phone .side::before,.phone .side::after{content:"";left:0}
/* left: the Action button, then volume up and down; right: the side button */
.phone .side-l{left:-3px;top:112px;height:26px;border-radius:2px 0 0 2px}
.phone .side-l::before{top:48px;height:48px}
.phone .side-l::after{top:108px;height:48px}
.phone .side-r{right:-3px;top:170px;height:76px;border-radius:0 2px 2px 0}
.phone .screen{position:relative;overflow:hidden;aspect-ratio:393/852;border:7px solid #050507;border-radius:53px;
  background:radial-gradient(120% 60% at 50% 0%,#1B2050 0%,#10132F 55%,#0C0E26 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
/* the glass: a soft diagonal sheen over everything on the screen */
.phone .screen::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:46px;
  background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 28%,rgba(255,255,255,0) 42%),
    linear-gradient(180deg,rgba(12,14,38,0) calc(100% - 70px),rgba(12,14,38,.92) calc(100% - 8px))}
.phone .screen::after{content:"";position:absolute;z-index:4;left:50%;bottom:8px;width:118px;height:5px;margin-left:-59px;border-radius:99px;background:rgba(255,255,255,.72)}
.phone .notch{position:absolute;z-index:4;top:10px;left:50%;width:98px;height:29px;margin:0 0 0 -49px;border-radius:99px;
  background:radial-gradient(circle at calc(100% - 15px) 50%,#232846 0,#10132A 3px,#000 5.5px)}
/* iOS status bar: the time centred in the left ear beside the Dynamic Island, cellular bars, 5G and the battery
   centred in the right one. The bars and battery are drawn as device artwork, as iOS draws them. */
.phone .sbar{display:grid;grid-template-columns:1fr 98px 1fr;align-items:center;height:48px;padding:3px 6px 0;color:#fff}
.phone .sbar .ck{justify-self:center;display:flex;align-items:center;gap:3px;font-family:var(--font);font-size:var(--fs-md);font-weight:var(--fw-bold);letter-spacing:normal;font-variant-numeric:tabular-nums;color:#fff}
.phone .sbar .ck svg{width:12px;height:12px;fill:currentColor;stroke-width:1.5;transform:translateY(-.5px)}
.phone .sys{grid-column:3;justify-self:center;display:flex;align-items:center;gap:5px}
.phone .sys svg{display:block;fill:#fff;color:#fff}
.phone .sys .phs-sig{width:17px;height:11px}
.phone .sys .phs-bat{width:25px;height:12px}
.phone .sys .phs-net{font-family:var(--font);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:normal;line-height:1;color:#fff}
.phone .scr-top{display:flex;align-items:center;gap:9px;padding:4px 18px 12px;border:0;background:none}
.live{display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:#FF5C5C}
.phone .live{padding:4px 9px 4px 8px;border-radius:99px;background:rgba(255,69,58,.16);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:#FF6B61}
.dot{width:5px;height:5px;border-radius:99px;background:#FF5C5C}
@media (prefers-reduced-motion:no-preference){ .dot{animation:pulse 2s ease-in-out infinite} }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.phone .scr-top .pr{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:var(--track);color:#fff}
.phone .feed{display:flex;flex-direction:column;gap:10px;padding:2px 12px 6px}
/* the match itself, streaming at the top of the feed */
.phone .phs-tile{position:relative;overflow:hidden;aspect-ratio:16/8;border-radius:22px;background:#0B1830;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.phone .phs-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.phone .phs-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(6,8,24,.35) 0%,rgba(6,8,24,0) 38%,rgba(6,8,24,.15) 60%,rgba(6,8,24,.82) 100%)}
.phone .phs-tile .live{position:absolute;z-index:1;top:10px;left:10px;background:rgba(255,59,48,.92);color:#fff}
.phone .phs-tile .live .dot{background:#fff}
.phone .phs-tile .pr{position:absolute;z-index:1;left:14px;bottom:10px;font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:var(--track);color:#fff}
.phone .bf{display:flex;flex-direction:column;gap:11px;padding:14px 15px 15px;border-radius:24px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.07);color:#fff}
.bf .tg,.mock .tg{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:#42E3A4}
.bf .tg.s,.mock .tg.s{color:var(--acid)}
.phone .bf .q{margin-top:-4px;font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:var(--lh-mock);letter-spacing:var(--track);color:#fff}
.phone .opt{display:flex;flex-direction:column;gap:6px}
.phone .orow{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:rgba(235,235,245,.62)}
.phone .orow b{font-weight:var(--fw-bold);color:#fff;font-variant-numeric:tabular-nums}
.phone .bar{height:8px;border-radius:99px;background:rgba(120,120,128,.26);overflow:hidden}
/* Full width, cut back to --w with a rounded clip, so a new value never triggers layout. */
.phone .bar i{display:block;height:100%;width:100%;border-radius:99px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  clip-path:inset(0 calc(100% - var(--w,0%)) 0 0 round 99px);transition:clip-path .9s cubic-bezier(.32,.72,0,1)}
.bar i.a{background:var(--blue-lift)} .bar i.b{background:var(--mint)}
.phone .bar i.b{background:#34C77B}
.phone .chat{display:flex;align-items:flex-end;gap:8px;padding:0 4px}
.phone .chat .av{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:99px;background:linear-gradient(140deg,var(--blue-lift),#34C77B);font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:#fff}
.phone .chat p{max-width:82%;padding:8px 12px 9px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.1);font-size:var(--fs-xs);line-height:var(--lh-ui);color:#fff}
.phone .chat p b{display:block;margin-bottom:1px;font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:rgba(235,235,245,.6)}
.phone .cta-mini{align-self:flex-start;padding:8px 18px;border-radius:99px;background:var(--acid);color:var(--acid-ink);font-family:var(--font);font-size:var(--fs-sm);font-weight:var(--fw-medium);letter-spacing:normal;transition:transform .16s cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){ .phone .bar i{transition:none} }

/* ---------- social ---------- */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media (max-width:940px){ .four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .four{grid-template-columns:1fr} }
.f4{background:var(--panel);padding:28px 22px;display:flex;flex-direction:column;gap:9px;min-height:170px}
.f4 h3{font-size:var(--fs-h4);color:var(--mint)}
.f4 p{font-size:var(--fs-sm);color:var(--dim);margin-top:auto}
.kicker-line{margin-top:26px;font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--track);color:var(--ink)}
.kicker-line s{text-decoration:none;color:var(--blue);font-weight:var(--fw-bold)}

/* ---------- ownership ---------- */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media (max-width:900px){ .three{grid-template-columns:1fr} }
.th{background:var(--panel);padding:30px 24px;display:flex;flex-direction:column;gap:14px}
.th-n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);color:var(--dimmer)}
.th h3{font-size:var(--fs-h3)}
.th:nth-child(1) h3{color:var(--ink)}
.th:nth-child(2) h3{color:var(--blue)}
.th:nth-child(3) h3{color:var(--mint)}
.th-p{font-size:var(--fs-md);color:var(--dim)}
ul.spec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
ul.spec li{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--ink);padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
ul.spec li::before{content:"";width:5px;height:5px;flex:none;background:var(--mint);border-radius:99px}
.th-f{font-size:var(--fs-xs);color:var(--dimmer);margin-top:auto;line-height:1.55}
/* ---- animated QR companion sequence ---- */
.scanwrap{margin-top:56px;border:1px solid var(--line);background:var(--panel)}
.scanstage{
  display:grid;grid-template-columns:minmax(0,1fr) 150px 176px;gap:30px;align-items:center;
  padding:40px 34px;
}
@media (max-width:900px){ .scanstage{grid-template-columns:1fr;justify-items:center;gap:20px;padding:32px 22px} }
.ss-col{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.ss-lab{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}

/* TV */
.tv{width:100%;max-width:400px}
.tvscreen{
  position:relative;aspect-ratio:16/9;border:1px solid var(--line-2);border-radius:7px;overflow:hidden;
  background:radial-gradient(120% 130% at 30% 20%, #2A2F86 0%, #141A55 55%, #0E1236 100%);
}
.tvscreen::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,transparent,rgba(233,255,0,.10));
}
.tvlive{position:absolute;top:11px;left:12px;display:flex;align-items:center;gap:6px;
  font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);color:#FF6B6B;z-index:3}
.tvdot{width:5px;height:5px;border-radius:99px;background:#FF6B6B}
@media (prefers-reduced-motion:no-preference){ .tvdot{animation:blip 2s ease-in-out infinite} }
@keyframes blip{0%,100%{opacity:1}50%{opacity:.2}}

.qrbadge{
  position:absolute;right:14px;bottom:32px;width:82px;height:82px;z-index:4;
  background:#fff;border-radius:8px;padding:7px;
  opacity:0;transform:translateY(14px) scale(.9);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1.3), box-shadow .35s ease;
}
[data-s="1"] .qrbadge,[data-s="2"] .qrbadge,[data-s="3"] .qrbadge,[data-s="4"] .qrbadge{opacity:1;transform:none}
[data-s="2"] .qrbadge{box-shadow:0 0 0 2px var(--acid),0 0 34px rgba(222,255,46,.45)}
[data-s="3"] .qrbadge,[data-s="4"] .qrbadge{box-shadow:0 0 0 1px var(--mint),0 0 22px rgba(66,227,164,.3)}
.qrinner{width:100%;height:100%}
.qrinner svg{display:block;width:100%;height:100%}

.scanline{position:absolute;left:5px;right:5px;height:2px;background:var(--acid);border-radius:2px;
  box-shadow:0 0 12px var(--acid);opacity:0;top:6px}
@media (prefers-reduced-motion:no-preference){
  [data-s="2"] .scanline{opacity:1;animation:sweep 1.1s ease-in-out}
}
@keyframes sweep{0%{top:6px}50%{top:70px}100%{top:6px}}

.qlock{position:absolute;width:13px;height:13px;border:2px solid var(--acid);opacity:0;transition:opacity .3s ease,transform .3s ease;transform:scale(1.5)}
.qlock.lt{left:-5px;top:-5px;border-right:0;border-bottom:0}
.qlock.rt{right:-5px;top:-5px;border-left:0;border-bottom:0}
.qlock.lb{left:-5px;bottom:-5px;border-right:0;border-top:0}
.qlock.rb{right:-5px;bottom:-5px;border-left:0;border-top:0}
[data-s="2"] .qlock,[data-s="3"] .qlock{opacity:1;transform:scale(1)}

.tvcap{position:absolute;left:12px;bottom:12px;z-index:3;font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:#fff;background:rgba(14,16,48,.7);
  padding:5px 9px;border-radius:3px;border:1px solid var(--line-2)}
.tvfoot{height:7px;width:38%;margin:0 auto;background:var(--line-2);border-radius:0 0 5px 5px}

/* path */
.ss-path{position:relative;height:60px;width:100%;display:flex;align-items:center;justify-content:center}
.dash{position:absolute;left:0;right:0;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
.pulse{position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4.5px;border-radius:99px;
  background:var(--acid);box-shadow:0 0 16px var(--acid);opacity:0}
@media (prefers-reduced-motion:no-preference){
  [data-s="3"] .pulse{animation:travel .85s cubic-bezier(.5,0,.3,1) forwards}
}
@keyframes travel{0%{opacity:1;left:0}85%{opacity:1}100%{opacity:0;left:calc(100% - 9px)}}
.pathlab{position:absolute;top:calc(50% + 12px);font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer);white-space:nowrap}
@media (max-width:900px){
  .ss-path{height:64px}
  .dash{left:50%;right:auto;top:0;bottom:0;height:auto;width:1px;
    background:repeating-linear-gradient(180deg,var(--line-2) 0 6px,transparent 6px 12px)}
  .pulse{left:50%;margin-left:-4.5px;top:0}
  @keyframes travel{0%{opacity:1;top:0}85%{opacity:1}100%{opacity:0;top:calc(100% - 9px)}}
  .pathlab{position:static;transform:translateX(38px)}
}

/* mini phone */
.miniphone{width:158px;border:1px solid var(--line-2);border-radius:19px;background:#0E1030;padding:8px 8px 11px;
  transition:box-shadow .5s ease,border-color .5s ease}
[data-s="3"] .miniphone,[data-s="4"] .miniphone{border-color:#4A3CFF;box-shadow:0 0 44px -8px rgba(61,44,255,.75)}
.mp-notch{display:block;width:44px;height:4px;border-radius:99px;background:var(--line-2);margin:1px auto 8px;transition:background .5s}
[data-s="3"] .mp-notch,[data-s="4"] .mp-notch{background:linear-gradient(90deg,var(--blue),var(--mint))}
.mp-screen{background:#161A3E;border-radius:12px;border:1px solid #242A56;padding:9px;display:flex;flex-direction:column;gap:6px;min-height:150px;
  transition:background .5s ease}
[data-s="3"] .mp-screen,[data-s="4"] .mp-screen{background:#1A1E44}
.mp-head{display:flex;align-items:center;gap:6px;font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-xs);letter-spacing:-.03em;
  color:var(--dimmer);transition:color .45s ease}
[data-s="3"] .mp-head,[data-s="4"] .mp-head{color:#fff}
.mp-dot{width:6px;height:6px;border-radius:2px;background:var(--line-2);transition:background .45s}
[data-s="3"] .mp-dot,[data-s="4"] .mp-dot{background:var(--acid)}
.mp-b{background:#1A1E44;border:1px solid #2A3060;border-radius:8px;padding:8px 9px;display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(9px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.9,.3,1.25)}
.mp-b span{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:-.01em;color:#fff}
.mp-b i{display:block;height:4px;border-radius:99px;background:var(--blue-lift);width:64%}
.mp-b i.acid{background:var(--acid);width:46%}
.mp-b i.mint{background:var(--mint);width:78%}
[data-s="4"] .mp-b{opacity:1;transform:none}
[data-s="4"] .b1{transition-delay:.06s}
[data-s="4"] .b2{transition-delay:.26s}
[data-s="4"] .b3{transition-delay:.46s}

/* steps */
.ss-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media (max-width:700px){ .ss-steps{grid-template-columns:repeat(2,1fr)} }
.ss-steps span{background:var(--panel);padding:15px 16px;font-family:var(--font);font-size:var(--fs-xs);font-weight:var(--fw-medium);
  letter-spacing:.08em;color:var(--dimmer);display:flex;gap:9px;align-items:baseline;transition:color .3s ease,background .3s ease}
.ss-steps span b{color:var(--line-2);font-weight:var(--fw-medium);transition:color .3s ease}
.ss-steps span.on{color:var(--ink);background:var(--panel-2)}
.ss-steps span.on b{color:var(--blue)}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:1100px){ .lanes{grid-template-columns:1fr} }
.ln{background:var(--panel-2);padding:14px 15px;display:flex;flex-direction:column;gap:5px}
.ln-t{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--mint)}
.ln p{font-size:var(--fs-xs);color:var(--dim);line-height:var(--lh-body)}

.surf{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}
@media (max-width:900px){ .surf{grid-template-columns:1fr} }
.sf{background:var(--panel-2);padding:24px 24px;display:flex;flex-direction:column;gap:9px}
.sf-n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.sf:first-child .sf-n{color:var(--blue)}
.sf h4{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-title);letter-spacing:-.035em;margin:0;line-height:1}
.sf p{font-size:var(--fs-sm);color:var(--dim);flex:1}
.sf-t{font-family:var(--font);font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:.1em;color:var(--mint);border-top:1px solid var(--line);padding-top:11px}

/* ---------- inventory ---------- */
.inv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media (max-width:900px){ .inv{grid-template-columns:1fr} }
.ic{background:var(--panel);padding:26px 22px;display:flex;flex-direction:column;gap:16px}
.ic-h{display:flex;flex-direction:column;gap:4px}
.ic-t{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-title);letter-spacing:-.04em;line-height:.95}
.ic-s{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.ic:nth-child(2) .ic-t{color:var(--blue)}
.ic:nth-child(3) .ic-t{color:var(--mint)}
.ic-p{font-size:var(--fs-xs);color:var(--dim);margin-top:auto}
.mock{color:#fff;background:#1A1E44;border:1px solid #2A3060;border-radius:11px;padding:13px 14px;display:flex;flex-direction:column;gap:9px}
.mock.spon{background:linear-gradient(140deg,#242A56,#2A3060);border-color:#3A4180}
.mock .bar i.c{background:var(--acid)}
.brandbar{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);color:rgba(255,255,255,.6);border:1px dashed rgba(255,255,255,.3);border-radius:4px;padding:8px;text-align:center}
.shoprow{display:flex;gap:10px;align-items:center}
.thumb{width:38px;height:38px;border-radius:7px;flex:none;background:linear-gradient(140deg,var(--blue),var(--mint))}
.shopcopy{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:#A9AED0;line-height:1.45}
.shopcopy b{color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-sm)}

.funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-top:0;margin-top:0}
@media (max-width:860px){ .funnel{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .funnel{grid-template-columns:1fr} }
.fn{background:var(--panel);padding:20px 18px;display:flex;flex-direction:column;gap:5px}
.fn b{font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-base);letter-spacing:-.03em}
.fn span{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.fn.last{background:var(--panel-2)}
.fn.last b{color:var(--blue)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }
.st{background:var(--panel);padding:28px 22px;display:flex;flex-direction:column;gap:10px;min-height:180px}
.st .n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);color:var(--dimmer)}
.st h3{font-size:var(--fs-h4)}
.st p{font-size:var(--fs-sm);color:var(--dim);margin-top:auto}
.st.key{background:var(--panel-2)}
.st.key h3{color:var(--blue)} .st.key .n{color:var(--blue)}

/* ---------- languages ---------- */
.langs{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1px;background:var(--line);
  border:1px solid var(--line);border-top:0}
@media (max-width:900px){ .langs{grid-template-columns:1fr} }
.lg-l{background:var(--panel);padding:30px 24px;display:flex;flex-direction:column;gap:13px}
.lg-n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.lg-l h3{font-size:var(--fs-h3)}
.lg-l p{font-size:var(--fs-md);color:var(--dim);max-width:52ch}
.lg-x{color:var(--mint)!important;font-size:var(--fs-sm)!important}
.lg-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.lg-chips span{font-family:var(--font);font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:.08em;
  border:1px solid var(--line-2);color:var(--dim);padding:5px 10px;border-radius:2px}
.lg-chips span:last-child{border-color:var(--blue);color:var(--blue)}
.lg-r{background:var(--panel-2);padding:24px 22px;display:flex;flex-direction:column;gap:9px;justify-content:center}
.lgc{color:#fff;background:#1A1E44;border:1px solid #2A3060;border-radius:9px;padding:12px 13px;display:flex;flex-direction:column;gap:6px}
.lgc-t{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:#B9B2FF}
.lgc p{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:-.01em;line-height:1.3}

/* ---------- reclaim: flow diagram and scoreboard ---------- */
.reclaim{--rc-ground:#141A55;--rc-line:rgba(255,255,255,.12);--rc-soft:rgba(255,255,255,.66);
  margin-top:48px;background:var(--rc-ground);color:#fff;border:1px solid var(--rc-line);border-radius:20px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(10,12,50,.55)}
.rc-bar{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--rc-line)}
.rc-tabs{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--rc-line)}
/* A full width layer cut to the active tab with clip-path (--x and --w set by the page script), so it never animates layout. */
.rc-thumb{position:absolute;top:4px;bottom:4px;left:0;right:0;border-radius:999px;background:var(--acid);
  clip-path:inset(0 calc(100% - var(--x,0px) - var(--w,0px)) 0 var(--x,0px) round 999px);
  transition:clip-path .42s cubic-bezier(.23,1,.32,1)}
.rc-t{position:relative;font-family:var(--font);font-size:var(--fs-md);font-weight:var(--fw-medium);line-height:var(--lh-ui);letter-spacing:normal;white-space:nowrap;
  background:transparent;color:var(--rc-soft);border:0;border-radius:999px;padding:9px 18px;min-height:40px;cursor:pointer;transition:color .3s ease}
@media (hover:hover) and (pointer:fine){ .rc-t:not(.on):hover{color:#fff} }
.rc-t.on{color:var(--acid-ink)}
.rc-t:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.rc-cap{margin:0;font-size:var(--fs-md);font-weight:var(--fw-medium);line-height:var(--lh-ui);color:#fff;max-width:52ch;text-wrap:balance}

.rc-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}
@media (max-width:900px){ .rc-body{grid-template-columns:1fr} }

.rc-stage{position:relative;min-height:380px;overflow:hidden;
  background:radial-gradient(60% 70% at 12% 50%,rgba(74,65,255,.28),transparent 70%)}
#rcCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.rc-hub{position:absolute;left:6%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;
  padding:16px 20px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease}
.rc-hub b{font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-title);letter-spacing:var(--track);line-height:var(--lh-mock);color:#fff;transition:color .25s ease}
.rc-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--rc-soft)}
.rc-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF5A5A;box-shadow:0 0 0 0 rgba(255,90,90,.6)}
@media (prefers-reduced-motion:no-preference){ .rc-live::before{animation:rc-pulse 1.8s ease-out infinite} }
@keyframes rc-pulse{to{box-shadow:0 0 0 8px rgba(255,90,90,0)}}

.rc-p{position:absolute;left:calc(94% - var(--rc-axis,84px));transform:translate(-50%,-50%);white-space:nowrap;display:flex;align-items:baseline;justify-content:center;gap:10px;
  width:var(--rc-pw,156px);
  padding:9px 14px;border-radius:999px;background:var(--rc-ground);border:1px solid rgba(255,255,255,.24);
  transition:opacity .5s ease,border-color .5s ease,transform .6s cubic-bezier(.23,1,.32,1)}
.rc-p:nth-of-type(2){top:10%} .rc-p:nth-of-type(3){top:26%} .rc-p:nth-of-type(4){top:42%}
.rc-p:nth-of-type(5){top:58%} .rc-p:nth-of-type(6){top:74%} .rc-p:nth-of-type(7){top:90%}
.rc-p b{font-family:var(--font);font-weight:var(--fw-medium);font-size:var(--fs-xs);letter-spacing:normal;color:#fff}
.rc-p span{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--rc-soft);font-variant-numeric:tabular-nums}
.rc-p.rc-own{border-style:dashed}

.rc-stage[data-m="1"] .rc-hub{border-color:var(--acid);background:rgba(238,255,0,.1);box-shadow:0 0 0 6px rgba(238,255,0,.06)}
.rc-stage[data-m="1"] .rc-hub b{color:var(--acid)}
.rc-stage[data-m="1"] .rc-live::before{background:var(--acid);animation:none}
.rc-stage[data-m="1"] .rc-p{border-color:rgba(238,255,0,.4)}
.rc-stage[data-m="1"] .rc-p.rc-own{opacity:0}
/* The Your app pill drops out, so the other five slide down to re-centre on the hub (8% of the stage height each,
   measured into --rc-h by the page script, because a translate percentage is the pill's own height). */
.rc-stage[data-m="1"] .rc-p:not(.rc-own){transform:translate(-50%,calc(-50% + var(--rc-h,380px)*.08))}

.rc-board{list-style:none;margin:0;padding:0;border-left:1px solid var(--rc-line);display:flex;flex-direction:column}
@media (max-width:900px){ .rc-board{border-left:0;border-top:1px solid var(--rc-line);display:grid;grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .rc-board{grid-template-columns:1fr} }
.rc-row{flex:1;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:8px 16px;padding:18px 24px;
  border-bottom:1px solid var(--rc-line);transition:background-color .5s ease}
.rc-row:last-child{border-bottom:0}
@media (max-width:900px){ .rc-row:nth-child(odd){border-right:1px solid var(--rc-line)} .rc-row:nth-last-child(2){border-bottom:0} }
@media (max-width:520px){ .rc-row:nth-child(odd){border-right:0} .rc-row:nth-last-child(2){border-bottom:1px solid var(--rc-line)} }
.rc-n{font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-stat-sm);letter-spacing:var(--track-stat);line-height:var(--lh-stat);
  color:#fff;font-variant-numeric:tabular-nums;transition:color .25s ease}
.rc-l{font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:var(--lh-ui);color:var(--rc-soft)}
.rc-l u{display:block;text-decoration:none;line-height:var(--lh-body);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:#fff;margin-bottom:2px}
.rc-bar-t{grid-column:1 / -1;display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.rc-bar-t i{display:block;height:100%;width:100%;border-radius:inherit;background:#A9A4FF;
  transform-origin:left;transform:scaleX(var(--rc-v));transition:transform .9s cubic-bezier(.23,1,.32,1),background-color .5s ease}
/* Scroll reveal (data-jlm="bars"): the bars grow from zero one after another. Gated on html.jlm so they sit full
   without JS; the delay only touches transform, so the tab switch still recolours at once. */
html.jlm .rc-board[data-jlm="bars"]:not(.jlm-in) .rc-bar-t i{transform:scaleX(0)}
.rc-board.jlm-in .rc-bar-t i{transition-delay:calc(var(--jlm-i,0) * 80ms),0s}
.rc-s{grid-column:1 / -1;display:grid;font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:normal}
.rc-s span{grid-area:1 / 1;transition:opacity .4s ease,transform .4s cubic-bezier(.23,1,.32,1)}
.rc-lost{color:#FF9C9C}
.rc-won{color:var(--acid);opacity:0;transform:translateY(6px)}
.rc-row.rc-own .rc-n,.rc-row.rc-own .rc-l u{color:var(--acid)}
.rc-row.rc-own .rc-bar-t i{background:var(--acid)}
.rc-row.rc-own .rc-lost{color:var(--rc-soft)}

.reclaim[data-m="1"] .rc-row{background:rgba(238,255,0,.04)}
.reclaim[data-m="1"] .rc-n{color:var(--acid)}
.reclaim[data-m="1"] .rc-bar-t i{background:var(--acid)}
.reclaim[data-m="1"] .rc-lost{opacity:0;transform:translateY(-6px)}
.reclaim[data-m="1"] .rc-won{opacity:1;transform:none}

/* The rule spans the card; the right padding holds the note itself to the reading measure. Its text is set by script. */
.rc-note{margin:0;padding:14px max(22px,calc(100% - 22px - var(--measure))) 14px 22px;border-top:1px solid var(--rc-line);font-size:var(--fs-sm);font-weight:var(--fw-light);line-height:var(--lh-body);color:rgba(255,255,255,.8)}

@media (max-width:720px){
  .reclaim{border-radius:14px}
  .rc-bar{padding:14px}
  .rc-stage{min-height:300px}
  .rc-hub{left:4%;padding:12px 14px;border-radius:10px}
  .rc-hub b{font-size:var(--fs-base)}
  .rc-p{left:calc(96% - var(--rc-axis,72px));padding:7px 11px;gap:7px;width:var(--rc-pw,128px)}
  .rc-row{padding:16px}
  .rc-note{padding:12px max(14px,calc(100% - 14px - var(--measure))) 12px 14px}
}
@media (prefers-reduced-motion:reduce){
  .rc-thumb,.rc-bar-t i,.rc-s span{transition:none}
}

/* ---------- use cases ---------- */
.uc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media (max-width:980px){ .uc{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .uc{grid-template-columns:1fr} }
.ucard{background:var(--panel);padding:26px 22px;display:flex;flex-direction:column;gap:12px}
.uc-n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--blue-lift)}
.ucard h4{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-title);letter-spacing:-.035em;margin:0;line-height:1.05}
ul.ucl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
ul.ucl li{font-size:var(--fs-sm);color:var(--dim);padding:9px 0;border-top:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
ul.ucl li::before{content:"";width:5px;height:5px;flex:none;background:var(--mint);border-radius:99px;transform:translateY(-1px)}
.ucard.venue .uc-n{color:var(--blue)}

/* ---------- data & analytics ---------- */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media (max-width:900px){ .ladder{grid-template-columns:1fr} }
.ld{background:var(--panel);padding:26px 22px;display:flex;flex-direction:column;gap:9px}
.ld-n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.ld h4{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-title);letter-spacing:-.035em;margin:0;line-height:1.02}
.ld p{font-size:var(--fs-sm);color:var(--dim)}
.ld.key{background:var(--panel-2)}
.ld.key .ld-n{color:var(--blue)} .ld.key h4{color:var(--blue)}

.split2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}
@media (max-width:760px){ .split2{grid-template-columns:1fr} }
.sp{background:var(--panel-2);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.sp-n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--blue-lift)}
.sp-n.mint{color:var(--mint)}
.sp h4{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-base);letter-spacing:-.03em;margin:0}
ul.dl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
ul.dl li{font-size:var(--fs-xs);color:var(--dim);padding:9px 0;border-top:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
ul.dl li::before{content:"";width:5px;height:5px;flex:none;background:var(--blue-lift);border-radius:99px;transform:translateY(-1px)}
ul.dl.mint li::before{background:var(--mint)}
ul.dl.sm li{font-size:var(--fs-xs);font-family:var(--font);letter-spacing:.02em;color:var(--dim)}
ul.dl.sm li::before{background:var(--dimmer);border-radius:0}

.horizons{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}
@media (max-width:900px){ .horizons{grid-template-columns:1fr} }
.hz{background:var(--panel);padding:24px 22px;display:flex;flex-direction:column;gap:9px}
.hz-n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.hz h4{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-base);letter-spacing:-.03em;margin:0}
.hz.key{background:var(--panel-2)}
.hz.key .hz-n{color:var(--mint)} .hz.key h4{color:var(--mint)}

.genre{border:1px solid var(--line);border-top:0;background:var(--panel);padding:30px 24px;display:flex;flex-direction:column;gap:20px}
.genre-h{display:flex;flex-direction:column;gap:9px;max-width:58ch}
.genre-h h3{font-size:var(--fs-h4)}
.genre-h p{font-size:var(--fs-md);color:var(--dim)}
.gbars{display:flex;flex-direction:column;gap:9px}
.gb{display:grid;grid-template-columns:210px minmax(0,1fr) 46px;gap:14px;align-items:center}
@media (max-width:700px){ .gb{grid-template-columns:1fr 44px;gap:6px 12px} .gb .gt{grid-column:1 / 2} .gb .gl{grid-column:1 / -1} }
.gl{font-size:var(--fs-xs);color:var(--dim)}
.gt{display:block;height:12px;background:#DEE1F0;border-radius:2px;overflow:hidden}
.gt i{display:block;height:100%;background:var(--blue);border-radius:2px}
.gt i.k2{background:var(--blue-lift)} .gt i.k3{background:var(--mint)} .gt i.k4{background:var(--dimmer)}
.gb b{font-family:var(--font);font-size:var(--fs-xs);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.gnote{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.05em;color:var(--dimmer);line-height:1.7}

.ld-y{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.1em;color:var(--dimmer);
  border-top:1px solid var(--line);padding-top:11px;margin-top:auto}
.ld-y.acid{color:var(--blue)}

/* ---------- cross-programme ---------- */
.cross{border:1px solid var(--line);border-top:0;background:var(--panel);padding:30px 24px;
  display:flex;flex-direction:column;gap:22px}
.cx-h{display:flex;flex-direction:column;gap:10px;max-width:62ch}
.cx-n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.cx-h h3{font-size:var(--fs-h4)}
.cx-h p{font-size:var(--fs-md);color:var(--dim)}
.cx-week{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){ .cx-week{grid-template-columns:1fr} }
.cx-d{background:var(--panel-2);padding:16px 15px;display:flex;flex-direction:column;gap:6px}
.cx-d.off{background:var(--panel);opacity:.5}
.cx-day{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--blue)}
.cx-d.off .cx-day{color:var(--dimmer)}
.cx-d b{font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-md);letter-spacing:-.025em}
.cx-act{font-size:var(--fs-xs);color:var(--dim);line-height:1.45}
.cx-out{border:1px solid var(--mint);background:rgba(66,227,164,.05);padding:20px 20px;display:flex;flex-direction:column;gap:12px}
.cx-out .cx-n{color:var(--mint)}
.cx-tags{display:flex;flex-wrap:wrap;gap:6px}
.cx-tags span{font-family:var(--font);font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:.04em;background:var(--panel-2);
  border:1px solid var(--line-2);color:var(--ink);padding:6px 11px;border-radius:99px}
.cx-f{font-size:var(--fs-xs);color:var(--dim);max-width:62ch}

/* ---------- animated pipeline ---------- */
.pipewrap{margin-top:44px}
.pipe-modes{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.pipe-modes button{
  font-family:var(--font);font-size:var(--fs-md);font-weight:var(--fw-medium);line-height:var(--lh-ui);letter-spacing:normal;text-transform:none;
  background:transparent;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.42);border-radius:2px;
  padding:9px 15px;cursor:pointer;transition:color .16s ease,border-color .16s ease,background-color .16s ease;
}
@media (hover:hover) and (pointer:fine){ .pipe-modes button:hover{color:#fff;border-color:#fff} }
.pipe-modes button.on{background:var(--acid);border-color:var(--acid);color:var(--acid-ink)}
.pipe-modes button:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

.pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:1040px){ .pipe{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .pipe{grid-template-columns:minmax(0,1fr)} }
.pn{background:var(--panel);padding:24px 20px;display:flex;flex-direction:column;gap:12px;min-height:268px}
.pn-n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.pn h4{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-title);letter-spacing:var(--track);margin:0;line-height:var(--lh-title)}
.pn-f{font-family:var(--font);font-size:var(--fs-sm);letter-spacing:normal;color:var(--dimmer);margin-top:auto;line-height:var(--lh-body)}

/* 01 source */
.wave{display:none;align-items:flex-end;gap:2px;height:26px}
[data-mode="audio"] .wave{display:flex}
.wave i{flex:1;background:var(--blue-lift);border-radius:1px;height:100%;opacity:.75;transform:scaleY(.18);transform-origin:bottom;will-change:transform}
@media (prefers-reduced-motion:no-preference){ .wave i{animation:wv .9s ease-in-out infinite alternate} }
@keyframes wv{from{transform:scaleY(.14)}to{transform:scaleY(1)}}
.lines{display:flex;flex-direction:column;gap:7px}
/* The rows and chips start hidden only when the motion script runs; the markup carries the finished state, so the
   cards read without JavaScript. */
.ln-r{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;
  transition:opacity .35s ease,transform .35s ease}
html.jlm .ln-r:not(.on){opacity:0;transform:translateY(6px)}
.ln-r b{font-family:var(--font);font-size:var(--fs-2xs);color:var(--dimmer);font-weight:var(--fw-medium);padding-top:2px}
.ln-r span{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--dim);line-height:var(--lh-ui)}
.ln-r.on:last-child span{color:var(--ink)}

/* 02 draft */
.draft{color:#fff;background:#1A1E44;border:1px solid #2A3060;border-radius:9px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:104px;
  opacity:.62;transition:opacity .4s ease,border-color .4s ease}
[data-p="2"] .draft,[data-p="3"] .draft,[data-p="4"] .draft{opacity:1;border-color:#3A4180}
.dc-tag{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:#B9B2FF}
.dc-q{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:var(--lh-mock);letter-spacing:var(--track);min-height:34px}
.dc-q::after{content:"▍";color:var(--acid);opacity:0}
[data-p="2"] .dc-q::after{opacity:1}
.dc-opts{display:flex;flex-wrap:wrap;gap:5px}
.dc-opts span{font-family:var(--font);font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:normal;border:1px solid rgba(255,255,255,.32);
  color:rgba(255,255,255,.88);padding:4px 8px;border-radius:99px;
  transition:opacity .3s ease,transform .3s ease}
html.jlm .dc-opts span:not(.on){opacity:0;transform:translateY(4px)}

/* 03 approve */
.review{color:#fff;background:#1A1E44;border:1px solid #2A3060;border-radius:9px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:104px;
  opacity:.62;transition:opacity .4s ease,border-color .4s ease}
[data-p="3"] .review,[data-p="4"] .review{opacity:1;border-color:#3A4180}
.rv-tag{display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:#B9B2FF;transition:color .3s ease}
.rv-dot{width:5px;height:5px;border-radius:99px;background:currentColor;opacity:.7}
.rv-done{display:none}
[data-p="3"] .rv-tag,[data-p="4"] .rv-tag{color:#6FE0B0}
[data-p="3"] .rv-wait,[data-p="4"] .rv-wait{display:none}
[data-p="3"] .rv-done,[data-p="4"] .rv-done{display:inline}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.act{display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--font);font-size:var(--fs-sm);font-weight:var(--fw-medium);letter-spacing:normal;text-transform:none;
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.72);padding:8px 10px;border-radius:6px;
  transition:opacity .3s ease,background-color .3s ease,border-color .3s ease,color .3s ease}
.act svg{width:12px;height:12px;flex:none;stroke-width:2.5}
.act.ok{padding:10px;border-color:rgba(111,224,176,.55);color:#6FE0B0}
.act.ok svg{width:13px;height:13px;stroke-width:3}
[data-p="3"] .act.ok,[data-p="4"] .act.ok{background:var(--mint);border-color:var(--mint);color:#fff}
[data-p="3"] .acts .act,[data-p="4"] .acts .act{opacity:.45}
@media (prefers-reduced-motion:no-preference){ [data-p="3"] .act.ok{animation:tap .5s ease} }
@keyframes tap{0%{transform:scale(1)}40%{transform:scale(.96)}100%{transform:scale(1)}}

/* 04 live */
.livecard{color:#fff;background:#1A1E44;border:1px solid #2A3060;border-radius:9px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:104px;
  opacity:.55;transform:translateY(8px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1.25),border-color .4s}
[data-p="4"] .livecard{opacity:1;transform:none;border-color:#3A4180}
.lc-tag{display:flex;align-items:center;gap:5px;font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:#FF8A8A}
.lc-dot{width:5px;height:5px;border-radius:99px;background:#FF6B6B}
@media (prefers-reduced-motion:no-preference){ [data-p="4"] .lc-dot{animation:blip 1.6s ease-in-out infinite} }
.lc-q{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:var(--lh-mock);letter-spacing:var(--track)}
.lc-row{display:flex;flex-direction:column;gap:3px;margin-bottom:5px}
.lc-top{display:flex;justify-content:space-between;line-height:var(--lh-ui);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:#A9AED0}
.lc-top b{color:#fff;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.lc-bar{height:5px;border-radius:99px;background:#333A70;overflow:hidden}
.lc-bar i{display:block;height:100%;width:100%;border-radius:99px;background:var(--blue-lift);
  clip-path:inset(0 calc(100% - var(--w,0%)) 0 0 round 99px);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1)}
.lc-bar i.k2{background:var(--acid)} .lc-bar i.k3{background:var(--mint)}
.lc-count{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:normal;line-height:var(--lh-ui);color:#8188AC}

/* rail */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:14px}
.rail span{display:flex;flex-direction:column;gap:12px}
.rail i{height:2px;background:var(--line-2);transition:background .3s ease}
.rail i.on{background:var(--acid)}
.rail b{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer);transition:color .3s ease}
.rail i.on + b{color:var(--ink)}

/* ---------- who does the work ---------- */
.whodoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(32px,3.6vw,56px)}
@media (max-width:900px){ .whodoes{grid-template-columns:minmax(0,1fr)} }
.wd{background:var(--panel-2);padding:clamp(24px,2.4vw,36px) clamp(20px,2.2vw,32px);display:flex;flex-direction:column;gap:12px}
.wd h4 + p{margin-top:2px}
.wd-n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.wd h4{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-h4);letter-spacing:var(--track);margin:0;line-height:var(--lh-h4)}
.wd p{font-size:var(--fs-md);color:var(--dim);max-width:var(--measure)}
.wd.key .wd-n{color:var(--blue)}
.wd.key h4{color:var(--blue)}

/* ---------- reel ---------- */
.reel{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media (max-width:820px){ .reel{grid-template-columns:1fr} }
.rp{background:var(--panel);padding:26px 22px;display:flex;flex-direction:column;gap:9px;min-height:150px}
.rp h3{font-size:var(--fs-title)}
.rp p{font-size:var(--fs-sm);color:var(--dim);margin-top:auto}
.rp .n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);color:var(--blue-lift)}

/* ---------- doors ---------- */
.doors{display:flex;flex-direction:column;margin-top:56px;border-top:1px solid var(--line)}
.door{
  display:grid;grid-template-columns:minmax(0,1fr) 16ch 18ch 44px;gap:clamp(20px,2.4vw,44px);align-items:center;
  padding:34px 4px;border-bottom:1px solid var(--line);transition:background-color .22s ease;
}
@media (max-width:820px){ .door{grid-template-columns:1fr;gap:12px;padding:26px 0} }
.door h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--track);max-width:none}
.door .who{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.door .ev{font-family:var(--font);font-size:var(--fs-md);color:var(--mint);line-height:var(--lh-body)}
.door .go{font-family:var(--font);font-size:var(--fs-base);line-height:1;color:var(--blue);justify-self:end}
@media (max-width:820px){ .door .go{justify-self:start} }

/* ---------- nots ---------- */
.nots{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media (max-width:880px){ .nots{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .nots{grid-template-columns:1fr} }
.nt{background:var(--panel);padding:24px 20px;display:flex;flex-direction:column;gap:7px}
.nt .k{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:#FF7A4D}
.nt h4{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-base);letter-spacing:-.03em;margin:0;line-height:1.05}
.nt p{font-size:var(--fs-xs);color:var(--dim)}

/* ---------- stages ---------- */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
@media (max-width:760px){ .stages{grid-template-columns:1fr} }
.sg{background:var(--panel);padding:30px 24px;display:flex;flex-direction:column;gap:10px}
.sg .n{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);color:var(--dimmer)}
.sg h3{font-size:var(--fs-h3)}
.sg p{font-size:var(--fs-sm);color:var(--dim)}
.sg.one{background:var(--panel-2)} .sg.one .n{color:var(--blue)} .sg.one h3{color:var(--blue)}

/* ---------- research capture ---------- */
.res{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:56px;align-items:start}
@media (max-width:960px){ .res{grid-template-columns:1fr;gap:38px} }
.res-l h2{font-size:var(--fs-h2);max-width:15ch;margin-top:14px}
.res-sub{color:var(--dim);font-size:var(--fs-base);max-width:46ch;margin-top:20px}
.res-sub b{color:var(--ink);font-weight:var(--fw-bold)}
.res-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px}
@media (max-width:820px){ .res-stats{grid-template-columns:repeat(2,1fr)} }
.res-stats > div{background:var(--panel);padding:20px 16px;display:flex;flex-direction:column;gap:5px}
.res-stats b{font-family:var(--font);font-weight:var(--fw-bold);font-size:var(--fs-stat-sm);letter-spacing:-.05em;line-height:.9;
  color:var(--blue);font-variant-numeric:tabular-nums}
.res-stats span{font-size:var(--fs-xs);color:var(--dim);line-height:1.35}
.res-method{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--dimmer);margin-top:16px;line-height:1.7}

.res-r{border:1px solid var(--line-2);background:var(--panel-2);padding:26px 24px}
.getform,.gf-done{display:flex;flex-direction:column;gap:15px}
.gf-h{font-family:var(--font);font-weight:var(--fw-light);font-size:var(--fs-title);letter-spacing:-.04em;line-height:1}
.gf-f{display:flex;flex-direction:column;gap:7px}
.gf-f > span{font-family:var(--font);font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--dimmer)}
.gf-f input,.gf-f select{
  font-family:var(--font);font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--ink);background:var(--void);
  border:1px solid var(--line-2);border-radius:2px;padding:12px 13px;width:100%;
}
.gf-f input::placeholder{color:var(--dimmer)}
.gf-f input:focus,.gf-f select:focus{outline:none;border-color:var(--blue)}
.gf-f select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.gf-check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);color:var(--dim);cursor:pointer;line-height:1.4}
.gf-check input{width:16px;height:16px;accent-color:var(--acid);margin-top:2px;flex:none}
.gf-btn{
  font-family:var(--font);font-weight:var(--fw-medium);font-size:var(--fs-md);background:var(--acid);color:var(--acid-ink);
  border:1px solid var(--acid);border-radius:2px;padding:14px 18px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .16s cubic-bezier(.23,1,.32,1);
}
@media (hover:hover) and (pointer:fine){ .gf-btn:hover{background:#F2FF5C;border-color:#F2FF5C} }
.gf-btn:active{transform:scale(.98)}
.gf-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.gf-fine{font-size:var(--fs-xs);color:var(--dimmer);line-height:1.55}
.gf-fine b{color:var(--dim);font-weight:var(--fw-medium)}
.gf-err{font-size:var(--fs-xs);color:#FF7A4D}
.gf-tick{width:40px;height:40px;border-radius:99px;background:var(--mint);color:var(--void);
  display:grid;place-items:center;font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.gf-done .btn{align-self:flex-start;margin-top:4px}

/* ---------- close ---------- */
.close-in{max-width:100%;margin:0 auto;padding:104px 4%;display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.close-in h2{font-size:var(--fs-h2);max-width:16ch;line-height:var(--lh-h2);color:var(--blue)}
.close-in p{color:var(--dim);font-size:var(--fs-lead);line-height:var(--lh-body);max-width:46ch}
.close-in .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.who-room{font-family:var(--font);font-size:var(--fs-sm);color:var(--dimmer);letter-spacing:normal;line-height:var(--lh-body);border-top:1px solid var(--line);padding-top:20px;margin-top:18px;max-width:var(--measure)}

footer{background:var(--acid)}
.method{font-family:var(--font);font-size:var(--fs-xs);color:#3A4008;line-height:1.8;letter-spacing:.03em;max-width:74ch}

/* ---------- page index ---------- */
.pgs{display:flex;flex-direction:column;margin-top:56px;border-top:1px solid var(--line)}
.pg{display:grid;grid-template-columns:46px clamp(150px,19vw,300px) minmax(0,1fr) 24px;
  gap:clamp(16px,1.8vw,32px);align-items:center;padding:24px 4px;
  border-bottom:1px solid var(--line);transition:background-color .22s ease}
@media (hover:hover) and (pointer:fine){ .pg:hover{background:var(--panel)} }
.pg > *{transition:transform .22s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){ .pg:hover > *{transform:translateX(16px)} }
@media (max-width:860px){
  .pg{grid-template-columns:46px minmax(0,1fr);gap:10px 14px;padding:22px 0}
  .pg h3{grid-column:2} .pg p{grid-column:2} .pg-go{display:none}
}
.pg-n{font-family:var(--font);
  font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);color:var(--dimmer);font-variant-numeric:tabular-nums}
.pg h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--track);margin:0}
.pg p{margin:0;font-size:var(--fs-base);line-height:var(--lh-body);color:var(--dim);max-width:var(--measure)}
.pg-go{font-family:var(--font);font-size:var(--fs-base);line-height:1;color:var(--blue);justify-self:end}
@media (hover:hover) and (pointer:fine){ .pg:hover h3{color:var(--blue)} }

/* ---------- section grounds: the live site's rhythm ----------
   Flips are scoped to each section's OWN heading block and direct copy only.
   Component internals keep their own palette: they sit on the ground as panels. */
#who{background:var(--void)}
#gap{background:var(--blue);border-bottom:0}
#how{background:var(--ink);border-bottom:0}
#promise{background:var(--ink);border-bottom:0}
#pages{background:var(--blue);border-bottom:0}
#book{background:var(--acid);border-bottom:0}

#gap > .sec > .head h2,
#how > .sec > .head h2,
#promise > .sec > .head h2{color:var(--acid)}
#gap > .sec > .head p,
#how > .sec > .head p,
#promise > .sec > .head p{color:rgba(255,255,255,.86)}
#gap .lbl,
#how > .sec > .head .lbl,
#promise > .sec > .head .lbl{color:rgba(255,255,255,.8)}
#gap > .sec > p,#how > .sec > p{color:rgba(255,255,255,.86)}
#gap > .sec > .ctas .btn,#how > .sec > .ctas .btn{color:var(--acid)}

#book > .sec .head h2,#book > .sec h2,#book > .sec h3{color:var(--ink)}
#book > .sec p,#book > .sec .lbl{color:rgba(33,46,33,.78)}
#book .btn{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ #book .btn:hover{background:var(--ink);color:var(--acid)} }

/* Second shared block (was inline after the nav) */
.jilgl{--blue:#3229E0;--ink:#212E21;--acid:#EEFF00;--cream:#F4F3E8;
  font-family:var(--font);
  position:relative;background:var(--blue);border-radius:0;overflow:hidden;margin-top:56px;
  min-height:clamp(300px,38vw,520px);display:flex;align-items:center;justify-content:center}
.jilgl canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the static frame: what every viewer sees before WebGL starts, and instead of it
   when WebGL is unavailable or motion is reduced. Never an empty box. */
.jilgl-fallback{position:relative;z-index:1;text-align:center;padding:clamp(28px,5vw,64px);
  transition:opacity .5s ease}
.jilgl.live .jilgl-fallback{opacity:0;pointer-events:none}
.jilgl-fallback b{display:block;font-weight:var(--fw-light);letter-spacing:var(--track);line-height:var(--lh-h2);
  font-size:var(--fs-h2);color:#fff}
.jilgl-fallback b strong{font-weight:var(--fw-bold);color:var(--acid)}
.jilgl-fallback span{display:block;margin-top:clamp(12px,1.4vw,20px);
  font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--track);color:rgba(255,255,255,.82)}
@media (prefers-reduced-motion:reduce){.jilgl.live .jilgl-fallback{opacity:1}}

/* ---------- the nation is voting ---------- */
#showcards{background:var(--blue);border-bottom:0}
.nv{padding:0 4% 104px}
.nv-p{background:var(--deep-2);border-radius:18px;padding:clamp(20px,2.4vw,36px) clamp(18px,2.6vw,40px) clamp(6px,.8vw,12px)}
.nv-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;
  padding-bottom:clamp(16px,1.8vw,26px);border-bottom:1px solid rgba(255,255,255,.14)}
.nv-hd h2{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-light);color:#fff}
.nv-tot,.nv-g{text-transform:uppercase}
.nv-tot{display:flex;align-items:center;gap:8px;font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);color:rgba(255,255,255,.72)}
.nv-tot b{font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
.nv-dot{width:6px;height:6px;border-radius:99px;background:#FF3B6B;flex:none}
@media (prefers-reduced-motion:no-preference){ .nv-dot{animation:nvPulse 1.6s ease-in-out infinite} }
@keyframes nvPulse{0%,100%{opacity:1}50%{opacity:.3}}

.nv-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;align-items:center;
  gap:14px clamp(20px,3vw,48px);padding:clamp(18px,1.9vw,26px) 0;
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.nv-r + .nv-r{border-top:1px solid rgba(255,255,255,.12)}
/* Rows and their bars wait for the page script's .in; gated on html.jlm so they show without JS. */
html.jlm .nv-r:not(.in){opacity:0;transform:translateY(10px)}
.nv-g{display:block;font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);color:rgba(255,255,255,.72)}
.nv-r h3{margin:8px 0 0;font-size:var(--fs-title);line-height:var(--lh-mock);font-weight:var(--fw-bold);color:#fff;max-width:22ch}

.nv-bar{position:relative;height:10px;clip-path:inset(0);
  transition:clip-path .9s cubic-bezier(.22,1,.36,1) .15s}
html.jlm .nv-r:not(.in) .nv-bar{clip-path:inset(0 100% 0 0)}
/* Each segment is a full width layer cut to its place with clip-path, so a new split never animates layout. --f is its
   share, --s the share of the segments before it (set in the markup and by the page script); the two 3px gaps come
   off the width first. */
.nv-bar i{position:absolute;inset:0;border-radius:2px;background:var(--c);--u:calc(100% - 6px);
  clip-path:inset(0 calc(100% - var(--u) * (var(--s) + var(--f)) / 100 - var(--g,0px)) 0 calc(var(--u) * var(--s) / 100 + var(--g,0px)) round 2px);
  transition:clip-path .8s cubic-bezier(.22,1,.36,1),background-color .3s ease}
.nv-bar i:nth-child(2){--g:3px} .nv-bar i:nth-child(3){--g:6px}
.nv-bar i:nth-child(1),.nv-k li:nth-child(1) .nv-o{--c:#fff}
.nv-bar i:nth-child(2),.nv-k li:nth-child(2) .nv-o{--c:rgba(255,255,255,.55)}
.nv-bar i:nth-child(3),.nv-k li:nth-child(3) .nv-o{--c:rgba(255,255,255,.32)}
.nv-bar i.mine,.nv-k .nv-o.mine{--c:var(--acid)}

.nv-k{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.nv-k li{display:flex}
.nv-o{appearance:none;background:none;border:1px solid transparent;border-radius:99px;margin:0 -1px;padding:0;
  display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:var(--lh-ui);
  color:rgba(255,255,255,.9);text-align:left;cursor:default;
  transition:border-color .2s ease,background-color .2s ease}
.nv-o::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c);flex:none}
.nv-o b{font-weight:var(--fw-bold);color:#fff;font-variant-numeric:tabular-nums}
.nv-r.pick .nv-k{gap:8px}
.nv-r.pick .nv-o{padding:8px 13px;min-height:36px;border-color:rgba(255,255,255,.35);cursor:pointer}
.nv-r.pick .nv-o.mine{border-color:var(--acid)}
@media (hover:hover) and (pointer:fine){ .nv-r.pick .nv-o:hover{background:rgba(255,255,255,.12)} }

.nv-a{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:120px}
.nv-n{font-size:var(--fs-xs);line-height:var(--lh-ui);font-weight:var(--fw-medium);color:rgba(255,255,255,.85);white-space:nowrap}
.nv-n b{font-weight:var(--fw-bold);color:#fff;font-variant-numeric:tabular-nums}
.nv-r.bump .nv-n b{animation:nvBump .6s ease}
@keyframes nvBump{0%{color:var(--acid)}100%{color:#fff}}
.nv-btn{appearance:none;border:0;border-radius:99px;min-height:40px;padding:10px 20px;cursor:pointer;
  font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);background:var(--acid);color:var(--acid-ink);
  transition:background-color .2s ease,color .2s ease,transform .12s cubic-bezier(.23,1,.32,1)}
.nv-btn:active{transform:scale(.97)}
.nv-r.voted .nv-btn,.nv-r.pick .nv-btn{background:rgba(255,255,255,.14);color:#fff}
@media (hover:hover) and (pointer:fine){
  .nv-btn:hover{background:#F4FF66}
  .nv-r.voted .nv-btn:hover,.nv-r.pick .nv-btn:hover{background:rgba(255,255,255,.22)}
}

@media (max-width:760px){
  .nv-r{grid-template-columns:1fr}
  .nv-r h3{max-width:none}
  .nv-a{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .nv-r{opacity:1;transform:none;transition:none}
  .nv-bar{clip-path:none;transition:none}
  .nv-r.bump .nv-n b{animation:none}
}

/* ---------- footer: blue panel inset on acid, as the live site does it ---------- */
.ft{background:var(--acid);padding:clamp(22px,2.6vw,40px) 4% clamp(26px,3vw,46px)}
.ft-card{background:var(--blue);border-radius:14px;
  padding:clamp(20px,2vw,30px) clamp(22px,2.4vw,38px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center;gap:clamp(16px,2.4vw,44px)}
.ft-logo img{display:block;height:30px;width:auto}
.ft-legal{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:rgba(255,255,255,.78);letter-spacing:normal}
.ft-legal a{color:rgba(255,255,255,.78);text-decoration:none}
@media (hover:hover) and (pointer:fine){ .ft-legal a:hover{color:#fff;text-decoration:underline} }
/* Phone and email in the H4 role, as the live site sets them. */
.ft-mail,.ft-tel{font-size:var(--fs-h4);font-weight:var(--fw-light);line-height:var(--lh-h4);color:#fff;white-space:nowrap;letter-spacing:var(--track)}
@media (hover:hover) and (pointer:fine){ .ft-mail:hover,.ft-tel:hover{color:var(--acid)} }
.ft-ig{color:#fff;display:flex;align-items:center}
@media (hover:hover) and (pointer:fine){ .ft-ig:hover{color:var(--acid)} }
@media(max-width:1080px){
  .ft-card{grid-template-columns:auto minmax(0,1fr);row-gap:18px}
  .ft-mail{grid-column:1/-1} .ft-tel{grid-column:1} .ft-ig{grid-column:2;justify-self:end}
}
@media(max-width:560px){
  .ft-card{grid-template-columns:1fr;text-align:left}
  .ft-ig{grid-column:1;justify-self:start}
  .ft-mail,.ft-tel{white-space:normal;overflow-wrap:anywhere;grid-column:1}
}

/* ---------- contrast corrections, verified against computed styles ---------- */
#how .kicker-line{color:#fff;margin-top:clamp(32px,3.6vw,52px)}
#how .rail i{background:rgba(255,255,255,.18)}
#how .rail i.on{background:var(--acid)}
#how .rail b{color:rgba(255,255,255,.55)}
#how .rail i.on + b{color:#fff}
#how .kicker-line s{color:var(--acid);text-decoration:none}
.hero .fine{color:rgba(255,255,255,.86)}
.chat .av{color:#fff;background:#3F4A8F}

/* ---------- the leak row answers the toggle ---------- */
.lk em{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-style:normal;margin-top:10px;font-size:var(--fs-sm);line-height:var(--lh-body);
  letter-spacing:normal;color:var(--ink);
  transition:opacity .35s cubic-bezier(.23,1,.32,1)}
/* Faded out until motion-site adds .with, with its room kept so nothing moves; gated on html.jlm so the lines show
   without JS. */
html.jlm .leak:not(.with) .lk em{opacity:0}
.lk span u{display:block;text-decoration:none;font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);
  text-transform:uppercase;margin-bottom:3px}
.leak .lk{transition:background .45s ease,opacity .45s ease}
.lk em i{font-style:normal;font-size:var(--fs-2xs);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:var(--fw-medium);background:var(--acid);color:var(--ink);padding:3px 7px;border-radius:2px}
.lk em.base{color:var(--dim)}
.leak-note{margin:14px 0 0;font-size:var(--fs-sm);line-height:var(--lh-body);color:rgba(255,255,255,.8);max-width:var(--measure)}

/* ---------- product features ---------- */
#features{background:var(--void)}

.pf{--pf-ease:cubic-bezier(.23,1,.32,1);--pf-move:cubic-bezier(.77,0,.175,1);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,18px);
  margin-top:clamp(30px,3.6vw,56px)}
@media(max-width:1080px){.pf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pf{grid-template-columns:1fr}}

/* Each card spans four shared rows (number, heading, demo, text), so the demos and the text line up across a row. */
.pf-c{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:clamp(20px,1.8vw,28px);display:flex;flex-direction:column;
  transition:opacity .55s var(--pf-ease),transform .55s var(--pf-ease),border-color .25s ease,box-shadow .25s ease}
/* Hidden until the page script adds .in; gated on html.jlm so the cards show without JS. */
html.jlm .pf-c:not(.in){opacity:0;transform:translateY(14px)}
@supports (grid-template-rows:subgrid){
  .pf-c{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
}
.pf-c.on{border-color:var(--blue);box-shadow:0 0 0 4px rgba(50,41,224,.10)}
.pf-k{font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);color:var(--dimmer);font-variant-numeric:tabular-nums}
.pf-c.on .pf-k{color:var(--blue)}
.pf-c h3{margin:10px 0 0;font-size:var(--fs-h4);line-height:var(--lh-h4);color:var(--ink);font-weight:var(--fw-light);
  letter-spacing:var(--track)}
.pf-c > p{margin:0;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--dim)}

.pf-demo{margin:clamp(18px,1.6vw,24px) 0;background:#12163A;border:1px solid #2A3060;border-radius:10px;
  padding:clamp(18px,1.5vw,22px);display:flex;flex-direction:column;min-height:176px}
.pf-q{font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;color:#B9B2FF;margin-bottom:16px}

/* 01 poll */
.pf-row{display:grid;grid-template-columns:minmax(0,1fr) 38px;grid-template-areas:"l v" "b b";
  gap:7px 8px;align-items:center}
.pf-row + .pf-row{margin-top:14px}
.pf-row span{grid-area:l;font-size:var(--fs-xs);line-height:var(--lh-ui);font-weight:var(--fw-medium);color:rgba(255,255,255,.88);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pf-row b{grid-area:v;font-size:var(--fs-xs);text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.pf-row i{grid-area:b;height:4px;border-radius:99px;background:rgba(255,255,255,.14);
  position:relative;overflow:hidden}
.pf-row i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:99px;
  background:rgba(255,255,255,.34);transform-origin:left;transition:background-color .45s ease}
.pf-c.on .pf-row i::after{background:rgba(255,255,255,.6)}
.pf-c.on .pf-row:first-of-type i::after{background:var(--acid)}

/* 02 leaderboard: rows are one fixed height, so the swap moves exactly one row */
.pf-lb{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:center;height:40px;
  font-size:var(--fs-xs);line-height:var(--lh-ui);font-weight:var(--fw-medium);color:rgba(255,255,255,.9);transition:transform .5s var(--pf-move)}
.pf-lb u{text-decoration:none;font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:#B9B2FF;text-align:center;font-variant-numeric:tabular-nums}
.pf-lb b{font-variant-numeric:tabular-nums;color:#fff}
.pf-c.on .pf-lb:nth-of-type(2){transform:translateY(-100%)}
.pf-c.on .pf-lb:nth-of-type(1){transform:translateY(100%)}
.pf-c.on .pf-lb:nth-of-type(2) u{color:var(--acid)}

/* 03 chat */
.pf-m{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start}
.pf-m + .pf-m{margin-top:12px}
.pf-m u{text-decoration:none;width:24px;height:24px;border-radius:99px;background:#2E3570;
  color:rgba(255,255,255,.7);font-size:var(--fs-2xs);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;
  transition:background-color .4s ease,color .4s ease}
.pf-m p{margin:0;font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:var(--lh-ui);color:rgba(255,255,255,.6);transition:color .4s ease}
.pf-m p b{display:block;font-size:var(--fs-2xs);color:#8F89D9;font-weight:var(--fw-bold);transition:color .4s ease}
.pf-c.on .pf-m u{background:#3F4A8F;color:#fff}
.pf-c.on .pf-m p{color:rgba(255,255,255,.92)}
.pf-c.on .pf-m p b{color:#B9B2FF}
.pf-c.on .pf-m.me u{background:var(--acid);color:var(--ink)}
.pf-c.on .pf-m:nth-of-type(2),.pf-c.on .pf-m:nth-of-type(2) *{transition-delay:.2s}
.pf-c.on .pf-m:nth-of-type(3),.pf-c.on .pf-m:nth-of-type(3) *{transition-delay:.4s}

/* 04 purchase */
.pf-buy{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center}
.pf-sw{width:40px;height:40px;border-radius:8px;
  background:linear-gradient(135deg,#4A41FF 0%,#2A1FE0 100%)}
.pf-buy b{display:block;font-size:var(--fs-xs);color:#fff;line-height:var(--lh-ui)}
.pf-buy em{font-style:normal;font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:#B9B2FF}
.pf-cta{align-self:flex-start;margin-top:auto;font-size:var(--fs-sm);letter-spacing:normal;
  text-transform:none;font-weight:var(--fw-medium);padding:7px 16px;border-radius:99px;
  border:1px solid rgba(238,255,0,.5);color:var(--acid);background:transparent;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .3s var(--pf-ease)}
.pf-c.on .pf-cta{background:var(--acid);border-color:var(--acid);color:var(--ink);transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  .pf-c{opacity:1;transform:none;transition:none}
  .pf-lb{transition:none}
}

/* ---------- demand readout ---------- */
.pf-why{margin-top:clamp(14px,1.4vw,20px);background:#12163A;border:1px solid #2A3060;
  border-radius:10px;padding:clamp(13px,1.2vw,18px) clamp(15px,1.4vw,22px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:10px clamp(14px,1.8vw,30px)}
.pf-why-l{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--acid);white-space:nowrap}
.pf-why-d{width:6px;height:6px;border-radius:99px;background:var(--acid);flex:none}
@media (prefers-reduced-motion:no-preference){ .pf-why-d{animation:pfPulse 1.6s ease-in-out infinite} }
@keyframes pfPulse{0%,100%{opacity:1}50%{opacity:.22}}
.pf-why p{margin:0;font-size:var(--fs-md);font-weight:var(--fw-medium);line-height:var(--lh-ui);color:rgba(255,255,255,.9);
  transition:opacity .3s ease}
.pf-why p.sw{opacity:0}
.pf-why-o{font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:var(--track-caps);text-transform:uppercase;
  color:rgba(255,255,255,.62);white-space:nowrap;border:1px solid rgba(255,255,255,.28);
  border-radius:300px;padding:5px 12px}
@media(max-width:820px){
  .pf-why{grid-template-columns:1fr}
  .pf-why-o{justify-self:start}
}
@media (prefers-reduced-motion:reduce){.pf-why p{transition:none}}

/* ---------- page index on blue ---------- */
.pgs-hd{margin-bottom:clamp(26px,3vw,44px)}
.pgs-hd h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--track);
  color:var(--acid)}
#pages .pgs{border-top:1px solid rgba(255,255,255,.24);margin-top:0}
#pages .pg{border-bottom:1px solid rgba(255,255,255,.24)}
@media (hover:hover) and (pointer:fine){ #pages .pg:hover{background:rgba(255,255,255,.07)} }
#pages .pg-n{color:rgba(255,255,255,.72)}
#pages .pg h3{color:#fff}
#pages .pg p{color:rgba(255,255,255,.86)}
#pages .pg-go{color:var(--acid)}
@media (hover:hover) and (pointer:fine){ #pages .pg:hover h3{color:var(--acid)} }
@media (hover:hover) and (pointer:fine){ #pages .pg:hover .pg-n{color:var(--acid)} }

/* ---------- phones: layout ---------- */
@media (max-width:820px){
  /* Audience labels are two short lines on desktop; on a phone the forced breaks left half the row empty. */
  .door .who br,.door .ev br{display:none}
}
@media (max-width:760px){
  /* The closing band and the question strip end on the same 70px phone rhythm as .sec. */
  .close-in{padding:70px 6%;gap:22px}
  .qs{padding-bottom:70px}
}
@media (max-width:620px){
  /* Three live questions make the point; all five ran to about 1,100px of scrolling. */
  .nv-r:nth-of-type(n+4){display:none}
  /* The genre line wraps on a phone; balanced, it never leaves one word alone. */
  .nv-g{text-wrap:balance}
  /* Real controls get a 40px tap height. */
  .pipe-modes button{min-height:40px;padding:10px 14px}
  .rc-t{min-height:40px;padding:10px 14px}
  /* Footer links were about 15px tall and packed together; each now has a 44px tap area. */
  /* Negative margins keep the icon's tap area from showing as extra space above and below it. */
  .ft-legal{line-height:1.4}
  .ft-legal a{display:inline-block;padding:12px 3px}
  .ft-ig{min-width:44px;min-height:44px;margin:-12px 0 -12px -12px;justify-content:center}
}
@media (max-width:600px){
  /* The four-step progress rail only makes sense beside four columns; stacked, it read as a stray bar. */
  .rail{display:none}
}

/* Every section draws a grey bottom border; above the acid footer it showed as a stray line across the yellow. */
section:has(+ footer){border-bottom:0}

/* ---------- phones: gutters and mockup text ---------- */
@media (max-width:760px){
  /* Sections use a 6% gutter on phones; the hero, question strip, card grid and footer match, so left edges line up. */
  .hero-in,.qs,.cards,.ft{padding-left:6%;padding-right:6%}
  /* The hero phone starts small and grows as it scrolls up the screen; the spring lives in index.html. */
  .hero-art{justify-content:center}
  .hero-art .phone{transform:scale(var(--ph-s,1));transform-origin:50% 0;will-change:transform}
  /* The bar keeps at least 16px at the edges, which 4% of a 320px screen was not. */
  .nav-in,.drawer{padding-left:max(16px,4%);padding-right:max(16px,4%)}
}
@media (max-width:620px){
  /* Feature card mockups: bigger chat avatars for touch-sized cards, and tighter tracking so the readout tag fits. */
  .pf-m{grid-template-columns:28px minmax(0,1fr)}
  .pf-m u{width:28px;height:28px}
  .pf-demo{min-height:168px}
}

/* ---------- request forms (contact and book a call) ---------- */
.jcf{display:flex;flex-direction:column;gap:18px;max-width:68ch;margin-top:clamp(20px,2.4vw,32px);margin-bottom:0}
.jcf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:600px){ .jcf-row{grid-template-columns:1fr} }
.jcf-f{display:flex;flex-direction:column;gap:8px}
.jcf-f > span{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--ink);letter-spacing:normal}
.jcf-f > span i{font-style:normal;font-weight:var(--fw-light);color:var(--dimmer)}
.jcf-f input,.jcf-f textarea{font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);letter-spacing:normal;color:var(--ink);background:var(--void);border:1px solid var(--line-2);
  border-radius:10px;padding:12px 14px;min-height:48px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease}
.jcf-f textarea{resize:vertical;min-height:132px;line-height:var(--lh-body)}
.jcf-f input:focus,.jcf-f textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(50,41,224,.16)}
.jcf-check{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--dim);cursor:pointer}
.jcf-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue);flex:none}
.jcf .jcf-go{align-self:flex-start;min-height:48px;font-family:var(--font);cursor:pointer}
.jcf .jcf-go[aria-busy="true"]{cursor:progress}
.jcf p.jcf-err{margin:0;font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--blue)}
.jcf p.jcf-fine{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--dimmer);max-width:var(--measure)}
.jcf p.jcf-done{margin:0;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink);background:var(--panel);border-left:3px solid var(--blue);padding:12px 16px}
/* Links in the form copy are underlined like every link in running text (.pr-w a), wherever the form sits. */
.jcf-fine a,.jcf-err a,.jcf-done a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
/* The honeypot field: off screen rather than display:none, so form-filling bots still see it and fill it in. */
.jcf-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- laptops: readable sizes and balanced space ---------- */
/* The closing band's main action was an outline like the two beside it. It is filled, as the hero primary is; white on blue is 8.3:1. */
#book .close-in .btn.p{background:var(--blue);border-color:var(--blue);color:#fff}
@media (hover:hover) and (pointer:fine){ #book .close-in .btn.p:hover{background:var(--ink);border-color:var(--ink);color:var(--acid);opacity:1} }
@media (min-width:761px){
  /* Keeps the last words of the form small print from sitting alone on a line. */
  .jcf p.jcf-fine{text-wrap:balance}
  .close-in p.who-room{border-top-color:rgba(33,46,33,.2)}
}
/* .close-in p outranked .who-room, so on every width the caption took the paragraph size. */
.close-in p.who-room{font-size:var(--fs-sm)}
@media (min-width:1100px){
  /* A one line heading beside a long intro sat at the bottom of an empty block. */
  #features > .sec > .head{align-items:start}
  #features{border-bottom:0}

  .door .go,.pg-go{font-size:var(--fs-lg)}
  /* Row text sits 4px from the edge; the hover fill reaches 16px past it so the shifted text stays inside. */
  @media (hover:hover) and (pointer:fine){
    #pages .pg:hover{box-shadow:-16px 0 0 rgba(255,255,255,.07),16px 0 0 rgba(255,255,255,.07)}
  }


  .jilgl-fallback b{text-wrap:balance}}

/* ---------- motion (assets/motion-site.js) ----------
   html.jlm is set by each page's boot script only when motion is allowed, so without JS, without motion.js or with
   reduced motion nothing below applies and every element sits in its final state. */
html.jlm [data-jlm="head"]:not([data-jlm-done]) > *,
html.jlm [data-jlm="seq"]:not([data-jlm-done]) > *,
html.jlm [data-jlm="rise"]:not([data-jlm-done]),
html.jlm [data-jlm="grid"]:not([data-jlm-done]),
html.jlm [data-jlm="grid"]:not([data-jlm-done]) > * > *{opacity:0}