/* ═══════════════════════════════════════════════════════════════════
   ELLERTEK LIVE — Event OS · design system v3 · CORE
   Structure, layout, components and the live screen recreations.
   Contains NO literal palette colours: every colour is a token that
   v3-theme-a.css / v3-theme-b.css define. Mobile-first throughout.
   ═══════════════════════════════════════════════════════════════════ */

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

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--body); background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection { background:var(--brand); color:var(--on-brand); }
:focus-visible { outline:2px solid var(--brand2); outline-offset:3px; border-radius:6px; }

.wrap { width:100%; max-width:1200px; margin-inline:auto; padding-inline:20px; }
@media (min-width:768px){ .wrap { padding-inline:32px; } }

section { position:relative; padding:64px 0; }
/* in-page nav jumps must clear the sticky header, or the heading you
   jumped to lands underneath it */
section[id], .mod, .qa, #screens, #pricing { scroll-margin-top:86px; }
@media (min-width:768px){ section { padding:96px 0; } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── type ─────────────────────────────────────────────────────── */
.kick {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand2); padding:7px 14px; border-radius:100px;
  border:1px solid var(--brand-line); background:var(--brand-soft);
}
.kick::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--brand); }

h1,h2,h3 { font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.02em; }
.h1 { font-size:clamp(34px,8.6vw,74px); }
.h2 { font-size:clamp(27px,5.6vw,50px); line-height:1.08; }
.h3 { font-size:clamp(19px,2.4vw,25px); }
.grad {
  background:linear-gradient(100deg,var(--brand2),var(--brand) 42%,var(--brand3) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead { font-size:clamp(15.5px,2.1vw,19px); color:var(--muted); line-height:1.7; }
.sec-head { max-width:760px; margin-bottom:38px; }
.sec-head .h2 { margin:16px 0 14px; }
@media (min-width:768px){ .sec-head { margin-bottom:56px; } }

/* ── buttons ──────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 24px; border-radius:100px;
  font-weight:600; font-size:15px; letter-spacing:.005em;
  border:1px solid var(--line-2); background:var(--glass); color:var(--ink);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease),
             background .25s, border-color .25s;
  position:relative; overflow:hidden; white-space:nowrap; text-align:center;
}
.btn:active { transform:scale(.975); }
@media (hover:hover){ .btn:hover { transform:translateY(-2px); border-color:var(--brand); background:var(--brand-soft); } }

.btn.primary {
  background:var(--brand-grad); color:var(--on-brand); border:none;
  box-shadow:0 10px 30px -10px var(--brand-glow);
}
.btn.primary::after {
  content:''; position:absolute; inset:0 auto 0 -80%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg); transition:left .65s var(--ease);
}
@media (hover:hover){
  .btn.primary:hover::after { left:135%; }
  .btn.primary:hover { box-shadow:0 16px 44px -10px var(--brand-glow); }
}
.btn.wa { background:#25d366; color:#062d16; border:none; box-shadow:0 10px 30px -12px rgba(37,211,102,.6); }
@media (hover:hover){ .btn.wa:hover { background:#2ee071; } }
.btn.big  { min-height:56px; padding:16px 26px; font-size:15.5px; }
@media (min-width:768px){ .btn.big { padding:17px 30px; font-size:16px; } }
.btn.sm   { min-height:40px; padding:9px 18px; font-size:13.5px; }
.btn.block{ width:100%; }
.btn .ico { font-size:1.05em; line-height:1; }

/* ── header ───────────────────────────────────────────────────── */
header.site {
  position:sticky; top:0; z-index:60;
  background:var(--head-bg); backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
header.site .wrap { display:flex; align-items:center; gap:14px; padding-block:12px; }
.logo { font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.13em; line-height:1.05; }
.logo span { color:var(--brand); }
.logo em { display:block; font-style:normal; font-size:9.5px; letter-spacing:.32em; color:var(--muted); font-weight:400; margin-top:1px; }
nav.main { margin-left:auto; display:none; gap:26px; align-items:center; font-size:14.5px; }
nav.main a { color:var(--muted); transition:color .2s; white-space:nowrap; }
@media (hover:hover){ nav.main a:hover { color:var(--ink); } }
.head-cta { margin-left:auto; display:flex; align-items:center; gap:9px; }
@media (min-width:1000px){ nav.main { display:flex; } .head-cta { margin-left:26px; } }
/* Six nav links + calm + language + CTA do not fit between 1000px and
   ~1200px (the v2.2 "Factories" link tipped it over). Tighten the spacing
   and let "Resellers" live in the footer at those widths — it is the
   lowest-intent link in the bar. */
@media (min-width:1000px) and (max-width:1219px){
  nav.main { gap:18px; font-size:14px; }
  nav.main a[href="/partners"] { display:none; }
  .head-cta { margin-left:18px; }
}
/* On a 390px phone the logo + language pill + CTA + burger do not fit on one
   line. The CTA is not lost — it sits in the drawer and in the always-visible
   bottom action bar, which is a better place for a thumb anyway. */
@media (max-width:860px){ .head-cta .hide-s { display:none; } }
@media (max-width:560px){
  .head-cta .btn.primary { display:none; }
  header.site .wrap { gap:10px; }
  .logo { font-size:15.5px; letter-spacing:.11em; }
  .logo em { font-size:9px; letter-spacing:.26em; }
  .lang { height:36px; padding:0 11px; }
}

.lang {
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 13px;
  border-radius:100px; border:1px solid var(--line-2); font-size:12.5px; font-weight:600;
  color:var(--muted); letter-spacing:.04em; background:var(--glass);
}
@media (hover:hover){ .lang:hover { color:var(--ink); border-color:var(--brand); } }
.lang::before { content:'🌐'; font-size:13px; }

.burger { display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line-2); background:var(--glass); }
.burger i { display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s; }
.burger i + i { margin-top:4.5px; }
@media (min-width:1000px){ .burger { display:none; } }

/* mobile drawer */
.drawer {
  position:fixed; inset:0; z-index:90; background:var(--bg);
  transform:translateY(-100%); transition:transform .42s var(--ease);
  display:flex; flex-direction:column; padding:20px; overflow-y:auto;
}
.drawer[data-open="1"] { transform:none; }
.drawer .dr-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.drawer nav { display:flex; flex-direction:column; gap:4px; }
.drawer nav a {
  font-family:var(--display); font-size:26px; font-weight:700; padding:14px 0;
  border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;
}
.drawer nav a span { font-size:13px; font-family:var(--body); color:var(--muted); font-weight:400; }
.drawer .dr-cta { margin-top:26px; display:grid; gap:10px; }

/* ── hero ─────────────────────────────────────────────────────── */
.hero { position:relative; padding:38px 0 8px; overflow:hidden; }
@media (min-width:900px){ .hero { padding:64px 0 24px; } }
.hero .wrap { position:relative; z-index:2; }
/* only the first wrap is the two-column hero grid — the marquee below it is
   a separate full-width wrap and must not inherit the column template */
/* minmax(0,1fr): an 'auto' column grows to the reel bar's min-content (its
   caption is nowrap), which pushed the hero ~15px past a 390px phone and
   .hero's overflow:hidden then clipped the headline's right edge */
.hero-grid { display:grid; gap:26px; grid-template-columns:minmax(0,1fr); }
/* On a phone the live screen must be ABOVE the long paragraph: it is the
   single most persuasive thing on the page and nobody scrolls past seven
   lines of prose to find it. On desktop it moves to its own column. */
@media (min-width:1000px){
  .hero-grid {
    /* minmax(0,…): with nine screens the reel's dot row is wider, and a
       plain fr track would let its min-content push the page sideways */
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    grid-template-areas:"head visual" "body visual";
    align-items:center; column-gap:48px; row-gap:0;
  }
  .hero-head   { grid-area:head; align-self:end; }
  .hero-body   { grid-area:body; align-self:start; padding-top:18px; }
  .hero-visual { grid-area:visual; }
}
.hero .h1 { margin:18px 0 0; font-size:clamp(34px,7.4vw,66px); }
.hero-visual .frame-stand { margin-top:20px; }
.hero-lead2 { margin-top:12px; font-weight:600; color:var(--ink); font-size:clamp(15px,2vw,17px); }
.cta-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.cta-row .btn { flex:1 1 auto; }
@media (min-width:520px){ .cta-row .btn { flex:0 0 auto; } }

.trust { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.trust span {
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted);
  padding:8px 13px; border-radius:100px; border:1px solid var(--line); background:var(--glass);
}
.trust b { color:var(--ink); font-weight:600; }

/* ── stats ────────────────────────────────────────────────────── */
.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:860px){ .stats { grid-template-columns:repeat(4,1fr); gap:18px; } }
.stat { padding:20px 18px; border-radius:18px; border:1px solid var(--line); background:var(--panel); }
.stat .n { font-family:var(--display); font-size:clamp(30px,6vw,46px); font-weight:700;
  line-height:1; color:var(--brand2); letter-spacing:-.03em; }
.stat .l { font-size:12.5px; color:var(--muted); margin-top:9px; line-height:1.45; }

/* ═══ THE SCREEN SHOWCASE ══════════════════════════════════════ */
.showcase { position:relative; }
.sc-rail {
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 20px 14px; margin:0 -20px 22px; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.sc-rail::-webkit-scrollbar { display:none; }
@media (min-width:900px){ .sc-rail { flex-wrap:wrap; overflow:visible; margin:0 0 30px; padding:0; justify-content:center; } }
.sc-tab {
  scroll-snap-align:center; flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:11px 17px; border-radius:100px; border:1px solid var(--line-2); background:var(--glass);
  font-size:13.5px; font-weight:600; color:var(--muted); transition:all .28s var(--ease);
}
.sc-tab .e { font-size:16px; line-height:1; }
.sc-tab[aria-selected="true"] {
  color:var(--on-brand); border-color:transparent;
  background:linear-gradient(120deg,var(--t1),var(--t2));
  box-shadow:0 8px 26px -10px var(--t1);
}
@media (hover:hover){ .sc-tab:hover { color:var(--ink); border-color:var(--t1); } }

.sc-stage { display:grid; gap:24px; }
@media (min-width:1000px){ .sc-stage { grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; } }

.sc-panel { display:none; }
.sc-panel.on { display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
/* long Kiswahili button labels must wrap on a 360px phone, not push the panel */
.sc-cta .btn { white-space:normal; }
@media (min-width:1000px){ .sc-panel.on { grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; } }

/* the physical screen frame */
.frame {
  position:relative; border-radius:18px; padding:9px;
  background:var(--frame); border:1px solid var(--line-2);
  box-shadow:0 30px 70px -30px var(--shadow), inset 0 1px 0 var(--line-2);
}
.frame::after {
  content:''; position:absolute; inset:-1px; border-radius:19px; pointer-events:none;
  background:linear-gradient(135deg,var(--t1),transparent 42%,transparent 60%,var(--t2));
  opacity:.32; mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
}
.frame-stand { display:none; }
.frame-tag {
  display:flex; align-items:center; justify-content:center; gap:7px; width:fit-content;
  margin:12px auto 0; padding:6px 15px; border-radius:100px;
  font-size:11px; font-weight:700; letter-spacing:.11em; white-space:nowrap;
  background:var(--panel-2); border:1px solid var(--line-2); color:var(--muted);
}
.frame-tag i { width:6px; height:6px; border-radius:50%; background:#22c55e; animation:blip 1.8s infinite; }
@keyframes blip { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ═══ THE HERO SHOWREEL ════════════════════════════════════════
   Every screen the venue will run, one after another, in the same
   frame — a casino jackpot, a wedding photo vote, a hospital queue.
   Cross-dissolve plus a very slow push-in; no cut, no flash. */
.reel { position:relative; }
.reel-frame { position:relative; aspect-ratio:16/9; padding:9px; overflow:hidden; }
.reel-slide {
  position:absolute; inset:9px; opacity:0; pointer-events:none;
  transition:opacity 1s ease;
}
.reel-slide.on { opacity:1; pointer-events:auto; }
.reel-slide .eos {
  position:absolute; inset:0; aspect-ratio:auto; height:100%;
  transform:scale(1.045); transition:transform 0s;
}
/* the push-in runs only on the slide that is showing */
.reel-slide.on .eos { transform:scale(1); transition:transform 6.5s linear; }

.reel-bar {
  display:flex; align-items:center; gap:12px; margin-top:14px;
  padding:9px 12px 9px 9px; border-radius:100px;
  border:1px solid var(--line); background:var(--panel);
}
.reel-play {
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--brand-grad); display:grid; place-items:center;
  box-shadow:0 6px 18px -8px var(--brand-glow);
}
.reel-play::before {
  content:''; width:0; height:0;
  border-left:9px solid var(--on-brand); border-top:6px solid transparent;
  border-bottom:6px solid transparent; margin-left:2px;
}
.reel-play[aria-pressed="true"]::before {
  width:9px; height:11px; margin-left:0; border:none;
  background:linear-gradient(90deg,var(--on-brand) 0 3px, transparent 3px 6px, var(--on-brand) 6px 9px);
}
.reel-cap {
  flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reel-dots { flex:0 0 auto; display:flex; align-items:center; gap:5px; }
.reel-dot {
  width:16px; height:16px; display:grid; place-items:center; border-radius:50%;
  transition:width .45s var(--ease);
}
.reel-dot i {
  display:block; width:6px; height:6px; border-radius:100px;
  background:var(--line-2); transition:all .45s var(--ease);
}
.reel-dot.on { width:30px; }
.reel-dot.on i { width:24px; background:var(--dc); box-shadow:0 0 10px -1px var(--dc); }
@media (hover:hover){ .reel-dot:hover i { background:var(--muted); } }
@media (max-width:520px){
  .reel-cap { font-size:11.5px; }
  .reel-dot { width:12px; } .reel-dot.on { width:22px; }
  .reel-dots { gap:3px; }
  .reel-dot.on i { width:18px; }
}

/* Calm mode: no dissolve, no push-in — the reel becomes a still frame
   the visitor advances themselves. */
html.calm .reel-slide .eos,
html.calm .reel-slide.on .eos { transform:none !important; transition:none !important; }
html.calm .reel-slide { transition:none !important; }

/* screen info column */
.sc-info .sc-name { font-family:var(--display); font-size:clamp(23px,4vw,33px); font-weight:700; line-height:1.1; }
.sc-info .sc-for { font-size:12.5px; color:var(--t2); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; margin-top:9px; }
.sc-pain {
  margin:20px 0 16px; padding:14px 16px; border-radius:14px; font-size:14.5px; line-height:1.6;
  color:var(--ink); border-left:3px solid var(--t1); background:var(--panel); font-style:italic;
}
.sc-after { font-size:15px; line-height:1.72; color:var(--muted); }
.sc-after b { color:var(--ink); font-weight:600; }
.sc-proof {
  margin-top:16px; padding:13px 16px; border-radius:14px; font-size:13.5px; line-height:1.55;
  background:linear-gradient(120deg,var(--t1-soft),transparent); border:1px solid var(--t1-line);
  color:var(--ink); font-weight:500;
}
.sc-price { display:flex; align-items:baseline; gap:10px; margin-top:20px; flex-wrap:wrap; }
.sc-price .amt { font-family:var(--display); font-size:26px; font-weight:700; color:var(--ink); }
.sc-price .per { font-size:13px; color:var(--muted); }
.sc-price .day { font-size:12.5px; color:var(--t2); border:1px solid var(--t1-line);
  padding:4px 10px; border-radius:100px; background:var(--t1-soft); }
.sc-cta { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }

/* ═══ EOS LIVE SCREENS ═════════════════════════════════════════
   Rebuilt from photographs of the real Event OS displays: an
   indigo→violet stage, a gold sunburst on the horizon, a reflective
   floor, art-deco corner brackets and wide-tracked uppercase titles.

   FLASH SAFETY: nothing here changes luminance more than once per
   second. The live dot breathes over 4s, the jackpot glow over 6s,
   confetti falls linearly. WCAG 2.3.1 asks for under 3 flashes per
   second; the fastest thing on this page is a quarter of that. Calm
   mode (html.calm) and prefers-reduced-motion both stop all of it.
   ═══════════════════════════════════════════════════════════════ */
.eos {
  position:relative; border-radius:10px; overflow:hidden; aspect-ratio:16/9;
  display:flex; flex-direction:column; color:#fff; isolation:isolate;
  font-family:var(--display); container-type:inline-size;
  background:
    radial-gradient(120% 88% at 50% 26%, #4321bd 0%, #2a1490 42%, #170a5c 72%, #0d0637 100%);
}

/* star field — two tiled layers, no images, no animation */
.eos-sky {
  position:absolute; inset:0; z-index:0; opacity:.9;
  background-image:
    radial-gradient(1px 1px at 20% 30%,   rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1px 1px at 70% 62%,   rgba(255,255,255,.5),  transparent 100%),
    radial-gradient(1.6px 1.6px at 45% 16%, rgba(255,232,186,.8), transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 24%, rgba(200,220,255,.6), transparent 100%);
  background-size:118px 92px, 173px 131px, 227px 163px, 149px 107px;
}
/* soft bokeh — large, low-opacity, static */
.eos-sky::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 8% 62%,  rgba(236,120,200,.30) 0 3.2%, transparent 3.4%),
    radial-gradient(circle at 93% 40%, rgba(160,120,255,.28) 0 2.4%, transparent 2.6%),
    radial-gradient(circle at 84% 71%, rgba(255,150,190,.24) 0 3.6%, transparent 3.8%),
    radial-gradient(circle at 16% 24%, rgba(120,190,255,.22) 0 2%,   transparent 2.2%);
  filter:blur(1px);
}

/* the stage floor: sunburst + rays + reflection */
.eos-floor {
  position:absolute; inset:auto 0 0 0; height:27%; z-index:0;
  background:
    radial-gradient(58% 128% at 50% 104%, rgba(255,221,138,.92) 0%,
      rgba(255,158,72,.52) 26%, rgba(190,80,190,.22) 52%, transparent 74%),
    linear-gradient(0deg, rgba(88,40,170,.55), transparent 88%);
}
.eos-floor::before {
  content:''; position:absolute; inset:0;
  background:repeating-conic-gradient(from 199deg at 50% 132%,
    rgba(255,255,255,.13) 0deg .9deg, transparent .9deg 5.4deg);
  -webkit-mask:radial-gradient(66% 100% at 50% 100%, #000, transparent 74%);
  mask:radial-gradient(66% 100% at 50% 100%, #000, transparent 74%);
}
.eos-floor::after {           /* the horizon line the real screens have */
  content:''; position:absolute; inset:auto 0 auto 0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,226,160,.4) 26%,
    rgba(255,240,200,.62) 50%, rgba(255,226,160,.4) 74%, transparent);
}

/* art-deco corner brackets, in gold, exactly like the venue screens */
.eos-deco { position:absolute; inset:0; z-index:1; pointer-events:none; }
.eos-deco i {
  position:absolute; width:26%; height:38%;
  border:0 solid rgba(255,206,130,.62);
}
.eos-deco i::before {
  content:''; position:absolute; inset:6px; border:0 solid rgba(255,180,120,.4);
}
.eos-deco i:nth-child(1) { top:3%;    left:2.4%;  border-top-width:1.5px; border-left-width:1.5px;
  border-top-left-radius:3px; }
.eos-deco i:nth-child(1)::before { border-top-width:1px; border-left-width:1px; }
.eos-deco i:nth-child(2) { top:3%;    right:2.4%; border-top-width:1.5px; border-right-width:1.5px;
  border-top-right-radius:3px; }
.eos-deco i:nth-child(2)::before { border-top-width:1px; border-right-width:1px; }
.eos-deco i:nth-child(3) { bottom:3%; left:2.4%;  border-bottom-width:1.5px; border-left-width:1.5px;
  border-bottom-left-radius:3px; }
.eos-deco i:nth-child(3)::before { border-bottom-width:1px; border-left-width:1px; }
.eos-deco i:nth-child(4) { bottom:3%; right:2.4%; border-bottom-width:1.5px; border-right-width:1.5px;
  border-bottom-right-radius:3px; }
.eos-deco i:nth-child(4)::before { border-bottom-width:1px; border-right-width:1px; }

/* header + body */
.eos-head { position:relative; z-index:2; text-align:center; padding:4.6cqi 7cqi 0; flex:0 0 auto;
  display:flex; align-items:flex-start; gap:3cqi; }
.eos-head-main { flex:1; min-width:0; }
.eos-aside { flex:0 0 auto; }
.eos-title {
  font-size:clamp(9px,3.1cqi,20px); font-weight:500; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(255,255,255,.94);
  text-shadow:0 0 22px rgba(180,150,255,.5);
}
.eos-meta {
  margin-top:1.4cqi; font-size:clamp(7px,2cqi,13px); letter-spacing:.14em;
  color:rgba(255,255,255,.62); font-family:var(--body); text-transform:uppercase;
}
.eos-meta b { color:#ffe3a3; }
.eos-body { position:relative; z-index:2; flex:1; min-height:0; display:flex;
  flex-direction:column; justify-content:center; padding:1.6cqi 7cqi 3cqi;
  overflow:hidden;   /* the screen is a fixed 16:9 panel — nothing may spill out of it */ }
.eos-foot { position:relative; z-index:2; flex:0 0 auto; }
.eos-note { padding:1.6cqi 0 2.4cqi; text-align:center; font-size:clamp(6px,1.6cqi,10px);
  letter-spacing:.2em; color:rgba(255,255,255,.5); font-family:var(--body); }

/* winners ticker */
.eos-ticker { overflow:hidden; background:rgba(10,4,40,.55); border-top:1px solid rgba(255,206,130,.3);
  padding:1.4cqi 0; }
.eos-ticker { -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.eos-track { display:flex; gap:6cqi; white-space:nowrap; width:max-content;
  animation:tick 26s linear infinite; font-size:clamp(6.5px,1.7cqi,11px);
  letter-spacing:.1em; color:rgba(255,255,255,.6); padding-left:4cqi; font-family:var(--body); }
.eos-track b { color:#ffd98a; }
/* on a phone-sized frame the winners ticker crowds the horizon — the
   jackpot number is the message, the ticker is decoration */
@container (max-width:420px){ .eos-ticker { display:none; } }
@keyframes tick { to { transform:translateX(-50%); } }

/* left-aligned header variant (the wedding vote screen) */
.eos-voting .eos-head { text-align:left; padding-right:6cqi; align-items:center; }
/* the question must stay to two lines — a third line pushes the photo
   cards out of the 16:9 frame */
.eos-voting .eos-title { font-size:clamp(9px,2.75cqi,18px); letter-spacing:.04em; line-height:1.15; }
.eos-voting .eos-aside { max-width:44%; }


/* ── 1 · jackpot ─────────────────────────────────────────────── */
.jp { text-align:center; }
.jp-label { font-size:clamp(6.5px,1.8cqi,12px); letter-spacing:.36em; color:rgba(255,255,255,.62);
  font-family:var(--body); }
.jp-amount {
  margin-top:1.4cqi; display:flex; align-items:baseline; justify-content:center; gap:.26em;
  font-weight:700; letter-spacing:-.015em; font-size:clamp(24px,10.6cqi,74px); line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fffdf6 6%,#ffe08a 46%,#f0a83a 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:jpglow 6s ease-in-out infinite;   /* 0.17 Hz — a slow breath, never a flash */
}
@keyframes jpglow {
  0%,100% { filter:drop-shadow(0 3px 18px rgba(255,190,90,.42)); }
  50%     { filter:drop-shadow(0 3px 26px rgba(255,205,120,.58)); }
}
.jp-cur { font-size:.3em; letter-spacing:.12em; -webkit-text-fill-color:#ffd98a; }
.jp-next { margin-top:2.6cqi; font-size:clamp(6.5px,1.8cqi,12px); letter-spacing:.18em;
  color:rgba(255,255,255,.68); display:flex; align-items:center; justify-content:center; gap:1.6cqi;
  font-family:var(--body); }
.jp-next b { color:#ffe3a3; font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.jp-live { width:.7em; height:.7em; border-radius:50%; background:#5be584;
  box-shadow:0 0 10px rgba(91,229,132,.8); animation:breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%,100%{opacity:.55} 50%{opacity:1} }   /* 0.25 Hz */

/* ── 2 · all winners board ───────────────────────────────────── */
.wn { display:grid; grid-template-columns:repeat(2,1fr); gap:1cqi 2.4cqi; }
.wn-col { display:flex; flex-direction:column; gap:.9cqi; min-width:0; }
.wn-col:nth-child(3) { display:none; }
@container (min-width:700px){
  .wn { grid-template-columns:repeat(3,1fr); }
  .wn-col:nth-child(3) { display:flex; }
}
.wn-row {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1cqi;
  padding-left:1.2cqi; border-left:2px solid rgba(255,206,130,.55);
  font-size:clamp(5.5px,1.7cqi,11.5px); min-width:0;
}
.wn-cup { font-size:1.15em; line-height:1; filter:saturate(1.1); }
.wn-name { letter-spacing:.05em; color:#fff; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; text-shadow:0 0 14px rgba(150,130,255,.45); }
.wn-amt { display:inline-flex; align-items:center; gap:.4em; white-space:nowrap;
  color:rgba(255,255,255,.88); font-family:var(--body); font-size:.78em;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.wn-amt i { font-style:normal; font-size:1.05em; }
@container (max-width:400px){
  .wn { grid-template-columns:1fr; }
  .wn-col:nth-child(2) { display:none; }
  .wn-row { font-size:clamp(6.5px,2.6cqi,12px); }
}

/* ── 3 · photo vote ──────────────────────────────────────────── */
.pv { display:flex; flex-direction:column; gap:1.6cqi; }
.pv-join {
  display:flex; align-items:center; gap:1.6cqi;
  padding:1.3cqi 1.7cqi; border-radius:1.2cqi;
  border:1px solid rgba(255,206,130,.55); background:rgba(14,6,52,.62);
  backdrop-filter:blur(4px);
}
.pv-qr .qr { width:clamp(24px,7.4cqi,52px); }
.pv-join-txt { display:flex; flex-direction:column; gap:.35cqi; }
.pv-join-txt b { font-size:clamp(5.5px,1.55cqi,10.5px); letter-spacing:.2em;
  color:rgba(255,255,255,.8); }
.pv-url { font-size:clamp(6.5px,2cqi,13px); color:#fff; font-family:var(--body); font-weight:600; }
.pv-hint { font-size:clamp(5px,1.4cqi,9.5px); color:rgba(255,255,255,.55); font-family:var(--body); }
.pv-hint em { font-style:normal; color:#ffe3a3; letter-spacing:.24em; font-weight:700; }
.pv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6cqi; }
.pv-card {
  position:relative; border-radius:1.2cqi; padding:1.1cqi; overflow:hidden;
  background:rgba(10,4,44,.62); border:1px solid rgba(255,255,255,.14);
  transition:border-color .6s, box-shadow .6s;
}
.pv-card.lead { border-color:rgba(255,214,120,.9);
  box-shadow:0 0 0 1px rgba(255,214,120,.5), 0 0 26px -6px rgba(255,200,110,.55); }
.pv-shot {
  position:relative; aspect-ratio:16/9; border-radius:.8cqi; overflow:hidden;
  background:rgba(255,255,255,.06);
}
.pv-shot img { width:100%; height:100%; object-fit:cover; display:block; }
/* the leading entry is lit; the others sit back a step so the winner reads
   instantly from across a room */
.pv-card:not(.lead) .pv-shot img { filter:saturate(.82) brightness(.86); }
.pv-crown { position:absolute; top:.8cqi; right:1cqi; font-size:clamp(9px,2.6cqi,17px); }
.pv-meta { display:flex; justify-content:space-between; align-items:baseline; margin-top:1.1cqi;
  font-size:clamp(5.5px,1.7cqi,11.5px); font-family:var(--body); }
.pv-meta b { color:rgba(255,255,255,.75); font-weight:500; }
.pv-pct { color:rgba(255,255,255,.85); font-variant-numeric:tabular-nums; }
.pv-card.lead .pv-pct { color:#ffe08a; font-weight:700; }
.pv-bar { margin-top:.7cqi; height:1.1cqi; min-height:3px; border-radius:100px;
  background:rgba(255,255,255,.14); overflow:hidden; }
.pv-bar i { display:block; height:100%; width:3%; border-radius:100px;
  background:linear-gradient(90deg,#8b7bff,#c9a6ff); transition:width 1.4s var(--ease); }
.pv-card.lead .pv-bar i { background:linear-gradient(90deg,#ffca5e,#ffe9b0); }
@container (max-width:480px){
  /* The screen is a fixed 16:9 panel: stacking the three photos makes it
     twice as tall as the frame. They stay in one row, exactly like the
     real display, and the type shrinks with them. */
  .pv-grid { grid-template-columns:repeat(3,1fr); gap:1.1cqi; }
  .pv-meta { font-size:clamp(4.5px,1.55cqi,9px); }
  .pv-bar { height:1.1cqi; }
  .pv-join { padding:1cqi 1.2cqi; gap:1.1cqi; }
  .pv-join-txt b { display:none; }
  .pv-url { font-size:clamp(6px,1.9cqi,11px); }
  .pv-qr .qr { width:clamp(20px,6cqi,40px); }
  .eos-voting .eos-head { padding-right:7cqi; }
  .pv { gap:1cqi; }
  .pv-card { padding:.7cqi; border-radius:.9cqi; }
  .pv-crown { font-size:clamp(7px,2.2cqi,12px); top:.5cqi; right:.6cqi; }
  .pv-meta { margin-top:.6cqi; }
  .pv-bar { margin-top:.4cqi; }
}

/* ── 4 · draw winner ─────────────────────────────────────────── */
.rv { text-align:center; position:relative; }
.rv-build { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1.6cqi; transition:opacity .6s ease, transform .7s var(--ease); }
.rv-build span { width:clamp(26px,10cqi,66px); height:2px; border-radius:2px;
  background:rgba(255,255,255,.18); overflow:hidden; position:relative; }
.rv-build span::after { content:''; position:absolute; inset:0; background:#ffd98a;
  transform:translateX(-100%); animation:load 1.6s ease-in-out infinite; }
.rv-build span:nth-child(2)::after { animation-delay:.22s }
.rv-build span:nth-child(3)::after { animation-delay:.44s }
@keyframes load { to { transform:translateX(100%); } }
.rv-susp { font-size:clamp(6.5px,1.9cqi,12px); letter-spacing:.32em; color:rgba(255,255,255,.6);
  font-family:var(--body); }
.rv-out { opacity:0; transform:scale(.94); transition:opacity .8s ease, transform .9s var(--ease); }
.eos-reveal[data-phase="out"] .rv-build { opacity:0; transform:scale(1.06); }
.eos-reveal[data-phase="out"] .rv-out { opacity:1; transform:none; }
.rv-name {
  /* a two-word winner fits on one line; a three-word one wraps, so the
     type is sized and leaded for both rather than only the short case */
  font-size:clamp(19px,9.6cqi,68px); font-weight:700; line-height:.96; letter-spacing:-.01em;
  text-wrap:balance;
  color:#ffe98f; text-shadow:0 0 34px rgba(255,205,110,.55), 0 0 90px rgba(255,170,60,.28);
}
.rv-prize {
  display:inline-block; margin-top:2.2cqi; padding:1.3cqi 3.2cqi; border-radius:1.4cqi;
  background:linear-gradient(180deg,#ffe98f,#f6cf5c); color:#2a1a00;
  font-size:clamp(8px,2.6cqi,18px); font-weight:700; letter-spacing:.05em;
  font-family:var(--body);
  box-shadow:0 10px 30px -12px rgba(255,190,80,.7);
}
.rv-confetti { position:absolute; inset:-12% -6% -30% -6%; overflow:hidden; pointer-events:none;
  opacity:0; transition:opacity .5s; }
.eos-reveal[data-phase="out"] .rv-confetti { opacity:1; }
.rv-confetti i { position:absolute; top:-8%; width:4px; height:8px; border-radius:1px;
  animation-name:fall; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes fall {
  0%   { transform:translateY(-20%) rotate(var(--rot)); }
  100% { transform:translateY(900%) rotate(calc(var(--rot) + 520deg)); }
}

/* ── 5 · queue ───────────────────────────────────────────────── */
.qu-hero { display:flex; align-items:center; justify-content:center; gap:6cqi; }
.qu-num { font-size:clamp(30px,15cqi,104px); font-weight:700; line-height:1;
  color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 0 40px rgba(120,190,255,.7); }
.qu-num.flip { animation:flip .55s var(--ease); }
@keyframes flip { 0%{transform:rotateX(-88deg);opacity:0} 100%{transform:none;opacity:1} }
.qu-counter { font-size:clamp(6px,1.8cqi,12px); letter-spacing:.3em; color:rgba(255,255,255,.6);
  text-align:center; font-family:var(--body); }
.qu-counter b { display:block; font-family:var(--display); font-size:clamp(20px,7.6cqi,52px);
  color:#8fd6ff; letter-spacing:0; margin-top:.4cqi; text-shadow:0 0 26px rgba(80,180,255,.6); }
.qu-next { display:flex; align-items:center; gap:1.4cqi; margin-top:2.4cqi; padding-top:1.8cqi;
  border-top:1px solid rgba(255,255,255,.16); }
.qu-lbl { font-size:clamp(5px,1.5cqi,9.5px); letter-spacing:.26em; color:rgba(255,255,255,.45);
  flex:0 0 auto; font-family:var(--body); }
.qu-item { flex:1; min-width:0; text-align:center; padding:1cqi .4cqi; border-radius:.8cqi;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); }
.qu-item b { display:block; font-size:clamp(7px,2.3cqi,15px); font-variant-numeric:tabular-nums; }
.qu-item span { font-size:clamp(4.5px,1.35cqi,9px); color:rgba(255,255,255,.5);
  font-family:var(--body); letter-spacing:.1em; }
.qu-wait { margin-top:1.5cqi; text-align:center; font-size:clamp(5px,1.5cqi,10px);
  color:rgba(255,255,255,.55); font-family:var(--body); letter-spacing:.12em; }
.qu-pill { display:inline-block; padding:.3em .9em; border-radius:100px; font-weight:700;
  background:rgba(255,255,255,.12); color:#fff; margin:0 .3em; }
.qu-pill.alt { color:#8fd6ff; } .qu-pill.pri { background:#8fd6ff; color:#04203a; }

/* ── 6 · harambee ────────────────────────────────────────────── */
.fu-wrap { display:flex; align-items:center; gap:5cqi; }
.fu-thermo { position:relative; width:clamp(12px,3.6cqi,24px); height:18cqi;
  border-radius:100px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  overflow:hidden; flex:0 0 auto; }
.fu-thermo i { position:absolute; inset:auto 0 0 0; height:4%; border-radius:100px;
  background:linear-gradient(0deg,#0f9d63,#5ce8a8); transition:height 1.8s var(--ease);
  box-shadow:0 0 20px rgba(80,230,160,.6); }
.fu-raised { font-size:clamp(7px,2.3cqi,15px); color:rgba(255,255,255,.6); letter-spacing:.14em;
  font-family:var(--body); }
.fu-raised b { display:block; font-family:var(--display); font-size:clamp(15px,6.4cqi,44px);
  color:#fff; letter-spacing:-.015em; font-variant-numeric:tabular-nums;
  text-shadow:0 0 32px rgba(90,230,170,.55); }
.fu-of, .fu-donors { font-size:clamp(5.5px,1.6cqi,11px); color:rgba(255,255,255,.55);
  margin-top:.7cqi; font-family:var(--body); letter-spacing:.1em; line-height:1.5; }
.fu-of b { color:#7dedb8; } .fu-donors b { color:#fff; }
.fu-feed { margin-top:2.6cqi; padding-top:1.8cqi; border-top:1px solid rgba(255,255,255,.16);
  display:flex; flex-direction:column; gap:.8cqi; overflow:hidden;
  /* three pledges is the right number: a fourth is always the row that
     gets clipped when the frame narrows */
  max-height:10.4cqi; }
.fu-item { display:grid; grid-template-columns:1fr auto auto; gap:1.6cqi; align-items:center;
  font-size:clamp(5.5px,1.7cqi,11.5px); font-family:var(--body); animation:slidein .6s var(--ease); }
.fu-item b { color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fu-item span { color:#7dedb8; font-variant-numeric:tabular-nums; }
.fu-item em { font-style:normal; font-size:.84em; color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.18); padding:.15em .55em; border-radius:.4em; letter-spacing:.08em; }
@keyframes slidein { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }

/* ── 7 · scoreboard + league ─────────────────────────────────── */
.lb-score { display:flex; align-items:center; justify-content:center; gap:4cqi;
  padding-bottom:1.6cqi; border-bottom:1px solid rgba(255,255,255,.16); }
.lb-side { display:flex; align-items:center; gap:2.4cqi; }
.lb-side b { font-size:clamp(7px,2.4cqi,16px); letter-spacing:.14em; }
.lb-side i { font-style:normal; font-size:clamp(16px,7cqi,48px); font-weight:700; color:#d4f76a;
  font-variant-numeric:tabular-nums; line-height:1; text-shadow:0 0 26px rgba(190,240,90,.5); }
.lb-vs { font-size:clamp(5.5px,1.6cqi,11px); letter-spacing:.2em; color:rgba(255,255,255,.5);
  font-family:var(--body); }
.lb-list { margin-top:1.4cqi; display:flex; flex-direction:column; gap:.5cqi; }
.lb-row { display:grid; grid-template-columns:auto 1fr auto; gap:2.8cqi; align-items:center;
  padding:.7cqi 2.2cqi; border-radius:.7cqi; background:rgba(255,255,255,.07);
  font-size:clamp(5.5px,1.7cqi,11.5px); transition:transform .6s var(--ease), background .5s; }
.lb-row .lb-pos { width:2em; text-align:center; color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums; }
.lb-row.gold .lb-pos::before, .lb-row.silver .lb-pos::before, .lb-row.bronze .lb-pos::before {
  display:inline-block; line-height:1; }
.lb-row .lb-team { letter-spacing:.06em; }
.lb-row .lb-pts { color:#d4f76a; font-weight:700; font-variant-numeric:tabular-nums; }
.lb-row.gold   { background:linear-gradient(90deg, rgba(255,214,120,.24), rgba(255,255,255,.06)); }
.lb-row.silver { background:linear-gradient(90deg, rgba(220,230,255,.16), rgba(255,255,255,.05)); }
.lb-row.bronze { background:linear-gradient(90deg, rgba(255,170,110,.16), rgba(255,255,255,.05)); }
.lb-row.gold .lb-pos, .lb-row.silver .lb-pos, .lb-row.bronze .lb-pos { font-size:0; }
.lb-row.gold .lb-pos::before   { content:'🥇'; font-size:clamp(8px,2.6cqi,16px); }
.lb-row.silver .lb-pos::before { content:'🥈'; font-size:clamp(8px,2.6cqi,16px); }
.lb-row.bronze .lb-pos::before { content:'🥉'; font-size:clamp(8px,2.6cqi,16px); }

/* decorative QR */
/* ── 8 · PC screen projection ───────────────────────────────────
   The shared laptop window sits on the stage like a slide on a
   projector. Light slide, dark stage: the contrast is what reads as
   "this came from somebody's computer". The slide swap is a slow
   cross-fade every few seconds — never a flash. */
.eos-present .eos-body { padding:1cqi 7cqi .6cqi; }
.ps { flex:1; min-height:0; display:flex; justify-content:center; }
.ps-win { height:100%; aspect-ratio:16/9; max-width:100%; display:flex; flex-direction:column;
  border-radius:.9cqi; overflow:hidden; background:#0f0c26;
  border:1px solid rgba(255,255,255,.2); box-shadow:0 1.4cqi 4cqi -1cqi rgba(5,2,30,.8); }
.ps-bar { flex:0 0 auto; display:flex; align-items:center; gap:1.2cqi; padding:.7cqi 1.2cqi;
  background:#1d1846; font-family:var(--body); font-size:clamp(4.5px,1.25cqi,8.5px);
  color:rgba(255,255,255,.7); white-space:nowrap; }
.ps-dots { display:flex; gap:.5cqi; }
.ps-dots i { width:.9cqi; height:.9cqi; min-width:3px; min-height:3px; border-radius:50%; background:rgba(255,255,255,.28); }
.ps-file { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ps-live { display:inline-flex; align-items:center; gap:.5em; color:#86efac; font-weight:600; letter-spacing:.12em; }
.ps-stage { position:relative; flex:1; min-height:0; background:#f6f5fb; color:#1c1842;
  font-family:var(--body); }
.ps-slide { position:absolute; inset:0; padding:1.8cqi 2.6cqi; transition:opacity .7s ease; }
.ps-b { opacity:0; }
.ps-stage[data-phase="b"] .ps-a { opacity:0; }
.ps-stage[data-phase="b"] .ps-b { opacity:1; }
.ps-h { font-family:var(--display); font-weight:700; font-size:clamp(6px,1.95cqi,13px); padding-right:12cqi;
  letter-spacing:-.01em; line-height:1.15; }
.ps-chart { position:absolute; left:3cqi; right:3cqi; top:5.4cqi; bottom:3.2cqi;
  display:flex; align-items:stretch; gap:2.4cqi; border-bottom:1px solid #d6d3e6; }
.ps-col { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; min-width:0; }
.ps-col b { font-size:clamp(4.5px,1.2cqi,8.5px); color:#4338ca; font-weight:700; line-height:1.3; }
.ps-track { flex:1; width:100%; position:relative; }
.ps-track i { position:absolute; left:19%; right:19%; bottom:0; border-radius:.35cqi .35cqi 0 0;
  background:linear-gradient(#7c6cf0,#4338ca); transition:height .9s var(--ease); min-height:2px; }
.ps-col span { position:absolute; bottom:-2.3cqi; font-size:clamp(4px,1cqi,7px); color:#6e6a92;
  letter-spacing:.1em; }
.ps-list { list-style:none; margin-top:1.8cqi; display:grid; gap:1.1cqi; }
.ps-list li { display:flex; align-items:center; gap:1.2cqi; font-size:clamp(5px,1.55cqi,10.5px); }
.ps-list li b { flex:0 0 auto; display:grid; place-items:center; width:2.6cqi; height:2.6cqi;
  min-width:9px; min-height:9px; border-radius:50%; background:#4338ca; color:#fff;
  font-size:.8em; }
.ps-num { position:absolute; right:2.2cqi; top:2cqi; font-size:clamp(4px,.95cqi,7px);
  color:#8d89ad; letter-spacing:.12em; }
.ps-num b { color:#4338ca; }
.eos-present .eos-note { padding:1.1cqi 0 1.9cqi; }
@container (max-width:420px){
  .eos-present .eos-note { display:none; }
  .eos-present .eos-body { padding-bottom:2.4cqi; }
}

/* ── 9 · split screen (a plant's main-gate TV) ─────────────────── */
.eos-split .eos-body { padding:1.2cqi 6cqi 3.2cqi; }
.sp { flex:1; min-height:0; display:grid; grid-template-columns:1.08fr 1fr;
  grid-template-rows:1.3fr 1fr; gap:1.3cqi; }
.sp-z { min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column;
  justify-content:center; padding:1.3cqi 1.9cqi; border-radius:.9cqi;
  background:rgba(14,7,54,.9); border:1px solid rgba(255,206,130,.26); }
.sp-safe { grid-row:1 / 3; align-items:center; text-align:center; }
.sp-lbl { font-family:var(--body); font-size:clamp(4.5px,1.2cqi,8.5px); letter-spacing:.2em;
  color:rgba(255,255,255,.62); line-height:1.3; }
.sp-days { margin:.8cqi 0 .6cqi; font-size:clamp(24px,12.5cqi,86px); font-weight:700; line-height:.95;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff1c2,#ffcf5a 55%,#e79b2c);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp-hms span { display:block; font-size:clamp(6.5px,2.1cqi,14px); color:#fff; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; }
.sp-hms em { display:block; margin-top:.3cqi; font-style:normal; font-family:var(--body);
  font-size:clamp(4px,.95cqi,7px); letter-spacing:.2em; color:rgba(255,255,255,.45); }
.sp-list { margin-top:.8cqi; display:flex; flex-direction:column; gap:.45cqi; }
.sp-row { display:grid; grid-template-columns:auto 1fr auto; gap:1cqi; align-items:baseline;
  padding:.4cqi .9cqi; border-radius:.5cqi; background:rgba(255,255,255,.06);
  font-size:clamp(5px,1.5cqi,10.5px); white-space:nowrap; }
.sp-row.top { background:linear-gradient(90deg,rgba(255,214,120,.24),rgba(255,255,255,.05)); }
.sp-ln { letter-spacing:.08em; }
.sp-of { font-family:var(--body); font-size:.78em; color:rgba(255,255,255,.45); text-align:right; }
.sp-made { color:#fcd34d; font-weight:700; font-variant-numeric:tabular-nums; }
.sp-clock { font-size:clamp(11px,4.4cqi,30px); font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; }
.sp-msg { margin-top:.8cqi; font-family:var(--body); font-size:clamp(4.8px,1.35cqi,9.5px);
  color:rgba(255,255,255,.86); line-height:1.3; }
.sp-msg b { display:block; font-size:.8em; letter-spacing:.2em; color:#7dd3fc; margin-bottom:.2cqi; }
.sp-made.bump { animation:bump .7s var(--ease); }
@keyframes bump { 0%{color:#fff} 100%{color:#fcd34d} }
@container (max-width:420px){ .sp-of { display:none; } }

.qr { display:grid; grid-template-columns:repeat(9,1fr); gap:1px; aspect-ratio:1;
  padding:2px; background:#fff; border-radius:3px; }
.qr i { background:transparent; border-radius:.5px; }
.qr i.on { background:#12082e; }

/* ── solutions ────────────────────────────────────────────────── */
.sols {
  display:grid; gap:14px; grid-auto-flow:column; grid-auto-columns:86%;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 20px 16px; margin:0 -20px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sols::-webkit-scrollbar { display:none; }
@media (min-width:760px){
  .sols { grid-auto-flow:row; grid-template-columns:repeat(2,1fr); grid-auto-columns:auto;
          overflow:visible; margin:0; padding:0; gap:18px; }
}
@media (min-width:1080px){ .sols { grid-template-columns:repeat(3,1fr); } }
.sol {
  scroll-snap-align:center; display:flex; flex-direction:column;
  padding:24px 22px; border-radius:20px; border:1px solid var(--line);
  background:var(--panel); position:relative; overflow:hidden;
  transition:border-color .3s, transform .3s var(--ease);
}
.sol::before { content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--s1),var(--s2)); }
@media (hover:hover){ .sol:hover { border-color:var(--line-2); transform:translateY(-3px); } }
.sol-top { display:flex; align-items:center; gap:12px; }
.sol-top .ic { display:grid; place-items:center; width:44px; height:44px; border-radius:13px;
  font-size:21px; background:linear-gradient(135deg,var(--s1),var(--s2)); flex:0 0 auto; }
.sol h3 { font-size:18px; line-height:1.2; }
.sol .aud { font-size:11.5px; color:var(--muted); margin-top:4px; letter-spacing:.03em; }
.sol .pain { margin:16px 0 12px; font-size:14px; line-height:1.55; font-style:italic;
  color:var(--ink); padding-left:13px; border-left:2px solid var(--s1); }
.sol .after { font-size:14px; line-height:1.68; color:var(--muted); }
.sol .after b { color:var(--ink); font-weight:600; }
.sol .chips { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 0; }
.sol .chip { font-size:11px; padding:4px 10px; border-radius:100px; color:var(--muted);
  border:1px solid var(--line-2); background:var(--glass); }
.sol .perk { margin-top:14px; font-size:12.5px; line-height:1.5; padding:10px 12px; border-radius:12px;
  background:var(--brand-soft); border:1px dashed var(--brand-line); color:var(--ink); }
.sol-cta { margin-top:auto; padding-top:20px; display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.pline { font-family:var(--display); font-size:21px; font-weight:700; line-height:1.15; }
.pline small { font-size:12px; font-weight:400; color:var(--muted); font-family:var(--body); }
.pline em { display:block; font-style:normal; font-size:11.5px; color:var(--s2);
  font-family:var(--body); font-weight:500; margin-top:3px; }
.sol-cta .btn { margin-left:auto; }

/* ── new in 2.2 ────────────────────────────────────────────────── */
.news-sec { padding-bottom:0; }
.news { display:grid; gap:12px; }
@media (min-width:640px){ .news { grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (min-width:1080px){ .news { grid-template-columns:repeat(4,1fr); gap:16px; } }
.news-card { display:flex; flex-direction:column; padding:20px 20px 18px; border-radius:18px;
  border:1px solid var(--line); background:var(--panel); position:relative; overflow:hidden; }
.news-card::before { content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--brand-grad); opacity:.7; }
.news-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.news-top .ic { font-size:24px; line-height:1; }
.news-tag { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-brand); background:var(--brand-grad); padding:4px 9px; border-radius:100px; }
.news-card h3 { font-size:17px; margin-bottom:8px; }
.news-card p { font-size:13.5px; color:var(--muted); line-height:1.62; }
.news-go { margin-top:auto; padding-top:14px; font-size:13.5px; font-weight:600; color:var(--brand2); }
@media (hover:hover){ .news-go:hover { text-decoration:underline; text-underline-offset:3px; } }

/* plant screens in the showcase: modules + demo instead of a price */
.sc-built { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:20px; }
.sc-built .lbl { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.sc-built .chip, .ind-runs .chip { font-size:11.5px; padding:4px 10px; border-radius:100px;
  border:1px solid var(--t1-line, var(--line-2)); background:var(--t1-soft, var(--panel)); color:var(--ink); }
.sc-built .chip.free, .ind-runs .chip.free { border-style:dashed; color:var(--muted); background:transparent; }
.sc-note { margin-top:12px; font-size:13px; color:var(--muted); line-height:1.55; }

/* ── factories & industries ─────────────────────────────────────
   Deliberately restrained: plant managers and HSE officers are
   buying safety and order, not a party. No glow, no motion. */
.ind-top { display:grid; gap:22px; margin-bottom:44px; }
@media (min-width:980px){ .ind-top { grid-template-columns:.9fr 1.1fr; gap:44px; align-items:center; } }
.ind-eyebrow { display:block; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand); margin-bottom:12px; }
.ind-is1 { font-size:clamp(18px,2.4vw,22px); line-height:1.5; color:var(--muted); }
.ind-is1 b { color:var(--ink); font-weight:700; }
.ind-is3 { margin-top:12px; font-size:15px; line-height:1.65; color:var(--muted); }
.ind-not { margin-top:16px; padding:12px 14px; border-radius:12px; font-size:13px; line-height:1.55;
  color:var(--muted); border:1px dashed var(--line-2); }

.ind-map { position:relative; display:grid; grid-template-columns:minmax(0,30%) 12% minmax(0,58%);
  align-items:stretch; padding:20px; border-radius:22px; border:1px solid var(--line); background:var(--panel); }
.ind-pc { align-self:center; text-align:center; }
.ind-mon { width:72%; max-width:110px; margin:0 auto 12px; aspect-ratio:16/10; border-radius:7px;
  background:#0d0a2c; border:3px solid #2e2670; position:relative; padding:12% 12%;
  display:flex; flex-direction:column; gap:10%; }
.ind-mon::after { content:''; position:absolute; left:40%; right:40%; bottom:-11px; height:8px;
  background:#2e2670; border-radius:0 0 3px 3px; }
.ind-mon i { display:block; height:9%; min-height:3px; border-radius:2px; background:rgba(255,255,255,.22); }
.ind-mon i:first-child { width:55%; background:var(--brand); }
.ind-mon i:nth-child(2) { width:85%; }
.ind-pc b { display:block; font-family:var(--display); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.ind-pc span { display:block; margin-top:4px; font-size:12px; color:var(--muted); }
.ind-wires { width:100%; height:100%; overflow:visible; }
.ind-wires path { fill:none; stroke:var(--brand); stroke-width:2; vector-effect:non-scaling-stroke; opacity:.75; }
.ind-tvs { display:grid; grid-auto-rows:1fr; gap:12px; }
.ind-tv { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.ind-tv .where { font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px; }
.ind-tv .scr { padding:10px 14px; border-radius:10px; background:#0c0a26; color:#fff;
  border:2px solid #2e2670; min-width:0; }
.ind-tv strong { font-family:var(--display); font-weight:700; line-height:1.1; }
.ind-tv em { font-style:normal; }
.scr-days { display:flex; align-items:center; gap:12px; }
.scr-days strong { font-size:clamp(26px,3.2vw,34px); color:#fcd34d; }
.scr-days em { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; line-height:1.35; }
.scr-out div { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.scr-out strong { font-size:clamp(18px,2.2vw,22px); }
.scr-out em { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.ind-tv small { display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-top:3px; }
.ind-tv small.gold { color:#fcd34d; margin:0 0 3px; font-weight:700; }
.scr-note strong { font-size:clamp(14px,1.6vw,16px); }
@media (max-width:640px){
  .ind-map { grid-template-columns:1fr; padding:18px 16px; gap:0; }
  .ind-pc { display:grid; grid-template-columns:64px 1fr; align-items:center; column-gap:14px; text-align:left; }
  .ind-mon { width:64px; margin:0; grid-row:span 2; }
  .ind-pc b { align-self:end; }
  .ind-pc span { align-self:start; }
  .ind-wires { display:none; }
  .ind-tvs { margin:16px 0 0 31px; padding:4px 0 0 18px; border-left:2px solid var(--brand); gap:14px; }
  .ind-tv { position:relative; }
  .ind-tv::before { content:''; position:absolute; left:-19px; top:32px; width:16px; height:2px; background:var(--brand); }
}

.ind-h { font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand); margin-bottom:16px; }
.ind-grid { display:grid; gap:12px; }
@media (min-width:640px){ .ind-grid { grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (min-width:1080px){ .ind-grid { grid-template-columns:repeat(4,1fr); gap:16px; } }
.ind-card { display:grid; grid-template-columns:auto 1fr; gap:14px; padding:18px; border-radius:18px;
  border:1px solid var(--line); background:var(--panel); }
@media (min-width:1080px){ .ind-card { grid-template-columns:1fr; gap:10px; } }
.ind-card .ic { font-size:22px; line-height:1; }
.ind-card h4 { font-family:var(--display); font-size:16px; line-height:1.25; margin-bottom:6px; }
.ind-card p { font-size:13.5px; line-height:1.6; color:var(--muted); }
.ind-runs { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:12px; }
.ind-runs .lbl { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-right:2px; }
.ind-runs .chip { font-size:11px; padding:3px 9px; }
.ind-also { margin-top:16px; font-size:13.5px; color:var(--muted); line-height:1.6; }

.ind-duo { display:grid; gap:16px; margin-top:40px; }
@media (min-width:900px){ .ind-duo { grid-template-columns:.8fr 1.2fr; gap:20px; } }
.ind-why, .ind-ask { padding:22px 20px; border-radius:20px; border:1px solid var(--line); background:var(--panel); }
.ind-w { padding:12px 0; border-top:1px solid var(--line); }
.ind-w:first-of-type { border-top:none; padding-top:0; }
.ind-w b, .ind-qa b { display:block; font-size:15px; margin-bottom:4px; }
.ind-w span, .ind-qa span { font-size:13.5px; color:var(--muted); line-height:1.6; }
.ind-ask { display:grid; gap:16px 22px; align-content:start; }
.ind-ask .ind-h { margin-bottom:0; }
@media (min-width:640px){ .ind-ask { grid-template-columns:1fr 1fr; } .ind-ask .ind-h { grid-column:1 / -1; } }

/* the factory presentation — three fanned slides + read / download / forward */
.ind-deck { margin-top:22px; display:grid; gap:24px; padding:24px 20px; border-radius:22px;
  border:1px solid var(--line); background:var(--panel); }
@media (min-width:900px){ .ind-deck { grid-template-columns:.9fr 1.1fr; align-items:center; gap:44px; padding:34px 36px; } }
.ind-deck-art { position:relative; display:block; aspect-ratio:16 / 9.4; margin:4px 8px 0; max-width:500px; }
.ind-deck-art .pg { position:absolute; left:0; top:0; width:84%; height:auto; aspect-ratio:16 / 9; object-fit:cover;
  border-radius:10px; border:1px solid var(--line-2); box-shadow:0 22px 44px -22px var(--shadow);
  transition:transform .45s var(--ease); background:#0f1629; }
.ind-deck-art .pg3 { transform:translate(19%, 2%) rotate(5deg); }
.ind-deck-art .pg2 { transform:translate(9.5%, 8%) rotate(2deg); }
.ind-deck-art .pg1 { transform:translate(0, 14%); }
@media (hover:hover){
  .ind-deck-art:hover .pg3 { transform:translate(22%, 0) rotate(7deg); }
  .ind-deck-art:hover .pg2 { transform:translate(11%, 6%) rotate(3deg); }
  .ind-deck-art:hover .pg1 { transform:translate(-1%, 15%) rotate(-1deg); }
}
.ind-deck-badge { position:absolute; left:10px; bottom:8px; z-index:2; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 11px; border-radius:100px; background:var(--brand-grad); color:var(--on-brand); }
.ind-deck-txt h3 { font-size:clamp(21px,3.1vw,28px); margin:14px 0 10px; }
.ind-deck-txt p { font-size:15px; color:var(--muted); line-height:1.65; }
.ind-deck-go { display:grid; gap:10px; margin-top:20px; }
/* two buttons side by side only where the text column is wide enough for one line each;
   between 900px and 1179px the column is too narrow, so all three stack */
@media (min-width:560px) and (max-width:899px), (min-width:1180px){
  .ind-deck-go { grid-template-columns:1fr 1fr; } .ind-deck-go .btn.primary { grid-column:1 / -1; } }
.ind-deck-go .btn { white-space:normal; line-height:1.25; }
.ind-deck-txt small { display:block; margin-top:12px; font-size:12.5px; color:var(--muted); }
html.calm .ind-deck-art .pg { transition:none; }

.ind-cta { margin-top:22px; display:grid; gap:20px; padding:28px 22px; border-radius:22px;
  border:1px solid var(--brand-line); background:var(--cta-bg); }
@media (min-width:900px){ .ind-cta { grid-template-columns:1.2fr .8fr; align-items:center; gap:36px; padding:36px 36px; } }
.ind-cta h3 { font-size:clamp(22px,3.4vw,30px); margin:14px 0 10px; }
.ind-cta p { font-size:15px; color:var(--muted); line-height:1.65; }
.ind-cta-go { display:grid; gap:10px; }
.ind-cta-go .btn { white-space:normal; text-align:center; line-height:1.25; }
.ind-cta-go .btn.wa { flex-wrap:wrap; column-gap:8px; }
.ind-cta-go .btn.wa b { font-family:var(--display); font-size:1.12em; letter-spacing:.02em; white-space:nowrap; }
.ind-cta-go small { font-size:12.5px; color:var(--muted); text-align:center; }

/* ── bento / why ──────────────────────────────────────────────── */
.bento { display:grid; gap:12px; }
@media (min-width:700px){ .bento { grid-template-columns:repeat(3,1fr); gap:16px; } .cell.w2 { grid-column:span 2; } }
.cell { padding:24px 22px; border-radius:20px; border:1px solid var(--line); background:var(--panel);
  position:relative; overflow:hidden; }
.cell .ic { font-size:24px; display:block; margin-bottom:14px; }
.cell h3 { font-size:17.5px; margin-bottom:9px; }
.cell p { font-size:14px; color:var(--muted); line-height:1.65; }
.cell .sw { display:block; margin-top:12px; font-size:12.5px; color:var(--brand2); font-style:italic; }
@media (hover:hover){
  .cell::after { content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s; pointer-events:none;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), var(--brand-soft), transparent 65%); }
  .cell:hover::after { opacity:1; }
  .cell:hover { border-color:var(--line-2); }
}

/* ── promise strip ────────────────────────────────────────────── */
.promise { display:grid; gap:12px; margin-top:34px; }
@media (min-width:700px){ .promise { grid-template-columns:repeat(4,1fr); gap:16px; } }
.promise > div { padding:18px; border-radius:16px; border:1px solid var(--brand-line); background:var(--brand-soft); }
.promise b { display:block; font-size:14.5px; margin-bottom:6px; }
.promise span { font-size:12.5px; color:var(--muted); line-height:1.55; }

/* ── pricing ──────────────────────────────────────────────────── */
.per-switch { display:inline-flex; padding:4px; border-radius:100px; border:1px solid var(--line-2);
  background:var(--panel); gap:2px; margin-bottom:26px; }
.per-switch button { padding:9px 16px; border-radius:100px; font-size:13px; font-weight:600;
  color:var(--muted); transition:all .25s; white-space:nowrap; }
.per-switch button[aria-pressed="true"] { background:var(--brand-grad); color:var(--on-brand); }
.per-switch button small { font-size:10.5px; opacity:.85; margin-left:5px; }
/* three billing periods with their discount labels do not fit on one line at
   390px — become a full-width segmented control instead of overflowing */
@media (max-width:560px){
  .per-switch { display:grid; grid-template-columns:repeat(3,1fr); width:100%; border-radius:16px; }
  .per-switch button { padding:10px 6px; font-size:12px; border-radius:13px; white-space:normal; line-height:1.25; }
  .per-switch button small { display:block; margin:2px 0 0; font-size:9.5px; }
}

.mods { display:grid; gap:11px; grid-template-columns:1fr; }
@media (min-width:620px){ .mods { grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (min-width:980px){ .mods { grid-template-columns:repeat(3,1fr); } }
.mod {
  position:relative; padding:20px 19px 18px; border-radius:18px; border:1px solid var(--line);
  background:var(--panel); display:flex; flex-direction:column; text-align:left;
  transition:border-color .28s, transform .28s var(--ease), box-shadow .28s;
}
.mod::before { content:''; position:absolute; inset:0 0 auto 0; height:2.5px; border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--m1),var(--m2)); opacity:.85; }
.mod[aria-pressed="true"] { border-color:var(--m1); box-shadow:0 0 0 1px var(--m1), 0 16px 40px -22px var(--m1); }
.mod[aria-pressed="true"] .mod-check { background:var(--m1); border-color:var(--m1); color:#0b0b12; }
@media (hover:hover){ .mod:hover { transform:translateY(-2px); border-color:var(--line-2); } }
.mod-head { display:flex; align-items:flex-start; gap:10px; }
.mod h3 { font-size:16.5px; line-height:1.25; padding-right:68px; }
.mod[aria-pressed="true"] h3 { padding-right:0; }
.mod .msw { font-size:11.5px; color:var(--m2); margin-top:3px; letter-spacing:.03em; }
.mod-check { margin-left:auto; flex:0 0 auto; width:24px; height:24px; border-radius:8px;
  border:1.5px solid var(--line-2); display:grid; place-items:center; font-size:13px;
  color:transparent; transition:all .25s; }
.mod p { font-size:13.5px; color:var(--muted); line-height:1.6; margin:11px 0 16px; }
.mod .tier { position:absolute; top:14px; right:16px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.mod[aria-pressed="true"] .tier { opacity:0; }
.mod .price { margin-top:auto; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.mod .price .amt { font-family:var(--display); font-size:20px; font-weight:700; }
.mod .price .per { font-size:12px; color:var(--muted); }
.mod .day { margin-top:7px; font-size:11.5px; color:var(--m2); }

.free-card { margin-top:14px; padding:20px; border-radius:18px; border:1px dashed var(--brand-line);
  background:var(--brand-soft); }
.free-card b { display:block; font-family:var(--display); font-size:16px; margin-bottom:7px; }
.free-card p { font-size:13px; color:var(--muted); line-height:1.7; }
.free-card .tag { display:inline-block; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand2); margin-bottom:9px; }

/* live total bar */
.total-bar {
  position:sticky; bottom:14px; z-index:40; margin-top:22px; display:flex; align-items:center;
  gap:14px; padding:14px 18px; border-radius:100px; border:1px solid var(--line-2);
  background:var(--head-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 46px -22px var(--shadow); flex-wrap:wrap;
}
.total-bar .tl { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.total-bar .tv { font-family:var(--display); font-size:22px; font-weight:700; line-height:1.1; }
.total-bar .tv small { font-size:12px; color:var(--muted); font-family:var(--body); font-weight:400; }
.total-bar .tn { font-size:12px; color:var(--brand2); }
.total-bar .btn { margin-left:auto; }
/* the bar is a HUD over the grid, so leave a clear band under the last row */
.mods { padding-bottom:6px; }
#pricing .mod { scroll-margin-bottom:110px; }
@media (max-width:520px){
  .total-bar { border-radius:20px; bottom:calc(var(--mobbar,64px) + 10px); }
  .total-bar .btn { margin-left:0; width:100%; }
}

/* ── steps ────────────────────────────────────────────────────── */
.steps { display:grid; gap:14px; counter-reset:s; }
@media (min-width:760px){ .steps { grid-template-columns:repeat(4,1fr); gap:18px; } }
.step { padding:22px 20px; border-radius:18px; border:1px solid var(--line); background:var(--panel); }
.step .num { font-family:var(--display); font-size:34px; font-weight:700; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--brand); margin-bottom:12px; }
.step h3 { font-size:16px; margin-bottom:7px; }
.step p { font-size:13.5px; color:var(--muted); line-height:1.6; }

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq { display:grid; gap:9px; max-width:900px; }
.qa { border:1px solid var(--line); border-radius:16px; background:var(--panel); overflow:hidden; }
.qa summary {
  list-style:none; cursor:pointer; padding:18px 52px 18px 20px; position:relative;
  font-family:var(--display); font-weight:600; font-size:15.5px; line-height:1.4;
}
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after {
  content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:22px; font-weight:400; color:var(--brand); transition:transform .3s var(--ease);
}
.qa[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.qa .a { padding:0 20px 20px; font-size:14.5px; color:var(--muted); line-height:1.75; }
@media (hover:hover){ .qa:hover { border-color:var(--line-2); } }

/* ── final CTA ────────────────────────────────────────────────── */
.cta-final {
  text-align:center; padding:48px 24px; border-radius:26px; position:relative; overflow:hidden;
  border:1px solid var(--brand-line); background:var(--cta-bg);
}
@media (min-width:768px){ .cta-final { padding:72px 40px; } }
.cta-final .cta-row { justify-content:center; }
.cta-final .lead { max-width:520px; margin:16px auto 0; }

/* ── footer ───────────────────────────────────────────────────── */
footer.site { border-top:1px solid var(--line); padding:48px 0 100px; margin-top:20px; }
@media (min-width:1000px){ footer.site { padding-bottom:48px; } }
footer .cols { display:grid; gap:30px; }
@media (min-width:760px){ footer .cols { grid-template-columns:1.4fr 1fr 1fr; gap:40px; } }
footer .sub { font-size:13.5px; color:var(--muted); line-height:1.65; margin-top:14px; max-width:340px; }
footer h4 { font-family:var(--display); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px; }
footer .fnav { display:flex; flex-direction:column; gap:10px; font-size:14px; }
footer .fnav a { color:var(--muted); transition:color .2s; }
@media (hover:hover){ footer .fnav a:hover { color:var(--brand2); } }
footer .fine { margin-top:36px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  font-size:12px; color:var(--muted); }

/* ── WhatsApp float + mobile action bar ───────────────────────── */
.wa-float {
  position:fixed; right:16px; bottom:calc(var(--mobbar,64px) + 14px); z-index:70;
  display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 18px 0 15px;
  border-radius:100px; background:#25d366; color:#062d16; font-weight:700; font-size:14px;
  box-shadow:0 12px 34px -10px rgba(37,211,102,.65); transition:transform .3s var(--ease);
}
.wa-float svg { width:22px; height:22px; flex:0 0 auto; }
.wa-float .lbl { display:none; }
/* Below 1000px the bottom action bar already carries WhatsApp, so a second
   floating WhatsApp pill is pure clutter covering the content. */
@media (max-width:999px){ .wa-float { display:none; } }
@media (min-width:1000px){
  .wa-float { bottom:22px; }
  .wa-float .lbl { display:inline; }
}
@media (hover:hover){ .wa-float:hover { transform:translateY(-3px) scale(1.03); } }
/* the running total takes over the bottom-right corner while pricing is on
   screen — two floating pills fighting for the same 60px is the classic
   mobile-landing-page mistake */


.mobbar {
  position:fixed; inset:auto 0 0 0; z-index:75; display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--head-bg); backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom);
}
.mobbar a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 4px 8px; font-size:10.5px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.mobbar a .e { font-size:17px; line-height:1; }
.mobbar a.hot { color:var(--brand2); }
@media (min-width:1000px){ .mobbar { display:none; } }
body { --mobbar:64px; }
@media (min-width:1000px){ body { --mobbar:0px; } }

/* ── reveal on scroll ─────────────────────────────────────────────
   Progressive enhancement: content is VISIBLE by default and only
   starts hidden when JavaScript has confirmed it is running (the
   inline script in <head> adds .js). If a script fails, an ad blocker
   eats v3.js, or a crawler renders without it, the page still shows
   every word instead of a wall of empty sections. */
.js .rv-el { opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv-el.in { opacity:1; transform:none; }
.d1 { transition-delay:.08s } .d2 { transition-delay:.16s } .d3 { transition-delay:.24s }

/* ── marquee ──────────────────────────────────────────────────── */
.marquee { overflow:hidden; border-block:1px solid var(--line); padding:14px 0; margin-top:34px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee .track { display:flex; gap:28px; width:max-content; animation:tick 34s linear infinite;
  font-family:var(--display); font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); }
.marquee b { color:var(--brand); }

/* ── theme compare switch (removed before launch if not wanted) ─ */
.theme-switch { position:fixed; left:16px; bottom:calc(var(--mobbar,64px) + 14px); z-index:70;
  display:inline-flex; gap:2px; padding:4px; border-radius:100px; border:1px solid var(--line-2);
  background:var(--head-bg); backdrop-filter:blur(14px); font-size:11px; }
@media (min-width:1000px){ .theme-switch { bottom:22px; } }
.theme-switch a { padding:6px 12px; border-radius:100px; color:var(--muted); font-weight:600; letter-spacing:.06em; }
.theme-switch a.on { background:var(--brand-grad); color:var(--on-brand); }

/* ── Calm mode ─────────────────────────────────────────────────────
   A visible control, not a buried setting. It stops every animation
   AND removes the glow — for photosensitivity, migraine, eye strain,
   a bright afternoon, or a tired phone. The page stays complete and
   fully readable; it simply stops moving and stops shining. */
.calm-btn {
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 13px;
  border-radius:100px; border:1px solid var(--line-2); font-size:12.5px; font-weight:600;
  color:var(--muted); background:var(--glass); white-space:nowrap;
}
.calm-btn::before { content:'✦'; font-size:12px; color:var(--brand2); }
html.calm .calm-btn::before { content:'○'; color:var(--muted); }
@media (hover:hover){ .calm-btn:hover { color:var(--ink); border-color:var(--brand); } }

html.calm *, html.calm *::before, html.calm *::after {
  animation:none !important;
  transition-duration:.12s !important;
  text-shadow:none !important;
}
/* keep depth, drop the light */
html.calm .btn.primary,
html.calm .frame,
html.calm .wa-float,
html.calm .sc-tab[aria-selected="true"],
html.calm .rv-prize { box-shadow:0 6px 20px -12px rgba(0,0,0,.8) !important; }
html.calm .jp-amount { filter:none !important; }
html.calm .eos-sky { opacity:.35; }
html.calm .eos-sky::after { opacity:.5; }
html.calm .eos-floor { opacity:.6; }
html.calm .eos-floor::before { opacity:.4; }
html.calm .rv-confetti { display:none; }
html.calm .grad { filter:none !important; }
html.calm body::before, html.calm body::after { opacity:.28; }
html.calm .rv-out { opacity:1 !important; transform:none !important; }
html.calm .rv-build { display:none; }
html.calm .marquee .track { transform:none; }
/* a still page must never hide content behind a reveal */
html.calm .rv-el { opacity:1 !important; transform:none !important; }

/* ── accessibility: honour reduced motion everywhere ──────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv-el { opacity:1; transform:none; }
}