/* ---- styles/main.css ---- */
/* ============ FONTS (inlined; CSP blocks CDNs) ============ */






/* ============ TOKENS ============ */
:host{
  --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;
}
:host{
  --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);
}
:host([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}
:host{scroll-behavior:smooth}
:host{
  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 :host 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}
:host([data-theme="dark"]) .tgl .sun{display:block}
:host([data-theme="dark"]) .tgl .moon{display:none}
:host .tgl .sun{display:none}
:host .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}
:host([data-theme="dark"]) .logo .l-light{display:none}
:host([data-theme="dark"]) .logo .l-dark{display:block}
:host .logo .l-light{display:block}
:host .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:2px;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:2px;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:2px;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){
  :host{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+3) .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} }
/* Two-word triggers ("360 Views", "Data Academy") wrapped onto two lines, and
   just above the mobile breakpoint the row ran ~75px past the viewport. */
.nav .links .ntop{white-space:nowrap}
@media (min-width:1001px) and (max-width:1100px){
  .nav{gap:18px}
  .nav .links{gap:16px;margin-left:0}
  .nav .links .ntop{font-size:12px;letter-spacing:.04em}
  .nav .logo img{width:118px;height:auto}
  .nav .right{gap:6px}
  .nav .btn{padding:8px 12px}
  .nav .btn::after{display:none}
}
.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}
/* a second label further down one column (Industries: company type, then Explore) */
.nav .links .sub-col a + .sub-lbl{margin-top:14px}
.nav .links .sub a{display:block;padding:9px;text-decoration:none;border-radius:2px;
  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:4px;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)}
:host .cwt-inv img{filter:invert(1)}
:host([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:4px;
  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:4px;
  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:4px;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:4px;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:4px;
    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:2px;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:4px}
.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)}

/* ---- styles/enhance.css ---- */
/* ============================================================================
   ENHANCEMENT LAYER
   Loaded last on every page, after main.css and any page stylesheet, so it can
   restyle shared primitives without editing them in place.

   The brief: keep SCIKIQ's identity (indigo accent, Literata display face) and
   borrow the structural devices that give openinnovation.ai its rhythm --
   full-bleed dark bands, a light panel floating inside one, numbered index
   badges, label|divider|arrow buttons, and separated cards that lift on hover.

   Everything here is additive. Deleting this file and the two lines build.py
   injects returns the site to its previous appearance.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens --
   A dark band re-scopes --bg/--fg/--line/--accent so every descendant recolors
   itself. The panel that floats inside a band has to undo that, and it cannot
   read the values it just overwrote -- so the page surface is mirrored into a
   second set of names that no band ever touches. */
:host{
  --m-bg:#FFFFFF; --m-paper:#F4F5F7; --m-paper-2:#ECEEF1;
  --m-fg:#101317; --m-fg-dim:#676C78; --m-fg-faint:#5F646E;
  --m-line:rgba(16,19,23,.12); --m-line-soft:rgba(16,19,23,.07); --m-line-strong:rgba(16,19,23,.3);
  --m-accent:#2D26D6; --m-accent-ink:#1F1AA8; --m-accent-wash:rgba(45,38,214,.05);
  --m-shadow:0 1px 2px rgba(16,19,23,.04), 0 12px 32px -16px rgba(16,19,23,.16);

  --ink:#0B0D11;                 /* the band ground */
  --band-pad:clamp(64px,7.5vw,120px);
  --r-lg:24px; --r-md:14px; --r-sm:10px;
  --lift:cubic-bezier(.2,.7,.3,1);

  /* one arrow, masked by currentColor, so it inherits button and link colour */
  --arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}
:host([data-theme="dark"]){
  --m-bg:#0D0F13; --m-paper:#15181E; --m-paper-2:#1C2028;
  --m-fg:#F0F1F4; --m-fg-dim:#969CA8; --m-fg-faint:#868D99;
  --m-line:rgba(255,255,255,.13); --m-line-soft:rgba(255,255,255,.07); --m-line-strong:rgba(255,255,255,.3);
  --m-accent:#7B74FF; --m-accent-ink:#A9A4FF; --m-accent-wash:rgba(123,116,255,.1);
  --m-shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 36px -16px rgba(0,0,0,.8);
  --ink:#05070A;                 /* darker than the page, so it still reads as a band */
}

/* ------------------------------------------------------------ page rhythm --
   OI's pages breathe more than ours did. Sections get roughly a third more
   vertical room, and the hairline between them is dropped where a band already
   supplies the separation. */
section{padding-block:clamp(60px,7vw,104px)}
.hb-sec{padding:0 0 clamp(72px,8vw,116px)}

/* ================================================================== bands ==
   Full-bleed dark slab. Re-scoping the tokens rather than restating colours
   means cards, rules, chips and links inside adapt without their own rules. */
section[data-band="dark"]{
  --bg:var(--ink); --paper:#14171D; --paper-2:#1B1F27;
  --fg:#F2F3F6; --fg-dim:#9BA1AD; --fg-faint:#8A909C;
  --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.34);
  --accent:#9089FF; --accent-ink:#B6B1FF; --accent-wash:rgba(144,137,255,.13);
  --signal:#2FD9C3; --amber:#E9A144; --critical:#F2837B;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 52px -24px rgba(0,0,0,.9);
  background:var(--ink); color:var(--fg);
  border-top:0;
  padding-block:var(--band-pad);
  /* native selects and inputs inside a band still painted their light UA skin */
  color-scheme:dark;
}
section[data-band="dark"][data-panel] > .wrap{color-scheme:light}
:host([data-theme="dark"]) section[data-band="dark"][data-panel] > .wrap{color-scheme:dark}
section[data-band="dark"].hb-sec{padding-block:var(--band-pad)}
/* the rule under a band would draw a hairline on the slab itself */
section[data-band="dark"] + section{border-top:0}

/* The band's own top hairline becomes a thin accent seam instead. */
section[data-band="dark"]{position:relative; isolation:isolate}
section[data-band="dark"]::before,
section[data-band="dark"]::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; z-index:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.55; pointer-events:none;
}
/* in dark mode the band sits only a few points below the page, so the closing
   edge has to be drawn or the band has no visible end */
section[data-band="dark"]::after{inset:auto 0 0 0; opacity:.35}

/* ------------------------------------------------------------------ panel --
   The signature move: a light card inset into the dark band. Used on bands
   whose content carries its own colour (canvases, diagrams, logo art) and so
   cannot be recoloured by token swapping. */
section[data-band="dark"][data-panel] > .wrap{
  --bg:var(--m-bg); --paper:var(--m-paper); --paper-2:var(--m-paper-2);
  --fg:var(--m-fg); --fg-dim:var(--m-fg-dim); --fg-faint:var(--m-fg-faint);
  --line:var(--m-line); --line-soft:var(--m-line-soft); --line-strong:var(--m-line-strong);
  --accent:var(--m-accent); --accent-ink:var(--m-accent-ink); --accent-wash:var(--m-accent-wash);
  --shadow:var(--m-shadow);
  background:var(--m-bg); color:var(--m-fg);
  border-radius:var(--r-lg);
  padding:clamp(28px,4vw,64px);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.75);
}
/* two stacked .wrap children (heading block + content block) read as one card */
section[data-band="dark"][data-panel] > .wrap + .wrap{
  border-radius:0 0 var(--r-lg) var(--r-lg);
  margin-top:-1px; padding-top:0;
}
section[data-band="dark"][data-panel] > .wrap:has(+ .wrap){
  border-radius:var(--r-lg) var(--r-lg) 0 0; padding-bottom:0;
}

/* ============================================================ section head --
   The index number becomes a badge, the way OI numbers its feature cards and
   industry rows. */
.sec-title{align-items:center; gap:16px; border-top-color:var(--line-strong)}
.sec-title .idx{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none; border-radius:50%;
  border:1px solid var(--accent); color:var(--accent);
  font-family:var(--f-mono); font-size:12px; letter-spacing:0; line-height:1;
}

/* ================================================================ buttons ==
   label | hairline | arrow. The trailing chevron some buttons already carry is
   replaced by the masked arrow so every CTA on the site matches. */
.btn{
  text-transform:uppercase; letter-spacing:.085em;
  font-size:13px; font-weight:600; min-height:54px;
  padding:10px 22px; gap:0;
  justify-content:space-between;
  transition:background .16s var(--lift), color .16s var(--lift),
             border-color .16s var(--lift), transform .16s var(--lift),
             box-shadow .16s var(--lift);
}
.btn > svg:last-child{display:none}
.btn::after{
  content:""; flex:none; width:34px; height:20px; margin-left:16px;
  border-left:1px solid color-mix(in srgb, currentColor 34%, transparent);
  background-color:currentColor;
  -webkit-mask:var(--arrow-ne) center/13px 13px no-repeat;
  mask:var(--arrow-ne) center/13px 13px no-repeat;
  transition:transform .18s var(--lift);
}
.btn:hover::after{transform:translate(2px,-2px)}
.btn.no-arrow::after{display:none}
.btn.no-arrow{justify-content:center}
.btn-p:hover{transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(0,0,0,.55)}
.btn-s:hover,.btn:not(.btn-p):not(.btn-s):not(.ghost):hover{transform:translateY(-2px)}
.nav .btn,.mnav .btn{min-height:44px; font-size:12px; padding:8px 16px}
.nav .btn::after,.mnav .btn::after{width:28px; margin-left:12px}
/* form submits and in-card buttons keep the centred label */
.demo-form .btn,.agent .btn{justify-content:center}
.demo-form .btn::after,.agent .btn::after{display:none}

/* ================================================================== cards ==
   The old grids drew one shared hairline lattice, which left a torn edge
   whenever the item count did not divide the column count (five modules in a
   three-column grid ended with a missing bottom-right border). Separated cards
   with their own radius fix that and give the page depth. */
.mods{
  margin-top:52px; border:0; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}
.mod{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--bg); padding:26px 24px;
  transition:transform .2s var(--lift), box-shadow .2s var(--lift),
             border-color .2s var(--lift), background .2s var(--lift);
}
.mod:hover{
  background:var(--bg); border-color:var(--accent);
  transform:translateY(-4px); box-shadow:var(--shadow);
}

.cases{
  margin-top:52px; border:0; background:none; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.case{
  border:1px solid var(--line); border-radius:var(--r-md);
  transition:transform .2s var(--lift), box-shadow .2s var(--lift),
             border-color .2s var(--lift), background .2s var(--lift);
}
.case:hover{
  background:var(--bg); border-color:var(--accent);
  transform:translateY(-4px); box-shadow:var(--shadow);
}
/* a spacer that existed only to complete the old shared-hairline lattice; as a
   separated card it would draw an empty bordered box */
.case-fill{display:none}

/* interior pages share one card grid; n4/n6/n8/n5 fix the column count so the
   auto-fit rewrite would fight them -- keep their columns, change the skin */
.hb-cards{border:0; background:none; gap:16px}
.hb-card{
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  transition:transform .2s var(--lift), box-shadow .2s var(--lift),
             border-color .2s var(--lift), background .2s var(--lift);
}
.hb-card:hover{
  background:var(--bg); border-color:var(--accent);
  transform:translateY(-4px); box-shadow:var(--shadow);
}
.hb-card::before{height:3px}

/* ============================================================ logo marquee ==
   The customer wall scrolls, as OI's does. enhance.js clones the row so the
   loop is seamless; without JS or with reduced motion it stays the static
   grid it was. */
.custwall.mq{
  display:flex; flex-wrap:nowrap; overflow:hidden; gap:0;
  border:0; background:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.custwall.mq .mq-track{
  display:flex; flex:none; align-items:center; gap:clamp(38px,5vw,76px);
  padding-inline:clamp(19px,2.5vw,38px);
  animation:mq-scroll 46s linear infinite;
}
.custwall.mq:hover .mq-track{animation-play-state:paused}
.custwall.mq .cwt{
  border:0; padding:0; flex:none; display:flex; align-items:center;
  justify-content:center; min-height:52px;
}
.custwall.mq .cwt img{
  max-height:34px; width:auto; opacity:.62;
  filter:grayscale(1); transition:opacity .2s, filter .2s;
}
.custwall.mq .cwt:hover img{opacity:1; filter:none}
@keyframes mq-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ================================================================= motion ==
   Slightly longer travel, and a stagger driven by position rather than the
   flat 3-step cycle reveal.js applies. */
.rv{transform:translateY(22px)}
.rv.in{transform:none}
.mods .mod,.cases .case,.hb-cards .hb-card{transition-delay:0ms}

@media (prefers-reduced-motion: reduce){
  .custwall.mq .mq-track{animation:none}
  .mod:hover,.case:hover,.hb-card:hover,.btn:hover,.btn-p:hover{transform:none}
  .btn:hover::after{transform:none}
}

/* ================================================================== small ==
   Narrow screens lose the band padding and the panel inset, which otherwise
   eat most of a phone viewport. */
@media (max-width:700px){
  :host{--band-pad:clamp(44px,10vw,64px); --r-lg:16px}
  section[data-band="dark"][data-panel] > .wrap{padding:22px 18px}
  /* uppercase + tracking + the arrow box make a CTA ~40px wider than it was;
     at 390px that pushed the widest button past the viewport */
  .btn{min-height:50px; min-width:0; max-width:100%; font-size:12px; letter-spacing:.06em}
  .btn::after{width:24px; margin-left:10px}
}

/* ============================================================================
   BANKING DESIGN SYSTEM  (2026-10-02)
   scikiq.org takes the look of banking.scikiq.org: Source Serif 4 headings at
   weight 500, Inter for UI and :host, white surfaces, deep navy ink (#051C2C),
   one electric-blue accent (#2251FF), cyan secondary, hairline borders,
   square-ish corners, no gradients or glow. Sections alternate white and
   #F6F7F9 the way banking's section-premium / -alt do, so the old full-bleed
   dark bands become light alternate sections.
   Supersedes the earlier "keep SCIKIQ identity" brief above; loaded last.
   ========================================================================= */







:host, :host{
  --bg:#FFFFFF; --paper:#F6F7F9; --paper-2:#EDEFF2;
  --fg:#051C2C; --fg-dim:#5B6772; --fg-faint:#66707A;
  --line:#E1E4E8; --line-soft:#EDEFF2; --line-strong:#051C2C;
  --accent:#2251FF; --accent-ink:#1238D6; --accent-wash:#EEF2FF;
  --signal:#13795B; --amber:#A86400; --critical:#C8262D;
  --shadow:0 1px 2px rgba(5,28,44,.04), 0 8px 24px rgba(5,28,44,.06);
  --gv1:#2251FF; --gv2:#A86400; --gv3:#0E7C86; --gv4:#C8262D; --gv5:#00A9F4; --gv6:#13795B; --gv7:#1438B8; --gv8:#8FA6FF;
  --chart-a:#2251FF; --chart-b:#A3ACB6;
  --m-bg:#FFFFFF; --m-paper:#F6F7F9; --m-paper-2:#EDEFF2;
  --m-fg:#051C2C; --m-fg-dim:#5B6772; --m-fg-faint:#66707A;
  --m-line:#E1E4E8; --m-line-soft:#EDEFF2; --m-line-strong:#051C2C;
  --m-accent:#2251FF; --m-accent-ink:#1238D6; --m-accent-wash:#EEF2FF;
  --m-shadow:0 1px 2px rgba(5,28,44,.04), 0 8px 24px rgba(5,28,44,.06);
  --ink:#051C2C; --cyan:#00A9F4; --accent-line:#C9D4FF;
  --f-display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --f-body:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --r-lg:4px; --r-md:4px; --r-sm:2px;
}
/* Banking has no dark theme; this is its palette carried onto a navy ground. */
:host([data-theme="dark"]){
  --bg:#06131F; --paper:#0B1E2D; --paper-2:#11283A;
  --fg:#F2F5F8; --fg-dim:#A5B1BD; --fg-faint:#93A0AD;
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.4);
  --accent:#6F8CFF; --accent-ink:#9DB1FF; --accent-wash:rgba(111,140,255,.12);
  --signal:#3CC79A; --amber:#E2A24A; --critical:#F08A8F;
  --gv1:#6F8CFF; --gv5:#4CC3F7; --chart-a:#6F8CFF;
  --m-bg:#06131F; --m-paper:#0B1E2D; --m-paper-2:#11283A;
  --m-fg:#F2F5F8; --m-fg-dim:#A5B1BD; --m-fg-faint:#93A0AD;
  --m-line:rgba(255,255,255,.12); --m-line-soft:rgba(255,255,255,.07); --m-line-strong:rgba(255,255,255,.4);
  --m-accent:#6F8CFF; --m-accent-ink:#9DB1FF; --m-accent-wash:rgba(111,140,255,.12);
  --ink:#030C14;
}
@media (prefers-color-scheme:dark){
  :host(:not([data-theme="light"])){
    --bg:#06131F; --paper:#0B1E2D; --paper-2:#11283A;
    --fg:#F2F5F8; --fg-dim:#A5B1BD; --fg-faint:#93A0AD;
    --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.4);
    --accent:#6F8CFF; --accent-ink:#9DB1FF; --accent-wash:rgba(111,140,255,.12);
  }
}

/* ---- type: serif 500 headings, Inter :host ---------------------------------- */
:host{font-family:var(--f-body); color:var(--fg)}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:500; color:var(--fg)}
h1,h2{letter-spacing:-.018em; line-height:1.08}
h3,h4{letter-spacing:-.01em; line-height:1.2}
h1 b,h2 b,h1 strong,h2 strong{font-weight:600}
p{color:var(--fg-dim)}
.em,.h-em{font-style:normal; color:var(--accent)}
::selection{background:var(--accent-wash); color:var(--fg)}

/* ---- section rhythm: white / light grey alternation, hairlines -------------- */
section[data-band="dark"]{
  --bg:var(--paper); --paper:#FFFFFF; --paper-2:#F6F7F9;
  --fg:#051C2C; --fg-dim:#5B6772; --fg-faint:#66707A;
  --line:#E1E4E8; --line-soft:#EDEFF2; --line-strong:#051C2C;
  --accent:#2251FF; --accent-ink:#1238D6; --accent-wash:#EEF2FF;
  --signal:#13795B; --amber:#A86400; --critical:#C8262D;
  --shadow:0 1px 2px rgba(5,28,44,.04), 0 8px 24px rgba(5,28,44,.06);
  background:#F6F7F9; color:#051C2C; color-scheme:light;
  border-top:1px solid #E1E4E8; border-bottom:1px solid #E1E4E8;
}
:host([data-theme="dark"]) section[data-band="dark"]{
  --bg:#0B1E2D; --paper:#06131F; --paper-2:#11283A;
  --fg:#F2F5F8; --fg-dim:#A5B1BD; --fg-faint:#93A0AD;
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.4);
  --accent:#6F8CFF; --accent-ink:#9DB1FF; --accent-wash:rgba(111,140,255,.12);
  background:#0B1E2D; color:#F2F5F8; color-scheme:dark;
  border-color:rgba(255,255,255,.08);
}
section[data-band="dark"]::before,section[data-band="dark"]::after{display:none}
section[data-band="dark"][data-panel] > .wrap{box-shadow:none; border:1px solid var(--m-line)}

/* ---- section label: "01  ·  LABEL" in the accent, like banking's eyebrow ---- */
.sec-title{font-family:var(--f-body); font-size:12px; font-weight:600; letter-spacing:.12em;
  color:var(--accent); border-top:1px solid var(--line); padding-top:20px; gap:12px}
.sec-title .idx{width:auto; height:auto; border:0; border-radius:0; color:var(--fg-faint);
  font-family:var(--f-body); font-size:12px; font-weight:600}
.sec-title .idx::after{content:"·"; margin-left:12px; color:var(--line-strong)}
.eyebrow,.kicker,.hb-eyebrow{font-family:var(--f-body); font-weight:600; letter-spacing:.12em; color:var(--accent)}

/* ---- buttons: blue primary, navy outline, 2px corners, sentence case ------- */
.btn{text-transform:none; letter-spacing:0; font-family:var(--f-body); font-size:14px; font-weight:600;
  min-height:46px; padding:10px 22px; border-radius:2px; gap:10px; justify-content:center}
.btn::after{content:"\2192"; -webkit-mask:none; mask:none; background:none; border:0;
  width:auto; height:auto; margin-left:2px; font-size:15px; line-height:1}
.btn:hover::after{transform:translateX(3px)}
.btn-p{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-p:hover{background:var(--accent-ink); border-color:var(--accent-ink); color:#fff; transform:none; box-shadow:none}
.btn-s,.btn:not(.btn-p):not(.btn-s):not(.ghost){background:transparent; border-color:var(--fg); color:var(--fg)}
.btn-s:hover,.btn:not(.btn-p):not(.btn-s):not(.ghost):hover{background:var(--fg); color:var(--bg); transform:none}
.nav .btn,.mnav .btn{min-height:40px; font-size:13px; padding:8px 16px}
.nav .btn::after,.mnav .btn::after{width:auto; margin-left:2px}

/* ---- header: white bar, hairline, sentence-case nav like banking's navbar --- */
header{background:var(--bg); backdrop-filter:none; border-bottom:1px solid var(--line)}
.nav .links .ntop{font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--fg)}
.nav .links .ntop:hover,.nav .links .nitem-w:hover .ntop{color:var(--accent)}
.nav .links .sub{border-radius:2px; box-shadow:0 8px 24px rgba(5,28,44,.08)}
.nav .links .sub a b{font-family:var(--f-body)}
.nav .links .sub-lbl{letter-spacing:.12em; color:var(--fg-faint)}

/* ---- surfaces: flat cards, hairlines, square-ish corners ------------------ */
[class*="card"],[class*="-c "],.mods > *,.iq-acad-c,.snav-menu{box-shadow:none}
[class*="card"]:hover{box-shadow:0 8px 24px rgba(5,28,44,.06)}
.tnum,.hb-sv,[class*="stat"] b{font-family:var(--f-display); font-weight:500}

/* ---- compact home-page tail: Explore collapses to one row, tighter FAQ and footer ---- */
.xplore{padding-block:28px}
.xp-more > summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.xp-more > summary::-webkit-details-marker{display:none}
.xp-more > summary::after{content:"+"; margin-left:auto; font-size:1.4rem; line-height:1; color:var(--accent)}
.xp-more[open] > summary::after{content:"\2212"}
.xp-more .xp-h2{font-size:1.25rem; margin:0}
.xp-hint{font-size:.875rem; color:var(--fg-dim)}
.xp-more[open] .xp-grid{margin-top:28px}
.faq{padding-block:clamp(36px,4.5vw,56px)!important}
.faq h2{font-weight:500!important; font-size:clamp(1.4rem,2.4vw,1.8rem)!important}
.faq details{border-radius:2px!important}
.faq summary{padding:13px 0!important; font-size:1rem!important}
footer{padding-block:40px 24px}
.f-grid{gap:28px 20px}
.f-col h4{margin-bottom:10px; font-size:12px}
.f-col a{padding:3px 0; font-size:.8125rem}
.f-bot{margin-top:28px; padding-top:16px}
/* sentence-case nav labels are wider: three-column panels only fit beside a mid-nav trigger above ~1440px */
@media (max-width:1440px){ .nav .links .sub-3{grid-template-columns:222px 222px} }
.xp-more .xp-h2{font-weight:500}
.faq h2{max-width:none!important}

/* ---- compact footer: brand on one row, columns capped at six links ---- */
.f-top{display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; padding-bottom:22px; margin-bottom:26px; border-bottom:1px solid var(--line-soft)}
.f-top .logo img{width:132px; height:auto}
.f-top .f-about{margin:0; max-width:none; flex:1 1 320px}
.f-top .social{display:flex; gap:18px; margin:0; padding:0; border:0}
.f-top .social a{font-size:.8125rem; color:var(--fg-dim); text-decoration:none}
.f-top .social a:hover{color:var(--accent)}
.f-grid{grid-template-columns:1fr 2fr 1fr 1fr 1fr 1fr; gap:24px 22px}
.f-two{display:grid; grid-template-columns:1fr 1fr; column-gap:18px}
@media (max-width:1000px){ .f-grid{grid-template-columns:repeat(3,1fr)} .f-wide{grid-column:span 2} }
@media (max-width:600px){ .f-grid{grid-template-columns:1fr 1fr} .f-wide{grid-column:1/-1} }
@media (max-width:600px){
  footer{padding-block:28px 18px}
  .f-top{padding-bottom:14px; margin-bottom:16px}
  .f-top .f-about{font-size:.8125rem}
  .f-grid{grid-template-columns:repeat(3,1fr); gap:18px 12px}
  .f-wide{grid-column:1/-1}
  .f-two{grid-template-columns:repeat(3,1fr); column-gap:12px}
  .f-col h4{margin-bottom:6px; font-size:11px}
  .f-col a{font-size:.75rem; padding:2px 0; line-height:1.35}
  .f-bot{margin-top:18px; font-size:.75rem}
}
@media (min-width:601px) and (max-width:1000px){
  .f-grid{grid-template-columns:repeat(5,1fr); gap:20px 16px}
  .f-wide{grid-column:1/-1}
  .f-two{grid-template-columns:repeat(4,1fr)}
  .f-col a{font-size:.78rem; padding:2px 0}
}
@media (max-width:1000px){ .f-wide{order:-1} }

/* ---- home: module cards link to their product pages; industry tags link to industry pages ---- */
.mod{position:relative}
.mod h3 a{color:inherit; text-decoration:none}
.mod h3 a::after{content:""; position:absolute; inset:0}
.mod:hover h3 a{color:var(--accent)}
.inds a{font-family:var(--f-body); font-size:12.5px; letter-spacing:.02em; padding:8px 14px; border:1px solid var(--line);
  border-radius:2px; color:var(--fg-dim); text-decoration:none}
.inds a:hover{border-color:var(--accent); color:var(--accent)}
/* home stats: only the verifiable figures remain, three across */
.stats.n3{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){ .stats.n3{grid-template-columns:1fr 1fr 1fr} }

/* ======================================================= home visuals ==
   1) "How SCIKIQ works": sources -> four layers -> outcomes, data visibly flowing
   2) silos -> one governed layer, in the problem section
   Light surfaces only (no dark blocks), the banking palette, and every animation
   stops for visitors who ask for reduced motion. */
.hw{margin:40px 0 56px; display:grid; grid-template-columns:minmax(0,1fr) 56px minmax(0,1.25fr) 56px minmax(0,1fr); align-items:center}
.hw-col,.hw-core{border:1px solid var(--line); background:var(--bg); padding:20px 20px 18px; border-radius:4px}
.hw-lbl{display:block; font-family:var(--f-body); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px}
.hw ul,.hw ol{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.hw-src li{display:flex; flex-direction:column; padding:8px 10px; border:1px solid var(--line-soft); border-left:3px solid var(--line); border-radius:2px; background:var(--paper)}
.hw-src li b{font-size:13px; font-weight:600; color:var(--fg)}
.hw-src li em{font-style:normal; font-size:11.5px; color:var(--fg-dim)}
.hw-core{border-color:var(--accent); box-shadow:0 8px 24px rgba(34,81,255,.08)}
.hw-core li{display:grid; grid-template-columns:28px 1fr; column-gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:2px; background:var(--bg); transition:background .3s}
.hw-core li b{font-family:var(--f-display); font-weight:500; font-size:1.05rem; color:var(--fg)}
.hw-core li em{grid-column:2; font-style:normal; font-size:12px; color:var(--fg-dim)}
.hw-n{grid-row:1 / span 2; align-self:center; font-size:11px; font-weight:600; color:var(--accent); border:1px solid var(--accent-line,#C9D4FF); border-radius:2px; text-align:center; padding:3px 0}
.hw-gov{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); font-size:12px; color:var(--signal); font-weight:500}
.hw-out li{position:relative; padding:9px 10px 9px 34px; font-size:13.5px; color:var(--fg); border:1px solid var(--line-soft); border-radius:2px; background:var(--paper)}
.hw-out li::before{content:""; position:absolute; left:10px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%;
  background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat}
.hw-pipe{position:relative; height:100%; min-height:40px}
.hw-pipe::before{content:""; position:absolute; left:6px; right:6px; top:50%; border-top:2px dashed var(--accent-line,#C9D4FF)}
.hw-pipe i{position:absolute; top:50%; left:6px; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--accent); opacity:0}
.hw-loop{grid-column:1 / -1; margin-top:18px; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--fg-dim)}
.hw-loop span{flex:0 0 120px; height:2px; background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 14px); background-size:28px 2px}

.silo-viz{margin:28px 0 36px; display:grid; grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr); align-items:center; gap:0 8px}
.sv-side{border:1px solid var(--line); background:var(--bg); border-radius:4px; padding:16px 18px 18px}
.sv-cap{display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px}
.sv-before .sv-cap{color:var(--amber)} .sv-after .sv-cap{color:var(--signal)}
.sv-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.sv-tiles span{font-size:12.5px; text-align:center; padding:8px 4px; border-radius:2px; color:var(--fg)}
.sv-before .sv-tiles span{border:1px dashed var(--amber); background:var(--paper)}
.sv-before .sv-tiles span:nth-child(3n+1){transform:translate(-4px,6px) rotate(-3deg)}
.sv-before .sv-tiles span:nth-child(3n+2){transform:translate(5px,-5px) rotate(2deg)}
.sv-before .sv-tiles span:nth-child(3n){transform:translate(-2px,8px) rotate(4deg)}
.sv-after .sv-tiles span{border:1px solid var(--accent-line,#C9D4FF); background:var(--accent-wash); position:relative}
.sv-after .sv-tiles span::after{content:""; position:absolute; left:50%; bottom:-11px; height:10px; border-left:1px solid var(--accent-line,#C9D4FF)}
.sv-bar{margin-top:14px; padding:9px; text-align:center; font-size:12.5px; font-weight:600; color:#fff; border-radius:2px;
  background:linear-gradient(90deg,var(--accent) 0%,#4E74FF 50%,var(--accent) 100%); background-size:200% 100%}
.sv-arrow{color:var(--accent); display:grid; place-items:center} .sv-arrow svg{width:26px; height:26px}

@media (prefers-reduced-motion:no-preference){
  .hw-pipe i{animation:hw-flow 2.4s linear infinite}
  .hw-pipe i:nth-child(2){animation-delay:.6s} .hw-pipe i:nth-child(3){animation-delay:1.2s} .hw-pipe i:nth-child(4){animation-delay:1.8s}
  .hw-core li{animation:hw-layer 8s ease-in-out infinite; animation-delay:calc(var(--i) * 2s)}
  .hw-src li{animation:hw-src 6s ease-in-out infinite; animation-delay:calc(var(--i) * 1s)}
  .hw-out li{animation:hw-out 8s ease-in-out infinite; animation-delay:calc(var(--i) * 2s + .8s)}
  .hw-loop span{animation:hw-dash 1.2s linear infinite}
  .sv-before .sv-tiles span{animation:sv-drift 5s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -.6s)}
  .sv-bar{animation:sv-shine 3.5s linear infinite}
}
@keyframes hw-flow{0%{left:6px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 14px);opacity:0}}
@keyframes hw-layer{0%,22%,100%{background:var(--bg);border-color:var(--line)}6%,16%{background:var(--accent-wash);border-color:var(--accent)}}
@keyframes hw-src{0%,30%,100%{border-left-color:var(--line)}10%,20%{border-left-color:var(--accent)}}
@keyframes hw-out{0%,22%,100%{border-color:var(--line-soft)}6%,16%{border-color:var(--signal)}}
@keyframes hw-dash{to{background-position:28px 0}}
@keyframes sv-drift{to{translate:0 -5px}}
@keyframes sv-shine{to{background-position:-200% 0}}

@media (max-width:900px){
  .hw{grid-template-columns:1fr; gap:0}
  .hw-pipe{height:44px; min-height:0}
  .hw-pipe::before{left:50%; right:auto; top:6px; bottom:6px; border-top:0; border-left:2px dashed var(--accent-line,#C9D4FF)}
  .hw-pipe i{left:50%; margin-left:-4px; top:6px; margin-top:0}
  @media (prefers-reduced-motion:no-preference){ .hw-pipe i{animation-name:hw-flow-v} }
  .silo-viz{grid-template-columns:1fr; gap:8px}
  .sv-arrow{transform:rotate(90deg)}
}
@keyframes hw-flow-v{0%{top:6px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 14px);opacity:0}}
#trust .mod .ic{width:26px; height:26px; color:var(--accent); margin-bottom:10px}
.hw{grid-template-columns:minmax(0,1fr) 84px minmax(0,1.25fr) 84px minmax(0,1fr)} @media (max-width:900px){.hw{grid-template-columns:1fr}}

/* ---- home: twelve industries on one shared foundation (after banking.scikiq.org's model diagram) ---- */
.ind-found{margin:34px 0 8px; border:1px solid var(--line); background:var(--bg); border-radius:4px; padding:22px 22px 24px}
.if-cap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px; margin-bottom:20px}
.if-cap span{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.if-cap em{font-style:normal; font-size:13px; color:var(--fg-dim)}
.if-inds{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px}
.if-node{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:var(--fg); padding-bottom:46px}
.if-ab{position:relative; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700;
  letter-spacing:.04em; color:var(--fg); background:var(--bg); border:2px solid var(--fg); transition:border-color .2s,color .2s}
.if-ab::before{content:""; position:absolute; inset:-6px; border-radius:50%; background:var(--accent); opacity:.14; z-index:-1}
.if-node b{font-size:11.5px; font-weight:500; text-align:center; line-height:1.25; min-height:2.5em}
.if-node:hover .if-ab{border-color:var(--accent); color:var(--accent)}
.if-node:hover b{color:var(--accent)}
.if-node::after{content:""; position:absolute; bottom:0; left:50%; height:40px; border-left:2px dashed var(--accent-line,#C9D4FF)}
.if-node::before{content:""; position:absolute; left:50%; bottom:36px; width:6px; height:6px; margin-left:-2px; border-radius:50%; background:var(--accent); opacity:0}
.if-layers{display:grid; gap:6px; margin-top:4px}
.if-layer{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 14px; padding:10px 16px; border-radius:2px;
  background:var(--accent-wash); border:1px solid var(--accent-line,#C9D4FF)}
.if-layer b{font-size:13px; font-weight:600; color:var(--fg)}
.if-layer span{font-size:12px; color:var(--fg-dim)}
.if-layer.if-base{background:var(--accent); border-color:var(--accent)}
.if-layer.if-base b,.if-layer.if-base span{color:#fff}
@media (prefers-reduced-motion:no-preference){
  .if-ab::before{animation:if-pulse 3s ease-out infinite; animation-delay:calc(var(--i) * .25s)}
  .if-node::before{animation:if-drop 3s ease-in infinite; animation-delay:calc(var(--i) * .25s)}
  .if-layer{animation:if-glow 6s ease-in-out infinite}
  .if-layer:nth-child(2){animation-delay:1.5s} .if-layer:nth-child(3){animation-delay:3s} .if-layer.if-base{animation:none}
}
@keyframes if-pulse{0%{transform:scale(.8);opacity:.3}70%,100%{transform:scale(1.35);opacity:0}}
@keyframes if-drop{0%{bottom:36px;opacity:0}15%{opacity:1}90%{opacity:1}100%{bottom:-4px;opacity:0}}
@keyframes if-glow{0%,20%,100%{border-color:var(--accent-line,#C9D4FF)}8%,14%{border-color:var(--accent)}}
@media (max-width:900px){
  .if-inds{grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:4px}
  .if-node{padding-bottom:10px} .if-node::after,.if-node::before{display:none}
  .if-layers{margin-top:14px}
}
.if-node{isolation:isolate} .if-ab{z-index:0} .if-ab::before{z-index:-1}

/* ===================================================== Layer 4 · agent cards ==
   Separate cards; Trigger -> Reads -> Acts as a three-step flow; outcome as a
   result; a compact run button; a slim console for the execution log. CSS only:
   home.js still drives .run-agent / #runStatus / #runBody. */
.agents{display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px!important; border:0!important; background:none!important}
.agents .agent{display:flex; flex-direction:column; gap:12px; padding:22px!important; border:1px solid var(--line)!important;
  border-radius:4px!important; background:var(--bg)!important; transition:border-color .2s, box-shadow .2s}
.agents .agent:hover{border-color:var(--accent)!important; box-shadow:0 8px 24px rgba(5,28,44,.06)}
.agents .agent h3{display:flex; align-items:center; gap:10px; margin:0; font-family:var(--f-display); font-weight:500; font-size:1.15rem; color:var(--fg)!important}
.agents .agent h3::before{content:""; flex:none; width:30px; height:30px; border-radius:4px; background:var(--accent-wash);
  -webkit-mask:none; box-shadow:inset 0 0 0 1px var(--accent-line,#C9D4FF);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232251FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:16px}
.agents .agent .ad{margin:0; font-size:13.5px; color:var(--fg-dim)}
.agents .agent dl{display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:2px 0 0!important; padding:0; border:0!important}
.agents .agent dl > div{position:relative; display:flex; flex-direction:column; gap:6px; padding:12px 12px 12px; border:1px solid var(--line-soft);
  border-top:3px solid var(--line); border-radius:2px; background:var(--paper); margin:0!important}
.agents .agent dl > div:nth-child(1){border-top-color:var(--amber)}
.agents .agent dl > div:nth-child(2){border-top-color:var(--accent)}
.agents .agent dl > div:nth-child(3){border-top-color:var(--signal)}
.agents .agent dl > div:not(:last-child)::after{content:"\2192"; position:absolute; right:-10px; top:50%; transform:translate(50%,-50%);
  width:18px; height:18px; display:grid; place-items:center; font-size:12px; line-height:1; color:var(--accent); background:var(--bg);
  border:1px solid var(--accent-line,#C9D4FF); border-radius:50%; z-index:1}
.agents .agent dt{margin:0; font-size:10.5px!important; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-faint)!important}
.agents .agent dd{margin:0!important; font-size:12.5px!important; line-height:1.45; color:var(--fg)!important}
.agents .agent .val{margin:0; display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-left:3px solid var(--signal);
  background:rgba(19,121,91,.07); border-radius:2px; font-size:13.5px; font-weight:500; color:var(--fg)!important; border-top:0!important}
.agents .agent .val::before{content:""; flex:none; width:16px; height:16px; margin-top:2px; border-radius:50%;
  background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat}
.agents .agent .run-agent{align-self:flex-start; margin-top:auto; width:auto!important; min-height:36px!important; padding:7px 16px 7px 14px!important;
  font-size:13px!important; background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; gap:8px}
.agents .agent .run-agent::before{content:"\25B6"; font-size:10px}
.agents .agent .run-agent::after{display:none!important}
.agents .agent .run-agent:hover{background:var(--accent-ink)!important; border-color:var(--accent-ink)!important}
.runlog{margin-top:16px!important; border:1px solid var(--line)!important; border-radius:4px; background:var(--paper)!important; overflow:hidden}
.runlog-top{display:flex; justify-content:space-between; align-items:center; padding:10px 16px!important; font-size:12.5px; font-weight:600;
  border-bottom:1px solid var(--line); background:var(--bg)!important; color:var(--fg)!important}
.runlog-top .rs{font-size:10.5px; letter-spacing:.12em; padding:3px 8px; border-radius:2px; border:1px solid var(--line); color:var(--fg-dim)}
.runlog-body{min-height:64px!important; padding:12px 16px!important; font-family:var(--f-mono); font-size:12.5px; color:var(--fg)!important}
.runlog-body .idle{margin:0; font-family:var(--f-body); color:var(--fg-dim)}
@media (max-width:900px){
  .agents{grid-template-columns:1fr}
  .agents .agent dl{grid-template-columns:1fr}
  .agents .agent dl > div:not(:last-child)::after{content:"\2193"; right:auto; left:50%; top:auto; bottom:-10px; transform:translate(-50%,50%)}
}
/* six top items (AI Maturity added): the last three panels open leftward */
.nav .links .nitem-w:nth-last-child(-n+3) .sub{left:auto;right:-20px}

/* ---- home connectors: the catalog, 268 data sources in 23 types, grouped in six families ---- */
.cx-cat{display:grid; gap:26px; margin-top:28px}
.cx-fh{display:flex; align-items:baseline; gap:10px; margin:0 0 10px; font-family:var(--f-body); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.cx-fh span{font-size:11px; color:var(--fg-faint); letter-spacing:0}
.cx-types{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px}
.cx-type{border:1px solid var(--line); border-radius:4px; background:var(--bg); padding:12px 14px 14px; transition:border-color .2s}
.cx-type:hover{border-color:var(--accent)}
.cx-th{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px}
.cx-th b{font-size:13.5px; font-weight:600; color:var(--fg)}
.cx-c{min-width:30px; text-align:center; font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-wash);
  border:1px solid var(--accent-line,#C9D4FF); border-radius:2px; padding:2px 6px}
.cx-type .cx-chips{display:flex; flex-wrap:wrap; gap:5px}
.cx-type .cx-chips span{font-size:11.5px; padding:3px 7px; border:1px solid var(--line-soft); border-radius:2px; background:var(--paper); color:var(--fg-dim)}
.cx-type .cx-chips .cx-plus{border-style:dashed; color:var(--accent); background:transparent}
.cx-n .cx-k{white-space:nowrap}

/* ---- connectors, concise: one proportion bar + six family cards; full list behind a toggle ---- */
.cx2{margin-top:26px}
.cx2-bar{display:flex; gap:3px; height:54px; border-radius:4px; overflow:hidden}
.cx2-seg{flex:var(--n) 1 0; min-width:44px; display:flex; flex-direction:column; justify-content:center; padding:0 10px; color:#fff; overflow:hidden; white-space:nowrap}
.cx2-seg b{font-size:15px; font-weight:700; line-height:1.1}
.cx2-seg em{font-style:normal; font-size:11px; opacity:.9; overflow:hidden; text-overflow:ellipsis}
.s0{--c:#2251FF} .s1{--c:#1238D6} .s2{--c:#00A9F4} .s3{--c:#0E7C86} .s4{--c:#13795B} .s5{--c:#5B6772}
.cx2-seg{background:var(--c)}
.cx2-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px}
.cx2-card{border:1px solid var(--line); border-top:3px solid var(--c); border-radius:4px; background:var(--bg); padding:14px 16px 12px}
.cx2-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px}
.cx2-h h4{margin:0; font-family:var(--f-body); font-size:13.5px; font-weight:600; color:var(--fg)}
.cx2-h span{font-family:var(--f-display); font-size:1.6rem; font-weight:500; color:var(--c); line-height:1}
.cx2-card ul{list-style:none; margin:0; padding:0; display:grid; gap:3px}
.cx2-card li{display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--fg-dim); border-bottom:1px dotted var(--line-soft); padding:2px 0}
.cx2-card li b{font-weight:600; color:var(--fg)}
.cx2-eg{margin:8px 0 0; font-size:12px; color:var(--fg-faint); line-height:1.45}
.cx2-all{margin-top:14px}
.cx2-all > summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--accent); padding:6px 0}
.cx2-all > summary::-webkit-details-marker{display:none}
.cx2-all > summary::after{content:"+"; font-size:1.1rem}
.cx2-all[open] > summary::after{content:"\2212"}
.cx2-all .cx-cat{margin-top:12px}
@media (prefers-reduced-motion:no-preference){
  .cx2.rv .cx2-seg{transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.2,.7,.3,1)}
  .cx2.rv.in .cx2-seg{transform:none}
  .cx2.rv.in .cx2-seg:nth-child(2){transition-delay:.08s} .cx2.rv.in .cx2-seg:nth-child(3){transition-delay:.16s}
  .cx2.rv.in .cx2-seg:nth-child(4){transition-delay:.24s} .cx2.rv.in .cx2-seg:nth-child(5){transition-delay:.32s} .cx2.rv.in .cx2-seg:nth-child(6){transition-delay:.4s}
}
@media (max-width:900px){ .cx2-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .cx2-seg em{display:none} .cx2-bar{height:40px} }
@media (max-width:560px){ .cx2-grid{grid-template-columns:1fr} }

/* ---- Data Academy: "Start here" doors and the certification band ---- */
.ah-doors{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px}
.ah-door{display:flex; flex-direction:column; gap:6px; padding:18px; border:1px solid var(--line); border-radius:4px; background:var(--bg);
  text-decoration:none; color:var(--fg); transition:border-color .2s, box-shadow .2s}
.ah-door:hover{border-color:var(--accent); box-shadow:0 8px 24px rgba(5,28,44,.06)}
.ah-door-wide{grid-column:1/-1; background:linear-gradient(120deg,var(--bg) 55%,rgba(31,182,166,.08))}
.ah-dic{width:34px; height:34px; display:grid; place-items:center; border-radius:4px; background:var(--accent-wash); color:var(--accent); margin-bottom:4px}
.ah-dic svg{width:18px; height:18px}
.ah-door b{font-family:var(--f-display); font-weight:500; font-size:1.1rem}
.ah-dd{font-size:13.5px; color:var(--fg-dim); line-height:1.5}
.ah-dgo{margin-top:auto; padding-top:6px; font-size:13px; font-weight:600; color:var(--accent)}
.ah-cert{display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-top:18px}
.ah-cert-list{display:flex; flex-wrap:wrap; gap:6px}
.ah-cert-list a{font-size:12.5px; padding:6px 10px; border:1px solid var(--line); border-radius:2px; background:var(--paper); color:var(--fg); text-decoration:none}
.ah-cert-list a:hover{border-color:var(--accent); color:var(--accent)}
@media (max-width:900px){ .ah-doors{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .ah-doors{grid-template-columns:1fr} }

/* ---- /resources hub ---- */
.rs-jump{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.rs-jump a{font-size:13px; padding:7px 12px; border:1px solid var(--line); border-radius:2px; color:var(--fg); text-decoration:none; background:var(--bg)}
.rs-jump a:hover{border-color:var(--accent); color:var(--accent)}
.rs-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:6px}
.rs-card{display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--line); border-radius:4px; background:var(--bg);
  color:var(--fg); text-decoration:none; transition:border-color .2s, box-shadow .2s}
.rs-card:hover{border-color:var(--accent); box-shadow:0 8px 24px rgba(5,28,44,.06)}
.rs-card b{font-family:var(--f-display); font-weight:500; font-size:1.1rem}
.rs-card > span:not(.rs-tag):not(.rs-go){font-size:13.5px; color:var(--fg-dim); line-height:1.5}
.rs-tag{align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-wash); padding:2px 7px; border-radius:2px}
.rs-go{margin-top:auto; font-size:13px; font-weight:600; color:var(--accent)}
.rs-inds{display:flex; flex-wrap:wrap; gap:8px}
.rs-inds a{font-size:13px; padding:8px 12px; border:1px solid var(--line); border-radius:2px; color:var(--fg); text-decoration:none}
.rs-inds a:hover{border-color:var(--accent); color:var(--accent)}

/* ---- code samples in the banking palette: light surface, navy text, AA-contrast token colours ---- */
.ac-code,.ac-lab .snippet{background:#F6F7F9!important; border-color:var(--line)!important}
.ac-code-h{background:#EDEFF2!important; border-bottom:1px solid var(--line)!important}
.ac-code-h .dots i{background:#CDD2D8!important}
.ac-code-h .fn{color:var(--fg)!important}
.ac-code-h .lang{color:var(--fg-dim)!important; border-color:var(--line)!important}
.ac-code pre,.ac-lab .snippet pre{color:#051C2C!important}
.ac-code .c,.ac-lab .snippet .c{color:#5B6772!important; font-style:italic}
.ac-code .k,.ac-lab .snippet .k{color:#1238D6!important}
.ac-code .s,.ac-lab .snippet .s{color:#0B6B74!important}
.ac-code .f{color:#8A5200!important}
.ac-code .n{color:#B0232A!important}
:host([data-theme="dark"]) .ac-code,:host([data-theme="dark"]) .ac-lab .snippet{background:#0B1E2D!important}
:host([data-theme="dark"]) .ac-code-h{background:#11283A!important}
:host([data-theme="dark"]) .ac-code pre,:host([data-theme="dark"]) .ac-lab .snippet pre{color:#E4E7EC!important}
:host([data-theme="dark"]) .ac-code .c,:host([data-theme="dark"]) .ac-lab .snippet .c{color:#93A0AD!important}
:host([data-theme="dark"]) .ac-code .k,:host([data-theme="dark"]) .ac-lab .snippet .k{color:#9DB1FF!important}
:host([data-theme="dark"]) .ac-code .s,:host([data-theme="dark"]) .ac-lab .snippet .s{color:#4CC9B0!important}
:host([data-theme="dark"]) .ac-code .f{color:#E2A24A!important}
:host([data-theme="dark"]) .ac-code .n{color:#F08A8F!important}
/* long metric identifiers must wrap on phones */
.mx-formula,.mx-formula b{white-space:normal!important; overflow-wrap:anywhere; word-break:break-word; max-width:100%}

/* ======================================================= platform map + layer lessons == */
.pm-flow{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:26px 0 0; padding:0}
.pm-flow li{position:relative; font-size:13px; font-weight:600; padding:7px 14px 7px 12px; background:var(--accent-wash); color:var(--accent-ink,#1238D6);
  border:1px solid var(--accent-line,#C9D4FF); border-radius:2px}
.pm-flow li:not(:last-child)::after{content:"\2192"; margin-left:10px; color:var(--accent)}
.pm-overview{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px}
.pm-stage{border:1px solid var(--line); border-top:3px solid var(--h); border-radius:4px; background:var(--bg); padding:12px; display:flex; flex-direction:column; gap:6px}
.pm-sl{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--h); margin-bottom:4px}
.pm-stage a{display:flex; gap:8px; align-items:baseline; font-size:12.5px; line-height:1.3; color:var(--fg); text-decoration:none; padding:6px 7px; border-radius:2px; background:var(--paper)}
.pm-stage a b{flex:none; min-width:20px; font-size:11px; color:var(--h)}
.pm-stage a:hover{background:var(--accent-wash); color:var(--accent)}
.pm-loop{display:flex; align-items:center; gap:12px; margin-top:16px; font-size:13px; color:var(--fg-dim)}
.pm-loop span{flex:0 0 120px; height:2px; background:repeating-linear-gradient(90deg,var(--gv2,#A86400) 0 8px,transparent 8px 14px); background-size:28px 2px}
@media (prefers-reduced-motion:no-preference){ .pm-loop span{animation:hw-dash 1.2s linear infinite reverse} }
.pm-layers{display:grid; gap:10px}
.pm-layer{display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; border:1px solid var(--line); border-left:4px solid var(--h); border-radius:4px; background:var(--bg); padding:16px 18px; scroll-margin-top:120px}
.pm-ln span{display:block; font-family:var(--f-display); font-size:1.15rem; font-weight:500; color:var(--h)}
.pm-ln em{font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint)}
.pm-lb h3{margin:0 0 4px; font-family:var(--f-display); font-weight:500; font-size:1.2rem}
.pm-lb p{margin:0; font-size:14px; color:var(--fg-dim)}
.pm-lb details{margin-top:8px}
.pm-lb summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--accent); list-style:none}
.pm-lb summary::-webkit-details-marker{display:none}
.pm-lb summary::before{content:"+ "} .pm-lb details[open] summary::before{content:"\2212 "}
.pm-lb ul{margin:10px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px}
.pm-lb li{font-size:12.5px; padding:5px 9px; border:1px solid var(--line-soft); border-radius:2px; background:var(--paper); color:var(--fg)}
.pm-learn{display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; font-weight:600; color:var(--accent); text-decoration:none}
.pm-learn svg{width:14px; height:14px}
.pm-cross{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.pm-x{border:1px solid var(--line); border-radius:4px; padding:14px 16px; background:var(--bg)}
.pm-x h4{margin:0 0 8px; font-size:13px; font-weight:700; color:var(--fg)}
.pm-x ul{margin:0; padding-left:16px; font-size:12.5px; color:var(--fg-dim); display:grid; gap:3px}
.pm-ph{margin:26px 0 10px; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.pm-personas{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px}
.pm-personas li{border:1px solid var(--line); border-radius:4px; padding:10px 12px; background:var(--paper)}
.pm-personas b{display:block; font-size:13px} .pm-personas span{font-size:12px; color:var(--fg-dim)}
@media (max-width:1000px){ .pm-overview{grid-template-columns:repeat(3,minmax(0,1fr))} .pm-personas{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .pm-overview{grid-template-columns:1fr 1fr} .pm-layer{grid-template-columns:1fr; gap:6px} .pm-personas{grid-template-columns:1fr 1fr} }
.pl-hub a{border-left:3px solid var(--h)!important}
.pl-comps{columns:2; column-gap:28px} @media (max-width:700px){ .pl-comps{columns:1} }
.pl-nav{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px}
.pl-nav a{display:flex; flex-direction:column; gap:3px; padding:12px 14px; border:1px solid var(--line); border-radius:4px; text-decoration:none; color:var(--fg)}
.pl-nav a.nx{text-align:right} .pl-nav a span{font-size:12px; color:var(--accent); font-weight:600} .pl-nav a b{font-weight:500}
.pl-nav a:hover{border-color:var(--accent)}

/* ======================================== platform map, product layout (sources | layers | capabilities) == */
.pm2-hero h1{max-width:20ch}
.pm2-steps{display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 6px}
.pm2-steps span{font-size:12.5px; font-weight:600; letter-spacing:.04em; padding:6px 12px; border:1px solid var(--accent-line,#C9D4FF); background:var(--accent-wash); color:var(--accent-ink,#1238D6); border-radius:2px}
.pm2-steps span:not(:last-child)::after{content:"\2192"; margin-left:10px; color:var(--accent)}
.pm2-sec .wrap{max-width:1440px}
.pm2-grid{display:grid; grid-template-columns:minmax(220px,260px) minmax(0,1fr) minmax(220px,270px); gap:16px; align-items:start}
.pm2-side{display:grid; gap:12px; position:sticky; top:84px}
.pm2-panel{border:1px solid var(--line); border-radius:4px; background:var(--paper); padding:12px; display:flex; flex-direction:column; gap:5px}
.pm2-panel h4{margin:0 0 6px; font-family:var(--f-body); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.pm2-note{margin:0; font-size:12px; color:var(--fg-dim)}
.pm2-box{display:flex; gap:7px; align-items:flex-start; font-size:12px; line-height:1.35; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:2px; padding:6px 8px}
.pm2-box i{flex:none; width:6px; height:6px; margin-top:5px; border-radius:50%; background:var(--h,var(--accent))}
.pm2-box small{display:block; color:var(--fg-dim); font-size:11px}
.pm2-persona{flex-direction:row; flex-wrap:wrap}
.pm2-layers{display:grid; gap:8px}
.pm2-layer{display:grid; grid-template-columns:64px minmax(0,1fr); border:1px solid var(--line); border-radius:4px; background:var(--bg); overflow:hidden; scroll-margin-top:110px}
.pm2-ln{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; padding:14px 4px; background:var(--h); color:#fff}
.pm2-ln b{font-family:var(--f-display); font-size:1.6rem; font-weight:500; line-height:1}
.pm2-ln em{font-style:normal; font-size:9px; letter-spacing:.06em; text-transform:uppercase; text-align:center; opacity:.9; line-height:1.2}
.pm2-lbody{padding:12px 14px 14px}
.pm2-ltitle{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:9px}
.pm2-ltitle h3{margin:0; font-family:var(--f-display); font-weight:500; font-size:1.12rem}
.pm2-ltitle span{font-size:12.5px; color:var(--fg-dim)}
.pm2-learn{margin-left:auto; font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap}
.pm2-panel .pm2-learn{margin:6px 0 0}
.pm2-boxes{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px}
.pm2-layer .pm2-box{background:var(--paper)}
.pm2-arrow{text-align:center; font-size:12.5px; font-weight:600; color:var(--signal); padding:2px 0}
.pm2-arrow::before{content:"\2193  "}
.pm2-loop{margin-top:4px; padding:12px 14px; border:1px dashed var(--gv2,#A86400); border-radius:4px; font-size:13px; color:var(--fg)}
.pm2-loop span{color:var(--gv2,#A86400); font-size:1.1rem; margin-right:4px}
.pm2-foot{margin:22px 0 0; font-size:13px; color:var(--fg-dim); text-align:center}
.pm2-foot b{color:var(--accent); font-weight:600}
@media (max-width:1100px){
  .pm2-grid{grid-template-columns:1fr}
  .pm2-side{position:static; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
@media (max-width:600px){ .pm2-layer{grid-template-columns:44px minmax(0,1fr)} .pm2-ln em{display:none} .pm2-boxes{grid-template-columns:1fr} }
.pm2-layer{grid-template-columns:78px minmax(0,1fr)} .pm2-ln em{font-size:8.5px; padding:0 5px; overflow-wrap:anywhere} @media (max-width:600px){.pm2-layer{grid-template-columns:44px minmax(0,1fr)}}
.pm2-ln em{font-size:9.5px; overflow-wrap:normal}

/* ======================================== Academy layer lessons, v2 == */
.pl-prog{display:flex; flex-wrap:wrap; gap:4px; margin-top:22px}
.pl-prog a{min-width:30px; height:30px; padding:0 6px; display:grid; place-items:center; font-size:12px; font-weight:600; text-decoration:none;
  color:var(--h); border:1px solid var(--line); border-bottom:3px solid var(--h); border-radius:2px; background:var(--bg)}
.pl-prog a:hover{background:var(--accent-wash)}
.pl-prog a.on{background:var(--h); color:#fff; border-color:var(--h)}
.pl-progt{margin:8px 0 0; font-size:12.5px; color:var(--fg-dim)} .pl-progt a{color:var(--accent)}
.pl-sec .ac-h2{margin:4px 0 16px}
.pl-sec .ac-kicker{margin-top:44px}
.pl-intro{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; align-items:start}
.pl-intro .ac-kicker{margin-top:0}
.pl-why{border-left:4px solid var(--h); background:var(--paper); padding:16px 18px; border-radius:2px}
.pl-why span{display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--h); margin-bottom:6px}
.pl-why p{margin:0; font-size:15px; line-height:1.6; color:var(--fg)}
.pl-concepts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.pl-concept{position:relative; border:1px solid var(--line); border-radius:4px; background:var(--bg); padding:16px 18px 16px 58px}
.pl-cn{position:absolute; left:16px; top:16px; width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:var(--accent-wash); color:var(--accent); font-size:13px; font-weight:700}
.pl-concept h4{margin:2px 0 6px; font-family:var(--f-display); font-weight:500; font-size:1.08rem}
.pl-concept p{margin:0; font-size:14px; line-height:1.55; color:var(--fg-dim)}
.pl-boxes{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px}
.pl-boxes .pm2-box{font-size:13.5px; padding:10px 12px; background:var(--paper)}
.pl-boxes .pm2-box i{margin-top:6px}
.pl-two{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.pl-good{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pl-good li{position:relative; padding:10px 12px 10px 38px; border:1px solid var(--line-soft); border-radius:2px; background:rgba(19,121,91,.06); font-size:14px; line-height:1.5}
.pl-good li::before{content:""; position:absolute; left:12px; top:12px; width:16px; height:16px; border-radius:50%;
  background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat}
.pl-qs{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pl-qs li{display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; padding:10px 12px; border:1px solid var(--line); border-radius:2px; background:var(--bg)}
.pl-qn{width:24px; height:24px; display:grid; place-items:center; border-radius:2px; background:var(--h); color:#fff; font-size:12px; font-weight:700}
.pl-qs p{margin:0; font-size:14px; line-height:1.5; color:var(--fg)}
.pl-rel{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.pl-rel a{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--line); border-radius:4px; text-decoration:none; color:var(--fg); background:var(--bg)}
.pl-rel a:hover{border-color:var(--accent)}
.pl-rk{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.pl-rel b{font-family:var(--f-display); font-weight:500; font-size:1.05rem}
.pl-rgo{font-size:12.5px; font-weight:600; color:var(--accent)}
.pl-pn{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px}
.pl-pn a{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--line); border-radius:4px; text-decoration:none; color:var(--fg); background:var(--paper)}
.pl-pn a:hover{border-color:var(--accent)} .pl-pn a span{font-size:12px; font-weight:600; color:var(--accent)} .pl-pn a b{font-weight:500}
.pl-pn .pl-nx{text-align:right}
.pl-faq{margin-top:20px}
@media (max-width:900px){ .pl-intro,.pl-two{grid-template-columns:1fr} .pl-concepts{grid-template-columns:1fr} }
@media (max-width:560px){ .pl-pn{grid-template-columns:1fr} .pl-pn .pl-nx{text-align:left} }

/* ---- platform map fixes: side columns flow (they are taller than the viewport), quieter number bars,
        capabilities as compact chips, anchors land below the sticky header ---- */
.pm2-side{position:static!important}
.pm2-panel,.pm2-layer{scroll-margin-top:96px}
.pm2-ln{background:color-mix(in srgb,var(--h) 9%,var(--bg))!important; color:var(--h)!important; border-right:3px solid var(--h)}
.pm2-ln b{color:var(--h)} .pm2-ln em{opacity:1; color:var(--h)}
.pm2-boxes{display:flex!important; flex-wrap:wrap; gap:6px}
.pm2-layer .pm2-box{flex:0 1 auto; padding:5px 10px; font-size:12.5px; background:var(--paper); border-color:var(--line-soft)}
.pm2-layer .pm2-box i{margin-top:5px}
.pm2-panel .pm2-box{padding:5px 8px}
.pm2-ltitle{margin-bottom:10px}

/* ======================================== Governed agents (/governed-agents) == */
.ga-sec .ac-kicker:first-child{margin-top:0}
.ga-tiers{display:grid; gap:0}
.ga-tier{display:grid; grid-template-columns:minmax(180px,240px) minmax(0,1fr); border:1px solid var(--line); border-radius:4px; background:var(--bg)}
.ga-tier:first-child{border-color:var(--accent); box-shadow:inset 4px 0 0 var(--accent)}
.ga-th{padding:16px 18px; background:var(--paper); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px}
.ga-th b{font-family:var(--f-display); font-weight:500; font-size:1.12rem}
.ga-th span{font-size:12.5px; color:var(--fg-dim)}
.ga-tb{padding:14px 16px; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start}
.ga-tb .pm2-box{flex:0 1 auto; padding:5px 10px; font-size:13px; background:var(--paper)}
.ga-tb p{flex:1 0 100%; margin:6px 0 0; font-size:13.5px; line-height:1.55; color:var(--fg-dim)}
.ga-down{text-align:center; color:var(--accent); font-size:18px; line-height:1; padding:6px 0}
.ga-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.ga-steps li{display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; padding:14px 16px; border:1px solid var(--line); border-top:3px solid var(--h); border-radius:4px; background:var(--bg)}
.ga-sn{width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--h); color:#fff; font-weight:700; font-size:13px}
.ga-steps h4{margin:2px 0 6px; font-family:var(--f-display); font-weight:500; font-size:1.08rem}
.ga-steps p{margin:0 0 8px; font-size:14px; line-height:1.55; color:var(--fg-dim)}
.ga-steps a{font-size:12px; font-weight:600; color:var(--h); text-decoration:none}
.ga-steps a:hover{text-decoration:underline}
.ga-illus{margin:-6px 0 14px; font-size:12.5px; color:var(--fg-dim); font-style:italic}
.ga-ex{border:1px solid var(--line); border-radius:4px; background:var(--paper)}
.ga-q{padding:18px 20px; border-bottom:1px solid var(--line); background:var(--bg)}
.ga-q span,.ga-row h4,.ga-ent span,.ga-agent span{display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.ga-q p{margin:6px 0 4px; font-family:var(--f-display); font-size:1.3rem; line-height:1.35}
.ga-q small{font-size:12.5px; color:var(--fg-dim)}
.ga-row{padding:16px 20px; border-bottom:1px solid var(--line)}
.ga-row:last-child{border-bottom:0}
.ga-row h4{margin:0 0 10px; font-family:var(--f-body)}
.ga-ents,.ga-agents{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px}
.ga-ent,.ga-agent{border:1px solid var(--line-soft); border-radius:2px; background:var(--bg); padding:10px 12px}
.ga-ent span,.ga-agent span{color:var(--fg-dim); margin-bottom:4px}
.ga-ent b{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
.ga-ent em{display:inline-block; font-style:normal; font-size:12.5px; margin:0 6px 4px 0; padding:2px 8px; border:1px solid var(--line); border-radius:2px; background:var(--paper)}
.ga-agent p{margin:0; font-size:13.5px; line-height:1.5}
.ga-note{margin:10px 0 0; font-size:13.5px; color:var(--fg-dim)}
.ga-row .ga-note:first-of-type{margin-top:0}
.ga-verdict{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0}
.ga-verdict b{font-family:var(--f-display); font-weight:500; font-size:1.15rem; margin-right:4px}
.ga-pill{font-size:12px; font-weight:600; padding:3px 10px; border-radius:2px; color:#9A3412; background:#FFF1E6; border:1px solid #F5C9A6}
.ga-reasons li{background:#FFF8F2}
.ga-reasons li::before{background-color:#C2410C}
.ga-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.ga-3 p{margin:0; font-size:14px; line-height:1.55}
.ga-conf{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; margin:16px 0 0}
.ga-conf div{border:1px solid var(--line); border-radius:4px; padding:12px 14px; background:var(--bg)}
.ga-conf dt{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:4px}
.ga-conf dd{margin:0; font-size:14px; line-height:1.45}
@media (max-width:900px){ .ga-steps,.ga-3{grid-template-columns:1fr} }
@media (max-width:640px){ .ga-tier{grid-template-columns:1fr} .ga-th{border-right:0; border-bottom:1px solid var(--line)} }
.ga-inds{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.ga-ind{display:flex; flex-direction:column; border:1px solid var(--line); border-top:4px solid var(--h); border-radius:4px; background:var(--bg)}
.ga-ind header{padding:16px 18px 12px; border-bottom:1px solid var(--line-soft)}
.ga-ind header span{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--h)}
.ga-ind h3{margin:6px 0 4px; font-family:var(--f-display); font-weight:500; font-size:1.12rem; line-height:1.35}
.ga-ind header small{font-size:12.5px; color:var(--fg-dim)}
.ga-ind dl{margin:0; padding:6px 18px; flex:1}
.ga-ind dl div{display:grid; grid-template-columns:78px minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px dashed var(--line-soft)}
.ga-ind dl div:last-child{border-bottom:0}
.ga-ind dt{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim); padding-top:2px}
.ga-ind dd{margin:0; font-size:13.5px; line-height:1.5}
.ga-ind dd ul{margin:0; padding-left:16px} .ga-ind dd li{margin:0 0 2px}
.ga-ind .ga-ag{list-style:none; padding:0} .ga-ag b{font-weight:600; color:var(--h)} .ga-ag b::after{content:" agent:"}
.ga-ind .ga-pill{margin-left:6px}
.ga-shows{margin:0; padding:12px 18px; background:color-mix(in srgb,var(--h) 7%,var(--paper)); border-top:1px solid var(--line-soft); font-size:13.5px; line-height:1.5; font-weight:500}
@media (max-width:900px){ .ga-inds{grid-template-columns:1fr} }
@media (max-width:480px){ .ga-ind dl div{grid-template-columns:1fr; gap:2px} }

/* ---- Governed AI by industry tutorials (/academy-ai-*) ---- */
.ga-ucs{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px; align-items:start}
.ga-uc{border-top-color:var(--h)}
.ga-uc header p{margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--fg-dim)}
.ga-ucq{padding:12px 18px; font-family:var(--f-display); font-size:1.02rem; line-height:1.4; background:var(--paper); border-bottom:1px solid var(--line-soft)}
.ga-ucq small{display:block; margin-top:4px; font-family:var(--f-body); font-size:12px; color:var(--fg-dim)}
.ga-data{display:flex; flex-wrap:wrap; gap:4px} .ga-data .pm2-box{padding:3px 8px; font-size:12px; background:var(--paper)}
.ga-h3{margin:0 0 12px; font-family:var(--f-body); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim)}
.ga-ents2{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ga-sys{grid-template-columns:1fr; margin:0}
.ga-shift li{background:color-mix(in srgb,var(--h) 6%,var(--bg))} .ga-shift li::before{background-color:var(--h)}
.ga-roll{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ga-pits{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ga-pits li{padding:10px 12px 10px 14px; border:1px solid var(--line); border-left:3px solid #C2410C; border-radius:2px; background:var(--bg); font-size:14px; line-height:1.5}
.ga-pits b{font-weight:600}
.ga-hub{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px}
.ga-hcard{display:flex; flex-direction:column; gap:8px; padding:18px 20px; border:1px solid var(--line); border-top:4px solid var(--h); border-radius:4px; background:var(--bg); color:var(--fg); text-decoration:none}
.ga-hcard:hover{border-color:var(--accent); border-top-color:var(--h)}
.ga-hcard .n{font-size:12px; font-weight:700; color:var(--h)}
.ga-hcard b{font-family:var(--f-display); font-weight:500; font-size:1.3rem}
.ga-hcard .t{font-size:13.5px; line-height:1.5; color:var(--fg-dim)}
.ga-hcard ul{margin:0; padding-left:16px; font-size:13.5px; line-height:1.55; flex:1}
.ga-more{margin:16px 0 0}

/* Data Academy menu: Sales Training is its own highlighted category */
.nav .links .sub-col.sub-hl{background:var(--accent-wash,rgba(45,38,214,.05));border-radius:12px;padding:10px 12px 8px;margin:-10px -12px 0}
.nav .links .sub-col.sub-hl .sub-lbl{color:var(--accent)}

/* Seven top-level menus (Academies added 2026-10-02): tighten spacing between the
   desktop breakpoint and 1240px so the bar never overflows at small laptop widths. */
@media (min-width:1001px) and (max-width:1240px){
  .nav{gap:12px}
  .nav .links{gap:9px;margin-left:0}
  .nav .links .ntop{letter-spacing:0;font-size:13px}
  .nav .right{gap:6px}
}


/* "ask about this" band injected on learning pages by enhance.js */
.cp-askband{border-top:1px solid var(--line);background:var(--paper)}
.cp-askband .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding-top:26px;padding-bottom:26px}
.cp-askband p{margin:0;font-family:var(--f-body);font-size:.9375rem;color:var(--fg-dim);flex:1 1 320px}
.cp-askband p b{color:var(--fg);font-family:var(--f-display);font-weight:600;font-size:1.05rem;display:block}
.cp-askband .acts{display:flex;flex-wrap:wrap;gap:10px}

/* ---- styles/industry.css ---- */
/* ============================================================
   Industry pages — the four-layer framework applied per industry:
   Enterprise 360 (KPIs) -> Knowledge Graph (taxonomy) ->
   Copilot (questions) -> Agent Factory (agents). Reuses the
   homepage .layer / .tower / .kpi / .agents classes and adds the
   industry-specific taxonomy, copilot, pain->solution and proof.
   ============================================================ */

/* ---------- section that holds the four layers ---------- */
.iq-layers{border-top:1px solid var(--line)}
.iq-flow{max-width:60ch;margin:0 0 8px}

/* ---------- pain -> solution cards ---------- */
.iq-pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){ .iq-pains{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .iq-pains{grid-template-columns:minmax(0,1fr)} }
.iq-pain{background:var(--bg);padding:24px 22px;display:flex;flex-direction:column;gap:12px;position:relative}
.iq-pain::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--h);opacity:.9}
.iq-pain .pn-tag{font-family:var(--f-body);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--h)}
.iq-pain blockquote{margin:0;font-family:var(--f-display);font-weight:500;font-style:italic;font-size:1rem;line-height:1.45;color:var(--fg)}
.iq-pain .pn-sol{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft);font-family:var(--f-body);font-size:.9rem;line-height:1.5;color:var(--fg-dim)}
.iq-pain .pn-sol b{display:inline-flex;align-items:center;gap:6px;color:var(--signal);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-right:6px}

/* ---------- data sources we unify ---------- */
.iq-sources{display:flex;flex-wrap:wrap;gap:9px}
.iq-src{font-family:var(--f-body);font-size:13px;font-weight:600;padding:9px 15px;border-radius:4px;background:var(--paper);
  border:1px solid var(--line);color:var(--fg-dim)}
.iq-src b{color:var(--fg)}

/* ---------- taxonomy (knowledge graph, static) ---------- */
.iq-tax{border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow)}
.iq-tax-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line)}
@media (max-width:1000px){ .iq-tax-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:680px){ .iq-tax-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:440px){ .iq-tax-grid{grid-template-columns:minmax(0,1fr)} }
.iq-tax-grp{background:var(--bg);padding:18px 16px}
.iq-tax-grp .g{display:flex;align-items:center;gap:7px;font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--h);margin-bottom:12px}
.iq-tax-grp .g::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--h);flex:none}
.iq-tax-grp .chips{display:flex;flex-direction:column;gap:7px}
.iq-tax-grp .chips i{font-style:normal;font-family:var(--f-body);font-size:13px;color:var(--fg);padding:6px 10px;border-radius:4px;
  background:var(--paper);border:1px solid var(--line-soft)}
.iq-trace{display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-top:1px solid var(--line);background:var(--paper)}
.iq-trace svg{flex:none;width:18px;height:18px;color:var(--accent);margin-top:1px}
.iq-trace p{font-family:var(--f-body);font-size:14px;line-height:1.55;color:var(--fg);margin:0}
.iq-trace b{font-family:var(--f-display);color:var(--accent-ink)}

/* ---------- copilot card ---------- */
.iq-copilot{border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow);overflow:hidden}
.cop-bar{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);background:var(--paper);flex-wrap:wrap}
.cop-t{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--fg)}
.cop-t svg{width:17px;height:17px;color:var(--accent)}
.cop-sub{font-size:13px;color:var(--fg-dim)}
.cop-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--signal)}
.cop-live i{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:pulse 2s ease-in-out infinite}
.cop-body{padding:22px 20px}
.cop-msg{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}
.cop-ai{flex:none;width:34px;height:34px;border-radius:4px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);font-family:var(--f-display);font-weight:700;font-size:12px}
.cop-msg p{font-family:var(--f-body);font-size:14.5px;line-height:1.55;color:var(--fg);margin:0}
.cop-qs{display:flex;flex-direction:column;gap:9px}
.cop-q{display:flex;align-items:center;gap:11px;text-align:left;width:100%;font-family:var(--f-body);font-size:14px;color:var(--fg);
  padding:13px 15px;border:1px solid var(--line);border-radius:4px;background:var(--bg);cursor:pointer;transition:border-color .15s,background .15s}
.cop-q:hover{border-color:var(--accent);background:var(--accent-wash)}
.cop-q svg{flex:none;width:15px;height:15px;color:var(--accent)}
.cop-q .ph{margin-left:auto;font-size:11px;color:var(--fg-faint);white-space:nowrap}

/* ---------- agent cards (extends homepage .agents/.agent) ---------- */
.iq-agents{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:820px){ .iq-agents{grid-template-columns:1fr} }
.iq-agent{background:var(--bg);padding:22px;display:flex;flex-direction:column;gap:11px}
.iq-agent .ag-top{display:flex;align-items:center;gap:10px}
.iq-agent .ag-dot{width:9px;height:9px;border-radius:50%;background:var(--h,var(--signal));flex:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--h,var(--signal)) 16%,transparent)}
.iq-agent h4{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin:0;color:var(--fg)}
.iq-agent .ag-desc{font-family:var(--f-body);font-size:13.5px;line-height:1.5;color:var(--fg-dim);margin:0}
.iq-agent .ag-row{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline}
.iq-agent .ag-k{font-family:var(--f-body);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-faint)}
.iq-agent .ag-row span:last-child{font-family:var(--f-body);font-size:13px;line-height:1.45;color:var(--fg)}
.iq-agent .ag-protect{display:flex;gap:9px;align-items:flex-start;margin-top:2px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-family:var(--f-body);font-size:13.5px;font-weight:600;line-height:1.45;color:var(--signal)}
.iq-agent .ag-protect svg{flex:none;width:15px;height:15px;margin-top:2px}
.iq-agent .ag-run{margin-top:auto;align-self:flex-start;font-family:var(--f-body);font-size:13px;font-weight:600;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:4px;padding:8px 15px;background:var(--accent-wash);cursor:pointer}

/* ---------- outcomes proof band ---------- */
.iq-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:820px){ .iq-proof{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .iq-proof{grid-template-columns:minmax(0,1fr)} }
.iq-pstat{background:var(--bg);padding:26px 22px;position:relative}
.iq-pstat::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--h,var(--signal))}
.iq-pstat b{display:block;font-family:var(--f-display);font-weight:700;font-size:2rem;line-height:1;letter-spacing:-.04em;color:var(--h,var(--signal));font-variant-numeric:tabular-nums}
.iq-pstat span{display:block;margin-top:10px;font-family:var(--f-body);font-size:12.5px;line-height:1.45;color:var(--fg-dim)}

/* pillar widget takes full width under the layer head */
.layer-widget.iq-w{padding-left:100px}
@media (max-width:900px){ .layer-widget.iq-w{padding-left:0} }

/* ---------- three kinds of data -> one graph (IIoT / structured / unstructured) ---------- */
.iq-data3{border:1px solid var(--line);background:var(--bg);box-shadow:var(--shadow)}
.iq-d3-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
@media (max-width:780px){ .iq-d3-grid{grid-template-columns:minmax(0,1fr)} }
.d3-col{background:var(--bg);padding:22px 20px}
.d3-h{display:flex;align-items:center;gap:9px;font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--h)}
.d3-h svg{flex:none;width:19px;height:19px}
.d3-sub{font-family:var(--f-body);font-size:12px;color:var(--fg-faint);margin:5px 0 14px}
.d3-chips{display:flex;flex-wrap:wrap;gap:7px}
.d3-chips i{font-style:normal;font-family:var(--f-body);font-size:12.5px;font-weight:500;color:var(--fg);padding:6px 11px;border-radius:4px;
  background:color-mix(in srgb,var(--h) 8%,var(--bg));border:1px solid color-mix(in srgb,var(--h) 30%,transparent)}
.iq-d3-out{display:flex;gap:11px;align-items:center;justify-content:center;padding:16px 20px;border-top:1px solid var(--line);background:var(--paper);flex-wrap:wrap;text-align:center}
.iq-d3-out svg{flex:none;width:20px;height:20px;color:var(--accent)}
.iq-d3-out b{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--fg)}
.iq-d3-out span{font-family:var(--f-body);font-size:13px;color:var(--fg-dim)}

/* ============================================================
   INTERACTIVE PILLARS — graph, copilot answer, agent log
   (control-tower trend/rootcause/AI reuse main.css classes)
   ============================================================ */
/* interactive knowledge graph */
.iq-graph-wrap{position:relative}
.iq-graph{padding:10px 10px 0}
.iq-graph-svg{display:block;width:100%;height:auto;overflow:visible}
.iq-edge{stroke:var(--line-strong);stroke-width:1.4;opacity:.45;transition:opacity .15s,stroke .15s,stroke-width .15s}
.iq-edge.on{stroke:var(--accent);opacity:.95;stroke-width:2}
.iq-edge.dim{opacity:.1}
.iq-node{cursor:pointer}
.iq-node circle{transition:opacity .15s}
.iq-node.on circle{r:9}
.iq-node.dim{opacity:.35}
.iq-node:focus{outline:none}
.iq-node:focus circle{stroke:var(--accent);stroke-width:3}
.iq-node-t{font-family:var(--f-body);font-size:11px;font-weight:500;fill:var(--fg);pointer-events:none}
.iq-node.dim .iq-node-t{opacity:.4}
.iq-graph-inspect{display:flex;gap:12px;align-items:center;padding:15px 20px;border-top:1px solid var(--line);background:var(--paper);min-height:58px}
.gi-dot{width:12px;height:12px;border-radius:50%;flex:none}
.gi-n{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--fg)}
.gi-m{font-family:var(--f-body);font-size:12.5px;line-height:1.4;color:var(--fg-dim)}
.gi-m b{color:var(--fg)}

/* copilot answer */
.cop-answer{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:18px}
.cop-a{display:flex;gap:12px;align-items:flex-start}
.cop-a-t{font-family:var(--f-body);font-size:14.5px;line-height:1.6;color:var(--fg);margin:0;min-height:1.4em}
.cop-a-src{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:13px}
.cop-src-k{font-family:var(--f-body);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-faint)}
.cop-src{font-family:var(--f-body);font-size:11.5px;font-weight:600;color:var(--accent);background:var(--accent-wash);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:4px;padding:4px 9px}
.cop-q.active{border-color:var(--accent);background:var(--accent-wash)}

/* agent execution log */
.iq-agent.live .ag-dot{animation:pulse 1s ease-in-out infinite}
.iq-agent.done .ag-dot{background:var(--signal)}
.ag-log{margin-top:6px;border-top:1px solid var(--line-soft);padding-top:12px;display:flex;flex-direction:column;gap:9px}
.ag-log .ls{display:grid;grid-template-columns:52px 1fr;gap:11px;align-items:baseline;opacity:0;transform:translateY(4px);
  transition:opacity .3s,transform .3s;font-family:var(--f-body);font-size:12.5px;line-height:1.45}
.ag-log .ls.in{opacity:1;transform:none}
.ag-log .ls-k{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.ag-log .ls-v{color:var(--fg)}

/* ---------- canvas graph sizing (mirror index #ont) ---------- */
#iqCanvas{width:100%;height:clamp(380px,44vw,500px);display:block;cursor:grab;touch-action:none}
#iqCanvas:active{cursor:grabbing}
.iq-gwrap .iq-trace{border-top:1px solid var(--line)}

/* ---------- ChatGPT-style copilot ---------- */
.cop-chat{padding:20px 20px 6px;max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.cmsg{display:flex;gap:12px;align-items:flex-start}
.cmsg.me{flex-direction:row-reverse}
.cav{flex:none;width:32px;height:32px;border-radius:4px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:11px}
.cav.ai{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.cav.me{background:var(--paper-2);color:var(--fg-dim)}
.cbub{font-family:var(--f-body);font-size:14.5px;line-height:1.6;color:var(--fg);background:var(--paper);border:1px solid var(--line-soft);border-radius:4px;padding:12px 15px;max-width:82%}
.cmsg.me .cbub{background:var(--accent);color:#fff;border-color:transparent}
.ctext{white-space:pre-wrap}
.cop-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 20px 14px}
.cchip{font-family:var(--f-body);font-size:12.5px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:100px;padding:8px 14px;cursor:pointer;transition:border-color .15s,background .15s,color .15s;text-align:left}
.cchip:hover{border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}
.cop-compose{display:flex;align-items:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--bg)}
.cc-icon{flex:none;width:38px;height:38px;border-radius:4px;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg);color:var(--fg-dim);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.cc-icon:hover{border-color:var(--accent);color:var(--accent)}
.cc-icon svg{width:18px;height:18px}
.cc-icon.live{background:var(--critical);border-color:var(--critical);color:#fff;animation:pulse 1.1s ease-in-out infinite}
.cc-field{flex:1;display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:4px;background:var(--paper);padding:9px 13px}
.cc-field:focus-within{border-color:var(--accent)}
.cc-field textarea{width:100%;border:0;background:none;resize:none;font-family:var(--f-body);font-size:14.5px;line-height:1.5;color:var(--fg);outline:none;max-height:120px;min-height:22px}
.cc-attach{display:flex;flex-wrap:wrap;gap:6px}
.cc-attach:empty{display:none}
.cfile{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-body);font-size:11.5px;font-weight:600;color:var(--accent);background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:4px;padding:4px 8px}
.cfile svg{width:12px;height:12px}
.cfile-x{border:0;background:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.cc-send{flex:none;width:38px;height:38px;border-radius:4px;display:grid;place-items:center;border:0;background:var(--accent);color:#fff;cursor:pointer;transition:background .15s}
.cc-send:hover{background:var(--accent-ink)}
.cc-send svg{width:18px;height:18px}
.cop-caps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:11px 20px;border-top:1px solid var(--line-soft);background:var(--paper);font-family:var(--f-body);font-size:11.5px;color:var(--fg-faint)}
.cop-caps svg{width:14px;height:14px;color:var(--signal)}
.cop-caps span::before{content:"\00b7";margin:0 6px 0 2px;color:var(--line-strong)}

/* read-aloud (TTS) button on AI answers */
.cbub .ctext{display:block}
.cspeak{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;border:1px solid var(--line);
  background:var(--bg);color:var(--fg-dim);cursor:pointer;margin-top:10px;padding:0;transition:border-color .15s,color .15s,background .15s}
.cspeak:hover{border-color:var(--accent);color:var(--accent)}
.cspeak.live{background:var(--accent);border-color:var(--accent);color:#fff;animation:pulse 1.1s ease-in-out infinite}
.cspeak svg{width:15px;height:15px}

/* ---------- top-of-page architecture ribbon: systems -> SCIKIQ -> outcomes ---------- */
.iq-arch-wrap{margin-top:6px}
.iq-arch{position:relative;display:grid;grid-template-columns:1fr auto 1.32fr auto 1fr;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:4px;padding:26px 28px;overflow:hidden;
  background:linear-gradient(122deg,color-mix(in srgb,var(--accent) 5%,var(--bg)),var(--bg) 46%,color-mix(in srgb,var(--gv7) 5%,var(--bg)))}
.iq-arch-k{display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--f-display);font-weight:700;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 14px}
.iq-arch-k svg{width:14px;height:14px}
.iq-arch-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.iq-arch-chips i{display:inline-flex;align-items:center;gap:7px;font-style:normal;font-family:var(--f-body);font-size:12px;
  padding:6px 11px;border-radius:4px;background:var(--paper);border:1px solid var(--line);color:var(--fg-dim);transition:transform .15s,border-color .15s,color .15s}
.iq-arch-chips i:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--fg)}
.iq-arch-chips i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.55;flex:none}
.iq-arch-out i{background:var(--bg);border-color:color-mix(in srgb,var(--signal) 34%,var(--line));color:var(--fg);font-weight:500}
.iq-arch-out i::before{background:var(--signal);opacity:1}
/* flowing connectors */
.iq-arch-flow{position:relative;display:flex;align-items:center;justify-content:center;min-width:46px;color:var(--accent)}
.iq-arch-flow::before{content:"";position:absolute;left:2px;right:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 70%,transparent),transparent)}
.iq-arch-flow svg{position:relative;width:24px;height:24px;padding:3px;border-radius:50%;background:var(--bg);
  border:1.5px solid color-mix(in srgb,var(--accent) 45%,var(--line))}
/* the SCIKIQ core */
.iq-arch-core{position:relative;border:1.5px solid color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:4px;
  background:color-mix(in srgb,var(--accent) 9%,var(--bg));padding:22px 20px;text-align:center;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 10px 34px -16px color-mix(in srgb,var(--accent) 60%,transparent)}
.iq-arch-core::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:radial-gradient(72% 130% at 50% 0,color-mix(in srgb,var(--accent) 13%,transparent),transparent)}
.iq-arch-core-top{position:relative;display:flex;align-items:center;justify-content:center;gap:8px}
.iq-arch-core-top b{font-family:var(--f-display);font-weight:800;font-size:1.25rem;letter-spacing:.03em;color:var(--fg)}
.iq-arch-core-top svg{width:19px;height:19px;color:var(--accent)}
.iq-arch-core > span{position:relative;font-family:var(--f-body);font-size:12px;color:var(--fg-dim);margin-top:4px}
.iq-arch-layers{position:relative;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}
.iq-arch-layers em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-family:var(--f-body);font-size:11px;font-weight:700;
  padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--h) 15%,var(--bg));
  border:1px solid color-mix(in srgb,var(--h) 38%,transparent);color:var(--h)}
.iq-arch-layers em svg{width:12px;height:12px}
@media (max-width:860px){ .iq-arch{grid-template-columns:1fr;gap:16px;padding:22px} .iq-arch-flow{min-width:0;height:34px}
  .iq-arch-flow::before{left:50%;right:auto;top:2px;bottom:2px;width:2px;height:auto} .iq-arch-flow svg{transform:rotate(90deg)} }
@media (prefers-reduced-motion:no-preference){
  .iq-arch-flow svg{animation:iqflow 2.4s ease-in-out infinite}
  @keyframes iqflow{0%,100%{transform:translateX(-3px);opacity:.75}50%{transform:translateX(3px);opacity:1}}
  @media (max-width:860px){ @keyframes iqflow{0%,100%{transform:rotate(90deg) translateX(-3px);opacity:.75}50%{transform:rotate(90deg) translateX(3px);opacity:1}} }
}

/* ---------- Academy cross-link -------------------------------
   Sits between the outcome section and the CTA on industry pages
   that have a matching SCDAI specialisation. Only ever one or two
   cards, so a simple auto-fit grid is enough.                    */
.iq-acad{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.iq-acad-c{display:grid;gap:7px;align-content:start;padding:22px;border:1px solid var(--line);
  border-radius:4px;background:var(--bg);text-decoration:none;color:inherit;transition:.15s}
.iq-acad-c:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.iq-acad-c b{font-family:var(--f-display);font-size:var(--step-1);line-height:1.25;letter-spacing:-.01em}
.iq-acad-c .spec{font-family:var(--f-mono);font-size:11px;line-height:1.6;color:var(--fg-faint)}
.iq-acad-c .go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-size:var(--step--1);font-weight:600;color:var(--accent)}
.iq-acad-c .go svg{width:16px;height:16px}
.iq-acad-all{margin:18px 0 0}
.iq-acad-all a{display:inline-flex;align-items:center;gap:8px;font-size:var(--step--1);
  font-weight:600;color:var(--fg-dim);text-decoration:none}
.iq-acad-all a:hover{color:var(--accent)}
.iq-acad-all svg{width:16px;height:16px}

/* ---- Industry solutions (generate_industries.solutions) ------------------
   The matching scikiq.org/solutions sector page, embedded whole. The frame is
   full-bleed because that page brings its own containers; its height is set
   from the page's own messages, with a scrollable fallback until then.     */
.iq-sol{padding-bottom:0}
.iq-sol-note{font-size:var(--step--1);line-height:1.6;color:var(--fg-dim);margin:-6px 0 22px;max-width:70ch}
.iq-sol-note a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
.iq-sol-note svg{width:15px;height:15px}
.iq-sol-frame{display:block;width:100%;height:1200px;border:0;border-top:1px solid var(--line);background:#fff}

/* ---- Sector menu (generate_industries.sector_nav) -------------------------
   The matching scikiq.org/solutions sector's own pages, as a sticky second bar
   under the 64px SCIKIQ header. Dropdowns open on hover, focus or click.    */
.snav{position:sticky;top:64px;z-index:75;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px) saturate(1.6);border-bottom:1px solid var(--line-soft)}
.snav-in{display:flex;align-items:center;gap:26px;min-height:46px}
.snav-brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--fg);font-family:var(--f-body);
  font-weight:600;font-size:14px;white-space:nowrap}
.snav-brand span{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.snav-items{display:flex;align-items:center;gap:22px;margin-left:auto}
.snav-top{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--fg-dim);text-decoration:none;background:none;
  border:0;padding:12px 0;line-height:20px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.snav-top:hover,.snav-dd:hover>.snav-top,.snav-dd:focus-within>.snav-top,.snav-dd.open>.snav-top{color:var(--fg)}
.snav .chev{width:11px;height:11px;transition:transform .2s}
.snav-dd{position:relative}
.snav-dd:hover .chev,.snav-dd:focus-within .chev,.snav-dd.open .chev{transform:rotate(180deg)}
.snav-menu{position:absolute;top:100%;left:-18px;min-width:280px;max-width:min(640px,calc(100vw - 32px));background:var(--bg);
  border:1px solid var(--line);box-shadow:0 14px 44px rgba(0,0,0,.14);padding:16px;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;max-height:calc(100vh - 130px);overflow:auto}
.snav-dd.right .snav-menu{left:auto;right:-18px}
.snav-dd:hover .snav-menu,.snav-dd:focus-within .snav-menu,.snav-dd.open .snav-menu{opacity:1;visibility:visible;transform:none}
.snav-menu a{display:block;padding:7px 9px;border-radius:2px;text-decoration:none;color:var(--fg)}
.snav-menu a:hover{background:var(--paper)}
.snav-menu a b{display:block;font-size:13.5px;font-weight:600}
.snav-menu a:hover b{color:var(--accent)}
.snav-menu a em{display:block;margin-top:2px;font-style:normal;font-size:12px;line-height:1.45;color:var(--fg-dim)}
.snav-head,.snav-group{display:block;padding:12px 9px 6px;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-faint)}
.snav-group{color:var(--accent);padding-top:10px}
.snav-lead>:first-child,.snav-col>:first-child{padding-top:2px}
.snav-lead.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:8px;min-width:400px}
.snav-lead.grid .snav-head,.snav-lead.grid a:has(em){grid-column:1/-1}
.snav-cols{display:grid;gap:0 18px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line-soft)}
.snav-cols.n2{grid-template-columns:1fr 1fr;min-width:520px}
.snav-m{display:none}
@media (max-width:1000px){
  .snav-items{display:none}
  .snav-in{gap:12px}
  .snav-m{display:block;margin-left:auto}
  .snav-m>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
    color:var(--accent);padding:12px 0}
  .snav-m>summary::-webkit-details-marker{display:none}
  .snav-m[open]>summary .chev{transform:rotate(180deg)}
  .snav-m-body{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);
    padding:6px var(--gut) 18px;max-height:calc(100vh - 120px);overflow:auto}
  .snav-m-body>a,.snav-m-body summary{display:block;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:14px;
    font-weight:600;color:var(--fg);text-decoration:none;cursor:pointer}
  .snav-m-body details>div{padding:4px 0 10px 12px}
  .snav-m-body details a{display:block;padding:7px 0;text-decoration:none;color:var(--fg-dim);font-size:13.5px}
  .snav-m-body details a em{display:none}
  .snav-m-body details a b{font-weight:500}
  .snav-m-body .snav-head,.snav-m-body .snav-group{padding:10px 0 4px}
}

/* ---- one hero: text left, the sector's animated diagram right ------------- */
.hb-hero .wrap:has(.iq-hero-vis){display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:clamp(28px,4vw,64px); align-items:start}
.hb-hero .wrap:has(.iq-hero-vis) > *{grid-column:1}
.hb-hero .wrap:has(.iq-hero-vis) > .iq-hero-vis{grid-column:2; grid-row:1 / span 8; align-self:center}
.iq-vis-frame{height:340px; border:0; background:transparent}
@media (max-width:900px){
  .hb-hero .wrap:has(.iq-hero-vis){display:block}
  .iq-hero-vis{margin-top:28px}
}
/* proof continues "The outcome": no heading, little gap */
.iq-sol-cont{padding-top:0; border-top:0}

:host{display:block;font-family:var(--f-body);color:var(--fg);font-size:16px;line-height:1.6;text-align:left;-webkit-font-smoothing:antialiased}
.tgl{display:none!important}
:host{overflow:visible!important}