/* Home page stylesheet for oryze.ai
   Extracted from inline <style> to comply with CSP without 'unsafe-inline'.
   The token block below is the source of truth for brand colors and spacing.
   assets/legal.css copies these tokens and tests/legal-pages.test.mjs verifies they stay aligned. */

:root{
  --ink:#111111; --paper:#FAF8F2; --majorelle:#5F3EF8; --lavender:#9D8CF6; --rose:#ED99E1;
  --lilac:#C4B5FD; --lilac-ink:#38278F; --mint:#B7F0CE; --mint-ink:#0D5D39;
  --butter:#F6E27A; --butter-ink:#5C4A00; --coral:#FCA5A5; --coral-ink:#7A1414;
  --gray:#6B6B6B; --line:#E5E1D8;
  --sans:"IBM Plex Sans",sans-serif; --mono:"IBM Plex Mono",monospace; --disp:"Montserrat","IBM Plex Sans",sans-serif;

  /* type scale — text steps ~1.14, display steps ~1.22 */
  --fs-1:11.5px; --fs-2:13px; --fs-3:15px; --fs-4:17px; --fs-5:19.5px;
  --fd-1:23px;
  /* figure scale — mono readouts, one step apart, kept off the text scale on purpose */
  --fig-s:20px; --fig-m:22px; --fig-l:25px;
  --fd-2:clamp(26px,2.9vw,40px);
  --fd-3:clamp(30px,3.5vw,46px);
  --fd-4:clamp(38px,4.9vw,62px); /* capped so the FR headline keeps its first line whole */
  --lh-tight:1.05; --lh-head:1.12; --lh-text:1.62; --lh-mono:1.55;
  --tr-caps:.14em; --tr-chip:.1em; --tr-ui:.06em;

  /* spacing — 4px base */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:28px;
  --sp-7:36px; --sp-8:48px; --sp-9:64px;
  /* section rhythm — air for statements, dense for proof */
  --sect-air:clamp(96px,9vw,132px); --sect:clamp(76px,7.2vw,104px); --sect-dense:clamp(56px,5.4vw,78px);

  /* radius ladder — small parts / cards / large surfaces / interactive labels */
  --r-1:10px; --r-2:14px; --r-3:20px; --r-pill:999px;
  /* shadow ladder — level 3 is reserved for the two key moments of the page */
  --sh-0:2px 2px 0 0 var(--ink);
  --sh-1:3px 3px 0 0 var(--ink);
  --sh-2:6px 6px 0 0 var(--ink);
  --sh-3:12px 12px 0 0 var(--ink);

  --ease:cubic-bezier(.16,1,.3,1);
  /* durations — micro-states, then scroll reveals; press stays snappy on purpose */
  --dur-1:.28s; --dur-press:.09s; --dur-reveal:.95s; --stagger:.13s;
  --grid-line:#EBE7DC;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:var(--fs-4); line-height:var(--lh-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px; background-position:center top;
}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono)}
/* every figure on the page is mono and tabular */
.mono,.eyebrow,.chip,.badge,.btn,.lang button,.console-top .t,.console-line,.console-prov,
.console-static .l,.console-static .p,.card .ex,.vg .prov,.flow,.amount,.kpi .l,.kpi .v,
.mini .l,.mini .big,.mini .sain,.ab .k,.vision-panel .entity,.foot .tag,.foot .links,.copyright{
  font-variant-numeric:tabular-nums;
}
/* section header band: number chip, label, keyline running to the container edge */
.eyebrow{font-family:var(--mono);font-size:var(--fs-2);letter-spacing:var(--tr-caps);color:var(--gray);display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.eyebrow::after{content:"";height:2px;background:var(--ink);flex:1 1 auto;min-width:24px;opacity:.13}
.eyebrow b{color:var(--majorelle);font-weight:600;flex:0 0 auto}
h2{font-family:var(--disp);font-weight:800;font-size:var(--fd-3);letter-spacing:-0.022em;line-height:var(--lh-head);margin-bottom:var(--sp-5);max-width:22ch;text-wrap:balance}
section{padding:var(--sect) 0}
/* density per job: statements get air, proof and conversion get pressure */
section:has(.kpis){padding-bottom:var(--sect-dense)}
section:has(.join){padding-bottom:var(--sect-dense)}
.reveal{opacity:0;translate:0 24px;transition:opacity var(--dur-reveal) var(--ease),translate var(--dur-reveal) var(--ease)}
.reveal.on{opacity:1;translate:0 0}
/* grids reveal in reading order rather than as one block */
.grid3>.reveal:nth-child(2),.grid2>.reveal:nth-child(2),.grid4>.reveal:nth-child(2){transition-delay:var(--stagger)}
.grid3>.reveal:nth-child(3),.grid2>.reveal:nth-child(3),.grid4>.reveal:nth-child(3){transition-delay:calc(var(--stagger)*2)}
.grid2>.reveal:nth-child(4),.grid4>.reveal:nth-child(4){transition-delay:calc(var(--stagger)*3)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;translate:0 0;transition:none;transition-delay:0s!important}}
/* header */
header{position:sticky;top:0;background:var(--paper);z-index:50;border-bottom:2px solid transparent;transition:border-color var(--dur-1) var(--ease)}
header.scrolled{border-bottom-color:var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) 32px;max-width:1240px;margin:0 auto;gap:var(--sp-4);min-height:68px}
.brand{display:flex;align-items:baseline;gap:var(--sp-2);text-decoration:none}
.brand img{height:28px;display:block;align-self:center}
.brand .ai{font-family:var(--mono);font-weight:700;font-size:var(--fig-m);color:var(--majorelle);letter-spacing:-.01em}
.nav-right{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;justify-content:flex-end}
.lang{display:flex;border:2px solid var(--ink);border-radius:var(--r-pill);overflow:hidden;background:#fff}
.lang button{font-family:var(--mono);font-weight:600;font-size:var(--fs-2);letter-spacing:var(--tr-ui);padding:7px 14px;border:0;background:transparent;color:var(--gray);cursor:pointer;transition:color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.lang button:hover{color:var(--ink);background:var(--line)}
.lang button:active{transform:scale(.96);transition-duration:var(--dur-press)}
.lang button.on{background:var(--ink);color:var(--paper)}
.btn{font-family:var(--mono);font-weight:600;font-size:var(--fs-3);letter-spacing:var(--tr-ui);text-decoration:none;color:var(--ink);border:2px solid var(--ink);background:#fff;border-radius:var(--r-pill);padding:10px 20px;box-shadow:var(--sh-1);display:inline-block;white-space:nowrap;transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--ink)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--ink);transition-duration:var(--dur-press)}
.btn.primary{background:var(--majorelle);color:#fff;border-color:var(--ink)}
:is(a,button):focus-visible{outline:3px solid var(--majorelle);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn,.lang button{transition:none}.btn:hover{transform:none}}
/* hero — the only section on --sect-air, and the only one that clips its own decoration */
.hero{padding:var(--sect-air) 0 var(--sect);overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(36px,4.5vw,60px);align-items:center}
/* pretty, not balance: balance would split the first line of the FR headline, which already fits */
h1{font-family:var(--disp);font-weight:800;font-size:var(--fd-4);letter-spacing:-0.03em;line-height:var(--lh-tight);margin-bottom:var(--sp-6);text-wrap:pretty}
h1 .hl{color:var(--majorelle)}
.hero p.sub{font-size:var(--fs-5);line-height:1.55;color:#3a3a3a;max-width:47ch;margin-bottom:var(--sp-7);text-wrap:pretty}
.hero-ctas{display:flex;gap:var(--sp-3);flex-wrap:wrap}
/* the hero label group reads as one unit: quiet brand chip, then the single butter statement */
.hero .eyebrow{margin-bottom:var(--sp-3)}
.hero .eyebrow::after{flex:0 1 72px}
.hero .eyebrow b{background:#fff;color:var(--majorelle);border:2px solid var(--ink);border-radius:var(--r-pill);padding:3px 12px;box-shadow:none;font-weight:700;letter-spacing:var(--tr-chip)}
/* console — key moment 1 of 3 */
.console{background:var(--ink);border:2px solid var(--ink);border-radius:var(--r-3);box-shadow:12px 12px 0 0 var(--majorelle);padding:var(--sp-6) var(--sp-6) var(--sp-5);min-height:332px;display:flex;flex-direction:column}
.console-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding-bottom:var(--sp-4);margin-bottom:var(--sp-5);border-bottom:1px solid #2b2736}
.console-top .t{font-family:var(--mono);font-size:var(--fs-2);letter-spacing:var(--tr-caps);color:#8e8a9c}
.console-top .dots{display:flex;gap:7px}
.console-top .dots i{width:9px;height:9px;border-radius:50%;display:block;opacity:.6}
.console-top .dots i:nth-child(1){background:var(--lavender)}
.console-top .dots i:nth-child(2){background:var(--rose)}
.console-top .dots i:nth-child(3){background:var(--butter)}
.console-body{flex:1;display:flex;flex-direction:column;gap:var(--sp-4);justify-content:space-between}
.chip{font-family:var(--mono);font-weight:700;font-size:var(--fs-2);letter-spacing:var(--tr-chip);border:2px solid var(--ink);border-radius:var(--r-pill);padding:5px 14px;display:inline-block;box-shadow:var(--sh-1)}
.console .chip{box-shadow:3px 3px 0 0 rgba(0,0,0,.55)}
.chip.lilac{background:var(--lilac);color:var(--lilac-ink)} .chip.mint{background:var(--mint);color:var(--mint-ink)}
.chip.butter{background:var(--butter);color:var(--butter-ink)} .chip.coral{background:var(--coral);color:var(--coral-ink)}
.console-line{font-family:var(--mono);font-size:var(--fig-s);line-height:var(--lh-mono);color:var(--paper);min-height:96px}
.cursor{display:inline-block;width:10px;height:22px;background:var(--butter);vertical-align:-10%;margin-left:4px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}
.console-prov{font-family:var(--mono);font-size:var(--fs-2);color:#8d88a0;border-top:1px solid #2b2736;padding-top:var(--sp-3);min-height:20px}
.console-static{display:none;flex-direction:column;gap:var(--sp-4)}
.console-static .row{display:flex;flex-direction:column;align-items:flex-start;gap:6px;border-bottom:1px solid #2b2736;padding-bottom:var(--sp-3)}
.console-static .row:last-child{border-bottom:0}
.console-static .l{font-family:var(--mono);font-size:var(--fs-3);line-height:1.5;color:var(--paper)}
.console-static .p{font-family:var(--mono);font-size:var(--fs-1);color:#8d88a0}
@media (prefers-reduced-motion:reduce){.console-live{display:none}.console-static{display:flex}}
/* problem */
/* statement section: full-bleed keylines, air above and below, three lines that escalate */
.problem{background:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:var(--sect-air) 0}
.problem .lines{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.6vw,44px);letter-spacing:-0.022em;line-height:1.26;max-width:34ch}
.problem .lines span{display:block}
.problem .lines .mute{color:#b9b4a6;font-size:.84em;letter-spacing:-.018em;margin-bottom:.12em}
.problem .lines .hit{color:var(--majorelle)}
/* cards — first rule carries more width; each card wears the accent of its own tile */
.grid3{display:grid;grid-template-columns:1.14fr .93fr .93fr;gap:var(--sp-6);align-items:stretch}
.card{background:#fff;border:2px solid var(--ink);border-left-width:8px;border-radius:var(--r-2);box-shadow:var(--sh-2);padding:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-5);display:flex;flex-direction:column}
.grid3 .card:nth-child(1){border-left-color:var(--lilac)}
.grid3 .card:nth-child(2){border-left-color:var(--butter)}
.grid3 .card:nth-child(3){border-left-color:var(--coral)}
.card .tile{width:48px;height:48px;border-radius:var(--r-1);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5)}
.card h3{font-family:var(--disp);font-weight:800;font-size:var(--fd-1);letter-spacing:-0.015em;line-height:1.16;margin-bottom:var(--sp-3);text-wrap:balance}
.card p{color:#3a3a3a;font-size:var(--fs-4);max-width:36ch;margin-bottom:var(--sp-5)}
.card .ex{margin-top:auto;font-family:var(--mono);font-size:var(--fs-2);color:var(--gray);border-left:3px solid var(--lavender);padding-left:var(--sp-3);line-height:1.6;text-wrap:pretty}
.grid3 .card:nth-child(1) .ex{border-left-color:var(--lilac)}
.grid3 .card:nth-child(2) .ex{border-left-color:var(--butter)}
.grid3 .card:nth-child(3) .ex{border-left-color:var(--coral)}
/* live vignettes — proof density: tighter gaps, lighter elevation than the statements above */
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-5);align-items:stretch}
.vg{background:#fff;border:2px solid var(--ink);border-left-width:8px;border-radius:var(--r-2);box-shadow:var(--sh-2);padding:var(--sp-5) var(--sp-6);display:flex;flex-direction:column}
.vg.lilac{border-left-color:var(--lilac)} .vg.mint{border-left-color:var(--mint)}
.vg.coral{border-left-color:var(--coral)} .vg.butter{border-left-color:var(--butter)}
.vg .head{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-4);flex-wrap:wrap}
.vg .body{font-size:var(--fs-4);line-height:1.55;min-height:56px;margin-bottom:var(--sp-4);text-wrap:pretty}
.vg .body .mono{font-size:var(--fs-3)}
.vg .prov{font-family:var(--mono);font-size:var(--fs-2);color:var(--gray);border-top:1px solid var(--line);margin-top:auto;padding-top:var(--sp-3)}
.flow{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-3)}
.flow .box{border:2px solid var(--ink);border-radius:var(--r-1);padding:6px 12px;background:#fff;font-weight:600}
.flow .to{border-style:solid;background:var(--mint);color:var(--mint-ink)}
.badge{font-family:var(--mono);font-weight:700;font-size:var(--fs-1);border:2px solid var(--ink);border-radius:var(--r-pill);padding:3px 10px}
.badge.late{background:var(--coral);color:var(--coral-ink)}
.amount{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.spark{display:block;margin-top:var(--sp-2);max-width:100%;height:auto}
/* architecture — spec blocks: quiet elevation, the majorelle key line carries the accent */
.arch{background:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.grid4{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--sp-5);align-items:stretch}
.ab{border:2px solid var(--ink);border-radius:var(--r-2);padding:var(--sp-5) var(--sp-6);background:var(--paper);box-shadow:var(--sh-1)}
.ab .k{font-family:var(--mono);font-weight:700;font-size:var(--fs-3);letter-spacing:.02em;line-height:1.35;color:var(--majorelle);margin-bottom:var(--sp-2);text-wrap:balance}
.ab p{font-size:var(--fs-4);color:#3a3a3a;max-width:48ch;text-wrap:pretty}
/* vision — key moment 2 of 3 */
.vision-panel{background:var(--lavender);border:2px solid var(--ink);border-radius:var(--r-3);box-shadow:var(--sh-3);padding:clamp(40px,5.6vw,72px) clamp(26px,5vw,64px);text-align:center}
.vision-panel .big{font-family:var(--disp);font-weight:800;font-size:var(--fd-2);letter-spacing:-0.022em;line-height:1.22;max-width:32ch;margin:0 auto var(--sp-4);text-wrap:balance}
.vision-panel .sep{width:88px;height:3px;background:var(--ink);margin:var(--sp-6) auto}
.vision-panel .entity{font-family:var(--mono);font-size:var(--fs-3);line-height:1.72;max-width:64ch;margin:0 auto;color:#241a55;text-wrap:pretty}
/* join */
.join .box{display:flex;justify-content:space-between;align-items:center;gap:clamp(24px,3.5vw,48px);border:2px solid var(--ink);background:#fff;border-radius:var(--r-3);box-shadow:var(--sh-2);padding:clamp(32px,4vw,48px) clamp(26px,4vw,52px);flex-wrap:wrap}
.join h2{margin-bottom:var(--sp-3);max-width:none}
.join p{max-width:54ch;color:#3a3a3a;text-wrap:pretty}
.join .btn{flex:0 0 auto}
/* footer */
footer{border-top:2px solid var(--ink);background:#fff;padding:var(--sp-8) 0 var(--sp-7)}
.foot{display:flex;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;align-items:center}
.foot .left{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.foot img{height:22px}
.foot .ai{font-family:var(--mono);font-weight:700;font-size:var(--fs-4);color:var(--majorelle);margin-right:var(--sp-1)}
.foot .tag{font-family:var(--mono);font-size:var(--fs-2);color:var(--gray)}
.foot .links{display:flex;gap:var(--sp-5);align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-2)}
.foot a{text-decoration:none;border-bottom:2px solid var(--lavender);padding-bottom:1px;transition:border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.foot a:hover{border-bottom-color:var(--ink);background:var(--butter)}
.legal-links{display:flex;gap:var(--sp-5);flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-2);margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.copyright{margin-top:var(--sp-4);font-family:var(--mono);font-size:var(--fs-2);color:var(--gray)}
@media (prefers-reduced-motion:reduce){.foot a{transition:none}}

/* --- v2 : plus de couleur, plus de dashboard, plus de butter --- */
.eyebrow b{background:var(--butter);color:var(--butter-ink);border:2px solid var(--ink);border-radius:var(--r-1);padding:2px 9px;box-shadow:var(--sh-0);font-weight:700}
.badge-hero{display:inline-block;font-family:var(--mono);font-weight:700;font-size:var(--fs-2);letter-spacing:var(--tr-chip);background:var(--butter);color:var(--butter-ink);border:2px solid var(--ink);border-radius:var(--r-pill);padding:7px 16px;box-shadow:var(--sh-1);margin-bottom:var(--sp-6)}
/* highlight that hugs its own lines instead of boxing the whole sentence in one slab */
.problem .lines .hit{color:var(--ink);background:var(--butter);box-shadow:var(--sh-1);border:2px solid var(--ink);border-radius:var(--r-1);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:.04em .3em;line-height:1.62;text-wrap:balance}
.problem .lines span:not(.mute):not(.hit){margin-bottom:.26em}
.hero-right{display:flex;flex-direction:column;gap:var(--sp-4)}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.mini{background:#fff;border:2px solid var(--ink);border-radius:var(--r-1);box-shadow:var(--sh-1);padding:var(--sp-4) var(--sp-5)}
.mini .l{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:var(--tr-caps);color:var(--gray);margin-bottom:var(--sp-3)}
.mini .row{display:flex;align-items:center;gap:var(--sp-3)}
.mini .big{font-family:var(--mono);font-weight:700;font-size:var(--fig-l);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.mini .sain{font-family:var(--mono);font-weight:700;font-size:var(--fs-1);line-height:1.35;letter-spacing:var(--tr-chip);color:var(--mint-ink)}
/* donut motif: brand decoration, clipped by the hero edge rather than pushing the page wide */
.hero-donut{position:absolute;right:-34px;top:-104px;width:288px;height:288px;opacity:.32;pointer-events:none;z-index:-1}
.hero-grid{position:relative}
/* instrument strip: one accent-edge direction across the whole page, lightest elevation */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin:var(--sp-7) 0 var(--sp-6)}
.kpi{background:#fff;border:2px solid var(--ink);border-left-width:8px;border-radius:var(--r-1);box-shadow:var(--sh-1);padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4)}
.kpi.mj{border-left-color:var(--majorelle)} .kpi.co{border-left-color:var(--coral)}
.kpi.bu{border-left-color:var(--butter)} .kpi.mi{border-left-color:var(--mint)}
.kpi .l{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:var(--tr-caps);color:var(--gray);margin-bottom:var(--sp-2)}
.kpi .v{font-family:var(--mono);font-weight:700;font-size:var(--fig-m);letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.kpi .v .badge{font-size:var(--fs-1)}
.kpi .chip{font-size:var(--fs-1);padding:3px 10px;box-shadow:var(--sh-0)}
.vision-panel{position:relative;overflow:hidden}
/* the arcs used to be cropped into solid rectangles by the panel's overflow;
   the stroke is 22% of the viewBox, so any crop reads as a blob. They now sit whole in the corners. */
.vision-panel svg.deco{position:absolute;pointer-events:none;opacity:.85}
.vision-panel .deco-a{left:22px;bottom:18px;width:116px;height:116px}
.vision-panel .deco-b{right:24px;top:20px;width:100px;height:100px}
@media(max-width:880px){.vision-panel svg.deco{display:none}}
section:has(.vision-panel){padding:var(--sect-air) 0}
.foot a{border-bottom-color:var(--butter)}

/* --- inline style replacements: classes instead of style= attributes --- */
.chip-sh-0{box-shadow:var(--sh-0)}
.color-lilac-ink{color:var(--lilac-ink)}
.mt-sp-7{margin-top:var(--sp-7)}
.tile-lilac{background:var(--lilac)}
.tile-butter{background:var(--butter)}
.tile-coral{background:var(--coral)}
.pt-0{padding-top:0}
.sub-wide{max-width:56ch;color:#3a3a3a}
.v-mint{color:var(--mint-ink)}
.amount-ml-auto{margin-left:auto}
.chip-bold{font-weight:600}
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:8px;pointer-events:none}

/* responsive */
@media(max-width:960px){
  .hero{padding:var(--sect) 0 var(--sect-dense)}
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-8)}
  .kpis{grid-template-columns:1fr 1fr}
  .hero-donut{display:none}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr}
  .vision-panel{padding:var(--sp-8) var(--sp-6)}
  .join .box{padding:var(--sp-7) var(--sp-6)}
}
@media(max-width:560px){
  /* the header keyline drops to its own row instead of squeezing the label */
  .eyebrow{flex-wrap:wrap;gap:var(--sp-3);font-size:var(--fs-1)}
  .eyebrow::after{flex:1 0 100%;order:3}
  .hero .eyebrow::after{flex:1 0 100%}
}
@media(max-width:520px){
  .wrap{padding:0 20px}
  .kpis{grid-template-columns:1fr}
  .minis{grid-template-columns:1fr}
  .nav{padding:var(--sp-3) 20px;min-height:60px}
  .nav .btn.nav-cta{display:none}
  .console{min-height:290px;padding:var(--sp-5) var(--sp-5) var(--sp-4)}
  .console-line{font-size:var(--fs-4);min-height:84px}
}