/* Teradius Enterprise Suite product website, v4.
   Tokens first. Five brand colours only (ember, black, white, grey, off-white); every other value is a
   color-mix() of those five, so a palette scan of the built CSS finds nothing else. 8 px spacing grid,
   fluid type scale, two surface themes (light on off-white, dark on black) alternating by section, motion
   tokens of 150/250/400 ms with one easing curve. Reduced motion is honoured globally. No inline styles. */

@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-latin-700-normal.woff2") format("woff2")}
/* metric-matched fallback so text barely moves when Poppins arrives (values match Poppins over Arial) */
@font-face{font-family:"Poppins Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:112.16%;ascent-override:93.77%;descent-override:31.26%;line-gap-override:8.93%}

/* ---------- 1. Tokens ---------- */
:root{
  /* brand palette: the only literal colours in this file */
  --ember:#FA4E04; --black:#000000; --white:#FFFFFF; --grey:#858585; --off-white:#F6F6F6;

  /* type: fluid scale */
  --font:"Poppins","Poppins Fallback",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-xs:clamp(.75rem,.72rem + .15vw,.8125rem);
  --t-sm:clamp(.875rem,.85rem + .15vw,.9375rem);
  --t-md:clamp(1rem,.97rem + .2vw,1.0625rem);
  --t-lg:clamp(1.125rem,1.05rem + .4vw,1.3125rem);
  --t-xl:clamp(1.375rem,1.2rem + .8vw,1.75rem);
  --t-2xl:clamp(1.75rem,1.45rem + 1.4vw,2.5rem);
  --t-3xl:clamp(2.125rem,1.6rem + 2.4vw,3.25rem);
  --t-4xl:clamp(2.5rem,1.6rem + 4.2vw,4.5rem);
  --lh-tight:1.05; --lh-snug:1.2; --lh-base:1.6;
  --track-caps:.14em;

  /* space: 8 px grid */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s10:80px; --s12:96px; --s16:128px;
  --section:clamp(var(--s8),9vw,var(--s16));
  --gutter:clamp(16px,4vw,48px); --max:1200px; --measure:62ch;

  /* motion */
  --d1:150ms; --d2:250ms; --d3:400ms; --ease:cubic-bezier(.2,.7,.2,1);

  /* radii */
  --r-sm:6px; --r:12px; --r-lg:16px; --r-pill:999px;

  /* surface roles, light theme (default) */
  --bg:var(--off-white); --bg-2:var(--white); --bg-3:color-mix(in srgb,var(--black) 4%,var(--white));
  --fg:var(--black); --fg-2:color-mix(in srgb,var(--black) 72%,var(--white)); --fg-3:color-mix(in srgb,var(--black) 56%,var(--white));
  --line:color-mix(in srgb,var(--black) 10%,var(--white)); --line-2:color-mix(in srgb,var(--black) 18%,var(--white));
  --hair:color-mix(in srgb,var(--grey) 45%,transparent);
  --ember-tint:color-mix(in srgb,var(--ember) 10%,var(--white));
  --shadow:0 24px 48px -32px color-mix(in srgb,var(--black) 35%,transparent);
  --screen-bg:var(--black); --screen-bg-2:color-mix(in srgb,var(--white) 5%,var(--black)); --screen-line:color-mix(in srgb,var(--white) 13%,var(--black)); --screen-line-2:color-mix(in srgb,var(--white) 22%,var(--black)); --screen-fg:var(--white); --screen-fg-2:color-mix(in srgb,var(--white) 74%,var(--black)); --screen-fg-3:color-mix(in srgb,var(--white) 58%,var(--black));
}
.dark,.site-footer{
  --bg:var(--black); --bg-2:color-mix(in srgb,var(--white) 5%,var(--black)); --bg-3:color-mix(in srgb,var(--white) 9%,var(--black));
  --fg:var(--white); --fg-2:color-mix(in srgb,var(--white) 74%,var(--black)); --fg-3:color-mix(in srgb,var(--white) 58%,var(--black));
  --line:color-mix(in srgb,var(--white) 14%,var(--black)); --line-2:color-mix(in srgb,var(--white) 22%,var(--black));
  --ember-tint:color-mix(in srgb,var(--ember) 22%,var(--black));
  --shadow:0 32px 64px -40px color-mix(in srgb,var(--black) 90%,transparent);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:112px}
body{margin:0;font-family:var(--font);font-size:var(--t-md);line-height:var(--lh-base);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:var(--r-sm)}
.sprite{display:none}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:12px;z-index:200;background:var(--black);color:var(--white);padding:10px 16px;border-radius:var(--r-sm);font-weight:600}
.skip:focus{left:12px}
h1,h2,h3,h4{margin:0 0 .4em;line-height:var(--lh-snug);font-weight:600;letter-spacing:-.018em;text-wrap:balance;color:var(--fg)}
h2{font-size:var(--t-3xl);line-height:1.1}
h3,.h3{font-size:var(--t-xl)}
h2.h3{font-size:var(--t-xl)}
p{margin:0 0 1em}
strong{font-weight:600}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.lede{font-size:var(--t-lg);line-height:1.55;color:var(--fg-2);max-width:var(--measure);text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:600;color:var(--fg-2);margin-bottom:var(--s2)}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--fg);border-radius:1px}
.dark{background:var(--bg);color:var(--fg)}
.dark p{color:var(--fg-2)}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mark{width:34px;height:34px;color:var(--fg)}
.mt{margin-top:var(--s3)}
.muted{color:var(--fg-3)}
.small{font-size:var(--t-sm)}
.hr{border:0;border-top:1px solid var(--hair);margin:0}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.prose{max-width:var(--measure)}
.prose p,p.prose{font-size:var(--t-md);color:var(--fg-2);text-wrap:pretty}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- 3. Announcement banner ---------- */
.announce{position:relative;z-index:70;background:var(--white);color:var(--black);border-bottom:1px solid var(--line)}
.announce .wrap{display:flex;align-items:center;gap:var(--s2);min-height:44px;padding-top:6px;padding-bottom:6px;font-size:var(--t-sm)}
.announce p{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.announce .dot{width:8px;height:8px;border-radius:50%;background:var(--ember);flex:none}
.announce a{font-weight:600;text-decoration:underline;text-underline-offset:.25em}
.announce-close{margin-left:auto;background:none;border:0;color:var(--fg-2);width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;cursor:pointer;flex:none;transition:background var(--d1) var(--ease),color var(--d1) var(--ease)}
.announce-close:hover{background:var(--bg);color:var(--black)}
.announce-close .ico{width:18px;height:18px}

/* ---------- 4. Header and navigation ---------- */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--black) 92%,transparent);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);color:var(--white);border-bottom:1px solid color-mix(in srgb,var(--white) 12%,var(--black))}
.site-header .wrap{display:flex;align-items:center;gap:var(--s3);min-height:72px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--white)}
.brand:hover{text-decoration:none}
.brand .mark{height:44px;width:38px;color:var(--white)}
.brand-name{font-weight:600;font-size:1.25rem;letter-spacing:-.02em;line-height:1}
.brand-sub{display:block;font-size:.58rem;letter-spacing:.2em;font-weight:500;color:color-mix(in srgb,var(--white) 62%,var(--black));margin-top:5px;line-height:1}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.nav a,.nav-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r-sm);color:color-mix(in srgb,var(--white) 76%,var(--black));font:inherit;font-size:var(--t-sm);font-weight:500;background:none;border:0;cursor:pointer;transition:color var(--d1) var(--ease),background var(--d1) var(--ease)}
.nav a:hover,.nav-btn:hover{color:var(--white);text-decoration:none;background:color-mix(in srgb,var(--white) 8%,var(--black))}
.nav a[aria-current="page"],.nav-btn[aria-current="page"]{color:var(--white);box-shadow:inset 0 -2px 0 var(--white)}
.nav-btn .ico{width:16px;height:16px;transition:transform var(--d2) var(--ease)}
.has-menu{position:relative}
.has-menu.open .nav-btn .ico{transform:rotate(180deg)}
.mega{display:none;position:absolute;left:0;top:calc(100% + 12px);min-width:760px;background:var(--black);border:1px solid color-mix(in srgb,var(--white) 16%,var(--black));border-radius:var(--r-lg);padding:var(--s3);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--black) 85%,transparent);z-index:70}
.has-menu.open .mega{display:block}
.mega-grid{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:var(--s3)}
.mega-group h4{font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:color-mix(in srgb,var(--white) 58%,var(--black));margin:0 0 var(--s1)}
.mega-group ul{display:block}
.mega-group li{margin:0}
.mega-group a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border-radius:var(--r-sm);color:var(--white)}
.mega-group a:hover{background:color-mix(in srgb,var(--white) 8%,var(--black));text-decoration:none;color:var(--white)}
.mega-label{font-weight:500;font-size:var(--t-sm)}
.mega-text{font-size:var(--t-xs);color:color-mix(in srgb,var(--white) 58%,var(--black));font-weight:400}
.nav .nav-cta a{margin-left:10px;background:var(--ember);color:var(--black);font-weight:600}
.nav .nav-cta a:hover{background:color-mix(in srgb,var(--ember) 88%,var(--white));color:var(--black)}
.nav-toggle{margin-left:auto;display:none;align-items:center;gap:8px;background:transparent;border:1px solid color-mix(in srgb,var(--white) 22%,var(--black));color:var(--white);padding:9px 14px;border-radius:var(--r-sm);font:inherit;font-size:var(--t-sm);font-weight:500;cursor:pointer}
@media (max-width:1080px){
  .nav-toggle{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--black);border-bottom:1px solid color-mix(in srgb,var(--white) 12%,var(--black));padding:10px var(--gutter) 18px;max-height:calc(100vh - 72px);overflow:auto}
  .nav.open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav a,.nav-btn{padding:13px 12px;font-size:var(--t-md);width:100%;justify-content:space-between}
  .nav a[aria-current="page"],.nav-btn[aria-current="page"]{box-shadow:inset 3px 0 0 var(--white)}
  .mega{position:static;min-width:0;border:0;padding:0 0 var(--s2) var(--s2);box-shadow:none;background:transparent}
  .mega-grid{grid-template-columns:1fr;gap:var(--s2)}
  .mega-group a{width:auto;justify-content:flex-start;padding:8px 10px}
  .nav .nav-cta a{margin:10px 0 0;justify-content:center}
}

/* ---------- 5. Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--r-sm);font:inherit;font-size:var(--t-md);font-weight:600;line-height:1.1;cursor:pointer;border:1.5px solid transparent;text-decoration:none;transition:transform var(--d2) var(--ease),background var(--d2) var(--ease),color var(--d2) var(--ease),border-color var(--d2) var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .ico{width:18px;height:18px}
.btn-primary{background:var(--ember);color:var(--black);border-color:var(--ember)}
.btn-primary:hover{background:color-mix(in srgb,var(--ember) 88%,var(--white));border-color:color-mix(in srgb,var(--ember) 88%,var(--white));color:var(--black)}
.btn-primary:focus-visible{outline-color:var(--fg)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn-ghost:hover{background:var(--fg);color:var(--bg)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s4)}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin-top:var(--s2);color:var(--fg)}
.more .ico{width:16px;height:16px;transition:transform var(--d2) var(--ease)}
.more:hover .ico{transform:translateX(3px)}

/* ---------- 6. Sections, headings and anchors ---------- */
.section{position:relative;padding:var(--section) 0}
.section.tight{padding-top:clamp(var(--s5),5vw,var(--s8));padding-bottom:clamp(var(--s5),5vw,var(--s8))}
.section + .section:not(.dark){border-top:1px solid var(--hair)}
.section-head{max-width:70ch;margin-bottom:clamp(var(--s4),4vw,var(--s6))}
.section-head p{color:var(--fg-2);font-size:var(--t-lg);text-wrap:pretty}
.section-head.center{margin-left:auto;margin-right:auto}
.heading-row{position:relative;display:flex;align-items:baseline;gap:10px}
.heading-row h2{flex:1;scroll-margin-top:112px}
.anchor{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);color:var(--fg-3);opacity:0;transition:opacity var(--d1) var(--ease),color var(--d1) var(--ease),background var(--d1) var(--ease);flex:none;align-self:center}
.heading-row:hover .anchor,.anchor:focus-visible,.anchor.done{opacity:1}
.anchor:hover{color:var(--fg);background:var(--bg-3);text-decoration:none}
.anchor .ico{width:16px;height:16px}
.anchor-tip{position:absolute;right:0;bottom:calc(100% + 4px);font-size:var(--t-xs);background:var(--fg);color:var(--bg);padding:4px 8px;border-radius:var(--r-sm);pointer-events:none}
@media (hover:none){.anchor{opacity:1}}
.grid{display:grid;gap:var(--s3)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}
@media (min-width:1000px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.two-col{display:grid;gap:clamp(var(--s4),4vw,var(--s8));align-items:start}
@media (min-width:920px){.two-col{grid-template-columns:1fr 1fr}}
.two-col.wide-left{grid-template-columns:1fr}
@media (min-width:1000px){.two-col.wide-left{grid-template-columns:1.25fr 1fr}}

/* reveal on scroll: only when scripting is available and motion is allowed, so nothing is ever hidden without JS */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .reveal:not(.in){opacity:0;transform:translateY(14px)}
  .reveal{transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease)}
}

/* ---------- 7. Cards, status, lists ---------- */
.card{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s3) 22px;transition:transform var(--d2) var(--ease),box-shadow var(--d2) var(--ease),border-color var(--d2) var(--ease)}
.card:hover,.card:focus-within{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-2)}
.card h3{margin:14px 0 .4em;font-size:var(--t-lg)}
.card p{margin:0;color:var(--fg-2);font-size:var(--t-sm);line-height:1.6}
.card .more{margin-top:var(--s2);font-size:var(--t-sm)}
.card .more::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ico-wrap{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--fg);color:var(--bg);flex:none}
.status{display:inline-block;margin-top:14px;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:var(--r-sm);background:transparent;color:var(--fg-2);border:1px solid var(--line-2)}
.status.now{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.status.dev{border-style:dashed;color:var(--fg)}
.label-illustrative{display:inline-block;font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:var(--r-sm);background:var(--bg-3);color:var(--fg-2);border:1px solid var(--line-2);margin-bottom:14px}
ul.checks{list-style:none;padding:0;margin:14px 0 0}
ul.checks li{position:relative;padding-left:28px;margin-bottom:.55em;color:var(--fg-2);font-size:var(--t-md);text-wrap:pretty}
ul.checks li::before{content:"";position:absolute;left:0;top:.4em;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--fg)}
ul.checks li::after{content:"";position:absolute;left:5.5px;top:.5em;width:4px;height:8px;border:solid var(--fg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
ol.numbered{padding-left:1.4em;margin:0 0 var(--s3);color:var(--fg-2)}
ol.numbered li{margin-bottom:.5em;padding-left:.3em}
ol.numbered li::marker{color:var(--fg);font-weight:600}
ul.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
ul.chips li{font-size:var(--t-sm);font-weight:500;padding:6px 10px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--line)}
.pillar{padding-top:22px}
.pillar .num{position:absolute;top:18px;right:22px;font-size:var(--t-xs);letter-spacing:.12em;color:var(--fg-3);font-weight:600}
.pillar .name{display:inline-block;font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--fg-2);font-weight:600;margin:var(--s2) 0 6px}
.pillar h3{font-size:var(--t-xl);margin-top:4px}
.story-card .eyebrow{margin-bottom:8px}
.resource{max-width:760px}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--line-2);color:var(--fg-2);font-size:var(--t-sm);margin-top:var(--s4)}
.note .ico{margin-top:2px;width:20px;height:20px}
.card .note{margin-top:var(--s2)}
.footnote{margin-top:var(--s4);color:var(--fg-3);font-size:var(--t-sm)}

/* ---------- 8. Hero ---------- */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(60vh,560px);padding:clamp(var(--s6),7vw,var(--s12)) 0}
.hero-home{min-height:calc(100vh - 116px)}
.hero .wrap{position:relative;z-index:1;width:100%;display:grid;gap:clamp(var(--s4),5vw,var(--s8));align-items:center}
@media (min-width:1000px){.hero-home .wrap{grid-template-columns:1fr 1.1fr}}
.hero-copy{max-width:60ch}
.hero .lede{max-width:52ch}
.hero:not(.hero-home) .display{font-size:var(--t-3xl)}
.display{font-size:var(--t-4xl);line-height:var(--lh-tight);letter-spacing:-.03em;font-weight:700;margin:0 0 .35em;text-wrap:balance}
.display .em{color:var(--fg-3);font-weight:600}
.badge{display:flex;width:max-content;max-width:100%;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:500;padding:6px 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);color:var(--fg-2);margin-bottom:22px}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fg)}
.proof{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.proof li{display:flex;align-items:flex-start;gap:10px;color:var(--fg-2);font-size:var(--t-sm)}
.proof .ico{width:18px;height:18px;color:var(--fg);margin-top:2px}
.hero-media{position:absolute;inset:0 0 0 36%;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.72) saturate(.95)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--black) 0%,color-mix(in srgb,var(--black) 72%,transparent) 26%,transparent 62%),linear-gradient(180deg,color-mix(in srgb,var(--black) 25%,transparent) 0%,transparent 30%,color-mix(in srgb,var(--black) 60%,transparent) 100%)}
@media (max-width:979px){
  .hero.has-image{padding-top:0;display:block}
  .hero-media{position:relative;inset:auto;height:300px;width:100%;margin-bottom:var(--s4)}
  .hero-media::after{background:linear-gradient(180deg,color-mix(in srgb,var(--black) 10%,transparent) 0%,color-mix(in srgb,var(--black) 20%,transparent) 60%,var(--black) 100%)}
  .hero.has-image .wrap{display:block;padding:0}
  .hero.has-image .hero-copy{padding:0 var(--gutter)}
}
.hero-stage{position:relative}

/* ---------- 9. Product screens ---------- */
.screen{position:relative;margin:0;background:var(--screen-bg-2);border:1px solid var(--screen-line-2);border-radius:var(--r-lg);color:var(--screen-fg);box-shadow:var(--shadow);overflow:hidden;font-size:.88rem}
.screen p,.dark .screen p{color:var(--screen-fg-2)}
.screen-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--screen-line);background:var(--screen-bg)}
.dots{display:inline-flex;gap:5px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--screen-line-2);display:inline-block}
.screen-title{font-size:var(--t-xs);color:var(--screen-fg-3);letter-spacing:.02em}
.screen-body{padding:18px 20px}
.screen-caption{padding:8px 16px;border-top:1px solid var(--screen-line);font-size:var(--t-xs);color:var(--screen-fg-3);background:var(--screen-bg)}
.screens-row .screen{font-size:.78rem}
.screens-row .screen-body{padding:12px 14px}
.panel-head{display:flex;justify-content:space-between;gap:10px 14px;align-items:baseline;flex-wrap:wrap;border-bottom:1px solid var(--screen-line);padding-bottom:12px;margin-bottom:14px}
.panel-head strong{font-weight:600;font-size:.98rem;color:var(--screen-fg)}
.panel-head span{font-size:.74rem;color:var(--screen-fg-3)}
.quality{display:inline-flex;align-items:center;gap:6px;color:var(--screen-fg-2)}
.quality::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--screen-fg)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.kpis.four{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.kpis.four{grid-template-columns:repeat(4,1fr)}}
.kpi{padding:12px 12px 10px;border:1px solid var(--screen-line);border-radius:var(--r-sm);background:var(--screen-bg)}
.kpi .l{display:block;font-size:.68rem;color:var(--screen-fg-3);letter-spacing:.04em;text-transform:uppercase}
.kpi .v{display:block;font-size:clamp(.98rem,1.5vw,1.22rem);font-weight:600;letter-spacing:-.02em;margin:4px 0 2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.kpi .d{display:block;font-size:.72rem;color:var(--screen-fg-2)}
.kpi .lineage{display:block;font-size:.68rem;color:var(--screen-fg-3);margin-top:6px}
.kpi.watch .d{color:var(--grey)}
.kpi.risk .d{color:var(--ember)}
@media (max-width:420px){.kpis{grid-template-columns:1fr 1fr}.kpis:not(.four) .kpi:last-child{grid-column:1/-1}}
.dir{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:11px 0;border-top:1px solid var(--screen-line);align-items:center}
.dir .n{font-size:.9rem;font-weight:500;line-height:1.3}
.dir .o{display:block;font-size:.72rem;color:var(--screen-fg-3);font-weight:400}
.dir .spark{width:72px;height:22px;justify-self:end}
.dir .spark polyline{fill:none;stroke:var(--screen-fg);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.dir .bar{grid-column:1/-1;height:4px;background:var(--screen-line);border-radius:2px;overflow:hidden}
.dir .bar i{display:block;height:100%;background:var(--screen-fg);border-radius:2px;transition:width var(--d3) var(--ease)}
.dir .g{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;font-size:.74rem;color:var(--screen-fg-3);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:var(--r-sm);border:1px solid var(--screen-line-2);color:var(--screen-fg-2)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.healthy{color:var(--screen-fg)}
.chip.watch{color:var(--grey)}
.chip.at-risk{color:var(--ember);border-color:color-mix(in srgb,var(--ember) 45%,var(--black))}
/* hero: directive list comes alive once, after load. Without JS no class is added and everything is static and complete. */
.screen.anim:not(.live) .dir .bar i{width:0!important}
.screen.anim .chip,.screen.anim .kpi{opacity:0;transform:translateY(4px);transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease)}
.screen.anim.live .chip,.screen.anim.live .kpi{opacity:1;transform:none}
.screen.anim.live .dir:nth-child(3) .chip{transition-delay:120ms}.screen.anim.live .dir:nth-child(4) .chip{transition-delay:240ms}.screen.anim.live .dir:nth-child(5) .chip{transition-delay:360ms}
.screen.anim.live .kpi:nth-child(2){transition-delay:80ms}.screen.anim.live .kpi:nth-child(3){transition-delay:160ms}
.legend,.lab-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:.74rem;color:var(--screen-fg-3)}
.legend span,.lab-legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.legend .healthy{background:var(--screen-fg)}.legend .watch{background:var(--grey)}.legend .at-risk{background:var(--ember)}
.lab-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.lab-legend .s0{background:var(--grey)}.lab-legend .s1{background:var(--screen-fg)}.lab-legend .s2{background:var(--ember)}
.fan{width:100%;height:auto}
.fan .band{opacity:.5}
.fan .band-0{fill:var(--grey)}.fan .band-1{fill:var(--screen-fg)}.fan .band-2{fill:var(--ember)}
.fan .axis{stroke:var(--screen-line-2);stroke-width:1}
.fan text{fill:var(--screen-fg-3);font-size:9px;font-family:var(--font)}
.scenarios{display:grid;gap:10px;margin-top:12px}
.scn{display:grid;grid-template-columns:96px 1fr;gap:4px 14px;align-items:center;padding:10px 12px;border:1px solid var(--screen-line);border-radius:var(--r-sm);background:var(--screen-bg)}
.scn strong{font-weight:600;font-size:.92rem}
.scn .r{grid-column:2;font-size:.76rem;color:var(--screen-fg-3)}
.scn .range{grid-column:2;position:relative;height:6px;background:var(--screen-line);border-radius:3px}
.scn .range i{position:absolute;top:0;bottom:0;background:var(--screen-fg);border-radius:3px;opacity:.85}
.panel-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:.76rem;color:var(--screen-fg-3);border-top:1px solid var(--screen-line);padding-top:12px}
.erp{display:grid;gap:var(--s2)}
@media (min-width:760px){.erp{grid-template-columns:1.3fr 1fr}}
.doc,.ledger{background:var(--screen-bg);border:1px solid var(--screen-line);border-radius:var(--r-sm);padding:14px}
.doc-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.doc-head strong{display:block;font-size:1rem}
.doc-head .muted{display:block;font-size:.76rem;color:var(--screen-fg-3)}
.doc-meta{text-align:right;display:grid;gap:6px;justify-items:end}
.tbl{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:8px}
.tbl th{font-weight:500;color:var(--screen-fg-3);text-align:left;padding:6px;border-bottom:1px solid var(--screen-line);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase}
.tbl td{padding:7px 6px;border-bottom:1px solid var(--screen-line);vertical-align:top}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tfoot td{border-bottom:0;color:var(--screen-fg-2)}
.tbl tfoot .total td{color:var(--screen-fg);font-weight:600;border-top:1px solid var(--screen-line-2);padding-top:10px}
.ledger strong{font-size:.9rem}
.screen .muted{color:var(--screen-fg-3)}
.kanban{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px;overflow-x:auto;padding-bottom:4px}
.col{background:var(--screen-bg);border:1px solid var(--screen-line);border-radius:var(--r-sm);padding:10px;min-width:150px}
.col-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:.82rem}
.col-head .muted{font-size:.74rem}
.deal{display:grid;gap:6px;padding:9px 10px;margin-bottom:8px;border:1px solid var(--screen-line-2);border-radius:var(--r-sm);background:var(--screen-bg-2);font-size:.8rem}
.deal-meta{display:flex;justify-content:space-between;align-items:center;color:var(--screen-fg-3);font-size:.74rem}
.avatar{width:22px;height:22px;border-radius:50%;background:var(--screen-line-2);color:var(--screen-fg);display:inline-grid;place-items:center;font-style:normal;font-size:.62rem;font-weight:600}
.bars{display:flex;align-items:flex-end;gap:6px;height:110px;padding:0 4px;border-bottom:1px solid var(--screen-line)}
.bars i{flex:1;background:var(--screen-fg);border-radius:2px 2px 0 0;opacity:.9;min-height:4px}
.bars i:nth-child(-n+9){opacity:.4}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 14px}
.node{padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--screen-line-2);background:var(--screen-bg);font-size:.78rem;font-weight:500}
.node.event{border-radius:var(--r-pill);border-color:var(--screen-fg-3)}
.node.gateway{border-style:dashed;color:var(--screen-fg-2)}
.node.user{border-color:var(--screen-fg);color:var(--screen-fg)}
.node.agent{border-color:var(--ember);color:var(--screen-fg)}
.edge{width:18px;height:1.5px;background:var(--screen-line-2);display:inline-block;position:relative}
.edge::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:var(--screen-line-2)}
.rule{background:var(--screen-bg);border:1px solid var(--screen-line);border-radius:var(--r-sm);padding:12px 14px}
.rule strong{font-size:.85rem}
.timeline{list-style:none;padding:0;margin:0 0 12px}
.timeline li{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:10px 0 10px 22px;border-left:1.5px solid var(--screen-line-2);position:relative;font-size:.84rem}
.timeline li::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--screen-line-2);border:2px solid var(--screen-bg-2)}
.timeline li.done::before{background:var(--screen-fg)}
.timeline li.waiting::before{background:var(--ember);box-shadow:0 0 0 4px color-mix(in srgb,var(--ember) 25%,transparent)}
.tl-label{font-weight:600;color:var(--screen-fg-2)}
.tl-text{color:var(--screen-fg)}
.timeline li.pending .tl-text{color:var(--screen-fg-3)}
.approval{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--ember);border-radius:var(--r-sm);background:var(--screen-bg);font-size:.84rem}
.approval-actions{display:inline-flex;gap:8px;flex-wrap:wrap}
.fake-btn{padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--screen-line-2);font-size:.76rem;font-weight:600;color:var(--screen-fg-2)}
.fake-btn.primary{background:var(--ember);color:var(--black);border-color:var(--ember)}

/* ---------- 10. Home blocks ---------- */
.problem-grid{display:grid;gap:var(--s3)}
@media (min-width:920px){.problem-grid{grid-template-columns:1.1fr 1fr}}
.statement{font-size:var(--t-xl);line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--fg);padding-left:22px;border-left:3px solid var(--ember);margin:0 0 22px;text-wrap:pretty}
.symptoms{display:grid;gap:14px}
.symptom{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:18px 20px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r)}
.symptom h3{font-size:var(--t-md);margin:2px 0 4px}
.symptom p{margin:0;color:var(--fg-2);font-size:var(--t-sm)}
.showcase{display:grid;gap:clamp(var(--s4),4vw,var(--s6))}
@media (min-width:980px){.showcase{grid-template-columns:1fr 1fr}}
.mock-caption{margin-top:22px}
.mock-caption h3{font-size:var(--t-xl)}
.mock-caption p{color:var(--fg-2)}
.modular{display:grid;gap:18px;align-items:center}
@media (min-width:920px){.modular{grid-template-columns:1fr 1.4fr}}
.core-block{background:var(--fg);color:var(--bg);border-radius:var(--r-lg);padding:28px 26px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.core-block .mark{position:absolute;right:-20px;top:-30px;width:180px;height:180px;color:var(--bg);opacity:.12}
.core-block strong{font-size:var(--t-xl);letter-spacing:-.02em;display:block;margin-bottom:6px;color:var(--bg)}
.core-block p{margin:0;color:var(--bg);opacity:.8;font-size:var(--t-sm)}
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mod{display:flex;align-items:center;gap:10px;padding:16px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);color:var(--fg);font-weight:500;font-size:var(--t-sm);transition:border-color var(--d2) var(--ease),transform var(--d2) var(--ease)}
.mod:hover{border-color:var(--fg);text-decoration:none;transform:translateY(-2px)}
.mod .ico{width:20px;height:20px;color:var(--fg)}
.band{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:center;padding:clamp(var(--s6),7vw,var(--s12)) 0}
.band-media{position:absolute;inset:0 0 0 30%}
.band-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.band-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--black) 0%,color-mix(in srgb,var(--black) 75%,transparent) 30%,transparent 70%)}
.band .wrap{position:relative;z-index:1}
.band-copy{max-width:56ch}
@media (max-width:979px){.band{padding-top:0;display:block}.band-media{position:relative;inset:auto;height:280px;margin-bottom:var(--s4)}.band-media::after{background:linear-gradient(180deg,color-mix(in srgb,var(--black) 10%,transparent),var(--black))}}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:var(--s3)}
.trust div{border-left:1px solid var(--grey);padding-left:16px}
.trust strong{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.trust .ico{width:18px;height:18px}
.trust p{margin:0;font-size:var(--t-sm);color:var(--fg-2)}
.cta-band{text-align:center}
.cta-band .watermark{display:block;position:absolute;left:50%;top:50%;width:min(70vw,620px);transform:translate(-50%,-46%);color:var(--white);opacity:.05;pointer-events:none}
.cta-band .wrap{position:relative;max-width:760px}
.cta-band .lede{margin:0 auto}
.cta-band .cta-row{justify-content:center}

/* ---------- 11. Architecture explorer ---------- */
.explorer{display:grid;gap:var(--s3)}
@media (min-width:980px){.explorer{grid-template-columns:1fr 1fr;align-items:start}}
.layers{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:layer}
.layer{counter-increment:layer}
.layer-btn{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:4px 14px;width:100%;text-align:left;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--fg);font:inherit;cursor:pointer;transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease),transform var(--d1) var(--ease)}
.layer-btn:hover{border-color:var(--line-2);transform:translateX(2px)}
.layer-btn[aria-expanded="true"]{border-color:var(--fg);box-shadow:inset 3px 0 0 var(--fg)}
.layer-num{font-size:var(--t-xs);letter-spacing:.1em;font-weight:600;color:var(--fg-3);grid-row:span 2}
.layer-num::before{content:counter(layer,decimal-leading-zero)}
.layer-name{font-weight:600;font-size:var(--t-md)}
.layer-short{grid-column:2;font-size:var(--t-xs);color:var(--fg-3);line-height:1.4}
.layer-btn .ico{grid-row:span 2;width:18px;height:18px;transition:transform var(--d2) var(--ease);color:var(--fg-3)}
.layer-btn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.layer.core .layer-btn{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.layer.core .layer-num,.layer.core .layer-short,.layer.core .ico{color:var(--bg);opacity:.75}
.layer.core .layer-btn[aria-expanded="true"]{box-shadow:inset 3px 0 0 var(--ember)}
.layer-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d3) var(--ease)}
.layer-panel.open{grid-template-rows:1fr}
.layer-panel > div{overflow:hidden}
.layer-panel-inner{padding:14px 16px 18px 68px}
.layer-panel-inner p{color:var(--fg-2);margin:0 0 .6em;font-size:var(--t-sm)}
.layer-panel-inner ul.checks li{font-size:var(--t-sm)}
.layer-panel-inner .status{margin-top:10px}
@media (max-width:560px){.layer-panel-inner{padding-left:16px}}
.explorer-side{position:sticky;top:112px}
.stack{width:100%;height:auto;font-family:var(--font)}
.stack rect{fill:var(--bg-2);stroke:var(--line-2);stroke-width:1;transition:fill var(--d2) var(--ease),stroke var(--d2) var(--ease)}
.stack text{font-size:13px;font-weight:500;fill:var(--fg-2);transition:fill var(--d2) var(--ease)}
.stack .n{font-size:11px;font-weight:600;fill:var(--fg-3);letter-spacing:.08em}
.stack .core rect{fill:var(--fg);stroke:var(--fg)}
.stack .core text{fill:var(--bg)}
.stack g.on rect{fill:var(--fg);stroke:var(--fg)}
.stack g.on text{fill:var(--bg)}
.stack g.core.on rect{stroke:var(--ember);stroke-width:2}
@media (max-width:979px){.explorer-side{position:static}}
.explorer.compact .layer-btn{padding:9px 14px}
.explorer.compact .layer-short{display:none}
.explorer.compact .layer-num{grid-row:auto}
.explorer.compact .layer-btn .ico{grid-row:auto}
.explorer.compact .layer-panel-inner{padding:10px 14px 14px 66px}
.explorer.compact .layer-panel-inner ul.checks{display:none}
.explorer.compact .layer-panel-inner .status{margin-top:4px}
.teaser-grid{display:grid;gap:var(--s3);align-items:start}
@media (min-width:1000px){.teaser-grid{grid-template-columns:1.6fr 1fr}.teaser-grid > :last-child{position:sticky;top:112px}}
@media (scripting:none){.layer-panel{grid-template-rows:1fr}.layer-btn .ico{display:none}}

/* ---------- 12. Build your suite ---------- */
.suite{display:grid;gap:var(--s3)}
@media (min-width:980px){.suite{grid-template-columns:1.3fr 1fr;align-items:start}}
.suite-core{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);background:var(--fg);color:var(--bg);margin-bottom:var(--s2)}
.suite-core .mark{width:38px;height:38px;color:var(--bg)}
.suite-core strong{display:block;color:var(--bg)}
.suite-core span{font-size:var(--t-sm);opacity:.8}
.suite-group h3{font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--fg-3);margin:var(--s2) 0 var(--s1)}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:8px;list-style:none;margin:0;padding:0}
.pick{display:grid;gap:2px;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);color:var(--fg);font:inherit;cursor:pointer;position:relative;transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease),transform var(--d1) var(--ease)}
.pick:hover{border-color:var(--line-2);transform:translateY(-1px)}
.pick strong{font-size:var(--t-sm);font-weight:600;padding-right:26px}
.pick span{font-size:var(--t-xs);color:var(--fg-3)}
.pick::after{content:"";position:absolute;right:12px;top:14px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);transition:background var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.pick[aria-pressed="true"]{border-color:var(--fg);background:var(--bg-2)}
.pick[aria-pressed="true"]::after{background:var(--fg);border-color:var(--fg);box-shadow:inset 0 0 0 3px var(--bg-2)}
.suite-out{position:sticky;top:112px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
@media (max-width:979px){.suite-out{position:static}}
.suite-out .eyebrow{margin-bottom:8px}
.suite-formula{font-size:var(--t-xl);font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:0 0 var(--s2);text-wrap:balance}
.suite-formula .plus{color:var(--fg-3);font-weight:400;margin:0 .25em}
.suite-links{list-style:none;padding:0;margin:var(--s2) 0 0;display:grid;gap:8px}
.suite-links li{position:relative;padding-left:22px;font-size:var(--t-sm);color:var(--fg-2)}
.suite-links li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--ember)}
.suite-links li.quiet::before{background:var(--line-2)}
.suite-note{font-size:var(--t-xs);color:var(--fg-3);margin:var(--s2) 0 0}
.suite-fallback{display:none}
@media (scripting:none){.suite-fallback{display:block}.suite-out .suite-links,.suite-out .suite-formula{display:none}}

/* ---------- 13. Strategy Lab demo ---------- */
.lab{display:grid;gap:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2)}
@media (min-width:980px){.lab{grid-template-columns:320px 1fr}}
.lab-levers{display:grid;gap:18px;align-content:start}
.lever label{display:flex;justify-content:space-between;align-items:baseline;font-weight:500;font-size:var(--t-sm);margin-bottom:6px}
.lever output{font-variant-numeric:tabular-nums;font-weight:600;color:var(--fg)}
.lever input[type="range"]{width:100%;height:28px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.lever input[type="range"]::-webkit-slider-runnable-track{height:4px;background:var(--line-2);border-radius:2px}
.lever input[type="range"]::-moz-range-track{height:4px;background:var(--line-2);border-radius:2px}
.lever input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--fg);border:3px solid var(--bg-2);margin-top:-9px;box-shadow:0 0 0 1px var(--fg)}
.lever input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--fg);border:3px solid var(--bg-2);box-shadow:0 0 0 1px var(--fg)}
.lever input[type="range"]:focus-visible{outline:3px solid var(--ember);outline-offset:4px}
.lab-chart{display:grid;gap:14px}
.lab-chart .screen{font-size:.8rem}
.lab-chart .fan{min-height:180px}
.lab-chart .fan .band-live{fill:var(--ember);opacity:.4;transition:d var(--d3) var(--ease)}
.lab-chart .fan .band-base{fill:var(--grey);opacity:.35}
.lab-chart .fan .base-line{stroke:var(--screen-fg);stroke-width:1.25;fill:none;stroke-dasharray:3 4}
.lab-chart .fan .mid-line{stroke:var(--ember);stroke-width:2;fill:none;transition:d var(--d3) var(--ease)}
.lab-out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.lab-out{grid-template-columns:1fr}}
.lab-out .kpi{color:var(--screen-fg)}
.lab-out .kpi .v{font-size:clamp(.95rem,1.4vw,1.1rem);white-space:normal;color:var(--screen-fg)}
.lab-assume{font-size:var(--t-xs);color:var(--fg-3);margin:0;padding-left:1.2em}
.lab-assume li{margin-bottom:4px}
.lab-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:var(--s2)}
.lab-head .label-illustrative{margin:0}

/* ---------- 14. Product tour: scroll story ---------- */
.story{position:relative;display:grid;gap:var(--s3)}
@media (min-width:980px){.story{grid-template-columns:56px 1fr}}
.story-rail{display:none}
@media (min-width:980px){
  .story-rail{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(50vh - 180px);align-self:start;height:max-content;list-style:none;margin:0;padding:0}
  .story-rail a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);font-size:var(--t-xs);font-weight:600;color:var(--fg-3);transition:background var(--d2) var(--ease),color var(--d2) var(--ease),border-color var(--d2) var(--ease)}
  .story-rail a:hover{text-decoration:none;border-color:var(--fg)}
  .story-rail a.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
}
.scene{display:grid;gap:var(--s3);align-items:center;padding:var(--s4) 0;scroll-margin-top:112px}
.scene + .scene{border-top:1px solid var(--hair)}
@media (min-width:980px){.scene{grid-template-columns:.8fr 1.2fr;min-height:82vh;gap:var(--s6)}}
.scene-copy{position:sticky;top:120px;align-self:start}
@media (max-width:979px){.scene-copy{position:static}}
.scene-num{display:inline-block;font-size:var(--t-xs);letter-spacing:.12em;font-weight:600;color:var(--fg-3);margin-bottom:8px}
.scene-copy h3{font-size:var(--t-2xl);margin:4px 0 .4em}
.scene-copy p{color:var(--fg-2);max-width:48ch}
.scene-media{align-self:center}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .scene-media .screen{transform:translateY(24px) scale(.985);opacity:.6;transition:transform var(--d3) var(--ease),opacity var(--d3) var(--ease)}
  .scene.active .scene-media .screen{transform:none;opacity:1}
}

/* ---------- 15. Module rows, stepper, FAQ, glossary ---------- */
.stepper{list-style:none;padding:0;margin:0;display:grid;gap:14px;counter-reset:step}
@media (min-width:980px){.stepper{grid-template-columns:repeat(5,1fr);gap:12px}}
.stepper li{position:relative;counter-increment:step;padding:20px 18px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.stepper li::before{content:counter(step,decimal-leading-zero);display:block;font-size:var(--t-xs);letter-spacing:.14em;color:var(--fg-3);font-weight:600;margin-bottom:12px}
.stepper strong{display:block;margin-bottom:6px}
.stepper p{margin:0;font-size:var(--t-sm);color:var(--fg-2)}
.module-row{display:grid;gap:18px 32px;padding:30px 0;border-top:1px solid var(--hair);align-items:start}
@media (min-width:860px){.module-row{grid-template-columns:280px 1fr 1fr}}
.module-row .head{display:flex;gap:14px;align-items:flex-start}
.module-row .ico-wrap{width:48px;height:48px;border-radius:var(--r-sm)}
.module-row h3{margin:4px 0 6px;font-size:var(--t-xl)}
.module-row h3 a{color:var(--fg)}
.module-row .status{margin-top:4px}
.module-row .summary{margin:0;color:var(--fg-2);font-size:var(--t-md)}
.module-row .more{margin-top:10px}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);margin-bottom:10px}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;padding:16px 20px;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:18px;height:18px;transition:transform var(--d2) var(--ease)}
.faq details[open] summary .ico{transform:rotate(180deg)}
.faq details p{padding:0 20px 18px;margin:0;color:var(--fg-2)}
.glossary{display:grid;gap:14px;margin:0}
@media (min-width:760px){.glossary{grid-template-columns:1fr 1fr}}
.glossary div{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.glossary dt{font-weight:600;margin-bottom:4px}
.glossary dd{margin:0;color:var(--fg-2);font-size:var(--t-sm)}
.story-aside h2{margin-top:var(--s4)}
.story-aside h2:first-child{margin-top:0}

/* ---------- 16. Early access form ---------- */
.form{display:grid;gap:18px}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:18px;min-width:0}
.form legend{padding:0;margin-bottom:6px}
.form label{display:block;font-weight:500;margin-bottom:6px;font-size:var(--t-sm)}
.form .hint{display:block;font-size:var(--t-xs);color:var(--fg-3);margin:-2px 0 6px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:var(--t-md);padding:13px 14px;border:1px solid var(--grey);border-radius:var(--r-sm);background:var(--bg-2);color:var(--fg);transition:border-color var(--d1) var(--ease),box-shadow var(--d1) var(--ease)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 15%,transparent)}
.form [aria-invalid="true"]{border-color:var(--ember);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 20%,transparent)}
.form textarea{min-height:130px;resize:vertical}
.form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg) 50%),linear-gradient(135deg,var(--fg) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.form .row{display:grid;gap:18px}
@media (min-width:600px){.form .row{grid-template-columns:1fr 1fr}}
.err{display:flex;gap:6px;align-items:flex-start;font-size:var(--t-sm);color:var(--fg);font-weight:500;margin:6px 0 0}
.err::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ember);flex:none;margin-top:.45em}
.form-summary{padding:12px 16px;border:1px solid var(--ember);border-radius:var(--r-sm);font-weight:500}
.form-summary p{margin:0}
.options{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:8px;margin:0;padding:0;list-style:none}
.options label{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);cursor:pointer;font-weight:500;font-size:var(--t-sm);transition:border-color var(--d1) var(--ease)}
.options label:hover{border-color:var(--line-2)}
.options label:has(:checked){border-color:var(--fg)}
.form input[type="checkbox"]{width:20px;height:20px;padding:0;margin:0;accent-color:var(--black);flex:none}
.consent{display:flex;gap:12px;align-items:flex-start}
.consent label{margin:0;font-weight:400;font-size:var(--t-sm);color:var(--fg-2)}
.consent a{text-decoration:underline;color:var(--fg)}
.count{font-size:var(--t-xs);color:var(--fg-3);text-align:right;margin:4px 0 0;font-variant-numeric:tabular-nums}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-status{font-weight:500;margin:10px 0 0}
.form small{color:var(--fg-3)}
.form small a{text-decoration:underline}
.form-actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.success{display:none;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2)}
.success:target,.success.show{display:block}
.success h2{font-size:var(--t-2xl)}
.success .eyebrow{margin-top:var(--s3)}
.success ol{margin:0 0 var(--s3)}
.aside-card{padding:28px 26px;border-radius:var(--r-lg);background:var(--fg);color:var(--bg);position:sticky;top:112px}
.aside-card h2{font-size:var(--t-xl);color:var(--bg)}
.aside-card ul.checks li{color:var(--bg);opacity:.9}
.aside-card ul.checks li::before{border-color:var(--bg)}
.aside-card ul.checks li::after{border-color:var(--bg)}
.aside-card .hr{border-color:color-mix(in srgb,var(--bg) 25%,transparent);margin:var(--s3) 0}
.aside-card p{color:var(--bg);opacity:.8;font-size:var(--t-sm);margin:0}
@media (max-width:999px){.aside-card{position:static}}
.noscript-note{display:none}
@media (scripting:none){.noscript-note{display:block}}

/* ---------- 17. Legal, 404 ---------- */
.legal .wrap{max-width:800px}
.legal h2{font-size:var(--t-xl);margin-top:2em}
.legal p{color:var(--fg-2)}
.legal .updated{font-size:var(--t-sm);color:var(--fg-3)}
.review{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--ember);color:var(--fg);font-weight:500}
.review .ico{width:20px;height:20px;margin-top:2px}
.nf{min-height:calc(100vh - 116px);display:flex;align-items:center}
.nf .wrap{display:grid;gap:var(--s4)}
@media (min-width:920px){.nf .wrap{grid-template-columns:1fr 1fr;align-items:center}}
.nf-code{font-size:clamp(5rem,16vw,12rem);font-weight:700;letter-spacing:-.06em;line-height:.9;color:var(--fg);font-variant-numeric:tabular-nums}
.nf-code span{color:var(--ember)}
.nf-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s3)}

/* ---------- 18. Footer ---------- */
.site-footer{background:var(--black);color:color-mix(in srgb,var(--white) 74%,var(--black));padding:var(--s10) 0 var(--s5);border-top:1px solid color-mix(in srgb,var(--white) 12%,var(--black));font-size:var(--t-sm)}
.site-footer .top{display:grid;gap:36px;margin-bottom:var(--s6)}
@media (min-width:860px){.site-footer .top{grid-template-columns:1.4fr repeat(3,1fr)}}
.site-footer .brand{margin-bottom:14px}
.site-footer .brand .mark{height:44px;width:38px}
.site-footer .tag{max-width:36ch;color:color-mix(in srgb,var(--white) 58%,var(--black));margin:0 0 var(--s2)}
.site-footer .fh{color:var(--white);font-size:var(--t-xs);letter-spacing:var(--track-caps);text-transform:uppercase;margin:0 0 14px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:color-mix(in srgb,var(--white) 74%,var(--black))}
.site-footer a:hover{color:var(--white);text-decoration:none}
.site-footer .legal-line{border-top:1px solid color-mix(in srgb,var(--grey) 45%,transparent);padding-top:22px;display:grid;gap:8px;font-size:var(--t-xs);color:color-mix(in srgb,var(--white) 58%,var(--black))}
@media (min-width:860px){.site-footer .legal-line{grid-template-columns:1fr auto;align-items:start}.site-footer .legal-line .owner{grid-column:1}.site-footer .legal-line .copy{grid-column:2;text-align:right}}
.site-footer .legal-line p{margin:0;color:inherit}
.site-footer .legal-line .owner{color:var(--white)}
.site-footer .status{margin-top:0}

/* generated */
[data-w="0"]{width:0%}[data-h="0"]{height:0%}[data-range="0"]{left:0%;width:28%}[data-w="1"]{width:1%}[data-h="1"]{height:1%}[data-range="1"]{left:0%;width:28%}[data-w="2"]{width:2%}[data-h="2"]{height:2%}[data-range="2"]{left:0%;width:28%}[data-w="3"]{width:3%}[data-h="3"]{height:3%}[data-range="3"]{left:0%;width:28%}[data-w="4"]{width:4%}[data-h="4"]{height:4%}[data-range="4"]{left:0%;width:28%}[data-w="5"]{width:5%}[data-h="5"]{height:5%}[data-range="5"]{left:0%;width:28%}[data-w="6"]{width:6%}[data-h="6"]{height:6%}[data-range="6"]{left:0%;width:28%}[data-w="7"]{width:7%}[data-h="7"]{height:7%}[data-range="7"]{left:0%;width:28%}[data-w="8"]{width:8%}[data-h="8"]{height:8%}[data-range="8"]{left:0%;width:28%}[data-w="9"]{width:9%}[data-h="9"]{height:9%}[data-range="9"]{left:0%;width:28%}[data-w="10"]{width:10%}[data-h="10"]{height:10%}[data-range="10"]{left:0%;width:28%}[data-w="11"]{width:11%}[data-h="11"]{height:11%}[data-range="11"]{left:0%;width:28%}[data-w="12"]{width:12%}[data-h="12"]{height:12%}[data-range="12"]{left:0%;width:28%}[data-w="13"]{width:13%}[data-h="13"]{height:13%}[data-range="13"]{left:0%;width:28%}[data-w="14"]{width:14%}[data-h="14"]{height:14%}[data-range="14"]{left:0%;width:28%}[data-w="15"]{width:15%}[data-h="15"]{height:15%}[data-range="15"]{left:0%;width:28%}[data-w="16"]{width:16%}[data-h="16"]{height:16%}[data-range="16"]{left:0%;width:28%}[data-w="17"]{width:17%}[data-h="17"]{height:17%}[data-range="17"]{left:0%;width:28%}[data-w="18"]{width:18%}[data-h="18"]{height:18%}[data-range="18"]{left:0%;width:28%}[data-w="19"]{width:19%}[data-h="19"]{height:19%}[data-range="19"]{left:0%;width:28%}[data-w="20"]{width:20%}[data-h="20"]{height:20%}[data-range="20"]{left:0%;width:28%}[data-w="21"]{width:21%}[data-h="21"]{height:21%}[data-range="21"]{left:0%;width:28%}[data-w="22"]{width:22%}[data-h="22"]{height:22%}[data-range="22"]{left:0%;width:28%}[data-w="23"]{width:23%}[data-h="23"]{height:23%}[data-range="23"]{left:0%;width:28%}[data-w="24"]{width:24%}[data-h="24"]{height:24%}[data-range="24"]{left:0%;width:28%}[data-w="25"]{width:25%}[data-h="25"]{height:25%}[data-range="25"]{left:0%;width:28%}[data-w="26"]{width:26%}[data-h="26"]{height:26%}[data-range="26"]{left:0%;width:28%}[data-w="27"]{width:27%}[data-h="27"]{height:27%}[data-range="27"]{left:0%;width:28%}[data-w="28"]{width:28%}[data-h="28"]{height:28%}[data-range="28"]{left:0%;width:28%}[data-w="29"]{width:29%}[data-h="29"]{height:29%}[data-range="29"]{left:1%;width:28%}[data-w="30"]{width:30%}[data-h="30"]{height:30%}[data-range="30"]{left:2%;width:28%}[data-w="31"]{width:31%}[data-h="31"]{height:31%}[data-range="31"]{left:3%;width:28%}[data-w="32"]{width:32%}[data-h="32"]{height:32%}[data-range="32"]{left:4%;width:28%}[data-w="33"]{width:33%}[data-h="33"]{height:33%}[data-range="33"]{left:5%;width:28%}[data-w="34"]{width:34%}[data-h="34"]{height:34%}[data-range="34"]{left:6%;width:28%}[data-w="35"]{width:35%}[data-h="35"]{height:35%}[data-range="35"]{left:7%;width:28%}[data-w="36"]{width:36%}[data-h="36"]{height:36%}[data-range="36"]{left:8%;width:28%}[data-w="37"]{width:37%}[data-h="37"]{height:37%}[data-range="37"]{left:9%;width:28%}[data-w="38"]{width:38%}[data-h="38"]{height:38%}[data-range="38"]{left:10%;width:28%}[data-w="39"]{width:39%}[data-h="39"]{height:39%}[data-range="39"]{left:11%;width:28%}[data-w="40"]{width:40%}[data-h="40"]{height:40%}[data-range="40"]{left:12%;width:28%}[data-w="41"]{width:41%}[data-h="41"]{height:41%}[data-range="41"]{left:13%;width:28%}[data-w="42"]{width:42%}[data-h="42"]{height:42%}[data-range="42"]{left:14%;width:28%}[data-w="43"]{width:43%}[data-h="43"]{height:43%}[data-range="43"]{left:15%;width:28%}[data-w="44"]{width:44%}[data-h="44"]{height:44%}[data-range="44"]{left:16%;width:28%}[data-w="45"]{width:45%}[data-h="45"]{height:45%}[data-range="45"]{left:17%;width:28%}[data-w="46"]{width:46%}[data-h="46"]{height:46%}[data-range="46"]{left:18%;width:28%}[data-w="47"]{width:47%}[data-h="47"]{height:47%}[data-range="47"]{left:19%;width:28%}[data-w="48"]{width:48%}[data-h="48"]{height:48%}[data-range="48"]{left:20%;width:28%}[data-w="49"]{width:49%}[data-h="49"]{height:49%}[data-range="49"]{left:21%;width:28%}[data-w="50"]{width:50%}[data-h="50"]{height:50%}[data-range="50"]{left:22%;width:28%}[data-w="51"]{width:51%}[data-h="51"]{height:51%}[data-range="51"]{left:23%;width:28%}[data-w="52"]{width:52%}[data-h="52"]{height:52%}[data-range="52"]{left:24%;width:28%}[data-w="53"]{width:53%}[data-h="53"]{height:53%}[data-range="53"]{left:25%;width:28%}[data-w="54"]{width:54%}[data-h="54"]{height:54%}[data-range="54"]{left:26%;width:28%}[data-w="55"]{width:55%}[data-h="55"]{height:55%}[data-range="55"]{left:27%;width:28%}[data-w="56"]{width:56%}[data-h="56"]{height:56%}[data-range="56"]{left:28%;width:28%}[data-w="57"]{width:57%}[data-h="57"]{height:57%}[data-range="57"]{left:29%;width:28%}[data-w="58"]{width:58%}[data-h="58"]{height:58%}[data-range="58"]{left:30%;width:28%}[data-w="59"]{width:59%}[data-h="59"]{height:59%}[data-range="59"]{left:31%;width:28%}[data-w="60"]{width:60%}[data-h="60"]{height:60%}[data-range="60"]{left:32%;width:28%}[data-w="61"]{width:61%}[data-h="61"]{height:61%}[data-range="61"]{left:33%;width:28%}[data-w="62"]{width:62%}[data-h="62"]{height:62%}[data-range="62"]{left:34%;width:28%}[data-w="63"]{width:63%}[data-h="63"]{height:63%}[data-range="63"]{left:35%;width:28%}[data-w="64"]{width:64%}[data-h="64"]{height:64%}[data-range="64"]{left:36%;width:28%}[data-w="65"]{width:65%}[data-h="65"]{height:65%}[data-range="65"]{left:37%;width:28%}[data-w="66"]{width:66%}[data-h="66"]{height:66%}[data-range="66"]{left:38%;width:28%}[data-w="67"]{width:67%}[data-h="67"]{height:67%}[data-range="67"]{left:39%;width:28%}[data-w="68"]{width:68%}[data-h="68"]{height:68%}[data-range="68"]{left:40%;width:28%}[data-w="69"]{width:69%}[data-h="69"]{height:69%}[data-range="69"]{left:41%;width:28%}[data-w="70"]{width:70%}[data-h="70"]{height:70%}[data-range="70"]{left:42%;width:28%}[data-w="71"]{width:71%}[data-h="71"]{height:71%}[data-range="71"]{left:43%;width:28%}[data-w="72"]{width:72%}[data-h="72"]{height:72%}[data-range="72"]{left:44%;width:28%}[data-w="73"]{width:73%}[data-h="73"]{height:73%}[data-range="73"]{left:45%;width:28%}[data-w="74"]{width:74%}[data-h="74"]{height:74%}[data-range="74"]{left:46%;width:28%}[data-w="75"]{width:75%}[data-h="75"]{height:75%}[data-range="75"]{left:47%;width:28%}[data-w="76"]{width:76%}[data-h="76"]{height:76%}[data-range="76"]{left:48%;width:28%}[data-w="77"]{width:77%}[data-h="77"]{height:77%}[data-range="77"]{left:49%;width:28%}[data-w="78"]{width:78%}[data-h="78"]{height:78%}[data-range="78"]{left:50%;width:28%}[data-w="79"]{width:79%}[data-h="79"]{height:79%}[data-range="79"]{left:51%;width:28%}[data-w="80"]{width:80%}[data-h="80"]{height:80%}[data-range="80"]{left:52%;width:28%}[data-w="81"]{width:81%}[data-h="81"]{height:81%}[data-range="81"]{left:53%;width:28%}[data-w="82"]{width:82%}[data-h="82"]{height:82%}[data-range="82"]{left:54%;width:28%}[data-w="83"]{width:83%}[data-h="83"]{height:83%}[data-range="83"]{left:55%;width:28%}[data-w="84"]{width:84%}[data-h="84"]{height:84%}[data-range="84"]{left:56%;width:28%}[data-w="85"]{width:85%}[data-h="85"]{height:85%}[data-range="85"]{left:57%;width:28%}[data-w="86"]{width:86%}[data-h="86"]{height:86%}[data-range="86"]{left:58%;width:28%}[data-w="87"]{width:87%}[data-h="87"]{height:87%}[data-range="87"]{left:59%;width:28%}[data-w="88"]{width:88%}[data-h="88"]{height:88%}[data-range="88"]{left:60%;width:28%}[data-w="89"]{width:89%}[data-h="89"]{height:89%}[data-range="89"]{left:61%;width:28%}[data-w="90"]{width:90%}[data-h="90"]{height:90%}[data-range="90"]{left:62%;width:28%}[data-w="91"]{width:91%}[data-h="91"]{height:91%}[data-range="91"]{left:63%;width:28%}[data-w="92"]{width:92%}[data-h="92"]{height:92%}[data-range="92"]{left:64%;width:28%}[data-w="93"]{width:93%}[data-h="93"]{height:93%}[data-range="93"]{left:65%;width:28%}[data-w="94"]{width:94%}[data-h="94"]{height:94%}[data-range="94"]{left:66%;width:28%}[data-w="95"]{width:95%}[data-h="95"]{height:95%}[data-range="95"]{left:67%;width:28%}[data-w="96"]{width:96%}[data-h="96"]{height:96%}[data-range="96"]{left:68%;width:28%}[data-w="97"]{width:97%}[data-h="97"]{height:97%}[data-range="97"]{left:69%;width:28%}[data-w="98"]{width:98%}[data-h="98"]{height:98%}[data-range="98"]{left:70%;width:28%}[data-w="99"]{width:99%}[data-h="99"]{height:99%}[data-range="99"]{left:71%;width:28%}[data-w="100"]{width:100%}[data-h="100"]{height:100%}[data-range="100"]{left:72%;width:28%}