/* SweepEngine — site C "Payline Network": one build routed through glass paylines to every eligible operator.
   Tokens come first; every colour, size, radius, shadow and duration below is drawn from :root.
   style-tile.html shares these tokens. */
:root{
  /* base and text */
  --bg-0:#040320;
  --bg-1:#07062e;
  --text:#f4f2ff;
  --muted:#b8b3d9;        /* about 10:1 on the base */
  --dim:#8e88b8;          /* fine print, about 5.8:1 */
  --white:#fff;
  --ink:#040320;
  /* accents: violet is the brand accent, cyan belongs to studios, gold to operators */
  --violet:#a78bfa;
  --cyan:#67d8f9;
  --gold:#e7c66c;
  --magenta:#e040fb;
  --fuchsia:#b21fc4;      /* the primary fill's magenta end, 5.4:1 under white text */
  --indigo:#7c3aed;
  --blue:#2563eb;
  --live:#8ff0b8;
  --live-dot:#3ee07a;
  --focus:#67d8f9;
  /* glass surfaces: translucent navy-violet, a lavender edge, a faint light along the top */
  --surface:rgba(22,16,64,.55);
  --surface-2:rgba(22,16,64,.8);
  --surface-solid:#100c3a;
  --header-bg:rgba(4,3,32,.74);
  --input-bg:rgba(4,3,32,.6);
  --bubble-bot:rgba(167,139,250,.14);
  --edge:rgba(167,139,250,.35);
  --edge-soft:rgba(167,139,250,.18);
  --edge-cyan:rgba(103,216,249,.5);
  --edge-gold:rgba(231,198,108,.5);
  --hair:rgba(184,179,217,.16);
  --hair-strong:rgba(184,179,217,.3);
  --rim:inset 0 1px 0 rgba(255,255,255,.07);
  --inner-top:linear-gradient(180deg,rgba(255,255,255,.05),transparent 38%);
  --hairline:linear-gradient(90deg,transparent,rgba(184,179,217,.22) 18%,rgba(184,179,217,.22) 82%,transparent);
  --hairline-v:linear-gradient(180deg,rgba(184,179,217,.3),rgba(184,179,217,.06));
  /* light fields and glows (CSS only; the artwork carries its own light) */
  --glow-violet:rgba(124,58,237,.22);
  --glow-blue:rgba(37,99,235,.16);
  --glow-magenta:rgba(224,64,251,.12);
  --glow-cyan:rgba(103,216,249,.1);
  --glow-gold:rgba(231,198,108,.1);
  --button-glow:rgba(124,58,237,.55);
  --button-glow-strong:rgba(124,58,237,.75);
  --button-edge:rgba(224,64,251,.45);
  --button-edge-in:rgba(255,255,255,.18);
  --ico-fill:linear-gradient(160deg,rgba(124,58,237,.55),rgba(37,99,235,.35));
  /* the page is one continuous navy-violet field */
  --page:linear-gradient(180deg,#040320 0%,#07062e 36%,#06052a 68%,#040320 100%);
  --primary-fill:linear-gradient(90deg,#b21fc4 0%,#7c3aed 52%,#2563eb 100%);
  --quiet-edge:linear-gradient(90deg,rgba(103,216,249,.7),rgba(167,139,250,.7));
  --quiet-edge-hover:linear-gradient(90deg,#67d8f9,#a78bfa);
  /* the recurring luminous connector: cyan into violet into gold */
  --path:linear-gradient(90deg,rgba(103,216,249,0),rgba(103,216,249,.85) 14%,rgba(167,139,250,.85) 50%,rgba(231,198,108,.95) 86%,rgba(231,198,108,0));
  --path-v:linear-gradient(180deg,rgba(103,216,249,.85),rgba(167,139,250,.85) 50%,rgba(231,198,108,.95));
  --path-gold:linear-gradient(90deg,transparent,rgba(167,139,250,.55) 40%,rgba(231,198,108,.95));
  --path-gold-v:linear-gradient(180deg,rgba(167,139,250,.1),rgba(167,139,250,.55) 40%,rgba(231,198,108,.95));
  --pass:linear-gradient(90deg,transparent 36%,rgba(255,255,255,.6) 50%,transparent 64%);
  --mask-x:linear-gradient(90deg,transparent,#000 6%,#000 97%,transparent);
  --mask-y:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  --mask-x-full:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  --mask-y-deep:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  --mask-y-mid:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  /* type: Manrope for headlines and figures (its face is declared with a 1.0em ascent+descent box in fonts.css, so tight
     leading doesn't make neighbouring line boxes overlap), Instrument Sans for body and controls */
  --display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-hero:clamp(48px,5vw - 8px,64px);   /* 56 at 1280, 64 from 1440 */
  --t-2:clamp(30px,22px + 1.4vw,40px);
  --t-3:clamp(24px,20px + .6vw,28px);
  --t-4:20px;
  --t-body:clamp(16px,15px + .25vw,18px);
  --t-small:15px;
  --t-fine:14px;
  --t-micro:13px;
  --t-figure:clamp(36px,30px + .8vw,44px);
  --t-promise:clamp(40px,4.4vw,64px);
  /* spacing: a 4/8 scale */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --gutter:clamp(20px,3.5vw,44px);
  --max:1240px;
  --header-h:76px;
  /* radius steps with element size; nested corners stay concentric */
  --r-chip:8px;--r-ctl:12px;--r-tile:16px;--r-panel:24px;
  /* three navy-tinted shadow levels */
  --elev-1:0 1px 1px rgba(2,1,20,.35),0 3px 8px rgba(2,1,20,.3),0 10px 20px rgba(2,1,20,.25);
  --elev-2:0 1px 2px rgba(2,1,20,.35),0 8px 16px rgba(2,1,20,.3),0 24px 48px rgba(2,1,20,.35);
  --elev-3:0 2px 4px rgba(2,1,20,.35),0 16px 32px rgba(2,1,20,.35),0 48px 96px rgba(2,1,20,.45);
  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-travel:cubic-bezier(.45,0,.55,1);
  --d-ctl:180ms;--d-reveal:480ms;--d-pass:9s;--d-pulse:8s;
  color-scheme:dark;
}
@media (max-width:1020px){:root{--t-hero:clamp(36px,7vw + 15px,48px)}}
@media (max-width:760px){:root{--header-h:64px;--t-body:16px}}

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 16px);-webkit-text-size-adjust:100%;background:var(--bg-0)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html,body{font-kerning:normal;overflow-x:clip}
body{margin:0;background:var(--page);color:var(--text);font:400 var(--t-body)/1.55 var(--body);font-feature-settings:"kern" 1}
img{display:block;max-width:100%}
a{color:inherit}
svg{display:block}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-80px;z-index:100;display:inline-flex;align-items:center;min-height:44px;background:var(--cyan);color:var(--ink);padding:0 var(--s-4);font-weight:600;border-radius:var(--r-chip);text-decoration:none}
.skip-link:focus{top:12px}
/* paired long/short copy: the short version shows on phones and landscape phones */
.cs{display:none}
@media (max-width:760px),(max-height:520px) and (orientation:landscape){.cl{display:none}.cs{display:inline}}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:var(--s-5);
  height:calc(var(--header-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gutter) 0;
  background:var(--header-bg);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hairline);pointer-events:none}
.brand{flex:0 1 auto;min-width:0;display:flex;align-items:center;min-height:44px;border-radius:4px}
.brand img{width:clamp(170px,20vw,240px);height:auto}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);font-size:var(--t-small)}
.site-nav a{text-decoration:none;color:var(--muted);min-height:44px;display:inline-flex;align-items:center;transition:color var(--d-ctl) var(--ease)}
.site-nav a:hover{color:var(--text)}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:var(--s-2);min-height:44px;min-width:44px;padding:0 var(--s-1);background:none;border:0;color:var(--text);font:500 15px var(--body);cursor:pointer;border-radius:var(--r-chip)}
.menu-icon,.menu-icon::before{display:block;width:22px;height:2px;background:currentColor;transition:transform var(--d-ctl) var(--ease)}
.menu-icon{position:relative;transform:translateY(-3.5px)}
.menu-icon::before{content:"";position:absolute;top:7px}
.menu-btn[aria-expanded="true"] .menu-icon{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-icon::before{transform:translateY(-7px) rotate(-90deg)}
.header-cta{display:none}

/* ---------- Buttons and chips ---------- */
.ctas{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:52px;padding:0 var(--s-5);border-radius:var(--r-ctl);border:0;
  font:600 16px/1.2 var(--body);color:var(--text);text-decoration:none;text-align:center;text-wrap:balance;cursor:pointer;
  transition:transform var(--d-ctl) var(--ease),box-shadow var(--d-ctl) var(--ease),color var(--d-ctl) var(--ease),background-color var(--d-ctl) var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
/* a label and its arrow stay in one span, so they centre and wrap together */
.btn-label svg{display:inline-block;vertical-align:-4px;margin-left:var(--s-1)}
.btn .arrow{transition:transform var(--d-ctl) var(--ease)}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.chip:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* primary: the magenta-violet-blue fill with a luminous edge; the one bright control on a screen */
.btn-primary{background:var(--primary-fill);color:var(--white);box-shadow:inset 0 0 0 1px var(--button-edge-in),0 0 0 1px var(--button-edge),0 12px 28px -12px var(--button-glow)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--button-edge-in),0 0 0 1px var(--button-edge),0 16px 34px -12px var(--button-glow-strong)}
.btn-primary:hover .arrow{transform:translateX(3px)}
.btn-primary:active{transform:scale(.97)}
/* quiet: dark fill, a fine cyan-to-violet edge */
.btn-quiet{background:linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box,var(--quiet-edge) border-box;border:1px solid transparent;color:var(--text)}
.btn-quiet:hover{--quiet-edge:var(--quiet-edge-hover);transform:translateY(-1px)}
.btn-quiet:active{transform:scale(.97)}
.site-nav .nav-cta{min-height:44px;padding:0 var(--s-4);border-radius:var(--r-ctl);font-size:var(--t-small);font-weight:600;color:var(--text);
  background:linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box,var(--quiet-edge) border-box;border:1px solid transparent;transition:transform var(--d-ctl) var(--ease)}
.site-nav .nav-cta:hover{--quiet-edge:var(--quiet-edge-hover);transform:translateY(-1px)}
.chip{min-height:44px;padding:0 var(--s-4);border-radius:var(--r-chip);font:600 14px/1.2 var(--body);color:var(--text);cursor:pointer;text-align:center;
  border:1px solid var(--edge-cyan);background:var(--surface);transition:transform var(--d-ctl) var(--ease),border-color var(--d-ctl) var(--ease),background-color var(--d-ctl) var(--ease)}
.chip:hover{transform:translateY(-1px);border-color:var(--cyan);background:var(--surface-2)}
.chip:active{transform:scale(.97)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:calc(var(--header-h) + env(safe-area-inset-top) + var(--s-7)) var(--gutter) var(--s-8);
  background:radial-gradient(ellipse 46% 58% at 72% 40%,var(--glow-violet),transparent 70%),radial-gradient(ellipse 34% 42% at 90% 68%,var(--glow-blue),transparent 70%),radial-gradient(ellipse 20% 26% at 60% 28%,var(--glow-magenta),transparent 70%)}
.hero-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);grid-template-areas:"copy art" "metrics art" "sources art" "strip strip";column-gap:clamp(32px,4vw,64px);align-items:start}
.hero-copy{grid-area:copy;padding-top:var(--s-4)}
.hero h1{margin:0 0 var(--s-5);font:800 var(--t-hero)/1.04 var(--display);letter-spacing:-.03em;color:var(--text);text-wrap:balance}
/* the headline breaks as two lines from 761 px ("The Future of / Slot Distribution.") and three on phones ("The Future / of Slot / Distribution."), where the second phrase would overflow at 360 px */
.hero h1 .br-p{display:none}
@media (max-width:760px){.hero h1 .br-p{display:inline}.hero h1 .br-d{display:none}}
.hero h1 .accent{color:var(--violet)}
.lede{margin:0 0 var(--s-6);max-width:44ch;color:var(--muted);font-size:var(--t-body);line-height:1.55}
/* artwork: the signature object, floating with no frame; its edges are feathered into the page */
.hero-art{grid-area:art;align-self:stretch;position:relative;min-height:440px}
.hero-frame{position:absolute;inset:0;overflow:hidden;isolation:isolate;-webkit-mask-image:var(--mask-x),var(--mask-y);mask-image:var(--mask-x),var(--mask-y);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:88% 50%}
.light-pass{position:absolute;inset:-20% -10%;pointer-events:none;mix-blend-mode:screen;opacity:.3;background:var(--pass);transform:translateX(-80%) rotate(14deg)}
.paylines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* loop videos: the still underneath is the poster; the clip fades in once it plays and the CSS overlay steps aside */
.loop-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;pointer-events:none;transition:opacity 900ms var(--ease)}
.video-on .loop-video{opacity:1}
.hero-art.video-on .light-pass,.hero-art.video-on .paylines{display:none}
html:not(.js) .loop-video,.motion-off .loop-video{display:none}
.paylines .lane{fill:none;stroke:none}
.pulse{fill:none;stroke-linecap:round;stroke-width:var(--sw-tail,8);stroke-dasharray:60 2000;stroke-dashoffset:60;opacity:.95}
.pulse.halo{stroke-width:var(--sw-halo,22);opacity:.26}
.pulse.head{stroke-width:var(--sw-head,11);stroke-dasharray:10 2000;stroke-dashoffset:10;opacity:1}
.c-cyan{stroke:var(--cyan)}.c-magenta{stroke:var(--magenta)}.c-violet{stroke:var(--violet)}.c-gold{stroke:var(--gold)}
.sparkles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1}
.spark{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.spark .halo{opacity:.8}
.spark.flare use{transform-box:fill-box;transform-origin:center;transform:scale(1.25)}
html:not(.js) .paylines,html:not(.js) .sparkles,.motion-off .light-pass,.motion-off .paylines,.motion-off .sparkles{display:none}
@media (prefers-reduced-motion:no-preference){
  .light-pass{animation:pass var(--d-pass) var(--ease) infinite}
  .pulse{animation:pulse var(--d-pulse) linear infinite;animation-delay:var(--delay,0s)}
  .pulse.head{animation-name:pulse-head}
  .spark{animation:twinkle var(--t,8s) cubic-bezier(.37,0,.63,1) infinite;animation-delay:var(--delay,0s)}
  .hero-copy,.hero-art,.metrics,.sources,.strip{animation:settle var(--d-reveal) var(--ease) both}
  .hero-art{animation-delay:90ms}
  .metrics,.sources{animation-delay:140ms}
  .strip{animation-delay:200ms}
}
.hero-art.paused .light-pass,.hero-art.paused .pulse,.hero-art.paused .spark{animation-play-state:paused}
@keyframes pass{0%{transform:translateX(-80%) rotate(14deg)}55%{transform:translateX(80%) rotate(14deg)}100%{transform:translateX(80%) rotate(14deg)}}
@keyframes pulse{0%{stroke-dashoffset:60;animation-timing-function:var(--ease-travel)}42%{stroke-dashoffset:-1000}100%{stroke-dashoffset:-1000}}
@keyframes pulse-head{0%{stroke-dashoffset:10;animation-timing-function:var(--ease-travel)}42%{stroke-dashoffset:-1050}100%{stroke-dashoffset:-1050}}
@keyframes twinkle{0%{opacity:0;transform:scale(.4) rotate(0deg)}10%{opacity:1;transform:scale(1) rotate(15deg)}24%{opacity:0;transform:scale(.5) rotate(30deg)}100%{opacity:0;transform:scale(.5) rotate(30deg)}}
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* metric tiles: the four real market figures, two by two under the copy */
.metrics{grid-area:metrics;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin:var(--s-7) 0 0}
.metrics>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--s-2);min-width:0;padding:var(--s-4) var(--s-5) var(--s-4);border-radius:var(--r-tile);
  background:var(--inner-top),var(--surface);box-shadow:0 0 0 1px var(--edge),var(--rim),var(--elev-1)}
.metrics dd{margin:0;font:800 var(--t-figure)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.metrics dt{color:var(--muted);font-size:var(--t-small);line-height:1.35;text-wrap:balance}
.sources{grid-area:sources;margin:var(--s-4) 0 0;font-size:var(--t-fine);color:var(--dim);max-width:60ch}
/* process strip: four illuminated icon blocks on one luminous path */
.strip{grid-area:strip;list-style:none;margin:var(--s-7) 0 0;padding:var(--s-4) var(--s-5);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);
  border-radius:var(--r-panel);background:var(--inner-top),var(--surface);box-shadow:0 0 0 1px var(--edge-soft),var(--rim),var(--elev-1)}
.strip li{position:relative;display:flex;align-items:center;gap:var(--s-3);min-width:0}
.strip .ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-ctl);color:var(--text);background:var(--ico-fill);box-shadow:0 0 0 1px var(--edge),var(--rim),0 0 20px var(--glow-violet)}
.strip .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.strip .lbl{flex:none;display:grid;gap:2px}
.strip .lbl small{font:600 var(--t-micro)/1 var(--body);color:var(--dim);font-variant-numeric:tabular-nums}
.strip .lbl b{font:800 var(--t-small)/1.2 var(--display);color:var(--text);letter-spacing:-.01em}
.strip .link{flex:1 1 12px;height:1px;margin-right:calc(-1 * var(--s-4));background:var(--path)}

/* ---------- Sections below the hero: quiet, varied ---------- */
.section{padding:var(--s-9) var(--gutter)}
.section>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.section-title{margin:0 0 var(--s-7);font:800 var(--t-2)/1.05 var(--display);letter-spacing:-.02em;color:var(--text);text-wrap:balance;max-width:26ch}
.process{background:radial-gradient(ellipse 50% 60% at 8% 50%,var(--glow-cyan),transparent 70%)}
#process-title,#stake-title{color:var(--cyan)}
#trusted-title{color:var(--gold)}
.flow{position:relative;margin:0 auto var(--s-7)}
.flow-stage{position:relative}
.flow-frame{position:relative;aspect-ratio:3/1;overflow:hidden;isolation:isolate;-webkit-mask-image:var(--mask-x-full),var(--mask-y-deep);mask-image:var(--mask-x-full),var(--mask-y-deep);-webkit-mask-composite:source-in;mask-composite:intersect}
.flow-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%}
.flow .loop-video{object-position:50% 48%}
.flow-caption{margin:var(--s-3) 0 0;font-size:var(--t-fine);color:var(--dim)}
/* the four steps joined by the connector, which draws once when the section comes into view */
.track{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5);position:relative}
.track::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:1px;background:var(--path);transform-origin:left center;transition:transform var(--d-reveal) var(--ease)}
.reveal-on .track:not(.in)::before{transform:scaleX(0)}
.track li{position:relative;padding-right:var(--s-4);min-width:0}
.step-n{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-solid);box-shadow:0 0 0 1px var(--edge),var(--rim);font:800 18px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--text)}
.track h3{margin:var(--s-5) 0 var(--s-2);font:800 var(--t-4)/1.2 var(--display);letter-spacing:-.01em;color:var(--text)}
.track p{margin:0;color:var(--muted);max-width:26ch}
/* two audience panels: studios in cyan, operators in gold */
.sides-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);align-items:stretch}
.side{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:var(--s-6);border-radius:var(--r-panel);background:var(--inner-top),var(--surface);box-shadow:0 0 0 1px var(--edge-soft),var(--rim),var(--elev-1);overflow:hidden;scroll-margin-top:calc(var(--header-h) + 24px)}
.side::before{content:"";position:absolute;left:var(--s-6);right:40%;top:0;height:2px;background:var(--side-line);border-radius:0 0 2px 2px}
.side-studio{--side-line:linear-gradient(90deg,var(--cyan),transparent)}
.side-operator{--side-line:linear-gradient(90deg,var(--gold),transparent)}
.side-label{margin:0 0 var(--s-2);font:600 var(--t-small)/1.2 var(--body)}
.side-studio .side-label,.side-studio .side-lead{color:var(--cyan)}
.side-operator .side-label,.side-operator .side-lead{color:var(--gold)}
.side-lead{margin:0 0 var(--s-5);font:800 var(--t-3)/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.side ul{list-style:none;margin:0 0 var(--s-6);padding:0;width:100%}
.side li{padding:var(--s-3) 0;border-top:1px solid var(--hair);color:var(--text)}
.side li:last-child{border-bottom:1px solid var(--hair)}
.side .btn{margin-top:auto}
/* economics as a typographic statement; the connector runs as a hairline into the gold total */
.economics{background:radial-gradient(ellipse 40% 60% at 90% 55%,var(--glow-gold),transparent 70%)}
.economics{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(640px,50%));column-gap:var(--s-8);align-items:center}
section.economics{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2));padding-right:max(var(--gutter),calc((100vw - var(--max)) / 2))}
.econ-copy{min-width:0}
.econ-media{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;isolation:isolate;-webkit-mask-image:var(--mask-x-full),var(--mask-y-deep);mask-image:var(--mask-x-full),var(--mask-y-deep);-webkit-mask-composite:source-in;mask-composite:intersect}
.econ-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:1023px){
  .economics{grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}
  .econ-media{aspect-ratio:3/2;margin:0 calc(-1 * var(--gutter));-webkit-mask-image:var(--mask-x-full),var(--mask-y-mid);mask-image:var(--mask-x-full),var(--mask-y-mid)}
}
.promise{position:relative;margin:0;padding-bottom:var(--s-6);max-width:16ch;font:800 var(--t-promise)/1.02 var(--display);letter-spacing:-.03em;color:var(--text);text-wrap:balance}
.promise .match{color:var(--gold)}
.promise::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--path-gold);transform-origin:left center;transition:transform var(--d-reveal) var(--ease) 120ms}
.reveal-on .promise:not(.in)::after{transform:scaleX(0)}
.fine{margin:var(--s-6) auto 0;font-size:var(--t-fine);color:var(--dim);max-width:72ch}
.economics .fine{margin-left:0}
/* operator wall: official icons, one monochrome treatment, names beside them */
.wordmarks{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6) var(--s-4)}
.wordmarks li{display:flex;align-items:center;gap:var(--s-3);min-width:0;font:600 var(--t-small)/1.2 var(--body);color:var(--muted)}
.wordmarks img{flex:none;width:48px;height:48px;border-radius:var(--r-ctl);filter:grayscale(1);opacity:.88;box-shadow:0 0 0 1px var(--hair-strong)}
/* the Stake comparison: a quiet band between hairlines */
.stake{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;padding-top:var(--s-6);padding-bottom:var(--s-6);background:var(--hairline) top/100% 1px no-repeat,var(--hairline) bottom/100% 1px no-repeat}
.stake>div{flex:1 1 320px;min-width:0}
.stake h2{margin:0 0 var(--s-1);font:800 var(--t-3)/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.stake p{margin:0;color:var(--muted)}
/* the Stake icon sits in the heading at cap height, on the baseline, and never wraps away from its question mark */
.stake-word{white-space:nowrap}
.stake-word img{display:inline-block;width:2.4em;height:2.4em;border-radius:.5em;vertical-align:middle;margin:.1em .12em .15em .06em;filter:grayscale(1);opacity:.9;box-shadow:0 0 0 1px var(--hair-strong)}
section.stake{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2));padding-right:max(var(--gutter),calc((100vw - var(--max)) / 2))}
section.stake>*{margin:0}

/* ---------- AI agent chat ---------- */
.contact{background:radial-gradient(ellipse 50% 50% at 50% 60%,var(--glow-violet),transparent 72%);outline:none}
.chat{display:grid;gap:var(--s-6)}
@media (min-width:1021px){
  .chat{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4vw,64px);align-items:center;padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2));padding-right:max(var(--gutter),calc((100vw - var(--max)) / 2))}
  section.chat>*{max-width:none;margin-left:0;margin-right:0}
}
.chat-intro{display:grid;gap:var(--s-4);align-content:center;justify-items:start}
.chat-intro h2{margin:0;font:800 var(--t-2)/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance}
.chat-lede{margin:0;color:var(--muted);max-width:44ch}
.chat-suggest{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,max-content);gap:var(--s-2)}
.chat-intro .ctas{margin-top:var(--s-2)}
.chat-intro a:not(.btn){color:var(--violet)}
.chat-card{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-panel);overflow:hidden;background:var(--inner-top),var(--surface-2);box-shadow:0 0 0 1px var(--edge),var(--rim),var(--elev-3)}
.chat-head{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--hair)}
.chat-head b{display:block;font:700 16px/1.2 var(--body);color:var(--text)}
.chat-avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface-solid);box-shadow:0 0 0 1px var(--edge-cyan),0 0 16px var(--glow-cyan)}
.chat-avatar::before{content:"";display:block;width:36px;height:20px;background:url("assets/logo-lockup.webp") no-repeat 0 50%/auto 20px}
.chat-status{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font:500 var(--t-micro)/1.2 var(--body);color:var(--muted)}
.chat-status i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.chat.is-live .chat-status{color:var(--live)}
.chat.is-live .chat-status i{background:var(--live-dot);box-shadow:0 0 10px var(--live-dot)}
.chat-log{list-style:none;margin:0;padding:var(--s-4) var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);height:clamp(240px,34vh,340px);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.msg{margin:0;max-width:86%;padding:var(--s-3) var(--s-4);border-radius:var(--r-tile);font-size:var(--t-small);line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.msg.bot{align-self:flex-start;color:var(--text);background:var(--bubble-bot);border-bottom-left-radius:var(--s-1)}
.msg.you{align-self:flex-end;color:var(--white);background:var(--indigo);border-bottom-right-radius:var(--s-1)}
.msg.typing{color:var(--muted);font-style:italic}
.chat-form{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-top:1px solid var(--hair);background:var(--input-bg)}
.chat-form input{flex:1 1 auto;min-width:0;width:100%;min-height:48px;padding:0 var(--s-4);border-radius:var(--r-chip);border:1px solid var(--edge);background:var(--input-bg);color:var(--text);font:400 15px/1 var(--body)}
.chat-form input::placeholder{color:var(--dim)}
.chat-form input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.chat-form .btn{min-height:48px;padding:0 var(--s-5);flex:none;border-radius:var(--r-chip)}
.chat-form .btn:disabled{opacity:.6;cursor:progress}
.chat-note{margin:0;padding:0 var(--s-5) var(--s-4);font-size:var(--t-micro);line-height:1.4;color:var(--dim)}
.chat-note a{padding-block:6px;color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--d-ctl) var(--ease)}
.chat-note a:hover{color:var(--text)}
.chat>*,.chat-card,.chat-form{min-width:0}

/* ---------- Footer ---------- */
.site-footer{padding:var(--s-7) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom));color:var(--dim);font-size:var(--t-fine);text-align:center;background:var(--hairline) top/100% 1px no-repeat}
.site-footer>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.site-footer img{width:180px;height:auto;margin-bottom:var(--s-4)}
.site-footer p{margin:6px auto;max-width:80ch}
.site-footer .footer-note{max-width:50ch;text-wrap:balance}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin:var(--s-2) 0 var(--s-1)}
.footer-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--d-ctl) var(--ease)}
.footer-legal a:hover{color:var(--text)}

/* ---------- Below 1181px the hero stacks: copy, then the artwork at 16:10 across the full width ---------- */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "art" "metrics" "sources" "strip"}
  .hero-copy{padding-top:0}
  .hero-art{align-self:auto;min-height:0;aspect-ratio:5/4;max-width:720px;margin-top:var(--s-6)}
  .hero-frame{-webkit-mask-image:var(--mask-x-full),var(--mask-y);mask-image:var(--mask-x-full),var(--mask-y)}
  .hero-img{object-position:50% 30%}
  .metrics{margin-top:var(--s-6)}
}

/* ---------- Tablet (the menu folds) ---------- */
@media (max-width:1020px){
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:var(--s-2) var(--gutter) var(--s-5);background:var(--bg-0);border-bottom:1px solid var(--hair)}
  .site-nav.open{display:flex}
  .site-nav a{min-height:52px;border-bottom:1px solid var(--hair);font-size:17px}
  .site-nav .nav-cta{margin-top:var(--s-4);justify-content:center;border-bottom:1px solid transparent}
  .menu-btn{display:inline-flex}
  .header-cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;margin-left:auto;min-height:44px;padding:0 var(--s-4);border-radius:var(--r-ctl);font:600 15px/1 var(--body);color:var(--white);text-decoration:none;white-space:nowrap;
    background:var(--primary-fill);box-shadow:inset 0 0 0 1px var(--button-edge-in),0 0 0 1px var(--button-edge),0 10px 24px -12px var(--button-glow);transition:transform var(--d-ctl) var(--ease),box-shadow var(--d-ctl) var(--ease),opacity var(--d-ctl) var(--ease),visibility var(--d-ctl)}
  .header-cta:hover{box-shadow:inset 0 0 0 1px var(--button-edge-in),0 0 0 1px var(--button-edge),0 14px 30px -12px var(--button-glow-strong)}
  .header-cta:active{transform:scale(.97)}
  .header-cta.is-tucked{opacity:0;visibility:hidden;pointer-events:none}
  .header-cta+.menu-btn{margin-left:0}
  .site-header:has(.menu-btn[aria-expanded="true"]) .header-cta{visibility:hidden}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .strip li:nth-child(2) .link{display:none}
  .track{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-7)}
  .track::before{display:none}
  .wordmarks{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- Phones ---------- */
@media (max-width:760px){
  .hero{padding-bottom:var(--s-7)}
  .hero-copy{text-align:center}
  .hero h1,.lede{margin-left:auto;margin-right:auto}
  .hero .ctas{flex-direction:column;align-items:stretch}
  .hero .ctas .btn{width:100%}
  .hero-art{aspect-ratio:4/5;max-width:none;margin-top:var(--s-5)}
  .hero-img{object-position:50% 50%}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-5)}
  .metrics>div{padding:var(--s-4)}
  .sources{text-align:center;margin-left:auto;margin-right:auto}
  .strip{grid-template-columns:minmax(0,1fr);gap:var(--s-4);padding:var(--s-4);margin-top:var(--s-6)}
  .strip li{align-items:center}
  .strip .link{display:none}
  .strip li:not(:last-child)::after{content:"";position:absolute;left:23.5px;top:48px;bottom:calc(-1 * var(--s-4));width:1px;background:var(--path-v)}
  .section{padding:var(--s-8) var(--gutter)}
  .section-title{margin-bottom:var(--s-6)}
  .flow{margin-bottom:var(--s-6);margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .flow-frame{aspect-ratio:2/1}
  .flow-caption{padding:0 var(--gutter)}
  .track{grid-template-columns:minmax(0,1fr);row-gap:var(--s-5)}
  .track li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--s-4);padding:0}
  .track .step-n{grid-row:span 2}
  .track h3{margin:var(--s-2) 0 var(--s-1)}
  .track li:not(:last-child)::after{content:"";position:absolute;left:21.5px;top:44px;bottom:calc(-1 * var(--s-5));width:1px;background:var(--path-v)}
  .sides-grid{grid-template-columns:minmax(0,1fr)}
  .side{padding:var(--s-5)}
  .side::before{left:var(--s-5)}
  .side .btn{width:100%}
  /* the sum as three full-width rows, like a receipt, with the connector running down into the total */
  .wordmarks{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-3)}
  .wordmarks li{flex-direction:column;justify-content:center;gap:var(--s-2);text-align:center}
  .stake{flex-direction:column;align-items:flex-start;text-align:left}
  .stake>div{flex:0 0 auto;width:100%}
  .stake .btn{width:100%}
  .chat-intro{justify-items:center;text-align:center}
  .chat-lede{margin-left:auto;margin-right:auto}
  .chat-suggest{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chat-intro .ctas{justify-content:center}
  .chat-log{height:auto;min-height:200px;max-height:300px}
  .msg{max-width:92%}
  .chat-log .msg,.chat-note{text-align:left}
}
@media (max-width:420px){
  .site-header{gap:var(--s-2)}
  .brand img{width:136px}
  .header-cta{padding:0 var(--s-3);font-size:14px}
  .menu-label{display:none}
  .menu-btn{justify-content:center;gap:0;padding:0}
}
@media (max-width:360px){
  .metrics{grid-template-columns:minmax(0,1fr)}
  .hero h1{letter-spacing:-.025em}
  .side-lead{text-wrap:pretty}
  .chat-form{flex-wrap:wrap}
  .chat-form .btn{flex:1 1 100%}
}
@media (max-width:340px){.chat-suggest{grid-template-columns:minmax(0,1fr)}}
@media (max-height:520px) and (orientation:landscape){
  .economics{grid-template-columns:minmax(0,1fr) minmax(0,50%);row-gap:0}
  .econ-media{aspect-ratio:16/9;margin:0;-webkit-mask-image:var(--mask-x-full),var(--mask-y-deep);mask-image:var(--mask-x-full),var(--mask-y-deep)}
  .hero{padding-top:calc(var(--header-h) + env(safe-area-inset-top) + var(--s-5))}
  :root{--t-hero:clamp(32px,4.4vw,40px)}
}
/* reduced motion: the still artwork, no overlay animation, no transitions */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .light-pass,.paylines,.sparkles,.loop-video{display:none}
}