/* ============ FONTS (inlined; CSP blocks CDNs) ============ */
@font-face{font-family:'Literata';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/literata-roman.woff2) format('woff2');}
@font-face{font-family:'Literata';font-style:italic;font-weight:400 700;font-display:swap;src:url(/assets/fonts/literata-italic.woff2) format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/instrument-sans.woff2) format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-mono-400.woff2) format('woff2');}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-mono-500.woff2) format('woff2');}

/* ============ TOKENS ============ */
:root{
  --scheme:light; --logo-invert:0;
  --gv1:#4F46E5; --gv2:#B45309; --gv3:#097C72; --chart-a:#4F46E5; --chart-b:#8A93A6; --gv4:#D32424;
  --gv5:#0369A1; --gv6:#107D38; --gv7:#9333EA; --gv8:#D22572;
  --bg:#FFFFFF; --paper:#F4F5F7; --paper-2:#ECEEF1;
  --fg:#101317; --fg-dim:#676C78; --fg-faint:#5F646E;
  --line:rgba(16,19,23,.12); --line-soft:rgba(16,19,23,.07); --line-strong:rgba(16,19,23,.3);
  --accent:#2D26D6; --accent-ink:#1F1AA8; --accent-wash:rgba(45,38,214,.05);
  --signal:#0B7468; --amber:#9A5B00; --critical:#B3261E;
  --shadow:0 1px 2px rgba(16,19,23,.04), 0 12px 32px -16px rgba(16,19,23,.16);

  --f-display:'Literata',Georgia,serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --f-mono:'Plex Mono',ui-monospace,monospace;

  --step--1:clamp(.75rem,.73rem + .1vw,.8125rem);
  --step-0:clamp(1rem,.95rem + .2vw,1.125rem);
  --step-1:clamp(1.125rem,1rem + .5vw,1.25rem);
  --step-2:clamp(1.5rem,1.3rem + .9vw,2.125rem);
  --step-3:clamp(2rem,1.6rem + 1.9vw,3.25rem);
  --step-4:clamp(2.5rem,1.8rem + 3.2vw,4.5rem);
  --step-5:clamp(2.75rem,1.75rem + 3.6vw,5rem); /* 80px cap -- Palantir register */

  --gut:clamp(20px,4vw,52px); --maxw:1240px;
}
:root[data-theme="light"]{
  --scheme:light; --logo-invert:0;
  --bg:#FFFFFF; --paper:#F4F5F7; --paper-2:#ECEEF1;
  --fg:#101317; --fg-dim:#676C78; --fg-faint:#5F646E;
  --line:rgba(16,19,23,.12); --line-soft:rgba(16,19,23,.07); --line-strong:rgba(16,19,23,.3);
  --accent:#2D26D6; --accent-ink:#1F1AA8; --accent-wash:rgba(45,38,214,.05);
  --signal:#0B7468; --amber:#9A5B00; --critical:#B3261E;
  --shadow:0 1px 2px rgba(16,19,23,.04), 0 12px 32px -16px rgba(16,19,23,.16);
}
:root[data-theme="dark"]{
  --scheme:dark; --logo-invert:1;
  --bg:#0D0F13; --paper:#15181E; --paper-2:#1C2028;
  --fg:#F0F1F4; --fg-dim:#969CA8; --fg-faint:#868D99;
  --line:rgba(255,255,255,.13); --line-soft:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.3);
  --accent:#7B74FF; --accent-ink:#A9A4FF; --accent-wash:rgba(123,116,255,.1);
  --signal:#2FD9C3; --amber:#E9A144; --critical:#F2837B;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 36px -16px rgba(0,0,0,.8);
  /* Palette hues are shared by both themes, but AA is measured against the
     surface: the darker light-mode red and pink drop under 4.5:1 on a dark
     background, so dark mode keeps its own brighter pair. */
  --chart-a:#7B74FF; --chart-b:#7C859B;
  --gv4:#FC2F2F; --gv8:#F02D84;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; font-synthesis-weight:none;
  overflow-x:hidden;
}
/* Display face: large, light, tight -- the type carries the page. */
h1,h2{
  margin:0; font-family:var(--f-display); font-weight:700;
  letter-spacing:-.021em; line-height:1.02; text-wrap:balance;
}
h3,h4{margin:0; font-family:var(--f-body); font-weight:600; letter-spacing:-.015em; line-height:1.2}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
canvas{display:block}
::selection{background:var(--accent); color:#fff}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.em{font-style:italic; color:var(--accent)}
.h-em{color:var(--accent)}

/* ============ LAYOUT ============ */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.sec-title{
  font-family:var(--f-body); font-size:16px; font-weight:500;
  letter-spacing:.075rem; line-height:24px; text-transform:uppercase;
  color:var(--fg); border-top:1px solid var(--fg);
  padding-top:24px; margin:0 0 40px; display:flex; gap:14px; align-items:baseline;
}
.sec-title .idx{color:var(--accent); font-variant-numeric:tabular-nums}

section{border-top:1px solid var(--line-soft); padding-block:clamp(48px,5.5vw,80px)}
/* Constrain the heading itself, not its wrapper: `ch` must resolve against the
   display face at display size, or it measures body-font ch and goes skinny. */
h2{font-size:var(--step-3); margin-bottom:18px; max-width:17ch}
.sec-sub{color:var(--fg-dim); max-width:60ch; font-size:1.25rem; line-height:2rem}

/* ============ NAV ============ */
header{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex; align-items:center; gap:30px; height:64px}
.logo{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--f-body); font-weight:600; font-size:1.0625rem; letter-spacing:-.02em;
}
.logo .mark{width:19px;height:19px;flex:none}
.nav .links{display:flex; gap:24px; margin-left:6px}
.nav .links a{
  font-family:var(--f-body); font-size:13px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fg-dim); text-decoration:none; transition:color .15s;
}
.nav .links a:hover{color:var(--fg)}
.nav .right{margin-left:auto; display:flex; align-items:center; gap:10px}

/* Mobile nav: below 1000px the inline links can't fit, so they move into a
   disclosure panel rather than simply vanishing. */
.burger{display:none; width:32px;height:32px; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--fg-dim)}
.burger:hover{color:var(--fg); border-color:var(--line-strong)}
.burger svg{width:15px;height:15px}
.burger .x{display:none}
.burger[aria-expanded="true"] .x{display:block}
.burger[aria-expanded="true"] .bars{display:none}
.mnav{
  position:absolute; top:100%; left:0; right:0; z-index:70;
  background:var(--bg); border-bottom:1px solid var(--line);
  padding:10px var(--gut) 20px; display:flex; flex-direction:column;
}
.mnav a{
  font-family:var(--f-body); font-size:13.5px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--fg-dim); text-decoration:none;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.mnav[hidden]{display:none}
.mnav a:last-of-type{border-bottom:0}
.mnav a:hover,.mnav a:focus-visible{color:var(--accent)}
.mnav .btn{margin-top:14px; justify-content:center}
@media (max-width:1000px){
  .nav .links{display:none}
  .burger{display:grid}
  .nav .right .btn-p{display:none} /* demo CTA lives inside the panel instead */
}
@media (min-width:1001px){ .mnav{display:none !important} }
.tgl{
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--fg-dim);
}
.tgl:hover{color:var(--fg);border-color:var(--line-strong)}
/* McKinsey's 200px min-width is for body CTAs; in the header it overflows the bar */
.nav .btn,.mnav .btn{min-width:0;min-height:40px;padding:8px 18px;font-size:15px}
.tgl svg{width:15px;height:15px}
.tgl .sun{display:none} .tgl .moon{display:block}
:root[data-theme="dark"] .tgl .sun{display:block}
:root[data-theme="dark"] .tgl .moon{display:none}
:root[data-theme="light"] .tgl .sun{display:none}
:root[data-theme="light"] .tgl .moon{display:block}

/* real SCIKIQ wordmark, swapped by theme (mirrors the sun/moon logic above) */
.logo img{height:22px;width:auto;display:block}
.f-brand .logo img{height:30px}
.logo .l-dark{display:none} .logo .l-light{display:block}
:root[data-theme="dark"] .logo .l-light{display:none}
:root[data-theme="dark"] .logo .l-dark{display:block}
:root[data-theme="light"] .logo .l-light{display:block}
:root[data-theme="light"] .logo .l-dark{display:none}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;
  font-family:var(--f-body);font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;
  padding:10px 24px;min-height:48px;min-width:200px;border-radius:0;
  border:1px solid transparent;transition:all .12s linear;white-space:nowrap;
}
.btn-p{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-p:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 7px 14px 0 rgba(0,0,0,.2);transform:translateY(-2px)}
.btn-s{border-color:var(--line-strong);color:var(--fg)}
.btn-s:hover{border-color:var(--fg);background:var(--accent-wash)}
.btn svg{width:13px;height:13px;flex:none}

/* ============ HERO ============ */
.hero{
  position:relative; border-top:0; overflow:hidden;
  padding-block:clamp(72px,11vw,150px) clamp(72px,10vw,130px);
}
/* full-bleed lineage field, masked away from the type */
.hero-field{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 30%,#000 54%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 0%,transparent 30%,#000 54%,#000 100%);
}
.hero-field canvas{width:100%;height:100%}
@media (max-width:1000px){
  .hero-field{
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 46%,#000 74%);
    mask-image:linear-gradient(180deg,transparent 0%,transparent 46%,#000 74%);
    opacity:.5;
  }
}
/* Below 620px the field can't sit *behind* the copy -- the labels collide with
   the headline, which is why this used to be display:none. Instead of dropping
   the visual on mobile entirely, give it its own block under the copy: full
   opacity, no mask, and a fixed height the canvas can lay out inside. */
@media (max-width:620px){
  .hero{display:flex; flex-direction:column}
  .hero .wrap{order:1}
  .hero-field{
    position:relative; inset:auto; order:2;
    width:100%; height:300px; margin-top:30px;
    opacity:1; -webkit-mask-image:none; mask-image:none;
  }
}
/* copy owns the left column; the field is masked in from ~34% rightward */
.hero-copy{position:relative; z-index:1; max-width:min(600px,48%)}
@media (max-width:1000px){ .hero-copy{max-width:none} }
.hero .wrap{position:relative; z-index:1}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);
  font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-dim);margin-bottom:26px;
}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 20%,transparent)}

h1{font-size:var(--step-5); letter-spacing:-.032em; line-height:.9; margin-bottom:26px}
.lede{font-size:var(--step-1); color:var(--fg-dim); max-width:52ch; line-height:1.5}
.hero-cta{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
.hero-note{margin-top:20px;font-family:var(--f-body);font-size:12.5px;color:var(--fg-faint);letter-spacing:.05em}
.scroll-cue{
  margin-top:clamp(40px,6vw,72px); display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint);
}
.scroll-cue i{display:block;width:1px;height:26px;background:linear-gradient(var(--fg-faint),transparent);animation:drop 2.4s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ============ LEDGER ============ */
.ledger{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--bg)}
@media (max-width:820px){ .ledger{grid-template-columns:1fr} }
.ledger-col{padding:28px}
.ledger-col + .ledger-col{border-left:1px solid var(--line)}
@media (max-width:820px){ .ledger-col + .ledger-col{border-left:0;border-top:1px solid var(--line)} }
.ledger-col.after{background:var(--paper)}
.ledger-h{display:flex;align-items:center;gap:9px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ledger-h .tag{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ledger-col.before .tag{color:var(--amber)}
.ledger-col.after .tag{color:var(--signal)}
.ledger-h .n{margin-left:auto;font-family:var(--f-body);font-size:12px;color:var(--fg-faint);letter-spacing:.05em}
.ledger ul{list-style:none;margin:0;padding:0}
.ledger li{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:.9375rem;line-height:1.5;color:var(--fg-dim)}
.ledger li:last-child{border-bottom:0}
.ledger .gl{flex:none;width:15px;height:15px;margin-top:3px}
.ledger-col.after li{color:var(--fg)}

/* ============ STEPS ============ */
.steps{margin-top:56px;display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,.8fr);gap:0 36px;padding:38px 0;border-top:1px solid var(--line-soft);align-items:start}
@media (max-width:900px){ .step{grid-template-columns:44px 1fr;gap:0 18px} .step .step-side{grid-column:2;margin-top:20px} }
.step-n{
  font-family:var(--f-body);font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--accent);
  padding-top:6px;position:relative;align-self:stretch;
}
.step-n::after{content:"";position:absolute;left:4px;top:30px;bottom:-38px;width:1px;background:var(--line)}
.step:last-child .step-n::after{display:none}
@media (max-width:900px){ .step-n::after{display:none} }
.step .kicker{font-family:var(--f-body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:10px}
.step h3{font-family:var(--f-display);font-weight:600;font-size:var(--step-2);letter-spacing:-.02em;line-height:1;margin-bottom:12px}
.step p{color:var(--fg-dim);max-width:50ch;line-height:1.6}
.step-side{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.step-side span{
  padding:12px 0;font-family:var(--f-body);font-size:13px;color:var(--fg-dim);
  border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px;
}
.step-side span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--accent);flex:none}

/* ============ LAYERS ============ */
.layers{margin-top:56px;display:flex;flex-direction:column}
.layer{padding:40px 0;border-top:1px solid var(--line-soft)}
.layer-head{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,.44fr);gap:0 36px;align-items:start}
.layer-widget{margin-top:8px;padding-left:100px}
@media (max-width:900px){ .layer-widget{padding-left:0;margin-top:24px} }
@media (max-width:900px){
  .layer-head{grid-template-columns:44px 1fr;gap:0 18px}
  .layer .outcome{grid-column:2;margin-top:20px}
}
.layer-n{
  font-family:var(--f-body);font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--accent);
  padding-top:6px;position:relative;align-self:stretch;
}
.layer-head .kicker{font-family:var(--f-body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:10px}
.layer-head h3{font-family:var(--f-display);font-weight:600;font-size:var(--step-2);letter-spacing:-.02em;line-height:1.02;margin-bottom:12px;color:var(--accent)}
.layer-head p{color:var(--fg-dim);max-width:54ch;line-height:1.6}
.outcome{display:flex;flex-direction:column;gap:7px;padding-top:5px}
.outcome .olab{font-family:var(--f-body);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint)}
.outcome .oval{font-family:var(--f-body);font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--accent);line-height:1.4}

/* ============ CONTROL TOWER ============ */
.tower{margin-top:0;border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow)}
.tower-bar{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--paper)}
.tower-bar .tt{font-size:16px;font-weight:600;letter-spacing:-.01em}
.tower-bar .ts{font-size:14px;color:var(--fg-dim)}
.tower-bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--signal)}
.tower-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:pulse 2s ease-in-out infinite}
/* KPI values are stat tiles - hero numbers, not charts */
.kpis{display:grid;grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .kpis{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .kpis{grid-template-columns:1fr} }
.kpi{padding:22px 20px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.kpi:nth-child(3n){border-right:0}
@media (max-width:900px){ .kpi{border-right:1px solid var(--line-soft)} .kpi:nth-child(2n){border-right:0} }
@media (max-width:560px){ .kpi{border-right:0} }
.kpi .k{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);line-height:1.4;min-height:2.8em}
.kpi .v{font-family:var(--f-display);font-weight:700;font-size:2.5rem;line-height:1;letter-spacing:-.03em;margin:12px 0 8px;font-variant-numeric:tabular-nums}
/* status ships with an arrow glyph + sign - never colour alone */
.kpi .d{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.kpi .d svg{width:12px;height:12px}
.d.good{color:var(--signal)} .d.warn{color:var(--amber)} .d.crit{color:var(--critical)} .d.flat{color:var(--fg-dim)}
.trend{padding:22px 20px;border-bottom:1px solid var(--line-soft)}
.trend h5{font-size:14px;font-weight:600;margin:0 0 2px}
.trend .sub{font-size:13px;color:var(--fg-dim);margin-bottom:14px}
.spark{position:relative}
.spark svg{display:block;width:100%;height:120px;overflow:visible}
.spark .tip{
  position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--fg);color:var(--bg);font-size:12px;font-weight:600;
  padding:5px 9px;white-space:nowrap;transform:translate(-50%,-140%);font-variant-numeric:tabular-nums;
}
.rootcause{padding:20px;display:flex;gap:14px;align-items:flex-start;background:var(--paper)}
.rootcause .ic{flex:none;width:18px;height:18px;color:var(--amber);margin-top:2px}
.rootcause .rl{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.rootcause p{font-size:15px;line-height:1.55;color:var(--fg)}
.rootcause .act{margin-top:12px}
/* ---- interactive control tower: selectable KPIs + AI explainability ---- */
.kpi{cursor:pointer;position:relative;transition:background .15s}
.kpi::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--tone,var(--accent));opacity:0;transition:opacity .15s}
.kpi:hover{background:var(--paper)}
.kpi[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 6%,var(--bg))}
.kpi[aria-pressed="true"]::after{opacity:1}
.kpi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ct-hint{display:flex;gap:8px;align-items:center;padding:11px 20px;border-bottom:1px solid var(--line-soft);
  font-size:12.5px;color:var(--fg-dim);background:var(--bg)}
.ct-hint svg{flex:none;width:14px;height:14px;color:var(--accent)}
.rootcause .ic{color:var(--rc,var(--amber))}
.rootcause .rl{color:var(--rc,var(--amber))}
.ct-ai{padding:20px;border-top:1px solid var(--line);background:var(--bg)}
.ct-ai-top{display:flex;align-items:center;gap:12px;margin-bottom:15px;flex-wrap:wrap}
.ct-ai-lbl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ct-ai-lbl svg{width:15px;height:15px}
.ct-ai-conf{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.ct-ai-conf i{width:6px;height:6px;border-radius:50%;background:var(--signal)}
.ct-ai-fh{font-size:12px;font-weight:600;color:var(--fg);margin-bottom:13px;display:flex;gap:8px;align-items:baseline}
.ct-ai-note{font-size:11px;font-weight:500;color:var(--fg-faint)}
.ct-ai-factors{display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
.fac .fac-h{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--fg);margin-bottom:5px}
.fac .fac-h b{font-variant-numeric:tabular-nums;color:var(--fg-dim);font-weight:600}
.fac .fac-bar{height:7px;border-radius:100px;background:var(--paper-2);overflow:hidden}
.fac .fac-bar span{display:block;height:100%;border-radius:100px;background:var(--tone,var(--accent));width:0;transition:width .6s cubic-bezier(.4,0,.2,1)}
.ct-ai-action{display:flex;gap:11px;align-items:baseline;font-size:13.5px;line-height:1.5;color:var(--fg);padding-top:14px;border-top:1px solid var(--line-soft)}
.ct-ai-action .rk{flex:none;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--signal);white-space:nowrap}

/* ============ ONTOLOGY GRAPH ============ */
.gwrap{margin-top:0;border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow)}
.gtop{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper);flex-wrap:wrap}
.gtop input{
  flex:1;min-width:180px;font-family:var(--f-body);font-size:15px;color:var(--fg);
  background:var(--bg);border:1px solid var(--line);padding:9px 12px;border-radius:0;
}
.gtop input:focus{outline:0;border-color:var(--accent)}
.gbtn{
  font-family:var(--f-body);font-size:14px;font-weight:500;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);color:var(--fg);
  padding:9px 16px;border-radius:0;transition:all .12s;white-space:nowrap;
}
.gbtn:hover{border-color:var(--accent);color:var(--accent)}
.gbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.gstage{display:grid;grid-template-columns:minmax(0,1fr) 290px}
@media (max-width:900px){ .gstage{grid-template-columns:1fr} }
#ont{width:100%;height:clamp(380px,46vw,520px);display:block;cursor:grab;touch-action:none}
#ont:active{cursor:grabbing}
.ginspect{border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:14px;background:var(--paper)}
@media (max-width:900px){ .ginspect{border-left:0;border-top:1px solid var(--line)} }
.ginspect .ph{font-size:14px;color:var(--fg-dim);line-height:1.55}
.gi-type{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.gi-type i{width:9px;height:9px;border-radius:50%;flex:none}
.gi-name{font-family:var(--f-display);font-weight:700;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}
.gi-row{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.gi-row dt{color:var(--fg-dim)} .gi-row dd{margin:0;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.gi-links{font-size:13px;color:var(--fg-dim);line-height:1.7}
.gi-links b{color:var(--fg);font-weight:600}
.glegend{display:flex;flex-wrap:wrap;gap:8px 18px;padding:14px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-dim)}
.glegend span{display:inline-flex;align-items:center;gap:7px}
.glegend i{width:9px;height:9px;border-radius:50%;flex:none}
.ghint{padding:10px 18px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--fg-faint)}

/* ============ COPILOT ============ */
.chat{margin-top:0;border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow);display:flex;flex-direction:column}
.chat-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--paper)}
.chat-top .ct{font-size:16px;font-weight:600}
.chat-top .cs{font-size:13px;color:var(--fg-dim)}
.chat-top .on{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--signal)}
.chat-top .on i{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:pulse 2s ease-in-out infinite}
.chat-log{padding:20px;display:flex;flex-direction:column;gap:16px;min-height:230px;max-height:420px;overflow-y:auto}
.msg{display:flex;gap:12px;max-width:88%}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg .av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--accent);color:#fff}
.msg.me .av{background:var(--fg);color:var(--bg)}
.msg .bub{font-size:15px;line-height:1.6;border:1px solid var(--line);padding:12px 14px;background:var(--bg)}
.msg.me .bub{background:var(--paper);border-color:var(--line-soft)}
.cites{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.ccite{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--fg-dim);border:1px solid var(--line);padding:3px 8px}
.ccite i{width:5px;height:5px;border-radius:50%;background:var(--signal);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 20px}
.chip{
  font-family:var(--f-body);font-size:13.5px;cursor:pointer;text-align:left;
  background:transparent;border:1px solid var(--line);color:var(--fg-dim);padding:8px 12px;border-radius:0;transition:all .12s;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.typing{display:inline-flex;gap:4px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--fg-faint);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ============ AGENT FACTORY ============ */
.agents{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:820px){ .agents{grid-template-columns:1fr} }
.agent{background:var(--bg);padding:22px;display:flex;flex-direction:column;gap:12px}
.agent h3{font-size:1.0625rem}
.agent .ad{font-size:14px;color:var(--fg-dim);line-height:1.5}
.agent dl{margin:0;display:flex;flex-direction:column;gap:9px}
.agent .lab{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:3px}
.agent dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--fg-dim)}
.agent .val{font-size:14px;font-weight:600;color:var(--signal);line-height:1.45;padding-top:10px;border-top:1px solid var(--line-soft)}
.agent .btn{margin-top:auto;min-width:0;width:100%}
.runlog{margin-top:24px;border:1px solid var(--line);background:var(--bg)}
.runlog-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper);font-size:14px;font-weight:600}
.runlog-top .rs{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.07em;color:var(--fg-faint)}
.runlog-body{padding:18px;min-height:150px}
.runlog .idle{font-size:14px;color:var(--fg-dim)}
.rstep{display:flex;gap:12px;padding:9px 0;font-size:14px;line-height:1.5;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.rstep.in{opacity:1;transform:none}
.rstep .n{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;
  background:var(--accent-wash);color:var(--accent);border:1px solid var(--accent);margin-top:1px}
.rstep.done .n{background:var(--signal);border-color:var(--signal);color:#fff}
.runlog .final{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:14px;font-weight:600;color:var(--signal);display:flex;gap:9px;align-items:flex-start}
.runlog .final svg{width:16px;height:16px;flex:none;margin-top:2px}

.sub-h{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-faint);margin:48px 0 16px;padding-top:20px;border-top:1px solid var(--line)}
/* ============ USE-CASE PILLARS ============ */
.pillars{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;flex-wrap:wrap}
.p360{font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--fg-dim);margin-right:4px}
.pn{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;
  background:var(--accent-wash);color:var(--accent);border:1px solid var(--accent)}
.pl{font-size:11.5px;color:var(--fg-faint);margin-left:2px}
/* ============ AMBITION ============ */
.amb{margin-top:44px;display:flex;flex-direction:column-reverse;gap:1px;background:var(--line);border:1px solid var(--line)}
.amb-row{background:var(--bg);padding:20px 22px;display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
@media (max-width:700px){ .amb-row{grid-template-columns:34px 1fr;gap:12px} .amb-row .ad{grid-column:2} }
.amb-row .an{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--accent);color:#fff}
.amb-row h3{font-size:1.0625rem}
.amb-row .ad{font-size:14px;color:var(--fg-dim);line-height:1.5}
.amb-foot{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:700px){ .amb-foot{grid-template-columns:1fr} }
.amb-foot h4{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:10px}
.amb-foot .chipset{display:flex;flex-wrap:wrap;gap:7px}
.amb-foot .chipset span{font-size:13px;color:var(--fg-dim);border:1px solid var(--line);padding:6px 11px}

/* ============ MODULES ============ */
.mods{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (max-width:940px){ .mods{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .mods{grid-template-columns:1fr} }
.mod{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .2s;position:relative}
.mod:hover{background:var(--paper)}
.mod .ic{width:19px;height:19px;color:var(--accent);margin-bottom:16px}
.mod h3{font-size:1rem;margin-bottom:9px}
.mod p{font-size:.875rem;color:var(--fg-dim);line-height:1.55}
.mod .tag{position:absolute;top:26px;right:24px;font-family:var(--f-body);font-size:11px;letter-spacing:.1em;color:var(--fg-faint)}

/* ============ STATS ============ */
.statband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.stats{display:grid;grid-template-columns:repeat(6,1fr);position:relative;z-index:1}
@media (max-width:900px){ .stats{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{padding:34px 18px;border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:0}
@media (max-width:900px){ .stat:nth-child(3n){border-right:0} }
@media (max-width:560px){ .stat:nth-child(3n){border-right:1px solid var(--line-soft)} .stat:nth-child(2n){border-right:0} }
.stat .v{font-family:var(--f-display);font-weight:600;font-size:var(--step-3);letter-spacing:-.03em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.stat .k{margin-top:11px;font-family:var(--f-body);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);line-height:1.5}

/* ============ CASES ============ */
.cases{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){ .cases{grid-template-columns:1fr} }
.case{background:var(--bg);padding:26px;display:flex;flex-direction:column;gap:14px;transition:background .2s}
.case:hover{background:var(--paper)}
.case .ind{font-family:var(--f-body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.chead{font-family:var(--f-display);font-weight:700;font-size:1.1875rem;line-height:1.25;letter-spacing:-.02em;margin:0;text-wrap:balance}
.case p{font-size:.9375rem;line-height:1.55}
.news{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:1000px){ .news{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .news{grid-template-columns:minmax(0,1fr)} }
.nitem{background:var(--bg);padding:22px 20px;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:background .18s}
.nitem:hover{background:var(--paper)}
.nsrc{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.nhead{font-family:var(--f-display);font-weight:700;font-size:1.0625rem;line-height:1.3;letter-spacing:-.015em;color:var(--fg);text-wrap:balance}
.nmore{margin-top:auto;padding-top:8px;font-family:var(--f-body);font-size:12px;letter-spacing:.06em;color:var(--fg-dim);display:inline-flex;align-items:center;gap:6px}
.nmore svg{width:11px;height:11px;transition:transform .2s}
.nitem:hover .nmore{color:var(--accent)} .nitem:hover .nmore svg{transform:translateX(3px)}
.social{display:flex;flex-wrap:wrap;gap:18px;border-top:1px solid var(--line)}
.social a{font-family:var(--f-body);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);text-decoration:none;transition:color .18s}
.social a:hover{color:var(--accent)}
.news-all{margin:18px 0 0}
.news-all a{font-family:var(--f-body);font-size:13px;letter-spacing:.05em;color:var(--fg-dim);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.news-all a:hover{color:var(--accent)} .news-all svg{width:12px;height:12px}
.case .lnk{margin-top:auto;padding-top:10px;font-family:var(--f-body);font-size:12.5px;letter-spacing:.07em;color:var(--fg-dim);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.case:hover .lnk{color:var(--accent)}
.case .lnk svg{width:11px;height:11px;transition:transform .2s}
.case:hover .lnk svg{transform:translateX(3px)}
.case-fill{padding:0;background:var(--bg)}
.cases.impact{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){ .cases.impact{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){ .case-fill{display:none} }
.inds{display:flex;flex-wrap:wrap;gap:7px;margin-top:30px}
.inds span{font-family:var(--f-body);font-size:12.5px;letter-spacing:.06em;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--fg-dim)}

/* ============ FOOTPRINT ============ */
.fp{margin-top:44px;border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow)}
.fp-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
@media (max-width:620px){ .fp-stats{grid-template-columns:1fr 1fr} }
.fp-stat{padding:20px;border-right:1px solid var(--line-soft)}
.fp-stat:last-child{border-right:0}
@media (max-width:620px){ .fp-stat:nth-child(2n){border-right:0} .fp-stat:nth-child(-n+2){border-bottom:1px solid var(--line-soft)} }
.fp-stat .v{font-family:var(--f-display);font-weight:700;font-size:2.25rem;line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.fp-stat .k{margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}
.fp-band-wrap{padding:30px 24px 28px}
@media (max-width:640px){ .fp-band-wrap{display:none} }
.fp-conts{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1fr) minmax(0,11fr);gap:2px;margin-bottom:9px}
.fp-cont{box-sizing:border-box;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-faint);padding-bottom:7px;border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden}
.fp-band{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1fr) minmax(0,5fr) minmax(0,6fr);gap:2px;background:var(--bg)}
.fp-seg{box-sizing:border-box;min-width:0;height:64px;display:flex;flex-direction:column;justify-content:center;
  padding:0 12px;overflow:hidden;transition:filter .18s}
.fp-seg:hover{filter:brightness(1.12)}
.fp-seg .m{font-size:12px;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:#fff;opacity:.85;white-space:nowrap;letter-spacing:.02em}
.fp-seg .n{font-family:var(--f-display);font-weight:700;font-size:1.5rem;line-height:1.1;color:#fff;
  font-variant-numeric:tabular-nums}
.fp-scale{display:flex;justify-content:space-between;margin-top:9px;font-size:11.5px;color:var(--fg-faint)}
.fp-names{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
@media (max-width:700px){ .fp-names{grid-template-columns:1fr 1fr} }
.fp-col{padding:18px 20px;border-right:1px solid var(--line-soft)}
.fp-col:last-child{border-right:0}
@media (max-width:700px){ .fp-col:nth-child(2n){border-right:0} .fp-col:nth-child(-n+2){border-bottom:1px solid var(--line-soft)} }
.fp-key{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:7px;vertical-align:baseline}
.fp-col h5{display:flex;align-items:center;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 10px}
.fp-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.fp-col li{font-family:var(--f-display);font-weight:500;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.2;color:var(--fg)}

/* ============ AWARDS ============ */
/* Hold 4 columns down to 780px -- the names are short, and dropping to 2 early
   leaves them marooned in half-empty columns. */
.regions{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1px solid var(--line)}
@media (max-width:780px){ .regions{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .regions{grid-template-columns:1fr} }
.region{padding:0 24px 28px 0;border-right:1px solid var(--line-soft)}
.region:last-child{border-right:0}
@media (max-width:780px){
  .region:nth-child(2n){border-right:0}
  .region:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}
@media (max-width:460px){
  .region{border-right:0;border-bottom:1px solid var(--line-soft)}
  .region:last-child{border-bottom:0}
}
/* The count is right-aligned, so it needs a rule tying it back to the label --
   without one it reads as broken alignment once columns get wide. */
.rlabel{
  display:flex;align-items:baseline;gap:10px;margin:0 0 18px;
  padding:20px 0 12px;border-bottom:1px solid var(--line-soft);
  font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-dim);
}
.rlabel .rn{margin-left:auto;color:var(--accent);font-variant-numeric:tabular-nums}
.region ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.region li{
  font-family:var(--f-display);font-weight:500;font-size:1.25rem;
  letter-spacing:-.015em;line-height:1.1;color:var(--fg);
}
.awards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-top:0;background:var(--line);border:1px solid var(--line)}
/* 5 awards divide by 5 and 1, never 2 -- at the 2-col step the 6th cell would
   show the grid's --line background as a grey slab. Fill it. */
@media (max-width:1000px){ .awards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .awards::after{content:"";background:var(--bg)} }
@media (max-width:560px){ .awards{grid-template-columns:minmax(0,1fr)} .awards::after{display:none} }
@media (max-width:1040px){ .awards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .awards{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .awards{grid-template-columns:1fr} }
.award{position:relative;padding:24px 20px 22px;background:var(--bg);display:flex;flex-direction:column;transition:background .18s}
.award:hover{background:var(--paper)}

@media (max-width:1040px){
  .award:nth-child(3n){border-right:0}
  .award:nth-child(-n+3){border-bottom:1px solid var(--line-soft)}
}
@media (max-width:700px){
  .award:nth-child(3n){border-right:1px solid var(--line-soft)}
  .award:nth-child(2n){border-right:0}
  .award:nth-child(-n+4){border-bottom:1px solid var(--line-soft)}
}
@media (max-width:460px){
  .award{border-right:0;border-bottom:1px solid var(--line-soft)}
  .award:last-child{border-bottom:0}
}
/* Real marks, rendered monochrome so five foreign brands don't fight the page.
   SVGs inherit currentColor; the raster rides the same --logo-invert token. */
.award .src{display:flex;align-items:center;min-height:30px;margin-bottom:18px;color:var(--fg)}
.award .alogo,.award .alogo-img{height:26px;max-width:100%;width:auto}
.ahook{font-family:var(--f-display);font-weight:700;font-size:1.375rem;line-height:1.15;letter-spacing:-.02em;color:var(--accent);margin-bottom:8px;text-wrap:balance}
.acite{font-size:.8125rem;color:var(--fg-dim);line-height:1.5;margin-top:auto}
.ayear{position:absolute;top:16px;right:16px;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--fg-faint);border:1px solid var(--line);padding:2px 6px;font-variant-numeric:tabular-nums}
.alogo{height:17px;width:auto;color:var(--fg);display:block}
.alogo-img{height:17px;width:auto;display:block;filter:grayscale(1) brightness(0) invert(var(--logo-invert))}

/* ============ CTA ============ */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta-field{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 50%,#000,transparent 72%);
  mask-image:radial-gradient(120% 90% at 78% 50%,#000,transparent 72%)}
.cta-field canvas{width:100%;height:100%}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:var(--step-4);margin-bottom:20px;max-width:14ch}
.cta p{color:var(--fg-dim);font-size:var(--step-1);line-height:1.5;max-width:52ch}
/* `.cta p` (0,1,1) outranks the utility classes and lands later in the sheet --
   re-assert them here or the notes inherit the 20px lede size. */
.cta .hero-note{font-size:12.5px;color:var(--fg-faint);line-height:1.7;max-width:none}
.cta .form-note{font-size:12.5px;color:var(--fg-faint);line-height:1.6;max-width:none}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:900px){ .cta-grid{grid-template-columns:1fr;gap:36px} }

/* ============ DEMO FORM ============ */
.demo-form{border:1px solid var(--line);border-radius:4px;background:var(--bg);padding:clamp(22px,3vw,30px);box-shadow:var(--shadow)}
.form-h{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line-soft);display:flex;gap:8px}
.form-h .rn{margin-left:auto;color:var(--signal)}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.fld label{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim)}
.fld label .opt{color:var(--fg-faint);text-transform:none;letter-spacing:.04em}
.fld input,.fld textarea{
  font-family:var(--f-body);font-size:.9375rem;color:var(--fg);background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:9px 0;transition:border-color .18s;width:100%;
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--fg-faint)}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--accent)}
.fld textarea{resize:vertical;min-height:62px;line-height:1.5}
.fld.bad input,.fld.bad textarea{border-bottom-color:var(--amber)}
.fld .err{font-family:var(--f-body);font-size:12px;letter-spacing:.04em;color:var(--amber);min-height:13px}
.demo-form .btn{width:100%;justify-content:center;margin-top:4px}
.form-note{margin-top:14px;font-family:var(--f-body);font-size:12.5px;letter-spacing:.05em;color:var(--fg-faint);line-height:1.6;text-align:center}
.form-done{display:flex;flex-direction:column;gap:12px;padding:8px 0 4px}
.form-done .tick{width:34px;height:34px;color:var(--signal)}
.form-done h3{font-family:var(--f-display);font-weight:600;font-size:1.5rem;letter-spacing:-.02em}
.form-done p{font-size:.9375rem;color:var(--fg-dim);line-height:1.55;max-width:none}

/* ============ SKIP LINK ============ */
.skip{
  position:absolute;left:-9999px;top:8px;z-index:200;
  background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:3px;text-decoration:none;
  font-family:var(--f-body);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:var(--gut)}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding-block:52px 32px}
.f-grid{display:grid;grid-template-columns:1.6fr repeat(6,1fr);gap:40px 22px}
@media (max-width:1000px){ .f-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .f-grid{grid-template-columns:1fr} }
.f-brand .social{margin-top:24px;padding-top:20px}
@media (max-width:820px){ .f-grid{grid-template-columns:1fr 1fr;gap:30px} }
.f-col h4{font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:16px}
.f-col a{display:block;text-decoration:none;color:var(--fg-dim);font-size:.875rem;padding:5px 0;transition:color .15s}
.f-col a:hover{color:var(--accent)}
.f-about{font-size:.875rem;color:var(--fg-dim);line-height:1.55;max-width:36ch;margin-top:14px}
.f-bot{margin-top:42px;padding-top:22px;border-top:1px solid var(--line-soft);display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-family:var(--f-body);font-size:12px;letter-spacing:.06em;color:var(--fg-faint)}
.f-bot .sp{margin-left:auto}

/* ============ MOTION ============ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
[data-px],[data-px-scroll]{will-change:transform}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  [data-px],[data-px-scroll]{transform:none !important}
}

/* ---------- nav: named products, real destinations ---------- */
/* Every rule is scoped under .nav .links so it outranks .nav .links a (0,2,1),
   which was forcing uppercase+13px onto the dropdown. .sub-lbl, not .sub-h:
   .sub-h is already taken by the "In production" sub-head. */
.nav .links{align-items:center}
.nav .links .nitem-w{position:relative;display:flex;align-items:center}
.nav .links .ntop{font-family:var(--f-body);font-size:13px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-dim);background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:color .18s;line-height:1}
.nav .links .ntop:hover,.nav .links .nitem-w:hover .ntop,.nav .links .nitem-w:focus-within .ntop{color:var(--fg)}
.nav .links .ntop .chev{width:11px;height:11px;transition:transform .2s}
.nav .links .nitem-w:hover .chev,.nav .links .nitem-w:focus-within .chev{transform:rotate(180deg)}
.nav .links .sub{position:absolute;top:100%;left:-20px;margin-top:15px;background:var(--bg);
  border:1px solid var(--line);box-shadow:0 14px 44px rgba(0,0,0,.14);padding:22px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:60;
  display:grid;grid-template-columns:236px 236px;gap:0 30px}
.nav .links .sub-3{grid-template-columns:222px 222px 222px;gap:0 24px}
/* The rightmost triggers sit far enough right that a left-anchored 760px panel
   runs past the viewport, which gave every page on the site a horizontal
   scrollbar at desktop widths even with the menu closed (hidden panels still
   count toward scrollWidth). Anchor the last two panels to their trigger's
   right edge so they open inward instead. */
.nav .links .nitem-w:nth-last-child(-n+2) .sub{left:auto;right:-20px}
/* Between the mobile breakpoint and roughly 1320px there is not room for three
   columns beside a mid-nav trigger, so the three-column panels fold to two. */
@media (max-width:1320px){ .nav .links .sub-3{grid-template-columns:222px 222px} }
.nav .links .nitem-w:hover .sub,.nav .links .nitem-w:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav .links .sub::before{content:"";position:absolute;top:-15px;left:0;right:0;height:15px}
.nav .links .sub-col{display:flex;flex-direction:column;gap:1px;min-width:0}
.nav .links .sub-lbl{font-family:var(--f-body);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fg-faint);padding:0 9px 9px;margin:0;border:0;line-height:1.2}
.nav .links .sub a{display:block;padding:9px;text-decoration:none;border-radius:3px;
  text-transform:none;letter-spacing:normal;font-size:inherit;color:inherit;transition:background .15s}
.nav .links .sub a:hover{background:var(--paper)}
.nav .links .sub a b{display:block;font-family:var(--f-body);font-size:13.5px;font-weight:600;
  color:var(--fg);letter-spacing:-.01em;text-transform:none;line-height:1.25}
.nav .links .sub a em{display:block;margin-top:3px;font-family:var(--f-body);font-style:normal;
  font-size:11.5px;line-height:1.35;color:var(--fg-faint);text-transform:none;letter-spacing:normal}
.nav .links .sub a:hover b{color:var(--accent)}
@media (max-width:1000px){ .nav .links .sub{display:none} }
.nav .links .sub-all{margin-top:6px;padding-top:12px;border-top:1px solid var(--line-soft);border-radius:0}

/* ---------- FAQ ---------- */
#faq{padding-block:0 96px}
.faq-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px}
@media (max-width:900px){ .faq-grid{grid-template-columns:minmax(0,1fr);gap:34px} }
.faq-h{font-family:var(--f-display);font-weight:700;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.03em;margin:0 0 18px;max-width:16ch;text-wrap:balance}
.faq-sub{font-family:var(--f-body);font-size:1rem;line-height:1.65;color:var(--fg-dim);margin:0 0 26px;max-width:46ch}
.faq-r{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-i summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;padding:22px 0;transition:color .18s}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:hover .faq-q{color:var(--accent)}
.faq-q{font-family:var(--f-display);font-weight:700;font-size:1.0625rem;line-height:1.4;letter-spacing:-.015em;color:var(--fg);transition:color .18s}
.faq-ic{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--fg-faint);margin-top:2px}
.faq-ic svg{width:15px;height:15px;transition:transform .25s ease}
.faq-i[open] .faq-ic svg{transform:rotate(45deg)}
.faq-i[open] .faq-q{color:var(--accent)}
.faq-a{padding:0 46px 22px 0}
.faq-a p{font-family:var(--f-body);font-size:.9375rem;line-height:1.68;color:var(--fg-dim);margin:0;max-width:62ch}
@media (prefers-reduced-motion:no-preference){
  .faq-i[open] .faq-a{animation:faqIn .26s ease}
  @keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
}



/* ---------- connectors ---------- */
#connectors{padding-block:0 92px}
.cx-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:36px}
.cx-h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.03em;margin:0 0 14px;max-width:16ch;text-wrap:balance}
.cx-sub{font-family:var(--f-body);font-size:1rem;line-height:1.65;color:var(--fg-dim);margin:0;max-width:58ch}
.cx-n{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.cx-v{font-family:var(--f-display);font-weight:700;font-size:3.5rem;line-height:.9;letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.cx-k{margin-top:8px;font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint)}
/* 10 groups: divides by 5, 2 and 1 -- never strands an empty cell */
.cx-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:1100px){ .cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .cx-grid{grid-template-columns:minmax(0,1fr)} }
.cx-col{background:var(--bg);padding:20px 16px;transition:background .18s}
.cx-col:hover{background:var(--paper)}
.cx-h{font-family:var(--f-body);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 13px;line-height:1.35;min-height:2.7em}
@media (max-width:1100px){ .cx-h{min-height:0} }
.cx-chips{display:flex;flex-wrap:wrap;gap:5px}
.cx-chips span{font-family:var(--f-body);font-size:12px;font-weight:500;color:var(--fg);border:1px solid var(--line);padding:4px 9px;letter-spacing:-.01em;transition:border-color .18s,color .18s}
.cx-chips span:hover{border-color:var(--accent);color:var(--accent)}
.cx-more{margin:18px 0 0;font-family:var(--f-body);font-size:13px;color:var(--fg-faint)}
.cx-more b{color:var(--fg-dim);font-weight:600}

/* ---------- back link (shared: .st-back / .np-back / .is-back) ---------- */
.st-back,.np-back,.is-back{margin:0}
.st-back a,.np-back a,.is-back a{font-family:var(--f-body);font-size:13px;letter-spacing:.05em;
  color:var(--fg-dim);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.st-back a:hover,.np-back a:hover,.is-back a:hover{color:var(--accent)}
.st-back svg,.np-back svg,.is-back svg{width:12px;height:12px;flex:none;transform:rotate(180deg)}

.demo-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- customer logo wall (wordmark tiles; swap in <img> logos when available) ---------- */
.custwall{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:color-mix(in srgb,var(--fg) 22%,transparent);border:1px solid color-mix(in srgb,var(--fg) 22%,transparent);border-radius:12px;overflow:hidden}
@media (max-width:560px){ .custwall{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cwt{background:var(--bg);aspect-ratio:16/6.5;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:14px 16px;text-align:center;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;line-height:1.15;color:var(--fg-dim);
  opacity:.85;filter:grayscale(1);transition:opacity .2s,color .2s,filter .2s,background .2s}
.cwt:hover{opacity:1;color:var(--fg);filter:none;background:var(--paper)}
.cwt img{max-width:84%;max-height:clamp(32px,4.4vw,56px);width:auto;height:auto;object-fit:contain}
/* near-square / stacked marks need height, not width, to be legible */
.cwt-sq img{max-width:62%;max-height:clamp(48px,6.2vw,78px)}
.cwt-xl img{max-width:72%;max-height:clamp(54px,7.2vw,84px)}
/* Homera publishes no logo file — its mark is a lowercase serif wordmark */
.cwt-word{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.005em;color:#1B5E6B;text-transform:lowercase}
/* portrait/stacked marks: let them use the full tile height */
/* portrait marks: trim the tile padding so the logo can use nearly the full tile height */
.cwt-por{padding:4px 8px}
.cwt-por img{max-width:60%;max-height:clamp(30px,6.4vw,80px)}
/* EFS publishes a white-only mark: flip it dark on light backgrounds */
.cwt-inv img{filter:invert(1)}
:root[data-theme="light"] .cwt-inv img{filter:invert(1)}
:root[data-theme="dark"] .cwt-inv img{filter:none}

/* ================= DECISION OS — "A Monday morning" ================= */
.dos{
  margin-top:44px;max-width:100%;border:1px solid var(--line);border-radius:18px;
  background:color-mix(in srgb,var(--bg) 86%,var(--paper));
  box-shadow:var(--shadow);overflow:hidden;
  backdrop-filter:blur(10px) saturate(1.2);
}
.dos-cap{margin:14px 2px 0;font-size:var(--step--1);color:var(--fg-faint);letter-spacing:.04em}

/* --- top bar --- */
.dos-top{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,2.4vw,28px);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent);
}
.dos-hello{display:flex;flex-direction:column;gap:2px}
.dos-hello strong{font-family:var(--f-display);font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.dos-when{font-size:var(--step--1);color:var(--fg-dim);font-variant-numeric:tabular-nums}
.dos-chips{display:flex;flex-wrap:wrap;gap:8px}
.dos-chip{
  display:flex;align-items:baseline;gap:8px;padding:8px 12px;border-radius:10px;
  border:1px solid var(--line-soft);background:var(--bg);
}
.dos-chip .ck{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim)}
.dos-chip .cv{font-weight:700;font-size:1rem}
.dos-chip .cd{font-size:11px;font-weight:600;color:var(--signal)}
.dos-chip .cd.live{
  color:var(--accent);display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.08em;
}
.dos-chip .cd.live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:dos-pulse 2.4s ease-in-out infinite;
}
@keyframes dos-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* --- narrative brief --- */
.dos-lab{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.dos-live{
  width:6px;height:6px;border-radius:50%;background:var(--signal);display:inline-block;
  animation:dos-pulse 2.4s ease-in-out infinite;
}
.dos-brief{padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,28px);border-bottom:1px solid var(--line-soft)}
.dos-brief p{max-width:64ch;color:var(--fg-dim);line-height:1.7;margin:0 0 10px}
.dos-brief p b{color:var(--fg);font-weight:600}
.dos-lede{
  font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.45!important;
  color:var(--fg)!important;letter-spacing:-.015em;margin-bottom:14px!important;
}
.dos-conf{display:flex;align-items:center;gap:10px;margin-top:16px}
.dos-conf-l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}

/* --- meter --- */
.dos-meter{
  position:relative;display:inline-block;width:clamp(70px,9vw,110px);height:6px;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);overflow:hidden;vertical-align:middle;
}
.dos-meter-fill{
  position:absolute;inset:0 auto 0 0;width:var(--pct);border-radius:99px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.22,.8,.28,1) var(--d,200ms);
}
.dos.in .dos-meter-fill{transform:scaleX(1)}
.dos-meter-n{font-size:12px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}

/* --- panels --- */
.dos-grid{display:grid;grid-template-columns:1.05fr 1fr 1fr;border-bottom:1px solid var(--line-soft)}
.dos-split{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-soft)}
.dos-panel{padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,28px);border-right:1px solid var(--line-soft)}
.dos-grid .dos-panel:last-child,.dos-split .dos-panel:last-child{border-right:0}

/* --- mission health + sparklines --- */
.mh,.wc,.rz,.af{list-style:none;margin:0;padding:0}
.mh-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(52px,108px) auto;
  grid-template-areas:"n s t" "w w w";
  align-items:center;gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.mh-row:last-child{border-bottom:0}
.mh-n{grid-area:n;min-width:0;font-weight:600;font-size:.95rem}
.mh-spark{grid-area:s;display:block;width:100%;height:auto;overflow:visible}
.sp-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-area{fill:url(#dosSpark);opacity:1}
.dos-defs{position:absolute;width:0;height:0;overflow:hidden}
.sp-dot{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.mh-t{grid-area:t;display:inline-flex;align-items:center;gap:5px;font-size:.85rem;font-weight:600;color:var(--fg)}
.mh-t .mh-a{font-size:.7rem;line-height:1}
.mh-t.up .mh-a{color:var(--signal)}
.mh-t.flat .mh-a{color:var(--amber)}
.mh-note{grid-area:w;font-size:var(--step--1);color:var(--fg-faint)}

/* --- what changed --- */
.wc-row{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"a h" ". w";
  gap:2px 10px;padding:9px 0 11px;position:relative;
}
.wc-row::before{
  content:"";position:absolute;left:5px;top:26px;bottom:-2px;width:1px;background:var(--line-soft);
}
.wc-row:last-child::before{display:none}
.wc-a{grid-area:a;font-size:.62rem;line-height:1.6}
.wc-row.up .wc-a{color:var(--signal)}
.wc-row.down .wc-a{color:var(--critical)}
.wc-h{grid-area:h;font-size:.92rem;font-weight:600}
.wc-h b{font-weight:700}
.wc-w{grid-area:w;font-size:var(--step--1);color:var(--fg-faint);line-height:1.5}

/* --- decision cards --- */
.dc{
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px;
  background:var(--bg);
}
.dc:last-child{margin-bottom:0}
.dc-h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.98rem;margin-bottom:10px;letter-spacing:-.01em}
.dc-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.dc-dot.warn{background:var(--amber)}
.dc-k{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:4px 0;font-size:var(--step--1);color:var(--fg-dim)}
.dc-k b{color:var(--fg);font-weight:600}

/* --- reasoning + activity feed --- */
.rz li,.af li{
  position:relative;padding:7px 0 7px 22px;font-size:.94rem;color:var(--fg-dim);line-height:1.55;
}
.rz li::before{
  content:"";position:absolute;left:3px;top:15px;width:5px;height:5px;border-radius:50%;background:var(--accent);
}
.rz-out{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-soft);
  font-weight:600;font-size:.95rem;
}
.rz-out span{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);
  margin-right:8px;font-weight:600;
}
.af-c{position:absolute;left:0;top:7px;color:var(--signal);font-weight:700;font-size:.85rem}

/* --- explainability strip --- */
.dos-xai{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line-soft)}
.xai{padding:16px clamp(14px,1.8vw,20px);border-right:1px solid var(--line-soft)}
.xai:last-child{border-right:0}
.xai-k{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.xai-v{display:block;font-size:var(--step--1);color:var(--fg-dim);line-height:1.5}

/* --- ask bar --- */
.dos-ask{
  display:flex;align-items:center;gap:10px;padding:16px clamp(18px,2.4vw,28px);
  background:color-mix(in srgb,var(--accent) 4%,transparent);
}
.dos-ask-i{color:var(--accent);font-size:1rem}
.dos-ask-t{color:var(--fg-faint);font-size:.95rem}
.caret{
  display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-2px;margin-left:3px;
  animation:dos-caret 1.1s steps(1) infinite;
}
@keyframes dos-caret{0%,50%{opacity:1}51%,100%{opacity:0}}

/* --- entrance animation (driven by the shared .rv/.in observer) --- */
.dos .mh-row,.dos .wc-row,.dos .dc,.dos .rz li,.dos .af li,.dos .xai{
  opacity:0;transform:translateY(6px);
}
.dos.in .mh-row,.dos.in .wc-row,.dos.in .dc,.dos.in .rz li,.dos.in .af li,.dos.in .xai{
  opacity:1;transform:none;
  transition:opacity .5s ease var(--d,0ms),transform .5s cubic-bezier(.22,.8,.28,1) var(--d,0ms);
}
.dos .sp-line{stroke-dasharray:1;stroke-dashoffset:1}
.dos.in .sp-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) var(--d,0ms)}
.dos .sp-area{opacity:0}
.dos .sp-dot{opacity:1}
.dos.in .sp-area{opacity:1;transition:opacity .6s ease .35s}

@media (prefers-reduced-motion:reduce){
  .dos .mh-row,.dos .wc-row,.dos .dc,.dos .rz li,.dos .af li,.dos .xai{opacity:1;transform:none}
  .dos .sp-line{stroke-dashoffset:0}
  .dos .sp-dot,.dos .sp-area{opacity:1}
  .dos-meter-fill{transform:scaleX(1)}
  .dos-chip .cd.live::before,.dos-live,.caret{animation:none}
}

/* --- responsive --- */
@media (max-width:1000px){
  .dos-grid{grid-template-columns:1fr 1fr}
  .dos-grid .dos-panel:nth-child(2){border-right:0}
  .dos-grid .dos-panel:nth-child(3){grid-column:1/-1;border-top:1px solid var(--line-soft)}
  .dos-xai{grid-template-columns:repeat(2,1fr)}
  .xai:nth-child(2n){border-right:0}
  .xai{border-top:1px solid var(--line-soft)}
}
@media (max-width:720px){
  .dos-top{flex-direction:column;align-items:stretch}
  .dos-chips{min-width:0;width:100%}
  .dos-chip{flex:1 1 46%;justify-content:space-between}
  .mh-row{grid-template-columns:minmax(0,1fr) minmax(48px,88px) auto}
  .dos-grid,.dos-split{grid-template-columns:1fr}
  .dos-panel{border-right:0;border-top:1px solid var(--line-soft)}
  .dos-grid .dos-panel:first-child,.dos-split .dos-panel:first-child{border-top:0}
  .dos-xai{grid-template-columns:1fr}
  .xai{border-right:0}
  .dos-chips{width:100%}
  .dos-chip{flex:1 1 140px;min-width:0}
  .dos-chip .ck{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* --- story bridges: the sentence that carries one section into the next --- */
.bridge{
  max-width:52ch;margin:clamp(30px,4vw,52px) 0 0;padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-family:var(--f-display);font-style:italic;
  font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.5;color:var(--fg-dim);
}

/* --- contextual solution links inside editorial articles ----------------- */
.rel-sol{
  margin:clamp(34px,4.5vw,56px) 0 0;padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line);border-radius:14px;background:var(--bg-soft,transparent);
}
.rel-sol-h{
  margin:0 0 14px;font-family:var(--f-display);
  font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.25;
}
.rel-sol-l{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.rel-sol-l li{
  padding-left:15px;position:relative;
  font-size:.96rem;line-height:1.5;color:var(--fg-dim);
}
.rel-sol-l li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
.rel-sol-l a{color:var(--fg);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.rel-sol-l a:hover{color:var(--accent);border-bottom-color:currentColor}
.rel-sol-cta{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-soft,var(--line));
  font-size:.93rem;color:var(--fg-dim);
}
.rel-sol-cta a{color:var(--accent);font-weight:600}

/* --- homepage "Explore SCIKIQ" index: contextual links to every solution -- */
.xplore{padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--line)}
.xp-h2{
  font-family:var(--f-display,inherit);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 clamp(24px,3vw,38px);
}
.xp-grid{display:grid;gap:clamp(26px,3vw,44px);grid-template-columns:repeat(4,1fr)}
.xp-h3{
  margin:0 0 4px;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.xp-sub{margin:0 0 16px;font-size:.9rem;color:var(--fg-dim);line-height:1.45}
.xp-l{margin:0;padding:0;list-style:none;display:grid;gap:13px}
.xp-l li{display:grid;gap:2px}
.xp-l a{
  color:var(--fg);font-weight:600;font-size:1rem;text-decoration:none;
  width:max-content;border-bottom:1px solid transparent;
}
.xp-l a:hover{color:var(--accent);border-bottom-color:currentColor}
.xp-l span{font-size:.86rem;color:var(--fg-dim);line-height:1.4}
@media(max-width:1150px){.xp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.xp-grid{grid-template-columns:1fr}}

/* --- comparison (vs-*) pages -------------------------------------------- */
.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}
.vs-hero{padding:clamp(46px,7vw,92px) 0 clamp(20px,3vw,34px)}
.vs-eyebrow{margin:0 0 10px;font-size:.76rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent)}
.vs-hero h1{margin:0 0 16px;font-family:var(--f-display,inherit);font-weight:700;
  letter-spacing:-.02em;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.08}
.vs-standfirst{margin:0;font-size:clamp(1.02rem,1.7vw,1.22rem);line-height:1.55;
  color:var(--fg-dim);max-width:60ch}
.vs-sec{padding:clamp(26px,3.4vw,44px) 0}
.vs-sec h2{margin:0 0 14px;font-family:var(--f-display,inherit);font-weight:700;
  letter-spacing:-.02em;font-size:clamp(1.35rem,2.4vw,1.85rem)}
.vs-sec p{margin:0 0 14px;line-height:1.65;color:var(--fg-dim);max-width:68ch}
.vs-sec strong{color:var(--fg)}
.vs-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vs-table{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
.vs-table th,.vs-table td{padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);line-height:1.5}
.vs-table thead th{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:700;border-bottom:2px solid var(--line)}
.vs-table tbody th{font-weight:600;color:var(--fg);width:22%}
.vs-table td{color:var(--fg-dim)}
.vs-table .vs-us{color:var(--fg);font-weight:600;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.vs-cta{padding:clamp(30px,4vw,56px) 0 clamp(48px,7vw,88px)}
.vs-cta h2{margin:0 0 10px;font-family:var(--f-display,inherit);font-weight:700;
  font-size:clamp(1.35rem,2.4vw,1.85rem)}
.vs-cta p{margin:0 0 18px;color:var(--fg-dim)}

/* 4-up variant of the stat band (default .hb-stats is a 3-column grid, which
   leaves a dead cell when there are four figures) */
.hb-stats.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.hb-stats.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hb-stats.n4{grid-template-columns:minmax(0,1fr)}}

/* --- button affordance safety net ---------------------------------------
   .btn's base rule is `border:1px solid transparent`; visible styling comes
   only from a modifier. 77 buttons across 32 pages used a bare .btn (or
   .btn.ghost, whose rule lived in academy.css and so never loaded on product
   or industry pages) and rendered as plain, unclickable-looking text.
   Give every unmodified .btn a real outline, and promote .ghost sitewide. */
.ghost{border-color:var(--line-strong);color:var(--fg);background:transparent}
.ghost:hover{border-color:var(--fg);background:var(--accent-wash)}
.btn:not(.btn-p):not(.btn-s):not(.ghost){border-color:var(--line-strong);color:var(--fg)}
.btn:not(.btn-p):not(.btn-s):not(.ghost):hover{border-color:var(--fg);background:var(--accent-wash)}

/* On narrow screens stacked CTAs should fill the column rather than sit at an
   arbitrary 200px min-width, which left them looking stranded mid-row. */
@media(max-width:560px){
  .hb-cta,.st-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .hb-cta .btn,.st-cta .btn{width:100%;min-width:0}
}

/* Comparison table -> stacked cards on mobile. Left as a scroller, the SCIKIQ
   column (the entire point of the page) sat off-screen with no affordance. */
@media(max-width:760px){
  .vs-table,.vs-table tbody,.vs-table tr,.vs-table th,.vs-table td{display:block;width:auto}
  .vs-table{min-width:0}
  .vs-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vs-table tr{
    border:1px solid var(--line);border-radius:14px;
    padding:16px 18px;margin:0 0 12px;
  }
  .vs-table tbody th{
    width:auto;padding:0 0 12px;border:0;
    font-size:1.02rem;font-weight:700;color:var(--fg);
  }
  .vs-table td{padding:0;border:0;background:none}
  .vs-table td+td{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft,var(--line))}
  .vs-table td::before{
    content:attr(data-label);display:block;margin-bottom:3px;
    font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--fg-dim);
  }
  .vs-table td.vs-us{color:var(--fg);font-weight:600}
  .vs-table td.vs-us::before{color:var(--accent)}
}

/* --- "estate" stacked column chart --------------------------------------
   Emphasis form: accent = the point, de-emphasis gray = context. Marks follow
   the fixed specs: <=24px columns, 4px rounded data-end square at the baseline,
   2px surface gap between fills, hairline recessive grid, legend + selective
   direct labels (never a value on every column). */
.ec{margin:clamp(24px,3vw,38px) 0 0;padding:0}
.ec-cap{display:flex;flex-direction:column;gap:3px;margin:0 0 4px}
.ec-cap b{font-family:var(--f-display,inherit);font-weight:700;font-size:clamp(1.02rem,1.7vw,1.2rem);letter-spacing:-.01em}
.ec-cap span{font-size:.9rem;color:var(--fg-dim);line-height:1.45}
.ec-legend{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0 6px}
.ec-key{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;color:var(--fg-dim)}
.ec-sw{width:11px;height:11px;border-radius:3px;flex:none}
.ec-sw-gov{background:var(--chart-a)}
.ec-sw-un{background:var(--chart-b)}
.ec-plot{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ec-plot:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.ec-plot svg{width:100%;max-width:720px;min-width:520px;height:auto;display:block}
/* cap at the viewBox width: scaling past 1:1 would render the 24-unit
   columns thicker than the 24px mark spec */
.ec-gov{fill:var(--chart-a)}
.ec-un{fill:var(--chart-b)}
.ec-grid{stroke:var(--line-soft,var(--line));stroke-width:1}
.ec-base{stroke:var(--line-strong,var(--line));stroke-width:1}
.ec-ax{font-family:var(--f-body);font-size:11px;fill:var(--fg-dim)}
.ec-val{font-family:var(--f-display,inherit);font-weight:700;font-size:13px;fill:var(--fg)}
.ec-b{transition:opacity .12s linear}
.ec:hover .ec-b{opacity:.72}
.ec .ec-b:hover{opacity:1}
/* the table is the accessible fallback for the chart, not decoration */
.ec-details{margin:16px 0 0}
.ec-details>summary{cursor:pointer;list-style:none;font-size:.8rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-dim);padding:6px 0}
.ec-details>summary::-webkit-details-marker{display:none}
.ec-details>summary::after{content:' +';color:var(--accent)}
.ec-details[open]>summary::after{content:' \2212'}
.ec-details>summary:hover{color:var(--fg)}
.ec-table{width:100%;border-collapse:collapse;margin:8px 0 0;font-size:.86rem}
.ec-table caption{text-align:left;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);padding:0 0 8px}
.ec-table th,.ec-table td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--line-soft,var(--line));color:var(--fg-dim)}
.ec-table thead th{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.ec-table th[scope=row]{text-align:left;color:var(--fg);font-weight:600}
@media(max-width:620px){.ec-table{font-size:.8rem}.ec-table th,.ec-table td{padding:6px 7px}}

/* --- mobile nav: accordion groups ---------------------------------------
   The flat shortcut list could only carry one link per section, so whole
   areas (company types, comparisons, four of the five roles) were simply
   unreachable on a phone. <details> keeps it dependency-free. */
.mnav-g{border-bottom:1px solid var(--line)}
.mnav-g>summary{
  list-style:none;cursor:pointer;padding:14px 0;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-body);font-size:16px;font-weight:600;color:var(--fg);
}
.mnav-g>summary::-webkit-details-marker{display:none}
.mnav-g>summary::after{
  content:"";width:8px;height:8px;flex:none;margin-right:4px;
  border-right:2px solid var(--fg-dim);border-bottom:2px solid var(--fg-dim);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s ease;
}
.mnav-g[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.mnav-g>summary:hover,.mnav-g[open]>summary{color:var(--accent)}
.mnav-sub{padding:0 0 12px}
.mnav-sub a{
  display:block;padding:9px 0 9px 14px;border-bottom:0;
  font-size:15px;color:var(--fg-dim);text-decoration:none;
}
.mnav-sub a:hover,.mnav-sub a:focus-visible{color:var(--accent)}