/* GENERATED by scripts/copy-render-kit-runtime.mjs — do not edit by hand.
 * The public site sheet: the canonical CMS-D-054 kit, then the correction
 * layer that must outrank it, then forms, then slider, then the V6 delta. Order is load-bearing;
 * see the note in that script. Each part is also served standalone for the
 * admin preview routes. */
/* Generated from the canonical CMS-D-054 stylesheet; only the remote font transport is replaced. */
@font-face{font-family:'Infoc Modern';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/infoc-modern-latin.woff2') format('woff2')}
@font-face{font-family:'Infoc Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/infoc-mono-latin.woff2') format('woff2')}
@font-face{font-family:'Infoc Mark';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/infoc-mark-latin.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/infoc-modern-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/infoc-mono-latin.woff2') format('woff2')}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/infoc-mark-latin.woff2') format('woff2')}
/* ---- absorbed from ioc-core.css (CMS-D-071) ---- */
/* ============================================================
   INFOC · Carbon-style design foundation
   Geist + 2x grid + INFOC interactive blue (#0001ff)
   Light theme (white / Gray 10). Shared across all directions.
   ============================================================ */


:root{
  /* Gray family (Carbon) */
  --ioc-white:#ffffff;
  --ioc-g10:#f4f4f4;
  --ioc-g20:#e0e0e0;
  --ioc-g30:#c6c6c6;
  --ioc-g40:#a8a8a8;
  --ioc-g50:#8d8d8d;
  --ioc-g60:#666666;
  --ioc-g70:#525252;
  --ioc-g80:#393939;
  --ioc-g90:#262626;
  --ioc-g100:#161616;

  /* Interactive — INFOC blue */
  --ioc-blue:#0001ff;--ioc-accent:#0001ff;--ioc-accent-hover:#0000c4;--ioc-accent-ink:#0001ff;
  /* CMS-D-095 ③: was #0e8a5f — 4.36:1 as text on white and 3.95:1 on the
     success tint, both AA failures. Green-70 reads 7.72:1 / 7.00:1. */
  --ioc-green:#0e6027;
  --ioc-blue-hover:#0000c4;
  --ioc-focus:#0001ff;

  /* Text */
  --ioc-text-primary:#161616;
  --ioc-text-secondary:#525252;
  --ioc-text-helper:#5c5c5c;
  --ioc-text-on-color:#ffffff;

  /* Lines */
  --ioc-border-subtle:#e0e0e0;
  --ioc-border-strong:#8d8d8d;

  /* Type */
  --ioc-sans:"Manrope", system-ui, -apple-system, sans-serif;
  --ioc-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Carbon spacing scale */
  --ioc-s1:2px;  --ioc-s2:4px;  --ioc-s3:8px;  --ioc-s4:12px; --ioc-s5:16px;
  --ioc-s6:24px; --ioc-s7:32px; --ioc-s8:40px; --ioc-s9:48px; --ioc-s10:64px;
  --ioc-s11:80px; --ioc-s12:96px; --ioc-s13:160px;

  /* Layout */
  --ioc-maxw:1584px;
  --ioc-gutter:32px;
  --ioc-container-prose:720px;
  --ioc-container-default:1200px;
  --ioc-container-wide:1440px;

  /* Elevation — subtle, engineered depth */
  --ioc-shadow-sm:0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  --ioc-shadow-md:0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --ioc-shadow-lg:0 12px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --ioc-shadow-card:0 14px 34px -20px rgba(15,17,60,.30);
  --ioc-shadow-pop:0 24px 48px -24px rgba(10,12,60,.22);

  /* Motion */
  --ioc-dur-instant:100ms; --ioc-dur-fast:200ms; --ioc-dur-mid:250ms;
  --ioc-dur-slow:300ms; --ioc-dur-reveal:600ms;
  --ioc-ease:cubic-bezier(.2,.7,.3,1);
  --ioc-ease-out:cubic-bezier(.16,1,.3,1);
  --ioc-ease-in:cubic-bezier(.7,0,.84,0);
  --ioc-ease-inout:cubic-bezier(.65,0,.35,1);

  /* Z-index */
  --ioc-z-raised:10; --ioc-z-sticky:20; --ioc-z-dropdown:30; --ioc-z-tooltip:40;
  --ioc-z-overlay:50; --ioc-z-modal:60; --ioc-z-toast:70;
}

/* ---- P37 role layer (CMS-D-094/095) · literal-valued semantic roles ----
   Rules consume these instead of raw hex; the T16 gate ratchets the raw hex
   to zero across Wave T. Only LITERAL-valued roles may live at :root —
   an alias (a value containing var()) declared here substitutes on <html>
   and FREEZES at its code default, blind to the emitter's body.ioc-site
   overrides; aliases live in the body.ioc-site block below. Values with a
   deliberate delta from the literals they absorb (--ioc-success vs the
   #42be65 it replaces) are CMS-D-095 ③ decisions, applied at Wave T2b. */
:root{
  /* surfaces · light */
  --ioc-surface:#ffffff;
  --ioc-surface-subtle:#fbfbfb;
  --ioc-surface-cool:#f2f4f8;
  --ioc-surface-hover:#e8e8e8;
  --ioc-hover-wash:#f7faff;
  --ioc-selected-surface:#edf5ff;
  --ioc-selected-border:#c6d9ff;
  /* surfaces · inverse / brand */
  --ioc-surface-inverse-raised:#1c1c1c;
  --ioc-surface-brand:#001d6c;
  --ioc-surface-brand-deep:#001141;
  /* on-color text/border — the #fff split (CMS-D-094 ①) */
  /* T2b: the --blue-on-dark repair — four sites consumed a name declared
     NOWHERE (invalid at computed-value time; they rendered inherited
     colour) and now consume this declared role. Census-named. */
  --ioc-accent-on-inverse:#78a9ff;
  --ioc-border-on-color:#ffffff;
  /* Wave A: text on PRIMARY fills. Skin-derived by the emitter — dark's
     primary is Carbon blue-40, a light fill needing ink text (7.68:1),
     while white on it reads 2.3:1. Accent fills keep --ioc-text-on-color:
     family accents are AA-proven with white by the family spec. */
  --ioc-text-on-primary:#ffffff;
  --ioc-text-on-brand-soft:#e5e5ff;
  --ioc-text-on-brand-muted:#d0d0ff;
  --ioc-text-on-brand-deep:#d0e2ff;
  --ioc-accent-on-brand:#8c8cff;
  /* status */
  --ioc-danger:#da1e28;
  --ioc-danger-text:#a2191f;
  --ioc-danger-surface:#fff1f1;
  --ioc-danger-on-color:#ff8389;
  --ioc-success:#198038;
  --ioc-success-surface:#defbe6;
  /* family palette constants — code-owned; the [data-page-family] sources
     alias these at Wave T3 (a DIFFERENT name, so no var() self-reference) */
  --ioc-fam-academy:#6929c4;
  --ioc-fam-academy-hover:#55209c;
  --ioc-fam-talents:#1a7a52;
  --ioc-fam-talents-hover:#145f40;
  --ioc-fam-talents-ink:#146245;
  --ioc-fam-industries:#007d79;
  --ioc-fam-industries-ink:#005d5d;
  --ioc-fam-company:#4d5358;
  /* Wave C component roles — each bound to a tab field, each consumed
     below. The header surface keeps the kit's translucent-blur alpha; the
     emitter rebuilds it from a validated hex via color-mix. */
  --ioc-header-surface:rgba(255,255,255,.94);
  --ioc-header-active:#0001ff;
  --ioc-crumb:#5c5c5c;
  --ioc-crumb-current:#0001ff;
  /* residue constants (CMS-D-095 ⑤ — found, not named) */
  --ioc-magenta:#9f1853;
  --ioc-teal:#08bdba;
  --ioc-wash-pink:#fff1f7;
}
/* Aliased roles: substitution happens ON body, after the admin emitter's
   overrides cascade onto that same element, so a store change to the
   primitive flows through the role for every descendant. */
body.ioc-site{
  /* T2b freeze repair: at :root this substituted var(--ioc-blue) on <html>
     and froze — focus rings ignored the admin primary. Here it follows. */
  --ioc-shadow-focus:0 0 0 2px var(--ioc-surface,#ffffff), 0 0 0 5px var(--ioc-blue);
  --ioc-surface-sunken:var(--ioc-g10);
  --ioc-surface-inverse:var(--ioc-g100);
  --ioc-text-on-inverse-muted:var(--ioc-g30);
  /* Wave C: the footer follows the page surface (and therefore the skin)
     until its own field says otherwise. */
  --ioc-footer-surface:var(--ioc-surface);
}

body.ioc-site *{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* P36 / CMS-D-092 — the admin-governed tokens are CONSUMED here. Each carries
   the previous literal as its `var()` fallback, so a page rendered without the
   token block (anything outside the `[siteKey]` segment) is byte-identical to
   before. `--ioc-text-primary` was already a token and already inherited by
   headings, which is what makes item 6 reachable without an element-level
   heading colour rule that would break the inverse sections. */
body.ioc-site{
  /* CMS-D-093 — the `skin` field's OWN consumer. Without it the control would be
     stored, shown, and read by nothing (the CMS-D-081 dangling-store defect).
     This is what makes native controls, scrollbars and form widgets follow a
     dark site instead of staying stubbornly light against it. */
  color-scheme:var(--ioc-color-scheme,light);
  margin:0;
  font-family:var(--ioc-body-family,var(--ioc-sans));
  color:var(--ioc-text-primary);
  background:var(--ioc-white);
  font-size:var(--ioc-body-size,16px);
  line-height:var(--ioc-body-line-height,1.5);
  font-weight:var(--ioc-body-weight,400);
}
body.ioc-site a{color:inherit;text-decoration:none}
body.ioc-site img{max-width:100%;display:block}
body.ioc-site ::selection{background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
:focus-visible{outline:none;box-shadow:var(--ioc-shadow-focus)}

/* Skip link — first focusable element on every page */
.skip-link{position:absolute;left:16px;top:-48px;z-index:var(--ioc-z-toast);background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);padding:12px 20px;font-family:var(--ioc-sans);font-size:14px;font-weight:500;transition:top .15s var(--ioc-ease-out)}
.skip-link:focus-visible{top:16px;box-shadow:var(--ioc-shadow-focus)}

/* Metrics never shift layout while counting */
.statstrip .sn b,.a-stat .num,[data-countup],.tnum{font-variant-numeric:tabular-nums}

/* ---------- Type scale (Carbon productive/expressive) ---------- */
.eyebrow{
  font-family:var(--ioc-mono);
  font-size:12px;
  letter-spacing:.32px;
  text-transform:uppercase;
  color:var(--ioc-text-secondary);
  font-weight:400;
  margin:0;
}
.eyebrow .dot{color:var(--ioc-blue)}
/* P36 (CMS-D-092 phase) — `:where()` carries ZERO specificity, so this reads as
   the source's bare `h1,h2,h3,h4` (0-0-1) while keeping CMS-D-071 deviation #5's
   scoping intent. Written as `body.ioc-site h1` it scored 0-1-2 and silently
   outranked EVERY single-class block heading rule in this file; measured against
   the served design source, 8 of 41 headings on the home page rendered at 600
   instead of 700. The scope must not also be a priority. */
:where(body.ioc-site) h1,:where(body.ioc-site) h2,:where(body.ioc-site) h3,:where(body.ioc-site) h4{letter-spacing:-.01em;margin:0;line-height:1.12;font-family:var(--ioc-heading-family,inherit)}
/* Split per level so CMS-D-092's per-level weights have somewhere to land. The
   `600` fallbacks preserve the grouped rule this replaced, byte for byte, when
   no token block is present. Still 0-0-1: the scope must not be a priority. */
.display-xl{font-size:clamp(48px,6.6vw,104px);font-weight:600;line-height:.98;letter-spacing:-.03em}
.display-l{font-size:clamp(40px,4.6vw,72px);font-weight:600;line-height:1.04;letter-spacing:-.028em}
.display-m{font-size:clamp(30px,3.2vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.015em}
.heading{font-size:clamp(22px,2vw,30px);font-weight:600;line-height:1.18;letter-spacing:-.01em}
.body-l{font-size:clamp(18px,1.4vw,21px);line-height:1.55;color:var(--ioc-text-secondary);font-weight:400;letter-spacing:-.003em;text-wrap:pretty}
.display-xl,.display-l,.display-m{text-wrap:balance}
.body{font-size:16px;line-height:1.55;color:var(--ioc-text-secondary)}
.body-s{font-size:14px;line-height:1.5;color:var(--ioc-text-secondary)}
.fw300{font-weight:300}
.thin-accent{color:var(--ioc-blue)}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--ioc-maxw);margin:0 auto;padding:0 var(--ioc-gutter)}
.grid16{display:grid;grid-template-columns:repeat(16,1fr);gap:0}
.section{padding-top:112px;padding-bottom:112px}
.section-xl{padding-top:140px;padding-bottom:140px}
.rule{height:1px;background:var(--ioc-border-subtle);border:0;margin:0}
.rule-strong{height:1px;background:var(--ioc-border-strong)}

/* ---------- Buttons (Carbon) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;
  gap:var(--ioc-s10);
  font-family:var(--ioc-sans);font-size:15px;font-weight:500;line-height:1.2;
  padding:16px 20px;min-width:200px;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:background .16s var(--ioc-ease), color .16s var(--ioc-ease), border-color .16s var(--ioc-ease), box-shadow .16s var(--ioc-ease);
  text-align:left;
}
.btn svg{width:18px;height:18px;flex:none;transition:transform .2s var(--ioc-ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.btn-primary:hover{background:var(--ioc-accent-hover);box-shadow:var(--ioc-shadow-card)}
.btn-primary:active{background:var(--ioc-accent-hover)}
.btn-secondary{background:var(--ioc-g80);color:var(--ioc-text-on-color,#fff)}
.btn-secondary:hover{background:var(--ioc-g70)}
.btn-tertiary{background:transparent;color:var(--ioc-accent);border-color:var(--ioc-accent)}
.btn-tertiary:hover{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.btn-ghost{background:transparent;color:var(--ioc-accent);min-width:auto;padding:8px 0;gap:var(--ioc-s5)}
.btn-ghost:hover{color:var(--ioc-accent-hover)}
.btn-on-dark{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.btn-on-dark.is-ghost{background:transparent;border-color:var(--ioc-g70,#525252);color:var(--ioc-text-on-color,#fff);min-width:200px}
.btn-on-dark.is-ghost:hover{background:var(--ioc-text-on-color,#fff);color:var(--ioc-text-primary,#161616);border-color:var(--ioc-border-on-color,#fff)}

/* inline link with arrow */
.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--ioc-link-color,var(--ioc-blue));font-size:15px;font-weight:400;font-family:var(--ioc-sans)}
.link-arrow svg{width:16px;height:16px;transition:transform .15s ease}
.link-arrow:hover svg{transform:translateX(4px)}

/* tag / chip */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ioc-mono);font-size:12px;letter-spacing:.4px;
  color:var(--ioc-text-secondary);
  border:1px solid var(--ioc-border-subtle);
  padding:6px 12px;background:var(--ioc-white);
  transition:border-color .14s var(--ioc-ease),color .14s var(--ioc-ease),background .14s var(--ioc-ease);
}
.tag:hover{border-color:var(--ioc-g40);color:var(--ioc-text-primary)}
.tag b{color:var(--ioc-blue);font-weight:500}

/* ========================================================
   GLOBAL SHARED SHELL  (INFOC V1 · matches approved reference)
   Header + mega menus + search + mobile drawer + footer +
   cookie consent + chat routing + back-to-top. Mapped to INFOC
   tokens and the locked Manrope / JetBrains Mono stack.
   Header/footer internals are scoped under .ioc-header/.ioc-footer.
   ======================================================== */

/* ---- scroll progress ---- */
.sh-progress{position:fixed;z-index:var(--ioc-z-toast);left:0;right:0;top:0;height:2px;pointer-events:none}
.sh-progress::before{content:"";display:block;width:calc(var(--sp,0) * 1%);height:100%;background:linear-gradient(90deg,var(--ioc-blue),var(--ioc-fam-talents,#1a7a52))}

/* ---- HEADER ---- */
.ioc-header{position:sticky;top:0;z-index:var(--ioc-z-sticky);background:var(--ioc-header-surface,rgba(255,255,255,.94));-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--ioc-border-subtle);transition:box-shadow .25s var(--ioc-ease)}
.ioc-header.scrolled{box-shadow:0 10px 28px -18px rgba(15,17,60,.22)}
.ioc-header .header-row{display:flex;align-items:stretch;height:72px;max-width:none;margin:0 auto;padding:0 var(--ioc-gutter)}
.ioc-header .brand{display:inline-flex;align-items:center;color:var(--ioc-text-primary);margin-right:32px}
/* INFOC Michroma wordmark lockup (static master) */
.infoc-logo{display:inline-flex;align-items:baseline;font-family:"Michroma",sans-serif;font-weight:400;letter-spacing:.11em;line-height:1;padding-bottom:.26em;-webkit-text-stroke:.063em currentColor;paint-order:stroke fill;transform:none}
.infoc-logo .g{display:inline-block}
.infoc-logo .g:first-child{margin-right:-.07em}
.infoc-logo .g:nth-child(2){margin-right:-.04em}
.infoc-logo .gc{position:relative;color:var(--ioc-blue);margin-right:-.02em}
.infoc-logo .gc::after{content:"";position:absolute;left:0;top:calc(100% + .122em);width:calc(100% - .11em);height:.14em;background:currentColor}
.ioc-header .brand .infoc-logo{font-size:23px}
@media (prefers-reduced-motion:no-preference){.ioc-header .brand .infoc-logo .gc{animation:idcHdrInk 1.5s var(--ioc-ease) .25s both}}
@keyframes idcHdrInk{0%{color:var(--ioc-text-primary)}100%{color:var(--ioc-blue)}}
.ioc-header .nav{display:flex;margin-left:auto;align-items:stretch}
.ioc-header .nav-link,.ioc-header .nav-trigger{position:relative;display:flex;align-items:center;gap:6px;padding:0 15px;border:0;background:transparent;font-family:var(--ioc-sans);font-weight:600;font-size:14px;color:var(--ioc-text-secondary);white-space:nowrap;cursor:pointer;transition:color .16s var(--ioc-ease)}
.ioc-header .nav-link::after,.ioc-header .nav-trigger::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:2px;background:var(--ioc-header-active,#0001ff);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ioc-ease)}
.ioc-header .nav-link:hover,.ioc-header .nav-trigger:hover,.ioc-header .nav-trigger[aria-expanded="true"]{color:var(--ioc-text-primary)}
.ioc-header .nav-link:hover::after,.ioc-header .nav-trigger:hover::after,.ioc-header .nav-trigger[aria-expanded="true"]::after{transform:scaleX(1)}
.ioc-header .nav-link[aria-current="page"]{color:var(--ioc-header-active,#0001ff)}
.ioc-header .nav-link[aria-current="page"]::after{transform:scaleX(1)}
.ioc-header .ico-down{width:12px;height:12px;transition:transform .2s var(--ioc-ease)}
.ioc-header .nav-trigger[aria-expanded="true"] .ico-down{transform:rotate(180deg)}
.ioc-header .nav-link,.ioc-header .nav-trigger{text-decoration:none;cursor:pointer}
.mobile-sub .mobile-overview{font-weight:600;color:var(--ioc-blue)}
.ioc-header .nav-trigger[aria-current="page"]{color:var(--ioc-header-active,#0001ff)}
.ioc-header .nav-trigger[aria-current="page"]::after{transform:scaleX(1)}
.ioc-header .header-actions{display:flex;margin-left:6px}
.ioc-header .icon-btn{width:56px;display:grid;place-items:center;border:0;border-left:1px solid var(--ioc-border-subtle);background:transparent;color:var(--ioc-text-primary);cursor:pointer;transition:background .16s var(--ioc-ease),color .16s var(--ioc-ease)}
.ioc-header .icon-btn:hover{background:var(--ioc-g10);color:var(--ioc-blue)}
.ioc-header .icon-btn .ico{width:20px;height:20px}
.ioc-header .top-cta{min-width:176px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 20px;background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);font-weight:600;font-size:13.5px;letter-spacing:-.01em;transition:background .16s var(--ioc-ease)}
.ioc-header .top-cta:hover{background:var(--ioc-blue-hover)}
.ioc-header .top-cta .ico{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.ioc-header .top-cta:hover .ico{transform:translateX(3px)}
.ioc-header .mobile-toggle{display:none}

/* ---- mega panels ---- */
.ioc-header .backdrop{position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(22,22,22,.4);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ioc-ease),visibility .2s}
.ioc-header .backdrop.show{opacity:1;visibility:visible;pointer-events:auto}
.ioc-header .mega{display:block;position:absolute;left:0;right:0;width:auto;top:100%;background:var(--ioc-surface,#fff);border-bottom:1px solid var(--ioc-border-strong);box-shadow:0 24px 48px -24px rgba(10,12,60,.25);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s var(--ioc-ease),transform .28s var(--ioc-ease),visibility .2s;max-height:calc(100vh - 72px);overflow:auto}
.ioc-header .mega.open{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:none}
.ioc-header .mega-inner{width:100%;max-width:none;margin:0 auto;padding:26px var(--ioc-gutter)}
.ioc-header .sol-layout{display:grid;grid-template-columns:minmax(13rem,3fr) minmax(26rem,6fr) minmax(13rem,3fr);gap:clamp(20px,2vw,32px);align-items:start}
.ioc-header .simple-layout{display:grid;grid-template-columns:minmax(13rem,3fr) minmax(30rem,9fr);gap:clamp(20px,2vw,32px);align-items:start}
.ioc-header .featured{display:flex;flex-direction:column;padding:18px;background:var(--ioc-selected-surface,#edf5ff)}
.ioc-header .featured>svg{width:24px;height:24px;color:var(--ioc-blue)}
.ioc-header .featured .mega-label{margin-top:14px}
.ioc-header .featured h3{margin:6px 0 8px;font-size:18px;line-height:1.12;letter-spacing:-.02em;color:var(--ioc-text-primary)}
.ioc-header .featured p{margin:0;color:var(--ioc-text-secondary);font-size:12.5px;line-height:1.5}
.ioc-header .featured>a{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--ioc-selected-border,#c6d9ff);color:var(--ioc-blue);font-weight:600;font-size:14px}
.ioc-header .featured>a .ico{width:16px;height:16px}
.ioc-header .mega-label{color:var(--ioc-blue);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ioc-header .mega-intro h2{font-size:clamp(19px,1.5vw,24px);line-height:1.08;letter-spacing:-.025em;margin:8px 0;max-width:16ch}
.ioc-header .mega-intro p{color:var(--ioc-text-secondary);line-height:1.5;font-size:13px;max-width:38ch}
.ioc-header .view-all{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--ioc-blue);font-weight:600;font-size:13px}
.ioc-header .view-all .ico{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.ioc-header .view-all:hover .ico{transform:translateX(3px)}
.ioc-header .group-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ioc-border-subtle);border-left:1px solid var(--ioc-border-subtle)}
.ioc-header .menu-group{padding:14px 16px;border-right:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-header .menu-group h3{margin:0 0 8px;color:var(--ioc-blue);font-family:var(--ioc-mono);font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.ioc-header .menu-group a{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;padding:9px 0;border-top:1px solid var(--ioc-border-subtle);color:var(--ioc-text-primary)}
.ioc-header .menu-group a:first-of-type{border-top:0}
.ioc-header .menu-group .mg-ico{margin-top:2px}
.ioc-header .menu-group .mg-ico svg{width:18px;height:18px;color:var(--ioc-blue)}
.ioc-header .menu-group strong{display:block;font-size:13.5px;font-weight:600;transition:color .14s var(--ioc-ease)}
.ioc-header .menu-group .mg-txt>span{display:block;margin-top:3px;color:var(--ioc-text-secondary);font-size:12px;font-weight:400;line-height:1.45}
.ioc-header .menu-group a>.ico{width:15px;height:15px;margin-top:2px;color:var(--ioc-blue);flex:none;transition:transform .16s var(--ioc-ease)}
.ioc-header .menu-group a:hover>.ico{transform:translateX(3px)}
.ioc-header .menu-group a:hover strong{color:var(--ioc-blue)}
.ioc-header .simple-links{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ioc-border-subtle);border-left:1px solid var(--ioc-border-subtle)}
.ioc-header .simple-links a{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:16px;border-right:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle);color:var(--ioc-text-primary);transition:background .16s var(--ioc-ease)}
.ioc-header .simple-links a .ico{width:22px;height:22px;color:var(--ioc-blue)}
.ioc-header .simple-links [data-tile]{display:block}
.ioc-header .simple-links [data-tile] svg{width:20px;height:20px;color:var(--ioc-blue)}
.ioc-header .simple-links .mega-label{margin-bottom:2px}
.ioc-header .simple-links strong{font-size:15px;font-weight:600}
.ioc-header .simple-links span{color:var(--ioc-text-secondary);font-size:12.5px;line-height:1.45}
.ioc-header .simple-links a:hover{background:var(--ioc-g10)}
.ioc-header .simple-links a:hover strong{color:var(--ioc-blue)}

/* ---- mobile drawer ---- */
.sh-drawer{position:fixed;z-index:var(--ioc-z-modal);inset:0 0 0 auto;width:min(92vw,28rem);background:var(--ioc-surface,#fff);transform:translateX(102%);transition:transform .32s var(--ioc-ease);box-shadow:-2rem 0 5rem rgba(0,0,0,.18);display:flex;flex-direction:column}
.sh-drawer.open{transform:none}
.sh-drawer .mobile-head{height:64px;display:flex;align-items:center;justify-content:space-between;padding-left:20px;border-bottom:1px solid var(--ioc-border-subtle)}
.sh-drawer .brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-.04em;color:var(--ioc-text-primary)}
.sh-drawer .brand .infoc-logo{font-size:21px}
.sh-drawer .icon-btn{width:56px;height:56px;display:grid;place-items:center;border:0;background:transparent;color:var(--ioc-text-primary);cursor:pointer}
.sh-drawer .icon-btn .ico{width:20px;height:20px}
.sh-drawer .mobile-nav{overflow:auto;flex:1}
.sh-drawer .mobile-nav>a,.sh-drawer .mobile-nav>button{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border:0;border-bottom:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);text-align:left;font-family:var(--ioc-sans);font-weight:600;font-size:15px;color:var(--ioc-text-primary);cursor:pointer}
.sh-drawer .mobile-nav .ico-down{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.sh-drawer .mobile-nav>button[aria-expanded="true"] .ico-down{transform:rotate(180deg)}
.sh-drawer .mobile-sub{display:grid;grid-template-rows:0fr;background:var(--ioc-g10);transition:grid-template-rows .25s var(--ioc-ease)}
.sh-drawer .mobile-sub.open{grid-template-rows:1fr}
.sh-drawer .mobile-sub>div{overflow:hidden}
.sh-drawer .mobile-sub a{display:block;padding:13px 28px;border-bottom:1px solid var(--ioc-border-subtle);color:var(--ioc-text-secondary);font-size:14px}
.sh-drawer .drawer-cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);font-weight:600}
.sh-drawer .drawer-cta .ico{width:16px;height:16px}

/* ---- search overlay ---- */
.sh-search{position:fixed;z-index:var(--ioc-z-overlay);inset:0;background:rgba(22,22,22,.65);display:grid;place-items:start center;padding-top:6rem;opacity:0;visibility:hidden;transition:opacity .2s var(--ioc-ease),visibility .2s}
.sh-search.show{opacity:1;visibility:visible}
.sh-search .search-panel{width:min(calc(100% - 2rem),54rem);background:var(--ioc-surface,#fff);box-shadow:0 2rem 6rem rgba(0,0,0,.25)}
.sh-search .search-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.sh-search .icon-btn{width:40px;height:40px;display:grid;place-items:center;border:0;background:transparent;color:var(--ioc-text-primary);cursor:pointer}
.sh-search .icon-btn .ico{width:18px;height:18px}
.sh-search>.search-panel>label{display:block;padding:24px 24px 6px;font-size:20px;font-weight:600;letter-spacing:-.01em}
.sh-search .search-input{display:flex;align-items:center;gap:12px;margin:0 24px 16px;padding:0 14px;background:var(--ioc-g10);border-bottom:2px solid var(--ioc-text-primary)}
.sh-search .search-input .ico{width:18px;height:18px;color:var(--ioc-text-helper)}
.sh-search .search-input input{width:100%;height:60px;border:0;background:transparent;font-family:var(--ioc-sans);font-size:17px;outline:none;color:var(--ioc-text-primary)}
.sh-search .search-results{border-top:1px solid var(--ioc-border-subtle)}
.sh-search .search-results a{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;border-bottom:1px solid var(--ioc-border-subtle);color:var(--ioc-text-primary);font-size:14.5px}
.sh-search .search-results a .ico{width:16px;height:16px;color:var(--ioc-blue);transition:transform .2s var(--ioc-ease)}
.sh-search .search-results a:hover{background:var(--ioc-g10);color:var(--ioc-blue)}
.sh-search .search-results a:hover .ico{transform:translateX(3px)}

/* ---- FOOTER ---- */
.ioc-footer{position:relative;border-top:1px solid var(--ioc-border-subtle);background:var(--ioc-footer-surface,#fff);color:var(--ioc-text-primary)}
.ioc-footer .fwrap{max-width:var(--ioc-maxw);margin:0 auto;padding:0 var(--ioc-gutter)}
.ioc-footer .footer-cta{background:linear-gradient(115deg,var(--ioc-selected-surface,#edf5ff) 0%,var(--ioc-hover-wash,#f7faff) 58%,var(--ioc-wash-pink,#fff1f7) 150%);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-footer .footer-cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(2.5rem,5vw,5rem);align-items:start;padding-block:clamp(64px,7vw,112px)}
.ioc-footer .fcta-eyebrow{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-accent)}
.ioc-footer .footer-cta h2{max-width:11ch;font-size:clamp(40px,6vw,92px);line-height:.96;letter-spacing:-.045em;margin:14px 0 0;font-weight:800}
.ioc-footer .footer-cta h2 .em{color:var(--ioc-accent)}
.ioc-footer .footer-action{padding-left:clamp(1.5rem,3vw,3rem);border-left:1px solid var(--ioc-selected-border,#c6d9ff)}
.ioc-footer .footer-action .fa-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-accent)}
.ioc-footer .footer-action h3{font-size:clamp(22px,2.4vw,30px);line-height:1.08;letter-spacing:-.02em;margin:12px 0}
.ioc-footer .footer-action p{max-width:35rem;color:var(--ioc-text-secondary);line-height:1.6;font-size:14.5px;margin:0}
.ioc-footer .fa-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ioc-border-subtle);margin:14px 0 20px;max-width:36rem}
.ioc-footer .fa-tab{min-height:3rem;padding:0 1rem;background:var(--ioc-surface,#fff);border:0;border-right:1px solid var(--ioc-border-subtle);font:inherit;font-weight:600;font-size:13px;color:var(--ioc-text-secondary);cursor:pointer;text-align:left;transition:background .2s,color .2s}
.ioc-footer .fa-tab:last-child{border-right:0}
.ioc-footer .fa-tab[aria-selected="true"]{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.ioc-footer .fa-panel{display:none}
.ioc-footer .fa-panel.active{display:block}
.ioc-footer .footer-action-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:22px 0;background:var(--ioc-selected-border,#c6d9ff);border:1px solid var(--ioc-selected-border,#c6d9ff)}
.ioc-footer .footer-action-points span{min-height:4.25rem;padding:12px;background:rgba(255,255,255,.75);font-size:12px;line-height:1.4;color:var(--ioc-text-secondary)}
.ioc-footer .footer-action-points b{display:block;margin-bottom:4px;color:var(--ioc-accent);font-family:var(--ioc-mono);font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
.ioc-footer .footer-button{display:flex;align-items:center;justify-content:space-between;width:min(100%,24rem);min-height:56px;padding:16px 18px;background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);font-weight:600;transition:background .2s var(--ioc-ease),transform .2s var(--ioc-ease)}
.ioc-footer .footer-button:hover{background:var(--ioc-accent-hover);transform:translateY(-2px)}
.ioc-footer .footer-button .ico{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.ioc-footer .footer-button:hover .ico{transform:translateX(3px)}
.ioc-footer .footer-routes{background:var(--ioc-surface,#fff);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-footer .route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-inline:1px solid var(--ioc-border-subtle)}
.ioc-footer .route{min-height:9rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:26px 28px;border-right:1px solid var(--ioc-border-subtle);color:var(--ioc-text-primary);transition:background .2s var(--ioc-ease),color .2s var(--ioc-ease)}
.ioc-footer .route:last-child{border-right:0}
.ioc-footer .route .rn{display:inline-flex;align-items:center;justify-content:center;color:var(--ioc-accent)}
.ioc-footer .route .rn svg{width:26px;height:26px;stroke-width:1.5}
.ioc-footer .route b{display:block;margin-bottom:4px;font-size:16px;letter-spacing:-.01em}
.ioc-footer .route small{display:block;color:var(--ioc-text-secondary);line-height:1.45;font-size:13px}
.ioc-footer .route .ico{width:18px;height:18px;color:var(--ioc-accent);transition:transform .2s var(--ioc-ease)}
.ioc-footer .route:hover{background:var(--ioc-g10);color:var(--ioc-accent)}
.ioc-footer .route:hover .ico{transform:translateX(3px)}
.ioc-footer .footer-main-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) minmax(0,1.75fr);gap:clamp(28px,3.2vw,56px);align-items:start;padding-block:clamp(56px,6vw,88px)}
.ioc-footer .footer-brand{padding-right:clamp(24px,3vw,48px)}
.ioc-footer .footer-menu{padding-left:0}
.ioc-footer .footer-brand .brand{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.04em;color:var(--ioc-text-primary)}
.ioc-footer .footer-brand .brand .infoc-logo{font-size:30px}
.ioc-footer .footer-brand .brand.footer-lockup{display:inline-flex;align-items:center;gap:16px}
.ioc-footer .footer-lockup .navdiv{width:1px;height:1.9em;background:var(--ioc-border-subtle);flex:none}
.ioc-footer .footer-lockup .navword{font-family:var(--ioc-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-primary);white-space:nowrap;opacity:0;transform:translateY(.4em);transition:opacity .5s var(--ioc-ease),transform .5s var(--ioc-ease)}
.ioc-footer .footer-lockup .navword.in{opacity:1;transform:none}
.ioc-footer .footer-lockup .infoc-logo.suffixing .gc::after{opacity:0;transition:opacity .3s var(--ioc-ease)}
.ioc-footer .footer-brand>p{max-width:30rem;color:var(--ioc-text-secondary);line-height:1.6;font-size:14px;margin:18px 0 0}
.ioc-footer .footer-menu-stack{display:flex;flex-direction:column;gap:28px}
.ioc-footer .footer-menu-stack nav>h3{margin-top:0}
.ioc-footer .footer-contact{display:flex;flex-direction:column;margin-top:2px}
.ioc-footer .footer-contact .fc-row{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid var(--ioc-border-subtle)}
.ioc-footer .footer-contact .fc-row:first-child{border-top:0;padding-top:0}
.ioc-footer .footer-contact .fc-k{font-size:14px;color:var(--ioc-text-secondary);font-weight:500;letter-spacing:-.01em}
.ioc-footer .footer-contact .fc-v{justify-self:end;text-align:right;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ioc-text-primary);line-height:1.35;text-decoration:none}
.ioc-footer .footer-contact a.fc-v{transition:color .16s var(--ioc-ease)}
.ioc-footer .footer-contact a.fc-v:hover{color:var(--ioc-accent)}
.ioc-footer .footer-menu h3{margin:0 0 16px;font-family:var(--ioc-mono);font-size:11px;font-weight:400;color:var(--ioc-accent);letter-spacing:.12em;text-transform:uppercase}
.ioc-footer .footer-menu a{display:flex;align-items:center;min-height:32px;padding:4px 0;color:var(--ioc-g80,#393939);line-height:1.35;font-size:14px;transition:color .16s var(--ioc-ease),transform .16s var(--ioc-ease)}
.ioc-footer .footer-menu a:hover{color:var(--ioc-accent);transform:translateX(3px)}
.ioc-footer .footer-contact-band{border-top:1px solid var(--ioc-border-subtle)}
.ioc-footer .footer-contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,56px);align-items:start;padding-block:clamp(28px,3vw,40px)}
.ioc-footer .fc-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.ioc-footer .fc-label{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-accent)}
.ioc-footer .fc-value{color:var(--ioc-text-primary);font-size:15px;font-weight:600;line-height:1.4;word-break:break-word;text-decoration:none}
.ioc-footer a.fc-value:hover{color:var(--ioc-accent)}
@media(max-width:760px){.ioc-footer .footer-contact-grid{grid-template-columns:1fr 1fr}}
.ioc-footer .legal{background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff)}
.ioc-footer .legal-row{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px;color:var(--ioc-g30,#c6c6c6);font-size:12.5px;flex-wrap:wrap}
.ioc-footer .legal-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ioc-footer .legal-links span,.ioc-footer .legal-links a,.ioc-footer .legal-button{color:var(--ioc-g30,#c6c6c6);font-size:inherit}
.ioc-footer .legal-button{border:0;background:transparent;padding:0;cursor:pointer;font-family:var(--ioc-sans)}
.ioc-footer .legal-links a:hover,.ioc-footer .legal-button:hover{color:var(--ioc-text-on-color,#fff);text-decoration:underline}
.ioc-footer .social{display:flex;gap:8px}
.ioc-footer .social a,.ioc-footer .social button{width:34px;height:34px;border:1px solid var(--ioc-g80,#393939);display:flex;align-items:center;justify-content:center;color:var(--ioc-g30,#c6c6c6);background:transparent;cursor:pointer;padding:0}
.ioc-footer .social a:hover,.ioc-footer .social button:hover{border-color:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);background:var(--ioc-accent)}
.ioc-footer .social button svg{width:16px;height:16px}
.ioc-footer .back-top{border:0;background:transparent;color:var(--ioc-text-on-color,#fff);display:flex;align-items:center;gap:8px;padding:6px;cursor:pointer;font-family:var(--ioc-sans);font-size:12.5px}
.ioc-footer .back-top .ico{width:16px;height:16px;transform:rotate(-90deg);transition:transform .2s var(--ioc-ease)}
.ioc-footer .back-top:hover .ico{transform:rotate(-90deg) translateX(3px)}

/* ---- cookie consent ---- */
/* C3 · corner card. A notice in the lower-left corner rather than a
   full-width curtain: the footer and the rest of the viewport stay
   readable, and it does not share the bottom-right with the chat
   launcher. Accept spans the card; reject sits beside preferences at
   the same size, so rejecting is still one click. */
.sh-cookie{position:fixed;z-index:var(--ioc-z-toast);left:20px;bottom:var(--lift-bottom,20px);transition:bottom .18s var(--ioc-ease);width:min(26rem,calc(100vw - 40px));background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-strong);border-top:3px solid var(--ioc-blue);box-shadow:0 1.5rem 4rem rgba(0,0,0,.18)}
.sh-cookie[hidden]{display:none}
.sh-cookie .cookie-grid{display:grid;grid-template-columns:1fr;gap:16px;padding:20px}
.sh-cookie .cookie-copy{max-width:none}
.sh-cookie .cookie-copy strong{display:block;margin-bottom:4px;font-size:15px}
.sh-cookie .cookie-copy p{margin:0;color:var(--ioc-text-secondary);font-size:13px;line-height:1.55}
.sh-cookie .cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sh-cookie .cookie-actions .primary{grid-column:1/-1;order:-1}
.sh-cookie .cookie-actions .sh-cookie-btn{display:flex;align-items:center;justify-content:center;min-height:42px;font-size:13px;text-align:center}
.sh-cookie-btn{min-height:44px;padding:10px 16px;border:1px solid var(--ioc-text-primary);background:var(--ioc-surface,#fff);font-family:var(--ioc-sans);font-weight:600;font-size:13.5px;cursor:pointer;transition:background .16s var(--ioc-ease)}
.sh-cookie-btn:hover{background:var(--ioc-g10)}
.sh-cookie-btn.primary{border-color:var(--ioc-blue);background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.sh-cookie-btn.primary:hover{background:var(--ioc-blue-hover)}
.sh-cookie-dialog{width:min(calc(100% - 2rem),44rem);padding:0;border:0;background:var(--ioc-surface,#fff);box-shadow:0 2rem 6rem rgba(0,0,0,.35)}
.sh-cookie-dialog::backdrop{background:rgba(22,22,22,.64)}
.sh-cookie-dialog .cd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding:24px;border-bottom:1px solid var(--ioc-border-subtle)}
.sh-cookie-dialog .cd-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-blue)}
.sh-cookie-dialog .cd-head h2{margin:6px 0 0;font-size:26px;line-height:1.1;letter-spacing:-.02em}
.sh-cookie-dialog .icon-btn{width:44px;height:44px;display:grid;place-items:center;border:0;background:var(--ioc-surface,#fff);cursor:pointer}
.sh-cookie-dialog .icon-btn .ico{width:18px;height:18px}
.sh-cookie-dialog .cd-body{padding:24px}
.sh-cookie-dialog .cd-body>p{color:var(--ioc-text-secondary);line-height:1.6;font-size:14px;margin:0}
.sh-cookie-dialog .cookie-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:16px 0;border-top:1px solid var(--ioc-border-subtle)}
.sh-cookie-dialog .cookie-option:first-of-type{margin-top:16px}
.sh-cookie-dialog .cookie-option strong{display:block;font-size:14.5px}
.sh-cookie-dialog .cookie-option small{display:block;margin-top:3px;color:var(--ioc-text-secondary);line-height:1.45;font-size:12.5px}
.sh-switch{position:relative;width:48px;height:26px;flex:none}
.sh-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sh-switch .ui{position:absolute;inset:0;background:var(--ioc-g50,#8d8d8d);transition:background .2s var(--ioc-ease)}
.sh-switch .ui::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--ioc-text-on-color,#fff);transition:transform .2s var(--ioc-ease)}
.sh-switch input:checked+.ui{background:var(--ioc-blue)}
.sh-switch input:checked+.ui::after{transform:translateX(22px)}
.sh-switch input:disabled+.ui{opacity:.6}
.sh-cookie-dialog .cd-actions{display:flex;justify-content:flex-end;gap:10px;padding:20px 24px;border-top:1px solid var(--ioc-border-subtle)}

/* ---- chat routing ---- */
/* --lift-bottom is written by ioc-site.js on both bottom-fixed overlays
   so each rides above whatever currently occupies the bottom of the
   viewport: the footer legal row, and for the launcher the consent
   card when they share a column. */
.sh-chat{position:fixed;z-index:var(--ioc-z-toast);right:20px;bottom:var(--lift-bottom,20px);transition:bottom .18s var(--ioc-ease)}
.sh-chat .chat-launcher{min-height:52px;display:flex;align-items:center;gap:10px;padding:12px 16px;border:0;background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);font-family:var(--ioc-sans);font-weight:600;font-size:14px;box-shadow:0 12px 30px -10px rgba(0,1,255,.5);cursor:pointer;transition:background .2s var(--ioc-ease),transform .2s var(--ioc-ease),bottom .25s var(--ioc-ease)}
.sh-chat .chat-launcher:hover{background:var(--ioc-blue-hover);transform:translateY(-2px)}
.sh-chat .chat-launcher .ico{width:18px;height:18px}
.sh-chat .chat-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(calc(100vw - 40px),23rem);background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);box-shadow:0 1.5rem 4rem rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:bottom right;transition:opacity .2s var(--ioc-ease),transform .25s var(--ioc-ease),visibility .2s}
.sh-chat .chat-panel.open{opacity:1;visibility:visible;transform:none}
.sh-chat .chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px;border-bottom:1px solid var(--ioc-border-subtle)}
.sh-chat .chat-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-blue)}
.sh-chat .chat-head h2{margin:6px 0 0;font-size:22px;line-height:1.1;letter-spacing:-.02em}
.sh-chat .icon-btn{width:40px;height:40px;display:grid;place-items:center;border:0;background:var(--ioc-surface,#fff);cursor:pointer}
.sh-chat .icon-btn .ico{width:18px;height:18px}
.sh-chat .chat-body{padding:16px}
.sh-chat .chat-body>p{margin:2px 0 12px;color:var(--ioc-text-secondary);font-size:13px;line-height:1.55}
.sh-chat .chat-route{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--ioc-border-subtle);color:var(--ioc-text-primary)}
.sh-chat .chat-route:first-of-type{border-top:0}
.sh-chat .chat-route strong{display:block;font-size:14px}
.sh-chat .chat-route small{display:block;margin-top:2px;color:var(--ioc-text-secondary);font-size:12px}
.sh-chat .chat-route .ico{width:16px;height:16px;color:var(--ioc-blue);transition:transform .2s var(--ioc-ease)}
.sh-chat .chat-route:hover{color:var(--ioc-blue)}
.sh-chat .chat-route:hover .ico{transform:translateX(3px)}
.sh-chat .chat-foot{padding:14px 16px;background:var(--ioc-g10);color:var(--ioc-text-secondary);font-size:12px;line-height:1.5}

/* ---- shell responsive ---- */
@media(max-width:1180px){
  .ioc-header .nav-link,.ioc-header .nav-trigger{padding:0 11px;font-size:13.5px}
  .ioc-header .brand{margin-right:18px}
}
@media(max-width:1000px){
  .ioc-header .nav,.ioc-header .search-open,.ioc-header .top-cta{display:none}
  .ioc-header .mobile-toggle{display:grid}
  .ioc-header .header-row{height:64px}
  .ioc-header .mega{display:none}
}
@media(max-width:900px){
  .ioc-footer .footer-cta-grid{grid-template-columns:1fr}
  .ioc-footer .footer-action{padding:32px 0 0;border-left:0;border-top:1px solid var(--ioc-selected-border,#c6d9ff)}
  .ioc-footer .route-grid{grid-template-columns:1fr;border-inline:0}
  .ioc-footer .route{border-right:0;border-top:1px solid var(--ioc-border-subtle)}
  .ioc-footer .route:first-child{border-top:0}
  .ioc-footer .footer-main-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3rem)}
  .ioc-footer .footer-brand{grid-column:1/-1;padding-right:0;padding-bottom:28px;border-right:0;border-bottom:1px solid var(--ioc-border-subtle)}
  .ioc-footer .footer-menu{padding-left:0}
}
@media(max-width:560px){
  .ioc-footer .footer-action-points{grid-template-columns:1fr}
  .ioc-footer .footer-main-grid{grid-template-columns:1fr 1fr;column-gap:24px}
  .ioc-footer .footer-menu:last-child{grid-column:1/-1}
  .ioc-footer .legal-row{flex-direction:column;align-items:flex-start}
  /* Card and chat launcher share the bottom edge; on a narrow screen
     the card spans it and the launcher sits above. */
  .sh-cookie{left:12px;right:12px;width:auto}
  .sh-chat .chat-launcher span{display:none}
  .sh-chat .chat-launcher{width:52px;justify-content:center;padding:0}
}

/* ========================================================
   PAGE SHELL — breadcrumb, hero, section heads
   ======================================================== */
.crumb{border-bottom:1px solid var(--ioc-border-subtle)}
.crumb .crumb-inner{max-width:var(--ioc-maxw);margin:0 auto;padding:14px var(--ioc-gutter);display:flex;align-items:center;gap:10px;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.3px;color:var(--ioc-text-helper)}
.crumb a{color:var(--ioc-text-helper)}
.crumb a:hover{color:var(--ioc-blue)}
.crumb .sep{color:var(--ioc-g30)}
.crumb .cur{color:var(--ioc-text-primary)}

/* refined in-hero breadcrumb: bordered back-chevron + path trail */
.ph-trail{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.ph-trail .back{width:36px;height:36px;flex:none;border:1px solid var(--ioc-border-strong);display:flex;align-items:center;justify-content:center;color:var(--ioc-text-primary);transition:background .12s,color .12s,border-color .12s}
.ph-trail .back svg{width:16px;height:16px}
.ph-trail .back:hover{background:var(--ioc-blue);border-color:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.ph-trail .path{display:flex;align-items:center;gap:9px;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.3px;text-transform:uppercase}
.ph-trail .path a{color:var(--ioc-crumb,#5c5c5c)}
.ph-trail .path a:hover{color:var(--ioc-blue)}
.ph-trail .path .sep{color:var(--ioc-g30)}
.ph-trail .path .cur{color:var(--ioc-crumb-current,#0001ff)}

.page-hero{border-bottom:1px solid var(--ioc-border-subtle)}
/* hero 07 — capability tags, single column */
.page-hero .ph-solo{padding:88px 0 80px}
.page-hero .ph-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.page-hero .ph-solo h1{max-width:18ch}
.page-hero .ph-solo .ph-lede{max-width:56ch}
.page-hero .ph-solo .ph-cta{display:flex;flex-wrap:wrap;gap:0;margin-top:36px}

/* hero — solo with side figure (uses .phf-frame) */
.page-hero .ph-solo.has-fig{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,38%,560px);column-gap:64px;align-items:center}
.ph-solo.has-fig>*{grid-column:1}
.ph-solo.has-fig .ph-fig{grid-column:2;grid-row:1/span 9;align-self:stretch;display:flex;border-left:1px solid var(--ioc-border-subtle);padding:0 0 0 48px}
.ph-solo.has-fig .ph-fig .phf-frame{flex:1;min-height:380px}
@media(max-width:980px){
  .page-hero .ph-solo.has-fig{display:block}
  .ph-solo.has-fig .ph-fig{border-left:0;padding:0;margin-top:44px}
  .ph-solo.has-fig .ph-fig .phf-frame{min-height:280px}
}

/* imagery motion — slow ken-burns on frame hover */
.phf-frame .pic img{transition:transform var(--ioc-dur-reveal) var(--ioc-ease-out)}
.phf-frame:hover .pic img{transform:scale(1.03)}

/* index — industry figures */
.indcell .indfig{margin-bottom:20px;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--ioc-border-subtle);background:var(--ioc-g10)}
.indcell .indfig img{width:100%;height:100%;object-fit:cover;transition:transform var(--ioc-dur-reveal) var(--ioc-ease-out)}
.indcell:hover .indfig img{transform:scale(1.04)}

/* hero — feature (image + focus strip) */
.page-hero.ph-feature .phf{display:grid;grid-template-columns:repeat(16,1fr);align-items:stretch}
.page-hero.ph-feature .phf-main{grid-column:1 / 9;padding:80px 48px 72px 0;display:flex;flex-direction:column;justify-content:center}
.page-hero.ph-feature .phf-main h1{max-width:16ch}
.page-hero.ph-feature .phf-main .ph-lede{max-width:50ch;margin-top:24px}
.page-hero.ph-feature .phf-main .ph-cta{display:flex;flex-wrap:wrap;gap:0;margin-top:36px}
.page-hero.ph-feature .phf-fig{grid-column:9 / 17;border-left:1px solid var(--ioc-border-subtle);padding:40px 0 40px 40px;display:flex}
.phf-frame{border:1px solid var(--ioc-border-subtle);flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:400px}
.phf-frame .cap{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--ioc-border-subtle);background:var(--ioc-g10);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-text-helper)}
.phf-frame .cap .dots{display:flex;gap:6px}
.phf-frame .cap .dots i{width:8px;height:8px;border:1px solid var(--ioc-g40);display:block}
.phf-frame .cap .dots i:first-child{background:var(--ioc-blue);border-color:var(--ioc-blue)}
.phf-frame .pic{flex:1;position:relative;background:var(--ioc-g10);min-height:320px}
.phf-frame .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* focus / tags strip */
.page-hero.ph-feature .phf-bar{display:grid;grid-template-columns:repeat(16,1fr);border-top:1px solid var(--ioc-border-strong);align-items:center}
.page-hero.ph-feature .phf-bar .bk{grid-column:1 / 4;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-text-helper);padding:22px 0}
.page-hero.ph-feature .phf-bar .bt{grid-column:4 / 17;display:flex;flex-wrap:wrap;gap:8px;padding:18px 0}
@media(max-width:980px){
  .page-hero.ph-feature .phf-main{grid-column:1/17;padding:64px 0 40px}
  .page-hero.ph-feature .phf-fig{grid-column:1/17;border-left:0;border-top:1px solid var(--ioc-border-subtle);padding:32px 0 0}
  .phf-frame{min-height:300px}
  .page-hero.ph-feature .phf-bar .bk{grid-column:1/17;padding:24px 0 0}
  .page-hero.ph-feature .phf-bar .bt{grid-column:1/17;padding:14px 0 24px}
}
.page-hero .ph-grid{display:grid;grid-template-columns:repeat(16,1fr);align-items:end}
.page-hero .ph-main{grid-column:1 / 12;padding:72px 32px 64px 0}
.page-hero .ph-side{grid-column:12 / 17;border-left:1px solid var(--ioc-border-subtle);padding:48px 0 56px 40px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:24px}
.page-hero h1{margin:22px 0 0;max-width:18ch}
.page-hero .ph-lede{margin:26px 0 0;max-width:52ch}
.page-hero .ph-side .pk{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--ioc-text-helper)}
.page-hero .ph-side .pv{font-size:17px;margin-top:6px;font-weight:500;letter-spacing:-.01em}
.page-hero .ph-side .pv b{color:var(--ioc-blue)}
@media(max-width:980px){.page-hero .ph-main{grid-column:1/17;padding-right:0}.page-hero .ph-side{grid-column:1/17;border-left:0;border-top:1px solid var(--ioc-border-subtle);padding:32px 0 0;margin-top:32px;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:40px}}

.sec-head{display:grid;grid-template-columns:repeat(16,1fr);align-items:end;padding-bottom:56px}
.sec-head .sh-l{grid-column:1 / 11}
.sec-head .sh-r{grid-column:12 / 17;display:flex;justify-content:flex-end;align-items:flex-end}
.sec-head h2{margin-top:18px;max-width:20ch}
@media(max-width:980px){.sec-head .sh-l,.sec-head .sh-r{grid-column:1/17}.sec-head .sh-r{justify-content:flex-start;margin-top:24px}}

/* ========================================================
   DATA TABLE (borrowed from Direction C)
   ======================================================== */
.dtable{border:1px solid var(--ioc-border-subtle)}
.dtable .dt-row{display:grid;align-items:center;border-bottom:1px solid var(--ioc-border-subtle);transition:background .16s var(--ioc-ease),box-shadow .16s var(--ioc-ease)}
.dtable .dt-row:last-child{border-bottom:0}
.dtable .dt-row:hover:not(.head){background:var(--ioc-g10);box-shadow:inset 3px 0 0 var(--ioc-blue)}
.dtable .dt-row:hover:not(.head) .tg svg{transform:translateX(3px)}
.dtable .tg svg{transition:transform .2s var(--ioc-ease)}
.dtable .dt-row.head{background:var(--ioc-g10);border-bottom:1px solid var(--ioc-border-strong)}
.dtable .dt-row.head>div{font-family:var(--ioc-mono);font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--ioc-text-helper);padding:12px 18px}
.dtable .dt-row>div{padding:20px 18px}
.dtable .ti{font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-blue)}
.dtable .tn{font-weight:600;font-size:16px;letter-spacing:-.005em}
.dtable .td{font-size:14px;color:var(--ioc-text-secondary);line-height:1.5}
.dtable .tt{font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-text-secondary)}
.dtable .tg{color:var(--ioc-blue);display:flex}

/* ========================================================
   CARD GRID + feature tiles
   ======================================================== */
/* Card grids — de-boxed: whitespace separates, hairlines reserved for data */
/* Card grids — de-boxed: whitespace separates, hairlines reserved for data */
.cardgrid{display:grid;gap:40px 32px}
.cardgrid.c2{grid-template-columns:repeat(2,1fr)}
.cardgrid.c3{grid-template-columns:repeat(3,1fr)}
.cardgrid.c4{grid-template-columns:repeat(4,1fr)}
.ucard{background:transparent;padding:24px 0 0;display:flex;flex-direction:column;min-height:0;position:relative;transition:color .18s var(--ioc-ease)}
.ucard::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ioc-border-subtle)}
.ucard::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--ioc-accent);transition:width .45s var(--ioc-ease)}
.ucard:hover::after{width:100%}
.ucard:hover h4,.ucard:hover h3{color:var(--ioc-accent)}
.ucard .uk{width:44px;height:44px;border:1px solid var(--ioc-accent);color:var(--ioc-accent);margin-bottom:24px;display:flex;align-items:center;justify-content:center;transition:background .18s var(--ioc-ease),color .18s var(--ioc-ease)}
.ucard .uk svg{width:24px;height:24px;display:block}
.ucard:hover .uk{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.ucard .ueyebrow{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:12px}
.ucard h3{font-size:21px;letter-spacing:-.01em;max-width:18ch}
.ucard h4{font-size:18px;letter-spacing:-.005em}
.ucard p{margin:12px 0 0;font-size:14.5px;color:var(--ioc-text-secondary);line-height:1.55}
.ucard .ulink{margin-top:auto;padding-top:24px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-blue);transition:letter-spacing .18s var(--ioc-ease)}
.ucard:hover .ulink{letter-spacing:.8px}
.ucard .tnum{font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-blue);margin-bottom:14px}
@media(max-width:980px){.cardgrid.c3,.cardgrid.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cardgrid.c2,.cardgrid.c3,.cardgrid.c4{grid-template-columns:1fr}}

/* stat strip */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ioc-border-subtle)}
.statstrip .st{padding:40px 28px;border-left:1px solid var(--ioc-border-subtle)}
.statstrip .st:first-child{border-left:0}
.statstrip .st .sn{font-size:48px;font-weight:300;letter-spacing:-.02em;line-height:1}
.statstrip .st .sn b{color:var(--ioc-blue);font-weight:600}
.statstrip .st .sl{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-text-helper);margin-top:12px}
@media(max-width:780px){.statstrip{grid-template-columns:1fr 1fr}.statstrip .st:nth-child(odd){border-left:0}}

/* ========================================================
   PROSE (About / article body)
   ======================================================== */
.prose{max-width:none}
.prose p{font-size:17px;line-height:1.65;color:var(--ioc-text-secondary);margin:0 0 22px;font-weight:300}
.prose p.lead{font-size:clamp(19px,1.6vw,23px);color:var(--ioc-text-primary);font-weight:400;line-height:1.5}
.prose h3{font-size:26px;margin:48px 0 18px;letter-spacing:-.015em}
.prose h4{font-size:18px;margin:32px 0 10px}
.prose ul{margin:0 0 22px;padding:0;list-style:none}
.prose ul li{position:relative;padding:10px 0 10px 28px;font-size:16px;color:var(--ioc-text-secondary);border-bottom:1px solid var(--ioc-border-subtle);line-height:1.5}
.prose ul li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:10px;background:var(--ioc-blue)}
.prose blockquote{margin:32px 0;padding:24px 0 24px 28px;border-left:2px solid var(--ioc-blue);font-size:clamp(20px,2vw,28px);font-weight:300;letter-spacing:-.01em;color:var(--ioc-text-primary);line-height:1.3}

/* ========================================================
   FORM (Contact) — Carbon fields
   ======================================================== */
.field{display:flex;flex-direction:column;margin-bottom:1px;background:var(--ioc-g10);border:1px solid var(--ioc-border-subtle);border-bottom:2px solid var(--ioc-g50);transition:border-color .14s var(--ioc-ease),background .14s var(--ioc-ease),box-shadow .14s var(--ioc-ease)}
.field:hover{border-bottom-color:var(--ioc-g70)}
.field:focus-within{background:var(--ioc-surface,#fff);border-color:var(--ioc-blue);box-shadow:inset 0 0 0 1px var(--ioc-blue)}
.field label{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-text-helper);padding:12px 16px 2px;transition:color .14s var(--ioc-ease)}
.field:focus-within label{color:var(--ioc-blue)}
.field input,.field select,.field textarea{font-family:var(--ioc-sans);font-size:15px;color:var(--ioc-text-primary);background:transparent;border:0;padding:6px 16px 13px;outline:none;width:100%}
.field input::placeholder,.field textarea::placeholder{color:var(--ioc-g50)}
.field textarea{resize:vertical;min-height:120px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.formgrid .field{border:0;border-bottom:2px solid var(--ioc-g50)}
.formgrid .field:focus-within{box-shadow:inset 0 0 0 1px var(--ioc-blue)}
.formgrid .full{grid-column:1 / -1}
@media(max-width:640px){.formgrid{grid-template-columns:1fr}}

/* ========================================================
   CTA band (shared dark)
   ======================================================== */
.cta-band{background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff)}
.cta-band .cta-grid{display:grid;grid-template-columns:repeat(16,1fr);align-items:center}
.cta-band .cta-l{grid-column:1 / 10;padding:96px 40px 96px 0}
.cta-band .cta-r{grid-column:10 / 17;border-left:1px solid var(--ioc-g80,#393939);padding:96px 0 96px 48px;display:flex;flex-direction:column;gap:1px}
.cta-band h2{color:var(--ioc-text-on-color,#fff);max-width:18ch;margin-top:20px}
.cta-band p{color:var(--ioc-g40,#a8a8a8);max-width:48ch;margin:24px 0 0;font-weight:300;font-size:18px}
.cta-band .eyebrow{color:var(--ioc-g50,#8d8d8d)}
@media(max-width:980px){.cta-band .cta-l,.cta-band .cta-r{grid-column:1/17}.cta-band .cta-r{border-left:0;border-top:1px solid var(--ioc-g80,#393939);padding:0 0 0}.cta-band .cta-l{padding-right:0}}

.section-g10{background:var(--ioc-g10)}
.img-figure{border:1px solid var(--ioc-border-subtle);background:var(--ioc-g10);overflow:hidden}
.img-figure img{width:100%;height:100%;object-fit:cover;display:block}

/* branded panel — product-screen abstraction (shared) */
.brandpanel{border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);display:flex;flex-direction:column;overflow:hidden;width:100%}
.brandpanel .bp-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ioc-border-subtle);background:var(--ioc-g10)}
.brandpanel .bp-bar .dots{display:flex;gap:6px}
.brandpanel .bp-bar .dots i{width:9px;height:9px;border:1px solid var(--ioc-g40);display:block}
.brandpanel .bp-bar .dots i:first-child{background:var(--ioc-blue);border-color:var(--ioc-blue)}
.brandpanel .bp-cap{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-text-helper)}
.brandpanel .bp-canvas{display:block}
.brandpanel .bp-canvas svg{width:100%;height:auto;display:block}

/* ========================================================
   BLOG CARD (shared) — insight tile
   ======================================================== */
.post2{background:var(--ioc-surface,#fff);display:flex;flex-direction:column;transition:background .18s var(--ioc-ease),box-shadow .18s var(--ioc-ease)}
.post2:hover{background:var(--ioc-surface,#fff);box-shadow:var(--ioc-shadow-card);position:relative;z-index:2}
.post2 .p2-thumb{aspect-ratio:16/10;border-bottom:1px solid var(--ioc-border-subtle);background:var(--ioc-g10);position:relative;overflow:hidden}
.post2 .p2-thumb .ln{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 23px,var(--ioc-border-subtle) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--ioc-border-subtle) 23px 24px)}
.post2 .p2-thumb .glyph{position:absolute;left:22px;bottom:18px;width:30px;height:30px;background:var(--ioc-blue)}
.post2 .p2-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1;gap:14px}
.post2 .p2-cat{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ioc-blue)}
.post2 h4{font-size:18px;line-height:1.28;letter-spacing:-.01em}
.post2 .p2-meta{margin-top:auto;font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-text-helper)}
.post2:hover h4{color:var(--ioc-blue)}

/* ========================================================
   Scroll-reveal & motion: owned by ioc-motion.js (shared).
   ======================================================== */

/* Progressive disclosure — native details */
.disclose{border-top:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
.disclose summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-weight:500;font-size:15px}
.disclose summary::-webkit-details-marker{display:none}
.disclose .chev{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.disclose[open] .chev{transform:rotate(180deg)}
.disclose-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s var(--ioc-ease)}
.disclose[open] .disclose-body{grid-template-rows:1fr}
.disclose-body>*{overflow:hidden}

/* InvoiceNow — the ONLY amber on the site */
:root{--ioc-amber:#b45309;--ioc-amber-bg:#fdf6ec;--ioc-amber-line:#e8c79a}
.inv-band{background:var(--ioc-amber-bg);border-top:1px solid var(--ioc-amber-line);border-bottom:1px solid var(--ioc-amber-line)}
.inv-band .wrap{display:flex;gap:24px;align-items:baseline;padding:20px var(--ioc-gutter);flex-wrap:wrap}
.inv-band .ik{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--ioc-amber);white-space:nowrap}
.inv-band p{margin:0;font-size:15px;color:var(--ioc-text-primary);max-width:70ch}
.inv-band a{color:var(--ioc-amber);border-bottom:1px solid currentColor;font-weight:500}

::marker{color:var(--ioc-blue)}

/* service page: spec band */
.specband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ioc-border-subtle);border-top:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
@media(max-width:900px){.specband{grid-template-columns:1fr 1fr}}
.specband .sp{background:var(--ioc-white);padding:28px 24px}
.specband .sp .k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-blue);margin:0 0 10px}
.specband .sp .v{font-size:15px;color:var(--ioc-text-primary);font-weight:600;letter-spacing:-.01em;margin:0}
.specband .sp .d{font-size:13px;color:var(--ioc-text-secondary);margin:6px 0 0;line-height:1.5}

/* service page: FAQ */
.faq{border-top:1px solid var(--ioc-border-subtle)}
details.qa{border-bottom:1px solid var(--ioc-border-subtle)}
details.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:22px 0;font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ioc-text-primary)}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary .qi{font-family:var(--ioc-mono);font-size:13px;color:var(--ioc-blue);flex:none;transition:transform .2s var(--ioc-ease)}
details.qa[open] summary .qi{transform:rotate(45deg)}
details.qa .qa-a{padding:0 0 24px;max-width:70ch;color:var(--ioc-text-secondary);font-size:15px;line-height:1.65}

/* service page: related links */
.relrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
@media(max-width:760px){.relrow{grid-template-columns:1fr}}
.relrow a{background:var(--ioc-white);padding:26px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;position:relative;overflow:hidden;transition:background .18s var(--ioc-ease)}
.relrow a::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--ioc-accent);transition:width .45s var(--ioc-ease)}
.relrow a:hover::after{width:100%}
.relrow a:hover{background:var(--ioc-g10)}
.relrow a .rl{font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--ioc-text-primary)}
.relrow a .rl small{display:block;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper);margin-top:6px;font-weight:400}
.relrow a svg{width:18px;height:18px;color:var(--ioc-blue);flex:none;transition:transform .2s var(--ioc-ease)}
.relrow a:hover svg{transform:translateX(4px)}
.ioc-header{transition:box-shadow .25s var(--ioc-ease)}
.ioc-header.scrolled{box-shadow:0 10px 28px -18px rgba(15,17,60,.22)}


/* ========================================================
   Reduced motion — hard kill-switch (WCAG). Reveals render
   final; hover micro-interactions remain but are instant.
   ======================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],[data-stagger]>*{opacity:1 !important;transform:none !important}
}

/* image placeholder — line grid + glyph (interim until custom SVG) */
.pic-ph{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 23px,var(--ioc-border-subtle) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--ioc-border-subtle) 23px 24px)}
.pic-ph .glyph{position:absolute;left:22px;bottom:18px;width:30px;height:30px;background:var(--ioc-blue)}

/* ========================================================
   INFOC V1 HERO PATTERNS (standard) — home + inner
   Two-panel copy/visual, outcome overlay, home rail,
   inner-page crumbs/meta/technical-visual/capability matrix.
   ======================================================== */
.v1hero{background:linear-gradient(180deg,var(--ioc-surface,#fff) 0%,var(--ioc-surface-subtle,#fbfbfb) 100%);border-bottom:1px solid var(--ioc-border-subtle);padding:clamp(20px,3vw,36px) 0 clamp(28px,4vw,44px)}
.v1hero .hero-shell{display:grid;gap:16px}
.v1hero .hero-main{display:grid;grid-template-columns:minmax(26rem,5fr) minmax(34rem,7fr);gap:16px;align-items:stretch}
.v1hero .copy-panel,.v1hero .inner-copy{min-width:0;background:var(--ioc-g10);border:1px solid var(--ioc-border-subtle);padding:clamp(28px,3vw,52px);display:flex;flex-direction:column;justify-content:center;min-height:36rem}
.v1hero .h-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--ioc-text-primary);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.v1hero .h-eyebrow::before{content:"";width:26px;height:2px;background:var(--ioc-blue);flex:none}
.v1hero h1{margin:0;max-width:13ch;font-size:clamp(44px,5.2vw,86px);font-weight:800;line-height:.96;letter-spacing:-.045em;text-wrap:balance}
.v1hero h1 .em{color:var(--ioc-blue)}
.v1hero .h-lede{max-width:36ch;margin:22px 0 0;color:var(--ioc-text-secondary);font-size:clamp(16px,1.2vw,19px);line-height:1.6;text-wrap:pretty}
.v1hero .h-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.v1hero .h-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 22px;border:1px solid var(--ioc-blue);background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);font-weight:600;font-size:15px;transition:background .2s var(--ioc-ease),transform .2s var(--ioc-ease)}
.v1hero .h-btn svg{width:16px;height:16px;transition:transform .2s var(--ioc-ease)}
.v1hero .h-btn:hover{background:var(--ioc-blue-hover);transform:translateY(-1px)}
.v1hero .h-btn:hover svg{transform:translateX(3px)}
.v1hero .h-btn.ghost{background:transparent;color:var(--ioc-text-primary);border-color:var(--ioc-border-strong)}
.v1hero .h-btn.ghost:hover{background:var(--ioc-surface,#fff);border-color:var(--ioc-text-primary)}
.v1hero .proof-list{display:flex;flex-wrap:wrap;gap:12px 22px;margin:26px 0 0;list-style:none}
.v1hero .proof-list li{display:flex;align-items:center;gap:8px;color:var(--ioc-text-secondary);font-size:14px}
.v1hero .proof-list li::before{content:"";width:8px;height:8px;background:var(--ioc-green);flex:none}
.v1hero .visual-panel,.v1hero .tech-visual{position:relative;min-width:0;border:1px solid var(--ioc-border-subtle);background:var(--ioc-g20);overflow:hidden;min-height:36rem}
.v1hero .visual-panel img,.v1hero .tech-visual img{width:100%;height:100%;object-fit:cover;display:block}
.v1hero .img-caption{position:absolute;left:16px;bottom:16px;z-index:3;display:flex;justify-content:space-between;gap:16px;align-items:flex-end;width:calc(100% - 32px);color:var(--ioc-text-on-color,#fff);font-size:11px;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.v1hero .img-caption strong{font-weight:600}
.v1hero .img-caption span{font-family:var(--ioc-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-g20,#e0e0e0);white-space:nowrap}
.v1hero .capability-strip{position:absolute;left:16px;right:16px;bottom:60px;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 16px 40px rgba(0,0,0,.18)}
.v1hero .hcap{min-width:0;display:grid;grid-template-columns:1.8rem 1fr;gap:11px;align-items:center;padding:13px 15px;border-right:1px solid var(--ioc-border-subtle)}
.v1hero .hcap:last-child{border-right:0}
.v1hero .hcap svg{width:22px;height:22px;color:var(--ioc-blue)}
.v1hero .hcap strong{display:block;font-size:13px;letter-spacing:-.005em}
.v1hero .hcap span{display:block;margin-top:2px;color:var(--ioc-text-secondary);font-size:11.5px;line-height:1.35}
.v1hero .hcap.is-blue{background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.v1hero .hcap.is-blue svg{color:var(--ioc-text-on-color,#fff)}
.v1hero .hcap.is-blue span{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.v1hero .outcome{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:4;width:min(23rem,calc(100% - 32px));background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);box-shadow:0 16px 40px rgba(22,22,22,.18)}
.v1hero .outcome-head{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 16px;border-bottom:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.v1hero .outcome-head .live{color:var(--ioc-green);display:flex;gap:7px;align-items:center}
.v1hero .outcome-head .live::before{content:"";width:7px;height:7px;background:var(--ioc-green)}
.v1hero .route{position:relative;width:100%;display:grid;grid-template-columns:1.4rem 1fr auto;align-items:start;gap:11px;padding:14px 16px;border:0;border-bottom:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);text-align:left;cursor:pointer;font-family:var(--ioc-sans);transition:background .18s var(--ioc-ease)}
.v1hero .route:hover{background:var(--ioc-hover-wash,#f7faff)}
.v1hero .route[aria-pressed="true"]{background:var(--ioc-selected-surface,#edf5ff)}
.v1hero .route[aria-pressed="true"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ioc-blue)}
.v1hero .route .rix{color:var(--ioc-blue);font-family:var(--ioc-mono);font-size:10px;padding-top:2px}
.v1hero .route strong{display:block;font-size:13.5px;line-height:1.2;color:var(--ioc-text-primary)}
.v1hero .route small{display:block;margin-top:3px;color:var(--ioc-text-secondary);font-size:12px;line-height:1.35}
.v1hero .route .rarr{width:16px;height:16px;color:var(--ioc-blue);transition:transform .18s var(--ioc-ease)}
.v1hero .route:hover .rarr{transform:translateX(2px)}
.v1hero .outcome-result{padding:16px;background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff)}
.v1hero .outcome-result span{display:block;color:var(--ioc-g40,#a8a8a8);font-family:var(--ioc-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.v1hero .outcome-result strong{display:block;margin:6px 0 4px;font-size:16px;letter-spacing:-.01em}
.v1hero .outcome-result p{margin:0;color:var(--ioc-g30,#c6c6c6);font-size:12.5px;line-height:1.45}
.v1hero .home-rail{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.v1hero .rail-card{min-width:0;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;min-height:6.5rem;padding:20px 22px;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
.v1hero .rail-card.soft{background:var(--ioc-g10)}
.v1hero a.rail-card.strong{background:var(--ioc-blue);border-color:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);transition:background .2s var(--ioc-ease)}
.v1hero a.rail-card.strong:hover{background:var(--ioc-blue-hover)}
.v1hero .rail-card .rc-n{font-size:clamp(32px,2.8vw,48px);font-weight:700;line-height:.9;letter-spacing:-.05em;color:var(--ioc-text-primary);font-variant-numeric:tabular-nums}
.v1hero .rail-card .rc-ic{width:34px;height:34px;color:var(--ioc-text-on-color,#fff)}
.v1hero .rail-copy{min-width:0}
.v1hero .rail-copy span{display:block;margin-bottom:3px;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ioc-text-helper)}
.v1hero .rail-card.strong .rail-copy span{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.v1hero .rail-copy p{margin:0;color:var(--ioc-text-secondary);font-size:13px;line-height:1.45}
.v1hero .rail-card.strong .rail-copy p{color:var(--ioc-text-on-color,#fff);font-weight:600}
/* inner-page hero extras */
.v1hero .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;color:var(--ioc-text-helper);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.04em}
.v1hero .crumbs a{color:var(--ioc-text-helper)}
.v1hero .crumbs a:hover{color:var(--ioc-blue)}
.v1hero .crumbs .sep{color:var(--ioc-g30)}
.v1hero .crumbs .cur{color:var(--ioc-blue)}
.v1hero .inner-copy h1{max-width:12ch}
.v1hero .inner-copy .h-lede{max-width:34ch}
.v1hero .inner-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.v1hero .inner-meta div{display:flex;flex-direction:column;gap:5px;min-width:10.5rem;padding:12px 14px;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
.v1hero .inner-meta small{font-family:var(--ioc-mono);color:var(--ioc-text-helper);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.v1hero .inner-meta strong{font-size:14px;letter-spacing:-.005em}
.v1hero .tech-chip{position:absolute;left:16px;top:16px;z-index:3;display:inline-flex;flex-direction:column;gap:4px;max-width:20rem;padding:12px 14px;border:1px solid rgba(224,224,224,.85);background:rgba(255,255,255,.92);box-shadow:0 10px 24px rgba(22,22,22,.08)}
.v1hero .tech-chip strong{font-size:13px;line-height:1.3}
.v1hero .tech-chip span{color:var(--ioc-text-secondary);font-family:var(--ioc-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.v1hero .cap-matrix{position:absolute;right:16px;bottom:16px;z-index:3;width:min(22rem,calc(100% - 32px));display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ioc-border-subtle);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 16px 40px rgba(22,22,22,.12)}
.v1hero .cap{padding:14px;border-right:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle);display:flex;flex-direction:column;min-height:7rem}
.v1hero .cap:nth-child(2n){border-right:0}
.v1hero .cap:nth-last-child(-n+2){border-bottom:0}
.v1hero .cap .cix{color:var(--ioc-blue);font-family:var(--ioc-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.v1hero .cap strong{margin:auto 0 3px;font-size:15px}
.v1hero .cap span:last-child{color:var(--ioc-text-secondary);font-size:12px;line-height:1.4}
@media(max-width:1100px){
  .v1hero .hero-main{grid-template-columns:1fr}
  .v1hero .copy-panel,.v1hero .inner-copy{min-height:auto}
  .v1hero .visual-panel,.v1hero .tech-visual{min-height:30rem}
  .v1hero .outcome{top:auto;bottom:16px;transform:none}
  .v1hero .home-rail{grid-template-columns:1fr}
}
@media(max-width:700px){
  .v1hero h1{font-size:clamp(40px,11vw,58px)}
  .v1hero .h-actions{display:grid}.v1hero .h-btn{width:100%}
  .v1hero .visual-panel,.v1hero .tech-visual{display:flex;flex-direction:column;overflow:visible;min-height:auto}
  .v1hero .visual-panel img,.v1hero .tech-visual img{height:20rem}
  .v1hero .outcome,.v1hero .cap-matrix{position:relative;right:auto;top:auto;bottom:auto;transform:none;width:100%;box-shadow:none}
  .v1hero .capability-strip{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:1fr;box-shadow:none}
  .v1hero .hcap{border-right:0;border-bottom:1px solid var(--ioc-border-subtle)}
  .v1hero .hcap:last-child{border-bottom:0}
  .v1hero .img-caption{position:static;width:auto;padding:12px 14px;background:var(--ioc-g100)}
  .v1hero .tech-chip{display:none}
  .v1hero .inner-meta{display:grid;grid-template-columns:1fr}
  .v1hero .cap-matrix{grid-template-columns:1fr}.v1hero .cap{border-right:0}
}

/* ========================================================
   INFOC WEB ELEMENTS (InfocBrandUI v1) — ui-* primitives
   Square, hairline, token-driven. One owner, no leakage.
   ======================================================== */
/* alerts / notices */
.ui-alert{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--ioc-border-subtle);border-left:3px solid var(--ioc-blue);background:var(--ioc-white)}
.ui-alert .ai{width:20px;height:20px;flex:none;color:var(--ioc-blue);margin-top:1px}
.ui-alert .at{font-weight:600;font-size:14.5px;letter-spacing:-.01em;margin:0 0 3px;color:var(--ioc-text-primary)}
.ui-alert .ad{margin:0;font-size:13.5px;color:var(--ioc-text-secondary);line-height:1.5}
.ui-alert.is-success{border-left-color:var(--ioc-green)}.ui-alert.is-success .ai{color:var(--ioc-green)}
.ui-alert.is-warning{border-left-color:var(--ioc-amber);background:var(--ioc-amber-bg)}.ui-alert.is-warning .ai{color:var(--ioc-amber)}
.ui-alert.is-danger{border-left-color:var(--ioc-danger,#da1e28)}.ui-alert.is-danger .ai{color:var(--ioc-danger,#da1e28)}
/* badges */
.ui-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border:1px solid var(--ioc-border-subtle);color:var(--ioc-text-secondary);background:var(--ioc-white)}
.ui-badge.solid{background:var(--ioc-blue);border-color:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.ui-badge.on{color:var(--ioc-green);border-color:var(--ioc-green)}
.ui-badge.off{color:var(--ioc-g60);border-color:var(--ioc-g40)}
.ui-badge .dot{width:7px;height:7px;background:currentColor;flex:none}
/* breadcrumbs */
.ui-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.04em;color:var(--ioc-text-helper)}
.ui-crumbs a{color:var(--ioc-text-helper)}.ui-crumbs a:hover{color:var(--ioc-blue)}
.ui-crumbs .sep{color:var(--ioc-g30)}.ui-crumbs .cur{color:var(--ioc-blue)}
/* tabs */
.ui-tabs{display:flex;border-bottom:1px solid var(--ioc-border-subtle);overflow-x:auto}
.ui-tabs button{position:relative;border:0;background:transparent;font-family:var(--ioc-sans);font-weight:600;font-size:14px;color:var(--ioc-text-secondary);padding:14px 18px;white-space:nowrap;cursor:pointer;transition:color .16s var(--ioc-ease)}
.ui-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ioc-blue);transform:scaleX(0);transition:transform .2s var(--ioc-ease)}
.ui-tabs button:hover{color:var(--ioc-text-primary)}
.ui-tabs button[aria-selected="true"]{color:var(--ioc-blue)}
.ui-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.ui-tabpanel{padding:22px 2px;font-size:15px;color:var(--ioc-text-secondary);line-height:1.6}
.ui-tabpanel[hidden]{display:none}
/* switch */
.ui-switch{position:relative;display:inline-block;width:48px;height:26px;flex:none;vertical-align:middle}
.ui-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ui-switch .track{position:absolute;inset:0;background:var(--ioc-g50);transition:background .2s var(--ioc-ease)}
.ui-switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--ioc-text-on-color,#fff);transition:transform .2s var(--ioc-ease)}
.ui-switch input:checked+.track{background:var(--ioc-blue)}
.ui-switch input:checked+.track::after{transform:translateX(22px)}
.ui-switch input:focus-visible+.track{box-shadow:var(--ioc-shadow-focus)}
.ui-switch input:disabled+.track{opacity:.5;cursor:not-allowed}
/* checkbox + radio */
.ui-opt{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ioc-text-primary);cursor:pointer;user-select:none}
.ui-opt input{position:absolute;opacity:0;width:0;height:0}
.ui-opt .mk{width:20px;height:20px;border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);flex:none;display:grid;place-items:center;transition:background .14s var(--ioc-ease),border-color .14s var(--ioc-ease)}
.ui-opt.radio .mk{border-radius:50%!important}
.ui-opt .mk svg{width:13px;height:13px;color:var(--ioc-text-on-color,#fff);opacity:0;transition:opacity .12s var(--ioc-ease)}
.ui-opt.radio .mk::after{content:"";width:9px;height:9px;border-radius:50%!important;background:var(--ioc-text-on-color,#fff);transform:scale(0);transition:transform .14s var(--ioc-ease)}
.ui-opt input:checked+.mk{background:var(--ioc-blue);border-color:var(--ioc-blue)}
.ui-opt input:checked+.mk svg{opacity:1}
.ui-opt.radio input:checked+.mk::after{transform:scale(1)}
.ui-opt input:focus-visible+.mk{box-shadow:var(--ioc-shadow-focus)}
.ui-opt input:disabled+.mk{opacity:.5}
/* select */
.ui-select{position:relative;display:inline-flex;align-items:center;min-width:220px;background:var(--ioc-g10);border-bottom:1px solid var(--ioc-border-strong)}
.ui-select select{appearance:none;-webkit-appearance:none;width:100%;border:0;background:transparent;font-family:var(--ioc-sans);font-size:15px;color:var(--ioc-text-primary);padding:12px 40px 12px 16px;outline:none;cursor:pointer}
.ui-select::after{content:"";position:absolute;right:16px;width:9px;height:9px;border-right:2px solid var(--ioc-text-primary);border-bottom:2px solid var(--ioc-text-primary);transform:rotate(45deg) translateY(-3px);pointer-events:none}
.ui-select:focus-within{box-shadow:inset 0 0 0 2px var(--ioc-blue);background:var(--ioc-surface,#fff);border-bottom-color:var(--ioc-blue)}
/* pagination */
.ui-pager{display:flex;gap:0;border:1px solid var(--ioc-border-subtle);width:max-content}
.ui-pager a,.ui-pager span{min-width:44px;height:44px;display:grid;place-items:center;font-family:var(--ioc-mono);font-size:13px;color:var(--ioc-text-secondary);border-left:1px solid var(--ioc-border-subtle);transition:background .14s var(--ioc-ease),color .14s var(--ioc-ease)}
.ui-pager a:first-child,.ui-pager span:first-child{border-left:0}
.ui-pager a:hover{background:var(--ioc-g10);color:var(--ioc-text-primary)}
.ui-pager a[aria-current="page"]{background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.ui-pager .dots{color:var(--ioc-g40)}
/* tooltip */
.ui-tip{position:relative;display:inline-flex}
.ui-tip .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff);font-size:12px;line-height:1.4;padding:8px 11px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s var(--ioc-ease),transform .16s var(--ioc-ease);z-index:var(--ioc-z-tooltip)}
.ui-tip .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ioc-g100)}
.ui-tip:hover .tip,.ui-tip:focus-within .tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* progress */
.ui-progress{height:6px;background:var(--ioc-g20);overflow:hidden}
.ui-progress .bar{height:100%;background:var(--ioc-blue);transition:width .6s var(--ioc-ease-out)}
.ui-meter{display:flex;justify-content:space-between;font-family:var(--ioc-mono);font-size:11px;color:var(--ioc-text-helper);margin-bottom:8px;letter-spacing:.04em}
/* steps */
.ui-steps{display:flex;flex-wrap:wrap;gap:0}
.ui-steps .st{display:flex;align-items:center;gap:12px;padding-right:28px}
.ui-steps .sn{width:30px;height:30px;flex:none;display:grid;place-items:center;border:1px solid var(--ioc-border-strong);font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-text-secondary)}
.ui-steps .st.done .sn{background:var(--ioc-blue);border-color:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff)}
.ui-steps .st.now .sn{border-color:var(--ioc-blue);color:var(--ioc-blue)}
.ui-steps .sl{font-size:14px;font-weight:600;letter-spacing:-.005em}
.ui-steps .st.now .sl{color:var(--ioc-blue)}
.ui-steps .st:not(:last-child)::after{content:"";width:36px;height:1px;background:var(--ioc-border-strong)}
/* avatar */
.ui-avatar{width:40px;height:40px;display:grid;place-items:center;background:var(--ioc-blue);color:var(--ioc-text-on-primary,#fff);font-weight:700;font-size:14px;flex:none}
.ui-avatar.g{background:var(--ioc-g80)}
.ui-avatar-stack{display:flex}
.ui-avatar-stack .ui-avatar{box-shadow:0 0 0 2px var(--ioc-surface,#fff);margin-left:-10px}
.ui-avatar-stack .ui-avatar:first-child{margin-left:0}
/* empty state */
.ui-empty{border:1px dashed var(--ioc-border-strong);background:var(--ioc-g10);padding:40px 24px;text-align:center}
.ui-empty .ei{width:40px;height:40px;color:var(--ioc-g40);margin:0 auto 14px}
.ui-empty h4{font-size:17px;letter-spacing:-.01em;margin:0 0 6px}
.ui-empty p{margin:0 auto 18px;font-size:14px;color:var(--ioc-text-secondary);max-width:40ch;line-height:1.55}
/* dropdown menu */
.ui-menu{border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);box-shadow:var(--ioc-shadow-lg);min-width:220px;padding:6px 0}
.ui-menu a,.ui-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;border:0;background:transparent;font-family:var(--ioc-sans);font-size:14px;color:var(--ioc-text-primary);text-align:left;cursor:pointer;transition:background .12s var(--ioc-ease)}
.ui-menu a:hover,.ui-menu button:hover{background:var(--ioc-g10);color:var(--ioc-blue)}
.ui-menu .sep{height:1px;background:var(--ioc-border-subtle);margin:6px 0}
.ui-menu svg{width:16px;height:16px;color:var(--ioc-text-helper)}
/* toast */
.ui-toast{display:flex;align-items:flex-start;gap:12px;background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff);padding:14px 16px;box-shadow:var(--ioc-shadow-lg);min-width:280px;max-width:380px;border-left:3px solid var(--ioc-green)}
.ui-toast .ti{width:18px;height:18px;color:var(--ioc-green);flex:none;margin-top:1px}
.ui-toast strong{display:block;font-size:14px}
.ui-toast p{margin:2px 0 0;font-size:12.5px;color:var(--ioc-g30,#c6c6c6);line-height:1.45}
/* modal */
.ui-modal-overlay{position:fixed;inset:0;background:rgba(22,22,22,.55);display:none;place-items:center;z-index:var(--ioc-z-modal);padding:24px}
.ui-modal-overlay.open{display:grid}
.ui-modal{width:min(100%,32rem);background:var(--ioc-surface,#fff);box-shadow:0 24px 60px -20px rgba(10,12,60,.4);border-top:3px solid var(--ioc-blue)}
.ui-modal .mh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 22px 0}
.ui-modal .mh h3{font-size:20px;letter-spacing:-.015em}
.ui-modal .mx{width:36px;height:36px;border:0;background:transparent;color:var(--ioc-text-primary);cursor:pointer;display:grid;place-items:center}
.ui-modal .mx:hover{color:var(--ioc-blue)}
.ui-modal .mb{padding:14px 22px 8px;color:var(--ioc-text-secondary);font-size:14.5px;line-height:1.6}
.ui-modal .mf{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 22px}
/* data table */
.ui-table{width:100%;border-collapse:collapse;border:1px solid var(--ioc-border-subtle)}
.ui-table th,.ui-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--ioc-border-subtle);font-size:14px}
.ui-table thead th{background:var(--ioc-g10);border-bottom:1px solid var(--ioc-border-strong);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-text-helper);font-weight:400}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table tbody tr{transition:background .14s var(--ioc-ease)}
.ui-table tbody tr:hover{background:var(--ioc-g10)}
.ui-table td.num{font-family:var(--ioc-mono);font-variant-numeric:tabular-nums;text-align:right}

/* Family accent standard: Solutions=blue, Academy=purple, Talents Gateway=green,
   Industries=teal, Company=slate. --ioc-accent-ink is the AA-safe text value for
   each family (identical to the accent unless the accent is too light for body text). */
[data-page-family="Academy"]{--ioc-accent:var(--ioc-fam-academy);--ioc-accent-hover:var(--ioc-fam-academy-hover);--ioc-accent-ink:var(--ioc-fam-academy)}
[data-page-family="Talents Gateway"]{--ioc-accent:var(--ioc-fam-talents);--ioc-accent-hover:var(--ioc-fam-talents-hover);--ioc-accent-ink:var(--ioc-fam-talents-ink)}
/* Industries and Company have no page-wide accent yet: their values are scoped to
   the closing band only, so no live CTA or hero accent changes colour. */
[data-page-family="Industries"] .ioc-fam{--ioc-accent:var(--ioc-fam-industries);--ioc-accent-ink:var(--ioc-fam-industries-ink)}
[data-page-family="Company"] .ioc-fam{--ioc-accent:var(--ioc-fam-company);--ioc-accent-ink:var(--ioc-fam-company)}
.ioc-footer h3.fam-sol{color:var(--ioc-blue,#0001ff)}
.ioc-footer h3.fam-aca{color:var(--ioc-fam-academy,#6929c4)}
.ioc-footer h3.fam-tal{color:var(--ioc-fam-talents,#1a7a52)}
/* Family tint band: closing links section, driven by the family accent */
.ioc-fam{background:color-mix(in oklch,var(--ioc-accent) 10%,var(--ioc-surface));border-top:3px solid var(--ioc-accent)}
.ioc-fam .ioc-kicker{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-fam .ioc-kicker::before{background:var(--ioc-accent)}
.ioc-fam .ioc-related{background:color-mix(in oklch,var(--ioc-accent) 24%,var(--ioc-surface));border-color:color-mix(in oklch,var(--ioc-accent) 24%,var(--ioc-surface))}
.ioc-fam .ioc-related a:hover{background:color-mix(in oklch,var(--ioc-accent) 6%,var(--ioc-surface))}
.ioc-fam .ioc-related .ioc-rel-k,.ioc-fam .ioc-related .ioc-rel-go{color:var(--ioc-accent-ink,var(--ioc-accent))}

/* ---- absorbed from ioc-blocks.css (CMS-D-071) ---- */
/* ============================================================
   InfocBrandUI v1 · inner-page block library (idc namespace)
   Loaded AFTER ioc-core.css on every inner page. Implements the
   governed CMS blocks (B-01..B-24) on carbon tokens: white-first,
   square controls, blue lead, short reveal motion. No gradients,
   particles or rounded startup cards.
   ============================================================ */

/* ---- shared section scaffold ---- */
.ioc-block{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
.ioc-block.tight{padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(48px,5vw,72px)}
.ioc-block.soft{background:var(--ioc-g10)}
.ioc-block.dark{background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff)}
.ioc-block.dark .body,.ioc-block.dark p{color:var(--ioc-g30)}
.ioc-block.dark h2,.ioc-block.dark h3,.ioc-block.dark b,.ioc-block.dark strong{color:var(--ioc-text-on-color,#fff)}

/* section header: heading left, supporting note right */
.ioc-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.ioc-head>p{margin:0;color:var(--ioc-text-secondary);font-size:16px;line-height:1.55;max-width:46ch}
.ioc-block.dark .ioc-head>p{color:var(--ioc-g30)}
.ioc-kicker{display:flex;align-items:center;gap:10px;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-primary);margin:0 0 14px}
.ioc-kicker::before{content:"";width:22px;height:2px;background:var(--ioc-accent);flex:none}
.ioc-kicker.teal::before{background:var(--ioc-teal,#08bdba)}
.ioc-block.dark .ioc-kicker{color:var(--ioc-text-on-color,#fff)}
.ioc-head h2,.ioc-h2{margin:0;font-size:clamp(28px,3.2vw,46px);font-weight:700;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
@media(max-width:860px){.ioc-head{grid-template-columns:1fr;align-items:start}}

/* ---- B-02 Inner hero · Light Technical Split ---- */
.ioc-hero{background:linear-gradient(180deg,var(--ioc-surface,#fff) 0%,var(--ioc-surface-subtle,#fbfbfb) 100%);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4vw,64px);align-items:center;padding-top:clamp(36px,4vw,60px);padding-bottom:clamp(36px,4vw,60px)}
.ioc-hero-copy{min-width:0}
.ioc-crumb{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.04em;color:var(--ioc-text-helper);margin:0 0 20px}
.ioc-crumb a{color:var(--ioc-text-helper)}
.ioc-crumb a:hover{color:var(--ioc-accent)}
.ioc-hero h1{margin:0;font-size:clamp(34px,4.4vw,64px);font-weight:800;line-height:1.0;letter-spacing:-.035em;text-wrap:balance}
.ioc-hero h1 .em{color:var(--ioc-accent)}
.ioc-hero .ioc-lede{max-width:52ch;margin:20px 0 0;color:var(--ioc-text-secondary);font-size:clamp(16px,1.15vw,18px);line-height:1.6;text-wrap:pretty}
.ioc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ioc-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px;max-width:100%}
.ioc-chips-label{display:inline-flex;align-items:center;margin-right:4px;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-g60,#666666);white-space:nowrap}
.ioc-chip{position:relative;display:inline-flex;align-items:center;gap:9px;padding:10px 15px;background:var(--ioc-surface-cool,#f2f4f8);border:1px solid transparent;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-primary,#161616);text-decoration:none;white-space:nowrap;transition:background .18s var(--ioc-ease),color .18s var(--ioc-ease),border-color .18s var(--ioc-ease)}
.ioc-chip svg{flex:none;width:16px;height:16px;color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
.ioc-chip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ioc-accent);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ioc-ease)}
a.ioc-chip:hover{background:var(--ioc-surface,#fff);border-color:var(--ioc-text-primary,#161616)}
a.ioc-chip:hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.ioc-chip,.ioc-chip::after{transition:none}}
@media(max-width:640px){.ioc-chip{font-size:10.5px;padding:9px 12px}}
.ioc-hero-visual{position:relative;min-width:0;display:flex}
.ioc-hero-figure{position:relative;flex:1;border:1px solid var(--ioc-border-subtle);overflow:hidden;min-height:clamp(26rem,34vw,34rem);background:var(--ioc-g20);margin:0}
.ioc-hero-figure img{width:100%;height:100%;object-fit:cover;display:block}
.ioc-hero-figure::after{content:"";position:absolute;inset:56% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.52));pointer-events:none}
.ioc-hero-figure figcaption{position:absolute;left:16px;top:16px;right:16px;z-index:2;max-width:22rem;padding:13px 15px;border:1px solid rgba(224,224,224,.85);background:rgba(255,255,255,.94);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.ioc-hero-figure figcaption b,.ioc-hero-figure figcaption strong{display:block;font-family:var(--ioc-sans);font-size:13px;font-weight:600;line-height:1.35;color:var(--ioc-text-primary);letter-spacing:-.005em;text-transform:none}
.ioc-hero-figure figcaption span{display:block;margin-top:4px;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-matrix{position:absolute;right:16px;bottom:16px;z-index:3;width:min(23rem,calc(100% - 32px));display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle);box-shadow:0 16px 40px rgba(0,0,0,.14);backdrop-filter:blur(12px)}
.ioc-matrix>div{background:rgba(255,255,255,.96);padding:14px 16px;min-height:5.5rem;display:flex;flex-direction:column;justify-content:center}
.ioc-matrix b{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ioc-text-primary);letter-spacing:-.01em}
.ioc-matrix b svg{flex:none;width:17px;height:17px;color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff));stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ioc-matrix span{display:block;margin-top:4px;font-size:12.5px;color:var(--ioc-text-secondary);line-height:1.4}
/* Auto-spotlight: one tile lit at a time, light ground */
.ioc-matrix[data-spotlight]{box-shadow:0 20px 52px rgba(0,0,0,.26)}
.ioc-matrix[data-spotlight]>div{position:relative;overflow:hidden;background:var(--ioc-surface,#fff);cursor:pointer;transition:background .4s var(--ioc-ease,cubic-bezier(.2,.8,.2,1))}
.ioc-matrix[data-spotlight]>div b{color:var(--ioc-text-helper,#5c5c5c);transition:color .32s}
.ioc-matrix[data-spotlight]>div b svg{color:var(--ioc-g40,#a8a8a8);transition:color .32s,transform .42s var(--ioc-ease,cubic-bezier(.2,.8,.2,1))}
.ioc-matrix[data-spotlight]>div span{color:var(--ioc-g60,#666666);transform:translateY(3px);transition:color .32s,transform .42s var(--ioc-ease,cubic-bezier(.2,.8,.2,1))}
.ioc-matrix[data-spotlight]>div.on{background:var(--ioc-surface,#fff)}
.ioc-matrix[data-spotlight]>div.on b{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
.ioc-matrix[data-spotlight]>div.on b svg{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff));transform:scale(1.1)}
.ioc-matrix[data-spotlight]>div.on span{color:var(--ioc-text-primary,#161616);transform:none}
.ioc-matrix[data-spotlight] .ioc-mx-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ioc-accent,#0001ff);transform:scaleX(0);transform-origin:left}
.ioc-matrix[data-spotlight]>div.on .ioc-mx-bar{animation:iocMxBar 3.4s linear forwards}
@keyframes iocMxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.ioc-matrix[data-spotlight]>div,.ioc-matrix[data-spotlight]>div b,.ioc-matrix[data-spotlight]>div b svg,.ioc-matrix[data-spotlight]>div span{transition:none}.ioc-matrix[data-spotlight]>div.on b svg{transform:none}.ioc-matrix[data-spotlight] .ioc-mx-bar{display:none}}
/* ---- Inner-page local section nav ---- */
.ioc-localnav{position:sticky;top:72px;z-index:80;background:rgba(255,255,255,.97);border-bottom:1px solid var(--ioc-border-subtle);backdrop-filter:blur(12px)}
.ioc-localnav .wrap{display:flex;overflow-x:auto;scrollbar-width:none;padding:0}
.ioc-localnav .wrap::-webkit-scrollbar{display:none}
.ioc-localnav a{display:flex;align-items:center;min-height:3.5rem;padding:0 18px;white-space:nowrap;border-right:1px solid var(--ioc-border-subtle);font-size:14px;font-weight:600;color:var(--ioc-text-secondary);transition:background .16s var(--ioc-ease),color .16s var(--ioc-ease)}
.ioc-localnav a:first-child{border-left:1px solid var(--ioc-border-subtle)}
.ioc-localnav a:hover{background:var(--ioc-g10);color:var(--ioc-accent)}
.ioc-localnav a.active,.ioc-localnav a[aria-current="true"]{color:var(--ioc-accent);box-shadow:inset 0 -3px var(--ioc-accent)}
.ioc-block[id],.ioc-hero[id]{scroll-margin-top:8rem}
@media(max-width:1000px){.ioc-localnav{top:64px}}
@media(max-width:860px){.ioc-hero .wrap{grid-template-columns:1fr;gap:28px}.ioc-hero-visual{order:2}.ioc-hero-figure{min-height:22rem}.ioc-hero-figure::after{display:none}.ioc-hero-figure figcaption{position:static;max-width:none;border:0;border-bottom:1px solid var(--ioc-border-subtle);box-shadow:none}.ioc-matrix{position:relative;right:auto;bottom:auto;width:100%;box-shadow:none;border-top:0}}

/* ---- B-06 Card grid ---- */
.ioc-cards{display:grid;gap:1px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle)}
.ioc-cards>*{box-shadow:0 0 0 1px var(--ioc-border-subtle)}
.ioc-cards.two{grid-template-columns:repeat(2,1fr)}
.ioc-cards.three{grid-template-columns:repeat(3,1fr)}
.ioc-cards.four{grid-template-columns:repeat(4,1fr)}
.ioc-card{position:relative;background:var(--ioc-surface,#fff);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;min-width:0;transition:background .18s var(--ioc-ease)}
.ioc-card:hover{background:var(--ioc-g10)}
.ioc-card .ioc-card-ix{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.08em;color:var(--ioc-accent);margin:0 0 18px}
.ioc-card .ioc-card-ix .ioc-cardicon{width:30px;height:30px;color:var(--ioc-accent);display:block}
.ioc-card .ioc-card-eyebrow{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper);margin:0 0 10px}
.ioc-card h3{margin:0 0 10px;font-size:clamp(18px,1.5vw,22px);font-weight:700;letter-spacing:-.015em}
.ioc-card p{margin:0;color:var(--ioc-text-secondary);font-size:15px;line-height:1.55;flex:1}
.ioc-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.ioc-tag{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.03em;border:1px solid var(--ioc-border-subtle);color:var(--ioc-text-secondary);padding:4px 8px}
.ioc-tag.ai{border-color:var(--ioc-accent);color:var(--ioc-accent)}
.ioc-card .ioc-card-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--ioc-accent);font-weight:600;font-size:15px}
.ioc-card .ioc-card-link svg{width:16px;height:16px;transition:transform .18s var(--ioc-ease)}
.ioc-card:hover .ioc-card-link svg{transform:translateX(4px)}
.ioc-card.tap{cursor:pointer}
.ioc-card.tap::after{content:"";position:absolute;inset:0}
@media(max-width:960px){.ioc-cards.three,.ioc-cards.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ioc-cards.two,.ioc-cards.three,.ioc-cards.four{grid-template-columns:1fr}}

/* ---- Feature grid (outcomes) ---- */
.ioc-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-feature{position:relative;background:var(--ioc-surface,#fff);padding:clamp(26px,2.4vw,34px);overflow:hidden;transition:background .3s var(--ioc-ease)}
.ioc-feature::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--ioc-accent);transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ioc-ease)}
.ioc-feature:hover{background:var(--ioc-hover-wash,#f7faff)}
.ioc-feature:hover::before{transform:scaleX(1)}
.ioc-feature .ioc-fmark{width:auto;height:auto;display:block;border:0;margin-bottom:clamp(14px,1.4vw,20px);font-family:var(--ioc-mono);font-size:clamp(34px,3.4vw,46px);font-weight:400;line-height:.9;letter-spacing:-.04em;color:var(--ioc-g30,#c6c6c6);transition:color .3s var(--ioc-ease),transform .38s var(--ioc-ease);transform-origin:left center}
.ioc-feature:hover .ioc-fmark{color:var(--ioc-accent)}
.ioc-feature .ioc-fmark svg{width:30px;height:30px;display:block;color:var(--ioc-accent)}
.ioc-feature b{display:block;font-size:clamp(17px,1.35vw,20px);font-weight:700;margin-bottom:8px;letter-spacing:-.02em;line-height:1.2}
.ioc-feature p{margin:0;color:var(--ioc-text-secondary);font-size:14.5px;line-height:1.55;text-wrap:pretty}
@media(max-width:900px){.ioc-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ioc-features{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ioc-feature,.ioc-feature::before,.ioc-feature .ioc-fmark,.ioc-chip,.ioc-chip::after{transition:none}}

/* ---- B-11 Delivery lifecycle / process ---- */
.ioc-process{display:grid;grid-template-columns:repeat(6,1fr);gap:0;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);overflow:hidden}
.ioc-step{box-shadow:1px 1px 0 0 var(--ioc-border-subtle)}
.ioc-block.dark .ioc-process{background:var(--ioc-surface-inverse-raised,#1c1c1c);border-color:var(--ioc-g80);overflow:hidden}
.ioc-block.dark .ioc-step{box-shadow:1px 1px 0 0 var(--ioc-g80)}
.ioc-step{background:var(--ioc-surface,#fff);padding:clamp(20px,1.8vw,26px);display:flex;flex-direction:column;gap:10px}
.ioc-block.dark .ioc-step{background:var(--ioc-g90)}
.ioc-step .ioc-step-n{font-family:var(--ioc-mono);font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ioc-accent)}
.ioc-block.dark .ioc-step .ioc-step-n{color:var(--ioc-accent-on-inverse)}
.ioc-step b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.ioc-step p{margin:0;font-size:13px;line-height:1.5;color:var(--ioc-text-secondary)}

/* B-11 step shading: each stage a step lighter than the last, so the strip reads as one path. */
.dark .ioc-process .ioc-step:nth-child(1){background:var(--ioc-surface-inverse-raised,#1c1c1c)}
.dark .ioc-process .ioc-step:nth-child(2){background:color-mix(in srgb,var(--ioc-surface-inverse-raised) 97.8%,white)}
.dark .ioc-process .ioc-step:nth-child(3){background:var(--ioc-g90,#262626)}
.dark .ioc-process .ioc-step:nth-child(4){background:color-mix(in srgb,var(--ioc-surface-inverse-raised) 93.39%,white)}
.dark .ioc-process .ioc-step:nth-child(5){background:color-mix(in srgb,var(--ioc-surface-inverse-raised) 91.19%,white)}
.dark .ioc-process .ioc-step:nth-child(6){background:color-mix(in srgb,var(--ioc-surface-inverse-raised) 88.99%,white)}
.ioc-block:not(.dark) .ioc-step b{color:var(--ioc-text-primary)}
.ioc-block:not(.dark) .ioc-step p{color:var(--ioc-text-secondary)}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(1){background:var(--ioc-surface,#fff)}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(2){background:color-mix(in oklch,var(--ioc-accent) 2%,var(--ioc-surface))}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(3){background:color-mix(in oklch,var(--ioc-accent) 4%,var(--ioc-surface))}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(4){background:color-mix(in oklch,var(--ioc-accent) 6%,var(--ioc-surface))}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(5){background:color-mix(in oklch,var(--ioc-accent) 8%,var(--ioc-surface))}
.ioc-block:not(.dark) .ioc-process .ioc-step:nth-child(6){background:color-mix(in oklch,var(--ioc-accent) 10%,var(--ioc-surface))}

@media(max-width:1080px){.ioc-process{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.ioc-process{grid-template-columns:1fr}}

/* ---- B-08 Capability matrix ---- */
.ioc-cap{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-cap>div{background:var(--ioc-surface,#fff);padding:clamp(22px,2vw,30px)}
.ioc-cap h3{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.ioc-cap ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ioc-cap li{position:relative;padding-left:20px;font-size:14px;color:var(--ioc-text-secondary);line-height:1.5}
.ioc-cap li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;background:var(--ioc-accent)}
@media(max-width:720px){.ioc-cap{grid-template-columns:1fr}}

/* ---- B-05 Outcome navigator ---- */
.ioc-nav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle);margin-bottom:0}
.ioc-nav-btn{background:var(--ioc-surface,#fff);border:0;text-align:left;padding:18px 20px;cursor:pointer;display:block;transition:background .16s var(--ioc-ease)}
.ioc-nav-btn:hover{background:var(--ioc-g10)}
.ioc-nav-btn[aria-pressed="true"]{background:var(--ioc-selected-surface,#edf5ff);box-shadow:inset 3px 0 0 var(--ioc-accent)}
.ioc-nav-btn b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.ioc-nav-btn span{display:block;font-size:13px;color:var(--ioc-text-secondary);line-height:1.45}
.ioc-rec{border:1px solid var(--ioc-accent);background:var(--ioc-hover-wash,#f7faff);padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column;gap:8px;justify-content:center}
.ioc-rec .ioc-rec-k{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-accent)}
.ioc-rec h3{margin:0;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.015em}
.ioc-rec p{margin:0;color:var(--ioc-text-secondary);font-size:15px;line-height:1.55}
.ioc-rec a{margin-top:8px;align-self:flex-start}
.ioc-nav-split{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:stretch}
@media(max-width:860px){.ioc-nav-split{grid-template-columns:1fr}.ioc-nav-grid{grid-template-columns:1fr}}

/* ---- B-12 CTA band ---- */
.ioc-cta{background:linear-gradient(115deg,var(--ioc-selected-surface,#edf5ff) 0%,var(--ioc-hover-wash,#f7faff) 58%,var(--ioc-wash-pink,#fff1f7) 150%);color:var(--ioc-text-primary);border-top:1px solid var(--ioc-border-subtle)}
.ioc-cta .ioc-cta-panel{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.ioc-cta .ioc-kicker{color:var(--ioc-accent)}
.ioc-cta h2{margin:0;font-size:clamp(26px,3vw,42px);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ioc-text-primary);text-wrap:balance}
.ioc-cta p{margin:16px 0 0;color:var(--ioc-text-secondary);font-size:16px;line-height:1.6;max-width:52ch}
.ioc-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:860px){.ioc-cta .ioc-cta-panel{grid-template-columns:1fr}}
.ioc-cta-panel.has-form{grid-template-columns:1fr 1fr;align-items:start}
.ioc-cta-panel.has-form>div:first-child{align-self:center}
.ioc-cta-form{position:relative;display:flex;flex-direction:column;gap:16px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);box-shadow:0 1px 2px rgba(16,22,60,.05);padding:clamp(20px,2.2vw,28px)}
.ioc-cta-form::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--ioc-accent)}
.ioc-cta-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ioc-cta-field{display:flex;flex-direction:column;gap:7px}
.ioc-cta-field>span{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-secondary)}
.ioc-cta-field input{border:1px solid var(--ioc-g30);background:var(--ioc-surface,#fff);color:var(--ioc-text-primary);font-family:var(--ioc-sans);font-size:15px;padding:12px 14px}
.ioc-cta-field input::placeholder{color:var(--ioc-g60)}
.ioc-cta-field input:focus{outline:0;border-color:var(--ioc-accent);box-shadow:0 0 0 3px rgba(0,1,255,.14);background:var(--ioc-surface,#fff)}
.ioc-cta-field.invalid input{border-color:var(--ioc-danger,#da1e28);box-shadow:0 0 0 3px rgba(218,30,40,.14)}
.ioc-cta-form>.btn{align-self:stretch;justify-content:space-between;min-height:52px;font-weight:700}
.ioc-cta-reassure{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0}
.ioc-cta-reassure span{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;color:var(--ioc-text-secondary)}
.ioc-cta-reassure span svg{width:16px;height:16px;flex:none;color:var(--ioc-green)}
.ioc-cta-form.is-sent .ioc-cta-reassure{display:none}
.ioc-cta-note{margin:0;font-family:var(--ioc-mono);font-size:12px;line-height:1.55;color:var(--ioc-text-secondary)}
.ioc-cta-note a{color:var(--ioc-accent);text-decoration:underline}
.ioc-cta-confirm{display:none;margin:0;font-size:16px;line-height:1.5;color:var(--ioc-text-primary)}
.ioc-cta-confirm b{display:block;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-accent);margin-bottom:8px;font-weight:400}
.ioc-cta-form.is-sent .ioc-cta-fields,.ioc-cta-form.is-sent>.btn,.ioc-cta-form.is-sent .ioc-cta-note{display:none}
.ioc-cta-form.is-sent .ioc-cta-confirm{display:block}
@media(max-width:860px){.ioc-cta-panel.has-form{grid-template-columns:1fr}.ioc-cta-fields{grid-template-columns:1fr}}

/* ---- B-16 FAQ ---- */
.ioc-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(28px,4vw,64px);align-items:start}
.ioc-faq-list{display:flex;flex-direction:column;border-top:1px solid var(--ioc-border-subtle)}
.ioc-faq-item{border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ioc-text-primary)}
.ioc-faq-item summary::-webkit-details-marker{display:none}
.ioc-faq-item summary .ioc-faq-sign{flex:none;width:22px;height:22px;position:relative;transition:transform .2s var(--ioc-ease)}
.ioc-faq-item summary .ioc-faq-sign::before,.ioc-faq-item summary .ioc-faq-sign::after{content:"";position:absolute;background:var(--ioc-accent)}
.ioc-faq-item summary .ioc-faq-sign::before{left:0;top:10px;width:22px;height:2px}
.ioc-faq-item summary .ioc-faq-sign::after{left:10px;top:0;width:2px;height:22px;transition:transform .2s var(--ioc-ease)}
.ioc-faq-item[open] summary .ioc-faq-sign::after{transform:scaleY(0)}
.ioc-faq-item p{margin:0 0 20px;color:var(--ioc-text-secondary);font-size:15px;line-height:1.6;max-width:60ch}
@media(max-width:860px){.ioc-faq{grid-template-columns:1fr;gap:24px}}

/* ---- B-17 Related pages ---- */
.ioc-related{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-related a{background:var(--ioc-surface,#fff);padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:8px;transition:background .16s var(--ioc-ease)}
.ioc-related a:hover{background:var(--ioc-g10)}
.ioc-related .ioc-rel-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-related b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.ioc-related span.d{color:var(--ioc-text-secondary);font-size:14px;line-height:1.5}
.ioc-related .ioc-rel-go{margin-top:auto;color:var(--ioc-accent);font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.ioc-related .ioc-rel-go svg{width:16px;height:16px;flex:none;transition:transform .18s var(--ioc-ease)}
.ioc-related a:hover .ioc-rel-go svg{transform:translateX(3px)}
@media(max-width:860px){.ioc-related{grid-template-columns:1fr}}

/* ---- B-09 Media split ---- */
.ioc-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.ioc-media.flip .ioc-media-fig{order:2}
.ioc-media-fig{border:1px solid var(--ioc-border-subtle);overflow:hidden;background:var(--ioc-surface,#fff)}
.ioc-media-fig img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--ioc-g20)}
.ioc-media-fig figcaption{padding:12px 14px;border-top:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-secondary);line-height:1.5}
.ioc-media ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ioc-media li{position:relative;padding-left:22px;font-size:15px;color:var(--ioc-text-secondary);line-height:1.5}
.ioc-media li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;background:var(--ioc-accent)}
@media(max-width:860px){.ioc-media{grid-template-columns:1fr;gap:24px}.ioc-media.flip .ioc-media-fig{order:0}}

/* ---- B-19 KPI / evidence strip ---- */
.ioc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-kpi{background:var(--ioc-surface,#fff);padding:clamp(22px,2.2vw,30px)}
.ioc-block.dark .ioc-kpi{background:var(--ioc-g90)}
.ioc-kpi .n{font-size:clamp(30px,3.4vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ioc-kpi .l{margin-top:10px;font-size:14px;color:var(--ioc-text-secondary);line-height:1.45}
@media(max-width:820px){.ioc-kpis{grid-template-columns:repeat(2,1fr)}}

/* ---- B-13 Search / filter directory ---- */
.ioc-dir-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.ioc-dir-search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);padding:0 14px;height:48px}
.ioc-dir-search svg{width:18px;height:18px;color:var(--ioc-text-helper);flex:none}
.ioc-dir-search input{flex:1;border:0;outline:0;font-family:var(--ioc-sans);font-size:15px;background:transparent;color:var(--ioc-text-primary)}
.ioc-filter{display:inline-flex;align-items:center;height:48px;padding:0 16px;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);font-family:var(--ioc-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ioc-text-secondary);cursor:pointer;transition:all .15s var(--ioc-ease)}
.ioc-filter[aria-pressed="true"]{border-color:var(--ioc-accent);color:var(--ioc-accent);background:var(--ioc-hover-wash,#f7faff)}
.ioc-dir{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-dir-item{background:var(--ioc-surface,#fff);padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:8px}
.ioc-dir-item[hidden]{display:none}
.ioc-dir-item .ioc-dir-meta{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-dir-item h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.ioc-dir-item p{margin:0;font-size:14px;color:var(--ioc-text-secondary);line-height:1.5}
@media(max-width:760px){.ioc-dir{grid-template-columns:1fr}}

/* ---- B-22 Role directory / B-23 cert catalog (list rows) ---- */
.ioc-rows{border:1px solid var(--ioc-border-subtle)}
.ioc-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto;gap:20px;align-items:center;padding:20px 24px;border-bottom:1px solid var(--ioc-border-subtle);transition:background .15s var(--ioc-ease)}
.ioc-row:last-child{border-bottom:0}
.ioc-row:hover{background:var(--ioc-g10)}
.ioc-row .ioc-row-t b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.ioc-row .ioc-row-t span{display:block;margin-top:3px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-row .ioc-row-d{font-size:14px;color:var(--ioc-text-secondary);line-height:1.5}
.ioc-row .ioc-row-go{color:var(--ioc-accent);font-weight:600;font-size:14px;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.ioc-row .ioc-row-go svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s var(--ioc-ease)}
.ioc-row:hover .ioc-row-go svg{transform:translateX(3px)}
@media(max-width:760px){.ioc-row{grid-template-columns:1fr;gap:8px}.ioc-row .ioc-row-go{justify-self:start}}

/* ---- B-14 Lead form ---- */
.ioc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ioc-field{display:flex;flex-direction:column;gap:8px}
.ioc-field.full{grid-column:1/-1}
.ioc-field label{font-size:13px;font-weight:600;color:var(--ioc-text-primary)}
.ioc-field label .req{color:var(--ioc-accent)}
.ioc-field input,.ioc-field select,.ioc-field textarea{border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);padding:13px 14px;font-family:var(--ioc-sans);font-size:15px;color:var(--ioc-text-primary);transition:border-color .15s var(--ioc-ease),box-shadow .15s var(--ioc-ease)}
.ioc-field input:focus,.ioc-field select:focus,.ioc-field textarea:focus{outline:0;border-color:var(--ioc-accent);box-shadow:var(--ioc-shadow-focus)}
.ioc-field textarea{min-height:120px;resize:vertical}
.ioc-form-note{font-size:13px;color:var(--ioc-text-helper);line-height:1.5;margin:0}
@media(max-width:620px){.ioc-form-grid{grid-template-columns:1fr}}

/* ---- B-15 Location / map ---- */
.ioc-map{display:grid;grid-template-columns:1fr 1.4fr;gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-map-info{background:var(--ioc-surface,#fff);padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:14px}
.ioc-map-info h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.ioc-map-info p,.ioc-map-info a{margin:0;font-size:15px;color:var(--ioc-text-secondary);line-height:1.55}
.ioc-map-info a:hover{color:var(--ioc-accent)}
.ioc-map-frame{background:var(--ioc-g20);min-height:320px;position:relative}
.ioc-map-frame img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){.ioc-map{grid-template-columns:1fr}}

/* ---- B-24 Newsletter ---- */
.ioc-news{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;border:1px solid var(--ioc-border-subtle);background:var(--ioc-g10);padding:clamp(28px,3vw,48px)}
.ioc-news h2{margin:0;font-size:clamp(24px,2.6vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.ioc-news p{margin:12px 0 0;color:var(--ioc-text-secondary);font-size:15px;line-height:1.55}
.ioc-news form{display:flex;gap:10px;flex-wrap:wrap}
.ioc-news input{flex:1;min-width:200px;border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);padding:14px;font-family:var(--ioc-sans);font-size:15px}
.ioc-news input:focus{outline:0;border-color:var(--ioc-accent);box-shadow:var(--ioc-shadow-focus)}
@media(max-width:760px){.ioc-news{grid-template-columns:1fr}}

/* ---- B-18 Photo band ---- */
.ioc-photoband{position:relative;min-height:clamp(280px,32vw,440px);overflow:hidden;background:var(--ioc-g100)}
.ioc-photoband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.ioc-photoband .wrap{position:relative;z-index:2;display:flex;align-items:center;min-height:inherit;padding-top:48px;padding-bottom:48px}
.ioc-photoband h2{color:var(--ioc-text-on-color,#fff);font-size:clamp(26px,3.4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.06;max-width:20ch;text-wrap:balance}
.ioc-photoband p{color:var(--ioc-text-on-color,#fff);opacity:.86;font-size:17px;line-height:1.6;max-width:52ch;margin-top:16px}

/* ---- B-21 Source / status note ---- */
.ioc-note{border:1px solid var(--ioc-amber-line);background:var(--ioc-amber-bg);padding:18px 22px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.ioc-note .ioc-note-k{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-amber);white-space:nowrap}
.ioc-note p{margin:0;font-size:14px;color:var(--ioc-text-primary);line-height:1.5;max-width:78ch}
.ioc-note a{color:var(--ioc-amber);text-decoration:underline}

/* ---- B-04 Persona switcher ---- */
.ioc-persona-tabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle);margin-bottom:0}
.ioc-persona-tab{flex:1;min-width:150px;background:var(--ioc-surface,#fff);border:0;padding:16px 18px;text-align:left;cursor:pointer;transition:background .15s var(--ioc-ease)}
.ioc-persona-tab:hover{background:var(--ioc-g10)}
.ioc-persona-tab[aria-selected="true"]{background:var(--ioc-g100);color:var(--ioc-text-on-color,#fff)}
.ioc-persona-tab b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.ioc-persona-tab span{display:block;margin-top:3px;font-size:12px;color:var(--ioc-text-helper)}
.ioc-persona-tab[aria-selected="true"] span{color:var(--ioc-g40)}
.ioc-persona-panel{border:1px solid var(--ioc-border-subtle);border-top:0;padding:clamp(24px,2.6vw,36px)}
.ioc-persona-panel[hidden]{display:none}
.ioc-persona-panel p{margin:0;font-size:16px;line-height:1.6;color:var(--ioc-text-secondary);max-width:70ch}

/* reveal hooks respected by ioc-motion.js; safe default visible */
.no-js [data-reveal]{opacity:1}

/* ============================================================
   NEW TEMPLATES · article, landing, search states, block states
   ============================================================ */

/* ---- Article / guide detail ---- */
.ioc-article{padding-top:clamp(40px,4vw,64px);padding-bottom:clamp(48px,6vw,88px)}
.ioc-article .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);gap:clamp(32px,4vw,64px);align-items:start}
.ioc-arthead{border-bottom:1px solid var(--ioc-border-subtle);padding-bottom:clamp(24px,3vw,36px);margin-bottom:clamp(28px,3vw,44px)}
.ioc-arthead h1{margin:14px 0 0;font-size:clamp(30px,3.8vw,52px);font-weight:800;line-height:1.03;letter-spacing:-.03em;text-wrap:balance;max-width:20ch}
.ioc-artmeta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;align-items:center;font-family:var(--ioc-mono);font-size:12px;letter-spacing:.03em;color:var(--ioc-text-helper)}
.ioc-artmeta .ioc-who{display:flex;align-items:center;gap:10px;font-family:var(--ioc-sans);font-size:14px;color:var(--ioc-text-primary);font-weight:600}
.ioc-artmeta .ioc-avatar{width:34px;height:34px;border-radius:50%!important;background:var(--ioc-g20);border:1px solid var(--ioc-border-subtle);flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--ioc-mono);font-size:11px;color:var(--ioc-text-helper)}
.ioc-share{display:flex;gap:8px;margin-left:auto}
.ioc-share a{width:34px;height:34px;border:1px solid var(--ioc-border-subtle);display:flex;align-items:center;justify-content:center;color:var(--ioc-text-secondary)}
.ioc-share a:hover{border-color:var(--ioc-accent);color:var(--ioc-accent)}
.ioc-share svg{width:16px;height:16px}
.ioc-prose{max-width:66ch;font-size:clamp(16px,1.15vw,18px);line-height:1.7;color:var(--ioc-text-primary)}
.ioc-prose>*+*{margin-top:1.15em}
.ioc-prose h2{font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;margin-top:1.8em;line-height:1.15}
.ioc-prose h3{font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.01em;margin-top:1.5em}
.ioc-prose p{color:var(--ioc-text-secondary)}
.ioc-prose ul,.ioc-prose ol{padding-left:1.3em;color:var(--ioc-text-secondary)}
.ioc-prose li+li{margin-top:.5em}
.ioc-prose a{color:var(--ioc-accent);text-decoration:underline;text-underline-offset:2px}
.ioc-prose figure{margin:1.8em 0}
.ioc-prose figure img{width:100%;display:block;border:1px solid var(--ioc-border-subtle)}
.ioc-prose figcaption{margin-top:10px;font-size:13px;color:var(--ioc-text-helper);font-family:var(--ioc-mono)}
.ioc-callout{border-left:3px solid var(--ioc-accent);background:var(--ioc-g10);padding:20px 24px;font-size:17px;line-height:1.55;color:var(--ioc-text-primary)}
.ioc-callout .ioc-callout-k{display:block;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-accent);margin-bottom:8px}
.ioc-aside{position:sticky;top:7rem;display:flex;flex-direction:column;gap:22px;font-size:14px}
.ioc-toc b,.ioc-aside-card b{display:block;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:12px}
.ioc-toc{border-top:2px solid var(--ioc-text-primary);padding-top:16px}
.ioc-toc a{display:block;padding:6px 0;color:var(--ioc-text-secondary);line-height:1.4;border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-toc a:hover{color:var(--ioc-accent)}
.ioc-aside-card{border:1px solid var(--ioc-border-subtle);padding:20px}
.ioc-aside-card p{margin:0 0 14px;color:var(--ioc-text-secondary);line-height:1.5}
@media(max-width:900px){.ioc-article .wrap{grid-template-columns:1fr}.ioc-aside{position:static;order:2}}

/* ---- Landing: reduced shell ---- */
body.ioc-lp .ioc-header .nav,body.ioc-lp .ioc-header .search-open,body.ioc-lp .ioc-header .mobile-toggle{display:none}
body.ioc-lp .footer-routes,body.ioc-lp .footer-main{display:none}
.ioc-lp-offer{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-lp-offer>div{background:var(--ioc-surface,#fff);padding:clamp(22px,2.4vw,32px)}
.ioc-lp-offer .n{font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-accent);letter-spacing:.08em}
.ioc-lp-offer b{display:block;margin:10px 0 6px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.ioc-lp-offer p{margin:0;font-size:14px;color:var(--ioc-text-secondary);line-height:1.5}
@media(max-width:820px){.ioc-lp-offer{grid-template-columns:1fr}}
.ioc-lp-proof{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;padding:22px 0;border-top:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-lp-proof span{font-family:var(--ioc-mono);font-size:13px;color:var(--ioc-text-secondary);letter-spacing:.03em}

/* ---- Search results states ---- */
.ioc-searchbar{display:flex;align-items:center;gap:12px;border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);padding:0 16px;height:56px;max-width:640px}
.ioc-searchbar svg{width:20px;height:20px;color:var(--ioc-text-helper);flex:none}
.ioc-searchbar input{flex:1;border:0;outline:0;background:transparent;font-family:var(--ioc-sans);font-size:17px;color:var(--ioc-text-primary)}
.ioc-resultmeta{margin:20px 0 8px;font-family:var(--ioc-mono);font-size:13px;color:var(--ioc-text-helper)}
.ioc-result-list{border-top:1px solid var(--ioc-border-subtle)}
.ioc-result{display:block;padding:22px 0;border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-result .k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-result h3{margin:6px 0 4px;font-size:20px;font-weight:700;letter-spacing:-.015em}
.ioc-result h3 a:hover{color:var(--ioc-accent)}
.ioc-result p{margin:0;color:var(--ioc-text-secondary);font-size:15px;line-height:1.55;max-width:76ch}
.ioc-result .u{margin-top:8px;font-family:var(--ioc-mono);font-size:12px;color:var(--ioc-accent)}
.ioc-empty{border:1px dashed var(--ioc-border-strong);background:var(--ioc-g10);padding:clamp(32px,4vw,56px);text-align:center}
.ioc-empty h3{margin:0 0 10px;font-size:22px;font-weight:700;letter-spacing:-.015em}
.ioc-empty p{margin:0 auto 20px;color:var(--ioc-text-secondary);font-size:15px;line-height:1.6;max-width:52ch}
.ioc-empty .ioc-empty-topics{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

/* ---- Block states (form / feed) ---- */
.ioc-statebanner{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border:1px solid var(--ioc-border-subtle);font-size:15px;line-height:1.5}
.ioc-statebanner .ioc-sb-ico{width:22px;height:22px;flex:none;border-radius:50%!important;display:flex;align-items:center;justify-content:center;color:var(--ioc-text-on-color,#fff);font-size:13px;font-weight:700}
.ioc-statebanner b{display:block;font-weight:700;margin-bottom:2px}
.ioc-statebanner p{margin:0;color:var(--ioc-text-secondary)}
.ioc-statebanner.ok{border-color:color-mix(in srgb,var(--ioc-success) 30%,var(--ioc-surface));background:var(--ioc-success-surface,#defbe6)}.ioc-statebanner.ok .ioc-sb-ico{background:var(--ioc-green,#0e6027)}
.ioc-statebanner.err{border-color:color-mix(in srgb,var(--ioc-danger) 30%,var(--ioc-surface));background:var(--ioc-danger-surface,#fff1f1)}.ioc-statebanner.err .ioc-sb-ico{background:var(--ioc-danger,#da1e28)}
.ioc-statebanner.info{border-color:color-mix(in srgb,var(--ioc-blue) 30%,var(--ioc-surface));background:var(--ioc-selected-surface,#edf5ff)}.ioc-statebanner.info .ioc-sb-ico{background:var(--ioc-accent)}
.ioc-field.invalid input,.ioc-field.invalid select,.ioc-field.invalid textarea{border-color:var(--ioc-danger,#da1e28);box-shadow:0 0 0 3px rgba(194,29,29,.12)}
.ioc-field .ioc-err{font-size:12px;color:var(--ioc-danger,#da1e28);font-weight:600}
.ioc-skel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
.ioc-skel{background:var(--ioc-surface,#fff);padding:clamp(22px,2.2vw,30px)}
.ioc-skel span{display:block;height:12px;border-radius:2px!important;background:linear-gradient(90deg,var(--ioc-g10),var(--ioc-g20),var(--ioc-g10));background-size:200% 100%;animation:idcshimmer 1.3s infinite;margin-bottom:10px}
.ioc-skel span.s1{width:40%;height:10px}.ioc-skel span.s2{width:90%}.ioc-skel span.s3{width:70%}
@keyframes idcshimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:900px){.ioc-skel-grid{grid-template-columns:1fr}}
.ioc-btn-loading{position:relative;pointer-events:none;opacity:.75}
.ioc-spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:var(--ioc-border-on-color,#fff);border-radius:50%!important;animation:idcspin .7s linear infinite;vertical-align:-2px}
@keyframes idcspin{to{transform:rotate(360deg)}}

/* ---- Landing lead-capture split (B-14 on landing) ---- */
.ioc-lp-capture{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.ioc-lp-capture .ioc-lp-cap-copy h2{margin:0;font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.ioc-lp-capture .ioc-lp-cap-copy .lede{margin:16px 0 24px}
.ioc-lp-cap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ioc-lp-cap-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ioc-text-secondary);line-height:1.5}
.ioc-lp-cap-list li svg{width:20px;height:20px;flex:none;color:var(--ioc-accent);margin-top:1px}
.ioc-lp-cap-form{border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff);padding:clamp(24px,2.6vw,36px)}
.ioc-lp-cap-form h3{margin:0 0 4px;font-size:20px;font-weight:700;letter-spacing:-.015em}
.ioc-lp-cap-form .sub{margin:0 0 20px;font-size:14px;color:var(--ioc-text-secondary)}
@media(max-width:820px){.ioc-lp-capture{grid-template-columns:1fr}}

/* ---- 404 / error page ---- */
.ioc-404{text-align:center;max-width:640px;margin:0 auto;padding:clamp(48px,8vw,96px) 0}
.ioc-404 .code{font-family:var(--ioc-mono);font-size:clamp(72px,14vw,150px);font-weight:600;line-height:.9;letter-spacing:-.03em;color:var(--ioc-accent)}
.ioc-404 h1{margin:20px 0 12px;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.025em}
.ioc-404 p{margin:0 auto 28px;color:var(--ioc-text-secondary);font-size:16px;line-height:1.6;max-width:46ch}
.ioc-404 .ioc-searchbar{margin:0 auto 28px}
.ioc-404-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* hero kicker as iconic breadcrumb: home / PAGE */
.ioc-kicker-crumb{gap:9px}
.ioc-kicker-crumb::before{display:none}
.ioc-home{display:inline-flex;align-items:center;color:var(--ioc-text-primary);padding-bottom:3px;border-bottom:2px solid var(--ioc-accent);line-height:1;transition:color .16s var(--ioc-ease)}
.ioc-home svg{width:16px;height:16px;display:block}
.ioc-home:hover{color:var(--ioc-accent)}
.ioc-kicker-crumb .ioc-sep{color:var(--ioc-text-helper);margin:0 3px}

/* ---- B-12 CTA action patterns (light band) ---- */
.ioc-cta-act{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ioc-cta-act>.btn{align-self:stretch;justify-content:space-between;min-height:52px}
.ioc-cta-note{font-size:12.5px;color:var(--ioc-text-secondary);margin:0}
.ioc-cta-slots{display:flex;flex-wrap:wrap;gap:8px}
.ioc-cta-slots span{font-family:var(--ioc-mono);font-size:12.5px;color:var(--ioc-text-primary);border:1px solid var(--ioc-g30);padding:8px 12px;transition:border-color .15s,color .15s}
.ioc-cta-aud{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.ioc-cta-aud button{flex:1 1 42%;border:1px solid var(--ioc-g30);background:var(--ioc-surface,#fff);color:var(--ioc-text-primary);padding:12px;text-align:left;cursor:pointer;font:inherit;transition:background .15s,color .15s,border-color .15s}
.ioc-cta-aud button[aria-selected=true]{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);border-color:var(--ioc-accent)}
.ioc-cta-aud b{display:block;font-size:14px}
.ioc-cta-aud small{display:block;font-size:12px;opacity:.82;margin-top:3px}
.ioc-cta-stats{display:flex;gap:26px;flex-wrap:wrap}
.ioc-cta-stats b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ioc-text-primary)}
.ioc-cta-stats span{font-size:12px;color:var(--ioc-text-secondary)}
.ioc-cta-guar{display:flex;flex-direction:column;gap:8px}
.ioc-cta-guar span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ioc-text-secondary)}
.ioc-cta-guar svg{width:15px;height:15px;color:var(--ioc-green);flex:none}

/* ---- B-14 Reassurance panel (beside the enquiry form) ---- */
.ioc-reassure{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,30px);background:var(--ioc-g10);border:1px solid var(--ioc-border-subtle)}
.ioc-rea-k{font-family:var(--ioc-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-rea-card{display:flex;gap:13px;padding:16px 18px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle)}
.ioc-rea-card svg{flex:none;width:18px;height:18px;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-rea-card b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:3px}
.ioc-rea-card span{display:block;font-size:13.5px;line-height:1.5;color:var(--ioc-text-secondary)}
.ioc-rea-direct{margin-top:auto;padding-top:16px;border-top:1px solid var(--ioc-border-subtle);display:flex;flex-direction:column;gap:4px}
.ioc-rea-direct a{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14.5px;font-weight:600;color:var(--ioc-text-primary);text-decoration:none}
.ioc-rea-direct a svg{width:16px;height:16px;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-rea-direct a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}

/* ---- B-14 panel sits in the narrow first column ---- */
#enquiry .ioc-nav-split{grid-template-columns:minmax(18rem,23rem) minmax(0,1fr)}
@media(max-width:900px){#enquiry .ioc-nav-split{grid-template-columns:1fr}}
/* ---- B-15 Office: split card with map. Country tabs are ready for a second
   office: repeat .ioc-office and re-add the tablist when one exists. ---- */
.ioc-office-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.ioc-office-tabs button{padding:10px 16px;background:var(--ioc-surface-cool,#f2f4f8);border:1px solid transparent;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-primary);cursor:pointer;transition:background .18s var(--ioc-ease),color .18s var(--ioc-ease),border-color .18s var(--ioc-ease)}
.ioc-office-tabs button:hover{background:var(--ioc-surface,#fff);border-color:var(--ioc-text-primary)}
.ioc-office-tabs button[aria-selected="true"]{background:var(--ioc-accent);border-color:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.ioc-office{display:grid;grid-template-columns:minmax(19rem,26rem) 1fr;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
.ioc-office[hidden]{display:none}
.ioc-office-info{padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column}
.ioc-office-co{margin:0 0 4px;font-size:clamp(19px,1.7vw,23px);font-weight:800;letter-spacing:-.025em}
.ioc-office-reg{margin:0 0 22px;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-office-row{display:flex;gap:13px;padding:14px 0;border-top:1px solid var(--ioc-border-subtle)}
.ioc-office-row svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-office-row .k{display:block;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:3px}
.ioc-office-row a,.ioc-office-row .v{font-size:15px;line-height:1.45;font-weight:600;color:var(--ioc-text-primary);text-decoration:none}
.ioc-office-row a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-office-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:22px}
.ioc-office-acts a{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;background:var(--ioc-surface-cool,#f2f4f8);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-primary);text-decoration:none;transition:background .18s,color .18s}
.ioc-office-acts a svg{width:15px;height:15px;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-office-acts a:hover{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.ioc-office-acts a:hover svg{color:var(--ioc-text-on-color,#fff)}
.ioc-office-map{position:relative;min-height:22rem;border-left:1px solid var(--ioc-border-subtle);background:var(--ioc-g20);display:flex;align-items:center;justify-content:center}
.ioc-office-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
.ioc-office-badge{position:absolute;left:16px;top:16px;z-index:2;padding:8px 12px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-text-primary);font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.ioc-office-empty{padding:0 24px;text-align:center;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-secondary);line-height:1.6}
@media(max-width:900px){.ioc-office{grid-template-columns:1fr}.ioc-office-map{border-left:0;border-top:1px solid var(--ioc-border-subtle);min-height:16rem}}
@media(prefers-reduced-motion:reduce){.ioc-office-tabs button,.ioc-office-acts a,.ioc-rea-direct a{transition:none}}

/* ---- B-14 Route cards: tinted by the family the enquiry goes to ---- */
.ioc-cards [data-route-fam]{--rf:var(--ioc-accent);--rfi:var(--ioc-accent-ink,var(--ioc-accent));position:relative;background:color-mix(in oklch,var(--rf) 4%,var(--ioc-surface));border-top:2px solid var(--rf)!important;transition:background .2s var(--ioc-ease)}
.ioc-cards [data-route-fam="sol"]{--rf:var(--ioc-blue);--rfi:var(--ioc-blue)}
.ioc-cards [data-route-fam="aca"]{--rf:var(--ioc-fam-academy);--rfi:var(--ioc-fam-academy)}
.ioc-cards [data-route-fam="tal"]{--rf:var(--ioc-fam-talents);--rfi:var(--ioc-fam-talents-ink)}
.ioc-cards [data-route-fam="sup"]{--rf:var(--ioc-fam-company);--rfi:var(--ioc-fam-company)}
.ioc-cards [data-route-fam="com"]{--rf:var(--ioc-fam-company);--rfi:var(--ioc-fam-company)}
.ioc-cards [data-route-fam="ind"]{--rf:var(--ioc-fam-industries);--rfi:var(--ioc-fam-industries-ink)}
.ioc-cards [data-route-fam="tec"],.ioc-cards [data-route-fam="ins"]{--rf:var(--ioc-blue);--rfi:var(--ioc-blue)}
.ioc-cards [data-route-fam] .ioc-card-eyebrow{color:var(--rfi)}
.ioc-cards [data-route-fam] .ioc-cardicon,.ioc-cards [data-route-fam] .ioc-card-link{color:var(--rfi)}
.ioc-cards [data-route-fam]:hover{background:color-mix(in oklch,var(--rf) 9%,var(--ioc-surface))}
.ioc-cards [data-route-fam]:focus-visible{outline:3px solid var(--rf);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.ioc-cards [data-route-fam]{transition:none}}

/* ---- B-15b Regions served: tabs + market grid with per-market mailbox ---- */
.ioc-regions{margin-top:clamp(22px,2.4vw,32px)}
.ioc-region-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.ioc-region-tabs button{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;background:var(--ioc-surface-cool,#f2f4f8);border:1px solid transparent;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-primary);cursor:pointer;transition:background .18s var(--ioc-ease),color .18s var(--ioc-ease),border-color .18s var(--ioc-ease)}
.ioc-region-tabs button .n{font-size:10px;color:var(--ioc-text-helper)}
.ioc-region-tabs button:hover{background:var(--ioc-surface,#fff);border-color:var(--ioc-text-primary)}
.ioc-region-tabs button[aria-selected="true"]{background:var(--ioc-accent);border-color:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
.ioc-region-tabs button[aria-selected="true"] .n{color:rgba(255,255,255,.78)}
.ioc-region-panel[hidden]{display:none}
.ioc-region-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px}
.ioc-region-head b{font-size:16px;font-weight:700;letter-spacing:-.015em}
.ioc-region-head span{font-size:14px;color:var(--ioc-text-secondary)}
.ioc-markets{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle)}
.ioc-markets>div{box-shadow:0 0 0 1px var(--ioc-border-subtle);background:var(--ioc-surface,#fff);padding:15px 17px}
.ioc-markets b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.ioc-markets .tag{font-style:normal;font-family:var(--ioc-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-on-color,#fff);background:var(--ioc-accent);padding:2px 6px}
.ioc-markets a{display:flex;align-items:center;gap:7px;margin-top:7px;font-family:var(--ioc-mono);font-size:11px;color:var(--ioc-text-secondary);text-decoration:none;word-break:break-all}
.ioc-markets a svg{flex:none;width:14px;height:14px;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-markets a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
@media(max-width:900px){.ioc-markets{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ioc-markets{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ioc-region-tabs button{transition:none}}

/* ---- Section header · right column lead sentence ---- */
.ioc-head .ioc-sh-lead{align-self:end}
.ioc-sh-lead p{margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--ioc-text-primary);max-width:36ch;text-wrap:pretty}
.ioc-sh-lead p b{font-weight:700}
.ioc-sh-lead .meta{display:block;margin-top:12px;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper);line-height:1.6}
.ioc-block.dark .ioc-sh-lead p{color:var(--ioc-g10,#f4f4f4)}
.ioc-block.dark .ioc-sh-lead .meta{color:var(--ioc-g40,#a8a8a8)}
@media(max-width:860px){.ioc-sh-lead p{max-width:none}}

/* Section-header route link, used inside .ioc-sh-lead */
.ioc-sh-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:.7rem;color:var(--ioc-accent,#0001ff);font-weight:600;font-size:.9rem;text-decoration:none}
.ioc-sh-link svg{width:1rem;height:1rem;transition:transform .18s ease}
.ioc-sh-link:hover svg{transform:translateX(4px)}
.dark .ioc-sh-link{color:var(--ioc-accent-on-inverse)}


/* ============================================================
   Reserved blocks, now built · B-07, B-08, B-12, B-14, B-16,
   B-18, B-19, B-20, B-23, B-24. Same contract as the rest of
   the library: white-first, square, 1px #e0e0e0, mono meta,
   family accent via var(--ioc-accent), container-clipped grids
   so a short final row never shows a divider block.
   ============================================================ */

/* ---- B-07 · Logo wall ---- */
.ioc-logowall{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);overflow:hidden}
.ioc-logowall .ioc-lw{display:flex;align-items:center;justify-content:center;min-height:112px;padding:24px 28px;box-shadow:1px 1px 0 0 var(--ioc-border-subtle);position:relative}
.ioc-logowall img{max-width:100%;max-height:40px;width:auto;height:auto;filter:grayscale(1);opacity:.62;transition:filter .18s ease,opacity .18s ease}
.ioc-logowall .ioc-lw:hover img{filter:none;opacity:1}
.ioc-logowall .ioc-lw-name{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-secondary)}
.ioc-logowall-note{margin:14px 0 0;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-block.dark .ioc-logowall{background:var(--ioc-surface-inverse-raised,#1c1c1c);border-color:var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-logowall .ioc-lw{box-shadow:1px 1px 0 0 var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-logowall img{filter:grayscale(1) invert(1);opacity:.7}
.ioc-block.dark .ioc-logowall .ioc-lw-name{color:var(--ioc-g40,#a8a8a8)}

/* ---- B-08 · Testimonial ---- */
.ioc-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);overflow:hidden}
.ioc-quote{padding:clamp(24px,3vw,36px);box-shadow:1px 1px 0 0 var(--ioc-border-subtle);display:flex;flex-direction:column;gap:20px;border-top:3px solid var(--ioc-accent)}
.ioc-quote blockquote{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.5;font-weight:600;letter-spacing:-.015em;color:var(--ioc-text-primary);text-wrap:pretty}
.ioc-quote blockquote::before{content:"";display:block}
.ioc-quote figcaption{display:flex;align-items:center;gap:14px;margin-top:auto}
.ioc-quote figcaption img{width:44px;height:44px;object-fit:cover;flex:none}
.ioc-quote .ioc-q-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.ioc-quote .ioc-q-who b{font-size:14px;font-weight:700;color:var(--ioc-text-primary)}
.ioc-quote .ioc-q-who span{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-secondary)}
.ioc-quote .ioc-q-src{font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-quote.lead{grid-column:1/-1}
.ioc-quote.lead blockquote{font-size:clamp(22px,2.6vw,34px);font-weight:700;line-height:1.24}
.ioc-block.dark .ioc-quotes{background:var(--ioc-surface-inverse-raised,#1c1c1c);border-color:var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-quote{box-shadow:1px 1px 0 0 var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-quote blockquote{color:var(--ioc-text-on-color,#fff)}
.ioc-block.dark .ioc-quote .ioc-q-who span,.ioc-block.dark .ioc-quote .ioc-q-src{color:var(--ioc-g40,#a8a8a8)}

/* ---- B-12 · Table ---- */
.ioc-tablewrap{border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff);overflow-x:auto}
.ioc-tablewrap table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.ioc-tablewrap caption{text-align:left;padding:14px 18px;border-bottom:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-secondary)}
.ioc-tablewrap th{text-align:left;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--ioc-text-secondary);background:var(--ioc-g10);padding:12px 18px;border-bottom:1px solid var(--ioc-border-subtle);white-space:nowrap;position:sticky;top:0}
.ioc-tablewrap td{padding:14px 18px;border-bottom:1px solid var(--ioc-border-subtle);color:var(--ioc-text-secondary);line-height:1.55;vertical-align:top}
.ioc-tablewrap tbody tr:last-child td{border-bottom:0}
.ioc-tablewrap tbody tr:hover td{background:var(--ioc-g10)}
.ioc-tablewrap td:first-child{color:var(--ioc-text-primary);font-weight:600}
.ioc-tablewrap td.num,.ioc-tablewrap th.num{text-align:right;font-family:var(--ioc-mono);font-variant-numeric:tabular-nums}
.ioc-tablewrap .ioc-td-yes{color:var(--ioc-accent-ink,var(--ioc-accent));font-weight:700}
.ioc-tablewrap .ioc-td-no{color:var(--ioc-text-helper)}
.ioc-table-note{margin:12px 0 0;font-family:var(--ioc-mono);font-size:11px;color:var(--ioc-text-helper)}

/* ---- B-14 · Timeline ---- */
.ioc-timeline{display:grid;gap:0;border-left:2px solid var(--ioc-border-subtle);margin-left:8px}
.ioc-tl{position:relative;padding:0 0 clamp(28px,3vw,40px) clamp(24px,3vw,36px)}
.ioc-tl:last-child{padding-bottom:0}
.ioc-tl::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;background:var(--ioc-surface,#fff);border:2px solid var(--ioc-border-strong,#8d8d8d)}
.ioc-tl.done::before{background:var(--ioc-accent);border-color:var(--ioc-accent)}
.ioc-tl.now::before{background:var(--ioc-accent);border-color:var(--ioc-accent);box-shadow:0 0 0 4px color-mix(in oklch,var(--ioc-accent) 18%,var(--ioc-surface))}
.ioc-tl-when{display:block;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:6px}
.ioc-tl.now .ioc-tl-when,.ioc-tl.done .ioc-tl-when{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-tl b{display:block;font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.015em;color:var(--ioc-text-primary);margin-bottom:6px}
.ioc-tl p{margin:0;font-size:14px;line-height:1.65;color:var(--ioc-text-secondary);max-width:62ch}
.ioc-block.dark .ioc-timeline{border-left-color:var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-tl::before{background:var(--ioc-surface-inverse,#161616);border-color:var(--ioc-g60,#666666)}
.ioc-block.dark .ioc-tl p{color:var(--ioc-g30)}

/* ---- B-16 · Job listings ---- */
.ioc-jobs{display:grid;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);overflow:hidden}
.ioc-job{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:22px 24px;box-shadow:0 1px 0 0 var(--ioc-border-subtle);text-decoration:none;color:inherit;transition:background .16s ease}
.ioc-job:hover{background:var(--ioc-g10)}
.ioc-job:hover h3{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-job-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:8px}
.ioc-job-meta .ioc-job-fam{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-job h3{margin:0 0 6px;font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.015em;transition:color .16s ease}
.ioc-job p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ioc-text-secondary);max-width:70ch}
.ioc-job-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-accent-ink,var(--ioc-accent));white-space:nowrap}
.ioc-job-go svg{width:16px;height:16px;transition:transform .18s ease}
.ioc-job:hover .ioc-job-go svg{transform:translateX(4px)}
.ioc-jobs-empty{padding:32px 24px;font-size:14px;color:var(--ioc-text-secondary)}
@media(max-width:640px){.ioc-job{grid-template-columns:1fr}}

/* ---- B-18 · Code / spec ---- */
.ioc-code{border:1px solid var(--ioc-g80,#393939);background:var(--ioc-surface-inverse,#161616);overflow:hidden}
.ioc-code-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--ioc-g90,#262626);border-bottom:1px solid var(--ioc-g80,#393939);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-g40,#a8a8a8)}
.ioc-code-bar b{color:var(--ioc-text-on-color,#fff);font-weight:500;letter-spacing:.04em}
.ioc-code-bar .ioc-code-lang{margin-left:auto;color:var(--ioc-accent-on-inverse)}
.ioc-code pre{margin:0;padding:20px 18px;overflow-x:auto;font-family:var(--ioc-mono);font-size:12.5px;line-height:1.9;color:var(--ioc-g20,#e0e0e0);tab-size:2}
.ioc-code pre b{color:var(--ioc-accent-on-inverse);font-weight:500}
.ioc-code pre i{color:var(--ioc-g60,#666666);font-style:normal}
.ioc-code pre em{color:var(--ioc-success,#198038);font-style:normal}
.ioc-code-foot{padding:12px 16px;border-top:1px solid var(--ioc-g80,#393939);font-family:var(--ioc-mono);font-size:11px;color:var(--ioc-g50,#8d8d8d);line-height:1.7}

/* ---- B-19 · Comparison ---- */
.ioc-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);overflow:hidden}
.ioc-cmp{padding:clamp(22px,2.4vw,30px);box-shadow:1px 1px 0 0 var(--ioc-border-subtle);display:flex;flex-direction:column;gap:14px;border-top:3px solid var(--ioc-border-subtle)}
.ioc-cmp.pick{border-top-color:var(--ioc-accent);background:color-mix(in oklch,var(--ioc-accent) 4%,var(--ioc-surface))}
.ioc-cmp-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-cmp.pick .ioc-cmp-k{color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-cmp h3{margin:0;font-size:clamp(17px,1.6vw,22px);font-weight:700;letter-spacing:-.02em}
.ioc-cmp>p{margin:0;font-size:14px;line-height:1.65;color:var(--ioc-text-secondary)}
.ioc-cmp ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--ioc-border-subtle)}
.ioc-cmp li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--ioc-border-subtle);font-size:13.5px;line-height:1.55;color:var(--ioc-text-secondary)}
.ioc-cmp li svg{width:16px;height:16px;margin-top:2px;flex:none;color:var(--ioc-accent-ink,var(--ioc-accent))}
.ioc-cmp li.no{color:var(--ioc-text-helper)}
.ioc-cmp li.no svg{color:var(--ioc-g40,#a8a8a8)}
.ioc-cmp .ioc-cmp-when{margin-top:auto;padding-top:6px;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-primary)}

/* ---- B-20 · Banner ---- */
.ioc-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px 20px;align-items:center;padding:16px 20px;background:color-mix(in oklch,var(--ioc-accent) 6%,var(--ioc-surface));border-top:3px solid var(--ioc-accent);border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-banner>svg{width:22px;height:22px;color:var(--ioc-accent-ink,var(--ioc-accent));flex:none}
.ioc-banner p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ioc-text-primary)}
.ioc-banner p b{font-weight:700}
.ioc-banner .ioc-banner-k{display:block;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-accent-ink,var(--ioc-accent));margin-bottom:4px}
.ioc-banner a.ioc-banner-go{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ioc-accent-ink,var(--ioc-accent));text-decoration:none;white-space:nowrap}
.ioc-banner a.ioc-banner-go svg{width:16px;height:16px;transition:transform .18s ease}
.ioc-banner a.ioc-banner-go:hover svg{transform:translateX(4px)}
.ioc-banner .ioc-banner-x{background:none;border:0;padding:6px;cursor:pointer;color:var(--ioc-text-secondary);line-height:0}
.ioc-banner .ioc-banner-x svg{width:16px;height:16px}
.ioc-banner .ioc-banner-x:hover{color:var(--ioc-text-primary)}
.ioc-banner.warn{background:var(--ioc-amber-bg,#fdf6ec);border-top-color:var(--ioc-amber,#b45309)}
.ioc-banner.warn>svg,.ioc-banner.warn .ioc-banner-k,.ioc-banner.warn a.ioc-banner-go{color:var(--ioc-amber,#b45309)}
@media(max-width:640px){.ioc-banner{grid-template-columns:auto minmax(0,1fr);}.ioc-banner a.ioc-banner-go{grid-column:2}}

/* ---- B-23 · Embed ---- */
.ioc-embed{border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
.ioc-embed-frame{position:relative;aspect-ratio:16/9;background:var(--ioc-surface-inverse,#161616);overflow:hidden}
.ioc-embed-frame iframe,.ioc-embed-frame video,.ioc-embed-frame img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.ioc-embed-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding:14px 18px;border-top:1px solid var(--ioc-border-subtle)}
.ioc-embed-cap b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.ioc-embed-cap span{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-embed-cap .ioc-embed-src{margin-left:auto}
.ioc-embed-consent{padding:14px 18px;border-top:1px solid var(--ioc-border-subtle);font-size:12.5px;line-height:1.7;color:var(--ioc-text-secondary)}
.ioc-embed-consent button{font:inherit;font-weight:600;color:var(--ioc-accent-ink,var(--ioc-accent));background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---- B-24 · Divider ---- */
.ioc-divider{border:0;height:1px;background:var(--ioc-border-subtle);margin:clamp(40px,6vw,80px) 0}
.ioc-divider.strong{height:2px;background:var(--ioc-text-primary)}
.ioc-divider.accent{height:3px;background:var(--ioc-accent);width:64px;margin-left:0}
.ioc-divider-label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin:clamp(40px,6vw,80px) 0}
.ioc-divider-label span{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper)}
.ioc-divider-label::after{content:"";height:1px;background:var(--ioc-border-subtle)}
.ioc-block.dark .ioc-divider{background:var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-divider-label::after{background:var(--ioc-g80,#393939)}
.ioc-block.dark .ioc-divider-label span{color:var(--ioc-g50,#8d8d8d)}
@media(prefers-reduced-motion:reduce){.ioc-logowall img,.ioc-job,.ioc-job-go svg,.ioc-banner a.ioc-banner-go svg{transition:none}}

/* Icon sizing for link and question contracts (was missing) */
.ioc-cardlink svg{width:16px;height:16px;flex:none;transition:transform .15s var(--ioc-ease)}
.ioc-cardlink:hover svg{transform:translateX(3px)}
.ioc-faq-q svg{width:20px;height:20px;flex:none}

/* ---- absorbed from ioc-forms.css (CMS-D-071) ---- */
/* ============================================================
   INFOC Simple CTA Forms · v3.0.0 · styling
   Light only. Builds on the B-17 .ioc-field / .ioc-form-grid
   contract already in ioc-blocks.css rather than replacing it,
   so a preset-rendered form and a hand-written one look the same.
   Only the parts B-17 does not cover are defined here.
   ============================================================ */

.ioc-form{background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:22px}
/* The renderer wraps the fields, action, reassurance and consent in
   [data-form-body] so the success state can replace them in one node.
   That wrapper owns their rhythm; .ioc-form's gap does not reach them. */
.ioc-form [data-form-body]{display:flex;flex-direction:column;gap:22px}
.ioc-form-title{font-size:clamp(21px,2vw,27px);line-height:1.15;letter-spacing:-.02em;margin:0}
.ioc-form-copy{margin:-10px 0 0;color:var(--ioc-text-secondary);font-size:16px;line-height:1.55;max-width:54ch}

/* ---- ask line · sets the length of the ask before the first field ---- */
/* No separator glyph. Any divider attached to an item, whether a border
   or a pseudo-element, is placed by DOM position and cannot know where
   the flex line breaks, so it dangles on a wrapped row. Spacing alone
   separates these three at 11px uppercase mono. */
.ioc-form-ask{display:flex;flex-wrap:wrap;column-gap:26px;row-gap:8px;margin:-6px 0 0;padding:0;list-style:none}
.ioc-form-ask span{white-space:nowrap;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc-text-secondary);line-height:1.2}

/* ---- reassurance · under the action, never above it.
   Named .ioc-form-sure, not .ioc-reassure: that name already belongs to
   the padded B-17 reassurance panel in ioc-blocks.css. ---- */
.ioc-form-sure{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 24px;margin:0;padding:18px 0 0;list-style:none;border-top:1px solid var(--ioc-border-subtle)}
.ioc-form-sure li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ioc-text-secondary)}
.ioc-form-sure svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--ioc-accent);fill:none;stroke:currentColor;stroke-width:2}

/* ---- error summary · focus lands here on a failed submit ---- */
.ioc-form-errors{border:1px solid var(--ioc-danger,#da1e28);border-left:3px solid var(--ioc-danger,#da1e28);background:var(--ioc-danger-surface,#fff1f1);padding:16px 20px}
.ioc-form-errors:focus{outline:2px solid var(--ioc-focus);outline-offset:2px}
.ioc-form-errors h4{margin:0 0 8px;font-size:15px;letter-spacing:-.01em}
.ioc-form-errors ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.ioc-form-errors a{color:var(--ioc-danger-text,#a2191f);font-size:14px}

/* ---- field error state ---- */
.ioc-field.is-error input,.ioc-field.is-error select,.ioc-field.is-error textarea{border-color:var(--ioc-danger,#da1e28)}
.ioc-choicegroup.is-error .ioc-choices{border-color:var(--ioc-danger,#da1e28)}
.ioc-field-error{margin:0;color:var(--ioc-danger-text,#a2191f);font-size:13px;font-family:var(--ioc-mono);letter-spacing:.01em}
.ioc-opt{color:var(--ioc-text-helper);font-weight:400;font-family:var(--ioc-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* ---- radio group · one required state for the whole group ---- */
.ioc-choicegroup{grid-column:1/-1;border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ioc-choicegroup legend{padding:0;font-size:13px;font-weight:600;color:var(--ioc-text-primary)}
.ioc-choicegroup legend .req{color:var(--ioc-accent)}
.ioc-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-strong);overflow:hidden}
.ioc-choices:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(220px,1fr))}
.ioc-choice{background:var(--ioc-surface,#fff);box-shadow:1px 1px 0 0 var(--ioc-border-subtle);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;min-height:44px;transition:background var(--ioc-dur-fast) var(--ioc-ease)}
.ioc-choice:hover{background:var(--ioc-g10)}
.ioc-choice input{margin:3px 0 0;accent-color:var(--ioc-accent);width:16px;height:16px;flex:0 0 auto}
.ioc-choice b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.ioc-choice small{display:block;margin-top:2px;color:var(--ioc-text-secondary);font-size:13px;line-height:1.4}
.ioc-choice:has(input:checked){background:color-mix(in oklch,var(--ioc-accent) 5%,var(--ioc-surface));box-shadow:inset 3px 0 0 0 var(--ioc-accent)}
.ioc-choice:focus-within{outline:2px solid var(--ioc-focus);outline-offset:-2px}

/* ---- collapsed secondary qualification ---- */
.ioc-more{grid-column:1/-1;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
.ioc-more>summary{cursor:pointer;padding:13px 16px;font-size:14px;font-weight:600;letter-spacing:-.01em;display:flex;gap:8px;align-items:center;min-height:44px}
.ioc-more>summary:hover{background:var(--ioc-g10)}
.ioc-more>summary:focus-visible{outline:2px solid var(--ioc-focus);outline-offset:-2px}
.ioc-more[open]>summary{border-bottom:1px solid var(--ioc-border-subtle)}
.ioc-more .ioc-form-grid{padding:20px 16px}

/* ---- file input · limits stated before the picker opens ---- */
.ioc-filefield input[type="file"]{padding:11px 14px;font-size:14px;font-family:var(--ioc-sans)}
.ioc-filefield input[type="file"]::file-selector-button{font:inherit;font-size:12px;font-family:var(--ioc-mono);letter-spacing:.04em;text-transform:uppercase;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-text-primary);color:var(--ioc-text-primary);padding:7px 13px;margin-right:12px;cursor:pointer}
.ioc-filefield input[type="file"]::file-selector-button:hover{background:var(--ioc-text-primary);color:var(--ioc-text-on-color,#fff)}
.ioc-fhint{color:var(--ioc-text-helper);font-size:12px;font-family:var(--ioc-mono);letter-spacing:.02em}

/* ---- consent · separate, optional, unticked ---- */
.ioc-marketing{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ioc-text-secondary);line-height:1.5;cursor:pointer;min-height:44px;padding:0;margin-top:-6px}
.ioc-marketing input{margin:2px 0 0;accent-color:var(--ioc-accent);width:16px;height:16px;flex:0 0 auto}
.ioc-privacy{margin:0;font-size:12.5px;color:var(--ioc-text-helper);line-height:1.55;max-width:66ch}

/* ---- actions ---- */
.ioc-form-actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.ioc-form-actions .ioc-form-note{max-width:46ch;font-size:13.5px;line-height:1.5;color:var(--ioc-text-secondary)}
.ioc-form-actions .btn{flex:0 0 auto;padding-block:15px;font-size:15.5px}

/* ---- success · replaces the body, does not sit under it ---- */
.ioc-form-success[hidden],.ioc-form [hidden]{display:none}
.ioc-form-success{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:8px 0}
.ioc-form-success:focus{outline:2px solid var(--ioc-focus);outline-offset:4px}
.ioc-form-success h3{margin:0;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em}
.ioc-form-success p{margin:0;color:var(--ioc-text-secondary);max-width:52ch}
.ioc-form-ok{width:44px;height:44px;display:grid;place-items:center;background:var(--ioc-accent);margin:0}
.ioc-form-ok svg{width:24px;height:24px;color:var(--ioc-text-on-color,#fff);fill:none}
.ioc-form-success .btn{margin-top:8px}

/* ---- honeypot ---- */
.ioc-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- compact presets · newsletter, download, event ---- */
.ioc-form.compact{gap:16px;padding:clamp(20px,2vw,28px)}
.ioc-form.compact [data-form-body]{gap:16px}
.ioc-form.compact .ioc-form-grid{grid-template-columns:1fr}
.ioc-form.compact .ioc-form-actions{justify-content:flex-start}

/* ---- on a dark band the form stays a light card ---- */
.ioc-block.dark .ioc-form,.cta-band .ioc-form{background:var(--ioc-surface,#fff);color:var(--ioc-text-primary)}
.ioc-block.dark .ioc-form-title,.cta-band .ioc-form-title{color:var(--ioc-text-primary)}
.ioc-block.dark .ioc-form p,.cta-band .ioc-form p{color:var(--ioc-text-secondary)}

@media(max-width:640px){
  .ioc-form-actions{flex-direction:column;align-items:stretch}
  .ioc-form-actions .btn{width:100%;justify-content:center;order:-1}
  .ioc-form-sure{gap:8px}
  .ioc-choices{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.ioc-choice{transition:none}}

/* arrow inside form buttons · the sprite is stroked, not filled */
.ioc-form .btn svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;transition:transform var(--ioc-dur-fast) var(--ioc-ease)}
.ioc-form .btn:hover svg{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.ioc-form .btn:hover svg{transform:none}}


/* CMS-D-071 D-9: the source set this inline on the legal row; carried as a class. */
.legal-actions{display:flex;align-items:center;gap:16px}

/* ==========================================================================
   CMS-D-071 W6 — empty-segment collapse for owned overlay item templates.
   Fixed item templates emit every optional segment; a segment whose bound
   value is empty must not paint (tags, eyebrows, notes, link stubs, glyphs).
   ========================================================================== */
.infoc-cms .ioc-tag:empty{display:none}
.infoc-cms .ioc-card-eyebrow:empty{display:none}
.infoc-cms .ioc-card-tags:not(:has(.ioc-tag:not(:empty))){display:none}
.infoc-cms .ioc-note:has(> p:empty){display:none}
.infoc-cms .ioc-sh-lead:has(> p:empty){display:none}
.infoc-cms .ioc-fmark svg:has(use[href$="#"]){display:none}
.infoc-cms .ioc-card-ix svg:has(use[href$="#"]){display:none}
.infoc-cms .ioc-card-link[href="#"]{display:none}
.infoc-cms .ioc-card[data-route-fam=""]{--rf:initial;--rfi:initial;background:var(--ioc-surface,#fff);border-top:0!important}

/* CMS-D-071 W7 — the talents role-family rowgroup styles, absorbed VERBATIM
   from the page-local <style> shared by talents/professionals.html and
   talents/employers.html (W2 skipped them as dead; the W6 fixed variants
   B-11-V07/V08 now emit this markup). */
.ioc-rowgroup{margin-bottom:28px}.ioc-rowgroup>h3{font-size:clamp(18px,1.8vw,24px);font-weight:700;letter-spacing:-.015em;margin:0 0 14px}.ioc-rowgroup>h3 span{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-text-helper);margin-left:10px}

/* ==========================================================================
   CMS-D-071 W11 — the home page design, absorbed VERBATIM from the six
   inline <style> blocks of docs/designs/infoc-site/index.html (the home
   design lives nowhere else). .showcase is rewritten to .showcase —
   the render wrapper carries the scope classes on the home page.
   ========================================================================== */

.infoc-logo{display:inline-flex;align-items:baseline;font-family:"Michroma",sans-serif;font-weight:400;letter-spacing:.11em;line-height:1;padding-bottom:.26em;-webkit-text-stroke:.063em currentColor;paint-order:stroke fill}.infoc-logo .g{display:inline-block}.infoc-logo .g:first-child{margin-right:-.07em}.infoc-logo .g:nth-child(2){margin-right:-.04em}.infoc-logo .gc{position:relative;color:var(--ioc--blue);margin-right:-.02em}.infoc-logo .gc::after{content:"";position:absolute;left:0;top:calc(100% + .122em);width:calc(100% - .11em);height:.14em;background:currentColor}.logo .logo-sub{margin-left:.65rem;padding-left:.65rem;border-left:1px solid var(--ioc--g20);color:var(--ioc--g70);font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;align-self:center}
.architecture-table-wrap{overflow-x:auto;border-top:1px solid var(--ioc--g20)}.architecture-table{width:100%;border-collapse:collapse;font-size:.85rem}.architecture-table th,.architecture-table td{text-align:left;padding:1rem;border-bottom:1px solid var(--ioc--g20);vertical-align:top}.architecture-table th{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc--g70)}.assessment-result{display:none}.assessment-result.active{display:block}.score-ring{width:6rem;height:6rem;border:3px solid var(--ioc--blue);border-radius:50%;display:grid;place-items:center;margin-bottom:1.5rem}.score-ring strong{font-size:1.6rem;font-weight:600;color:var(--ioc--blue)}.result-notification{margin:1.5rem 0;padding:1.25rem;background:var(--ioc--g10);border-left:4px solid var(--ioc--blue)}.result-notification strong{display:block;margin-bottom:.35rem}.result-notification p{margin:0;color:var(--ioc--g70);font-size:.85rem}

    /* Legacy --ioc--* names alias the canonical --ioc-* tokens in ioc-core.css.
   Never give one of these a literal value: two namespaces with two values is how
   the same grey ended up painted twice on one page. */
body.ioc-site{--ioc--blue:var(--ioc-blue);--ioc--g100:var(--ioc-g100);--ioc--g70:var(--ioc-g70);--ioc--g60:var(--ioc-g60);--ioc--g30:var(--ioc-g30);--ioc--g20:var(--ioc-g20);--ioc--g10:var(--ioc-g10);--ioc--white:var(--ioc-white);--ioc--black:var(--ioc-g100);--ioc--focus:var(--ioc-focus);--ioc--ease:var(--ioc-ease);--ioc--max:1440px;--ioc--gutter:clamp(1.25rem,4vw,4rem);--ioc--section:clamp(5rem,9vw,9rem)}
    *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:5rem}body{margin:0;background:var(--ioc--white);color:var(--ioc--g100);font-family:"Manrope","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}::selection{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:1000;background:var(--ioc--blue);color:var(--ioc-text-on-primary,#fff);padding:.75rem 1rem}.skip-link:focus{top:1rem}:focus-visible{outline:3px solid var(--ioc--focus);outline-offset:3px}.container{width:min(100%,var(--ioc--max));margin-inline:auto;padding-inline:var(--ioc--gutter)}.eyebrow{display:flex;align-items:center;gap:.75rem;margin:0 0 1.25rem;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:600}.eyebrow:before{content:"";width:2rem;height:2px;background:var(--ioc--blue)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:400;letter-spacing:-.035em;line-height:1.02}h1{font-size:clamp(3rem,6.8vw,7.25rem)}h2{font-size:clamp(2.35rem,4.7vw,5rem)}h3{font-size:clamp(1.35rem,2.1vw,2rem)}.lede{max-width:48rem;color:var(--ioc--g70);font-size:clamp(1.08rem,1.5vw,1.35rem);line-height:1.55}.section{padding-block:var(--ioc--section);border-top:1px solid var(--ioc--g20)}.section-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr);gap:clamp(2rem,6vw,7rem);align-items:end;margin-bottom:clamp(3rem,6vw,6rem)}.section-head p{margin:0;color:var(--ioc--g70);font-size:1.05rem}.section-kicker{font-family:"JetBrains Mono",monospace;color:var(--ioc--blue);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:2.5rem;min-height:3.5rem;padding:.9rem 1rem;border:1px solid transparent;border-radius:0;background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);font-weight:600;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ioc--ease)}.btn:hover{background:var(--ioc-blue-hover,#0000c4)}.btn:active{transform:translateY(1px)}.btn .icon{width:1.25rem}.btn-secondary{background:transparent;border-color:var(--ioc--g100);color:var(--ioc--g100)}.btn-secondary:hover{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.text-link{display:inline-flex;align-items:center;gap:.6rem;color:var(--ioc-link-color,var(--ioc--blue));font-weight:600}.text-link .icon{width:1.1rem;transition:transform .2s}.text-link:hover .icon{transform:translateX(.3rem)}.tag{display:inline-flex;padding:.35rem .6rem;background:var(--ioc--g10);font-size:.75rem;letter-spacing:.04em}.icon{width:1.5rem;height:1.5rem;flex:0 0 auto}
    .site-header{position:sticky;top:0;z-index:100;height:4rem;background:rgba(255,255,255,.94);border-bottom:1px solid var(--ioc--g20);backdrop-filter:blur(14px)}.nav-wrap{height:100%;display:flex;align-items:center}.logo{display:flex;align-items:center;align-self:stretch;min-width:10rem;font-size:1.45rem;font-weight:700;letter-spacing:-.08em}.logo-mark{color:var(--ioc--blue)}.nav{display:flex;align-self:stretch;margin-left:auto}.nav-item{position:relative}.nav-trigger,.nav-link{height:100%;display:flex;align-items:center;gap:.4rem;padding:0 1rem;border:0;background:transparent;font-size:.875rem;cursor:pointer}.nav-trigger:hover,.nav-link:hover,.nav-trigger[aria-expanded="true"]{background:var(--ioc--g10)}.nav-trigger .icon{width:1rem;transition:transform .2s}.nav-trigger[aria-expanded="true"] .icon{transform:rotate(180deg)}.nav-actions{display:flex;align-self:stretch;margin-left:.5rem}.nav-actions .btn{min-height:auto;height:100%;gap:1.5rem}.menu-toggle{display:none;width:4rem;height:4rem;border:0;border-left:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff);align-items:center;justify-content:center}.menu-toggle .icon{width:1.5rem}.mega.open{display:grid;animation:menuIn .22s var(--ioc--ease)}.mega a:hover{background:var(--ioc--g10)}.mega span{color:var(--ioc--g70);font-size:.85rem}@keyframes menuIn{from{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}
    .hero{position:relative;overflow:hidden}.hero-grid{min-height:calc(100vh - 4rem);min-height:calc(100svh - 4rem);display:grid;grid-template-columns:minmax(0,7fr) minmax(22rem,5fr);align-items:stretch}.hero-copy{padding:clamp(4rem,9vw,8rem) var(--ioc--gutter) 3rem max(var(--ioc--gutter),calc((100vw - var(--ioc--max))/2 + var(--ioc--gutter)));display:flex;flex-direction:column;justify-content:space-between}.hero h1{max-width:65rem;margin-bottom:2rem}.hero h1 em{color:var(--ioc--blue);font-style:normal}.hero-copy-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:1.5rem;border-top:1px solid var(--ioc--g20);font-size:.78rem;color:var(--ioc--g70)}.hero-panel{position:relative;background:var(--ioc--black);color:var(--ioc-text-on-color,#fff);padding:2rem;display:flex;flex-direction:column;justify-content:space-between;min-height:38rem}.panel-label{display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ioc-g30,#c6c6c6)}.panel-label:after{content:"● LIVE";color:var(--ioc-success,#198038)}.system-map{position:relative;aspect-ratio:1/1;max-height:32rem;margin:auto;width:100%}.system-map:before,.system-map:after{content:"";position:absolute;background:var(--ioc-g80,#393939)}.system-map:before{left:50%;top:10%;bottom:10%;width:1px}.system-map:after{top:50%;left:10%;right:10%;height:1px}.map-core,.map-node{position:absolute;border:1px solid var(--ioc-g70,#525252);background:var(--ioc--black);padding:1rem}.map-core{z-index:2;left:50%;top:50%;width:9rem;height:9rem;transform:translate(-50%,-50%);background:var(--ioc--blue);border-color:var(--ioc--blue);display:flex;flex-direction:column;justify-content:space-between}.map-core span{font-weight:700;letter-spacing:-.05em}.map-core strong{font-weight:400}.map-node{width:41%;min-height:6rem}.map-node small{color:var(--ioc-g50,#8d8d8d)}.map-node strong,.map-node span{display:block}.map-node strong{margin-top:.5rem;font-weight:500}.map-node span{color:var(--ioc-g40,#a8a8a8);font-size:.75rem}.node-a{left:0;top:0}.node-b{right:0;top:0}.node-c{left:0;bottom:0}.node-d{right:0;bottom:0}
    .proof{background:var(--ioc--g10);border-top:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20)}.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}.proof-item{padding:2rem;border-left:1px solid var(--ioc--g20);min-height:10rem}.proof-item:first-child{border-left:0}.proof-item strong{display:block;font-size:clamp(2rem,4vw,3.75rem);font-weight:300;letter-spacing:-.05em;line-height:1;color:var(--ioc--blue)}.proof-item span{display:block;margin-top:1rem;color:var(--ioc--g70);font-size:.85rem;max-width:12rem}
    .solution-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ioc--g20);border-left:1px solid var(--ioc--g20)}.solution-card{position:relative;min-height:25rem;padding:2rem;border-right:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20);display:flex;flex-direction:column;overflow:hidden;transition:background .25s,color .25s}.solution-card:hover{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.solution-card:hover p{color:var(--ioc-g30,#c6c6c6)}.solution-card .icon{margin:auto 0;color:var(--ioc--blue);width:3.5rem;height:3.5rem}.solution-card h3{margin-bottom:1rem}.solution-card p{color:var(--ioc--g70);font-size:.9rem}.solution-card .card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--ioc--g20);font-size:.78rem}.solution-card .card-foot .icon{width:1.1rem;height:1.1rem;margin:0}.solution-card:hover .card-foot{border-color:var(--ioc-g70,#525252)}
    .ai-section{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.ai-section .section-head p{color:var(--ioc-g30,#c6c6c6)}.ai-layout{display:grid;grid-template-columns:minmax(16rem,1fr) minmax(0,3fr);border-top:1px solid var(--ioc-g80,#393939)}.tabs{border-right:1px solid var(--ioc-g80,#393939)}.tab{width:100%;min-height:5rem;padding:1rem 1.25rem;border:0;border-bottom:1px solid var(--ioc-g80,#393939);background:transparent;color:var(--ioc-g30,#c6c6c6);text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.tab:hover{background:var(--ioc-g90,#262626)}.tab[aria-selected="true"]{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.tab-panel{display:none;min-height:30rem;padding:clamp(2rem,5vw,5rem)}.tab-panel.active{display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;animation:panelIn .35s var(--ioc--ease)}@keyframes panelIn{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}.tab-panel h3{font-size:clamp(2rem,4vw,4rem);max-width:42rem}.tab-panel p{color:var(--ioc-g30,#c6c6c6);max-width:42rem}.cap-list{align-self:end;list-style:none;margin:0;padding:0}.cap-list li{padding:1rem 0;border-top:1px solid var(--ioc-g80,#393939);display:flex;gap:.75rem}.cap-list .icon{width:1.1rem;color:var(--ioc-success,#198038)}
    .industry-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ioc--g20);border-left:1px solid var(--ioc--g20)}.industry{min-height:19rem;padding:1.5rem;border-right:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20);display:flex;flex-direction:column;justify-content:space-between;transition:background .2s}.industry:hover{background:var(--ioc--g10)}.industry .icon{color:var(--ioc--blue);width:2rem;height:2rem}.industry p{color:var(--ioc--g70);font-size:.85rem;margin-bottom:0}.industry strong{font-size:1.25rem;font-weight:500}.industry span{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--ioc--g60)}
    .process{background:var(--ioc--g10)}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);counter-reset:steps}.step{position:relative;padding:2rem 2rem 4rem 0;border-top:2px solid var(--ioc--g100);counter-increment:steps}.step:before{content:"0" counter(steps);display:block;margin-bottom:4rem;color:var(--ioc--blue);font-family:"JetBrains Mono",monospace;font-size:.75rem}.step:not(:last-child):after{content:"";position:absolute;right:0;top:-5px;width:8px;height:8px;background:var(--ioc--blue)}.step h3{font-size:1.45rem}.step p{color:var(--ioc--g70);font-size:.9rem;max-width:17rem}
    .gateways{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc--g20);border:1px solid var(--ioc--g20)}.gateway{background:var(--ioc-surface,#fff);min-height:35rem;padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:space-between;transition:background .25s,color .25s}.gateway:hover{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.gateway .gateway-top{display:flex;justify-content:space-between}.gateway .icon{width:2.5rem;height:2.5rem}.gateway h3{font-size:clamp(2.5rem,5vw,5rem);margin-bottom:1rem}.gateway p{max-width:32rem;color:var(--ioc--g70)}.gateway:hover p{color:var(--ioc-text-on-color,#fff)}.gateway .text-link{color:inherit}.gateway-index{font-family:"JetBrains Mono",monospace;font-size:.75rem}
    .case-grid{display:grid;grid-template-columns:1.2fr .8fr;min-height:38rem;border:1px solid var(--ioc--g20)}.case-visual{position:relative;background:var(--ioc-surface-brand-deep,#001141);color:var(--ioc-text-on-color,#fff);padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.case-visual:after{content:"";position:absolute;width:24rem;height:24rem;right:-8rem;bottom:-8rem;border:5rem solid var(--ioc--blue);border-radius:50%;opacity:.7}.case-visual>.carbon-icon{position:relative;z-index:1;width:clamp(5rem,12vw,11rem);height:clamp(5rem,12vw,11rem);color:var(--ioc-text-on-color,#fff)}.case-visual p{position:relative;z-index:1;max-width:24rem;color:var(--ioc-text-on-brand-deep,#d0e2ff)}.case-copy{padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:space-between}.case-copy blockquote{font-size:clamp(1.5rem,2.5vw,2.6rem);line-height:1.25;letter-spacing:-.03em;margin:0}.case-copy cite{display:block;margin-top:2rem;color:var(--ioc--g70);font-size:.85rem;font-style:normal}.outcomes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ioc--g20)}.outcomes div{padding:1rem 0}.outcomes strong{display:block;font-size:1.75rem;font-weight:400}.outcomes span{font-size:.75rem;color:var(--ioc--g70)}
    .insights{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ioc--g20)}.insight{padding:2rem 2rem 2rem 0;min-height:25rem;border-bottom:1px solid var(--ioc--g20);display:flex;flex-direction:column}.insight:not(:last-child){border-right:1px solid var(--ioc--g20);margin-right:2rem}.insight-meta{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ioc--g60);text-transform:uppercase;letter-spacing:.06em}.insight-graphic{height:8rem;margin:2rem 0;background:var(--ioc--g10);position:relative;overflow:hidden}.insight-graphic:before{content:"";position:absolute;background:var(--ioc--blue);inset:auto 0 0;height:28%}.insight:nth-child(3) .insight-graphic:before{height:100%;left:66%;background:var(--ioc--g100)}.insight h3{font-size:1.45rem}.insight .text-link{margin-top:auto}
    .faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,8vw,9rem)}.faq-list{border-top:1px solid var(--ioc--g100)}.faq-item{border-bottom:1px solid var(--ioc--g20)}.faq-q{width:100%;border:0;background:transparent;padding:1.4rem 0;display:flex;justify-content:space-between;align-items:center;text-align:left;font-weight:500;cursor:pointer}.faq-q .icon{transition:transform .25s}.faq-q[aria-expanded="true"] .icon{transform:rotate(45deg)}.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ioc--ease)}.faq-a>div{overflow:hidden}.faq-a p{max-width:42rem;color:var(--ioc--g70);padding:0 2rem 1.5rem 0;margin:0}.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
    .contact{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,9vw,10rem)}.contact h2{font-size:clamp(3rem,6vw,6.5rem)}.contact p{color:var(--ioc-text-on-brand-soft,#e5e5ff);max-width:38rem}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.field{display:flex;flex-direction:column;gap:.5rem}.field.full{grid-column:1/-1}.field label{font-size:.75rem}.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid var(--ioc-border-on-color,#fff);background:rgba(255,255,255,.1);border-radius:0;color:var(--ioc-text-on-color,#fff);padding:1rem;outline:0}.field select option{color:var(--ioc--g100)}.field textarea{min-height:8rem;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{box-shadow:inset 0 -3px var(--ioc-border-on-color,#fff);background:rgba(255,255,255,.16)}.field input::placeholder,.field textarea::placeholder{color:var(--ioc-text-on-brand-muted,#d0d0ff)}.contact-form .btn{grid-column:1/-1;background:var(--ioc-text-on-color,#fff);color:var(--ioc--blue);margin-top:.5rem}.contact-form .btn:hover{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.form-note{grid-column:1/-1;font-size:.72rem;color:var(--ioc-text-on-brand-soft,#e5e5ff)}
    footer{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff);padding-top:4rem}.footer-top{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:3rem;padding-bottom:5rem}.footer-brand .logo{height:auto}.footer-brand p{color:var(--ioc-g40,#a8a8a8);max-width:22rem;margin-top:1.5rem}.footer-col h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-g50,#8d8d8d)}.footer-col a{display:block;padding:.35rem 0;color:var(--ioc-g30,#c6c6c6);font-size:.9rem}.footer-col a:hover{color:var(--ioc-text-on-color,#fff);text-decoration:underline}.footer-bottom{display:flex;justify-content:space-between;gap:2rem;padding:1.5rem 0;border-top:1px solid var(--ioc-g80,#393939);color:var(--ioc-g50,#8d8d8d);font-size:.75rem}.footer-bottom div{display:flex;gap:1.5rem}.back-top{border:0;background:transparent;color:var(--ioc-text-on-color,#fff);display:flex;gap:.5rem;cursor:pointer}.back-top .icon{transform:rotate(-90deg);width:1rem}
    .reveal{opacity:0;transform:translateY(1.5rem);transition:opacity .7s var(--ioc--ease),transform .7s var(--ioc--ease)}.reveal.visible{opacity:1;transform:none}.stagger>*{opacity:0;transform:translateY(1rem);transition:opacity .55s var(--ioc--ease),transform .55s var(--ioc--ease)}.stagger.visible>*{opacity:1;transform:none}.stagger.visible>*:nth-child(2){transition-delay:.07s}.stagger.visible>*:nth-child(3){transition-delay:.14s}.stagger.visible>*:nth-child(4){transition-delay:.21s}.stagger.visible>*:nth-child(5){transition-delay:.28s}.stagger.visible>*:nth-child(6){transition-delay:.35s}
    /* Direction 02: editorial composition */
    .editorial{--ioc--blue:var(--ioc-blue)}.editorial h1,.editorial h2{letter-spacing:-.055em}.editorial .site-header{height:5rem}.editorial .hero-grid{grid-template-columns:1fr;min-height:auto}.editorial .hero-copy{min-height:calc(100svh - 5rem);padding-top:clamp(5rem,10vw,10rem);display:grid;grid-template-columns:minmax(0,1.7fr) minmax(19rem,.3fr);column-gap:4rem}.editorial .hero-copy>.eyebrow{grid-column:1/-1;align-self:start}.editorial .hero h1{font-size:clamp(4rem,8.6vw,9.25rem);grid-column:1/-1;align-self:center;max-width:85rem}.editorial .hero-copy-bottom{grid-column:1/-1}.editorial .hero-panel{min-height:30rem;background:var(--ioc-surface,#fff);color:var(--ioc--g100);border-top:1px solid var(--ioc--g20);padding:var(--ioc--gutter);margin-inline:auto;width:min(100%,var(--ioc--max))}.editorial .panel-label{color:var(--ioc--g70)}.editorial .editorial-visual{display:grid;grid-template-columns:.4fr 1.6fr;gap:2rem;align-items:start}.quote-mark{font-size:14rem;line-height:.6;color:var(--ioc--blue);font-family:Georgia,serif;margin:0}.manifesto{font-size:clamp(2rem,4.5vw,5rem);line-height:1.1;letter-spacing:-.045em;max-width:62rem}.manifesto-foot{grid-column:2;display:flex;gap:2rem;border-top:1px solid var(--ioc--g20);padding-top:1rem;font-family:"JetBrains Mono",monospace;font-size:.72rem}.editorial .proof{background:var(--ioc-surface,#fff)}.editorial .proof-grid{border-top:1px solid var(--ioc--g20)}.editorial .proof-item{min-height:13rem;padding-top:3rem}.editorial .solution-grid{grid-template-columns:1fr 1fr}.editorial .solution-card{min-height:30rem}.editorial .solution-card:nth-child(3n){grid-column:span 2;min-height:22rem}.editorial .gateway{min-height:42rem}
    /* Direction 03: modular control system */
    .modular{--ioc--g10:var(--ioc-g10)}.modular .hero{background:var(--ioc--g10)}.modular .hero-grid{padding:var(--ioc--gutter);gap:1rem;grid-template-columns:1.05fr .95fr;min-height:calc(100svh - 4rem)}.modular .hero-copy{background:var(--ioc-surface,#fff);padding:clamp(3rem,6vw,6rem);border:1px solid var(--ioc--g20)}.modular .hero-panel{background:var(--ioc-surface,#fff);color:var(--ioc--g100);border:1px solid var(--ioc--g20);min-height:auto}.modular .panel-label{color:var(--ioc--g70)}.modular .control-centre{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:1rem;margin:auto 0}.cc-top,.cc-main,.cc-small,.cc-wide{border:1px solid var(--ioc--g20);padding:1.5rem}.cc-top{grid-column:1/-1;display:flex;align-items:center;gap:.75rem}.cc-top strong{margin-left:auto;font-size:1.75rem;font-weight:400}.status-dot{width:.65rem;height:.65rem;background:var(--ioc-success,#198038);border-radius:50%;box-shadow:0 0 0 .3rem var(--ioc-success-surface,#defbe6)}.cc-main{grid-row:2;min-height:17rem;display:flex;flex-direction:column}.cc-main strong{font-size:4rem;font-weight:300;color:var(--ioc--blue)}.bars{display:flex;gap:.4rem;align-items:end;height:7rem;margin-top:auto}.bars i{flex:1;background:var(--ioc--blue)}.cc-small{display:flex;flex-direction:column;justify-content:space-between}.cc-small strong{font-size:3rem;font-weight:300}.cc-wide{grid-column:1/-1}.progress{height:.4rem;background:var(--ioc--g20);margin:1rem 0 .6rem}.progress i{display:block;width:80%;height:100%;background:var(--ioc--blue)}.cc-wide small{color:var(--ioc--g70)}.modular .solution-grid{gap:1rem;border:0;background:var(--ioc--g10);padding:1rem}.modular .solution-card{border:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff)}.modular .solution-card:hover{background:var(--ioc--blue)}.modular .industry-strip{gap:1rem;border:0}.modular .industry{border:1px solid var(--ioc--g20)}.modular .process-grid{gap:1rem}.modular .step{background:var(--ioc-surface,#fff);padding:2rem;border:1px solid var(--ioc--g20)}.modular .step:before{margin-bottom:6rem}.modular .step:after{display:none}.modular .case-grid{gap:1rem;border:0;background:var(--ioc--g10);padding:1rem}.modular .case-visual,.modular .case-copy{border:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff);color:var(--ioc--g100)}.modular .case-visual p{color:var(--ioc--g70)}
    @media(max-width:1024px){.nav{display:none}.nav-actions .btn-secondary{display:none}.menu-toggle{display:flex}.site-header.mobile-open{height:auto}.site-header.mobile-open .nav-wrap{height:auto;min-height:4rem;flex-wrap:wrap}.site-header.mobile-open .nav{display:flex;order:4;width:100%;margin:0;flex-direction:column;border-top:1px solid var(--ioc--g20)}.site-header.mobile-open .nav-item,.site-header.mobile-open .nav-link,.site-header.mobile-open .nav-trigger{width:100%;height:auto;min-height:3.5rem}.site-header.mobile-open .mega{position:static;width:100%;box-shadow:none;border-inline:0;grid-template-columns:1fr 1fr}.hero-grid,.modular .hero-grid{grid-template-columns:1fr;min-height:auto}.hero-copy{min-height:45rem;padding-left:var(--ioc--gutter)}.hero-panel{min-height:36rem}.editorial .hero-copy{grid-template-columns:1fr}.editorial .hero-panel{width:100%}.solution-grid{grid-template-columns:1fr 1fr}.proof-grid{grid-template-columns:1fr 1fr}.proof-item:nth-child(3){border-left:0;border-top:1px solid var(--ioc--g20)}.proof-item:nth-child(4){border-top:1px solid var(--ioc--g20)}.ai-layout{grid-template-columns:1fr}.tabs{border-right:0;display:grid;grid-template-columns:repeat(4,1fr)}.tab{font-size:.8rem;border-right:1px solid var(--ioc-g80,#393939)}.tab-panel.active{grid-template-columns:1fr}.industry-strip{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr}.step:before{margin-bottom:2rem}.footer-top{grid-template-columns:1fr 1fr}.editorial .solution-card:nth-child(3n){grid-column:auto}.editorial .solution-grid{grid-template-columns:1fr 1fr}.editorial .editorial-visual{grid-template-columns:.25fr 1.75fr}}
    @media(max-width:700px){:root{--ioc--section:4.5rem}.container{padding-inline:1.25rem}.section-head{grid-template-columns:1fr;gap:1.5rem;margin-bottom:3rem}.site-header{height:4rem}.logo{min-width:auto}.nav-actions .btn{display:none}.hero-copy{min-height:auto;padding:4.5rem 1.25rem 3rem}.hero-copy-bottom{grid-template-columns:1fr}.hero-panel{min-height:31rem;padding:1.25rem}.hero-meta{margin-top:2rem}.hero h1{font-size:clamp(2.8rem,14vw,4.75rem)}.proof-grid{grid-template-columns:1fr 1fr}.proof-item{padding:1.25rem;min-height:9rem}.solution-grid,.editorial .solution-grid{grid-template-columns:1fr}.solution-card,.editorial .solution-card{min-height:22rem}.tabs{display:flex;overflow-x:auto}.tab{min-width:11rem}.tab-panel{padding:2rem 1.25rem}.industry-strip{grid-template-columns:1fr}.industry{min-height:14rem}.process-grid{grid-template-columns:1fr}.step{padding-right:0}.step:not(:last-child):after{display:none}.gateways{grid-template-columns:1fr}.gateway{min-height:28rem}.case-grid{grid-template-columns:1fr}.case-visual{min-height:26rem}.insights{grid-template-columns:1fr}.insight:not(:last-child){border-right:0;margin-right:0}.faq-wrap{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.contact-form{grid-template-columns:1fr}.field,.field.full{grid-column:1}.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column}.editorial .hero-copy{display:flex;min-height:auto}.editorial .hero h1{font-size:clamp(3.2rem,15vw,5rem)}.editorial .hero-panel{min-height:30rem}.editorial .editorial-visual{grid-template-columns:1fr}.editorial .quote-mark{font-size:8rem}.editorial .manifesto-foot{grid-column:1;flex-wrap:wrap}.modular .hero-grid{padding:1rem}.modular .hero-copy{padding:3rem 1.25rem}.control-centre{gap:.5rem}.cc-top,.cc-main,.cc-small,.cc-wide{padding:1rem}.cc-main strong{font-size:3rem}.cc-small strong{font-size:2rem}.site-header.mobile-open .mega{grid-template-columns:1fr}.mega a{min-height:6rem}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}[data-reveal],[data-stagger]>*{opacity:1;transform:none}}
    .bars .b1{height:28%}.bars .b2{height:42%}.bars .b3{height:55%}.bars .b4{height:72%}.bars .b5{height:88%}

    /* INFOC definitive Carbon showcase */
    .showcase{--ioc--green:#198038}[data-reveal],[data-stagger]>*{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(1.5rem)}.js .reveal.visible{opacity:1;transform:none}.js .stagger>*{opacity:0;transform:translateY(1rem)}.js .stagger.visible>*{opacity:1;transform:none}
    .announcement{min-height:2.5rem;background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff);font-size:.75rem}.announcement .container{min-height:2.5rem;display:flex;align-items:center;justify-content:center;gap:1rem;text-align:center}.announcement strong{font-weight:600}.announcement a{display:inline-flex;align-items:center;gap:.35rem;color:var(--ioc-accent-on-inverse,#78a9ff)}.announcement .icon{width:.9rem;height:.9rem}
    
    .showcase .site-header{top:0}.showcase .logo{letter-spacing:-.07em}.showcase .logo-sub{margin-left:.65rem;padding-left:.65rem;border-left:1px solid var(--ioc--g20);color:var(--ioc--g70);font-family:"JetBrains Mono",monospace;font-size:.62rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase}
    .showcase-hero{position:relative;min-height:calc(100svh - 6.5rem);border-bottom:1px solid var(--ioc--g20);overflow:hidden}.showcase-hero .container{min-height:inherit;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(28rem,.8fr);gap:clamp(3rem,7vw,8rem);align-items:center;padding-block:clamp(5rem,9vw,9rem)}.showcase-hero h1{font-size:clamp(3.75rem,7.5vw,8rem);max-width:72rem;margin-bottom:2rem}.showcase-hero h1 em{font-style:normal;color:var(--ioc--blue)}.showcase-hero .lede{max-width:45rem}.showcase-hero .hero-actions{margin:2.25rem 0}.hero-trust{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin:0;padding:1.25rem 0 0;border-top:1px solid var(--ioc--g20);list-style:none;color:var(--ioc--g70);font-size:.78rem}.hero-trust li{display:flex;align-items:center;gap:.45rem}.hero-trust .icon{width:1rem;color:var(--ioc--green)}
    .decision-console{position:relative;border:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff);box-shadow:1.5rem 1.5rem 0 var(--ioc--g10);min-height:36rem}.console-bar{height:3rem;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;border-bottom:1px solid var(--ioc--g20);font-family:"JetBrains Mono",monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}.console-status{display:flex;align-items:center;gap:.5rem;color:var(--ioc--green)}.console-status:before{content:"";width:.5rem;height:.5rem;background:var(--ioc-success,#198038);border-radius:50%}.console-body{padding:1.5rem}.console-question{margin:0 0 1rem;color:var(--ioc--g70);font-size:.8rem}.console-route{width:100%;border:1px solid var(--ioc--g20);border-bottom:0;background:var(--ioc-surface,#fff);padding:1rem;display:grid;grid-template-columns:2.5rem 1fr auto;gap:1rem;align-items:center;text-align:left;cursor:pointer}.console-route:last-of-type{border-bottom:1px solid var(--ioc--g20)}.console-route:hover,.console-route[aria-pressed="true"]{position:relative;z-index:1;border-color:var(--ioc--blue);background:var(--ioc-selected-surface,#edf5ff)}.console-route[aria-pressed="true"]:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--ioc--blue)}.console-route>.carbon-icon:first-child{width:1rem;height:1rem;color:var(--ioc--blue)}.console-route strong{display:block;font-weight:500}.console-route small{color:var(--ioc--g70)}.console-route .icon{width:1.1rem}.console-result{margin-top:1.5rem;padding:1.25rem;background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.console-result-label{display:block;color:var(--ioc-g40,#a8a8a8);font-family:"JetBrains Mono",monospace;font-size:.67rem;text-transform:uppercase;letter-spacing:.08em}.console-result strong{display:block;margin:.65rem 0;font-size:1.2rem;font-weight:500}.console-result p{color:var(--ioc-g30,#c6c6c6);font-size:.8rem;margin-bottom:0}
    .logo-proof{border-bottom:1px solid var(--ioc--g20)}.logo-proof .container{display:grid;grid-template-columns:1fr repeat(4,auto);gap:2rem;align-items:center;min-height:5.5rem}.logo-proof p{margin:0;color:var(--ioc--g70);font-size:.75rem}.proof-mark{display:flex;align-items:center;gap:.55rem;padding-left:2rem;border-left:1px solid var(--ioc--g20);white-space:nowrap;font-size:.75rem;font-weight:600}.proof-mark .icon{width:1rem;color:var(--ioc--blue)}
    .persona-section{background:var(--ioc--g10)}.content-switcher{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ioc--g20);margin-bottom:1rem}.persona-tab{min-height:4rem;padding:1rem;border:0;border-right:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff);text-align:left;cursor:pointer}.persona-tab:last-child{border-right:0}.persona-tab:hover{background:var(--ioc-surface-hover,#e8e8e8)}.persona-tab[aria-selected="true"]{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.persona-panel{display:none;background:var(--ioc-surface,#fff);border:1px solid var(--ioc--g20);min-height:28rem}.persona-panel.active{display:grid;grid-template-columns:1.25fr .75fr;animation:panelIn .3s var(--ioc--ease)}.persona-copy{padding:clamp(2rem,5vw,5rem)}.persona-copy h3{font-size:clamp(2.25rem,4.2vw,4.5rem);max-width:48rem}.persona-copy p{max-width:42rem;color:var(--ioc--g70);font-size:1.05rem}.persona-outcomes{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);padding:clamp(2rem,4vw,4rem);display:flex;flex-direction:column}.persona-outcomes>span{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.persona-outcomes ul{list-style:none;padding:0;margin:auto 0 0}.persona-outcomes li{display:flex;gap:.75rem;padding:1rem 0;border-top:1px solid rgba(255,255,255,.3)}.persona-outcomes .icon{width:1.1rem}
    .journey-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ioc--g20);border-left:1px solid var(--ioc--g20)}.journey{border-right:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff)}.journey summary{list-style:none;min-height:17rem;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}.journey summary::-webkit-details-marker{display:none}.journey summary:hover{background:var(--ioc--g10)}.journey[open] summary{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.journey-top{display:flex;justify-content:space-between}.journey-top span{display:inline-flex;align-items:center;gap:.5rem;font-family:"JetBrains Mono",monospace;color:var(--ioc--blue);font-size:.72rem}.journey-top span>.carbon-icon{width:1rem;height:1rem}.journey[open] .journey-top span{display:inline-flex;align-items:center;gap:.5rem;color:var(--ioc-accent-on-inverse,#78a9ff)}.journey-top span>.carbon-icon{width:1rem;height:1rem}.journey summary h3{max-width:28rem;margin:2rem 0 0}.journey-toggle{box-sizing:border-box;width:2rem;height:2rem;padding:.375rem;border:1px solid currentColor;transition:transform .2s}.journey[open] .journey-toggle{transform:rotate(45deg)}.journey-detail{padding:2rem;border-top:1px solid var(--ioc--g20);display:grid;grid-template-columns:1fr 1fr;gap:2rem}.journey-detail p{color:var(--ioc--g70)}.journey-detail ul{margin:0;padding:0;list-style:none}.journey-detail li{padding:.65rem 0;border-top:1px solid var(--ioc--g20);display:flex;gap:.6rem;font-size:.85rem}.journey-detail .icon{width:1rem;color:var(--ioc--green)}
    .architecture{background:var(--ioc-surface,#fff)}.architecture-shell{border:1px solid var(--ioc--g20);display:grid;grid-template-columns:17rem 1fr}.process-nav{background:var(--ioc--g10);border-right:1px solid var(--ioc--g20);padding:1rem}.process-button{width:100%;min-height:3.5rem;border:0;border-bottom:1px solid var(--ioc--g20);background:transparent;padding:.75rem;text-align:left;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.process-button:hover{background:var(--ioc-surface-hover,#e8e8e8)}.process-button[aria-selected="true"]{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.architecture-view{min-width:0;padding:clamp(1.5rem,4vw,4rem)}.architecture-title{display:flex;align-items:start;justify-content:space-between;gap:2rem;margin-bottom:3rem}.architecture-title h3{font-size:clamp(2rem,4vw,4rem);margin-bottom:.75rem}.architecture-title p{max-width:42rem;color:var(--ioc--g70)}.info-button{position:relative;border:0;background:transparent;color:var(--ioc--blue);padding:.5rem;cursor:help}.info-button .icon{width:1.3rem}.info-button:focus:after,.info-button:hover:after{content:attr(data-tooltip);position:absolute;right:0;top:100%;z-index:5;width:16rem;background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff);padding:.75rem;text-align:left;font-size:.72rem;font-weight:400}.layer-map{display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch}.layer{position:relative;min-height:15rem;padding:1.25rem;border:1px solid var(--ioc--g20);border-right:0;display:flex;flex-direction:column;justify-content:space-between}.layer:last-child{border-right:1px solid var(--ioc--g20)}.layer:after{content:"";position:absolute;left:100%;top:50%;z-index:2;width:1rem;height:1px;background:var(--ioc--g100)}.layer:last-child:after{display:none}.layer>.carbon-icon{width:1.25rem;height:1.25rem;color:var(--ioc--g70)}.layer strong{font-size:1rem;font-weight:500}.layer span{color:var(--ioc--g70);font-size:.75rem}.layer.active{background:var(--ioc--blue);border-color:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}.layer.active>.carbon-icon,.layer.active span{color:var(--ioc-text-on-brand-deep,#d0e2ff)}.architecture-table-wrap{margin-top:2rem;overflow-x:auto}.architecture-table{width:100%;border-collapse:collapse;font-size:.82rem}.architecture-table th,.architecture-table td{padding:1rem;text-align:left;border-bottom:1px solid var(--ioc--g20)}.architecture-table th{background:var(--ioc--g10);font-weight:600}.architecture-table td:first-child{font-weight:600}.architecture-table .tag{white-space:nowrap}
    .value-section{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.value-section .section-head p{color:var(--ioc-g30,#c6c6c6)}.value-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc-g80,#393939);border:1px solid var(--ioc-g80,#393939)}.value-card{min-height:22rem;background:var(--ioc--g100);padding:2rem;display:flex;flex-direction:column}.value-card:hover{background:var(--ioc-g90,#262626)}.value-card>.carbon-icon{width:1.25rem;height:1.25rem;color:var(--ioc-accent-on-inverse,#78a9ff)}.value-card strong{display:block;margin:auto 0 1rem;font-size:clamp(2rem,4vw,4rem);font-weight:300;letter-spacing:-.05em}.value-card p{color:var(--ioc-g30,#c6c6c6);max-width:28rem}.value-card footer{display:flex;justify-content:space-between;align-items:center;padding:1rem 0 0;border-top:1px solid var(--ioc-g70,#525252);background:transparent;font-size:.75rem}.value-card .icon{width:1rem}
    .assessment-section{background:var(--ioc--g10)}.assessment-shell{display:grid;grid-template-columns:.72fr 1.28fr;border:1px solid var(--ioc--g20);background:var(--ioc-surface,#fff);min-height:38rem}.assessment-aside{padding:clamp(2rem,4vw,4rem);background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);display:flex;flex-direction:column}.assessment-aside h3{font-size:clamp(2rem,4vw,4rem)}.assessment-aside p{color:var(--ioc-text-on-brand-soft,#e5e5ff)}.progress-steps{list-style:none;margin:auto 0 0;padding:0}.progress-steps li{display:grid;grid-template-columns:1.5rem 1fr;gap:.75rem;padding:.8rem 0;color:var(--ioc-text-on-brand-muted,#d0d0ff)}.progress-steps li:before{content:"";width:.75rem;height:.75rem;margin-top:.35rem;border:1px solid currentColor;border-radius:50%}.progress-steps li.current{color:var(--ioc-text-on-color,#fff);font-weight:600}.progress-steps li.current:before{background:var(--ioc-text-on-color,#fff);box-shadow:inset 0 0 0 3px var(--ioc--blue)}.progress-steps li.done:before{background:var(--ioc-success,#198038);border-color:var(--ioc-success,#198038)}.assessment-main{padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column}.assessment-step{display:none;border:0;padding:0;margin:0}.assessment-step.active{display:block;animation:panelIn .25s var(--ioc--ease)}.assessment-step legend{font-size:clamp(1.65rem,3vw,2.75rem);line-height:1.15;letter-spacing:-.03em;margin-bottom:2rem}.choice{position:relative;display:flex;gap:1rem;padding:1rem;border:1px solid var(--ioc--g20);border-bottom:0;cursor:pointer}.choice:last-child{border-bottom:1px solid var(--ioc--g20)}.choice:hover{background:var(--ioc--g10)}.choice input{position:absolute;opacity:0}.radio-ui{width:1.25rem;height:1.25rem;border:1px solid var(--ioc--g100);border-radius:50%;flex:0 0 auto}.choice input:checked+.radio-ui{background:var(--ioc--blue);box-shadow:inset 0 0 0 4px var(--ioc-border-on-color,#fff);border-color:var(--ioc--blue)}.choice:has(input:focus-visible){outline:3px solid var(--ioc--focus);outline-offset:2px}.choice-text strong,.choice-text small{display:block}.choice-text strong{font-weight:500}.choice-text small{color:var(--ioc--g70);margin-top:.2rem}.assessment-actions{margin-top:auto;padding-top:2rem;display:flex;justify-content:space-between;gap:1rem}.assessment-actions .btn[disabled]{background:var(--ioc-g30,#c6c6c6);color:var(--ioc-g60,#666666);cursor:not-allowed}.assessment-result{display:none}.assessment-result.active{display:block}.score-ring{width:10rem;height:10rem;border:1.5rem solid var(--ioc--g10);border-top-color:var(--ioc--blue);border-right-color:var(--ioc--blue);border-radius:50%;display:grid;place-items:center;margin-bottom:2rem}.score-ring strong{font-size:2.4rem;font-weight:300}.result-notification{border-left:4px solid var(--ioc--blue);background:var(--ioc-selected-surface,#edf5ff);padding:1rem;margin:1.5rem 0}.result-notification strong{display:block}.result-notification p{margin:.35rem 0 0;color:var(--ioc--g70)}
    .resource-toolbar{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2rem}.search-field{position:relative;width:min(100%,28rem)}.search-field label{display:block;margin-bottom:.4rem;font-size:.75rem}.search-field input{width:100%;height:3.5rem;padding:0 3rem 0 1rem;border:0;border-bottom:1px solid var(--ioc--g100);background:var(--ioc--g10)}.search-field .icon{position:absolute;right:1rem;bottom:1rem;width:1.25rem;pointer-events:none}.filter-status{color:var(--ioc--g70);font-size:.78rem}.insight[hidden]{display:none}.empty-state{display:none;padding:3rem;background:var(--ioc--g10);text-align:center}.empty-state.visible{display:block}
    .trust-centre{background:var(--ioc-surface,#fff)}.trust-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);border:1px solid var(--ioc--g20)}.trust-intro,.trust-item{min-height:18rem;padding:2rem;border-right:1px solid var(--ioc--g20)}.trust-item:last-child{border-right:0}.trust-intro{background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff)}.trust-intro h3{font-size:2rem}.trust-intro p{color:var(--ioc-g30,#c6c6c6)}.trust-item{display:flex;flex-direction:column}.trust-item .icon{color:var(--ioc--blue);width:2rem;height:2rem}.trust-item strong{margin:auto 0 .75rem;font-size:1.2rem;font-weight:500}.trust-item p{color:var(--ioc--g70);font-size:.82rem;margin:0}
    .sticky-conversion{position:fixed;z-index:90;left:50%;bottom:1rem;transform:translate(-50%,calc(100% + 2rem));width:min(calc(100% - 2rem),58rem);background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff);border:1px solid var(--ioc-g70,#525252);box-shadow:0 1rem 3rem rgba(0,0,0,.25);display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.75rem .75rem .75rem 1.25rem;transition:transform .35s var(--ioc--ease)}.sticky-conversion.visible{transform:translate(-50%,0)}.sticky-conversion p{margin:0;font-size:.82rem}.sticky-conversion .btn{min-height:2.75rem;padding:.65rem .9rem;gap:1rem}.sticky-close{border:0;background:transparent;color:var(--ioc-text-on-color,#fff);padding:.5rem;cursor:pointer}.sticky-close .icon{width:1rem}
    .carbon-dialog{width:min(calc(100% - 2rem),52rem);max-height:90vh;padding:0;border:0;background:var(--ioc-surface,#fff);color:var(--ioc--g100);box-shadow:0 2rem 6rem rgba(0,0,0,.35)}.carbon-dialog::backdrop{background:rgba(0,0,0,.65)}.dialog-head{display:flex;align-items:start;justify-content:space-between;padding:1.5rem;border-bottom:1px solid var(--ioc--g20)}.dialog-head h2{font-size:2rem;margin:0}.dialog-close{width:3rem;height:3rem;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}.dialog-body{padding:clamp(1.5rem,4vw,3rem)}.dialog-body>p{color:var(--ioc--g70)}.dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.dialog-grid .field.full{grid-column:1/-1}.dialog-grid .field input,.dialog-grid .field select,.dialog-grid .field textarea{background:var(--ioc--g10);color:var(--ioc--g100);border-bottom:1px solid var(--ioc--g100)}.dialog-grid .field input::placeholder,.dialog-grid .field textarea::placeholder{color:var(--ioc--g70)}.checkbox{display:flex;gap:.75rem;align-items:start;font-size:.75rem;color:var(--ioc--g70)}.checkbox input{margin-top:.2rem;width:1rem;height:1rem}.dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:2rem}
    .showcase .contact{position:relative;overflow:hidden}.showcase .contact:after{content:"INFOC";position:absolute;right:-1rem;bottom:-3rem;color:rgba(255,255,255,.09);font-size:20vw;font-weight:700;letter-spacing:-.1em;line-height:.7;pointer-events:none}.showcase .contact-grid{position:relative;z-index:1}
    @media(max-width:1100px){.showcase-hero .container{grid-template-columns:1fr}.decision-console{max-width:46rem}.logo-proof .container{grid-template-columns:1fr 1fr}.logo-proof p{grid-column:1/-1;padding-top:1.25rem}.proof-mark{padding:0 0 1.25rem;border-left:0}.architecture-shell{grid-template-columns:1fr}.process-nav{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--ioc--g20)}.process-button{min-width:10rem}.layer-map{grid-template-columns:repeat(3,1fr)}.layer:nth-child(3){border-right:1px solid var(--ioc--g20)}.layer:nth-child(n+4){border-top:0}.assessment-shell{grid-template-columns:1fr}.progress-steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2rem}.trust-grid{grid-template-columns:1fr 1fr}.trust-intro,.trust-item{border-bottom:1px solid var(--ioc--g20)}}
    @media(max-width:700px){.announcement .container{padding-block:.55rem}.announcement strong{display:none}.showcase .logo-sub{display:none}.showcase-hero .container{padding-block:4rem;gap:3rem}.showcase-hero h1{font-size:clamp(3rem,14vw,5rem)}.decision-console{min-height:auto;box-shadow:.75rem .75rem 0 var(--ioc--g10)}.console-route{grid-template-columns:2rem 1fr}.console-route .icon{display:none}.logo-proof .container{grid-template-columns:1fr 1fr;gap:0}.logo-proof p{padding:1.25rem 0}.proof-mark{min-height:4rem;padding:0;border-top:1px solid var(--ioc--g20);font-size:.68rem}.content-switcher{grid-template-columns:1fr 1fr}.persona-tab:nth-child(2){border-right:0}.persona-tab:nth-child(-n+2){border-bottom:1px solid var(--ioc--g20)}.persona-panel.active{grid-template-columns:1fr}.persona-outcomes{min-height:19rem}.journey-grid{grid-template-columns:1fr}.journey summary{min-height:14rem}.journey-detail{grid-template-columns:1fr}.architecture-title{flex-direction:column}.layer-map{grid-template-columns:1fr}.layer,.layer:nth-child(3){min-height:9rem;border-right:1px solid var(--ioc--g20);border-top:0}.layer:first-child{border-top:1px solid var(--ioc--g20)}.layer:after{display:none}.value-grid{grid-template-columns:1fr}.value-card{min-height:18rem}.progress-steps{grid-template-columns:1fr 1fr}.assessment-main{min-height:34rem}.resource-toolbar{align-items:stretch;flex-direction:column}.trust-grid{grid-template-columns:1fr}.trust-intro,.trust-item{min-height:14rem;border-right:0}.sticky-conversion p{display:none}.sticky-conversion{width:auto;right:1rem;left:1rem;transform:translateY(calc(100% + 2rem))}.sticky-conversion.visible{transform:none}.dialog-grid{grid-template-columns:1fr}.dialog-grid .field.full{grid-column:1}.dialog-actions{flex-direction:column-reverse}.dialog-actions .btn{width:100%}}

    /* INFOC corporate typography system: IBM Plex hierarchy */
    :root{--ioc--font-sans:"Manrope","Helvetica Neue",Arial,sans-serif;--ioc--font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;--ioc--measure:68ch}
    .showcase{font-family:var(--ioc--font-sans);font-weight:400;line-height:1.6;text-rendering:optimizeLegibility;font-kerning:normal;font-synthesis:none;font-feature-settings:"kern" 1,"liga" 1,"calt" 1}
    .showcase :is(h1,h2,h3,h4,h5){margin-top:0;font-family:var(--ioc--font-sans);text-wrap:balance}
    /* P36 — `div.showcase` scores 0-1-2, the specificity these rules had in the
       source, where the scope class sat on the BODY element. (The selector is
       not spelled out here: the W11 spec asserts the absorbed sheet no longer
       contains that string, and a comment counts.) The absorption flattened
       them to a bare
       `.showcase h*` (0-1-1), which lost to the `body.ioc-site` generic above and
       tied with every block rule; the comment two blocks up still reads
       "`.showcase` is rewritten to `.showcase`", the fingerprint of the
       find/replace that ate its own subject. `div` is not decoration: the scope
       class rides a wrapper DIV here rather than <body>, and restoring the
       element part is what restores the source's cascade. Verified against the
       served source: all 41 headings match. */
    div.showcase h1{font-size:clamp(3.6rem,7vw,7.5rem);font-weight:var(--ioc-h1-weight,700);line-height:.96;letter-spacing:-.055em}
    div.showcase h2{font-size:clamp(2.35rem,4.7vw,5rem);font-weight:var(--ioc-h2-weight,700);line-height:1.03;letter-spacing:-.045em}
    div.showcase h3{font-size:clamp(1.4rem,2.2vw,2.2rem);font-weight:var(--ioc-h3-weight,600);line-height:1.14;letter-spacing:-.025em}
    div.showcase h4{font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:var(--ioc-h4-weight,600);line-height:1.25;letter-spacing:-.015em}
    div.showcase h5{font-size:.875rem;font-weight:600;line-height:1.35;letter-spacing:.045em;text-transform:uppercase}
    .showcase p{line-height:1.65;text-wrap:pretty}
    .showcase .lede{max-width:60ch;font-size:clamp(1.125rem,1.55vw,1.375rem);font-weight:400;line-height:1.58;letter-spacing:-.008em}
    .showcase .section-head>p{max-width:52ch;font-size:1.0625rem;line-height:1.65}
    .showcase :is(.eyebrow,.section-kicker,.panel-label,.num,.value-index,.gateway-index,.insight-meta,.layer small,.architecture-table th){font-family:var(--ioc--font-mono)}
    .showcase :is(strong,b){font-weight:600}
    .showcase .showcase-hero h1{max-width:13ch}
    .showcase .showcase-hero h1 em{font-weight:700}
    .showcase .solution-card h3{font-size:clamp(1.5rem,2.1vw,2rem);font-weight:600;line-height:1.18}
    .showcase .insight h3,.showcase .step h3{font-size:1.45rem;font-weight:600;line-height:1.18}
    .showcase .gateway h3{font-size:clamp(2.5rem,5vw,5rem);font-weight:600}
    .showcase .persona-copy h3{font-size:clamp(2.25rem,4.2vw,4.5rem);font-weight:600}
    .showcase .tab-panel h3,.showcase .architecture-title h3{font-size:clamp(2rem,4vw,4rem);font-weight:600}
    .showcase .assessment-aside h3{font-size:clamp(2rem,4vw,4rem);font-weight:600}
    .showcase .layer h4{margin:1rem 0 .45rem;font-size:1rem;line-height:1.25}
    .showcase .industry h3{margin:.55rem 0 .75rem;font-size:1.25rem;line-height:1.2}
    .showcase .trust-intro h2{font-size:2rem;line-height:1.1;letter-spacing:-.03em}
    .showcase .trust-item h3{margin:auto 0 .75rem;font-size:1.2rem;line-height:1.2}
    .showcase .footer-col h3{margin-bottom:1rem;color:var(--ioc-g40,#a8a8a8);font-size:.75rem;line-height:1.35;letter-spacing:.1em;text-transform:uppercase}
    .showcase .footer-col h5{margin-bottom:1rem;color:var(--ioc-g40,#a8a8a8)}
    .showcase .dialog-head h2{font-size:2rem;line-height:1.1}
    /* P36 — must track the `div.showcase` restoration above: left at 0-1-1 these
   responsive sizes would LOSE to the 0-1-2 base rules and mobile headings would
   silently keep their desktop clamp. */
@media(max-width:700px){div.showcase h1{font-size:clamp(3rem,14vw,5rem)}div.showcase h2{font-size:clamp(2.2rem,10vw,3.6rem)}div.showcase .showcase-hero h1{max-width:11ch}}

    /* Review refinement layer: homepage only */
    .review-index{--ioc--max:1360px;--ioc--gutter:clamp(1.25rem,3.4vw,3.5rem);--ioc--section:clamp(4.75rem,7.2vw,7.5rem);--ioc--g30:var(--ioc-g30);--ioc--nav-offset:7rem}
    .review-index section[id]{scroll-margin-top:var(--ioc--nav-offset)}
    .review-index .announcement{background:var(--ioc-surface-brand-deep,#001141)}
    .review-index .announcement a{font-weight:600}
    .review-index .site-header{box-shadow:0 1px 0 rgba(0,0,0,.04)}
    .review-index .nav-actions .btn{min-width:10.5rem;background:var(--ioc--blue)}
    .review-index .nav-actions .btn:hover{background:var(--ioc-blue-hover,#0000c4)}
    .review-index .showcase-hero{min-height:auto;background:linear-gradient(180deg,var(--ioc-surface,#fff) 0%,var(--ioc-surface,#fff) 78%,var(--ioc-surface-subtle,#fbfbfb) 100%)}
    .review-index .showcase-hero .container{grid-template-columns:minmax(0,1.08fr) minmax(26rem,.92fr);gap:clamp(3rem,6vw,6.5rem);padding-block:clamp(5.25rem,8vw,7.75rem)}
    .review-index .showcase-hero h1{max-width:11ch;font-size:clamp(3.8rem,7vw,7.25rem)}
    .review-index .showcase-hero .lede{max-width:58ch}
    .review-index .hero-note{max-width:42rem;margin:0 0 .75rem;color:var(--ioc--g100);font-size:.86rem;font-weight:600}
    .review-index .decision-console{min-height:32rem;box-shadow:1rem 1rem 0 var(--ioc--g10)}
    .review-index .console-body{padding:1.25rem}
    .review-index .console-route{padding:.9rem 1rem;transition:background .18s,border-color .18s,transform .18s var(--ioc--ease)}
    .review-index .console-route:hover{transform:translateX(.2rem)}
    .review-index .console-result{margin-top:1.25rem}
    .review-index .logo-proof .container{min-height:4.75rem}
    .review-index .page-nav{position:sticky;top:4rem;z-index:85;background:rgba(255,255,255,.96);border-bottom:1px solid var(--ioc--g20);backdrop-filter:blur(14px)}
    .review-index .page-nav-inner{display:flex;overflow-x:auto;scrollbar-width:none}
    .review-index .page-nav-inner::-webkit-scrollbar{display:none}
    .review-index .page-nav a{position:relative;display:flex;align-items:center;min-height:3.25rem;padding:0 1rem;white-space:nowrap;color:var(--ioc--g70);font-size:.78rem;font-weight:600}
    .review-index .page-nav a:hover{background:var(--ioc--g10);color:var(--ioc--g100)}
    .review-index .page-nav a.active{color:var(--ioc--blue)}
    .review-index .page-nav a.active:after{content:"";position:absolute;left:1rem;right:1rem;bottom:0;height:3px;background:var(--ioc--blue)}
    .review-index .proof-item{min-height:8.75rem;padding:1.5rem 2rem}
    .review-index .proof-item strong{font-size:clamp(2rem,3.4vw,3.25rem)}
    .review-index .section-head{gap:clamp(2rem,5vw,5.5rem);margin-bottom:clamp(2.75rem,5vw,4.75rem)}
    .review-index .persona-panel{min-height:24rem}
    .review-index .persona-copy{padding:clamp(2rem,4vw,4rem)}
    .review-index .persona-outcomes{padding:clamp(2rem,3.5vw,3.5rem)}
    .review-index .journey summary{min-height:13.5rem;padding:1.75rem}
    .review-index .journey-detail{padding:1.75rem}
    .review-index .solution-card{min-height:21.5rem;padding:1.75rem;transition:background .22s,color .22s,transform .22s var(--ioc--ease),box-shadow .22s}
    .review-index .solution-card .icon{width:3rem;height:3rem;margin:2.75rem 0 2rem}
    .review-index .solution-card:hover{background:var(--ioc-surface-brand,#001d6c);transform:translateY(-3px);box-shadow:0 1rem 2.5rem rgba(0,29,108,.14)}
    .review-index .architecture-view{padding:clamp(1.5rem,3.5vw,3.5rem)}
    .review-index .architecture-title{margin-bottom:2.25rem}
    .review-index .layer{min-height:12.5rem}
    .review-index .tab-panel{min-height:25rem;padding:clamp(2rem,4vw,4rem)}
    .review-index .industry{min-height:15.5rem}
    .review-index .step{padding-bottom:2.5rem}
    .review-index .step:before{margin-bottom:2.75rem}
    .review-index .gateway{min-height:28rem;padding:clamp(2rem,4vw,4rem)}
    .review-index .gateway h3{font-size:clamp(2.2rem,4.25vw,4rem)}
    .review-index .gateway:hover{background:var(--ioc-surface-brand,#001d6c)}
    .review-index .gateway.talent:hover{background:var(--ioc-magenta,#9f1853)}
    .review-index .value-card{min-height:18rem}
    .review-index .case-grid{min-height:30rem}
    .review-index .case-visual,.review-index .case-copy{padding:clamp(2rem,4vw,4rem)}
    .review-index .insight{min-height:21rem}
    .review-index .assessment-shell{min-height:34rem}
    .review-index .assessment-main{padding:clamp(2rem,4vw,4rem)}
    .review-index .result-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
    .review-index .result-actions .btn{margin:0}
    .review-index .trust-intro,.review-index .trust-item{min-height:15.5rem}
    .review-index .proof-trust{margin-top:clamp(2.25rem,4vw,3.5rem)}
    .review-index .proof-trust .trust-grid{grid-template-columns:repeat(4,1fr)}
    .review-index .proof-marks{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ioc--g20);border-top:0;background:var(--ioc-surface,#fff)}
    .review-index .proof-marks .proof-mark{display:flex;align-items:center;gap:.55rem;margin:0;padding:1.1rem 1.25rem;border-right:1px solid var(--ioc--g20);font-size:.85rem;font-weight:600;color:var(--ioc--g100)}
    .review-index .proof-marks .proof-mark:last-child{border-right:0}
    .review-index .proof-marks .carbon-icon{color:var(--ioc--blue)}
    .review-index .industry{display:flex;flex-direction:column;gap:.75rem;color:inherit;text-decoration:none;transition:background .2s,transform .2s}
    .review-index .industry:hover{background:var(--ioc--g10)}
    .review-index .industry .industry-cta{margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--ioc--blue);font-weight:600;font-size:.85rem}
    .review-index .industry .industry-cta .carbon-icon{transition:transform .18s var(--ioc--ease)}
    .review-index .industry:hover .industry-cta .carbon-icon{transform:translateX(.2rem)}
    .review-index .ca-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ioc--g20);margin-bottom:1.25rem;max-width:46rem}
    .review-index .ca-tab{min-height:3.6rem;padding:0 1.35rem;background:var(--ioc-surface,#fff);border:0;border-right:1px solid var(--ioc--g20);font:inherit;font-weight:600;color:var(--ioc--g70);cursor:pointer;text-align:left;transition:background .2s,color .2s}
    .review-index .ca-tab:last-child{border-right:0}
    .review-index .ca-tab[aria-selected="true"]{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff)}
    .review-index .ca-panel{display:none}
    .review-index .ca-panel.active{display:block;animation:panelIn .25s var(--ioc--ease)}
    .review-index #assessment{padding-bottom:clamp(2.5rem,4vw,3.5rem)}
    .review-index #proof{padding-block:var(--ioc--section)}
    .review-index .v1hero .wrap{max-width:none;width:100%;padding-inline:clamp(1.25rem,3.4vw,3.5rem)}
    .review-index .sec-num{position:absolute;top:.85rem;left:clamp(1.25rem,3.4vw,3.5rem);z-index:6;font-family:var(--ioc--font-mono,ui-monospace,monospace);font-size:.72rem;font-weight:600;letter-spacing:.14em;color:inherit;opacity:.32;pointer-events:none}
    .ioc-footer .footer-cta-grid.gs-full{padding-block:clamp(2.75rem,4vw,4.25rem)}
    .review-index .architecture-shell{box-shadow:0 1px 0 var(--ioc--g20)}
    .review-index .architecture-view .layer{transition:background .2s var(--ioc--ease),transform .2s var(--ioc--ease)}
    .review-index .architecture-view .layer:not(.active):hover{background:var(--ioc--g10);transform:translateY(-2px)}
    .review-index .architecture-table tbody tr{transition:background .18s}
    .review-index .architecture-table tbody tr:hover{background:var(--ioc--g10)}
    .review-index .process-button{transition:background .18s,color .18s}
    .ioc-footer .footer-cta-grid.gs-full{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(2rem,4vw,4rem);align-items:start;max-width:none}
    .ioc-footer .footer-cta-grid.gs-full .footer-action{border-left:1px solid var(--ioc-selected-border,#c6d9ff);padding-left:clamp(1.5rem,3vw,3rem)}
    .ioc-footer #get-started .assessment-shell,.ioc-footer #get-started .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
    .ioc-footer #get-started .contact h2{font-size:clamp(1.75rem,2.8vw,2.75rem)}
    .ioc-footer #get-started .ca-tabs{margin:0 0 1.25rem;max-width:36rem}
    .review-index .assessment-aside p{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
    .review-index #get-started .contact,.review-index #get-started .contact p,.review-index #get-started .contact label,.review-index #get-started .contact .hero-meta span{color:var(--ioc-text-on-color,#fff)}
    .review-index .contact{background:var(--ioc-surface-brand,#001d6c)}
    .review-index .contact-form .btn{color:var(--ioc-surface-brand,#001d6c)}
    .review-index .contact-form .btn:hover{color:var(--ioc-text-on-color,#fff)}
    .review-index .sticky-conversion{bottom:max(1rem,env(safe-area-inset-bottom));padding:.65rem .65rem .65rem 1rem}
    .review-index .reveal{transform:translateY(.85rem);transition-duration:.55s}
    .review-index .stagger>*{transform:translateY(.6rem);transition-duration:.48s}
    .review-index .toast{position:fixed;right:1rem;bottom:1rem;z-index:300;max-width:24rem;padding:1rem 1.25rem;background:var(--ioc--g100);color:var(--ioc-text-on-color,#fff);border-left:4px solid var(--ioc-success,#198038);box-shadow:0 1rem 3rem rgba(0,0,0,.2)}
    .review-index .toast.visible{display:block}
    @media(hover:hover){.review-index .btn:hover .icon{transform:translateX(.2rem)}.review-index .btn .icon{transition:transform .18s var(--ioc--ease)}}
    @media(max-width:1180px){.review-index .nav-link[href="#insights"]{display:none}.review-index .showcase-hero .container{grid-template-columns:1fr}.review-index .decision-console{max-width:48rem}}
    @media(max-width:700px){.review-index{--ioc--section:4.1rem;--ioc--nav-offset:7rem}.review-index .showcase-hero .container{padding-block:3.75rem}.review-index .showcase-hero h1{font-size:clamp(3rem,14vw,4.75rem)}.review-index .hero-actions .btn{width:100%}.review-index .hero-note{margin-top:.25rem}.review-index .page-nav{top:4rem}.review-index .page-nav a{min-height:3rem;padding:0 .8rem}.review-index .proof-item{padding:1.1rem;min-height:8rem}.review-index .solution-card{min-height:19rem}.review-index .solution-card .icon{margin:2.25rem 0 1.5rem}.review-index .gateway{min-height:23rem}.review-index .sticky-conversion{gap:.5rem}.review-index .result-actions{flex-direction:column}.review-index .result-actions .btn{width:100%}}


    /* Real photography system: selected commercial-use Pexels photography, not AI-generated */
    .review-index .media-frame{position:relative;margin:0;overflow:hidden;background:var(--ioc-g20,#e0e0e0);border:1px solid var(--ioc--g20)}
    .review-index .media-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);transition:transform .8s var(--ioc--ease),filter .35s ease}
    .review-index .media-frame:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,rgba(15,15,16,.72) 100%)}
    .review-index .media-frame figcaption{position:absolute;z-index:2;left:1.25rem;right:1.25rem;bottom:1rem;display:flex;align-items:end;justify-content:space-between;gap:1rem;color:var(--ioc-text-on-color,#fff)}
    .review-index .media-frame figcaption span{display:block;max-width:34rem;font-size:.82rem;font-weight:600;line-height:1.4}
    .review-index .media-frame figcaption small{color:var(--ioc-g30,#c6c6c6);font-family:var(--ioc--font-mono);font-size:.62rem;letter-spacing:.04em;text-align:right}
    @media(hover:hover){.review-index .media-frame:hover img{transform:scale(1.018);filter:saturate(1) contrast(1.03)}}

    .review-index .hero-visual{align-self:stretch;display:grid;grid-template-rows:minmax(16rem,1fr) auto;background:var(--ioc-surface,#fff);border:1px solid var(--ioc--g20);box-shadow:1rem 1rem 0 var(--ioc--g10)}
    .review-index .hero-photo{min-height:18rem;border:0;border-bottom:1px solid var(--ioc--g20)}
    .review-index .hero-photo img{object-position:center 38%}
    .review-index .hero-visual .decision-console{min-height:0;border:0;box-shadow:none}
    .review-index .hero-visual .console-bar{background:var(--ioc-surface,#fff)}

    .review-index .section-photo{aspect-ratio:16/5.4;margin:0 0 1.5rem}
    .review-index .section-photo img{object-position:center}
    .review-index .section-photo--operations img{object-position:center 53%}
    .review-index .section-photo--industry img{object-position:center 48%}
    .review-index .section-photo--dark{border-color:var(--ioc-g80,#393939);background:var(--ioc-g90,#262626)}
    .review-index .section-photo--dark:after{background:linear-gradient(180deg,rgba(22,22,22,.05) 35%,rgba(22,22,22,.86) 100%)}
    .review-index .ai-section .section-photo{margin-bottom:1px}

    .review-index .gateway{padding:0;overflow:hidden}
    .review-index .gateway-photo{flex:0 0 auto;aspect-ratio:16/7.2;border:0;border-bottom:1px solid var(--ioc--g20)}
    .review-index .gateway-photo:after{background:linear-gradient(180deg,transparent 55%,rgba(15,15,16,.62) 100%)}
    .review-index .gateway-photo img{object-position:center}
    .review-index .gateway:first-child .gateway-photo img{object-position:center 44%}
    .review-index .gateway.talent .gateway-photo img{object-position:center 40%}
    .review-index .gateway-content{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;padding:clamp(2rem,4vw,4rem)}
    .review-index .gateway:hover .gateway-photo img{transform:scale(1.025)}
    .review-index .gateway:hover .gateway-photo:after{background:linear-gradient(180deg,rgba(0,1,255,.1),rgba(0,29,108,.78))}
    .review-index .gateway.talent:hover .gateway-photo:after{background:linear-gradient(180deg,rgba(255,0,119,.08),rgba(159,24,83,.8))}
    body.review-index .gateway h3{font-size:clamp(1.7rem,2.4vw,2.5rem);line-height:1.12}
    .review-index .gateway{min-height:auto}
    .review-index .gateway-photo{aspect-ratio:16/6}
    .review-index .gateway-content{gap:1.5rem;padding:clamp(1.75rem,3vw,2.75rem)}

    .review-index .photo-sources{padding:1rem 0;border-top:1px solid var(--ioc-g80,#393939);color:var(--ioc-g50,#8d8d8d);font-size:.68rem;line-height:1.55}
    .review-index .photo-sources a{color:var(--ioc-g30,#c6c6c6);text-decoration:underline;text-underline-offset:2px}

    @media(max-width:1100px){
      .review-index .hero-visual{max-width:48rem}
      .review-index .section-photo{aspect-ratio:16/7}
    }
    @media(max-width:700px){
      .review-index .hero-visual{grid-template-rows:15rem auto;box-shadow:.65rem .65rem 0 var(--ioc--g10)}
      .review-index .hero-photo{min-height:15rem}
      .review-index .media-frame figcaption{left:1rem;right:1rem;bottom:.8rem;align-items:start;flex-direction:column;gap:.25rem}
      .review-index .media-frame figcaption small{text-align:left}
      .review-index .section-photo{aspect-ratio:4/3;margin-bottom:1rem}
      .review-index .gateway-photo{aspect-ratio:16/9}
      .review-index .gateway-content{padding:2rem 1.25rem}
    }

  .carbon-icon{display:block;width:1.5rem;height:1.5rem;flex:0 0 auto;fill:currentColor}

/* ===== HOME · harmonized to inner-page (idc) standard ===== */
.showcase .container{width:min(100%,1584px);padding-inline:clamp(20px,4vw,32px)}
.showcase .section{padding-block:clamp(64px,8vw,112px)}
#constraints{background:var(--ioc--g10)}
#constraints .vh-cgrid{background:var(--ioc--white)}
#constraints .vh-c:hover{background:var(--ioc-surface-hover,#e8e8e8)}
#delivery{background:var(--ioc--g10)}
#delivery .vh-steps{background:var(--ioc--white);border:1px solid var(--ioc--g20);padding:2rem}
#delivery .vh-step{padding:1.5rem;margin:0 -2rem;transition:background .2s}
#delivery .vh-step:first-child{padding-top:1.5rem}
#delivery .vh-step:hover{background:var(--ioc-surface-hover,#e8e8e8)}
#delivery .vh-dgrid{align-items:stretch}
#delivery .vh-out{background:var(--ioc-g80,#393939);border-color:var(--ioc-g80,#393939);align-content:stretch;height:100%}
#delivery .vh-out div{background:var(--ioc--g100)}
#delivery .vh-out svg{color:var(--ioc-accent-on-brand,#8c8cff)}
#delivery .vh-out strong{color:var(--ioc-text-on-color,#fff)}
#delivery .vh-out span{color:var(--ioc-g30,#c6c6c6)}
#delivery .vh-out div:hover{background:var(--ioc-g90,#262626)}
.showcase .section-head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);margin-bottom:clamp(32px,4vw,56px)}
.showcase .section-head>div>h2,.showcase .section-head h2{font-size:clamp(28px,3.2vw,46px);font-weight:700;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.showcase .section-head p{font-size:16px;line-height:1.55;max-width:46ch}
.showcase .section-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;color:var(--ioc--g100)}
.showcase .section-kicker::before{content:"";width:22px;height:2px;background:var(--ioc--blue);flex:none}
.showcase .ai-section .section-kicker,.showcase .value-section .section-kicker{color:var(--ioc-text-on-color,#fff)}
/* tame oversized module headings to the restrained idc scale */
.showcase .persona-copy h3{font-size:clamp(24px,2.6vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.showcase .persona-copy p{font-size:16px}
.showcase .architecture-title h3{font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.showcase .assessment-aside h3{font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.15}
.showcase .assessment-step legend{font-size:clamp(18px,2vw,24px);font-weight:600;line-height:1.2}
.showcase .value-card strong{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em}
.showcase .contact h2{font-size:clamp(28px,3.2vw,46px);font-weight:700;line-height:1.06;letter-spacing:-.025em}
.showcase .trust-intro h2{font-size:clamp(24px,2.8vw,38px);font-weight:700;letter-spacing:-.02em}
@media(max-width:860px){.showcase .section-head{grid-template-columns:1fr;align-items:start}}



/* ---- Get-started CTA polish (home #assessment + footer #get-started) ---- */
.review-index .ca-tabs{max-width:46rem;border-color:var(--ioc--g20);box-shadow:0 1px 0 var(--ioc--g20)}
.review-index .ca-tab{position:relative;letter-spacing:-.01em;transition:background .2s var(--ioc--ease),color .2s var(--ioc--ease)}
.review-index .ca-tab:hover:not([aria-selected="true"]){background:var(--ioc--g10);color:var(--ioc--g100)}
.review-index .ca-tab[aria-selected="true"]:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--ioc--g100)}
/* Aside */
.review-index .assessment-aside{position:relative;background:linear-gradient(160deg,var(--ioc--blue) 0%,var(--ioc-blue-hover,#0000c4) 100%);overflow:hidden}
.review-index .assessment-aside>div:first-child{position:relative;z-index:1}
.review-index .assessment-aside .carbon-icon{width:2.25rem;height:2.25rem;padding:.5rem;background:rgba(255,255,255,.14);margin-bottom:1.25rem}
.review-index .assessment-aside p{max-width:34ch}
.review-index .progress-steps{counter-reset:astep;position:relative;z-index:1}
.review-index .progress-steps li{align-items:center;transition:color .2s}
.review-index .assessment-trust{position:relative;z-index:1;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.22);display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--ioc-text-on-brand-soft,#e5e5ff);line-height:1.4}
.review-index .assessment-trust .carbon-icon{width:1.15rem;height:1.15rem;flex:0 0 auto;margin:0;padding:0;background:none;color:var(--ioc-text-on-color,#fff)}
/* Choices as confident cards */
.review-index .assessment-step legend{font-weight:600;text-wrap:balance}
.review-index .choice{gap:1.15rem;padding:1.15rem 1.25rem;align-items:center;transition:background .16s var(--ioc--ease),border-color .16s var(--ioc--ease),box-shadow .16s var(--ioc--ease)}
.review-index .choice+.choice{margin-top:-1px}
.review-index .choice:hover{background:var(--ioc--g10);border-color:var(--ioc--g60);z-index:1}
.review-index .choice:has(input:checked){background:var(--ioc-selected-surface,#edf5ff);border-color:var(--ioc--blue);box-shadow:inset 3px 0 0 var(--ioc--blue);z-index:2}
.review-index .choice:has(input:checked) .choice-text strong{font-weight:700}
.review-index .radio-ui{width:1.35rem;height:1.35rem;border-color:var(--ioc--g60);transition:border-color .16s,background .16s,box-shadow .16s}
.review-index .choice-text small{line-height:1.4}
/* Actions: confident primary */
.review-index .assessment-actions{align-items:center}
.review-index .assessment-next{min-width:12rem;gap:1.25rem;background:var(--ioc--blue)}
.review-index .assessment-next:not([disabled]):hover{background:var(--ioc-blue-hover,#0000c4)}
.review-index .assessment-back{min-width:8rem}
.review-index .assessment-progress-note{margin-right:auto;font-family:var(--ioc--font-mono,ui-monospace,monospace);font-size:.72rem;letter-spacing:.1em;color:var(--ioc--g60);text-transform:uppercase}
/* Result */
.review-index .assessment-result.active{display:flex;flex-direction:column}
.review-index .score-ring{transition:transform .4s var(--ioc--ease)}
/* Contact form: clearer focus + confidence */
.review-index #get-started .contact-form .field input,.review-index #get-started .contact-form .field select,.review-index #get-started .contact-form .field textarea,.review-index #ca-contact .field input,.review-index #ca-contact .field select,.review-index #ca-contact .field textarea{border-bottom-width:1px;border-bottom-color:rgba(255,255,255,.55);transition:border-color .18s,background .18s}
.review-index #ca-contact .field label,.review-index #get-started .contact-form .field label{font-family:var(--ioc--font-mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem;opacity:.9}
.review-index #ca-contact .field input:focus,.review-index #ca-contact .field select:focus,.review-index #ca-contact .field textarea:focus,.review-index #get-started .contact-form .field input:focus,.review-index #get-started .contact-form .field select:focus,.review-index #get-started .contact-form .field textarea:focus{border-bottom-color:var(--ioc-border-on-color,#fff);background:rgba(255,255,255,.18)}
.review-index #ca-contact .field input::placeholder,.review-index #ca-contact .field textarea::placeholder{color:rgba(255,255,255,.6)}
.review-index .contact-form .btn{margin-top:.5rem}
.review-index .form-reassure{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-top:.35rem;font-size:.75rem;color:var(--ioc-text-on-brand-soft,#e5e5ff)}
.review-index .form-reassure span{display:inline-flex;align-items:center;gap:.4rem}
.review-index .form-reassure .carbon-icon{width:1rem;height:1rem;color:var(--ioc-text-on-color,#fff)}
@media(max-width:700px){.review-index .assessment-next{min-width:0;flex:1}.review-index .assessment-actions{flex-wrap:wrap}.review-index .assessment-progress-note{width:100%;order:-1;margin:0 0 .5rem}}


.section-head .ioc-sh-lead p{margin:0;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--ioc--g100);max-width:36ch;text-wrap:pretty}
.section-head .ioc-sh-lead p b{font-weight:700}
.section-head .ioc-sh-lead .meta{display:block;margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc--g60);line-height:1.6}
.section-head .vh-sh-aside{gap:.9rem}
.section.dark .section-head .ioc-sh-lead p{color:var(--ioc-g10,#f4f4f4)}
.section.dark .section-head .ioc-sh-lead .meta{color:var(--ioc-g40,#a8a8a8)}
@media(max-width:860px){.section-head .ioc-sh-lead p{max-width:none}}


.review-index .v1hero{background:linear-gradient(100deg,var(--ioc-surface-subtle,#fbfbfb) 0%,var(--ioc-surface-subtle,#fbfbfb) 45%,var(--ioc-surface-cool,#f2f4f8) 100%);border-bottom:1px solid var(--ioc--g20)}
.v1hero .hero-main{grid-template-columns:minmax(24rem,42fr) minmax(34rem,58fr);gap:clamp(24px,3vw,56px)}
.v1hero .copy-panel{background:transparent;border:0;padding:clamp(24px,3vw,48px) 0 clamp(24px,3vw,48px) clamp(4px,2.5vw,40px);min-height:0;justify-content:center}
.v1hero .h-lede{max-width:40ch}
.v1hero .h-actions .h-btn{white-space:nowrap}
.v1hero .hero-visual-col{display:flex;flex-direction:column;gap:22px;min-width:0;padding-block:clamp(16px,2.2vw,32px)}
.v1hero .hero-slides{position:relative;margin:0;aspect-ratio:16/7.6;min-height:15rem;overflow:hidden;background:var(--ioc--g20)}
.v1hero .hs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ioc--ease)}
.v1hero .hs-img.is-on{opacity:1}
.v1hero .hs-dots{position:absolute;right:14px;bottom:12px;z-index:3;display:flex;gap:7px}
.v1hero .hs-dots button{width:10px;height:10px;padding:0;border:0;background:rgba(255,255,255,.78);cursor:pointer}
.v1hero .hs-dots button.on{background:var(--ioc--blue)}
.v1hero .hero-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(14.5rem,19.5rem);gap:22px;align-items:stretch}
.v1hero .hero-lower .outcome{position:static;transform:none;width:auto;box-shadow:none;border:1px solid var(--ioc--g20);display:flex;flex-direction:column}
.v1hero .hero-lower .outcome-result{margin-top:auto}
.v1hero .foundation-card{display:flex;flex-direction:column;min-width:0;padding:22px;background:var(--ioc-surface-inverse,#161616);color:var(--ioc-text-on-color,#fff)}
.v1hero .fc-kicker{font-family:var(--ioc--font-mono,"JetBrains Mono",monospace);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-g40,#a8a8a8)}
.v1hero .fc-body{margin:auto 0;padding-block:1.4rem}
.v1hero .fc-body>svg{width:30px;height:30px;margin-bottom:14px;color:var(--ioc-text-on-color,#fff)}
.v1hero .fc-title{margin:0 0 10px;font-size:clamp(20px,1.6vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.12;color:var(--ioc-text-on-color,#fff)}
.v1hero .fc-sub{margin:0;color:var(--ioc-g30,#c6c6c6);font-size:14px;line-height:1.5}
.v1hero .fc-link{display:inline-flex;align-items:center;gap:10px;margin-top:auto;color:var(--ioc-text-on-color,#fff);font-weight:600;font-size:14px}
.v1hero .fc-link svg{width:16px;height:16px;fill:currentColor;transition:transform .18s var(--ioc--ease)}
.v1hero .fc-link:hover svg{transform:translateX(3px)}
@media(max-width:1040px){.v1hero .hero-main{grid-template-columns:1fr;gap:0}.v1hero .hero-visual-col{padding-block:0 clamp(16px,2.2vw,32px)}}
@media(max-width:1024px){.v1hero .copy-panel{padding-left:0}.v1hero .hero-lower{grid-template-columns:1fr}.v1hero .foundation-card{min-height:11rem}.v1hero .fc-body{padding-block:1rem}}


.vh-ribbon{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(2.5rem,5vw,4rem);font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ioc--g70)}
.vh-ribbon span{border:1px solid var(--ioc--g20);padding:.5rem .85rem}
.vh-agrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ioc--g20);border-left:1px solid var(--ioc--g20)}
.vh-acard{padding:2rem;border-right:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20);display:flex;flex-direction:column;gap:.55rem;min-height:16rem}
.vh-acard>svg{width:2rem;height:2rem;color:var(--ioc--blue);margin-bottom:.85rem}
.vh-acard .kx{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc--blue)}
.vh-acard h3{font-size:1.18rem;font-weight:500;margin:0;letter-spacing:-.01em}
.vh-acard p{color:var(--ioc--g70);font-size:.88rem;margin:0;line-height:1.5}
.vh-cgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ioc--g20);border-left:1px solid var(--ioc--g20)}
.vh-c{position:relative;padding:2rem;border-right:1px solid var(--ioc--g20);border-bottom:1px solid var(--ioc--g20);display:flex;flex-direction:column;min-height:23rem;transition:background .2s}
.vh-c:hover{background:var(--ioc--g10)}
.vh-c .num{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.06em;color:var(--ioc--g60)}
.vh-c>svg{width:2.25rem;height:2.25rem;color:var(--ioc--blue);margin:1.25rem 0}
.vh-c h3{font-size:1.3rem;font-weight:500;margin:0 0 .6rem;letter-spacing:-.01em}
.vh-c p{color:var(--ioc--g70);font-size:.9rem;margin:0 0 1.5rem;line-height:1.5}
.vh-c a{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;color:var(--ioc--blue);font-weight:600;font-size:.85rem}
.vh-c a svg{width:1rem;height:1rem}
.vh-pf{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;align-items:center;justify-content:space-between;padding-top:1.5rem;border-top:1px solid var(--ioc--g20)}
.vh-pf p{color:var(--ioc--g70);max-width:52ch;margin:0;font-size:.9rem}
.vh-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.vh-chips a{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--ioc--g20);padding:.45rem .85rem;font-size:.78rem;color:var(--ioc--g70);transition:background .15s var(--ioc--ease),border-color .15s,color .15s,transform .15s}
.vh-chips a svg{width:.85rem;height:.85rem;opacity:.45;transition:transform .15s,opacity .15s}
.vh-chips a:hover{background:var(--ioc--blue);border-color:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);transform:translateY(-1px)}
.vh-chips a:hover svg{opacity:1;transform:translateX(2px)}

.vh-ind{display:block;border-top:1px solid var(--ioc--g20);padding-top:1.5rem}


.vh-dgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.vh-steps{display:flex;flex-direction:column}
.vh-step{display:flex;gap:1.25rem;padding:1.5rem 0;border-top:1px solid var(--ioc--g20)}
.vh-step:first-child{border-top:0;padding-top:0}
.vh-step .si{width:2.75rem;height:2.75rem;flex:none;border:1px solid var(--ioc--g20);display:flex;align-items:center;justify-content:center;color:var(--ioc--blue)}
.vh-step .si svg{width:1.35rem;height:1.35rem}
.vh-step h3{font-size:1.12rem;font-weight:500;margin:0 0 .35rem}
.vh-step p{color:var(--ioc--g70);font-size:.9rem;margin:0;line-height:1.5}
.vh-out{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc--g20);border:1px solid var(--ioc--g20)}
.vh-out div{background:var(--ioc-surface,#fff);padding:1.5rem;min-height:9.5rem;display:flex;flex-direction:column;gap:.3rem}
.vh-out svg{width:1.6rem;height:1.6rem;color:var(--ioc--blue);margin-bottom:.4rem}
.vh-out strong{font-weight:500;font-size:.96rem}
.vh-out span{color:var(--ioc--g60);font-size:.78rem;line-height:1.45}
.vh-cap{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ioc--g20);border:1px solid var(--ioc--g20)}
.vh-capcard{background:var(--ioc-surface,#fff);display:flex;flex-direction:column}
.vh-capcard .cm{aspect-ratio:16/9;overflow:hidden;background:var(--ioc--g10)}
.vh-capcard .cm img{width:100%;height:100%;object-fit:cover}
.vh-capcard .cb{padding:2rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.vh-capcard .kx{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ioc--blue)}
.vh-capcard h3{font-size:1.55rem;font-weight:400;letter-spacing:-.02em;margin:0}
.vh-capcard p{color:var(--ioc--g70);font-size:.92rem;margin:0;line-height:1.55}
.vh-capcard a{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;color:var(--ioc--blue);font-weight:600;font-size:.85rem;padding-top:.5rem}
.vh-capcard a svg{width:1rem;height:1rem}
.vh-cpanel{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);padding:clamp(1.75rem,3.5vw,3rem)}
.vh-cpanel .eyebrow{color:var(--ioc-text-on-color,#fff);margin-bottom:.7rem}
.vh-cpanel .eyebrow:before{background:var(--ioc-text-on-color,#fff)}
.vh2-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.25rem 2rem;align-items:start;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.vh-cpanel .vh2-intro h2{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:400;letter-spacing:-.025em;margin:0;color:var(--ioc-text-on-color,#fff);max-width:22ch}
.vh2-sub{color:var(--ioc-text-on-brand-soft,#e5e5ff);font-size:.92rem;line-height:1.5;margin:.6rem 0 0;max-width:58ch}
.vh2-trust{display:inline-flex;align-items:center;gap:.5rem;margin:1rem 0 0;font-size:.78rem;color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.vh2-trust svg{width:1rem;height:1rem;color:var(--ioc-text-on-color,#fff);flex:none}
.vh-modetabs{display:flex;border:1px solid rgba(255,255,255,.55);align-self:start}
.vh-modetabs button{padding:.62rem 1.15rem;border:0;background:transparent;color:var(--ioc-text-on-color,#fff);font-weight:600;font-size:.82rem;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.vh-modetabs button[aria-selected="true"]{background:var(--ioc-text-on-color,#fff);color:var(--ioc--blue)}
.vh2-form{background:var(--ioc-surface,#fff);color:var(--ioc--g100);padding:clamp(1.5rem,2.6vw,2.35rem);display:grid;grid-template-columns:repeat(4,1fr);gap:1.35rem 1.25rem;align-items:start}
#conversion-form [hidden]{display:none!important}
.vh2-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.vh2-full{grid-column:1/-1}
.vh2-field label{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ioc--g70)}
.vh2-field .req{color:var(--ioc--blue)}
.vh2-field input,.vh2-field select,.vh2-field textarea{width:100%;background:var(--ioc-surface,#fff);border:1px solid var(--ioc--g30);padding:.7rem .8rem;color:var(--ioc--g100);font-size:.95rem;font-family:inherit;outline:0;border-radius:0;transition:border-color .15s,box-shadow .15s}
.vh2-field textarea{resize:vertical;min-height:4rem;line-height:1.5}
.vh2-field input:hover,.vh2-field select:hover,.vh2-field textarea:hover{border-color:var(--ioc--g60)}
.vh2-field input:focus,.vh2-field select:focus,.vh2-field textarea:focus{border-color:var(--ioc--blue);box-shadow:0 0 0 3px rgba(0,1,255,.14)}
.vh2-field input::placeholder,.vh2-field textarea::placeholder{color:var(--ioc--g60)}
.vh2-field.err input,.vh2-field.err select,.vh2-field.err textarea{border-color:var(--ioc-danger,#da1e28);box-shadow:0 0 0 3px rgba(218,30,40,.12)}
.vh2-err{font-size:.72rem;color:var(--ioc-danger,#da1e28)}
.vh2-err:empty{display:none}
.vh2-q{grid-column:1/-1;border:0;padding:0;margin:0;min-width:0}
.vh2-q legend{font-family:"JetBrains Mono",monospace;font-size:.67rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ioc--g70);margin-bottom:.55rem;padding:0}
.vh-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.vh-choices label{position:relative;display:flex;align-items:center;gap:.6rem;justify-content:flex-start;text-align:left;padding:.7rem .8rem;border:1px solid var(--ioc--g30);font-size:.82rem;line-height:1.25;color:var(--ioc--g70);cursor:pointer;transition:transform .15s var(--ioc--ease),background .15s,border-color .15s,color .15s}
.vh-choices label::before{content:"";width:22px;height:7px;flex:none;background:linear-gradient(90deg,var(--ioc--blue) var(--lvl,33%),var(--ioc--g20) 0)}
.vh-choices label:nth-child(1){--lvl:33%}
.vh-choices label:nth-child(2){--lvl:66%}
.vh-choices label:nth-child(3){--lvl:100%}
.vh-choices label:hover{border-color:var(--ioc--blue);color:var(--ioc--g100);transform:translateY(-1px)}
.vh-choices label:has(input:checked){background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);border-color:var(--ioc--blue);font-weight:600}
.vh-choices label:has(input:checked)::before{background:linear-gradient(90deg,var(--ioc-text-on-color,#fff) var(--lvl,33%),rgba(255,255,255,.35) 0)}
.vh-choices input{position:absolute;opacity:0;width:0;height:0}
.vh2-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-top:.25rem;padding-top:1.35rem;border-top:1px solid var(--ioc--g20)}
.vh-consent{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--ioc--g70);margin:0;cursor:pointer}
.vh-consent input{width:1.1rem;height:1.1rem;flex:none;accent-color:var(--ioc--blue)}
.vh2-submit{display:inline-flex;align-items:center;gap:1.5rem;background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);border:0;padding:.85rem 1.5rem;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .15s}
.vh2-submit:hover{background:var(--ioc-blue-hover,#0000c4)}
.vh2-submit svg{width:1.1rem;height:1.1rem}
.vh2-submit[disabled]{opacity:.65;cursor:default}
.vh-status{grid-column:1/-1;font-size:.85rem;padding:.75rem .9rem;background:var(--ioc--g10);border-left:3px solid var(--ioc--blue);color:var(--ioc--g100);line-height:1.5}
.vh-status:empty{display:none}
.vh-status.ok{background:var(--ioc-success-surface,#defbe6);border-left-color:var(--ioc-green,#0e6027)}
.vh-status.bad{background:var(--ioc-danger-surface,#fff1f1);border-left-color:var(--ioc-danger,#da1e28)}
.vh-status strong{font-weight:600}
.vh2-note{grid-column:1/-1;font-size:.72rem;color:var(--ioc--g60)}
@media(max-width:820px){.vh2-head{grid-template-columns:1fr}.vh2-form{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vh2-form,.vh-choices{grid-template-columns:1fr}.vh-modetabs{width:100%}.vh-modetabs button{flex:1;text-align:center}.vh2-foot{flex-direction:column;align-items:stretch}.vh2-submit{justify-content:center}}
@media(max-width:1024px){.vh-agrid,.vh-cgrid{grid-template-columns:1fr 1fr}.vh-dgrid{grid-template-columns:1fr}.vh-cap{grid-template-columns:1fr}}
@media(max-width:700px){.vh-agrid,.vh-cgrid{grid-template-columns:1fr}.vh-out{grid-template-columns:1fr}.vh-modetabs{flex-direction:column}}

/* B-03 · layered stack (from Platform section options v2, option A) */
.pa{background:var(--ioc-g100);background-image:radial-gradient(120% 90% at 10% 0%,rgba(0,1,255,.32) 0%,rgba(0,1,255,0) 58%);color:var(--ioc-text-on-color,#fff);padding:clamp(1.75rem,3.5vw,3rem);border:1px solid var(--ioc-g80,#393939)}
.pa-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem)}
.pa-stack{display:flex;flex-direction:column;gap:6px}
.pa-row{position:relative;display:grid;grid-template-columns:40px 1fr auto;gap:1rem;align-items:center;padding:.85rem 1.1rem;border:1px solid var(--ioc-g80,#393939);background:rgba(255,255,255,.035);text-decoration:none;color:var(--ioc-text-on-color,#fff);transition:border-color .2s,background .2s,transform .2s}
.pa-row:hover{border-color:var(--ioc-accent-on-brand,#8c8cff);background:rgba(140,140,255,.10);transform:translateX(4px)}
.pa-row.core{border-color:color-mix(in oklch,var(--ioc-blue) 62%,var(--ioc-border-on-color));background:linear-gradient(90deg,rgba(0,1,255,.5),rgba(0,1,255,.1))}
.pa-row .ic{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--ioc-g70,#525252)}
.pa-row.core .ic{border-color:rgba(255,255,255,.55)}
.pa-row .ic svg{width:20px;height:20px;color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.pa-row .k{display:block;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-g40,#a8a8a8)}
.pa-row strong{display:block;font-size:1.05rem;font-weight:500;letter-spacing:-.01em;margin:2px 0 3px}
.pa-row .d{display:block;font-size:.82rem;line-height:1.45;color:var(--ioc-g30,#c6c6c6);max-width:46ch}
.pa-row.core .d,.pa-row.core .k{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
.pa-row .go{display:flex;align-items:center;gap:.5rem;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-g40,#a8a8a8);white-space:nowrap;transition:color .2s}
.pa-row:hover .go{color:var(--ioc-accent-on-brand,#8c8cff)}
.pa-row.core .go{color:var(--ioc-text-on-color,#fff)}
.pa-row:hover .ic{border-color:var(--ioc-accent-on-brand,#8c8cff)}
.pa-row:hover .ic svg{color:var(--ioc-accent-on-brand,#8c8cff)}
.pa-row .go svg{width:14px;height:14px;transition:transform .2s}
.pa-row:hover .go svg{transform:translateX(3px)}
.pa-side{display:flex;flex-direction:column;gap:1rem}
.pa-fig{position:relative;overflow:hidden;border:1px solid var(--ioc-g80,#393939);aspect-ratio:16/10;margin:0}
.pa-fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.pa-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,1,255,.4),rgba(22,22,22,.86))}
.pa-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;z-index:1}
.pa-fig figcaption b{display:block;font-size:1rem;font-weight:600}
.pa-fig figcaption span{font-family:var(--ioc-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.pa-rule{border:1px solid var(--ioc-g80,#393939);padding:1rem 1.1rem;background:rgba(255,255,255,.03)}
.pa-rule p{margin:0;font-size:.88rem;line-height:1.6;color:var(--ioc-g30,#c6c6c6)}
.pa-rule p b{color:var(--ioc-text-on-color,#fff);font-weight:600}
.pa-rule .k{margin:0 0 .5rem;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-text-on-brand-muted,#d0d0ff)}
.pa-links{display:grid;border:1px solid var(--ioc-g80,#393939);margin-top:auto}
.pa-links a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.1rem;color:var(--ioc-text-on-color,#fff);text-decoration:none;border-bottom:1px solid var(--ioc-g80,#393939);font-size:.92rem;transition:background .18s,padding-left .18s}
.pa-links a:last-child{border-bottom:0}
.pa-links a:hover{background:rgba(0,1,255,.22);padding-left:1.45rem}
.pa-links svg{width:16px;height:16px}
@media(max-width:900px){.pa-grid{grid-template-columns:1fr}}
/* industry strip · option D */
.vh-dtabs{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--ioc-g20);border-top:0;margin-top:0}
.vh-dtabs button{flex:1 1 auto;appearance:none;background:var(--ioc-surface,#fff);border:0;box-shadow:1px 0 0 0 var(--ioc-g20);padding:.95rem 1.1rem;font:inherit;font-size:.85rem;font-weight:500;color:var(--ioc-g70);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;transition:background .15s,color .15s}
.vh-dtabs button svg{width:17px;height:17px;opacity:.55}
.vh-dtabs button:hover{background:var(--ioc-g10);color:var(--ioc-text-primary)}
.vh-dtabs button[aria-selected="true"]{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);box-shadow:1px 0 0 0 var(--ioc-accent)}
.vh-dtabs button[aria-selected="true"] svg{opacity:1}
.vh-dpanel{border:1px solid var(--ioc-g20);border-top:0;padding:1.6rem 1.5rem;display:grid;grid-template-columns:1fr auto;gap:1.5rem 2rem;align-items:center;background:var(--ioc-g10)}
.vh-dpanel p{margin:0;font-size:1.05rem;line-height:1.5;letter-spacing:-.01em;max-width:56ch}
.vh-dpanel .m{display:block;font-family:var(--ioc-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ioc-g60);margin-top:.6rem}
.vh-dpanel a{display:inline-flex;align-items:center;gap:.5rem;background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);text-decoration:none;padding:.75rem 1.15rem;font-size:.85rem;font-weight:500;white-space:nowrap;min-height:44px;box-sizing:border-box}
.vh-dpanel a svg{width:16px;height:16px}
.vh-dpanel a:hover{background:var(--ioc-accent-hover)}
@media(max-width:700px){.vh-dtabs{flex-direction:column}.vh-dpanel{grid-template-columns:1fr}}
/* --- section hover + explore links --- */
.vh-acard>svg,.vh-c>svg{transition:transform .18s var(--ioc--ease)}
.vh-acard{transition:background .18s var(--ioc--ease)}
.vh-acard:hover{background:var(--ioc--g10)}
.vh-acard:hover>svg{transform:translateY(-3px)}
.vh-c a svg{transition:transform .18s var(--ioc--ease)}
.vh-c:hover a svg{transform:translateX(4px)}
.vh-c:hover>svg{transform:translateY(-3px)}
.vh-capcard .cm img{transition:transform .45s var(--ioc--ease)}
.vh-capcard:hover .cm img{transform:scale(1.05)}
.vh-capcard a svg{transition:transform .18s var(--ioc--ease)}
.vh-capcard:hover a svg{transform:translateX(4px)}
.vh-out div{transition:background .18s var(--ioc--ease)}
.vh-out div:hover{background:var(--ioc--g10)}
.vh-out svg{transition:transform .18s var(--ioc--ease)}
.vh-out div:hover svg{transform:scale(1.1)}
.vh-step .si{transition:background .18s var(--ioc--ease),color .18s,border-color .18s}
.vh-step:hover .si{background:var(--ioc--blue);color:var(--ioc-text-on-color,#fff);border-color:var(--ioc--blue)}
.vh-chips a{transition:border-color .15s,color .15s,transform .15s}
.vh-chips a:hover{transform:translateY(-1px)}
.vh-sh-aside{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.vh-sh-aside>p{margin:0}
.vh-seclink{display:inline-flex;align-items:center;gap:.5rem;color:var(--ioc--blue);font-weight:600;font-size:.9rem}
.vh-seclink svg{width:1rem;height:1rem;transition:transform .18s var(--ioc--ease)}
.vh-seclink:hover svg{transform:translateX(4px)}
.vh-capcard{transition:background .2s var(--ioc--ease)}
.vh-capcard:first-child:hover{background:var(--ioc-fam-academy,#6929c4)}
.vh-capcard:last-child:hover{background:var(--ioc-fam-talents,#1a7a52)}
.vh-capcard:hover .kx,.vh-capcard:hover h3,.vh-capcard:hover p,.vh-capcard:hover a{color:var(--ioc-text-on-color,#fff)}
/* --- home footer-cta hosts the get-started form --- */
.ioc-footer .footer-cta .vh2-sub{color:var(--ioc-text-secondary,#525252);font-size:.95rem;line-height:1.55;margin:1.1rem 0 0;max-width:46ch}
.ioc-footer .footer-cta .vh2-trust{display:inline-flex;align-items:center;gap:.5rem;margin:1.1rem 0 0;font-size:.8rem;color:var(--ioc-text-secondary,#525252)}
.ioc-footer .footer-cta .vh2-trust svg{width:1rem;height:1rem;flex:none;color:var(--ioc-blue,#0001ff)}
.ioc-footer .footer-action .vh-modetabs{display:flex;border:1px solid var(--ioc-border-strong,#8d8d8d);margin:0 0 18px;width:max-content;max-width:100%}
.ioc-footer .footer-action .vh-modetabs button{padding:.62rem 1.15rem;border:0;background:var(--ioc-surface,#fff);color:var(--ioc-text-secondary,#525252);font-weight:600;font-size:.82rem;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.ioc-footer .footer-action .vh-modetabs button[aria-selected="true"]{background:var(--ioc-blue,#0001ff);color:var(--ioc-text-on-primary,#fff)}
.ioc-footer .footer-action .vh2-form{border:1px solid var(--ioc-border-subtle,#e0e0e0)}


.home-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--ioc--g100,#161616);color:var(--ioc-text-on-color,#fff);transform:translateY(100%);transition:transform .35s cubic-bezier(.2,0,0,1)}
.home-cta-bar.in{transform:none}
.hcb-wrap{width:min(100%,1440px);margin:0 auto;padding:16px clamp(1.25rem,4vw,4rem);display:flex;align-items:center;gap:20px}
.hcb-wrap p{margin:0;font-size:15px;flex:1;color:var(--ioc-g20,#e0e0e0);text-wrap:pretty}
.hcb-wrap p strong{color:var(--ioc-text-on-color,#fff);font-weight:700}
.hcb-btn{display:inline-flex;align-items:center;gap:14px;background:var(--ioc--blue,#0001ff);color:var(--ioc-text-on-color,#fff);font-weight:600;font-size:15px;padding:12px 20px;white-space:nowrap;transition:background .15s}
.hcb-btn:hover{background:var(--ioc-blue-hover,#0000c4)}
.hcb-btn svg{width:18px;height:18px}
.hcb-close{background:transparent;border:0;color:var(--ioc-g40,#a8a8a8);font-size:26px;line-height:1;cursor:pointer;padding:2px 6px}
.hcb-close:hover{color:var(--ioc-text-on-color,#fff)}
@media(max-width:760px){.hcb-wrap{flex-wrap:wrap;gap:12px}.hcb-wrap p{flex:1 1 100%}.hcb-btn{flex:1}}


/* CMS-D-071 · lead-capture failure state — a lead that was not stored must
   read as a failure, not a confirmation. */
.ioc-cta-confirm.is-error{color:var(--ioc-danger,#da1e28)}
.ioc-cta-panel .ioc-cta-confirm.is-error{color:var(--ioc-danger-on-color,#ff8389)}
.ioc-cta-confirm.is-error a{color:inherit;text-decoration:underline}

/* ==========================================================================
   P36 / CMS-D-092 — the per-level heading weights, DELIBERATELY LAST.
   Still 0-0-1, so every block rule (0-1-1) and the showcase system (0-1-2)
   continue to outrank them exactly as they do in the design source. Position
   is the whole point: an absorbed legacy reset further up this file declares
   a bare `h1,h2,h3{font-weight:400}` at the SAME 0-0-1, and at equal
   specificity the later rule wins. Declared beside the other generic rules
   these lost to it, and six header headings rendered at 400 — measured, after
   it happened, which is the only reason this comment exists.
   ========================================================================== */
:where(body.ioc-site) h1{font-weight:var(--ioc-h1-weight,600)}
:where(body.ioc-site) h2{font-weight:var(--ioc-h2-weight,600)}
:where(body.ioc-site) h3{font-weight:var(--ioc-h3-weight,600)}
:where(body.ioc-site) h4{font-weight:var(--ioc-h4-weight,600)}

/* GENERATED by scripts/copy-render-kit-runtime.mjs — do not edit by hand.
 * Corrections that cannot live in the byte-frozen CMS-D-054 stylesheet.
 * Loaded AFTER it; see the note in that script for why each rule exists. */

/* 1 · Re-assert component anchor colours over `body.ioc-site a{color:inherit}`
 *     (0,1,2), which outranks every one-class component rule. Derived. */
body.ioc-site body.ioc-site{color:var(--ioc-text-primary)}
body.ioc-site body.ioc-site a{color:inherit}
body.ioc-site body.ioc-site ::selection{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .skip-link{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .eyebrow{color:var(--ioc-text-secondary)}
body.ioc-site .eyebrow .dot{color:var(--ioc-blue)}
body.ioc-site .body-l{color:var(--ioc-text-secondary)}
body.ioc-site .body{color:var(--ioc-text-secondary)}
body.ioc-site .body-s{color:var(--ioc-text-secondary)}
body.ioc-site .thin-accent{color:var(--ioc-blue)}
body.ioc-site .btn-primary{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-secondary{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-tertiary{color:var(--ioc-accent)}
body.ioc-site .btn-tertiary:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-ghost{color:var(--ioc-accent)}
body.ioc-site .btn-ghost:hover{color:var(--ioc-accent-hover)}
body.ioc-site .btn-on-dark{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-on-dark.is-ghost{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-on-dark.is-ghost:hover{color:var(--ioc-text-primary,#161616)}
body.ioc-site .link-arrow{color:var(--ioc-link-color,var(--ioc-blue))}
body.ioc-site .tag{color:var(--ioc-text-secondary)}
body.ioc-site .tag:hover{color:var(--ioc-text-primary)}
body.ioc-site .tag b{color:var(--ioc-blue)}
body.ioc-site .ioc-header .brand{color:var(--ioc-text-primary)}
body.ioc-site .infoc-logo .gc{color:var(--ioc-blue)}
body.ioc-site .ioc-header .nav-link{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .nav-trigger{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .nav-link:hover{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .nav-trigger:hover{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .nav-trigger[aria-expanded="true"]{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .nav-link[aria-current="page"]{color:var(--ioc-header-active,#0001ff)}
body.ioc-site .mobile-sub .mobile-overview{color:var(--ioc-blue)}
body.ioc-site .ioc-header .nav-trigger[aria-current="page"]{color:var(--ioc-header-active,#0001ff)}
body.ioc-site .ioc-header .icon-btn{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .icon-btn:hover{color:var(--ioc-blue)}
body.ioc-site .ioc-header .top-cta{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-header .featured>svg{color:var(--ioc-blue)}
body.ioc-site .ioc-header .featured h3{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .featured p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .featured>a{color:var(--ioc-blue)}
body.ioc-site .ioc-header .mega-label{color:var(--ioc-blue)}
body.ioc-site .ioc-header .mega-intro p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .view-all{color:var(--ioc-blue)}
body.ioc-site .ioc-header .menu-group h3{color:var(--ioc-blue)}
body.ioc-site .ioc-header .menu-group a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .menu-group .mg-ico svg{color:var(--ioc-blue)}
body.ioc-site .ioc-header .menu-group .mg-txt>span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .menu-group a>.ico{color:var(--ioc-blue)}
body.ioc-site .ioc-header .menu-group a:hover strong{color:var(--ioc-blue)}
body.ioc-site .ioc-header .simple-links a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-header .simple-links a .ico{color:var(--ioc-blue)}
body.ioc-site .ioc-header .simple-links [data-tile] svg{color:var(--ioc-blue)}
body.ioc-site .ioc-header .simple-links span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-header .simple-links a:hover strong{color:var(--ioc-blue)}
body.ioc-site .sh-drawer .brand{color:var(--ioc-text-primary)}
body.ioc-site .sh-drawer .icon-btn{color:var(--ioc-text-primary)}
body.ioc-site .sh-drawer .mobile-nav>a{color:var(--ioc-text-primary)}
body.ioc-site .sh-drawer .mobile-nav>button{color:var(--ioc-text-primary)}
body.ioc-site .sh-drawer .mobile-sub a{color:var(--ioc-text-secondary)}
body.ioc-site .sh-drawer .drawer-cta{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .sh-search .search-head{color:var(--ioc-text-helper)}
body.ioc-site .sh-search .icon-btn{color:var(--ioc-text-primary)}
body.ioc-site .sh-search .search-input .ico{color:var(--ioc-text-helper)}
body.ioc-site .sh-search .search-input input{color:var(--ioc-text-primary)}
body.ioc-site .sh-search .search-results a{color:var(--ioc-text-primary)}
body.ioc-site .sh-search .search-results a .ico{color:var(--ioc-blue)}
body.ioc-site .sh-search .search-results a:hover{color:var(--ioc-blue)}
body.ioc-site .ioc-footer{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer .fcta-eyebrow{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-cta h2 .em{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-action .fa-k{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-action p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .fa-tab{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .fa-tab[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .footer-action-points span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .footer-action-points b{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-button{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer .route .rn{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .route small{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .route .ico{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .route:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-brand .brand{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer .footer-lockup .navword{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer .footer-brand>p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .footer-contact .fc-k{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-footer .footer-contact .fc-v{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer .footer-contact a.fc-v:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-menu h3{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .footer-menu a{color:var(--ioc-g80,#393939)}
body.ioc-site .ioc-footer .footer-menu a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .fc-label{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .fc-value{color:var(--ioc-text-primary)}
body.ioc-site .ioc-footer a.fc-value:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-footer .legal{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .legal-row{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .legal-links span{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .legal-links a{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .legal-button{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .legal-links a:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .legal-button:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .social a{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .social button{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-footer .social a:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .social button:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .back-top{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .sh-cookie .cookie-copy p{color:var(--ioc-text-secondary)}
body.ioc-site .sh-cookie-btn.primary{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .sh-cookie-dialog .cd-k{color:var(--ioc-blue)}
body.ioc-site .sh-cookie-dialog .cd-body>p{color:var(--ioc-text-secondary)}
body.ioc-site .sh-cookie-dialog .cookie-option small{color:var(--ioc-text-secondary)}
body.ioc-site .sh-chat .chat-launcher{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .sh-chat .chat-k{color:var(--ioc-blue)}
body.ioc-site .sh-chat .chat-body>p{color:var(--ioc-text-secondary)}
body.ioc-site .sh-chat .chat-route{color:var(--ioc-text-primary)}
body.ioc-site .sh-chat .chat-route small{color:var(--ioc-text-secondary)}
body.ioc-site .sh-chat .chat-route .ico{color:var(--ioc-blue)}
body.ioc-site .sh-chat .chat-route:hover{color:var(--ioc-blue)}
body.ioc-site .sh-chat .chat-foot{color:var(--ioc-text-secondary)}
body.ioc-site .crumb .crumb-inner{color:var(--ioc-text-helper)}
body.ioc-site .crumb a{color:var(--ioc-text-helper)}
body.ioc-site .crumb a:hover{color:var(--ioc-blue)}
body.ioc-site .crumb .sep{color:var(--ioc-g30)}
body.ioc-site .crumb .cur{color:var(--ioc-text-primary)}
body.ioc-site .ph-trail .back{color:var(--ioc-text-primary)}
body.ioc-site .ph-trail .back:hover{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ph-trail .path a{color:var(--ioc-crumb,#5c5c5c)}
body.ioc-site .ph-trail .path a:hover{color:var(--ioc-blue)}
body.ioc-site .ph-trail .path .sep{color:var(--ioc-g30)}
body.ioc-site .ph-trail .path .cur{color:var(--ioc-crumb-current,#0001ff)}
body.ioc-site .phf-frame .cap{color:var(--ioc-text-helper)}
body.ioc-site .page-hero.ph-feature .phf-bar .bk{color:var(--ioc-text-helper)}
body.ioc-site .page-hero .ph-side .pk{color:var(--ioc-text-helper)}
body.ioc-site .page-hero .ph-side .pv b{color:var(--ioc-blue)}
body.ioc-site .dtable .dt-row.head>div{color:var(--ioc-text-helper)}
body.ioc-site .dtable .ti{color:var(--ioc-blue)}
body.ioc-site .dtable .td{color:var(--ioc-text-secondary)}
body.ioc-site .dtable .tt{color:var(--ioc-text-secondary)}
body.ioc-site .dtable .tg{color:var(--ioc-blue)}
body.ioc-site .ucard:hover h4{color:var(--ioc-accent)}
body.ioc-site .ucard:hover h3{color:var(--ioc-accent)}
body.ioc-site .ucard .uk{color:var(--ioc-accent)}
body.ioc-site .ucard:hover .uk{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ucard .ueyebrow{color:var(--ioc-text-helper)}
body.ioc-site .ucard p{color:var(--ioc-text-secondary)}
body.ioc-site .ucard .ulink{color:var(--ioc-blue)}
body.ioc-site .ucard .tnum{color:var(--ioc-blue)}
body.ioc-site .statstrip .st .sn b{color:var(--ioc-blue)}
body.ioc-site .statstrip .st .sl{color:var(--ioc-text-helper)}
body.ioc-site .prose p{color:var(--ioc-text-secondary)}
body.ioc-site .prose p.lead{color:var(--ioc-text-primary)}
body.ioc-site .prose ul li{color:var(--ioc-text-secondary)}
body.ioc-site .prose blockquote{color:var(--ioc-text-primary)}
body.ioc-site .field label{color:var(--ioc-text-helper)}
body.ioc-site .field:focus-within label{color:var(--ioc-blue)}
body.ioc-site .field input{color:var(--ioc-text-primary)}
body.ioc-site .field select{color:var(--ioc-text-primary)}
body.ioc-site .field textarea{color:var(--ioc-text-primary)}
body.ioc-site .field input::placeholder{color:var(--ioc-g50)}
body.ioc-site .field textarea::placeholder{color:var(--ioc-g50)}
body.ioc-site .cta-band{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .cta-band h2{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .cta-band p{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .cta-band .eyebrow{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .brandpanel .bp-cap{color:var(--ioc-text-helper)}
body.ioc-site .post2 .p2-cat{color:var(--ioc-blue)}
body.ioc-site .post2 .p2-meta{color:var(--ioc-text-helper)}
body.ioc-site .post2:hover h4{color:var(--ioc-blue)}
body.ioc-site .inv-band .ik{color:var(--ioc-amber)}
body.ioc-site .inv-band p{color:var(--ioc-text-primary)}
body.ioc-site .inv-band a{color:var(--ioc-amber)}
body.ioc-site .specband .sp .k{color:var(--ioc-blue)}
body.ioc-site .specband .sp .v{color:var(--ioc-text-primary)}
body.ioc-site .specband .sp .d{color:var(--ioc-text-secondary)}
body.ioc-site details.qa summary{color:var(--ioc-text-primary)}
body.ioc-site details.qa summary .qi{color:var(--ioc-blue)}
body.ioc-site details.qa .qa-a{color:var(--ioc-text-secondary)}
body.ioc-site .relrow a .rl{color:var(--ioc-text-primary)}
body.ioc-site .relrow a .rl small{color:var(--ioc-text-helper)}
body.ioc-site .relrow a svg{color:var(--ioc-blue)}
body.ioc-site .v1hero .h-eyebrow{color:var(--ioc-text-primary)}
body.ioc-site .v1hero h1 .em{color:var(--ioc-blue)}
body.ioc-site .v1hero .h-lede{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .h-btn{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .v1hero .h-btn.ghost{color:var(--ioc-text-primary)}
body.ioc-site .v1hero .proof-list li{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .img-caption{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .img-caption span{color:var(--ioc-g20,#e0e0e0)}
body.ioc-site .v1hero .hcap svg{color:var(--ioc-blue)}
body.ioc-site .v1hero .hcap span{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .hcap.is-blue{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .v1hero .hcap.is-blue svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .hcap.is-blue span{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .v1hero .outcome-head{color:var(--ioc-text-helper)}
body.ioc-site .v1hero .outcome-head .live{color:var(--ioc-green)}
body.ioc-site .v1hero .route .rix{color:var(--ioc-blue)}
body.ioc-site .v1hero .route strong{color:var(--ioc-text-primary)}
body.ioc-site .v1hero .route small{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .route .rarr{color:var(--ioc-blue)}
body.ioc-site .v1hero .outcome-result{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .outcome-result span{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .v1hero .outcome-result p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .v1hero a.rail-card.strong{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .v1hero .rail-card .rc-n{color:var(--ioc-text-primary)}
body.ioc-site .v1hero .rail-card .rc-ic{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .rail-copy span{color:var(--ioc-text-helper)}
body.ioc-site .v1hero .rail-card.strong .rail-copy span{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .v1hero .rail-copy p{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .rail-card.strong .rail-copy p{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .crumbs{color:var(--ioc-text-helper)}
body.ioc-site .v1hero .crumbs a{color:var(--ioc-text-helper)}
body.ioc-site .v1hero .crumbs a:hover{color:var(--ioc-blue)}
body.ioc-site .v1hero .crumbs .sep{color:var(--ioc-g30)}
body.ioc-site .v1hero .crumbs .cur{color:var(--ioc-blue)}
body.ioc-site .v1hero .inner-meta small{color:var(--ioc-text-helper)}
body.ioc-site .v1hero .tech-chip span{color:var(--ioc-text-secondary)}
body.ioc-site .v1hero .cap .cix{color:var(--ioc-blue)}
body.ioc-site .v1hero .cap span:last-child{color:var(--ioc-text-secondary)}
body.ioc-site .ui-alert .ai{color:var(--ioc-blue)}
body.ioc-site .ui-alert .at{color:var(--ioc-text-primary)}
body.ioc-site .ui-alert .ad{color:var(--ioc-text-secondary)}
body.ioc-site .ui-alert.is-success .ai{color:var(--ioc-green)}
body.ioc-site .ui-alert.is-warning .ai{color:var(--ioc-amber)}
body.ioc-site .ui-alert.is-danger .ai{color:var(--ioc-danger,#da1e28)}
body.ioc-site .ui-badge{color:var(--ioc-text-secondary)}
body.ioc-site .ui-badge.solid{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ui-badge.on{color:var(--ioc-green)}
body.ioc-site .ui-badge.off{color:var(--ioc-g60)}
body.ioc-site .ui-crumbs{color:var(--ioc-text-helper)}
body.ioc-site .ui-crumbs a{color:var(--ioc-text-helper)}
body.ioc-site .ui-crumbs a:hover{color:var(--ioc-blue)}
body.ioc-site .ui-crumbs .sep{color:var(--ioc-g30)}
body.ioc-site .ui-crumbs .cur{color:var(--ioc-blue)}
body.ioc-site .ui-tabs button{color:var(--ioc-text-secondary)}
body.ioc-site .ui-tabs button:hover{color:var(--ioc-text-primary)}
body.ioc-site .ui-tabs button[aria-selected="true"]{color:var(--ioc-blue)}
body.ioc-site .ui-tabpanel{color:var(--ioc-text-secondary)}
body.ioc-site .ui-opt{color:var(--ioc-text-primary)}
body.ioc-site .ui-opt .mk svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ui-select select{color:var(--ioc-text-primary)}
body.ioc-site .ui-pager a{color:var(--ioc-text-secondary)}
body.ioc-site .ui-pager span{color:var(--ioc-text-secondary)}
body.ioc-site .ui-pager a:hover{color:var(--ioc-text-primary)}
body.ioc-site .ui-pager a[aria-current="page"]{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ui-pager .dots{color:var(--ioc-g40)}
body.ioc-site .ui-tip .tip{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ui-meter{color:var(--ioc-text-helper)}
body.ioc-site .ui-steps .sn{color:var(--ioc-text-secondary)}
body.ioc-site .ui-steps .st.done .sn{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ui-steps .st.now .sn{color:var(--ioc-blue)}
body.ioc-site .ui-steps .st.now .sl{color:var(--ioc-blue)}
body.ioc-site .ui-avatar{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ui-empty .ei{color:var(--ioc-g40)}
body.ioc-site .ui-empty p{color:var(--ioc-text-secondary)}
body.ioc-site .ui-menu a{color:var(--ioc-text-primary)}
body.ioc-site .ui-menu button{color:var(--ioc-text-primary)}
body.ioc-site .ui-menu a:hover{color:var(--ioc-blue)}
body.ioc-site .ui-menu button:hover{color:var(--ioc-blue)}
body.ioc-site .ui-menu svg{color:var(--ioc-text-helper)}
body.ioc-site .ui-toast{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ui-toast .ti{color:var(--ioc-green)}
body.ioc-site .ui-toast p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ui-modal .mx{color:var(--ioc-text-primary)}
body.ioc-site .ui-modal .mx:hover{color:var(--ioc-blue)}
body.ioc-site .ui-modal .mb{color:var(--ioc-text-secondary)}
body.ioc-site .ui-table thead th{color:var(--ioc-text-helper)}
body.ioc-site .ioc-footer h3.fam-sol{color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-footer h3.fam-aca{color:var(--ioc-fam-academy,#6929c4)}
body.ioc-site .ioc-footer h3.fam-tal{color:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-fam .ioc-kicker{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-fam .ioc-related .ioc-rel-k{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-fam .ioc-related .ioc-rel-go{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-block.dark{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark .body{color:var(--ioc-g30)}
body.ioc-site .ioc-block.dark p{color:var(--ioc-g30)}
body.ioc-site .ioc-block.dark h2{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark h3{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark b{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark strong{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-head>p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-block.dark .ioc-head>p{color:var(--ioc-g30)}
body.ioc-site .ioc-kicker{color:var(--ioc-text-primary)}
body.ioc-site .ioc-block.dark .ioc-kicker{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-crumb{color:var(--ioc-text-helper)}
body.ioc-site .ioc-crumb a{color:var(--ioc-text-helper)}
body.ioc-site .ioc-crumb a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-hero h1 .em{color:var(--ioc-accent)}
body.ioc-site .ioc-hero .ioc-lede{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-chips-label{color:var(--ioc-g60,#666666)}
body.ioc-site .ioc-chip{color:var(--ioc-text-primary,#161616)}
body.ioc-site .ioc-chip svg{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
body.ioc-site .ioc-hero-figure figcaption b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-hero-figure figcaption strong{color:var(--ioc-text-primary)}
body.ioc-site .ioc-hero-figure figcaption span{color:var(--ioc-text-helper)}
body.ioc-site .ioc-matrix b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-matrix b svg{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
body.ioc-site .ioc-matrix span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-matrix[data-spotlight]>div b{color:var(--ioc-text-helper,#5c5c5c)}
body.ioc-site .ioc-matrix[data-spotlight]>div b svg{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-matrix[data-spotlight]>div span{color:var(--ioc-g60,#666666)}
body.ioc-site .ioc-matrix[data-spotlight]>div.on b{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
body.ioc-site .ioc-matrix[data-spotlight]>div.on b svg{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff))}
body.ioc-site .ioc-matrix[data-spotlight]>div.on span{color:var(--ioc-text-primary,#161616)}
body.ioc-site .ioc-localnav a{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-localnav a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-localnav a.active{color:var(--ioc-accent)}
body.ioc-site .ioc-localnav a[aria-current="true"]{color:var(--ioc-accent)}
body.ioc-site .ioc-card .ioc-card-ix{color:var(--ioc-accent)}
body.ioc-site .ioc-card .ioc-card-ix .ioc-cardicon{color:var(--ioc-accent)}
body.ioc-site .ioc-card .ioc-card-eyebrow{color:var(--ioc-text-helper)}
body.ioc-site .ioc-card p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tag{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tag.ai{color:var(--ioc-accent)}
body.ioc-site .ioc-card .ioc-card-link{color:var(--ioc-accent)}
body.ioc-site .ioc-feature .ioc-fmark{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .ioc-feature:hover .ioc-fmark{color:var(--ioc-accent)}
body.ioc-site .ioc-feature .ioc-fmark svg{color:var(--ioc-accent)}
body.ioc-site .ioc-feature p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-step .ioc-step-n{color:var(--ioc-accent)}
body.ioc-site .ioc-block.dark .ioc-step .ioc-step-n{color:var(--ioc-accent-on-inverse)}
body.ioc-site .ioc-step p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-block:not(.dark) .ioc-step b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-block:not(.dark) .ioc-step p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cap li{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-nav-btn span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-rec .ioc-rec-k{color:var(--ioc-accent)}
body.ioc-site .ioc-rec p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta .ioc-kicker{color:var(--ioc-accent)}
body.ioc-site .ioc-cta h2{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-field>span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-field input{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-field input::placeholder{color:var(--ioc-g60)}
body.ioc-site .ioc-cta-reassure span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-reassure span svg{color:var(--ioc-green)}
body.ioc-site .ioc-cta-note{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-note a{color:var(--ioc-accent)}
body.ioc-site .ioc-cta-confirm{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-confirm b{color:var(--ioc-accent)}
body.ioc-site .ioc-faq-item summary{color:var(--ioc-text-primary)}
body.ioc-site .ioc-faq-item p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-related .ioc-rel-k{color:var(--ioc-text-helper)}
body.ioc-site .ioc-related span.d{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-related .ioc-rel-go{color:var(--ioc-accent)}
body.ioc-site .ioc-media-fig figcaption{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-media li{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-kpi .l{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-dir-search svg{color:var(--ioc-text-helper)}
body.ioc-site .ioc-dir-search input{color:var(--ioc-text-primary)}
body.ioc-site .ioc-filter{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-filter[aria-pressed="true"]{color:var(--ioc-accent)}
body.ioc-site .ioc-dir-item .ioc-dir-meta{color:var(--ioc-text-helper)}
body.ioc-site .ioc-dir-item p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-row .ioc-row-t span{color:var(--ioc-text-helper)}
body.ioc-site .ioc-row .ioc-row-d{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-row .ioc-row-go{color:var(--ioc-accent)}
body.ioc-site .ioc-field label{color:var(--ioc-text-primary)}
body.ioc-site .ioc-field label .req{color:var(--ioc-accent)}
body.ioc-site .ioc-field input{color:var(--ioc-text-primary)}
body.ioc-site .ioc-field select{color:var(--ioc-text-primary)}
body.ioc-site .ioc-field textarea{color:var(--ioc-text-primary)}
body.ioc-site .ioc-form-note{color:var(--ioc-text-helper)}
body.ioc-site .ioc-map-info p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-map-info a{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-map-info a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-news p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-photoband h2{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-photoband p{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-note .ioc-note-k{color:var(--ioc-amber)}
body.ioc-site .ioc-note p{color:var(--ioc-text-primary)}
body.ioc-site .ioc-note a{color:var(--ioc-amber)}
body.ioc-site .ioc-persona-tab[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-persona-tab span{color:var(--ioc-text-helper)}
body.ioc-site .ioc-persona-tab[aria-selected="true"] span{color:var(--ioc-g40)}
body.ioc-site .ioc-persona-panel p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-artmeta{color:var(--ioc-text-helper)}
body.ioc-site .ioc-artmeta .ioc-who{color:var(--ioc-text-primary)}
body.ioc-site .ioc-artmeta .ioc-avatar{color:var(--ioc-text-helper)}
body.ioc-site .ioc-share a{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-share a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-prose{color:var(--ioc-text-primary)}
body.ioc-site .ioc-prose p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-prose ul{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-prose ol{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-prose a{color:var(--ioc-accent)}
body.ioc-site .ioc-prose figcaption{color:var(--ioc-text-helper)}
body.ioc-site .ioc-callout{color:var(--ioc-text-primary)}
body.ioc-site .ioc-callout .ioc-callout-k{color:var(--ioc-accent)}
body.ioc-site .ioc-toc b{color:var(--ioc-text-helper)}
body.ioc-site .ioc-aside-card b{color:var(--ioc-text-helper)}
body.ioc-site .ioc-toc a{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-toc a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-aside-card p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-lp-offer .n{color:var(--ioc-accent)}
body.ioc-site .ioc-lp-offer p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-lp-proof span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-searchbar svg{color:var(--ioc-text-helper)}
body.ioc-site .ioc-searchbar input{color:var(--ioc-text-primary)}
body.ioc-site .ioc-resultmeta{color:var(--ioc-text-helper)}
body.ioc-site .ioc-result .k{color:var(--ioc-text-helper)}
body.ioc-site .ioc-result h3 a:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-result p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-result .u{color:var(--ioc-accent)}
body.ioc-site .ioc-empty p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-statebanner .ioc-sb-ico{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-statebanner p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-field .ioc-err{color:var(--ioc-danger,#da1e28)}
body.ioc-site .ioc-lp-cap-list li{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-lp-cap-list li svg{color:var(--ioc-accent)}
body.ioc-site .ioc-lp-cap-form .sub{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-404 .code{color:var(--ioc-accent)}
body.ioc-site .ioc-404 p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-home{color:var(--ioc-text-primary)}
body.ioc-site .ioc-home:hover{color:var(--ioc-accent)}
body.ioc-site .ioc-kicker-crumb .ioc-sep{color:var(--ioc-text-helper)}
body.ioc-site .ioc-cta-slots span{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-aud button{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-aud button[aria-selected=true]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-cta-stats b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-stats span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-guar span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cta-guar svg{color:var(--ioc-green)}
body.ioc-site .ioc-rea-k{color:var(--ioc-text-helper)}
body.ioc-site .ioc-rea-card svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-rea-card span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-rea-direct a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-rea-direct a svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-rea-direct a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-office-tabs button{color:var(--ioc-text-primary)}
body.ioc-site .ioc-office-tabs button[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-office-reg{color:var(--ioc-text-helper)}
body.ioc-site .ioc-office-row svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-office-row .k{color:var(--ioc-text-helper)}
body.ioc-site .ioc-office-row a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-office-row .v{color:var(--ioc-text-primary)}
body.ioc-site .ioc-office-row a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-office-acts a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-office-acts a svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-office-acts a:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-office-acts a:hover svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-office-empty{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cards [data-route-fam] .ioc-card-eyebrow{color:var(--rfi)}
body.ioc-site .ioc-cards [data-route-fam] .ioc-cardicon{color:var(--rfi)}
body.ioc-site .ioc-cards [data-route-fam] .ioc-card-link{color:var(--rfi)}
body.ioc-site .ioc-region-tabs button{color:var(--ioc-text-primary)}
body.ioc-site .ioc-region-tabs button .n{color:var(--ioc-text-helper)}
body.ioc-site .ioc-region-tabs button[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-region-tabs button[aria-selected="true"] .n{color:rgba(255,255,255,.78)}
body.ioc-site .ioc-region-head span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-markets .tag{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-markets a{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-markets a svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-markets a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-sh-lead p{color:var(--ioc-text-primary)}
body.ioc-site .ioc-sh-lead .meta{color:var(--ioc-text-helper)}
body.ioc-site .ioc-block.dark .ioc-sh-lead p{color:var(--ioc-g10,#f4f4f4)}
body.ioc-site .ioc-block.dark .ioc-sh-lead .meta{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-sh-link{color:var(--ioc-accent,#0001ff)}
body.ioc-site .dark .ioc-sh-link{color:var(--ioc-accent-on-inverse)}
body.ioc-site .ioc-logowall .ioc-lw-name{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-logowall-note{color:var(--ioc-text-helper)}
body.ioc-site .ioc-block.dark .ioc-logowall .ioc-lw-name{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-quote blockquote{color:var(--ioc-text-primary)}
body.ioc-site .ioc-quote .ioc-q-who b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-quote .ioc-q-who span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-quote .ioc-q-src{color:var(--ioc-text-helper)}
body.ioc-site .ioc-block.dark .ioc-quote blockquote{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark .ioc-quote .ioc-q-who span{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-block.dark .ioc-quote .ioc-q-src{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-tablewrap caption{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tablewrap th{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tablewrap td{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tablewrap td:first-child{color:var(--ioc-text-primary)}
body.ioc-site .ioc-tablewrap .ioc-td-yes{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tablewrap .ioc-td-no{color:var(--ioc-text-helper)}
body.ioc-site .ioc-table-note{color:var(--ioc-text-helper)}
body.ioc-site .ioc-tl-when{color:var(--ioc-text-helper)}
body.ioc-site .ioc-tl.now .ioc-tl-when{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tl.done .ioc-tl-when{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tl b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-tl p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-block.dark .ioc-tl p{color:var(--ioc-g30)}
body.ioc-site .ioc-job{color:inherit}
body.ioc-site .ioc-job:hover h3{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-job-meta{color:var(--ioc-text-helper)}
body.ioc-site .ioc-job-meta .ioc-job-fam{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-job p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-job-go{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-jobs-empty{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-code-bar{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-code-bar b{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-code-bar .ioc-code-lang{color:var(--ioc-accent-on-inverse)}
body.ioc-site .ioc-code pre{color:var(--ioc-g20,#e0e0e0)}
body.ioc-site .ioc-code pre b{color:var(--ioc-accent-on-inverse)}
body.ioc-site .ioc-code pre i{color:var(--ioc-g60,#666666)}
body.ioc-site .ioc-code pre em{color:var(--ioc-success,#198038)}
body.ioc-site .ioc-code-foot{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .ioc-cmp-k{color:var(--ioc-text-helper)}
body.ioc-site .ioc-cmp.pick .ioc-cmp-k{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-cmp>p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cmp li{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-cmp li svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-cmp li.no{color:var(--ioc-text-helper)}
body.ioc-site .ioc-cmp li.no svg{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .ioc-cmp .ioc-cmp-when{color:var(--ioc-text-primary)}
body.ioc-site .ioc-banner>svg{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-banner p{color:var(--ioc-text-primary)}
body.ioc-site .ioc-banner .ioc-banner-k{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-banner a.ioc-banner-go{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-banner .ioc-banner-x{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-banner .ioc-banner-x:hover{color:var(--ioc-text-primary)}
body.ioc-site .ioc-banner.warn>svg{color:var(--ioc-amber,#b45309)}
body.ioc-site .ioc-banner.warn .ioc-banner-k{color:var(--ioc-amber,#b45309)}
body.ioc-site .ioc-banner.warn a.ioc-banner-go{color:var(--ioc-amber,#b45309)}
body.ioc-site .ioc-embed-cap span{color:var(--ioc-text-helper)}
body.ioc-site .ioc-embed-consent{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-embed-consent button{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-divider-label span{color:var(--ioc-text-helper)}
body.ioc-site .ioc-block.dark .ioc-divider-label span{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .ioc-form-copy{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-form-ask span{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-form-sure li{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-form-sure svg{color:var(--ioc-accent)}
body.ioc-site .ioc-form-errors a{color:var(--ioc-danger-text,#a2191f)}
body.ioc-site .ioc-field-error{color:var(--ioc-danger-text,#a2191f)}
body.ioc-site .ioc-opt{color:var(--ioc-text-helper)}
body.ioc-site .ioc-choicegroup legend{color:var(--ioc-text-primary)}
body.ioc-site .ioc-choicegroup legend .req{color:var(--ioc-accent)}
body.ioc-site .ioc-choice small{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-filefield input[type="file"]::file-selector-button{color:var(--ioc-text-primary)}
body.ioc-site .ioc-filefield input[type="file"]::file-selector-button:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-fhint{color:var(--ioc-text-helper)}
body.ioc-site .ioc-marketing{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-privacy{color:var(--ioc-text-helper)}
body.ioc-site .ioc-form-actions .ioc-form-note{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-form-success p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-form-ok svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-block.dark .ioc-form{color:var(--ioc-text-primary)}
body.ioc-site .cta-band .ioc-form{color:var(--ioc-text-primary)}
body.ioc-site .ioc-block.dark .ioc-form-title{color:var(--ioc-text-primary)}
body.ioc-site .cta-band .ioc-form-title{color:var(--ioc-text-primary)}
body.ioc-site .ioc-block.dark .ioc-form p{color:var(--ioc-text-secondary)}
body.ioc-site .cta-band .ioc-form p{color:var(--ioc-text-secondary)}
body.ioc-site .ioc-rowgroup>h3 span{color:var(--ioc-text-helper)}
body.ioc-site .infoc-logo .gc{color:var(--ioc--blue)}
body.ioc-site .logo .logo-sub{color:var(--ioc--g70)}
body.ioc-site .architecture-table th{color:var(--ioc--g70)}
body.ioc-site .score-ring strong{color:var(--ioc--blue)}
body.ioc-site .result-notification p{color:var(--ioc--g70)}
body.ioc-site .lede{color:var(--ioc--g70)}
body.ioc-site .section-head p{color:var(--ioc--g70)}
body.ioc-site .section-kicker{color:var(--ioc--blue)}
body.ioc-site .btn{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .btn-secondary{color:var(--ioc--g100)}
body.ioc-site .btn-secondary:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .text-link{color:var(--ioc-link-color,var(--ioc--blue))}
body.ioc-site .logo-mark{color:var(--ioc--blue)}
body.ioc-site .mega span{color:var(--ioc--g70)}
body.ioc-site .hero h1 em{color:var(--ioc--blue)}
body.ioc-site .hero-meta{color:var(--ioc--g70)}
body.ioc-site .hero-panel{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .panel-label{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .panel-label:after{color:var(--ioc-success,#198038)}
body.ioc-site .map-node small{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .map-node span{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .proof-item strong{color:var(--ioc--blue)}
body.ioc-site .proof-item span{color:var(--ioc--g70)}
body.ioc-site .solution-card:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .solution-card:hover p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .solution-card .icon{color:var(--ioc--blue)}
body.ioc-site .solution-card p{color:var(--ioc--g70)}
body.ioc-site .ai-section{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ai-section .section-head p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .tab{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .tab[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .tab-panel p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .cap-list .icon{color:var(--ioc-success,#198038)}
body.ioc-site .industry .icon{color:var(--ioc--blue)}
body.ioc-site .industry p{color:var(--ioc--g70)}
body.ioc-site .industry span{color:var(--ioc--g60)}
body.ioc-site .step:before{color:var(--ioc--blue)}
body.ioc-site .step p{color:var(--ioc--g70)}
body.ioc-site .gateway:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .gateway p{color:var(--ioc--g70)}
body.ioc-site .gateway:hover p{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .gateway .text-link{color:inherit}
body.ioc-site .case-visual{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .case-visual>.carbon-icon{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .case-visual p{color:var(--ioc-text-on-brand-deep,#d0e2ff)}
body.ioc-site .case-copy cite{color:var(--ioc--g70)}
body.ioc-site .outcomes span{color:var(--ioc--g70)}
body.ioc-site .insight-meta{color:var(--ioc--g60)}
body.ioc-site .faq-a p{color:var(--ioc--g70)}
body.ioc-site .contact{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .contact p{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .field input{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .field select{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .field textarea{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .field select option{color:var(--ioc--g100)}
body.ioc-site .field input::placeholder{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .field textarea::placeholder{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .contact-form .btn{color:var(--ioc--blue)}
body.ioc-site .contact-form .btn:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .form-note{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .footer-brand p{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .footer-col h3{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .footer-col a{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .footer-col a:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .footer-bottom{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .back-top{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .editorial .hero-panel{color:var(--ioc--g100)}
body.ioc-site .editorial .panel-label{color:var(--ioc--g70)}
body.ioc-site .quote-mark{color:var(--ioc--blue)}
body.ioc-site .modular .hero-panel{color:var(--ioc--g100)}
body.ioc-site .modular .panel-label{color:var(--ioc--g70)}
body.ioc-site .cc-main strong{color:var(--ioc--blue)}
body.ioc-site .cc-wide small{color:var(--ioc--g70)}
body.ioc-site .modular .case-visual{color:var(--ioc--g100)}
body.ioc-site .modular .case-copy{color:var(--ioc--g100)}
body.ioc-site .modular .case-visual p{color:var(--ioc--g70)}
body.ioc-site .announcement{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .announcement a{color:var(--ioc-accent-on-inverse,#78a9ff)}
body.ioc-site .showcase .logo-sub{color:var(--ioc--g70)}
body.ioc-site .showcase-hero h1 em{color:var(--ioc--blue)}
body.ioc-site .hero-trust{color:var(--ioc--g70)}
body.ioc-site .hero-trust .icon{color:var(--ioc--green)}
body.ioc-site .console-status{color:var(--ioc--green)}
body.ioc-site .console-question{color:var(--ioc--g70)}
body.ioc-site .console-route>.carbon-icon:first-child{color:var(--ioc--blue)}
body.ioc-site .console-route small{color:var(--ioc--g70)}
body.ioc-site .console-result{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .console-result-label{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .console-result p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .logo-proof p{color:var(--ioc--g70)}
body.ioc-site .proof-mark .icon{color:var(--ioc--blue)}
body.ioc-site .persona-tab[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .persona-copy p{color:var(--ioc--g70)}
body.ioc-site .persona-outcomes{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .journey[open] summary{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .journey-top span{color:var(--ioc--blue)}
body.ioc-site .journey[open] .journey-top span{color:var(--ioc-accent-on-inverse,#78a9ff)}
body.ioc-site .journey-detail p{color:var(--ioc--g70)}
body.ioc-site .journey-detail .icon{color:var(--ioc--green)}
body.ioc-site .process-button[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .architecture-title p{color:var(--ioc--g70)}
body.ioc-site .info-button{color:var(--ioc--blue)}
body.ioc-site .info-button:focus:after{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .info-button:hover:after{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .layer>.carbon-icon{color:var(--ioc--g70)}
body.ioc-site .layer span{color:var(--ioc--g70)}
body.ioc-site .layer.active{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .layer.active>.carbon-icon{color:var(--ioc-text-on-brand-deep,#d0e2ff)}
body.ioc-site .layer.active span{color:var(--ioc-text-on-brand-deep,#d0e2ff)}
body.ioc-site .value-section{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .value-section .section-head p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .value-card>.carbon-icon{color:var(--ioc-accent-on-inverse,#78a9ff)}
body.ioc-site .value-card p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .assessment-aside{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .assessment-aside p{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .progress-steps li{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .progress-steps li.current{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .choice-text small{color:var(--ioc--g70)}
body.ioc-site .assessment-actions .btn[disabled]{color:var(--ioc-g60,#666666)}
body.ioc-site .filter-status{color:var(--ioc--g70)}
body.ioc-site .trust-intro{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .trust-intro p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .trust-item .icon{color:var(--ioc--blue)}
body.ioc-site .trust-item p{color:var(--ioc--g70)}
body.ioc-site .sticky-conversion{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .sticky-close{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .carbon-dialog{color:var(--ioc--g100)}
body.ioc-site .dialog-body>p{color:var(--ioc--g70)}
body.ioc-site .dialog-grid .field input{color:var(--ioc--g100)}
body.ioc-site .dialog-grid .field select{color:var(--ioc--g100)}
body.ioc-site .dialog-grid .field textarea{color:var(--ioc--g100)}
body.ioc-site .dialog-grid .field input::placeholder{color:var(--ioc--g70)}
body.ioc-site .dialog-grid .field textarea::placeholder{color:var(--ioc--g70)}
body.ioc-site .checkbox{color:var(--ioc--g70)}
body.ioc-site .showcase .contact:after{color:rgba(255,255,255,.09)}
body.ioc-site .showcase .footer-col h3{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .showcase .footer-col h5{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .review-index .hero-note{color:var(--ioc--g100)}
body.ioc-site .review-index .page-nav a{color:var(--ioc--g70)}
body.ioc-site .review-index .page-nav a:hover{color:var(--ioc--g100)}
body.ioc-site .review-index .page-nav a.active{color:var(--ioc--blue)}
body.ioc-site .review-index .proof-marks .proof-mark{color:var(--ioc--g100)}
body.ioc-site .review-index .proof-marks .carbon-icon{color:var(--ioc--blue)}
body.ioc-site .review-index .industry{color:inherit}
body.ioc-site .review-index .industry .industry-cta{color:var(--ioc--blue)}
body.ioc-site .review-index .ca-tab{color:var(--ioc--g70)}
body.ioc-site .review-index .ca-tab[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .sec-num{color:inherit}
body.ioc-site .review-index .assessment-aside p{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .review-index #get-started .contact{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index #get-started .contact p{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index #get-started .contact label{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index #get-started .contact .hero-meta span{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .contact-form .btn{color:var(--ioc-surface-brand,#001d6c)}
body.ioc-site .review-index .contact-form .btn:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .toast{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .media-frame figcaption{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .media-frame figcaption small{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .review-index .photo-sources{color:var(--ioc-g50,#8d8d8d)}
body.ioc-site .review-index .photo-sources a{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site #delivery .vh-out svg{color:var(--ioc-accent-on-brand,#8c8cff)}
body.ioc-site #delivery .vh-out strong{color:var(--ioc-text-on-color,#fff)}
body.ioc-site #delivery .vh-out span{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .showcase .section-kicker{color:var(--ioc--g100)}
body.ioc-site .showcase .ai-section .section-kicker{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .showcase .value-section .section-kicker{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .ca-tab:hover:not([aria-selected="true"]){color:var(--ioc--g100)}
body.ioc-site .review-index .assessment-trust{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .review-index .assessment-trust .carbon-icon{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .review-index .assessment-progress-note{color:var(--ioc--g60)}
body.ioc-site .review-index #ca-contact .field input::placeholder{color:rgba(255,255,255,.6)}
body.ioc-site .review-index #ca-contact .field textarea::placeholder{color:rgba(255,255,255,.6)}
body.ioc-site .review-index .form-reassure{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .review-index .form-reassure .carbon-icon{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .section-head .ioc-sh-lead p{color:var(--ioc--g100)}
body.ioc-site .section-head .ioc-sh-lead .meta{color:var(--ioc--g60)}
body.ioc-site .section.dark .section-head .ioc-sh-lead p{color:var(--ioc-g10,#f4f4f4)}
body.ioc-site .section.dark .section-head .ioc-sh-lead .meta{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .v1hero .foundation-card{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .fc-kicker{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .v1hero .fc-body>svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .fc-title{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .v1hero .fc-sub{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .v1hero .fc-link{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-ribbon{color:var(--ioc--g70)}
body.ioc-site .vh-acard>svg{color:var(--ioc--blue)}
body.ioc-site .vh-acard .kx{color:var(--ioc--blue)}
body.ioc-site .vh-acard p{color:var(--ioc--g70)}
body.ioc-site .vh-c .num{color:var(--ioc--g60)}
body.ioc-site .vh-c>svg{color:var(--ioc--blue)}
body.ioc-site .vh-c p{color:var(--ioc--g70)}
body.ioc-site .vh-c a{color:var(--ioc--blue)}
body.ioc-site .vh-pf p{color:var(--ioc--g70)}
body.ioc-site .vh-chips a{color:var(--ioc--g70)}
body.ioc-site .vh-chips a:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-step .si{color:var(--ioc--blue)}
body.ioc-site .vh-step p{color:var(--ioc--g70)}
body.ioc-site .vh-out svg{color:var(--ioc--blue)}
body.ioc-site .vh-out span{color:var(--ioc--g60)}
body.ioc-site .vh-capcard .kx{color:var(--ioc--blue)}
body.ioc-site .vh-capcard p{color:var(--ioc--g70)}
body.ioc-site .vh-capcard a{color:var(--ioc--blue)}
body.ioc-site .vh-cpanel{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-cpanel .eyebrow{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-cpanel .vh2-intro h2{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh2-sub{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .vh2-trust{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .vh2-trust svg{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-modetabs button{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-modetabs button[aria-selected="true"]{color:var(--ioc--blue)}
body.ioc-site .vh2-form{color:var(--ioc--g100)}
body.ioc-site .vh2-field label{color:var(--ioc--g70)}
body.ioc-site .vh2-field .req{color:var(--ioc--blue)}
body.ioc-site .vh2-field input{color:var(--ioc--g100)}
body.ioc-site .vh2-field select{color:var(--ioc--g100)}
body.ioc-site .vh2-field textarea{color:var(--ioc--g100)}
body.ioc-site .vh2-field input::placeholder{color:var(--ioc--g60)}
body.ioc-site .vh2-field textarea::placeholder{color:var(--ioc--g60)}
body.ioc-site .vh2-err{color:var(--ioc-danger,#da1e28)}
body.ioc-site .vh2-q legend{color:var(--ioc--g70)}
body.ioc-site .vh-choices label{color:var(--ioc--g70)}
body.ioc-site .vh-choices label:hover{color:var(--ioc--g100)}
body.ioc-site .vh-choices label:has(input:checked){color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-consent{color:var(--ioc--g70)}
body.ioc-site .vh2-submit{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-status{color:var(--ioc--g100)}
body.ioc-site .vh2-note{color:var(--ioc--g60)}
body.ioc-site .pa{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .pa-row{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .pa-row .ic svg{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .pa-row .k{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .pa-row .d{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .pa-row.core .d{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .pa-row.core .k{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
body.ioc-site .pa-row .go{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .pa-row:hover .go{color:var(--ioc-accent-on-brand,#8c8cff)}
body.ioc-site .pa-row.core .go{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .pa-row:hover .ic svg{color:var(--ioc-accent-on-brand,#8c8cff)}
body.ioc-site .pa-fig figcaption span{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .pa-rule p{color:var(--ioc-g30,#c6c6c6)}
body.ioc-site .pa-rule p b{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .pa-rule .k{color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .pa-links a{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-dtabs button{color:var(--ioc-g70)}
body.ioc-site .vh-dtabs button:hover{color:var(--ioc-text-primary)}
body.ioc-site .vh-dtabs button[aria-selected="true"]{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-dpanel .m{color:var(--ioc-g60)}
body.ioc-site .vh-dpanel a{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-step:hover .si{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-seclink{color:var(--ioc--blue)}
body.ioc-site .vh-capcard:hover .kx{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-capcard:hover h3{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-capcard:hover p{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .vh-capcard:hover a{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .footer-cta .vh2-sub{color:var(--ioc-text-secondary,#525252)}
body.ioc-site .ioc-footer .footer-cta .vh2-trust{color:var(--ioc-text-secondary,#525252)}
body.ioc-site .ioc-footer .footer-cta .vh2-trust svg{color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-footer .footer-action .vh-modetabs button{color:var(--ioc-text-secondary,#525252)}
body.ioc-site .ioc-footer .footer-action .vh-modetabs button[aria-selected="true"]{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .home-cta-bar{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .hcb-wrap p{color:var(--ioc-g20,#e0e0e0)}
body.ioc-site .hcb-wrap p strong{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .hcb-btn{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .hcb-close{color:var(--ioc-g40,#a8a8a8)}
body.ioc-site .hcb-close:hover{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-cta-confirm.is-error{color:var(--ioc-danger,#da1e28)}
body.ioc-site .ioc-cta-panel .ioc-cta-confirm.is-error{color:var(--ioc-danger-on-color,#ff8389)}
body.ioc-site .ioc-cta-confirm.is-error a{color:inherit}

/* 2 · The admin tap-target reset `button{min-width:40px;min-height:40px}` is
 *     unscoped, and min-* beats width/height REGARDLESS of specificity — so a
 *     component that declares an explicit size cannot shrink below 40px. That
 *     inflated the hero slide dots (declared 10x10, rendered 40x40) and the
 *     footer social/chat marks (declared 34x34, rendered 40x40). Reset only
 *     where the site declares an explicit size; every other button keeps the
 *     40px accessible target. */
body.ioc-site .v1hero .hs-dots button{min-width:0;min-height:0}
body.ioc-site .ioc-footer .social a,
body.ioc-site .ioc-footer .social button{min-width:0;min-height:0}

/* 3 · The footer social marks render as <span role="img"> because no profile
 *     URLs exist in the CMS and inventing them would be drift. The kit styles
 *     the row as `.social a, .social button` only, so the spans missed the
 *     34x34 bordered box entirely and sat as bare glyphs beside the boxed chat
 *     button. Give the span the same box; it stays a non-link. */
body.ioc-site .ioc-footer .social span[role='img']{
  width:34px;height:34px;border:1px solid #393939;display:flex;
  align-items:center;justify-content:center;color:#c6c6c6;background:transparent;
}
body.ioc-site .ioc-footer .social span[role='img'] svg{width:16px;height:16px}

/* INFOC forms — the multi-step pager (CMS-D-084 P5, owner decision B-1).
 *
 * A SEPARATE, OWNED sheet. `infoc-cms.css` is sha256-pinned by
 * `scripts/v5-ui-gate.mjs` (P15-PUBLIC-BOUNDARY) and must not be hand-edited, and
 * appending to the GENERATED `infoc-site-overrides.css` would be overwritten on
 * the next build. B-1 chose option (c) — a dedicated sheet — and verified none of
 * the selectors below collide with the frozen one.
 *
 * It is deliberately SMALL. Every field, label, error and button inside a step is
 * already styled by the frozen sheet's generic selectors; this adds only what a
 * pager needs and nothing a single-step form pays for.
 *
 * Design rules (CMS-D-066): radius 0, 1px hairlines, house blue #0001ff, no
 * shadows-as-structure.
 *
 * P37 T4 (CMS-D-094/095): tokenised. The role layer lives in the PUBLIC kit's
 * own :root/body.ioc-site since Wave T1 — the old "the public site does not
 * load the admin token layer" rationale is no longer true. Every var() here
 * CARRIES A FALLBACK on purpose: this is a separate file, and a page that
 * ever loaded it without the kit sheet must render the house values, not
 * transparent (CMS-D-078). `#0001ff` maps to --ioc-blue, NEVER --ioc-accent —
 * accent is variant-overridden and a form pager must not family-shift.
 */

/* The step itself. A real <fieldset>, so the legend names the step for a screen
   reader and `hidden` on a later step is what the engine's own `visible()`
   already understands. */
.ioc-form .ioc-step {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0; /* fieldset defaults to min-content; this lets the grid shrink */
}

.ioc-form .ioc-step > legend {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  padding: 0;
  margin: 0 0 10px;
}

/* Progress. One line, a hairline rule, and a bar that fills — no percentages
   shouted at the visitor, because the step count is already in the label. */
.ioc-form .ioc-form-progress {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  /* was #6f6f6f — the progress label is helper text on a light card, and
     helper's role value is #5c5c5c (ΔE 7.8, an approved §5 normalisation) */
  color: var(--ioc-text-helper, #5c5c5c);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ioc-border-subtle, #e0e0e0);
}

.ioc-form .ioc-form-progress__bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ioc-blue, #0001ff);
  transition: width 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ioc-form .ioc-form-progress__bar {
    transition: none;
  }
}

/* Back / Continue. Sits above the action row so the submit stays the last thing
   before the reassurance line on the final step. */
.ioc-form .ioc-form-steps {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}

.ioc-form .ioc-form-steps [hidden] {
  display: none;
}

/* The step LIST marker classes B-1 reserved. Used by the builder's preview and by
   any future step-list affordance; declared here so the two never diverge. */
.ioc-form-step--current {
  font-weight: 600;
  color: var(--ioc-text-primary, #161616);
}

.ioc-form-step--complete {
  color: var(--ioc-blue, #0001ff);
}

/* ============================================================
   INFOC ONE CMS — slider sheet (CMS-D-100 ④). OWNED, not vendored.

   `infoc-cms.css` is a SHA-pinned artifact referenced in eleven places and is
   NOT touched by this programme. This is a separate owned sheet, exactly as
   `infoc-forms.css` is, copied to apps/one/public by
   copy-render-kit-runtime.mjs (prebuild + predev) and linked from the frontend
   layout.

   LITERAL-HEX CEILING IS ZERO. Every colour is `var(--role, #fallback)` — the
   var()-fallback pattern is the end state (CMS-D-078), and it is what makes the
   appearance ratchet monotonic. The mock's ~200 literal hexes and its invented
   family accents (#a04a00, #00635f, #0f62fe) are VOID; the palette that exists
   is --ioc-fam-* in infoc-cms.css:123-129.

   ALIASES DECLARE ON body.ioc-site, NEVER :root. An alias (a value containing
   var()) declared at :root substitutes on <html> and freezes at its code
   default, blind to the emitter's body.ioc-site overrides — CMS-D-095, live
   instance --ioc-shadow-focus.

   MOTION IS DECLARATIVE. Every duration and easing comes from the custom
   properties `renderSliderMarkup` inlined on the mount, resolved server-side by
   `resolveMotion`. The runtime only toggles data-state; it never sets a
   duration, so JS and CSS cannot disagree about timing.
   ============================================================ */

/* Slider roles. Aliases (they contain var()), so they belong on body.ioc-site.
   Each names the base role it draws from, and carries the literal fallback that
   role resolves to today. */
body.ioc-site {
  --ioc-sl-accent: var(--ioc-accent, #0001ff);
  --ioc-sl-accent-hover: var(--ioc-accent-hover, #0000c4);
  --ioc-sl-surface: var(--ioc-surface, #ffffff);
  --ioc-sl-surface-cool: var(--ioc-surface-cool, #f2f4f8);
  --ioc-sl-text: var(--ioc-text-primary, #161616);
  --ioc-sl-text-2: var(--ioc-text-secondary, #525252);
  --ioc-sl-border: var(--ioc-border-subtle, #e0e0e0);
  --ioc-sl-on-color: var(--ioc-text-on-color, #ffffff);
  --ioc-sl-on-inverse-muted: var(--ioc-text-on-inverse-muted, #c6c6c6);
  --ioc-sl-surface-dark: var(--ioc-surface-inverse-raised, #1c1c1c);
  --ioc-sl-border-on-color: var(--ioc-border-on-color, #ffffff);
}

/* Family accents. The document's `family` picks one; where a page already
   declares [data-page-family] the slider inherits that instead. */
.ioc-sl[data-family='academy'] {
  --ioc-sl-accent: var(--ioc-fam-academy, #6929c4);
  --ioc-sl-accent-hover: var(--ioc-fam-academy-hover, #55209c);
}
.ioc-sl[data-family='talents'] {
  --ioc-sl-accent: var(--ioc-fam-talents, #1a7a52);
  --ioc-sl-accent-hover: var(--ioc-fam-talents-hover, #145f40);
}
.ioc-sl[data-family='industries'] {
  --ioc-sl-accent: var(--ioc-fam-industries, #007d79);
  --ioc-sl-accent-hover: var(--ioc-fam-industries-ink, #005d5d);
}

/* ── mount + stage ───────────────────────────────────────────────────────── */

.ioc-sl {
  position: relative;
  overflow: hidden;
  background: var(--ioc-sl-surface, #ffffff);
  /* Horizontal swipe is ours; a vertical drag must still scroll the page. */
  touch-action: pan-y;

  /* TIMELINE DEFAULTS — the same values as TL_DEFAULTS in layouts.ts.
     `renderSliderMarkup` inlines the document's resolved values on this
     element, and an inline style beats a class selector, so these are the
     floor rather than the norm.

     Declaring them here is not redundancy. It buys three things:
       1. The appearance gate can see them. A var() consumed but declared
          nowhere is invalid at computed-value time (T16 ②c), and the gate is
          right to refuse it — the inline style is not something it can read.
       2. The runtime reads --hold and --depth through getComputedStyle. With
          no declaration and no inline style it would get an empty string and
          fall back to a magic number in JS instead of the shared source.
       3. If a strict nonce-based CSP ever blocks the inline style attribute
          (deployment plan §J1), the slider degrades to correct default motion
          rather than to no motion at all. */
  --enter: 620ms;
  --exit: 420ms;
  --kd: 1;
  --line-dur: 780ms;
  --line-lead: 180ms;
  --lift-dur: 640ms;
  --lift-lead: 260ms;
  --unveil-dur: 900ms;
  --unveil-lead: 200ms;
  --data-lead: 420ms;
  --hold: 6200ms;
  --depth: 12px;
  --ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  /* Per-item stagger index; the markup sets a real one on each staggered
     child, so this is only the floor for an item that carries none. */
  --i: 0;
}

.ioc-sl-stage {
  position: relative;
  display: grid;
  /* Every slide occupies the same cell, so the stage height is the tallest
     slide and nothing reflows when the active one changes. */
  grid-template-areas: 'slide';
  min-height: 34rem;
}

.ioc-sl-slide {
  grid-area: slide;
  position: relative;
  display: grid;
  gap: 3rem;
  align-items: center;
  padding: 4.75rem 4rem 6rem;
  color: var(--ioc-sl-text, #161616);
  background: var(--ioc-sl-surface, #ffffff);
}

.ioc-sl-slide[hidden] {
  display: none;
}

.ioc-sl-slide--dark {
  color: var(--ioc-sl-on-color, #ffffff);
  background: var(--ioc-sl-surface-dark, #1c1c1c);
}

.ioc-sl-slide--dark .ioc-sl-sub,
.ioc-sl-slide--dark .ioc-sl-stat-l {
  color: var(--ioc-sl-on-inverse-muted, #c6c6c6);
}

/* ── typography ──────────────────────────────────────────────────────────── */

.ioc-sl-kicker {
  margin: 0 0 1.125rem;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ioc-sl-accent, #0001ff);
}

.ioc-sl-headline {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.ioc-sl-sub {
  margin: 0 0 1.5rem;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ioc-sl-text-2, #525252);
}

.ioc-sl-quote {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--ioc-sl-accent, #0001ff);
  font-size: 1.1875rem;
  line-height: 1.5;
  font-weight: 500;
  max-width: 40rem;
}

/* ── CTAs ────────────────────────────────────────────────────────────────── */

.ioc-sl-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.ioc-sl-cta {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 1.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  /* Radius 0 everywhere (CMS-D-066). */
  border-radius: 0;
  transition: background 0.16s ease-out, color 0.16s ease-out;
}

.ioc-sl-cta--primary {
  background: var(--ioc-sl-accent, #0001ff);
  color: var(--ioc-sl-on-color, #ffffff);
}
.ioc-sl-cta--primary:hover {
  background: var(--ioc-sl-accent-hover, #0000c4);
}

.ioc-sl-cta--secondary {
  border: 1px solid currentColor;
  color: inherit;
}

.ioc-sl-cta:focus-visible,
.ioc-sl-dot:focus-visible {
  outline: 2px solid var(--ioc-sl-accent, #0001ff);
  outline-offset: 2px;
}

.ioc-sl-slide--dark .ioc-sl-cta:focus-visible,
.ioc-sl-slide--dark .ioc-sl-dot:focus-visible {
  outline-color: var(--ioc-sl-border-on-color, #ffffff);
}

/* ── stats ───────────────────────────────────────────────────────────────── */

.ioc-sl-stats {
  display: flex;
  gap: 2rem;
}

.ioc-sl-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ioc-sl-stat-v {
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ioc-sl-accent, #0001ff);
}

.ioc-sl-stat-l {
  font-size: 0.8125rem;
  color: var(--ioc-sl-text-2, #525252);
}

/* ── layout: 01-split ────────────────────────────────────────────────────── */

.ioc-sl-slide[data-layout='01-split'] {
  grid-template-columns: 1fr 1.02fr;
}

.ioc-sl-figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--ioc-sl-border, #e0e0e0);
}

.ioc-sl-figure img,
.ioc-sl-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── layout: 03-media ────────────────────────────────────────────────────── */

.ioc-sl-slide[data-layout='03-media'] {
  padding: 0;
  grid-template-columns: 1fr;
}

.ioc-sl-bleed {
  position: absolute;
  inset: 0;
}

.ioc-sl-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* A left-weighted scrim so overlay text keeps AA contrast over any image. */
  background: linear-gradient(
    90deg,
    var(--ioc-sl-surface-dark, #1c1c1c) 0%,
    transparent 68%
  );
  opacity: 0.86;
}

.ioc-sl-overlay {
  position: relative;
  max-width: 44rem;
  padding: 4.75rem 4rem 6rem;
}

/* ── nav dots ────────────────────────────────────────────────────────────── */

.ioc-sl-nav {
  display: flex;
  gap: 0.25rem;
  padding: 0.75rem 4rem 1.25rem;
  background: var(--ioc-sl-surface-cool, #f2f4f8);
  overflow-x: auto;
}

.ioc-sl-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6875rem;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  color: var(--ioc-sl-text-2, #525252);
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.16s ease-out, color 0.16s ease-out;
}

.ioc-sl-dot:hover {
  border-color: var(--ioc-sl-border, #e0e0e0);
}

.ioc-sl-dot[aria-current='true'] {
  background: var(--ioc-sl-accent, #0001ff);
  color: var(--ioc-sl-on-color, #ffffff);
}

.ioc-sl-dot-name {
  /* Inherits the site body family — a slider never re-declares one. */
  font-size: 0.75rem;
}

/* ── entrance choreography ───────────────────────────────────────────────
   Durations and easing come from the custom properties resolveMotion inlined
   on the mount. `--kd` is the unitless stagger multiplier; `--i` is the item
   index the markup sets on each staggered child. */

.ioc-sl-slide[data-state='active'] [data-anim] {
  animation-duration: var(--lift-dur, 640ms);
  animation-timing-function: var(--ease-in, cubic-bezier(0.22, 1, 0.36, 1));
  animation-fill-mode: both;
}

.ioc-sl-slide[data-state='active'] [data-anim='lift'] {
  animation-name: iocSlLift;
  animation-delay: calc(var(--lift-lead, 260ms) * var(--kd, 1));
}

.ioc-sl-slide[data-state='active'] [data-anim='line'] {
  animation-name: iocSlLine;
  animation-duration: var(--line-dur, 780ms);
  animation-delay: calc(var(--line-lead, 180ms) * var(--kd, 1));
}

.ioc-sl-slide[data-state='active'] [data-anim='unveil'] {
  animation-name: iocSlUnveil;
  animation-duration: var(--unveil-dur, 900ms);
  animation-delay: calc(var(--unveil-lead, 200ms) * var(--kd, 1));
}

.ioc-sl-slide[data-state='active'] [data-anim='pop'] {
  animation-name: iocSlPop;
  animation-delay: calc((var(--data-lead, 420ms) + (var(--i, 0) * 60ms)) * var(--kd, 1));
}

@keyframes iocSlLift {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes iocSlLine {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes iocSlUnveil {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes iocSlPop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── slide transitions ───────────────────────────────────────────────────
   One rule per fx the register can emit (`FX` in layouts.ts). The entering
   slide animates over --enter; the leaving one over --exit. */

.ioc-sl-slide[data-state='active'] {
  animation-duration: var(--enter, 620ms);
  animation-timing-function: var(--ease-in, cubic-bezier(0.22, 1, 0.36, 1));
  animation-fill-mode: both;
}

.ioc-sl-slide[data-state='leaving'] {
  animation-duration: var(--exit, 420ms);
  animation-timing-function: var(--ease-in, cubic-bezier(0.22, 1, 0.36, 1));
  animation-fill-mode: both;
  /* The leaving slide must not swallow clicks meant for the entering one. */
  pointer-events: none;
}

.ioc-sl-slide[data-fx='shutter'][data-state='active'] {
  animation-name: iocSlShutterIn;
}
.ioc-sl-slide[data-fx='shutter'][data-state='leaving'] {
  animation-name: iocSlShutterOut;
}

.ioc-sl-slide[data-fx='rise'][data-state='active'] {
  animation-name: iocSlRiseIn;
}
.ioc-sl-slide[data-fx='rise'][data-state='leaving'] {
  animation-name: iocSlFadeOut;
}

.ioc-sl-slide[data-fx='split'][data-state='active'] {
  animation-name: iocSlSplitIn;
}
.ioc-sl-slide[data-fx='split'][data-state='leaving'] {
  animation-name: iocSlFadeOut;
}

.ioc-sl-slide[data-fx='fade'][data-state='active'] {
  animation-name: iocSlFadeIn;
}
.ioc-sl-slide[data-fx='fade'][data-state='leaving'] {
  animation-name: iocSlFadeOut;
}

.ioc-sl-slide[data-fx='zoom'][data-state='active'] {
  animation-name: iocSlZoomIn;
}
.ioc-sl-slide[data-fx='zoom'][data-state='leaving'] {
  animation-name: iocSlZoomOut;
}

@keyframes iocSlShutterIn {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes iocSlShutterOut {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 100% 0 0);
  }
}
@keyframes iocSlRiseIn {
  from {
    opacity: 0;
    transform: translateY(4%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes iocSlSplitIn {
  from {
    clip-path: inset(50% 0 50% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes iocSlFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes iocSlFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes iocSlZoomIn {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes iocSlZoomOut {
  from {
    opacity: 1;
    transform: scale(0.98);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .ioc-sl-slide {
    padding: 3rem 1.5rem 4rem;
  }
  .ioc-sl-slide[data-layout='01-split'] {
    grid-template-columns: 1fr;
  }
  .ioc-sl-overlay {
    padding: 3rem 1.5rem 4rem;
  }
  .ioc-sl-nav {
    padding: 0.75rem 1.5rem 1rem;
  }
  .ioc-sl-stage {
    min-height: 28rem;
  }
}

@media (max-width: 30rem) {
  .ioc-sl-stats {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
  .ioc-sl-dot-name {
    display: none;
  }
}

/* ── reduced motion ──────────────────────────────────────────────────────
   Not a softening — a kill. Every entrance, transition and ambient drift is
   removed, and the runtime independently disables autoplay and parallax. The
   preference is honoured in three layers because it is easy to claim and hard
   to notice broken. */

@media (prefers-reduced-motion: reduce) {
  .ioc-sl *,
  .ioc-sl-slide,
  .ioc-sl-slide [data-anim] {
    animation: none !important;
    transition: none !important;
  }
  .ioc-sl [data-ambient='drift'] {
    transform: none !important;
  }
}

/* ── layouts 02, 04-15 ───────────────────────────────────────────────────
   One block per layout, in register order. Every colour is a var() with its
   token's literal as the fallback; the ceiling is 0 and the gate enforces it. */

/* 02-statement — centred, four-up stats */
.ioc-sl-slide[data-layout='02-statement'] {
  justify-items: center;
  text-align: center;
}
.ioc-sl-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60rem;
}
.ioc-sl-stats--quad {
  gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* 04-showcase — media + composed preview */
.ioc-sl-slide[data-layout='04-showcase'] {
  grid-template-columns: 0.9fr 1.1fr;
}
.ioc-sl-figure--wide {
  aspect-ratio: 16 / 10;
}

/* 05-convert — copy + governed form mount */
.ioc-sl-slide[data-layout='05-convert'] {
  grid-template-columns: 1fr 0.92fr;
}
.ioc-sl-bullets {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}
.ioc-sl-bullet {
  padding-left: 1.25rem;
  border-left: 2px solid var(--ioc-sl-accent, #0001ff);
  font-size: 0.9375rem;
}
.ioc-sl-col--form {
  padding: 1.5rem;
  background: var(--ioc-sl-surface, #ffffff);
  border: 1px solid var(--ioc-sl-border, #e0e0e0);
  border-top: 3px solid var(--ioc-sl-accent, #0001ff);
}

/* 06-features — capability grid */
.ioc-sl-slide[data-layout='06-features'] {
  grid-template-columns: 0.86fr 1.14fr;
}
.ioc-sl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--ioc-sl-border, #e0e0e0);
  border: 1px solid var(--ioc-sl-border, #e0e0e0);
}
.ioc-sl-card {
  padding: 1.125rem;
  background: var(--ioc-sl-surface, #ffffff);
}
.ioc-sl-card-n {
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--ioc-sl-accent, #0001ff);
}
.ioc-sl-card-t {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
}
.ioc-sl-card-b {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ioc-sl-text-2, #525252);
}

/* 07-results — KPI evidence */
.ioc-sl-slide[data-layout='07-results'] {
  grid-template-columns: 0.82fr 1.18fr;
}
.ioc-sl-stats--kpi {
  flex-wrap: wrap;
  gap: 2rem 3rem;
  margin-bottom: 1.5rem;
}

/* Composed decoration — deterministic bars, never authored data. */
.ioc-sl-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 7.5rem;
}
.ioc-sl-bar {
  flex: 1;
  /* The markup sets a real per-bar height inline; this is the floor for a bar
     that carries none, and it is what lets the gate see the property declared
     (T16 ②c) rather than consumed out of nowhere. */
  --h: 50%;
  height: var(--h, 50%);
  background: var(--ioc-sl-accent, #0001ff);
  opacity: 0.7;
}
.ioc-sl-slide--dark .ioc-sl-bar {
  background: var(--ioc-sl-on-color, #ffffff);
  opacity: 0.5;
}

/* 08-story — case study */
.ioc-sl-slide[data-layout='08-story'] {
  grid-template-columns: 0.8fr 1.2fr;
}
.ioc-sl-attrib {
  margin: 0 0 1.5rem;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ioc-sl-text-2, #525252);
}

/* 09-journey — process timeline */
.ioc-sl-slide[data-layout='09-journey'] {
  grid-template-columns: 1fr;
  align-content: center;
}
.ioc-sl-head {
  max-width: 46rem;
}
.ioc-sl-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
  margin: 0 0 2rem;
  padding: 1.5rem 0 0;
  list-style: none;
  border-top: 2px solid var(--ioc-sl-accent, #0001ff);
}
.ioc-sl-step {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.ioc-sl-step-n {
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6875rem;
  color: var(--ioc-sl-accent, #0001ff);
}
.ioc-sl-step-t {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* 10-collection + 15-careers — adapter-resolved query mounts. Empty until the
   host adapter fills them: an empty region is honest, invented rows are not. */
.ioc-sl-slide[data-layout='10-collection'],
.ioc-sl-slide[data-layout='15-careers'] {
  grid-template-columns: 0.9fr 1.1fr;
}
.ioc-sl-collection,
.ioc-sl-roles {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  min-height: 12rem;
  background: var(--ioc-sl-border, #e0e0e0);
}

/* 11-compare — before / after */
.ioc-sl-slide[data-layout='11-compare'] {
  grid-template-columns: 1fr;
  align-content: center;
}
.ioc-sl-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.ioc-sl-panel {
  margin: 0;
  border: 1px solid var(--ioc-sl-border, #e0e0e0);
}
.ioc-sl-panel img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ioc-sl-panel-l {
  padding: 0.625rem 0.875rem;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ioc-sl-panel--after .ioc-sl-panel-l {
  background: var(--ioc-sl-accent, #0001ff);
  color: var(--ioc-sl-on-color, #ffffff);
}
.ioc-sl-stats--delta {
  gap: 2.5rem;
}

/* 12-video */
.ioc-sl-slide[data-layout='12-video'] {
  padding: 0;
  grid-template-columns: 1fr;
  align-items: end;
}
.ioc-sl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ioc-sl-duration {
  margin: 0 0 1rem;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* 13-proof-wall */
.ioc-sl-slide[data-layout='13-proof-wall'] {
  justify-items: center;
  text-align: center;
}
.ioc-sl-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 2rem;
  align-items: center;
  margin: 0 0 2rem;
  width: 100%;
  max-width: 56rem;
}
.ioc-sl-logo img {
  max-width: 100%;
  height: 1.75rem;
  object-fit: contain;
  /* Mono-tone by contract (the register says mono-tone SVG wordmarks); the
     filter guarantees it even if an editor uploads a colour mark. */
  filter: grayscale(1);
  opacity: 0.75;
}

/* 14-announce */
.ioc-sl-slide[data-layout='14-announce'] {
  grid-template-columns: 1.15fr 0.85fr;
}
.ioc-sl-venue {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  color: var(--ioc-sl-on-inverse-muted, #c6c6c6);
}
.ioc-sl-when {
  display: block;
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ioc-sl-accent, #0001ff);
}

/* 15-careers mosaic */
.ioc-sl-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.ioc-sl-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

/* ── inert-preview note (LOCKED CMS-D-106) ───────────────────────────────────
   The runtime mints this when a preview form is submitted; the copy is the
   decision's exact sentence, so it must read as a deliberate answer, not an
   unstyled default paragraph. */
.ioc-form-inert {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ioc-sl-border, #e0e0e0);
  border-left: 3px solid var(--ioc-sl-accent);
  color: var(--ioc-sl-text-2);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ── responsive, layouts 02-15 ───────────────────────────────────────────── */

@media (max-width: 60rem) {
  .ioc-sl-slide[data-layout='02-statement'],
  .ioc-sl-slide[data-layout='04-showcase'],
  .ioc-sl-slide[data-layout='05-convert'],
  .ioc-sl-slide[data-layout='06-features'],
  .ioc-sl-slide[data-layout='07-results'],
  .ioc-sl-slide[data-layout='08-story'],
  .ioc-sl-slide[data-layout='10-collection'],
  .ioc-sl-slide[data-layout='14-announce'],
  .ioc-sl-slide[data-layout='15-careers'] {
    grid-template-columns: 1fr;
  }
  .ioc-sl-compare {
    grid-template-columns: 1fr;
  }
  .ioc-sl-stats--quad {
    gap: 1.5rem;
  }
}

/* INFOC V6 delta sheet (CMS-D-118 — Wave 3b, WIRING-PLAN.md §3).
 *
 * A SEPARATE, OWNED sheet, third on the `infoc-forms.css`/`infoc-slider.css`
 * precedent — see those files' own headers for why a dedicated sheet exists
 * instead of hand-editing `infoc-cms.css`, which is sha256-pinned
 * (CMS-D-054, P15-PUBLIC-BOUNDARY) and MUST NOT be touched here.
 *
 * WHAT THIS FILE IS FOR. Wave 3 authored 17 new render-kit variants in the
 * kit's EXISTING class vocabulary (SOT 7.1.0 — inheriting the kit's classes,
 * not de-inlining the V6 comps). Most of what they emit already has CSS; this
 * sheet supplies the rest — the classes four task reports named as having
 * ZERO rules anywhere (`.ioc-cta-band`, the whole `.ioc-tabs` surface, the
 * B-11 card-media band, the B-11 row-list layout) plus the one genuinely new
 * domain: Data & AI, the sixth family the V6 pack uses (131 uses) that the
 * pack's own token table never names.
 *
 * TOKEN RULE (T16 ① — literal-hex ceiling ZERO). A hex is allowed ONLY as a
 * custom-property DECLARATION value (`--ioc-on-inverse-blue:#33b1ff`) or inside a
 * `var(--x,#hex)` fallback whose hex value-equals `--x`'s base declaration
 * (T16 ⑨). Every colour this sheet CONSUMES is `var(--ioc-…)`. The token
 * block below is the exact `MINT` list in
 * `apps/one/scripts/v6-extraction/token-map.mjs`, values and roles verbatim.
 *
 * SPECIFICITY RULE. The frozen sheet's `body.ioc-site a{color:inherit;
 * text-decoration:none}` sits at (0,1,2) and beats any single-class
 * component rule — the exact defect `infoc-site-overrides.css` exists to
 * correct for the CANONICAL sheet. Every selector below is prefixed
 * `body.ioc-site` so it clears that bar too, and so an alias-valued custom
 * property (one whose value contains `var(--ioc-…)`) is never declared at
 * `:root`/`html` (T16 ⑦ — it would freeze at its code default and never see
 * the Appearance emitter's `body.ioc-site` overrides).
 *
 * RADIUS is ZERO everywhere (CMS-D-066 r4); the V6 comps carry no
 * `border-radius` at all, so there is nothing to reconcile.
 *
 * SPACING. DESIGN.md's documented scale is 4·8·12·16·24·32·48. The V6 comps
 * are off it (SOT 7.0.0 ⑤) — this sheet uses the scale where a value is
 * genuinely free (gaps, small paddings) and accepts the rest as measured
 * debt: `apps/one/gate/spacing-ratchet.json`'s `v6CssOffScaleCeiling` is a
 * DEDICATED, separate, shrink-only ceiling for exactly this file, because
 * T17's three scan roots (apps/one/src, packages/ui/src,
 * packages/render-sharp/src) never reach `packages/render-kit/assets` — see
 * `scripts/spacing-gate.mjs`'s own SCAN-SCOPE RULING for why that root is
 * excluded (a second ratchet has no business opining on the CMS-D-054
 * render-kit contract) and why this file gets its own ceiling instead of
 * silently going unmeasured (SOT 7.0.0 ⑤: "the debt is MEASURED", not
 * hidden by scan-root selection).
 */

/* ============================================================
   A · Tokens — CMS-D-118 ③/WIRING.md §3.4, the deferred W1 vocabulary.
   A token lands HERE ONLY WITH ITS CONSUMER, never before it — that is
   exactly why the wider MINT list in
   `apps/one/scripts/v6-extraction/token-map.mjs` was deferred out of Wave 1
   in the first place (an emitted/declared token nothing consumes is the
   CMS-D-081 dangling-store defect in token form, and T16 ②b now scans this
   sheet for exactly that — see the `sheets` note in
   `scripts/appearance-gate.mjs`). Every token below is consumed by a rule
   in this same file; token-map.mjs's remaining MINT entries
   (`--ioc-fam-solutions-tint`/`-mid`, `--ioc-fam-support-tint`/`-mid`,
   `--ioc-fam-talents-tint`/`-mid`, `--ioc-on-inverse-purple`,
   `--ioc-on-inverse-green`, `--ioc-warning`/`-deep`/`-tint`) are NOT
   declared here — no required-CSS item from the four Wave-3 task reports
   names a concrete consumer for them, and re-declaring them without one
   would reproduce the Wave 1 problem one wave later (task-5-report.md,
   fix round 1). They stay in token-map.mjs, unclaimed, for whichever later
   task's required-CSS actually needs one.
   ============================================================ */
body.ioc-site{
  /* RETIRED by CMS-D-168: `--ioc-fam-data` / `-tint` / `-mid`. They were the
     sixth family, minted here because the V6 pack used #7a3ffc 131 times and
     its own token table never declared it. `dat` now resolves to house blue,
     so all three lost their last consumer and a declared colour token with no
     `var()` consumer is the T16 (2)b orphan the gate refuses. The pack's usage
     is unchanged history; the SITE simply stopped painting it. */

  /* On-inverse blue. The pack sets this over #000000 bands, where the base
     family accents (incl. house blue) fail contrast (token-map.mjs) — the
     general-purpose step (31 uses, incl. the wordmark C on ink). Consumed
     in §H for the dark CTA band's kicker rule and in §I for the tabs' ink
     answer panel. */
  --ioc-on-inverse-blue:#33b1ff;

  /* On-inverse green + purple — minted 2026-08-17 WITH their first consumer
     (§S: the hero figure's ink caption tag, family-scoped), per this
     section's own landing rule. Values are token-map.mjs's measured pack
     steps (green 3 uses "Talents text on ink", purple 5 uses "Data & AI
     text on ink" — the pack also paints Academy tags with it, e.g.
     Talents.dc.html:222's green ↔ Academy's purple sibling). */
  --ioc-on-inverse-green:#3fdba0;
  --ioc-on-inverse-purple:#be95ff;

  /* The platform cross-section's six strata grounds (§T, Home-standalone
     2026-08-17 revision): stratum one is house blue; two→six step down
     through the revision's own near-blacks. Minted WITH their consumer. */
  /* ONE ground for layers two→six (§T2). It was five tokens (#1c1c22 ·
     #17171c · #131317 · #101013 · #0c0c0f), transcribed from the 2026-08-17
     revision as a descending six-step scale. §T2 retires four and keeps this
     value, the middle step: MEASURED, the scale separated adjacent bands by
     1.053 / 1.027 / 1.016 / 1.027 : 1 and all five steps together by 1.129:1
     — under one JND, so it rendered as a single slab and bought less
     separation than the 1px hairline that replaces it. Retired WITH their
     consumer, the way they were minted. */
  --ioc-stratum:#17171c;

  /* Muted text on the INK BAND (`--ioc-g100`), the step this sheet used to
     spell as the kit's fixed `--ioc-g30`. The value here is that same #c6c6c6
     — this declaration is the code-owned default for a page rendered without
     the Appearance token block; the emitter
     (`packages/standard/src/site/typography.ts`) overrides it per skin at
     `body.ioc-site`, which is what makes it survive the `dark` skin, where
     `ink` is #f4f4f4 and #c6c6c6 on it is 1.55:1. NOT
     `--ioc-text-on-inverse-muted`: that name is already bound to the FIXED
     `--ioc-surface-inverse-raised` (#1c1c1c) ground by infoc-slider.css, and
     per-skin values that fix this band would break that one. Consumed in §H
     (dark CTA band lead) and §I (current tab's secondary line). */
  --ioc-text-on-ink-muted:#c6c6c6;
}

/* ============================================================
   B · Data & AI route-family colour (B-11's per-card accent).
   `.ioc-cards [data-route-fam]` already ships the whole mechanism —
   border-top, eyebrow/cardicon/card-link tint, hover, focus-visible,
   reduced-motion (infoc-cms.css:1648-1661) — for codes
   sol/aca/tal/sup/com/ind/tec/ins. "dat" is the one genuinely new code
   (task-1-report.md, fix round 1); this follows that shape exactly and
   adds nothing else — the shared descendant rules pick "dat" up for free.
   ============================================================ */
/* CMS-D-168 - `dat` FOLDS INTO HOUSE BLUE. Owner-directed 2026-08-20. Data &
   AI is a SERVICE AREA, not a destination with its own gateway, and its
   #7a3ffc sat 40 degrees from Academy's #6929c4 - two purples on one page
   read as an accident rather than a system. The key stays in the register
   and resolves explicitly to blue rather than being deleted: CMS-D-130 warns
   that an UNKNOWN key silently paints the page accent and "looks
   deliberate", so an explicit mapping is the difference between a decision
   and a fall-through nobody can audit. 6 live cards. */
body.ioc-site .ioc-cards [data-route-fam="dat"]{--rf:var(--ioc-blue);--rfi:var(--ioc-blue)}

/* ============================================================
   C · Data page-family accent (Section A: "[data-page-family=\"Data\"] —
   missing, so Data pages get no family accent"). Mirrors the Academy/
   Talents Gateway PAGE-WIDE pattern (infoc-cms.css:1111-1112) rather than
   the lesser .ioc-fam-scoped Industries/Company one — task-2-report.md's
   flagged gap is the HERO's `.ioc-hero h1 .em{color:var(--ioc-accent)}`,
   which lives outside .ioc-fam, so the page-wide form is the one that
   actually closes the gap.
   ============================================================ */
/* --ioc-accent-hover deliberately NOT overridden here (fix round 1): Academy/
   Talents each override it with a DEDICATED darker-hover token
   (--ioc-fam-academy-hover/--ioc-fam-talents-hover) token-map.mjs does not
   mint one for Data, and setting it to the same value as --ioc-accent would
   make the hover state visually identical to rest — worse than the
   inherited house default (--ioc-accent-hover:#0000c4, infoc-cms.css:25),
   which Data pages now fall through to. */
/* .ioc-fam already computes its background from --ioc-accent via
   color-mix() (infoc-cms.css:1121) — this refines the Data closing band to
   the pack's own authored tint/rule steps instead of the generic algorithmic
   mix, the same two-tone "tinted panel + rule" shape token-map.mjs's role
   text describes for every family's tint/mid pair. */

/* ============================================================
   D · B-11-V17 card media band + description (task-1-report.md required
   CSS: .ioc-card-media, .ioc-card-body, .ioc-card-d). The whole card is an
   <a class="ioc-card" data-route-fam="…">; .ioc-card already ships
   display:flex/flex-direction:column and its hover/anchor-reset (kit
   body.ioc-site a{color:inherit;text-decoration:none} already handles the
   link), so this only adds the media band and re-flows the body padding
   that .ioc-card normally carries on its own root element.
   ============================================================ */
/* `:not(:empty)` — B-11-V21 renders the band element on EVERY card and lets
   an unfilled slot collapse (rule ⑥ below); a text card whose empty band
   still zeroed the padding would lose its whole inset. V17 bands are always
   filled, so this narrowing changes nothing for them. */
body.ioc-site .ioc-card:has(.ioc-card-media:not(:empty)){padding:0}
body.ioc-site .ioc-card-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ioc-g20)}
body.ioc-site .ioc-card-media img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);display:block;transition:transform .3s var(--ioc-ease)}
body.ioc-site a.ioc-card:hover .ioc-card-media img{transform:scale(1.04)}
/* A destination-less cell in a full-anchor card grid must not read or act as
   a link: the template always emits the <a>, and an empty store href renders
   `#` — the BC "Why" grid seeds six such cells, which the comp
   (SolutionBusinessCentral.dc.html §why) draws as plain DIVs. Same family as
   `.ioc-card-link[href="#"]{display:none}`: the element stays for the grid,
   the interaction goes (no pointer cursor, no dead scroll-to-top click). */
body.ioc-site a.ioc-card[href="#"]{pointer-events:none;cursor:default}
body.ioc-site .ioc-card-body{padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;flex:1;min-width:0}
/* Sizing only — colour deliberately omitted so the kit's existing
   `.ioc-cards [data-route-fam] .ioc-cardicon{color:var(--rfi)}`
   (infoc-cms.css:1658) keeps driving the per-family tint; a colour here
   would out-specificity that rule (one more element selector on an
   otherwise-tied class count) and repaint every family the same. */
body.ioc-site .ioc-card-body .ioc-cardicon{width:26px;height:26px;display:block;margin-bottom:16px}
body.ioc-site .ioc-card-body strong{display:block;font-size:clamp(17px,1.4vw,20px);font-weight:700;letter-spacing:-.015em;margin-bottom:8px;color:var(--ioc-text-primary)}
body.ioc-site .ioc-card-d{display:block;margin:0;color:var(--ioc-text-secondary);font-size:14.5px;line-height:1.55;flex:1}
body.ioc-site a.ioc-card .ioc-card-body .ioc-card-link{margin-top:16px}

/* ============================================================
   E · B-11-V17 header link (task-1-report.md: .ioc-head-link — the
   top-right "All solutions" style link that replaces .ioc-sh-lead in this
   one variant). .ioc-head is already a 2-column grid, align-items:end
   (infoc-cms.css:1146) — the link is the 2nd grid child, so it already
   lands bottom-right; this only styles the link itself.
   ============================================================ */
body.ioc-site .ioc-head-link{justify-self:end;align-self:end;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ioc-accent-ink,var(--ioc-accent));white-space:nowrap}
body.ioc-site .ioc-head-link svg{width:16px;height:16px;transition:transform .18s var(--ioc-ease)}
body.ioc-site .ioc-head-link:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-head-link:hover svg{transform:translateX(4px)}
body.ioc-site .ioc-head-link:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:2px}

/* ============================================================
   F · B-11-V16 row-list layout (task-1-report.md required CSS:
   .ioc-cards.is-rows, .ioc-cards.is-rows .ioc-card, .ioc-card-code).
   layout_01's ONLY sanctioned value is " is-rows" (fix round 1 — grid_01
   stays column-count-only). Item order in the markup is eyebrow (group
   label) → title+code → body → link, which is also the left-to-right
   reading order this row layout wants.
   ============================================================ */
body.ioc-site .ioc-cards.is-rows{display:flex;flex-direction:column}
body.ioc-site .ioc-cards.is-rows .ioc-card{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:24px;row-gap:4px;padding:24px}
body.ioc-site .ioc-cards.is-rows .ioc-card-eyebrow{flex:0 0 11rem;margin:0}
body.ioc-site .ioc-cards.is-rows .ioc-card h3{flex:1 1 18rem;margin:0;display:flex;align-items:baseline;gap:12px;font-size:17px}
body.ioc-site .ioc-cards.is-rows .ioc-card p{flex:2 1 22rem;margin:0}
body.ioc-site .ioc-cards.is-rows .ioc-card-link{flex:0 0 auto;margin:0}
body.ioc-site .ioc-card-code{display:inline-block;margin-left:8px;font-family:var(--ioc-mono);font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--ioc-text-helper);border:1px solid var(--ioc-border-subtle);padding:4px 8px}
@media(max-width:760px){
  body.ioc-site .ioc-cards.is-rows .ioc-card{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   G · B-13 step-icon sizing (task-3-report.md required CSS: .ioc-step-n
   svg — "an unsized svg in a flex row expands to fill", WIRING.md §5.3).
   B-13-V07/V08's item template already carries explicit width="17"
   height="17" HTML attributes as a belt-and-braces guard; this is the
   matching CSS rule so the sizing holds even where the HTML attribute
   would be overridden by a future generic `svg{width:…}` rule. Colour is
   inherited (currentColor from .ioc-step-n's own
   color:var(--ioc-accent)/var(--ioc-accent-on-inverse), already set by the
   kit) — no new declaration needed.
   ============================================================ */
body.ioc-site .ioc-step-n svg{width:17px;height:17px;flex:none;display:inline-block;vertical-align:middle;margin-left:8px}

/* ============================================================
   H · B-06 closing CTA band (task-3-report.md required CSS: .ioc-cta-band
   and its tone_01 modifiers, .ioc-cta-copy, .ioc-cta-lead — zero rules
   anywhere before this sheet). Not the R5 head shape: kicker+H2+lead are
   one stacked block on the left, actions on the right, no meta line
   (task-3-report.md).
   ============================================================ */
body.ioc-site .ioc-cta-band{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px);background:var(--ioc-surface,#fff);border-top:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
body.ioc-site .ioc-cta-copy{min-width:0;max-width:44rem}
body.ioc-site .ioc-cta-lead{margin:12px 0 0;font-size:clamp(15px,1.1vw,17px);line-height:1.55;color:var(--ioc-text-secondary);max-width:52ch}
body.ioc-site .ioc-cta-lead b{font-weight:700;color:var(--ioc-text-primary)}
body.ioc-site .ioc-cta-band .ioc-actions{flex:none;margin-top:0}
/* tone_01 modifiers — the same three suffixes .ioc-block already supports
   (infoc-cms.css:1138-1143), reproduced here because .ioc-cta-band is not
   .ioc-block and inherits none of it. */
body.ioc-site .ioc-cta-band.tight{padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(48px,5vw,72px)}
body.ioc-site .ioc-cta-band.soft{background:var(--ioc-g10)}
/* THE `dark` MODIFIER NAMES A TOKEN, NOT A BRIGHTNESS. Its ground is
   `--ioc-g100`, which is the skin's `ink` FIELD — and on the `dark` skin that
   value is #f4f4f4, a LIGHT band. So the four rules below used to pair
   fixed-white `--ioc-text-on-color` (1.10:1) and fixed-grey `--ioc-g30`
   (1.55:1) with it: near-invisible text on a selectable skin, latent only
   because the site ships `v6`. They now read the two INVERTING roles —
   `--ioc-text-on-primary` (the emitter's #161616-on-dark / #ffffff-otherwise
   step, the same substitution HOME-FIX-PLAN F31 made for the current tab in
   §I) and `--ioc-text-on-ink-muted` (§A, minted here because the perfect name
   `--ioc-text-on-inverse-muted` is already bound to the slider's FIXED
   #1c1c1c ground). Measured on all four skins, strong / muted:
   light 18.10 / 10.59 · dark 16.45 / 7.10 · high-contrast 21.00 / 12.29 ·
   v6 21.00 / 12.29 — where before, dark read 1.10 / 1.55.
   T16 ⑥ CANNOT SEE THIS: it resolves both tokens to #ffffff/#c6c6c6 from the
   stylesheet, because that is what the stylesheet statically says. The net is
   `packages/standard/tests/site-skin-contract.spec.ts`, which carries both the
   per-skin value pairs AND a rule-level assertion that these four selectors
   name a skin-aware role — so a revert of the line below fails a test that
   names it, which is the mutation proof this fix was accepted on. */
body.ioc-site .ioc-cta-band.dark{background:var(--ioc-g100);color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-cta-band.dark .ioc-cta-lead{color:var(--ioc-text-on-ink-muted,#c6c6c6)}
body.ioc-site .ioc-cta-band.dark .ioc-cta-lead b{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-cta-band.dark .ioc-kicker{color:var(--ioc-text-on-primary,#fff)}
/* --ioc-accent (house blue) fails contrast on #000000 — the exact case the
   on-inverse ladder exists for (token-map.mjs). The kicker's leading rule
   is decorative (an empty ::before bar), not text, but the same ink-band
   substitution keeps every accent-coloured mark on this band legible. */
body.ioc-site .ioc-cta-band.dark .ioc-kicker::before{background:var(--ioc-on-inverse-blue)}
@media(max-width:700px){
  body.ioc-site .ioc-cta-band .wrap{flex-direction:column;align-items:flex-start}
  body.ioc-site .ioc-cta-copy{max-width:none}
}

/* ============================================================
   I · B-10 tab surface (task-4-report.md required CSS — the whole class
   list, zero rules anywhere before this sheet). Two layouts share the
   .ioc-tabs-tab/.ioc-tabs-tags/.ioc-tabs-list vocabulary:
     V09 "grid-strip"  — .ioc-tabs-list (4-col grid) → .ioc-tabs-body
                         (answer panel + links aside, 2-col).
     V10 "sidebar"     — .ioc-tabs.sidebar → .ioc-tabs-list (vertical) +
                         .ioc-tabs-panel (role detail + stage timeline).
   Fix report I2 (final whole-branch review): this WAS role="tab" +
   aria-selected="true|false" on .ioc-tabs-tab and role="tablist"/
   "tabpanel" on the surrounding wrappers — a false ARIA widget, because no
   tab-swap JS is authored anywhere in this repo (infoc-runtime.js:320 bails
   the moment panels.length !== tabs.length, which V09's 4-tab/1-panel and
   V10's 6-tab/1-panel both trip), so 4/6 focusable buttons were announced
   as a working tablist that did nothing on activation (WCAG 4.1.2/2.1.1).
   The ONLY state that was ever real is which button renders as visually
   "current" in the static default markup, so that is now a plain
   presentational class (`.is-active`, first button only, never toggled) —
   honest static content, no impersonated widget, and the visual design is
   unchanged. If real tab-swap JS is ever authored, it must toggle the
   ARIA attributes it (re)introduces, not just this class.

   CMS-D-118 / HOME-FIX-PLAN F9-F11: real tab-swap now exists for the Home
   surface — B-10-V20 emits `data-tabs` + one `[role="tabpanel"]` per
   `[role="tab"]`, which is exactly the shape `enhanceTabs` refuses to bail
   on, so the runtime drives `aria-selected`, roving `tabIndex` and
   `panel.hidden` on click and on ArrowRight/Left/Up/Down/Home/End. That
   makes I2's premise ("no tab-swap JS is authored anywhere") false for V20
   and only V20. So each active-tab rule below now carries a SECOND
   selector, `[aria-selected="true"]` — the attribute the runtime actually
   toggles — at the same specificity as its `.is-active` twin. The
   `.is-active` half is NOT deleted: V07 (/talents) and V10 (/academy) are
   still static and still carry that class, and dropping it would silently
   un-highlight their current tab. Read the pair as "current tab", however
   the variant states it. `.ioc-tabs-body[hidden]` is the matching trap:
   `hidden` is a UA `display:none`, so the author `display:grid` on that
   class OUTRANKS it and all four panels would paint at once.

   HOME-FIX-PLAN F31 — THE TWO GROUNDS WERE EXACTLY INVERTED. Home.dc.html
   paints the CURRENT tab INK (`fill.style.background = '#000000'` +
   `inset 0 -4px 0 #0001ff`, :573-575) and the answer panel HOUSE BLUE
   (`data-grid="answer" … background:#0001ff;color:#ffffff`, :278). This
   sheet had them the other way round: blue tab, `--ioc-g100` panel.

   THE SWAP IS APPLIED TO `[aria-selected="true"]` ONLY, and the `.is-active`
   half deliberately KEEPS the blue fill. That is not an oversight, it is the
   scope F31 asks for ("Home only"), enforced by the manifest rather than by a
   page selector: `aria-selected` appears in exactly ONE B-10 template,
   B-10-V20 (Home). V09 (unused by any page) and V10 (/academy) carry only
   `.is-active`, and /academy's own comp (Academy.dc.html:695) paints its
   selected sidebar tab `#ffffff` — neither blue nor ink — so re-pointing
   `.is-active` at ink here would invent a third treatment for a page no
   Tier-3 fix covers. Read the pair as "current tab, however the variant
   states it"; read the DIVERGENCE as "two variants, two comps".

   Every colour below resolves to a token whose contrast pair is declared in
   `scripts/appearance-gate.mjs` T16 ⑥ — the ink-ground marks reuse the
   `--ioc-text-on-color`/`--ioc-g30` on `--ioc-g100` rows, the blue-ground
   marks reuse the `--ioc-text-on-color`/`--ioc-text-on-brand-soft`/
   `--ioc-text-on-brand-muted` on `--ioc-blue` rows, and the two genuinely
   new pairings (`--ioc-g10` on blue, `--ioc-blue` on the white CTA fill) are
   ADDED to that table in the same commit. `--ioc-on-inverse-blue` moves OFF
   the answer kicker because it is a 4.08:1 pair on house blue: it was chosen
   for an INK ground and does not survive the swap.

   ONE TOKEN CHOICE IS NOT THE OBVIOUS ONE, and it was decided by a failing
   test rather than by taste. The white marks on the CURRENT tab, and the
   knocked-out CTA fill inside the blue panel, read `--ioc-text-on-primary`,
   not the `--ioc-text-on-color` the rest of this sheet uses for white-on-fill.
   `--ioc-text-on-color` is a FIXED `#ffffff` kit constant; T16 ⑥ resolves both
   to `#ffffff` from the stylesheet and cannot tell them apart. The skins can:
   `--ioc-g100` is the skin's `ink`, and on the `dark` skin ink is #f4f4f4 —
   so fixed white on it is 1.10:1, and the primary-on-white CTA is 2.35:1.
   `--ioc-text-on-primary` is the emitter's INVERTING step (#161616 on dark,
   #ffffff otherwise), which clears AA on all four skins (15.9 / 21 / 21 / 21
   for the tab; 7.68 / 8.59 / 8.59 / 12.6 for the CTA). Both failures were
   found by adding the pairs to `packages/standard/tests/site-skin-contract.
   spec.ts` BEFORE the rules were considered finished — the same file, and the
   same mechanism, that caught the black-on-black footer at F15.
   THE ONE F31 LEFT OPEN IS NOW CLOSED. F31 reported that the muted line on the
   current tab kept `--ioc-g30`, skin-blind in exactly the same way (1.55:1 on
   `dark`), because it was the ink-band convention §H shipped and
   re-vocabularising §H was another fix's surface. That fix is the one directly
   above: §H now routes the ink band through `--ioc-text-on-primary` and the new
   `--ioc-text-on-ink-muted`, and the two `[aria-selected="true"]` muted runs
   below follow it. Neither is a redesign — on the three non-dark skins the
   emitted value is #c6c6c6, byte-identical to the `--ioc-g30` it replaces.
   ============================================================ */

/* -- shared tab-button/tag vocabulary, both layouts -- */
body.ioc-site .ioc-tabs-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(20px,2vw,26px);background:var(--ioc-surface,#fff);border:0;margin:0;text-align:left;font-family:var(--ioc-sans);cursor:pointer;transition:background .18s var(--ioc-ease)}
body.ioc-site .ioc-tabs-tab:hover{background:var(--ioc-g10)}
body.ioc-site .ioc-tabs-tab:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:-3px}
/* .is-active — V09/V10's static "current" tab, blue fill, UNCHANGED. */
body.ioc-site .ioc-tabs-tab.is-active{background:var(--ioc-accent)}
/* [aria-selected="true"] — B-10-V20 (Home) only. Ink fill + the comp's 4px
   house-blue seat rule (Home.dc.html:574 `inset 0 -4px 0 #0001ff`). */
body.ioc-site .ioc-tabs-tab[aria-selected="true"]{background:var(--ioc-g100);box-shadow:inset 0 -4px 0 var(--ioc-blue)}
body.ioc-site .ioc-tabs-tab-ic{width:24px;height:24px;flex:none;color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tabs-tab.is-active .ioc-tabs-tab-ic{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-tabs-tab[aria-selected="true"] .ioc-tabs-tab-ic{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-tabs-tab strong{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-tabs-tab.is-active strong{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-tabs-tab[aria-selected="true"] strong{color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-tabs-tab>span{font-size:13px;line-height:1.45;color:var(--ioc-text-secondary)}
body.ioc-site .ioc-tabs-tab.is-active>span{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
/* On the ink fill the on-BRAND step is the wrong ladder; the comp writes
   `rgba(255,255,255,.78)` over #000000 (Home.dc.html:577), which composites to
   #c7c7c7 — `--ioc-g30` (#c6c6c6) to within one step. The token spelled here is
   `--ioc-text-on-ink-muted`, whose non-dark value IS that #c6c6c6, so the comp
   is still what renders; what changes is the `dark` skin, where the ink fill is
   #f4f4f4 and the fixed grey read 1.55:1. Same substitution as §H's lead. */
body.ioc-site .ioc-tabs-tab[aria-selected="true"]>span{color:var(--ioc-text-on-ink-muted,#c6c6c6)}
body.ioc-site .ioc-tabs-cue{margin-top:4px;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tabs-tab.is-active .ioc-tabs-cue{color:var(--ioc-text-on-brand-soft,#e5e5ff)}
/* Home.dc.html:579 — the cue goes flat #ffffff on the current tab. */
body.ioc-site .ioc-tabs-tab[aria-selected="true"] .ioc-tabs-cue{color:var(--ioc-text-on-primary,#fff)}

body.ioc-site .ioc-tabs-tags{display:flex;flex-wrap:wrap;gap:8px}
body.ioc-site .ioc-tabs-tags i{font-style:normal;font-family:var(--ioc-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border:1px solid var(--ioc-border-subtle);color:var(--ioc-text-secondary)}

body.ioc-site .ioc-tabs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:4px}
body.ioc-site .ioc-tabs-actions-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ioc-text-primary)}
body.ioc-site .ioc-tabs-actions-link svg{width:15px;height:15px;color:var(--ioc-accent-ink,var(--ioc-accent));transition:transform .18s var(--ioc-ease)}
body.ioc-site .ioc-tabs-actions-link:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tabs-actions-link:hover svg{transform:translateX(4px)}
body.ioc-site .ioc-tabs-actions-link:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:2px}

/* -- V09 grid-strip layout -- */
body.ioc-site .ioc-tabs-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-tabs-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,20rem);gap:1px;background:var(--ioc-border-subtle);border:1px solid var(--ioc-border-subtle);border-top:0}
/* B-10-V20 renders one .ioc-tabs-body PER tab and the runtime hides the three
   that are not current. `hidden` is only a UA `display:none`, so the author
   rule above wins on specificity and every panel would paint — this is the
   rule that makes `hidden` mean hidden again. */
body.ioc-site .ioc-tabs-body[hidden]{display:none}

/* The answer panel. HOUSE BLUE since F31 (Home.dc.html:278) — see the section
   header for why, and for why every mark below moved onto an on-BRAND step. */
body.ioc-site .ioc-tabs-answer{position:relative;background:var(--ioc-blue);color:var(--ioc-text-on-color,#fff);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:16px;overflow:hidden}
/* comp: #ffffff at opacity .8 over #0001ff = #ccccff. --ioc-on-inverse-blue
   (#a3adff), which this rule used to carry, is 4.08:1 here — an ink-ground
   token on a blue ground. --ioc-text-on-brand-muted (#d0d0ff) is the step the
   ladder actually provides for this pairing, and T16 ⑥ already pins it. */
body.ioc-site .ioc-tabs-answer-k{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-on-brand-muted,#d0d0ff)}
body.ioc-site .ioc-tabs-answer h3{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.015em;color:var(--ioc-text-on-color,#fff)}
/* comp: #ffffff at opacity .92 = #ebebff; --ioc-text-on-brand-soft is the step. */
body.ioc-site .ioc-tabs-answer p{margin:0;color:var(--ioc-text-on-brand-soft,#e5e5ff);font-size:14.5px;line-height:1.6}
/* comp chip: border rgba(255,255,255,.22), the SAME alpha rule §L already uses
   for the hero panel's on-blue underline. --ioc-g70 was an ink-ground border
   and reads as mud on blue. */
body.ioc-site .ioc-tabs-answer .ioc-tabs-tags i{border-color:rgba(255,255,255,.22);color:var(--ioc-g10)}
/* THE CASCADE TRAP THIS SECTION EXISTS TO AVOID: `.btn-primary` is house blue
   on white (infoc-cms.css:245), so leaving it alone paints a blue button on a
   blue panel — invisible. The comp inverts it (Home.dc.html:283:
   `background:#ffffff;color:#0001ff`, hover `#0000c4`). The harvested
   `body.ioc-site .btn-primary{color:…}` in the generated correction layer is
   (0,2,1); this is (0,3,1) and wins. */
body.ioc-site .ioc-tabs-answer .btn-primary{align-self:flex-start;background:var(--ioc-text-on-primary,#fff);color:var(--ioc-blue)}
body.ioc-site .ioc-tabs-answer .btn-primary:hover{background:var(--ioc-text-on-primary,#fff);color:var(--ioc-blue-hover);box-shadow:none}
body.ioc-site .ioc-tabs-answer-fig{position:relative;margin-top:auto;min-height:9rem;background:var(--ioc-g90);overflow:hidden}
body.ioc-site .ioc-tabs-answer-fig img{width:100%;height:100%;object-fit:cover;display:block}

/* -- F31, second half: the two-column answer panel (B-10-V20 only) --
   Home.dc.html:278-288 is `display:grid;grid-template-columns:1.15fr .85fr`
   with the copy in a padded left cell and the image as the right cell at
   `min-height:320px`. The copy needed a wrapper the template did not have, so
   B-10-V20's `templateHtml` gained `<div class="ioc-tabs-answer-body">` around
   the kicker→CTA run in this same commit; `.ioc-tabs-answer-fig` is now its
   SIBLING, not the last flex child.
   `:has(>.ioc-tabs-answer-body)` keys the grid off that wrapper instead of the
   class itself so B-10-V09 — which shares `.ioc-tabs-answer` and is bound to
   no page today — keeps the single-column flex layout it was authored for
   rather than silently breaking the day someone picks it in admin.
   `grid-template-columns`/`min-height` are not spacing properties (T17 §N
   ruling), so 1.15fr/.85fr and 320px stay verbatim; the comp's
   `padding:36px 34px 38px` snaps to the 4/8/12/16/24/32/48 scale as 32px on
   all four sides, and `min-height:66px` on the h3 (which the comp sets so the
   panel does not jump between symptoms) is likewise not a spacing property. */
body.ioc-site .ioc-tabs-answer:has(>.ioc-tabs-answer-body){display:grid;grid-template-columns:1.15fr .85fr;padding:0;gap:0}
body.ioc-site .ioc-tabs-answer-body{min-width:0;padding:32px;display:flex;flex-direction:column;gap:16px}
body.ioc-site .ioc-tabs-answer-body h3{font-size:29px;line-height:1.12;letter-spacing:-.03em;min-height:66px}
body.ioc-site .ioc-tabs-answer-body p{flex:1}
body.ioc-site .ioc-tabs-answer:has(>.ioc-tabs-answer-body)>.ioc-tabs-answer-fig{margin-top:0;min-height:320px}

body.ioc-site .ioc-tabs-links{background:var(--ioc-surface,#fff);padding:clamp(24px,2.4vw,30px);display:flex;flex-direction:column}
body.ioc-site .ioc-tabs-links-k{font-family:var(--ioc-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:8px}
body.ioc-site .ioc-tabs-links a{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:14.5px;font-weight:600;color:var(--ioc-text-primary);border-top:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-tabs-links a:first-of-type{border-top:0}
body.ioc-site .ioc-tabs-links a svg{width:15px;height:15px;flex:none;color:var(--ioc-accent-ink,var(--ioc-accent));transition:transform .18s var(--ioc-ease)}
body.ioc-site .ioc-tabs-links a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-tabs-links a:hover svg{transform:translateX(4px)}
body.ioc-site .ioc-tabs-links a:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:2px}

@media(max-width:900px){
  body.ioc-site .ioc-tabs-body{grid-template-columns:1fr}
  /* Home.dc.html:53 collapses `router` and `answer` together (at its own
     1080px outlier — D4 keeps the repo's breakpoints, so this rides the 900px
     the router already uses in this sheet rather than adding a third value). */
  body.ioc-site .ioc-tabs-answer:has(>.ioc-tabs-answer-body){grid-template-columns:1fr}
}
@media(max-width:760px){
  body.ioc-site .ioc-tabs-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  body.ioc-site .ioc-tabs-list{grid-template-columns:1fr}
}

/* -- V10 sidebar layout (additive — .ioc-tabs.sidebar, hardcoded literally
   per fixedInterior, matching the B-17-V08 "class=\"ioc-block soft\""
   precedent, not a bound attr) -- */
body.ioc-site .ioc-tabs.sidebar{display:grid;grid-template-columns:minmax(14rem,18rem) minmax(0,1fr);border:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-list{display:flex;flex-direction:column;grid-template-columns:none;gap:0;background:transparent;border:0;border-right:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab{flex-direction:row;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab:last-child{border-bottom:0}
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab>span{font-size:14.5px;font-weight:600;color:inherit}
/* SPLIT, because the two halves of this pair sit on DIFFERENT grounds and only
   one of them is skin-safe with fixed white. `.is-active` is the accent fill
   (:312) — white is the family-accent convention there. `[aria-selected="true"]`
   is the INK fill (:315), where fixed white is the 1.10:1 `dark`-skin failure §H
   documents; it takes the inverting role like every other ink-ground mark in
   this section. Doubly latent today (no B-10 sidebar template emits
   `aria-selected` — only B-10-V20 does, and that is the grid-strip layout), so
   this is the pattern being closed rather than a rendering being repaired. */
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab.is-active>span{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab[aria-selected="true"]>span{color:var(--ioc-text-on-primary,#fff)}

body.ioc-site .ioc-tabs-panel{padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:16px}
body.ioc-site .ioc-tabs-panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
body.ioc-site .ioc-tabs-panel-head h3{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.015em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-tabs-panel>p{margin:0;color:var(--ioc-text-secondary);font-size:14.5px;line-height:1.6}

body.ioc-site .ioc-tabs-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
body.ioc-site .ioc-tabs-stage{display:flex;flex-direction:column;gap:8px}
body.ioc-site .ioc-tabs-stage-bar{display:block;height:3px;background:var(--ioc-border-subtle);position:relative;overflow:hidden}
body.ioc-site .ioc-tabs-stage-bar::after{content:"";position:absolute;inset:0 auto 0 0;background:var(--ioc-accent)}
/* data-fill is a CLOSED set (25%/50%/75%/100% — the only values
   B-10-V10's defaultContent ever populates); attr() as a length value has
   no reliable cross-browser support, so this is four explicit rules
   against the exact known values rather than a live attr() read. */
body.ioc-site .ioc-tabs-stage-bar[data-fill="25%"]::after{width:25%}
body.ioc-site .ioc-tabs-stage-bar[data-fill="50%"]::after{width:50%}
body.ioc-site .ioc-tabs-stage-bar[data-fill="75%"]::after{width:75%}
body.ioc-site .ioc-tabs-stage-bar[data-fill="100%"]::after{width:100%}
body.ioc-site .ioc-tabs-stage-k{font-family:var(--ioc-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper)}
body.ioc-site .ioc-tabs-stage strong{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-tabs-stage>span{font-size:13px;line-height:1.5;color:var(--ioc-text-secondary)}

@media(max-width:900px){
  /* `minmax(0,1fr)`, NOT a bare `1fr` — the §Y trap, third instance. A `1fr`
     track's automatic minimum size is `auto` (its content's min-content), not
     zero (CSS Grid §7.2.3), so the single collapsed track grows to whatever
     the tab strip's widest tab demands. Measured on /academy at a 320px
     viewport: this track computed 331.031px inside a 256px content box and
     set documentElement.scrollWidth to 364 — the page's largest single
     contributor to a real two-directional scroll. `minmax(0,1fr)` drops the
     track to 254px. Nothing else changes: the two sizes differ ONLY when
     content exceeds the track, which is exactly the failing case. */
  body.ioc-site .ioc-tabs.sidebar{grid-template-columns:minmax(0,1fr)}
  body.ioc-site .ioc-tabs.sidebar .ioc-tabs-list{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--ioc-border-subtle)}
  body.ioc-site .ioc-tabs.sidebar .ioc-tabs-tab{border-bottom:0;flex:1 1 12rem}
}
@media(max-width:760px){
  body.ioc-site .ioc-tabs-stages{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   K · B-05-V09 full-bleed duo (CMS-D-118 V6 duo — Academy/Talents full-bleed
   two-panel band, Home.dc.html #capability). No existing B-05 variant renders
   a duo — `.ioc-media` (infoc-cms.css:1367) is a padded copy+image split, the
   wrong shape for two colour-filled linked panels edge to edge. Full-bleed:
   `.ioc-duo` carries no `.wrap` gutter, so the two panels sit flush against
   each other and against the band's own max-width.

   Family colour reuses the EXISTING data-route-fam mechanism
   (infoc-cms.css:1649-1661's --rf custom property) rather than inventing a
   new one (`.is-academy`-style classes) or baking a hex — both rejected in
   review on this branch. `.ioc-cards [data-route-fam]` only sets --rf inside
   `.ioc-cards`, so this is a second consumer of the SAME codes/tokens for the
   `.ioc-duo` context — same shape as §B's "dat" addition, just a new
   context rather than a new code. Unlike the border-tint use, a full-bleed
   panel needs a TEXT colour paired with the fill: every code below resolves
   to a --rf dark/saturated enough for white (--ioc-text-on-color) at
   ≥4.5:1 — verified via the five new T16 ⑥ pairs (appearance-gate.mjs).
   ============================================================ */
body.ioc-site .ioc-duo-band{border-top:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-duo{max-width:var(--ioc-maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr}
body.ioc-site .ioc-duo [data-route-fam]{--rf:var(--ioc-accent)}
body.ioc-site .ioc-duo [data-route-fam="sol"]{--rf:var(--ioc-blue)}
body.ioc-site .ioc-duo [data-route-fam="aca"]{--rf:var(--ioc-fam-academy)}
body.ioc-site .ioc-duo [data-route-fam="tal"]{--rf:var(--ioc-fam-talents)}
body.ioc-site .ioc-duo [data-route-fam="sup"]{--rf:var(--ioc-fam-company)}
body.ioc-site .ioc-duo [data-route-fam="com"]{--rf:var(--ioc-fam-company)}
body.ioc-site .ioc-duo [data-route-fam="ind"]{--rf:var(--ioc-fam-industries)}
body.ioc-site .ioc-duo [data-route-fam="tec"],
body.ioc-site .ioc-duo [data-route-fam="ins"]{--rf:var(--ioc-blue)}
body.ioc-site .ioc-duo [data-route-fam="dat"]{--rf:var(--ioc-blue)}
body.ioc-site .ioc-duo-panel{display:flex;flex-direction:column;background:var(--rf);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-duo-media{position:relative;display:block;height:200px;overflow:hidden;background:var(--ioc-g20)}
body.ioc-site .ioc-duo-media img{width:100%;height:100%;object-fit:cover;display:block}
body.ioc-site .ioc-duo-body{display:flex;flex-direction:column;gap:12px;padding:32px 32px 48px}
body.ioc-site .ioc-duo-k{font-family:var(--ioc-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
body.ioc-site .ioc-duo-body strong{font-size:clamp(24px,2.4vw,30px);line-height:1.12;font-weight:800;letter-spacing:-.03em;max-width:20ch}
body.ioc-site .ioc-duo-d{font-size:15.5px;line-height:1.6;opacity:.92;max-width:48ch}
body.ioc-site .ioc-duo-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin-top:8px}
body.ioc-site .ioc-duo-link svg{width:15px;height:15px;transition:transform .18s var(--ioc-ease)}
body.ioc-site .ioc-duo-panel:hover .ioc-duo-link svg{transform:translateX(4px)}
body.ioc-site .ioc-duo-panel:focus-visible{outline:3px solid var(--ioc-text-on-color,#fff);outline-offset:-3px}
/* Stack to one column below the same breakpoint §Y already uses for the
   sibling `.ioc-media` split (infoc-cms.css:1375) — `minmax(0,1fr)`, not a
   bare `1fr`, per §Y's own overflow lesson (a bare 1fr track's automatic
   minimum is its content's max-content width, not zero). */
@media(max-width:860px){
  body.ioc-site .ioc-duo{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  body.ioc-site .ioc-duo-link svg{transition:none}
}

/* ============================================================
   J · Header utility bar (apps/one/src/one/site-shell/Header.tsx#UtilityBar,
   fix report I5 / HOME-FIX-PLAN F16). The colour rule was moved here first
   (round 1) for the reason below; round 2 moves the LAYOUT rules here too,
   because `apps/(frontend)/globals.css` never actually shipped them — that
   file is compiled by Next's Tailwind v4/Turbopack pipeline, and a live diff
   of the served `/_next/static/chunks/*.css` against the source proved the
   file's LAST plain rule block is silently dropped from the compiled output
   (every earlier rule, including the one immediately above it in source,
   survives). This sheet is linked directly as a static asset
   (`apps/one/src/app/(frontend)/layout.tsx`) and Turbopack never touches it,
   so it cannot suffer the same drop. Colour was moved here originally
   because #000000 in globals.css ignored the site's skin (V6's own ink,
   frozen even after switching to a skin whose ink differs, breaking
   CMS-D-118 ②'s lossless-switch promise); the fallback is --ioc-g100's own
   base declaration (infoc-cms.css:22), per T16 ⑨. Every gap/padding value
   below is on the documented scale (4 · 8 · 12 · 16 · 24 · 32 · 48); the
   band's own 36px height is the comp's own measurement (Home.dc.html:74-83).
   The comp's 20px gaps are NOT on that scale and the DESIGN.md-scale ceiling
   (v6CssOffScaleCeiling) is shrink-only (CLAUDE.md "Optimised dev loop" /
   T17) — these round to the nearest scale step, 24px, rather than add to it.
   ============================================================ */
body.ioc-site .ioc-utility-bar{height:36px;max-width:1360px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:24px;color:var(--ioc-g100,#161616)}
body.ioc-site .ioc-utility-locale{font-family:var(--ioc-mono);font-size:10.5px;font-weight:400;letter-spacing:.13em}
body.ioc-site .ioc-utility-links{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:12.5px;font-weight:500}

/* ============================================================
   L · Footer ink (HOME-FIX-PLAN F15). Home.dc.html:358's footer is
   `background:#000000;color:#ffffff` in full — route cards, brand column,
   menu links, contact rows and the legal band all read white. The kit's own
   `.ioc-footer{background:var(--ioc-footer-surface,#fff);
   color:var(--ioc-text-primary)}` (infoc-cms.css:406) has NO on-colour text
   pair for that surface (see typography.ts's own comment on
   `SKIN_COMPONENT_PRESETS.v6.footer`) — flipping the surface token to black
   alone renders black text on black. `--ioc-footer-text` is that pair's other
   half: emitted by the typography emitter per skin (inert everywhere except
   v6, which is now white — `packages/standard/tests/site-skin-contract.spec.ts`
   proves the pairing, not this sheet, because the kit's OWN `--ioc-footer-surface`
   declaration statically resolves to white regardless of the active skin — see
   that file's header for why a skin-dependent pair cannot be proven here).
   Deliberately UNDECLARED as a CSS custom property in this file: declaring a
   literal default here would collide with the kit's frozen `--ioc-footer-surface`
   default (white) under T16 ⑥'s static, skin-blind resolution and read as a
   false failure (white-on-white) for a pairing that only exists at runtime.
   Every consumer below therefore falls back to a literal, safe-on-white value
   so a totally failed runtime emitter (which also reverts
   --ioc-footer-surface to its own white default) still renders legible ink
   text — never a token-only fallback chain that could resolve to nothing.

   Children that read a DIFFERENT token than `.ioc-footer`'s own `color`
   (`.footer-routes`, `.route`, `.footer-menu a`, `.footer-brand>p`,
   `.footer-contact .fc-k`/`.fc-v`, `.legal-row` spans/links) are re-pointed
   individually — the kit's cascade never lets the root's colour reach them
   by inheritance, since each declares its own `color`.

   EVERY selector below carries `.ioc-footer` explicitly, not just
   `body.ioc-site`, even though `.route`/`.footer-menu a`/etc. are unique
   class names that would otherwise resolve fine on their own. That is not
   defensive redundancy: `scripts/copy-render-kit-runtime.mjs` HARVESTS every
   colour rule in the frozen kit that carries a class (its own header: "every
   colour rule that carries at least one class/id, prefixed with
   body.ioc-site") into `apps/one/public/infoc-site-overrides.css`, and the
   kit's own footer rules ALL start `.ioc-footer …` — so the harvested copy is
   `body.ioc-site .ioc-footer .route{color:var(--ioc-text-primary)}` at
   (0,3,1), not `body.ioc-site .route{…}` at (0,2,1). A round-1 version of
   this section used the shorter form and every colour it set was silently
   outranked by the harvest — verified live: computed colours matched the
   OLD kit values, not these, until `.ioc-footer` was added to match the
   harvested specificity exactly. At equal specificity this sheet still wins
   on source order (loaded after infoc-site-overrides.css), so exact parity
   is enough; it does not need to exceed it.
   ============================================================ */
body.ioc-site .ioc-footer{color:var(--ioc-footer-text,#000000)}
body.ioc-site .footer-routes{background:transparent}
body.ioc-site .ioc-footer .route,
body.ioc-site .ioc-footer .route .rn,
body.ioc-site .ioc-footer .route .ico,
body.ioc-site .ioc-footer .route small{color:var(--ioc-footer-text,#fff)}
body.ioc-site .route{border-color:rgba(255,255,255,.22)}
body.ioc-site .route-grid{border-color:rgba(255,255,255,.22)}
body.ioc-site .ioc-footer .route:hover{background:var(--ioc-blue,#0001ff);color:var(--ioc-footer-text,#fff)}
/* Route band geometry — the comp (Home.dc.html:360-366) puts the 32px gutter
   on the BAND and gives the grid itself NO inline padding and NO outer frame:
   cards run flush to the wrap's edges, hairlines exist only BETWEEN cards,
   and the hover fill reaches the band's full cell. The kit instead makes the
   grid the `.fwrap` (padding:0 var(--ioc-gutter), infoc-cms.css:407) and
   frames it with `border-inline` (:431), so every card sat one gutter INSIDE
   the frame and `.route:hover`'s paint stopped a gutter short of it on both
   flanks — the defect measured live 2026-08-17. The gutter moves to
   `.footer-routes` (comp's own band padding) and the grid sheds the inset and
   the frame; the kit's existing between-card `border-right` (+ `:last-child`
   0, recoloured .22 above) already renders the comp's internal hairlines, so
   the comp's literal `gap:1px` technique is NOT copied — `gap` is a T17
   spacing property, 1px is off-scale, and `v6CssOffScaleCeiling` stands at
   27/27 with no headroom. Borders are not spacing (§N); rendered result is
   identical. Kit selectors are (0,2,0); these (0,3,0) win outright, mobile
   block (infoc-cms.css:567) included, whose border-inline:0 becomes moot. */
body.ioc-site .ioc-footer .footer-routes{padding:0 var(--ioc-gutter)}
body.ioc-site .ioc-footer .route-grid{padding:0;border-inline:0}
body.ioc-site .ioc-footer .footer-menu a,
body.ioc-site .ioc-footer .footer-brand>p,
body.ioc-site .ioc-footer .footer-contact .fc-k,
body.ioc-site .ioc-footer .footer-contact .fc-v{color:var(--ioc-footer-text,#fff)}
/* Uniform column-heading colour: the kit's base `.footer-menu h3` reads
   --ioc-accent (blue). Footer.tsx no longer emits ANY per-column family
   class (HOME-FIX-PLAN F15 "Also fix" removed `COLUMN_ACCENTS` at the
   source — Home.dc.html:382/390 is one flat white for all five headings),
   so this is the only rule left contesting the base kit colour. */
body.ioc-site .ioc-footer .footer-menu h3{color:var(--ioc-footer-text,#fff)}
/* Menu-link HOVER (owner report 2026-08-19, from a screenshot of the live
   footer). The block above re-pointed every footer COLOUR rule at
   `--ioc-footer-text`; the kit's `:hover` (infoc-cms.css:463) was the one it
   missed, so hover still resolved `--ioc-accent` — PAGE accent, which knows
   nothing about how dark this band is. On the V6 skin that is #0001ff on a
   #000000 footer: 2.45:1, i.e. hovering a link made it 8.6x HARDER to read
   than not hovering it. `--ioc-footer-link-hover` is the footer's own accent
   role, paired per-skin with `--ioc-footer-surface` (light 8.58 · dark 6.32 ·
   high-contrast 7.58 · v6 9.98), because no fixed colour serves all four:
   light's and high-contrast's footers are WHITE and every on-ink blue reads
   ~2.1:1 on them. NO FALLBACK on purpose — an unset token makes the
   declaration invalid at computed-value time and the link inherits
   `.ioc-footer`'s `--ioc-footer-text`, the pair already proven AA on every
   skin, so this rule cannot fail to a bad colour. `transform:translateX(3px)`
   is left to the kit rule; only the colour is contested here. */
body.ioc-site .ioc-footer .footer-menu a:hover{color:var(--ioc-footer-link-hover)}
body.ioc-site .ioc-footer .legal-links span,
body.ioc-site .ioc-footer .legal-links a,
body.ioc-site .ioc-footer .legal-button{color:var(--ioc-footer-text,#fff)}
body.ioc-site .back-top{border:1px solid rgba(255,255,255,.22);height:32px;padding:0 12px}
/* Wordmark: 30px kit default -> the comp's 19px footer size, and the C's
   fill moves off house blue (unreadable on ink) to the on-inverse blue step
   (token-map.mjs's general-purpose ink-band role, already declared in §A and
   already contrast-proven at T16 ⑥ line "on-inverse blue kicker text on
   ink"). `.gc` has no `.ioc-footer`-scoped harvest entry (the kit's own
   `.infoc-logo .gc{color:var(--ioc-blue)}` rule is unscoped, so the harvest
   re-emits it at `body.ioc-site .infoc-logo .gc` — (0,3,0), already below
   this selector's (0,4,0)), so it did not need the same treatment. */
body.ioc-site .footer-brand .brand .infoc-logo{font-size:19px}
body.ioc-site .footer-brand .infoc-logo .gc{color:var(--ioc-on-inverse-blue,#33b1ff)}

/* ============================================================
   N · Shell chrome geometry — header row, mega panels, footer grid and
   contact rows (HOME-FIX-PLAN F39 + F40, both ⚠ EVERY PAGE).

   §L above already landed the footer's INK (F15) and, with it, two of F39's
   five sub-defects — the wordmark is already 19px on --ioc-on-inverse-blue.
   What is left here is GEOMETRY, plus the header, which F15 never touched.

   SPACING. Every gap/padding/margin below is on DESIGN.md's documented scale
   (4 · 8 · 12 · 16 · 24 · 32 · 48) — this section adds ZERO to
   `v6CssOffScaleCeiling`, which is at its ceiling of 2 with no headroom. The
   comps' own values are off it, so each rounds to the nearest step with ties
   rounding up, exactly as §J did with the utility bar's 20px gaps and §M with
   its band paddings:
     · header row gap        14px -> 16px (tie, rounds up)
     · nav link padding   8px 11px -> 8px 12px
     · mega-inner padding 34px 32px 38px -> 32px (both 34 and 38 are nearer 32
       than 48; the comp's vertical asymmetry is the cost of the scale)
   Values that are NOT spacing properties keep the comp's exact number, because
   the gate measures gap/padding/margin only and rounding them would be loss
   for nothing: the 64px contact-key COLUMN (grid-template-columns), the 64px
   row height, the 1360px measure, the 40px/36px/20px control sizes.

   SPECIFICITY. `scripts/copy-render-kit-runtime.mjs` harvests every kit COLOUR
   rule that carries a class into `infoc-site-overrides.css` prefixed
   `body.ioc-site`, so a kit rule reappears one class higher — see §L's header
   for the full mechanism and the white-on-white it cost once. Each colour rule
   below therefore carries the kit selector's own full chain plus
   `body.ioc-site`, matching the harvest exactly and winning on source order
   (this sheet loads last — verified in the browser: the loaded order is
   infoc-cms.css, infoc-site-overrides.css, infoc-forms.css, infoc-slider.css,
   infoc-v6.css). Geometry rules are not harvested and need no such care.
   ============================================================ */

/* --- F40 · header surface. The comp's header is flat and opaque
   (`Home.dc.html:73` `background:#fff`, no filter anywhere in any of the 23
   comps); the kit paints `var(--ioc-header-surface)` under a
   `saturate(140%) blur(14px)` backdrop and the Appearance emitter used to hand
   it a 94%-alpha color-mix, so page content read through the sticky bar. The
   ALPHA half is fixed at its source (`packages/standard/src/site/typography.ts`
   now emits `t.header.background` verbatim); this is the BLUR half. They are
   one decision: a backdrop-filter behind an opaque surface renders nothing, so
   leaving it would have been dead paint on every scroll of every page. Not
   restated as a `background` here — doing that would freeze the header on
   whatever colour this sheet named and break the skin's own choice. --- */
body.ioc-site .ioc-header{-webkit-backdrop-filter:none;backdrop-filter:none}

/* --- F40 · header row geometry. Comp (`Home.dc.html:85`): 64px tall, capped
   at 1360px, `align-items:center`, gap 14px, and — the part that moves the
   most pixels — the wordmark, the nav and the actions are laid out
   `flex:none` / `flex:1 1 auto` / `margin-left:auto`. The kit instead gives
   `.nav{margin-left:auto}` (infoc-cms.css:302) with `.brand{margin-right:32px}`,
   which pushes the whole nav to the right edge and opens a measured 168px void
   between the wordmark and "Solutions" that the comp does not have. `.nav`
   growing from the left closes it without moving the actions. The row also
   stops being `align-items:stretch`, which is what made every child 72px tall;
   the two controls that relied on that (`.icon-btn`, `.top-cta`) get the
   comp's own explicit sizes below. Padding is left alone deliberately: the kit
   already reads `var(--ioc-gutter)`, which IS 32px (infoc-cms.css:53) and is
   the comp's value, so restating it would only cost the responsive behaviour.
   --- */
/* --- NAV ON THE TRUE PAGE AXIS (owner ruling 2026-08-18). The row was a flex
   line with `.nav{flex:1 1 auto}`, so the nav TRACK grew to fill everything
   between the wordmark and the actions while its links stayed packed at the
   track's left edge. Measured live at 1440: row 1360 wide spanning x=40..1400
   (true centre x=720), nav track 983 wide (184..1166), but the six links
   spanning only 630 (184..814) — an optical centre of x=499, a full 221px
   left of the axis.

   WHY A GRID AND NOT `justify-content:center` ON THE NAV. Centring inside the
   existing track is one line, and it is measurably NOT centred: the two side
   items are unequal (brand 96, actions 186), so the track they leave behind is
   not symmetric about the row's axis. Centring within it lands the menu at
   x=675 — still 45px left, and it drifts further every time the wordmark or
   the CTA label changes width. `1fr auto 1fr` makes the side tracks EQUAL by
   construction, so the centre cannot drift: the axis is a property of the
   grid, not a coincidence of the current copy.

   IT FITS, arithmetic not hope: the side tracks compute (1360 − 32 gaps − 630
   nav) / 2 = 349 each, against a 96px brand and 186px actions.

   SAFE AT EVERY WIDTH. The row has exactly THREE element children at all
   breakpoints — checked, because a fourth would spill into an implicit second
   row: the mobile toggle is a child of `.header-actions`, not of the row.

   THE COLUMNS ARE PLACED EXPLICITLY, and that is not belt-and-braces — the
   mobile case is BROKEN without it. Below 1041 the §J collapse sets
   `.nav{display:none}`, which does not merely empty the middle track: it stops
   the nav being a grid item at all. Auto-placement then puts `.header-actions`
   into the FIRST FREE track, which is the middle one, and the actions land
   mid-row with column 3 empty. Measured at 900 before this fix: actions' right
   edge at x=468 against a row right edge of 900. Naming each item's column
   pins brand/nav/actions to 1/2/3 whether or not the nav is present.

   The mega panels do not move: `.mega` is `position:absolute` with `left:0;
   right:0` against the sticky header, so it is full-bleed and independent of
   where the nav sits.

   T17: no spacing value changes — `gap:16px` is the existing declaration,
   carried over. `grid-template-columns` and `justify-self` are not spacing
   properties (§N). --- */
body.ioc-site .ioc-header .header-row{display:grid;grid-template-columns:1fr auto 1fr;height:64px;max-width:1360px;align-items:center;gap:16px}
body.ioc-site .ioc-header .brand{margin-right:0;grid-column:1;justify-self:start}
/* CMS-D-126 ② — owner-directed wordmark upsize over the comp's 17px: the
   ruling asked for "20% bigger" (20.4px); 20px is the recorded value — the
   round step, −2% off the literal ask and visually identical to it. */
body.ioc-site .ioc-header .brand .infoc-logo{font-size:20px}
/* `flex:1 1 auto` is what made the track swallow the free space; in the grid the
   nav sits in the `auto` track at its own content width. `min-width:0` stays —
   it is what lets that track shrink rather than push the row wide when the menu
   grows. `margin-left:auto` comes OFF the actions for the same reason: an auto
   margin in a grid area would re-introduce the asymmetry the grid just removed. */
body.ioc-site .ioc-header .nav{margin-left:0;align-items:center;grid-column:2;justify-self:center;min-width:0}
body.ioc-site .ioc-header .header-actions{margin-left:0;grid-column:3;justify-self:end;align-items:center;gap:8px}
/* The nav's own inter-link gap is the ONE comp value not carried across:
   `Home.dc.html:89` sets `gap:1px`, whose nearest scale step (4px) would be a
   visible four-fold widening. The kit declares no gap at all, so the links
   stay flush — 0 is the closer of the two available answers and, unlike 1px,
   costs nothing against a ceiling that has no headroom. */

/* --- F40 · nav links. Comp: weight 500, `#000000`, `padding:8px 11px`, and an
   `inset 0 -3px 0 #0001ff` box-shadow on the trigger whose panel is OPEN
   (`Home.dc.html:634` — `n.rule` is 'none' for every other item). The kit
   renders 600 / `--ioc-text-secondary` / `0 15px` over a full 72px row, and
   draws its marker as a 2px `::after` bar that also scales in on plain hover.
   The hover WASH is already right and is deliberately untouched — it comes
   from `.nav-link:hover{background:var(--ioc--g10)}` in the kit's admin half
   (infoc-cms.css:2014, and yes that token really is spelled with a double
   dash; it is aliased at :2012). Only the blue text tint was missing.
   `aria-current` keeps the marker as well as `aria-expanded`: the comp has no
   current-page state in its header at all, and silently deleting wayfinding
   that already ships is not something this fix was asked to do. --- */
/* `height:auto` is load-bearing, not tidying: the admin half's
   `.nav-trigger,.nav-link{height:100%}` (infoc-cms.css:2014) re-inflated every
   link to the full row even after the row itself came down to 64px, which
   would have left the comp's `inset 0 -3px 0` marker drawn at the row's bottom
   edge instead of the link's. */
body.ioc-site .ioc-header .nav-link,
body.ioc-site .ioc-header .nav-trigger{height:auto;padding:8px 12px;font-weight:500;color:var(--ioc-text-primary,#161616)}
body.ioc-site .ioc-header .nav-link::after,
body.ioc-site .ioc-header .nav-trigger::after{content:none}
body.ioc-site .ioc-header .nav-link:hover,
body.ioc-site .ioc-header .nav-trigger:hover,
body.ioc-site .ioc-header .nav-trigger[aria-expanded="true"]{color:var(--ioc-header-active,#0001ff)}
body.ioc-site .ioc-header .nav-link[aria-current="page"],
body.ioc-site .ioc-header .nav-trigger[aria-current="page"],
body.ioc-site .ioc-header .nav-trigger[aria-expanded="true"]{box-shadow:inset 0 -3px 0 var(--ioc-header-active,#0001ff)}

/* --- F40 · header controls. Comp: a 36x36 search affordance with no divider
   rule, then a 40px CTA that HUGS its label (`padding:0 16px`, `gap:8px`).
   The kit's CTA is a 176px-wide `space-between` slab that inherited the row's
   72px height, so the arrow sat pinned to the far edge. `.icon-btn`'s
   `border-left` goes with the stretch: an 8px-gapped 36px button cannot carry
   a full-height divider. Scoped to `.ioc-header` so the drawer's and the
   search overlay's own `.icon-btn`s are untouched. --- */
body.ioc-site .ioc-header .icon-btn{width:36px;height:36px;border-left:0}
body.ioc-site .ioc-header .top-cta{min-width:0;height:40px;padding:0 16px;gap:8px;justify-content:center;font-size:14px}

/* --- F40 · mega panels. `.mega-inner` was full-bleed (`max-width:none`) at
   `26px 32px`; the comp caps it at the same 1360px as the header row and pads
   `34px 32px 38px` (`Home.dc.html:96`). The flat panels' tile grid is the
   comp's `data-cols="2"` — `repeat(2,1fr)`, i.e. 2x2 — against the kit's
   `repeat(4,1fr)` 1x4 (infoc-cms.css:358; the earlier report blamed
   `.simple-layout` at :332, which is the panel's OUTER two-column split and is
   correct as it stands). The kit's hairline border grid on that container is
   kept rather than the comp's `gap:2px`: 2px is off-scale, and a 1px rule is
   the house convention anyway (CMS-D-066 r4).
   `.ioc-localnav{top:64px}` follows the row height down from 72px — §X below
   already does exactly this inside the drawer breakpoint, for the same
   reason; it is now true at every width. --- */
body.ioc-site .ioc-header .mega-inner{max-width:1360px;padding:32px}
body.ioc-site .ioc-header .simple-links{grid-template-columns:repeat(2,1fr)}
body.ioc-site .ioc-localnav{top:64px}

/* --- F40 · mega text treatment. The comp's grouped panel is one flat
   `#000000`: the group heading (`Home.dc.html:135`) and the tile title
   (:137) both. Live, the heading reads house blue from
   `.ioc-header .menu-group h3` (infoc-cms.css:341), and the title reads
   `rgb(82,82,82)` — INHERITED, not set: nothing matches `strong` at all, but
   its `.mg-txt` parent is caught by the admin half's `.mega span`
   (infoc-cms.css:2014) resolving `--ioc--g70` to `#525252`. Setting `strong`
   itself is the surgical fix; at (0,4,1) it clears both the kit rule and its
   harvested twin. Content in these panels is already verbatim-correct — this
   is treatment only. --- */
body.ioc-site .ioc-header .menu-group h3,
body.ioc-site .ioc-header .menu-group .mg-txt strong{color:var(--ioc-text-primary,#161616)}

/* --- F40 · featured aside. Comp (`Home.dc.html:154`): `padding:24px` and a
   `border-left:2px solid #0001ff`, opening straight on its eyebrow. The kit
   pads 18px, draws no rule, and `Header.tsx` used to put a 24px cube glyph
   above the eyebrow — removed at the source in the same change, which is why
   `.mega-label`'s 14px top offset (infoc-cms.css:335, spacing FOR that icon)
   is zeroed here rather than left dangling. Background is untouched: the
   Appearance emitter already resolves `--ioc-selected-surface` to the comp's
   `#f9fafb` (verified computed). --- */
body.ioc-site .ioc-header .featured{padding:24px;border-left:2px solid var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-header .featured .mega-label{margin-top:0}

/* --- F39 · footer grid, revised by owner direction 2026-08-17: FIVE cells —
   brand, three menu cells, contact. F39 had matched `Home.dc.html:379`'s six
   (`1.3fr repeat(4,1fr) 1.05fr`); the owner judged that congested and directed
   the Academy column back UNDER Talents Gateway in one `.footer-menu-stack`
   cell (`Footer.tsx` re-stacks them, Talents Gateway first). The five tracks
   are SYMMETRIC — 1.3fr bookends over three 1fr menus — because both ends
   carry dense content: the brand blurb left, the 64px-keyed contact rows
   right. The comp's 1.05fr contact track wrapped `solutions@infoc.com`
   mid-word at laptop widths (~215px track vs the ~230px the row needs);
   1.3fr clears it. Gap stays the comp's 32px. `minmax(0,…)` is kept on
   every track — the kit's own convention, and without it a long unbroken
   link string can push a track past its share. --- */
body.ioc-site .ioc-footer .footer-main-grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)) minmax(0,1.3fr);gap:32px}

/* --- F39 · contact rows. The comp's key column is a FIXED 64px
   (`Home.dc.html:393`), so all four labels start and end on the same two
   verticals. The kit sizes it `auto`, which measured 52.86 / 34.31 / 41.45 /
   53.09px — four different widths, no alignment. The values are the comp's
   13px at .85 opacity, ranged LEFT beside their label, against the kit's
   15px/700 pushed hard right. `.fc-v` is now an `<a>` on all four rows
   (Country and Address gained the comp's destination in `Footer.tsx`), so the
   hover restores full opacity the way the comp's `style-hover` does.
   `overflow-wrap:anywhere` is NOT cosmetic and was found by measurement, not
   by reading: a fixed 64px key inside the narrower SIX-cell contact track
   (1.05fr, against the five-cell layout's 1.75fr) leaves ~52px beside it
   between 1041px and the kit's own 2-column footer breakpoint, and
   `solutions@infoc.com` is one unbreakable 124px string — it pushed the
   document 39px wider than the viewport at 1040px until this landed. The kit
   already breaks its other contact value the same way
   (`.fc-value{word-break:break-word}`, infoc-cms.css:467). --- */
body.ioc-site .ioc-footer .footer-contact .fc-row{grid-template-columns:64px minmax(0,1fr)}
body.ioc-site .ioc-footer .footer-contact .fc-k{font-size:13px}
body.ioc-site .ioc-footer .footer-contact .fc-v{justify-self:start;text-align:left;font-size:13px;font-weight:400;opacity:.85;overflow-wrap:anywhere}
body.ioc-site .ioc-footer .footer-contact a.fc-v:hover{opacity:1}

/* --- F39 · footer wordmark base letters. §L above already carries the two
   halves this fix was written for (19px, and the C on --ioc-on-inverse-blue),
   but the FOUR OTHER LETTERS were still painting `--ioc-text-primary` from
   `.ioc-footer .footer-brand .brand` (infoc-cms.css:445) — i.e. #000000 on the
   ink ground §L had just created. Invisible, and found by looking at a
   rendered screenshot rather than at a computed style, because "black" and
   "absent" read identically in a style panel. The C's own `.gc` rule was the
   only part §L re-pointed, which is why the mark rendered as a lone blue C.
   Same (0,4,0) parity-with-the-harvest rule the rest of §L follows; white on
   ink is the pair `site-skin-contract.spec.ts` already proves, so this adds no
   new colour to T16 ⑥. --- */
body.ioc-site .ioc-footer .footer-brand .brand{color:var(--ioc-footer-text,#fff)}

/* --- F39 · route-card icons. Comp (`Home.dc.html:364`): a 40x40 span framed
   with a `rgba(255,255,255,.22)` hairline holding a 20px icon; the kit renders
   a bare 26px glyph with no frame. The three glyphs themselves changed in
   `Footer.tsx` (calendar/clipboard/speech -> the comp's clock/checkmark/people).
   The translucent hairline is written as a literal rgba, NOT a token, on
   purpose: §L above already ships this exact value three times
   (`.route`, `.route-grid`, `.back-top`) because the token vocabulary has no
   on-ink hairline role, and minting one here would tokenise a quarter of the
   footer's hairlines while §L kept the rest as literals — a worse state than
   either. T16 ① counts hex only, so this costs nothing against the literal
   ceiling either way. Hover needs no rule: §L already turns the whole card
   `--ioc-blue` and the frame is `currentColor`-independent. --- */
body.ioc-site .ioc-footer .route .rn{width:40px;height:40px;border:1px solid rgba(255,255,255,.22)}
body.ioc-site .ioc-footer .route .rn svg{width:20px;height:20px}

/* ============================================================
   X · Mobile drawer breakpoint. All 23 V6 comps (`*.dc.html`) declare
   `@media(max-width:1040px)` for the mobile nav uniformly; the shipped kit
   sheet's own breakpoint is `max-width:1000px` (infoc-cms.css:558-563,
   :1211) — 40px narrower, byte-frozen (CMS-D-054) and not editable here. A
   visitor between 1001-1040px therefore saw the DESKTOP mega-nav row where
   the design specifies the drawer trigger: `.mobile-toggle` stayed
   `display:none` (its unconditional default, infoc-cms.css:323) and `.nav`/
   `.search-open`/`.top-cta` stayed visible.

   This widens the SAME declarations — same properties, same values, same
   selectors — into the 1001-1040px gap. `body.ioc-site` is not a specificity
   workaround here (nothing below competes with a `:has()` clause the way Y's
   fix did): it exists only so this sheet's own consistency rule (every
   selector prefixed) holds, and it costs nothing since these rules do not
   set `color`.
   ============================================================ */
@media(max-width:1040px){
  body.ioc-site .ioc-header .nav,
  body.ioc-site .ioc-header .search-open,
  body.ioc-site .ioc-header .top-cta{display:none}
  body.ioc-site .ioc-header .mobile-toggle{display:grid}
  body.ioc-site .ioc-header .header-row{height:64px}
  body.ioc-site .ioc-header .mega{display:none}
  body.ioc-site .ioc-localnav{top:64px}
}

/* ============================================================
   P · Form field treatment + the Home enquiry band (HOME-FIX-PLAN F41, plus
   the enquiry `<figure>` sizing the plan never assigned to any fix — F33 was
   typed CONTENT+WIRING with no STYLE half, and the figure's geometry is
   inseparable from the column proportions F41 does own).

   SCOPE, DECIDED PER RULE AGAINST THE 23 COMPS RATHER THAN ASSUMED. F41 is
   headed "form rules site-wide", which is true of some of it and false of the
   rest; each block below states which, and what was counted:

   ① FIELDS — site-wide. 53 of the 55 `<input type=text|email>` in the pack
      are `height:48px; border:0; border-bottom:1px solid …; background:#f9fafb`
      (48 with an `#e0e0e0` rule and `padding:0 14px`, 5 — Home's — with
      `#8d8d8d` and `0 16px`). Underline-only is the pack's field, not Home's.
      `#8d8d8d` IS `--ioc-border-strong`; `#f9fafb` IS `--ioc-g10` under the v6
      skin (`site-skin-contract.spec.ts:211`), so no token is minted.
   ② SUBMIT — site-wide. 18 of the 20 comp submit buttons are `height:48px`.
      Live measures 56 because `div.showcase .btn` carries `min-height:3.5rem`
      (infoc-cms.css:2013), so the height needs the min-height reset with it.
   ③ FORM BOX, RADIO CARDS, BAND GROUND, COLUMN SPLIT, FIGURE — Home only.
      Counted, not assumed: the bordered radio card (`border:1px solid #e0e0e0`
      + `gap:10px`) appears in 3 comp markups, ALL of them Home's; another page
      draws its 4 radios on a flat `#f9fafb` with no border at all. 15 of the
      17 `#contact` sections in the pack are `background:#ffffff` — only Home's
      is `#f9fafb`. And the `.9fr 1.1fr` split and `padding:30px 30px 28px` box
      each appear exactly once, in Home. A site-wide rule for any of these
      would repaint 15+ pages away from their own comps.

   THE HOME SCOPE HOOK is `[data-block-instance^="p-home-"][data-variant-id=
   "B-17-V10"]` — this page's instance of this variant, both attributes emitted
   on the section by the block mapper. It is a page scope with no page selector
   and no `content.json` edit, which matters because `tone:"soft"` (the field
   that would otherwise carry the band ground) lives in content and this task
   does not own that file. `.ioc-block` is deliberately NOT part of any
   selector here: section rhythm and measure are a different fix's surface.

   The obvious hook, `[data-form-id="home-router"]`, was tried first and is
   WRONG — measured, not guessed. Before `bindInfocForms` runs, the section
   really does read `data-form-id="home-router"`; after it runs, that same
   attribute reads the bound DOCUMENT'S ID (`data-form-id="2"`), and the only
   node still carrying the preset name is the `<form>` itself. So a sheet
   written against it silently styles everything INSIDE the form (the radio
   cards did land) and nothing above it (the band, the split, the box and the
   figure did not) — which reads as a specificity bug and is really one
   attribute meaning two different things at two different times.

   T17: every padding/margin/gap below is on the 4/8/12/16/24/32/48 scale.
   The comp's off-scale values snap with ties rounding UP, the CMS-D-117
   convention — `30px 30px 28px` -> `32px`, `margin:0 0 20px` -> `24px`,
   `gap:56px` -> `48px`. The ONE exception is the radio grid's `gap:10px`,
   which rounds DOWN to 8px for a reason stated at that rule. `height`,
   `min-height`, `max-width` and `grid-template-columns` are not spacing
   properties (§N), so 48px/170px/380px/186px/.9fr/1.1fr stay verbatim.
   ============================================================ */

/* ① fields — underline-only, site-wide (Home.dc.html:341-343). */
body.ioc-site .ioc-field input,
body.ioc-site .ioc-field select,
body.ioc-site .ioc-field textarea{border:0;border-bottom:1px solid var(--ioc-border-strong);background:var(--ioc-g10)}
body.ioc-site .ioc-field input,
body.ioc-site .ioc-field select{height:48px;padding:0 16px}
body.ioc-site .ioc-field textarea{padding:12px 16px}
/* The kit's focus state is a border-colour swap on a border this rule just
   removed on three sides, so restate it on the side that still exists. */
body.ioc-site .ioc-field input:focus,
body.ioc-site .ioc-field select:focus,
body.ioc-site .ioc-field textarea:focus{border-bottom-color:var(--ioc-blue)}

/* ② submit — 48px. `height` alone loses to `div.showcase .btn`'s min-height. */
body.ioc-site .ioc-form-actions .btn{height:48px;min-height:48px;padding-block:12px}

/* ③a Home enquiry band ground + column split (Home.dc.html:324-325). The comp
   gives the FORM the wider column; the kit's `.ioc-nav-split` 1.3fr/1fr gives
   it to the copy, which is the inversion F41 measured at 768.688/591.312.

   THE GROUND IS WHITE, NOT THE COMP'S `#f9fafb` — owner ruling 2026-08-17,
   overriding this block's own ③ scope note. The comp value was faithful and
   WRONG IN CONTEXT: the section immediately above it on the live page is the
   B-10-V21 capability-gap band, authored `tone:"soft"` in content.json, which
   resolves to the SAME `--ioc-g10`. Measured live, both sections computed
   `rgb(249,250,251)`, so the page's last two bands fused into one continuous
   grey slab with the section boundary invisible — a defect the comp could not
   show, because the comp renders one page section at a time.

   White is also the pack's own majority: ③ above counts 15 of the 17 `#contact`
   sections at `background:#ffffff` and Home as the lone `#f9fafb`. So this
   moves Home ONTO the pack's dominant treatment rather than away from it.

   SUPERSEDED — owner ruling 2026-08-21 reverses 2026-08-17: the band reads
   its ground from the STORE again (`tone:"soft"` on the home block →
   `.ioc-block.soft` → `--ioc-g10` = the comp's #f9fafb). Both of the white
   ruling's reasons have since dissolved: the form renders inside its own
   white card now (`form.ioc-form`, the concurrent session's forms pass), so
   `.ioc-field`'s `--ioc-g10` fill sits on white card, never grey-on-grey;
   and F35's Home-scoped `.ioc-block.soft{border-top}` hairline now draws
   the boundary the 08-17 measurement found missing, so two adjacent soft
   bands no longer fuse into one slab (measured again on this reversal —
   the seam is the hairline, exactly the comp's own #contact border-top).
   No pin replaces it: the store decides the ground (CMS-D-081). */
/* ③a-ii STANDARDISED ONTO EVERY ENQUIRY BAND (owner ruling 2026-08-22,
   CMS-D-176). ③a and ③d/③e below were authored for Home and scoped
   `[data-block-instance^="p-home-"]`, so the SIXTEEN B-17-V09 inner-page
   bands and `/solutions` — which carries Home's OWN variant, B-17-V10 —
   kept the kit base and every defect ③ was written to remove. Measured at
   1440 on 2026-08-22: all seventeen computed `723.469px 556.516px` with a
   16px gutter, i.e. the copy column WIDER than the form on a band whose
   only job is the form, the exact inversion ③a records F41 measuring.

   THE SELECTOR CHANGE IS `^="p-home-"` -> BARE ATTRIBUTE PRESENCE, which
   keeps the specificity at (0,4,x) — byte-identical weight to what shipped.
   Dropping the instance term entirely would have computed (0,3,2) on the
   `h2` rule and LOST to `body.ioc-site .infoc-cms:has(.ioc-hero-v6)
   .ioc-head h2` (:1851, also (0,3,2), later in source), silently reverting
   Home's own 40px/800 heading on every page carrying a v6 hero. Two
   attribute terms cost nothing and remove that whole class of surprise.

   B-17-V07 (`/contact`, `#enquiry`) is DELIBERATELY EXCLUDED: its split is
   368/912 — already form-wider — and it is governed by `#enquiry
   .ioc-nav-split` (infoc-cms.css:1618, an ID at (1,1,0)) which no rule here
   would reach anyway. Its rail measured 306px inside a 368px column, bounded
   by the column rather than ragged. Nothing there is broken; it is named so
   the omission reads as a decision, not an oversight. */
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-nav-split,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-nav-split{grid-template-columns:.9fr 1.1fr;gap:48px}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-form{padding:32px}

/* ③b the enquiry figure — the gap the plan never assigned. `.ioc-media-fig img`
   (infoc-cms.css:1370) hands every B-05/B-17 figure `aspect-ratio:5/4`, which
   in a 760px column renders 758x606 against the comp's 380x170. The kit sheet
   is byte-pinned (C1), so both dimensions are re-stated here instead. A
   definite width AND height already suppress `aspect-ratio` per spec;
   `aspect-ratio:auto` is written anyway so the intent survives a future edit
   that makes one of them `auto` again. The comp's figure carries no frame. */
  /* CMS-D-176 widens this to every B-17-V10 instance and NOT to V09. The
   figure is a V10 slot: of the eighteen bands this section now governs,
   exactly two carry a `.ioc-media-fig` (Home and `/solutions`) and they are
   precisely the two V10 placements — so the variant IS the predicate, no
   `:has()` needed. `/solutions` measured 723x579 before this rule: the 5/4
   base crop against a 723px column, 6.5x the pixel area of Home's 380x170
   and the largest element in a band whose subject is the form. */
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-media-fig{max-width:380px;margin:0 0 24px;border:0}
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-media-fig img{aspect-ratio:auto;height:170px;object-fit:cover}

/* ③d the copy column header — the renderer reuses `.ioc-head`, which is the
   R5 SECTION header: two end-aligned tracks, heading beside lede
   (infoc-cms.css:1146), a full-width-band pattern. Inside this split's .9fr
   column (~526px at 1440) those two tracks compute ~277px + ~185px, so the
   heading rags one word per line with the lede floating beside it — measured
   live 2026-08-17 before this rule. The comp lays this column out STACKED
   (Home.dc.html:326-329): kicker, then a 40px/800/-.038em heading capped at
   20ch, then the lede below at 50ch, flowing into the ③b figure. One track
   restores that; the base `.ioc-head` bottom margin stands in for the lede's
   own trailing margin.
   T17: `margin:0 0 16px` snaps the comp's `0 0 14px` (tie, rounds UP per
   CMS-D-117); 24px snaps the lede's 26px DOWN (nearest step, 2 away against
   6); `max-width`/`font-size`/`letter-spacing` are not spacing properties
   (§N), so 20ch/50ch/40px/-.038em stay verbatim. */
  /* CMS-D-176: the same reasoning holds on all eighteen bands, and the
   measurement is the same one ③d already records — inside a split column
   the R5 two-track header puts the lede BESIDE the heading and bottom-aligns
   it. Measured 2026-08-22 on the seventeen unscoped bands: `.ioc-head`
   computed `399.516px 266.359px` with `align-items:end`, so the lede began
   at x=529 in a 723px column and its baseline sat on the h2's — reading as
   a stranded fragment in the gutter rather than as the heading's lede. The
   R5 pattern is correct for a FULL-WIDTH band header (WIRING.md §5.3) and
   wrong inside a split column; that is a placement rule, not a Home rule. */
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-head,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:0;margin-bottom:24px}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-head h2,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-head h2{margin:0 0 16px;font-size:40px;font-weight:800;letter-spacing:-.038em;max-width:20ch}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-sh-lead,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-sh-lead{max-width:50ch}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-sh-lead p,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-sh-lead p{margin:0}

/* ③e the contact rail + the form card — the band's two remaining comp gaps
   (design-review 2026-08-21, Home.dc.html §Enquiry: the pitch column's
   contact list at :276-281, the form card at :283). LEFT: the comp runs one
   380px rail below the lede — the ③b figure and the phone/email list share
   a width, each row 15px/700 ink on its own hairline (border-top on the
   list, border-bottom per row), 17px accent icons. The kit base
   `.ioc-rea-direct` (infoc-cms.css:1612-1615) is the compact 14.5px/600
   variant sized for the B-17-V09 solution bands and left this rail
   unbounded — measured 561px at 1440 against the figure's 380, the ragged
   right edge the owner flagged. RIGHT: the comp draws the form as a white
   bordered card (30px padding); the mount ships chrome-less, so the fields
   float directly on the band ground. Scoped to the home instance — the 16
   B-17-V09 placements keep the base treatment.
   T17: `16px 0` snaps the comp's `15px 2px` row padding (15 ties UP per
   CMS-D-117, 2 snaps to 0); 32px snaps the card's 30px UP; gap 12 is the
   comp's own step; font-size/icon width are §N non-spacing, verbatim. */
  /* CMS-D-176 carries the boxed rail to all eighteen bands. ③e's own text
   above already names the defect as GENERAL, not Home's — it says the kit
   base "is the compact 14.5px/600 variant sized for the B-17-V09 solution
   bands and left this rail unbounded ... the ragged right edge the owner
   flagged". It then fixed Home only. Measured 2026-08-22 on the other
   seventeen: 723px of hairline over roughly 245px of text.

   WHY 380px WHERE THERE IS NO FIGURE (owner ruling 2026-08-22). On Home the
   380 is DERIVED — it matches the figure directly above it. The sixteen V09
   bands carry no figure, so nothing there derives it and the number would
   otherwise be invention (§8 rule 1). The ruling makes 380 the house rail
   width outright: one component, one size, every page. That is a stated
   decision, not a measurement, and it is recorded as one. */
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-rea-direct,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-rea-direct{max-width:380px;margin-top:0;padding-top:0;gap:0;border:1px solid var(--ioc-border-subtle);background:var(--ioc-surface,#fff)}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-rea-direct a,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-rea-direct a{padding:16px;gap:12px;border-bottom:1px solid var(--ioc-border-subtle);font-size:15px;font-weight:700}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-rea-direct a:last-child,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-rea-direct a:last-child{border-bottom:0}
body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-rea-direct a svg,
body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-rea-direct a svg{width:17px;height:17px}
/* The FINDING-001 mount card is RETIRED (owner, 2026-08-21): the rendered
   `form.ioc-form` inside the mount now carries its own identical card
   (1px hairline, 32px inset), so the mount rule drew a second nested
   frame around it — the mount stays chrome-less and the form IS the box. */

/* ③f the CONTACT RAIL becomes a COMPLETE BOX (owner ruling 2026-08-21,
   superseding the comp's open-rule treatment — the same authority lane as
   §W/§X): ③e above closes into the `.ioc-matrix` joined-box idiom — outer
   hairline, surface ground, one internal divider, the last row closed by
   the frame.
   The hero credentials strip took the same box for one commit (42548b5),
   the owner rejected it the same day, and the V08-chips conversion landed
   once the concurrent session's wave committed: B-01-V20 renders
   chipsLabel + four fixed-binding chips now (gen-hero-chips.mjs), and the
   ioc-hero-v6-cred-* rules retired with the strip. */

/* ③c route radios — separately framed cards on the comp's TRACK WIDTH, not on
   its literal `repeat(3,1fr)` (Home.dc.html:340).
   The kit draws this group as one joined table (outer border + `gap:0` +
   `box-shadow` hairlines); the comp draws separate cards, so the outer frame
   and the shadow hairlines come off in the same breath as the gap goes on —
   a gap under the kit's treatment would leave four stray offset hairlines.

   WHY A TRACK MINIMUM RATHER THAN A COLUMN COUNT. D1 (comp 3 routes vs the
   preset's 4) is an open human ruling, so the count is not the sheet's to
   state. 186px IS the comp's own card width, arithmetic not invention: its
   form column is 1.1/2.0 of (1280 - 64 padding - 56 gap) = 638px, less its
   60px box padding = 578px, less two 10px gaps, over three cards = 186px. So
   `repeat(auto-fit,minmax(186px,1fr))` reproduces the comp EXACTLY — a single
   row of three — the moment D1 resolves to three, and today's four fall to
   3 + 1 rather than being crushed.

   THE ALTERNATIVE WAS MEASURED AND REJECTED, not assumed. `grid-auto-flow:
   column` does give one row for any count, and it was tried first: with the
   rendered FOUR in the live 576px form column it yields 138px cards whose text
   column is 82px against a 76px label and an 85px longest description word, so
   the cards either overflowed onto their neighbours (scrollWidth 134 against
   clientWidth 100 at a 1040px viewport) or, with `overflow-wrap:anywhere`,
   shattered words mid-character ("Consultin/g", "professional/s"). A layout
   that breaks words is not "one row", it is the two-row defect wearing a
   disguise. Screenshotted at 1440 before the change was reverted.

   T17 NOTE — THE GAP ROUNDS DOWN, against the tie convention. The comp's 10px
   is equidistant between 8 and 12 and CMS-D-117 breaks ties upward, which
   would be 12px. It is 8px here because the choice is not cosmetic: three
   186px tracks plus two gaps must fit 576px, so a 12px gap (582px) collapses
   the comp's three-across to two and an 8px gap (568px) does not. The scale
   decides which values are legal; the layout decides which legal value.

   Stacks at the same 620px the kit already stacks `.ioc-form-grid` at
   (infoc-cms.css:1423), so both halves of the form reflow together. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choices{grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:8px;border:0;background:transparent;overflow:visible}
/* --- CMS-D-124 ③ · FOUR routes, so defer to the kit's own four-option rule.
   The 186px track above is derived from "the comp's three-across", and D1 has
   now ruled the route set stays at FOUR (`consulting/academy/talents/support`):
   the register governs fields, and `support` is a real destination the comp's
   3-radio markup would silently drop. Four 186px tracks cannot fit the 576px
   form column, so auto-fit lays out 3 + 1 — no overflow (measured 0px at
   1440/1280/1024/768/390), but an orphan on a second row.

   The frozen kit already answers this exactly, and it is answered by CONTENT
   COUNT rather than by breakpoint: `.ioc-choices:has(>:nth-child(4):last-child)`
   → `repeat(2,minmax(220px,1fr))` (infoc-cms.css:1904), i.e. a balanced 2x2.
   That rule is live at 1024 today and is only lost above it because the
   attribute-scoped selector above outranks it. This restores it at the same
   specificity instead of re-deriving a track width — the layout follows the
   number of routes, so if D1 is ever revisited the grid follows without a
   second edit.

   `minmax(0,1fr)` not the kit's `minmax(220px,1fr)`: the same overflow lesson
   §Y records — a floor wider than half the container reintroduces the spill
   this whole block exists to prevent. Two tracks in 576px measure 284px each,
   comfortably above the 220px the kit was protecting. No new spacing value:
   the 8px gap above is unchanged and `grid-template-columns` is not a spacing
   property (§N). --- */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choices:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choice{border:1px solid var(--ioc-border-subtle);box-shadow:none;padding:12px 16px;gap:12px}
/* `.ioc-choice` is a flex row whose text block is an ordinary flex item, so its
   automatic minimum size is min-content and it REFUSES to shrink. Measured, not
   assumed: at a 1040px viewport the card's clientWidth was 100 and its
   scrollWidth 134 — the label and its `small` were spilling 34px across the
   neighbouring card, which the kit's joined-table `overflow:hidden` used to
   clip and separate cards no longer can. `min-width:0` restores wrapping. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choice>span{min-width:0;overflow-wrap:break-word}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choice:hover{border-color:var(--ioc-blue);background:var(--ioc-g10)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choice:has(input:checked){box-shadow:none;border-color:var(--ioc-blue);background:color-mix(in oklch,var(--ioc-blue) 5%,var(--ioc-surface))}

/* --- ③e SIMPLIFY + BOLD, owner ruling 2026-08-17 · VISUAL ONLY ---
   Same Home hook, same field set. The owner chose the visual-only reading
   explicitly over two structural ones, so NOTHING here removes a field, a
   route or a line of copy: the `home-router` preset, `forms.json` and
   `content.json` are untouched and no re-seed is implied.

   WHAT WAS ACTUALLY WRONG, measured live at 1440 before these rules:
   ① the form spoke at ONE WEIGHT. Field labels, the fieldset legend and the
      route titles all computed 13-15px at weight 600, so nothing led. A form
      with no strongest element makes the reader parse it linearly.
   ② the field underline was `--ioc-border-strong` (#8d8d8d) — a mid grey that,
      under ③a's old grey band, sat on grey fill and read as almost nothing.
   ③ the submit was a 48px shrink-to-fit button floating mid-column, weaker
      than the four bordered route cards directly above it.

   Two levels, not one: labels/legend lead at 700, the route SUB-lines drop to
   `--ioc-g70`. That is the simplification — it is a hierarchy, where before
   there was a flat field of near-equal weights. Nothing is hidden.

   T17: no padding, margin or gap is introduced or changed anywhere in this
   block. `font-size`, `font-weight`, `height`, `min-height`, `width` and
   `border-width` are not spacing properties (§N), so every value here is
   outside the scale's remit by construction rather than by rounding. */

/* ③e-i labels lead — 14/700 ink, against the route titles' 16/700. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-field>label,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choicegroup>legend{font-size:14px;font-weight:700;color:var(--ioc-text-primary)}

/* ③e-ii route title up, route sub-line back — the one pair that carries the
   hierarchy. `small` keeps its size; only its colour recedes.

   `.ioc-choicegroup:not(.ioc-consent)` NAMES WHICH CHOICE GROUP THIS MEANS, and
   that qualifier is a bug fix, not tidying (owner-reported 2026-08-19). Home's
   form has TWO choice groups — the four ROUTE cards this rule was written for,
   and the single PDPA consent tick — and an unqualified `.ioc-choice b` swallowed
   both, so the agree line rendered at 16px against §T's 12.5px small print. It
   outranked §T (0,4,1 against 0,3,1), and being scoped to `p-home-` as well as
   the variant it hit exactly one surface in the site: /solutions runs the SAME
   B-17-V10 and was always correct, which is why nothing else ever looked wrong.
   Measured after the fix at 41 consent ticks over 28 routes, all 12.5px.
   Fixed HERE rather than by raising §T's specificity, because §T is the consent
   contract and a block rule that has to be out-shouted by it is a rule that
   never said what it meant. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choicegroup:not(.ioc-consent) .ioc-choice b{font-size:16px;font-weight:700}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choice small{color:var(--ioc-g70)}

/* ③e-iii the field rule — 2px ink, replacing ① site-wide's 1px #8d8d8d. The
   fill stays `--ioc-g10`: against ③a's new white ground it finally reads, so
   removing it would undo the contrast the ground change just bought. Focus
   still swaps the COLOUR only (the ① focus rule), so the 2px weight survives
   focus and the state change stays a hue change, not a jump in thickness. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-field input,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-field select,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-field textarea{border-bottom:2px solid var(--ioc-text-primary)}

/* ③e-iv the submit becomes the form's terminal element: full column width,
   56px, 700. It must out-weigh the four route cards above it, which it did
   not at 48px/600 shrink-to-fit. `min-height` is restated for the same
   `div.showcase .btn` reason ② states — `height` alone loses to it. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-form-actions .btn{width:100%;height:56px;min-height:56px;font-size:16px;font-weight:700}

@media(max-width:860px){
  /* The kit collapses `.ioc-nav-split` here (infoc-cms.css:1306) with a bare
     `.ioc-nav-split`; the override above is (0,3,1) and would otherwise hold
     the two columns open past the breakpoint.

     `minmax(0,1fr)` rather than the kit's bare `1fr` — the §Y trap again (see
     the tabs rule at §"V10 sidebar" for the mechanism). This selector is
     (0,3,1) and therefore outranks the general `.ioc-nav-split` repair below,
     so leaving it a bare `1fr` would have re-armed the defect on the home
     enquiry band alone while every other page was fixed. */
    /* CMS-D-176 widened the override above from Home's instance to both
     enquiry variants, so this guard widens with it IN THE SAME BREATH. It
     is not optional bookkeeping: the override is (0,4,1) and the general
     repair below is (0,2,1), so a V09 band left out of this list would hold
     TWO columns open at 320px on sixteen inner pages — the WCAG 2.2 SC
     1.4.10 failure the repair below exists to prevent, re-armed on more
     pages than it ever affected. */
  body.ioc-site [data-block-instance][data-variant-id="B-17-V09"] .ioc-nav-split,
  body.ioc-site [data-block-instance][data-variant-id="B-17-V10"] .ioc-nav-split{grid-template-columns:minmax(0,1fr)}
}

/* --- `.ioc-nav-split` REFLOW REPAIR (WCAG 2.2 SC 1.4.10), owner ruling
   2026-08-17. The kit's own mobile collapse (infoc-cms.css:1306) is a bare
   `1fr`, and the kit sheet is byte-pinned (C1), so the repair is stated here.

   Measured on /academy at 320px: the collapsed track computed 292.609px
   inside a 256px content box, carrying `.ioc-head` and everything under it
   out with it. With this and the tabs rule, that page's
   documentElement.scrollWidth goes 364 -> 320 and the reachable
   window.scrollX goes 5 -> 0.

   SCOPED TO THE COLLAPSE, deliberately. The kit sheet carries ~20 of these
   bare `1fr` mobile collapses and they are all the same latent trap, but only
   the two repaired here were MEASURED to overflow. A blanket rewrite of all
   twenty would be a change of the same size as the audit that has not been
   done — and `minmax(0,1fr)` fixes the TRACK, not a child that cannot shrink,
   so it is not a guaranteed win everywhere it is applied. The rest stay
   latent and named, not silently swept. §Y repaired a third instance
   (`.footer-cta-grid`) the same way and for the same reason. */
@media(max-width:860px){
  body.ioc-site .ioc-nav-split{grid-template-columns:minmax(0,1fr)}
}

/* --- HERO CTA LABEL, the last 320px contributor (same ruling). Not a grid
   trap this time and worth stating plainly, because the button LOOKS fine:
   `.ioc-actions .btn` measured 256px wide — correctly constrained — while its
   own scrollWidth was 293. The content was spilling past the button's edge,
   which is why the element that surfaced in the overflow scan was the 18px
   arrow `<svg>` sitting at x=307.6 on a page 320 wide, not the button.

   CAUSE: `white-space:nowrap` plus `justify-content:space-between` and a 40px
   gap. On /solutions the label is "Request a roadmap discussion" — 28
   characters that cannot wrap, so at 320 the text alone claims ~195px and the
   gap and glyph have nowhere to go. Trimming the gap does NOT fix it: 40 -> 8
   still leaves ~261px against a 256px button. The label has to be allowed to
   wrap.

   460px, not 320px: the failure is a function of LABEL LENGTH, not of the
   WCAG target width, and a long CTA runs out of room well before 320. Above
   it every one of these buttons still fits on one line, so the nowrap pill
   the design intends is untouched where it works.

   T17: `gap:16px` is a scale step. */
@media(max-width:460px){
  body.ioc-site .ioc-actions .btn{white-space:normal;gap:16px}
}
@media(max-width:620px){
  body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choices{grid-template-columns:1fr}
  /* This bare `.ioc-choices` rule HAS NEVER APPLIED since CMS-D-124 added the
     `:has(>:nth-child(4):last-child)` 2x2 above it. `:has()` takes the
     specificity of its most specific argument, so that selector scores
     (0,3,1)+(0,2,0) and outranks this one — a media query does not add
     specificity, so narrowing the viewport changed nothing.

     Measured at a 390px viewport before this line: the grid stayed
     `126px 126px`, each card's text span computed 64px wide, and all four
     route titles shattered mid-word — "Consult/ing", "Academ/y",
     "Gatewa/y", "custom/er". This is exactly the failure §③c's own comment
     describes and rejects ("a layout that breaks words is not 'one row', it
     is the two-row defect wearing a disguise"); it simply reappeared one
     breakpoint lower when the 2x2 rule was introduced to solve the orphan
     at 1440.

     Matching the specificity rather than raising it: same selector, so
     source order decides, and this block is last. */
  body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-17-V10"] .ioc-choices:has(>:nth-child(4):last-child){grid-template-columns:1fr}
}

/* ============================================================
   Y · 320px reflow (WCAG 2.2 SC 1.4.10) — the home-band footer CTA
   (`.footer-cta`/`.footer-action`, the embedded governed enquiry form)
   overflowed horizontally on every page below ~460px, measured at
   documentElement.scrollWidth 524px against a 320px viewport.

   ROOT CAUSE, confirmed live (not guessed): infoc-cms.css:565's
   `@media(max-width:900px){.ioc-footer .footer-cta-grid{grid-template-
   columns:1fr}}` is a BARE `1fr` track. A `1fr` track's automatic minimum
   size is `auto` (its content's max-content width), not zero — CSS Grid
   §7.2.3 — so the track grows to fit `.footer-action`'s embedded
   `<form class="ioc-form">` (442px of non-wrapping radio/field content)
   instead of shrinking to the 305px column the grid actually has. That
   sheet is sha256-pinned (CMS-D-054) and cannot be edited; `minmax(0,1fr)`
   is the standard, non-destructive correction (same track proportions,
   real zero minimum) and belongs here, on the same selector, at the same
   breakpoint, so it simply wins the cascade by SOURCE ORDER (this sheet
   loads last) without touching specificity or fighting the frozen rule.
   ============================================================ */
@media(max-width:900px){
  body.ioc-site .ioc-footer .footer-cta-grid{grid-template-columns:minmax(0,1fr)}
}

/* A THIRD flavour of the same class, this one flexbox not grid: `.ioc-field`
   is `display:flex;flex-direction:column` (infoc-cms.css:1415), whose
   default `align-items:stretch` should size a `<select>` child to the
   field's own width — except flex items ALSO default to `min-width:auto`,
   which for a `<select>` means its intrinsic minimum is its LONGEST option's
   rendered width, not zero. `route_detail` ("Solution area") carries
   "Cloud, modern work and security" as an option; on the contact-router
   preset this alone pushed the B-17 form (and the whole page) past a 320px
   viewport even after the grid-track fixes above — confirmed by bisection
   (hiding just this one `<select>` was what dropped scrollWidth back to the
   viewport width). `min-width:0` is the standard release valve for exactly
   this default; the closed control still shows the selected option (native
   `<select>` truncates rather than wraps), and its own popup is unaffected. */
body.ioc-site .ioc-field select{min-width:0}

/* A FOURTH: `#enquiry .ioc-nav-split` (infoc-cms.css:1618 — the enquiry
   section's aside+form split, `minmax(18rem,23rem) minmax(0,1fr)`) collapses
   at infoc-cms.css:1619 (`@media(max-width:900px)`) to a bare
   `grid-template-columns:1fr` — the same missing-`minmax(0,…)` shape as the
   footer-cta-grid fix above, just on a different selector. Confirmed live on
   Contact (`#enquiry`): `.ioc-nav-split` computed a single 326px track while
   its own box was only 241px wide, so the form column (needing 324px for
   its fields) never actually got the page's width, and the excess bled out
   as page-level horizontal scroll. `body.ioc-site` clears the frozen rule's
   `#enquiry .ioc-nav-split` (1,1,0) unambiguously (1,2,0). */
@media(max-width:900px){
  body.ioc-site #enquiry .ioc-nav-split{grid-template-columns:minmax(0,1fr)}
}

/* A FIFTH, and — walked exhaustively down this one pathway (the B-17
   enquiry form's own box, `.ioc-nav-split` > the form column >
   `.ioc-form-grid` > the field row itself) — the last one on it: once
   `.ioc-nav-split` correctly stopped over-growing, its form column was left
   with genuinely less room (191px) than `.ioc-form-grid` still claimed
   (276px), for the identical reason again — infoc-cms.css:1414's
   `grid-template-columns:1fr 1fr` collapses at infoc-cms.css:1423
   (`@media(max-width:620px)`) to a bare `1fr`. This is the same class found
   four times above; `grep -c "grid-template-columns:1fr}" infoc-cms.css`
   returns far more hits sitewide, most on blocks with no unbreakable
   content wide enough to ever trigger the auto-minimum default — the B-17
   enquiry form (this file's own `<select>` and 4-choice radio grid) is what
   surfaces it in practice, which is why the fix stops at the boundary of
   that one form rather than pre-emptively rewriting every occurrence. */
@media(max-width:620px){
  body.ioc-site .ioc-form-grid{grid-template-columns:minmax(0,1fr)}
}

/* SECOND layer of the same overflow, exposed only once the grid track above
   stops force-growing: the "journey" field (`one/convert-form`'s 4-option
   route picker, seeded on the home band) is a `.ioc-choicegroup full` >
   `.ioc-choices` radio grid. infoc-cms.css:1904's
   `.ioc-choices:has(>:nth-child(4):last-child){grid-template-columns:
   repeat(2,minmax(220px,1fr))}` sits OUTSIDE any media query — and, measured
   directly (a first attempt at overriding it with a bare `.ioc-choices`
   selector here was silently outranked), its TRUE specificity is (0,3,0):
   `:has()`'s own specificity is that of the most specific complex selector
   in its argument, and `> :nth-child(4):last-child` carries TWO
   pseudo-classes, not one. That beats the frozen sheet's OWN intended mobile
   collapse, `@media(max-width:640px){.ioc-choices{grid-template-columns:
   1fr}}` at infoc-cms.css:1965 — (0,1,0) — at every viewport: a 4-option
   group never actually collapses to one column. Two 220px-minimum tracks
   (440px) is what does not fit a 320px viewport. This repeats the frozen
   rule's own `:has()` clause so the case matches exactly, prefixed with
   `body.ioc-site` for headroom rather than a bare specificity tie — (0,4,0)
   unambiguously outranks (0,3,0), so this wins on ITS OWN weight, not merely
   on being declared later. */
@media(max-width:640px){
  body.ioc-site .ioc-choices:has(>:nth-child(4):last-child){grid-template-columns:1fr}
}

/* THIRD instance of the SAME bare-`1fr` class, found by re-walking the site
   at 320px after the two fixes above (business-applications, ~30px
   overflow — not the footer, so outside the reported defect's own
   description, but the identical mechanism). infoc-cms.css:1367's
   `.ioc-media{grid-template-columns:1fr 1fr}` collapses to a bare
   `1fr` at infoc-cms.css:1375 (`@media(max-width:860px)`), which is the
   B-11 image/copy band (`.ioc-media-fig` + a copy column) used on multiple
   solution pages — same automatic-minimum defect, same fix. */
@media(max-width:860px){
  body.ioc-site .ioc-media{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   L · B-01-V20 V6 Home hero (HOME-FIX-PLAN F1/F2/F3/F21/F22/F23/F24).
   Deliberately ALL-NEW classes (`ioc-hero-v6-*`), not `.ioc-hero`/`.btn`/
   `.btn-tertiary` — B-01-V08 (the variant this replaces on Home) inherited
   two cascade collisions from those shared classes (F2: `div.showcase h1`
   at 0-1-2 beating `.ioc-hero h1` at 0-1-1; F3: a later same-specificity
   `.btn`/`.btn-tertiary` block winning). A fresh, unshared class tree has
   nothing to collide with — styled once, correctly, here — rather than
   re-fighting a cascade this variant does not use.
   ============================================================ */
body.ioc-site .ioc-hero-v6{background:var(--ioc-surface,#fff)}
/* CMS-D-126 ① — owner-directed right-bleed deviation from Home.dc.html's
   1280-centered hero. The comp caps the hero at 1280 under a 1360 header, so
   ≥1440 viewports show dead gutters both sides and the rotator's landscape
   stills cover-crop hard in a ~545px window. Ruling: the copy column sits on
   the page's alignment spine (track 1 resolves to the same inset the
   sections' `.wrap` gets — (100% − 1360)/2 + 32 since §O's 2026-08-21 spine
   ruling; originally the comp's 1280 grid), and the visual panel takes the
   rest of the row to the viewport edge. The geometry lives in
   grid-template-columns DELIBERATELY: the T17 v6
   scan grades px inside spacing properties (and hard-fails nested math
   there), while grid-template-columns is outside its scope by its own ruling
   (scripts/spacing-gate.mjs — "not spacing"). 668px is the comp's own copy
   track (1216 × 1.1 ÷ 2); calc(50% − 20px) is what makes track 1 solve to
   the grid inset at every width — 20 = 668 − 648. max-width:1920 stops the
   panel going panoramic on ultra-wide monitors: an uncapped window passes
   2.6:1 and starts cropping MORE (top/bottom), defeating the ruling's point. */
body.ioc-site .ioc-hero-v6-wrap{max-width:1920px;margin:0 auto;display:grid;grid-template-columns:minmax(32px,1fr) minmax(0,668px) minmax(0,calc(50% - 20px));gap:0;align-items:stretch}
body.ioc-site .ioc-hero-v6-copy{grid-column:2;padding:clamp(48px,7vw,72px) 48px clamp(48px,7vw,72px) 0}

body.ioc-site .ioc-hero-v6-kicker{margin:0 0 16px;font-family:var(--ioc-mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ioc-blue)}
body.ioc-site .ioc-hero-v6-h1{margin:0 0 24px;font-size:clamp(34px,4.4vw,62px);line-height:1.02;font-weight:800;letter-spacing:-.045em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-hero-v6-accent{color:var(--ioc-blue)}
body.ioc-site .ioc-hero-v6-lede{margin:0 0 32px;font-size:clamp(16px,1.15vw,18.5px);line-height:1.6;max-width:54ch;color:var(--ioc-text-primary)}

body.ioc-site .ioc-hero-v6-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
body.ioc-site .ioc-hero-v6-cta-primary{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 24px;background:var(--ioc-blue);color:var(--ioc-text-on-color,#fff);font-size:16px;font-weight:700;white-space:nowrap}
body.ioc-site .ioc-hero-v6-cta-primary:hover{background:var(--ioc-blue-hover)}
body.ioc-site .ioc-hero-v6-cta-primary:focus-visible{outline:2px solid var(--ioc-blue);outline-offset:2px}
body.ioc-site .ioc-hero-v6-cta-secondary{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 8px;background:transparent;color:var(--ioc-text-primary);font-size:16px;font-weight:600;white-space:nowrap}
body.ioc-site .ioc-hero-v6-cta-secondary:hover{color:var(--ioc-blue)}
body.ioc-site .ioc-hero-v6-cta-secondary:focus-visible{outline:2px solid var(--ioc-blue);outline-offset:2px}
body.ioc-site .ioc-hero-v6-cta-primary svg,
body.ioc-site .ioc-hero-v6-cta-secondary svg{width:15px;height:15px;flex:none}

/* The credentials strip retired 2026-08-21 (owner-directed): B-01-V20's
   platform line renders as the V08 chips row now (kit .ioc-chips,
   infoc-cms.css:1167-1172) — gen-hero-chips.mjs swapped the template and
   the ioc-hero-v6-cred-* vocabulary left with it. The chips need only one
   scoped guard: a chip whose label slot is empty never renders (the kit
   guards tags this way at :1983-1985; the fixed-count bindings make an
   empty fourth slot reachable from admin). */
body.ioc-site [data-variant-id="B-01-V20"] .ioc-chip:has(> span:empty){display:none}

/* -- right column: the rotator panel -- */
body.ioc-site .ioc-hero-v6-visual{grid-column:3;background:var(--ioc-blue);color:var(--ioc-text-on-color,#fff);display:flex;flex-direction:column;position:relative}
body.ioc-site .ioc-hero-v6-slide-img{position:relative;display:block;flex:1;min-height:300px;background-color:var(--ioc-g100)}
body.ioc-site .ioc-hero-v6-slide-img .infoc-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The slide dissolve (HeroSlider-standalone.html §2a: `transition:opacity
   1200ms linear`). Layers already stack — the host is `position:relative` and
   every layer is `inset:0` — so the ramp is all that was missing; the rotor
   used to swap one <img>'s src, which is a cut, not a dissolve.

   OPAQUE IS THE DEFAULT AND `is-under` IS THE EXCEPTION, deliberately: the
   server renders exactly one bare <img> for slide 1, so if the transparent
   state were the default that image would be invisible until the runtime
   loaded — a blank hero for anyone on a slow or failed script. The class only
   ever lands on a layer the runtime itself created or is retiring. */
body.ioc-site .ioc-hero-v6-slide-img .infoc-media{opacity:1;transition:opacity 1200ms linear}
body.ioc-site .ioc-hero-v6-slide-img .infoc-media.is-under{opacity:0}
/* The comp stops the rotation under reduced motion (the runtime never starts
   the timer). Manual dot presses still swap, so flatten the ramp too — an
   instant change is the honest behaviour there, not a 1.2s fade. */
@media(prefers-reduced-motion:reduce){
  body.ioc-site .ioc-hero-v6-slide-img .infoc-media{transition-duration:.001ms}
}
body.ioc-site .ioc-hero-v6-slide-body{padding:24px clamp(28px,4vw,40px) 32px}
body.ioc-site .ioc-hero-v6-slide-k{margin:0 0 8px;font-family:var(--ioc-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
body.ioc-site .ioc-hero-v6-slide-t{display:block;font-size:23px;line-height:1.16;font-weight:800;letter-spacing:-.025em;min-height:48px}
body.ioc-site .ioc-hero-v6-slide-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:16px}
body.ioc-site .ioc-hero-v6-slide-link{display:inline-flex;align-items:center;font-size:14.5px;font-weight:700;color:var(--ioc-text-on-color,#fff);white-space:nowrap;border-bottom:2px solid rgba(255,255,255,.22);padding-bottom:4px}
body.ioc-site .ioc-hero-v6-slide-link:hover{border-color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-hero-v6-slide-link:focus-visible{outline:2px solid var(--ioc-text-on-color,#fff);outline-offset:2px}

body.ioc-site .ioc-hero-v6-slide-controls{display:flex;gap:12px;align-items:center}
body.ioc-site .ioc-hero-v6-pause{width:26px;height:26px;border:0;padding:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-hero-v6-pause svg{width:14px;height:14px}
body.ioc-site .ioc-hero-v6-pause:focus-visible{outline:2px solid var(--ioc-text-on-color,#fff);outline-offset:2px}
body.ioc-site .ioc-hero-v6-dots{display:flex;gap:8px;align-items:center}
body.ioc-site .ioc-hero-v6-dot{width:24px;height:24px;border:0;padding:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
body.ioc-site .ioc-hero-v6-dot:focus-visible{outline:2px solid var(--ioc-text-on-color,#fff);outline-offset:2px}
body.ioc-site .ioc-hero-v6-dot [data-dot-mark]{display:block;width:10px;height:10px;background:rgba(255,255,255,.55);transition:width .18s var(--ioc-ease),background-color .18s var(--ioc-ease)}
body.ioc-site .ioc-hero-v6-dot.is-active [data-dot-mark]{width:20px;background:var(--ioc-text-on-color,#fff)}

@media(max-width:1040px){
  /* CMS-D-126 ① — below the collapse the bleed is retired and the comp's
     original single-column geometry returns byte-for-byte: symmetric 32px
     gutters via wrap padding (the desktop gutter moved into track 1, which
     no longer exists here) and auto placement. Mobile is NOT deviated. */
  body.ioc-site .ioc-hero-v6-wrap{grid-template-columns:1fr;padding:0 32px}
  body.ioc-site .ioc-hero-v6-copy{grid-column:auto;padding:clamp(32px,8vw,48px) 0}
  body.ioc-site .ioc-hero-v6-visual{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  body.ioc-site .ioc-hero-v6-dot [data-dot-mark]{transition:none}
}

/* ============================================================
   M · B-03-V20 V6 Platform band (HOME-FIX-PLAN F6/F7/F8/F25/F26/F27 —
   Home.dc.html:232-256). The band's GROUND needs no rule here: the variant's
   root is `ioc-block[[attr:tone_01]]`, so the stored `tone:"dark"` resolves
   through the kit's own `.ioc-block.dark` (infoc-cms.css:1141 -> --ioc-g100,
   which the Appearance typography block sets to the comp's exact #000000).
   That is the whole of F6 — one live binding, no colour declared here.

   Text colour is likewise inherited, not restated: `.ioc-block.dark`'s
   companion rules already paint the kicker (:1152), h2/strong (:1143) and
   paragraphs (:1142) for an ink band. What this section owns is (a) geometry,
   (b) the two places the inherited dark-band colour would be WRONG because
   the rows sit on their own white ground, and (c) two size overrides that
   have to out-specify rules the kit sets for other contexts:

     - `div.showcase h2` (infoc-cms.css:2075, 0-1-2) is 4.7vw = 67.68px at a
       1440 viewport and beats `.ioc-head h2` (:1153, 0-1-1) ON SPECIFICITY,
       not source order — the F2 mechanism. `body.ioc-site .ioc-plat-head h2`
       is 0-2-2 and wins, restoring the comp's 40px.
     - `.ioc-block.dark p` (:1142) is --ioc-g30; the comp's lead is white at
       .85 opacity.
     - the row title sits on `--ioc-surface`, where the inherited
       `.ioc-block.dark strong` white would be invisible.

   BOTH of those last two need MORE specificity than the kit rule alone
   suggests, and a first pass got it wrong in exactly the way §L records:
   `scripts/copy-render-kit-runtime.mjs` HARVESTS every kit colour rule that
   carries a class into `apps/one/public/infoc-site-overrides.css` with a
   `body.ioc-site` prefix, so `.ioc-block.dark strong` (0-2-1) ships a second
   time as `body.ioc-site .ioc-block.dark strong` (0-3-1) — and 0-2-2 loses to
   it. Verified live before the fix: the row titles computed
   rgb(255,255,255) on a rgb(255,255,255) ground, and the lead computed
   rgb(198,198,198). The selectors below are 0-3-2 and 0-4-0 against the
   harvest's 0-3-1. Grade any NEW colour rule in this section against the
   HARVESTED copy, never against the kit source.

   SPACING. The comp's own values are 56px (column gap), 18px (row gap),
   20px (row side padding) and 10/22px head margins — none of them on
   DESIGN.md's scale (4 · 8 · 12 · 16 · 24 · 32 · 48), and
   `v6CssOffScaleCeiling` is shrink-only AND ALREADY SATURATED at 2. Each
   rounds to the nearest scale step (48 · 16 · 24 · 12 · 24), exactly as §J
   did with the utility bar's 20px gaps. The section's own 84/92px vertical
   rhythm is deliberately NOT set here: `.ioc-block` already supplies it, and
   HOME-FIX-PLAN F34 changes that rhythm for every page at once.

   No `.pa`, `.pa-side`, `.pa-fig`, `.pa-rule`, `.pa-links`, `.vh-dtabs` or
   `.vh-dpanel` rule exists or is needed — B-03-V12's fabricated aside and
   relocated industry switcher (F26/F27) have no counterpart in this variant.
   ============================================================ */
body.ioc-site .ioc-plat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
body.ioc-site .ioc-plat-head .ioc-kicker{font-size:11.5px;letter-spacing:.16em;opacity:.7;margin:0 0 12px}
/* The comp's Platform kicker is a bare <p> — no 22px accent dash (:1150). */
body.ioc-site .ioc-plat-head .ioc-kicker::before{display:none}
body.ioc-site .ioc-plat-head h2{margin:0 0 16px;font-size:40px;line-height:1.06;font-weight:800;letter-spacing:-.035em;text-wrap:initial}
/* --- CMS-D-124 ② · the LIVE instance of the ink-ground skin-blindness §H
   closed. These three rules sit on `.ioc-block.dark` (= `--ioc-g100`) and read
   `--ioc-text-on-color`, which is a FIXED `#ffffff` the emitter never inverts.
   On the `dark` skin `--ioc-g100` resolves LIGHT, so white-on-light measured
   1.10:1 — and unlike `.ioc-cta-band.dark`, which no seeded page uses, THIS
   band renders on the home page today.

   `--ioc-text-on-primary` is the emitter's inverting step (`#161616` on dark,
   `#ffffff` otherwise), so the shipped `v6` skin is byte-unchanged and only the
   dark skin moves. The lead keeps its own `opacity:.85` rather than taking
   `--ioc-text-on-ink-muted`: that role is ALREADY the muted step, and stacking
   the two would land the lead under AA on dark. Same reasoning for the link's
   2px underline and the focus ring — the ring is a non-text UI indicator, so it
   is 1.4.11 at 3:1, which the fixed white also failed. --- */
body.ioc-site .ioc-plat .ioc-plat-head .ioc-plat-lead{margin:0 0 24px;font-size:15.5px;line-height:1.65;max-width:44ch;color:var(--ioc-text-on-primary,#fff);opacity:.85}
body.ioc-site .ioc-plat-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ioc-text-on-primary,#fff);border-bottom:2px solid var(--ioc-text-on-primary,#fff);padding-bottom:4px;transition:opacity .18s var(--ioc-ease)}
body.ioc-site .ioc-plat-link svg{width:15px;height:15px}
body.ioc-site .ioc-plat-link:hover{opacity:.8}
body.ioc-site .ioc-plat-link:focus-visible{outline:2px solid var(--ioc-text-on-primary,#fff);outline-offset:4px}
body.ioc-site .ioc-plat-layers{display:flex;flex-direction:column;gap:8px}
body.ioc-site .ioc-plat .ioc-plat-layer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--ioc-surface,#fff);color:var(--ioc-text-primary);padding:16px 24px;transition:background-color .11s var(--ioc-ease),transform .2s var(--ioc-ease)}
body.ioc-site .ioc-plat-layer:hover{background:var(--ioc-g10);transform:translateX(4px)}
body.ioc-site .ioc-plat-layer:focus-visible{outline:3px solid var(--ioc-blue,#0001ff);outline-offset:2px}
body.ioc-site .ioc-plat .ioc-plat-layer strong{display:block;font-size:17px;font-weight:700;letter-spacing:-.018em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-d{display:block;font-size:13.5px;line-height:1.55;color:var(--ioc-text-secondary)}
body.ioc-site .ioc-plat-layer-ic{width:24px;height:24px;color:var(--ioc-blue,#0001ff);flex:none}
body.ioc-site .ioc-plat-layer-go{width:16px;height:16px;color:var(--ioc-blue,#0001ff);flex:none}
/* Stack to one column at the same breakpoint §K uses for the sibling duo;
   `minmax(0,1fr)`, not a bare `1fr`, per §Y's overflow lesson. */
@media(max-width:860px){
  body.ioc-site .ioc-plat{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   O · Page rhythm, site measure, kickers, hero residue and the outcome-card
   frame (HOME-FIX-PLAN F34 · F35 · F36 · F37 · F38, plus the mega-panel
   DESCRIPTIONS F40 named only for its headings and tile titles). Most of
   this section is ⚠ EVERY PAGE.

   MEASURE — the D3 ruling, re-derived from the pack, then UNIFIED by owner
   ruling (2026-08-21). HOME-FIX-PLAN F34/D3 states "the comp caps content
   at 1280px". Measured, that is true of HOME and of nothing else:
   `max-width:1280px` occurs SIX times in the whole handover pack and ALL
   SIX are in `Home.dc.html` (:168 hero, :207 outcomes, :233 platform, :259
   starting point, :301 capability duo, :325 enquiry). `max-width:1360px`
   occurs 297 times across all 23 comps, including every content section of
   the other 22 pages AND Home's own shell (:85 header row, :96 mega inner,
   :100 drawer, :360 footer). So the site measure went to the pack's 1360
   and Home first KEPT its comp's 1280 through a `:has(.ioc-hero-v6)` wrap
   carve-out — comp-faithful, but it put every Home band 40px inboard of
   Home's own header and footer. The owner ruled that mismatch a defect
   (2026-08-21, the same call as the route-grid ruling of 2026-08-20 in
   the footer route band §X): ONE alignment spine site-wide — content left edge
   (100% − 1360)/2 + 32px, i.e. the 50vw−648 constant — so the carve-out is
   DELETED and the three Home rules that restated the 1280 grid as a pixel
   constant (§L's hero track math, the hero revision's copy padding, §T's
   platform rows) moved to 648 in the same change. Home now deviates from
   Home.dc.html's section widths BY RULING, exactly as CMS-D-126 ① already
   deviates its hero. Both numbers are `max-width`, which T17 does not
   grade (§N's rule).

   `--ioc-maxw` is the kit's own site-measure token (infoc-cms.css:52,
   1584px), read by `.wrap` (:226), `.ioc-footer .fwrap` (:407) and
   `.crumb .crumb-inner` (:590). Re-pointing the TOKEN moves all three at
   once, and it is what closes the footer, which §N could not: §N set the
   header row and `.mega-inner` to 1360 with explicit `max-width`
   declarations, leaving the footer 224px WIDER than the header above it.
   This is deliberately NOT in §A: §A is the register of tokens this sheet
   MINTS (with their consumers, per T16 ②b), and this mints nothing — it
   overrides a token the frozen kit already declares and already consumes.

   SPACING — read this before adding a value. `v6CssOffScaleCeiling` is at
   its ceiling of 2 with ZERO headroom and is SHRINK-ONLY, and DESIGN.md's
   scale (4 · 8 · 12 · 16 · 24 · 32 · 48) has no step above 48px. Every
   value below that the gate grades is on the scale — the comp's 36px head
   margin rounds to 32px and its 10px kicker margin to 12px, exactly as §J,
   §M and §N rounded theirs.
   THE SECTION RHYTHM CANNOT BE ROUNDED, and this is stated plainly rather
   than hidden. The comps' section padding runs 76-100px (Home's Outcomes
   and Platform are `84px 32px 92px`, Home.dc.html:206/232); the nearest —
   and only — scale step is 48px, which would cut the vertical rhythm of
   every band on every page by ~45% against 23 comps that all specify
   76-100. So the rhythm keeps the kit's OWN `clamp()` idiom for this exact
   property (`.ioc-block`, infoc-cms.css:1138 `clamp(64px,8vw,112px)`),
   retuned so the desktop maximum is the comp's: 6vw resolves to 86.4px at
   1440 and clamps to 84, 6.4vw to 92.16 and clamps to 92. A responsive
   declaration is the right form here independently of the gate — the comps
   are fixed-width 1440 designs and a frozen 84px would be worse code — but
   note that T17's V6 scan matches only a BARE `Npx` token
   (`CSS_PX_RE = /^(-?\d+(?:\.\d+)?)px$/`), so nothing inside a `clamp()`
   is counted, here or in §D's `padding:clamp(22px,2.2vw,30px)`. That is a
   DETECTOR GAP, not a licence: it is reported with this change, because the
   real finding is that the scale tops out at 48px and therefore cannot
   express section-scale rhythm at all.

   SPECIFICITY. `scripts/copy-render-kit-runtime.mjs` harvests every kit
   `color:` declaration that carries a class into `infoc-site-overrides.css`
   prefixed `body.ioc-site`, so a kit colour rule reappears one class higher
   — see §L's header for the white-on-white that cost. Every colour rule
   below is graded against the HARVESTED copy: `.ioc-kicker` (harvest :288,
   0-2-0) is met at parity and won on source order; `.mg-txt>span` (harvest
   of infoc-cms.css:354, 0-4-1) likewise; the two rules that must stay
   UNBEATEN — `body.ioc-site .ioc-block.dark .ioc-kicker` (harvest :289,
   0-4-1) and `body.ioc-site .ioc-fam .ioc-kicker` (:276, 0-3-1) — are
   deliberately left above this section's 0-2-1 kicker rule so ink bands
   keep their white kicker and family closing bands keep their accent.
   ============================================================ */

/* --- F34 · site measure. 1584 -> the pack's 1360 — every page, Home
   included (owner ruling 2026-08-21; the 1280 carve-out is retired, see
   MEASURE above). --- */
body.ioc-site{--ioc-maxw:1360px}

/* --- F34 · section rhythm. `.ioc-block.tight` is RESTATED at a specificity
   that clears this section's own rule (0-3-1 over 0-2-1): the kit declares
   it at `.ioc-block.tight` (0-2-0), which the rhythm rule above would
   otherwise have silently swallowed, inflating every tight band from 72px
   to 92px. The restated values are the kit's own — a no-op that protects
   existing behaviour, not a new choice. --- */
body.ioc-site .ioc-block{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(48px,6.4vw,92px)}
body.ioc-site .ioc-block.tight{padding-top:clamp(48px,5vw,72px);padding-bottom:clamp(48px,5vw,72px)}

/* --- F34 · section head. Comp `Home.dc.html:208`: `margin-bottom:36px`
   against the kit's `clamp(32px,4vw,56px)` (56px at 1440). 36 rounds to the
   scale's 32. --- */
body.ioc-site .ioc-head{margin-bottom:32px}

/* --- F35 · the Outcomes hairline. The BAND colour is not set here and must
   not be: `content.json` `pages[home].blocks[1].tone` is now `"soft"`, and
   `.ioc-block.soft` (infoc-cms.css:1140) resolves `--ioc-g10`, which the
   Appearance typography block sets to the comp's exact `#f9fafb`. One
   stored field, no CSS.
   The comp's `border-top:1px solid #e0e0e0` (Home.dc.html:206) is NOT
   generalised to `.ioc-block.soft`, and that is measured, not cautious: of
   the 21 soft BAND sections in the pack, 19 carry a `border-BOTTOM` and
   only 2 a border-top. A site-wide `.ioc-block.soft{border-top}` would put
   a rule on 22 pages whose comps ask for the opposite edge. Scoped to the
   V6-hero page for the same reason, and by the same hook, as the measure
   above; Home has exactly one soft band. --- */
body.ioc-site .infoc-cms:has(.ioc-hero-v6) .ioc-block.soft{border-top:1px solid var(--ioc-border-subtle,#e0e0e0)}

/* --- F2 (REOPENED) · the section `h2`. F2 was recorded complete when its
   HERO half landed, but F2 names TWO victims of one cascade: the hero `h1`
   AND the section `h2`. `div.showcase h2` (infoc-cms.css:2075, 0-1-2) beats
   `.ioc-head h2` (:1153, 0-1-1) ON SPECIFICITY, so the `h2` still measured
   67.68px on Home after the hero was fixed. Only the `h1` had been verified.

   F2's prescribed remedy — `.ioc-head h2{font-size:40px}` site-wide — is
   ALSO wrong, in exactly the way the D3 measure was wrong: 40px is a HOME
   value. Counted across the pack, section `h2` is `36px` 82 times in 17
   files and `40px` only 5 times, in `Home.dc.html` and `Search.dc.html`
   alone. So the two treatments are split the same way the measure is, on
   the same `:has(.ioc-hero-v6)` hook, and both are the comps' verbatim
   declarations rather than a rounded compromise:
     site  — `font-size:36px;line-height:1.1;font-weight:700;
              letter-spacing:-.035em;max-width:26ch` (Solutions/Academy et al)
     Home  — `font-size:40px;line-height:1.06;font-weight:800;
              letter-spacing:-.035em;max-width:24ch` (Home.dc.html:207)
   `font-size`, `line-height`, `font-weight` and `max-width` are none of them
   spacing properties, so T17 does not grade these and the comps' exact
   values survive intact.

   Specificity: the site rule is 0-2-2 and the Home rule 0-4-2 (`:has()`
   takes its most specific argument), both above `div.showcase h2`'s 0-1-2.
   `.showcase` is scheduled for deletion once the last showcase-era
   dependency goes, and these rules are deliberately independent of it. --- */
body.ioc-site .ioc-head h2{font-size:36px;line-height:1.1;font-weight:700;letter-spacing:-.035em;max-width:26ch}
body.ioc-site .infoc-cms:has(.ioc-hero-v6) .ioc-head h2{font-size:40px;line-height:1.06;font-weight:800;max-width:24ch}

/* --- F36 · kickers. Comp (`Home.dc.html:210`): JetBrains Mono 11.5px,
   weight 500, `.16em`, `#0001ff`, `margin:0 0 10px`, and NO pseudo-element.
   The kit renders `--ioc-text-primary` (`#000000` under the V6 skin) at
   12px/.12em/400 plus a 22px blue `::before` dash (infoc-cms.css:1149-1150).
   `infoc-site-overrides.css:288` was NOT the cause — it is the generated
   harvest of the kit's own rule and restates the same value, so deleting it
   would have changed nothing.
   Two shapes exist in the pack: this one (11.5/500/.16em, 4 uses, Home's
   own) and 11.5px/600/.14em (79 uses, every other page's section kicker).
   The pair differ by one weight step and .02em; colour and size — the two
   that move the eye — are identical, so Home's, as F36 names it, is used
   and the divergence is reported rather than silently averaged.
   `content:none` rather than `display:none`: it removes the box outright,
   so the parent's `gap:10px` has nothing to space. --- */
body.ioc-site .ioc-kicker{font-size:11.5px;letter-spacing:.16em;font-weight:500;color:var(--ioc-blue,#0001ff);margin:0 0 12px}
body.ioc-site .ioc-kicker::before{content:none}

/* --- F37 · hero residue. B-01-V20 and §L already landed every other half of
   F37 (flat `--ioc-surface` ground with no bottom border, `1.1fr .9fr` /
   `gap:0` / `align-items:stretch` at 1280, the standfirst on
   `--ioc-text-primary` at `54ch` with a 32px foot). TWO things survived.
   (1) The standfirst SIZE: §L's `clamp(16px,1.15vw,18.5px)` never reaches
   its own maximum — 1.15vw is 16.56px at a 1440 viewport, so the comp's
   18.5px (Home.dc.html:172) rendered as 16.56px and the clamp's third term
   was dead. 1.3vw is 18.72px at 1440 and clamps to 18.5 exactly. Corrected
   here rather than in §L only because a sibling task owns that anchor this
   hour; it belongs in §L and should be folded back.
   (2) The wordmark entrance. `idcHdrInk` (infoc-cms.css:300-301) fades the
   C from `--ioc-text-primary` to `--ioc-blue` over 1.5s on EVERY page load.
   No comp animates the wordmark — all 23 paint the C `#0001ff` from first
   paint — and it is the header's own mark, so a page's first second showed
   a mark that was not the brand's. Only the animation is dropped; the kit's
   `.infoc-logo .gc{color:var(--ioc-blue)}` (:297) then applies from paint,
   which is the comp. --- */
body.ioc-site .ioc-hero-v6-lede{font-size:clamp(16px,1.3vw,18.5px)}
body.ioc-site .ioc-header .brand .infoc-logo .gc{animation:none}

/* --- F38 · outcome-card frame. Comp (`Home.dc.html:217`): a WHITE card,
   `border-top:3px solid {o.c}`, hovering to `#f9fafb`. The kit paints a 4%
   accent tint under a 2px rule and marks the rule `!important`
   (infoc-cms.css:1649), which is why 3px is unreachable without matching
   the flag — this selector is 0-3-1 against that rule's 0-2-0, and carries
   `!important` for the same reason. The tint is NOT harvested (the harvest
   copies `color:` only), so only the kit's own declaration is contested.
   `--rf` is set on the same element by the kit's per-family rules and is
   read here unchanged, so each card keeps its own family colour.
   The hover follows to `--ioc-g10`, the token the V6 skin resolves to the
   comp's `#f9fafb` and the same one the kit's own `.ioc-card:hover`
   (:1221) already uses — with the resting tint gone, a 9% accent mix on
   hover would have been a bigger jump than the comp's wash, in the wrong
   colour. The comp's `box-shadow:inset 0 0 0 1px #0001ff` hover ring is
   deliberately not added: F38 does not name it and CMS-D-066 r4 refuses
   shadows as structure.
   The CTA line is the comp's 14px/700 against the kit's 15px/600; its
   COLOUR is untouched so `[data-route-fam] .ioc-card-link{color:var(--rfi)}`
   (harvest, 0-4-1) keeps driving the per-family tint. --- */
body.ioc-site .ioc-cards [data-route-fam]{background:var(--ioc-surface,#ffffff);border-top:3px solid var(--rf)!important}
body.ioc-site .ioc-cards [data-route-fam]:hover{background:var(--ioc-g10,#f4f4f4)}
body.ioc-site .ioc-card .ioc-card-link{font-size:14px;font-weight:700}

/* --- F40 residue · mega-panel DESCRIPTIONS. §N closed the group headings
   and the tile titles, which is all F40 named; the four description
   surfaces underneath them still read `--ioc-text-secondary` (`#525252`)
   where all 23 comps set `#000000` (Home.dc.html:137 tile desc, :131 intro
   copy, :158 featured copy, :147 flat-panel tile desc).
   The cause is NOT the `.mega span` rule at infoc-cms.css:2014 that the
   handover note points at — that rule is outranked here. Three of the four
   are the kit's OWN header rules (:354, :342, :337), each of which the
   harvest re-emits one class higher, so each selector below carries the
   kit's full chain plus `body.ioc-site` and wins on source order.
   The flat-panel description is targeted as `a>span:last-child`, NOT
   `.simple-links span`: the latter also matches the tile's icon wrapper
   (`span[data-tile]`) and `.simple-links .mega-label` (:363), whose blue is
   the comp's and must survive. --- */
body.ioc-site .ioc-header .menu-group .mg-txt>span,
body.ioc-site .ioc-header .simple-links a>span:last-child,
body.ioc-site .ioc-header .mega-intro p,
body.ioc-site .ioc-header .featured p{color:var(--ioc-text-primary,#161616)}

/* ============================================================
   R · Comp grid gaps — Home outcomes (B-11-V17) and symptom router
   (B-10-V20). Owner-reported 2026-08-17: both sections render the kit's
   hairline-divider treatment (container border + `gap:1px` shared lines)
   where the comp separates the cells with REAL space — Home.dc.html:215
   `gap:16px` on the outcome grid, :267 `gap:12px;margin-bottom:16px` on
   the symptom tablist, :278 `gap:16px` on the router split — with each
   cell carrying its OWN `border:1px solid #e0e0e0` (:217 card, :269 tab,
   :289 aside; the blue answer panel is borderless). This is also WIRING.md
   §5.3's own rule — container-as-divider is banned — so the hairline look
   was drift, not a choice. Scoped by variant id (the §⑤/§⑥ precedent):
   both variants render ONLY on Home today (measured in the seed), and a
   future placement elsewhere should carry the same comp look with it.
   The card's 3px family top rule (F38, `!important`) outranks the border
   shorthand here, so each card keeps its family colour; `--ioc-g10` is
   the token the V6 skin resolves to the comp's `#f9fafb` aside ground.
   16 · 12 are DESIGN.md-scale steps — T17's v6 ceiling is unmoved.
   ONE VALUE LEFT THIS BLOCK LATER: the router split's own `gap` moved to
   §AG, because it must EQUAL the tablist's for the two rows to share one
   column grid, and the comp gives them different numbers (:267 12px on the
   tablist, :278 16px on the split). Nothing else here changed.
   ============================================================ */
body.ioc-site [data-variant-id="B-11-V17"] .ioc-cards{gap:16px;background:transparent;border:0}
body.ioc-site [data-variant-id="B-11-V17"] .ioc-cards .ioc-card{border:1px solid var(--ioc-border-subtle)}
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-list{gap:12px;background:transparent;border:0;margin-bottom:16px}
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-tab{border:1px solid var(--ioc-border-subtle)}
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-body{background:transparent;border:0}
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-links{border:1px solid var(--ioc-border-subtle);background:var(--ioc-g10,#f4f4f4)}

/* ============================================================
   S · Hero visual card — the ONE standard (owner ruling, 2026-08-17;
   RECORDED as CMS-D-161 ①). The kit shipped the hero aside as a SPOTLIGHT
   composition: a translucent caption card floating top-left over the
   photo, the 2×2 fact matrix floating bottom-right with shadow +
   backdrop blur, cells dimmed to grey and cycled by the runtime (one
   `.on` cell at a time, accent text + a 3.4s animated bar). Every V6
   comp draws the SAME aside as a calm stacked card instead — photo,
   then an ink caption band (strong title left · mono uppercase tag
   right in the family's on-inverse step, e.g. Contact.dc.html:247-258,
   Talents.dc.html:220-231) — and the owner ruled the comp anatomy the
   site-wide standard. The comps disagree with EACH OTHER about cell
   typography (Contact: mono tag above a strong value; Talents: strong
   title above muted prose); the standard keeps the seeds' one shared
   semantic — prominent `value` line first (accent icon), muted `label`
   line under it — which is Talents' comp exactly and Contact's comp
   with the two lines transposed. No seed changes; presentation only.
   The runtime's spotlight rotation still runs (no JS change) — these
   rules simply render `.on` identical to its siblings, and the bar is
   gone, so the cycle is invisible. The hairline matrix container is the
   COMP'S OWN drawing for this compact fact grid (both pages, `gap:1px`)
   — §5.3's container-as-divider ban governs page sections, not this
   card, and mock fidelity (CMS-D-122) wins here.
   ============================================================ */
body.ioc-site .ioc-hero-visual{display:block}
body.ioc-site .ioc-hero-figure{min-height:0;border:0;overflow:visible;background:transparent}
body.ioc-site .ioc-hero-figure img{height:clamp(200px,18vw,260px)}
body.ioc-site .ioc-hero-figure::after{display:none}
body.ioc-site .ioc-hero-figure figcaption{position:static;max-width:none;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;border:0;box-shadow:none;background:var(--ioc-g100,#161616)}
body.ioc-site .ioc-hero-figure figcaption b,
body.ioc-site .ioc-hero-figure figcaption strong{margin:0;font-size:14.5px;font-weight:600;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-hero-figure figcaption span{margin:0;font-size:10px;color:var(--ioc-on-inverse-blue)}
body.ioc-site [data-page-family="Talents Gateway"] .ioc-hero-figure figcaption span{color:var(--ioc-on-inverse-green)}
body.ioc-site [data-page-family="Academy"] .ioc-hero-figure figcaption span,
body.ioc-site .ioc-matrix{position:static;width:auto;box-shadow:none;backdrop-filter:none}
/* Cell inset snapped to the scale (16), not transcribed: the comps disagree
   with each other here (Contact 18/18/20 · Talents 15/16), so there is no
   single mock value to be faithful to and the scale is the tiebreak. Same
   for the band's 13px → 12px above. T17's v6 ceiling stays at 27. */
body.ioc-site .ioc-matrix>div{background:var(--ioc-surface,#fff);min-height:0;padding:16px;justify-content:flex-start}
body.ioc-site .ioc-matrix b{font-size:14px;font-weight:600}
body.ioc-site .ioc-matrix span{font-size:12.5px;line-height:1.55}
/* Utility-bar contact (same revision): phone + email beside the locale,
   store facts rendered by Header.tsx's UtilityBar. Lives here, not
   globals.css — see that file's note on Turbopack dropping trailing rules.
   Anatomy is the comp's own: a soft vertical hairline before the cluster
   (inset shadow, the bar is ink), carbon glyphs in on-inverse blue, white
   12.5px/600 links hovering to the same blue. The comp's 18/20px steps are
   snapped to 16 (DESIGN.md scale; T17).
   The BAR ITSELF goes ink in this revision (`background:#000000;
   color:#ffffff`, Home-standalone) where §J's bar was a transparent strip on
   the white header — full-bleed via the same padding-inline escape §T's
   strata use (1360/2 − 32 = 648), tokens not literals so a skin's own ink
   carries through (the §J colour rationale, unchanged).
   50%, NOT 50vw (spine ruling 2026-08-21): the bar spans its containing
   block edge to edge, so a percentage resolves against the scrollbar-LESS
   client width — where the wrap-centred wordmark actually sits — while
   `50vw` counts the classic scrollbar (§AI) and parked the bar's content
   half a scrollbar (measured 7.5px) right of the spine. §T's strata cannot
   take this spelling: they escape with 50%−50vw margins, so their 50vw
   padding is what cancels the overhang; the bar has no such margin. */
body.ioc-site .ioc-utility-bar{max-width:none;margin:0;padding-inline:max(32px,calc(50% - 648px));background:var(--ioc-g100,#161616);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-utility-contact{display:inline-flex;align-items:center;gap:16px;margin-left:16px;padding-left:16px;box-shadow:inset 1px 0 0 rgba(255,255,255,.28)}
body.ioc-site .ioc-utility-contact a{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ioc-text-on-color,#fff);text-decoration:none}
body.ioc-site .ioc-utility-contact a:hover{color:var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-utility-contact svg{width:14px;height:14px;flex:none;color:var(--ioc-on-inverse-blue)}

/* --- UTILITY BAR REFLOW (WCAG 2.2 SC 1.4.10), owner ruling 2026-08-17 ---
   The bar was a NON-WRAPPING flex row at a fixed `height:36px` with no
   responsive rule of any kind — the §J/1040px collapse hides `.nav`,
   `.search-open` and `.top-cta` but never touched this bar. Its content width
   is constant (text + 32px padding either side), so it needed 586px at EVERY
   viewport and simply spilled below that.

   MEASURED, not inferred, at a 390px viewport before this rule:
   `documentElement.scrollWidth` 567 against `clientWidth` 390, no `overflow-x`
   guard on `html` or `body`, and scrolling right actually moved the page —
   `window.scrollX` reached 177. A real two-directional scroll on every page of
   the site, not a phantom from an off-canvas panel: `.sh-drawer` is
   `position:fixed` and its 756px right edge contributes nothing to the
   document's scrollable area, which is why scrollWidth was 567 (the bar) and
   not 756 (the drawer). This is the same SC 1.4.10 failure class §Y records,
   at a different element.

   WHY WRAP RATHER THAN HIDE. Hiding `.ioc-utility-links` is the cheaper fix
   and matches how the nav already collapses, but it COSTS A DESTINATION, and
   that was established by comparing hrefs rather than link text — the text
   comparison says all three are duplicated in the mobile drawer and is WRONG:
     Support         -> /contact#enquiry        drawer has /contact only
     Academy courses -> /academy/certifications drawer has /academy only
     Insights        -> /insights               genuinely duplicated
   So `/academy/certifications` has NO other mobile header route, and hiding
   the cluster would silently strand it. Wrapping keeps every link and both
   contact details visible and tappable at every width. The cost is 37px of
   sticky-header height on mobile (101 -> 138, measured), which the owner
   accepted against losing a destination.

   NO BREAKPOINT IS INVENTED. `flex-wrap:wrap` PERMITS wrapping, it does not
   force it: above 586px the row still fits on one line and renders exactly as
   before, so this needs no media query and there is no magic number to drift.
   `height:36px` becomes `min-height:36px` for the same reason — a fixed height
   would clip the second line, while the minimum preserves the comp's 36px band
   wherever the content still fits it. Desktop is unchanged by construction,
   not by assertion (verified: computed height 36px at 1440).

   T17: `row-gap:8px` and `padding-block:8px` are both scale steps. The column
   `gap:24px` and `padding-inline` are inherited from the rules above,
   untouched. `min-height` is not a spacing property (§N). */
body.ioc-site .ioc-utility-bar{flex-wrap:wrap;height:auto;min-height:36px;row-gap:8px;padding-block:8px}

/* THE WRAPPED STATE NEEDS ITS OWN ALIGNMENT, and this is the one place a
   breakpoint is unavoidable: CSS cannot select "an item that starts a flex
   line", and both rules below are wrong precisely when the row is intact.
     · `.ioc-utility-contact` (line 1808) carries a leading hairline + 16px
       inset marking it as a CONTINUATION of the locale beside it. On its own
       line that is a rule against nothing and a stray indent.
     · `.ioc-utility-links` (line 617) carries `margin-left:auto` to push the
       cluster to the bar's right edge. On its own line the auto margin still
       resolves, so the line floats right while the two above it sit left.
   Together they rendered three lines each starting at a different x — 32px,
   48px, 112px, measured at 390.

   `:first-child` was tried and is WRONG: the contact cluster is never the
   first CHILD (the locale is), only ever the first item on a line, so the
   selector matched nothing and the raggedness survived it.

   744px IS MEASURED, NOT CHOSEN. Bisected against the live bar: 744 -> 62px
   (wrapped), 748 -> 36px (one line). So this block is bounded exactly at the
   wrap and can never fire while the row is intact. It is font-metric
   dependent by nature — re-bisect the same way if the type ever changes; the
   failure mode is cosmetic (a hairline in the wrong place across a few px of
   viewport), never an overflow. The file's own 860/620 steps were rejected
   for this: 860 is above the wrap point and would strip the divider and the
   right-alignment from a bar still rendering as one line. */
@media(max-width:744px){
  body.ioc-site .ioc-utility-contact{margin-left:0;padding-left:0;box-shadow:none}
  body.ioc-site .ioc-utility-links{margin-left:0}
}

/* The revision's hero split is a TRUE half-and-half: two equal columns over
   the full viewport, the copy padded in to the measure's left edge (same
   50vw−648 constant as §T — the 1360 site spine, §O's 2026-08-21 ruling;
   both were 50vw−608/kit-wrap-1280 before Home joined the site measure) and
   the visual bleeding flush to the viewport's right edge. §L's 1920-cap +
   calc(50%−20px) visual column left a right-hand gutter and an off-centre
   seam. Guarded above §L's own 1040px collapse, which is untouched.
   The wrap takes §T's 100vw + 50%−50vw escape (spine ruling 2026-08-21):
   without it the copy's `50vw` padding counts the classic scrollbar (§AI)
   and sat half a scrollbar (measured 7.5px) right of the spine; with it the
   two vw errors cancel exactly as §AI proved for the strata, the seam stays
   on the client centre-line, and the visual column's overhang is clipped by
   §AI's own html+body rule. Percentage padding is NOT the alternative here
   the way it is for the utility bar: the copy is a grid item, so a % would
   resolve against its half-width grid area, not the page. */
@media(min-width:1041px){
  body.ioc-site .ioc-hero-v6-wrap{max-width:none;width:100vw;margin:0 0 0 calc(50% - 50vw);grid-template-columns:1fr 1fr}
  body.ioc-site .ioc-hero-v6-copy{grid-column:1;padding-left:max(32px,calc(50vw - 648px));padding-right:48px}
  body.ioc-site .ioc-hero-v6-visual{grid-column:2}
}

/* The spotlight's dim/accent states, rendered settled: every cell equal. */
body.ioc-site .ioc-matrix[data-spotlight]>div,
body.ioc-site .ioc-matrix[data-spotlight]>div.on{background:var(--ioc-surface,#fff);cursor:default}
body.ioc-site .ioc-matrix[data-spotlight]>div b,
body.ioc-site .ioc-matrix[data-spotlight]>div.on b{color:var(--ioc-text-primary)}
body.ioc-site .ioc-matrix[data-spotlight]>div b svg,
body.ioc-site .ioc-matrix[data-spotlight]>div.on b svg{color:var(--ioc-accent-ink,var(--ioc-accent,#0001ff));transform:none}
body.ioc-site .ioc-matrix[data-spotlight]>div span,
body.ioc-site .ioc-matrix[data-spotlight]>div.on span{color:var(--ioc-text-secondary);transform:none}
body.ioc-site .ioc-matrix .ioc-mx-bar{display:none}

/* ============================================================
   T · Platform cross-section bands (Home-standalone.html revision,
   2026-08-17; RECORDED as CMS-D-161 ②, and its six-step
   near-black scale SUPERSEDED by CMS-D-158 — see §T2). The revision redraws the
   B-03-V20 platform band as six FULL-BLEED horizontal strata on #000:
   the first (Business Central) a 112px house-blue band, the rest 92px
   bands stepping down through near-blacks (#1c1c22 → #0c0c0f), each row
   an icon · title/desc grid with an on-inverse-blue arrow. §M's boxed
   white rows are superseded for this variant. The per-layer "LAYER ONE ·
   THE TRANSACTION CORE" eyebrows and the closing "THE CORE IS THE TOP
   STRATUM" mono line are NOT reproduced here: they are store words and
   B-03-V20's item contract carries no eyebrow/note slot — that is the
   deferred template-contract half of this revision, recorded in the
   wiring report, never hand-baked into CSS (T10 would rightly fail a
   stylesheet minting visitor copy). Full-bleed via the standard
   50%−50vw escape since the layer list renders inside the section wrap.
   Grounds are literal near-blacks from the revision (not tokens): they
   are this band's own six-step scale, used nowhere else.
   ============================================================ */
/* `.ioc-plat-layer` IS the anchor: it becomes the full-bleed band itself,
   its content held to the 1360px measure by padding-inline (1360/2 − 32
   = 648). The list escapes the section wrap with the 50%−50vw trick. */
body.ioc-site .ioc-plat{display:block}
body.ioc-site .ioc-plat-layers{display:block;width:100vw;margin-left:calc(50% - 50vw)}
/* Three-part selector on purpose: §M's own `body.ioc-site .ioc-plat
   .ioc-plat-layer` (:1399) is (0,3,1) and would otherwise keep its white
   16/24 row treatment under this band. The 648 centres the row content on
   the section's real measure: the 1360 site spine (1360/2 − 32 — §O's
   2026-08-21 ruling; was 608 against the retired 1280 kit wrap). */
/* The comp's row is FOUR columns (icon · kicker/title · desc · arrow) but the
   item template nests kicker+title+desc in one `.ioc-plat-layer-copy` span —
   `display:contents` promotes its children into the row grid so the desc takes
   its own middle column and the arrow reaches the measure's right edge. */
body.ioc-site .ioc-plat .ioc-plat-layer{display:grid;grid-template-columns:56px minmax(0,.8fr) minmax(0,1.4fr) auto;grid-template-rows:auto auto;column-gap:24px;row-gap:4px;align-content:center;align-items:center;min-height:96px;padding-block:16px;padding-inline:max(32px,calc(50vw - 648px));border:0;background:var(--ioc-stratum,#17171c);color:var(--ioc-text-on-color,#fff);transition:background .18s var(--ioc-ease)}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-copy{display:contents}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-ic{grid-column:1;grid-row:1/3}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-k{grid-column:2;grid-row:1;align-self:end;margin:0}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-copy>strong{grid-column:2;grid-row:2;align-self:start}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-d{grid-column:3;grid-row:1/3}
body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-go{grid-column:4;grid-row:1/3;justify-self:end}
/* Layers two→six take the base rule's single `--ioc-stratum`; only the core
   declares a ground of its own. See §T2 for why the other four went. */
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1){background:var(--ioc-blue,#0001ff);min-height:160px}
body.ioc-site .ioc-plat-layer:hover{filter:brightness(1.45)}
/* The core's hover is the accent's OWN hover step, not a brightness filter:
   brightening #0001ff washes it toward lavender, and the token pair already
   exists (it is also the comp's own `hov[0]`). */
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1):hover{background:var(--ioc-accent-hover,#0000c4);filter:none}
body.ioc-site .ioc-plat-layer-ic{width:26px;height:26px;color:var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-ic{color:var(--ioc-text-on-color,#fff);width:34px;height:34px}
body.ioc-site .ioc-plat-layers .ioc-plat-layer .ioc-plat-layer-copy,
body.ioc-site .ioc-plat-layers .ioc-plat-layer .ioc-plat-layer-copy strong,
body.ioc-site .ioc-plat-layers .ioc-plat-layer strong{font-size:19px;font-weight:700;letter-spacing:-.022em;line-height:1.2;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-plat-layers .ioc-plat-layer .ioc-plat-layer-d{font-size:14.5px;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--ioc-text-on-color,#fff);opacity:.82}
body.ioc-site .ioc-plat-layer-go{width:17px;height:17px;color:var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-go{color:var(--ioc-text-on-color,#fff)}
/* The per-layer eyebrow + closing mono line (contract extension, same
   revision): mono ordinal kickers in on-inverse blue, white on the blue
   stratum; the tail at 55% white, the revision's own value. */
body.ioc-site .ioc-plat-layer-k{display:block;font-family:var(--ioc-mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;color:var(--ioc-on-inverse-blue);margin-bottom:4px}
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-k{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-plat-note{display:block;margin:0;padding:24px 0 0;font-family:var(--ioc-mono);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--ioc-text-on-color,#fff);opacity:.55}
body.ioc-site .ioc-plat-note:empty{display:none}
@media(max-width:860px){body.ioc-site .ioc-plat .ioc-plat-layer{grid-template-columns:40px minmax(0,1fr) auto}body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-d{display:none}body.ioc-site .ioc-plat .ioc-plat-layer .ioc-plat-layer-go{grid-column:3}}
@media(prefers-reduced-motion:reduce){body.ioc-site .ioc-plat-layer{transition:none}}

/* ============================================================
   T2 · Platform cross-section, hierarchy pass (2026-08-19, CMS-D-158).

   §T transcribed the 2026-08-17 revision faithfully, six-step near-black
   scale included. MEASURED, that scale does not survive a screen: adjacent
   strata sat at 1.053 / 1.027 / 1.016 / 1.027 : 1 and all five steps together
   at 1.129:1 — under one JND. Layers two→six rendered as ONE slab, so the
   revision spent its entire tonal budget on the distinction that carries no
   argument (layer three against layer four) and none on the one that does.
   The core was set in the SAME 19px as its five subordinates while the stored
   lead says "Nothing replaces it" — the grammar of first-among-equals under
   copy that claims the opposite.

   TWO DEPARTURES FROM THE COMP, recorded as departures rather than folded in
   quietly, because CMS-D-122 holds that mock fidelity outranks house habit
   and these overrule a delivered comp on its own ground:
   ① the five near-blacks collapse to one `--ioc-stratum`, separated by the
     1px hairline CMS-D-066 rule 4 already prescribes. rgba white, not a hex —
     the §U idiom, and T16 ① scans hex literals. The dependency order the lead
     claims is now carried by the stored LAYER TWO…SIX ordinals, which already
     render, instead of by a gradient nobody can see.
   ② the core becomes categorically different rather than incrementally
     taller: 160px against 96px (was 112 against 92, a 1.22x step that reads
     as "slightly bigger"), 26px title against 19px, full-opacity 16px
     description, 34px icon.

   T17. Every spacing value here is on the 4/8/12/16/24/32/48 scale, and the
   design work is deliberately carried by `height`, `font-size`,
   `border-width` and `grid-template-columns` — NONE of which appear in
   CSS_SPACING_PROPS (scripts/spacing-gate.mjs:810). `v6CssOffScaleCeiling`
   does not move. The comp's own off-scale head metrics snap on the usual
   convention, ties UP: 40px column gap -> 48, 34px head tail -> 32.

   THE SECTION KICKER'S ACCENT — shipped, but NOT as the comp's literal.
   The head sits on `.ioc-block.dark` (= `--ioc-g100`), which INVERTS per
   skin, so the comp's fixed `#a3adff` measures 2.10:1 against the light
   ground the `dark` skin resolves — the exact skin-blindness CMS-D-124 ②
   closed for these same three rules. CMS-D-158 therefore shipped the kicker
   grey and named the fix as owed; CMS-D-163 built it: `--ioc-accent-on-ink`,
   a per-skin emitter role on the `footer.linkHover` precedent (CMS-D-153),
   `#a3adff` on the three dark-band skins and house blue on `dark`. The
   kicker now reads the ROLE, so it is the comp's colour everywhere the comp's
   ground exists and a legible one where it does not. The BAND-INTERNAL
   `#a3adff` (icons, arrows, ordinals) still needs no such care — those sit
   on the fixed near-black strata, which no skin inverts.
   ============================================================ */
/* The head is the comp's baseline-aligned row again: copy left, CTA hard
   right, sitting on the lead's last baseline (Home-standalone `#platform`:
   `display:flex;gap:40px;align-items:flex-end;justify-content:space-between`).
   §M expressed this as `.ioc-plat`'s own two-column grid; §T switched
   `.ioc-plat` to `display:block` so `.ioc-plat-layers` could take the
   full-bleed escape, which silently dropped the head composition AND the
   48px gap with it — that is why the CTA's 2px underline had been sitting
   flush against the blue band. Rebuilt one level down, on `.ioc-plat-head`,
   so `.ioc-plat` stays `display:block` and the bands keep their escape. The
   template is unchanged: the four children auto-place down column 1 and only
   the link is placed explicitly. */
body.ioc-site .ioc-plat .ioc-plat-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:48px}
body.ioc-site .ioc-plat .ioc-plat-head .ioc-kicker{grid-column:1;opacity:1;color:var(--ioc-accent-on-ink)}
/* `text-wrap:balance` is NOT decoration and it overrides §M's
   `text-wrap:initial` on purpose. The 22ch cap forces this headline to two
   lines, and the stored string "The architecture in cross-section" offers a
   break opportunity at its own hyphen — so the greedy default broke it as
   "The architecture in cross-" / "section", a 26/7 rag splitting the compound
   word. Balance picks the 19/13 break after "in". The cap stays the comp's;
   only the break point moves. */
body.ioc-site .ioc-plat .ioc-plat-head h2{grid-column:1;max-width:22ch;text-wrap:balance}
body.ioc-site .ioc-plat .ioc-plat-head .ioc-plat-lead{grid-column:1;max-width:52ch;margin:0}
body.ioc-site .ioc-plat .ioc-plat-head .ioc-plat-link{grid-column:2;grid-row:3;justify-self:end;align-self:end}
/* `margin-top` only — `.ioc-plat-layers` carries the full-bleed
   `margin-left:calc(50% - 50vw)` and a shorthand here would erase it. */
body.ioc-site .ioc-plat .ioc-plat-layers{margin-top:32px}
/* Hairlines BETWEEN THE FIVE, never between the core and layer two: the
   blue-to-near-black edge is already a hard boundary and a line across it
   would only weaken the one separation that was already working. The double
   sibling combinator lands the border on children 3..6, i.e. the 2|3, 3|4,
   4|5 and 5|6 seams. */
body.ioc-site .ioc-plat-layers>.ioc-plat-layer+.ioc-plat-layer+.ioc-plat-layer{border-top:1px solid rgba(255,255,255,.10)}
/* The core's type step. Out-specifies the shared band rules by the
   `:nth-child(1)` alone, and every property is ungraded by T17. */
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-copy>strong{font-size:26px;letter-spacing:-.028em}
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-d{font-size:16px;opacity:1}
body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-k{font-size:10.5px}
@media(max-width:860px){
  /* One column, CTA back under the copy on its own row. */
  body.ioc-site .ioc-plat .ioc-plat-head{grid-template-columns:minmax(0,1fr)}
  body.ioc-site .ioc-plat .ioc-plat-head .ioc-plat-link{grid-column:1;grid-row:auto;justify-self:start;margin-top:24px}
  /* 160px is a poster height on a phone; the core keeps its lead over the
     five (128 against 96) without eating the fold. */
  body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1){min-height:128px}
  body.ioc-site .ioc-plat-layers>.ioc-plat-layer:nth-child(1) .ioc-plat-layer-copy>strong{font-size:22px}
}

/* ============================================================
   U · Home-standalone hero rework (2026-08-17 revision; RECORDED as
   CMS-D-161 ③, with §T's). Four coordinated pieces:
   ① the left column's credentials grid becomes the single
     "Microsoft platform" strip (the seed now carries ONE matrix entry);
   ② the visual panel goes house-blue → INK, image on top, caption band
     below a soft hairline — the revision's composition; slide count and
     copy are store data (five slides seeded);
   ③ the dots become the revision's bar-marks (active = 20×10 bar);
   ④ the route RAIL under the hero is a B-11-V21 block seeded with four
     eyebrow+title cards (two static, two family links) restyled here to
     the revision's ink strip — scoped by home instance + variant, the
     §⑤/§⑥ precedent. Its store-required section header is hidden: the
     revision's rail has none, and the heading exists only because every
     card block carries one. rgba() whites are the revision's own soft
     hairlines on ink (T16 ① scans hex literals; these are alpha steps of
     white, not brand colours).
   ============================================================ */
/* (credentials restyle retired with the strip — see the chips note above) */
body.ioc-site .ioc-hero-v6-visual{background:var(--ioc-g100,#161616);display:flex;flex-direction:column}
body.ioc-site .ioc-hero-v6-slide-img{display:block;flex:1;min-height:318px;background-size:cover;background-position:50% 50%}
/* Owner direction 2026-08-17: the caption band under the slide image sits on
   the accent blue (the panel above it stays ink for the photo ground). */
body.ioc-site .ioc-hero-v6-slide-body{border-top:1px solid rgba(255,255,255,.28);padding:24px 32px;background:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-hero-v6-slide-k{color:var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-hero-v6-slide-t{font-size:23px;line-height:1.16;font-weight:800;letter-spacing:-.025em;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-hero-v6-dot [data-dot-mark]{display:block;width:10px;height:10px;background:rgba(255,255,255,.55);border-radius:0;transition:width .18s var(--ioc-ease),background .18s var(--ioc-ease)}
body.ioc-site .ioc-hero-v6-dot[aria-current="true"] [data-dot-mark]{width:20px;background:var(--ioc-text-on-color,#fff)}

/* ============================================================
   HERO SLIDER — the delivered comp, HeroSlider-standalone.html §2a
   (owner ruling 2026-08-18: "the design only from HeroSlider-standalone").

   THIS SUPERSEDES THE 2026-08-17 OWNER DIRECTION DIRECTLY ABOVE — the blue
   caption band. That ruling is one day old and was followed correctly; it is
   replaced here by a later ruling from the same owner against a comp that did
   not exist when it was made. Recorded rather than quietly deleted so the
   blue band reads as superseded, not as a mistake. RECORDED as CMS-D-161 ④.

   THE COMP'S CAPTION IS AN OVERLAY, NOT A BAND. It sits ON the photograph:
   `position:absolute; left:0; bottom:0; max-width:80%; background:#000000`,
   closed by a 3px accent underline (`box-shadow:inset 0 -3px 0 {accent}`).
   The band treatment spanned the full panel width below the image; this is a
   plate over the lower-left corner of it, which is why the media panel also
   takes the comp's `min-height:460px` — the caption no longer adds height of
   its own, so the panel has to carry it.

   EVERY SLIDE HAS ITS OWN ACCENT, and all four are already tokens — no colour
   is minted here, which is what CMS-D-066 requires:
     #a3adff  --ioc-on-inverse-blue      (singapore-skyline)
     #78a9ff  --ioc-accent-on-inverse    (manufacturing-automation)
     #be95ff  --ioc-on-inverse-purple    (data-center)
     #6fdc8c  --ioc-on-inverse-green     (managed-support)
   The runtime stamps `data-slide-accent` with the slide index modulo four and
   the mapping lives HERE, in the sheet, because colour is code-owned
   (CMS-D-081: editors pick blocks and copy, never colours). The deck carries
   five slides against the comp's four, so the palette cycles rather than
   running out — and the un-stamped server render falls back to accent 0, so
   the first paint is correct before any script runs.

   T17 — the comp's caption metrics are off-scale and snap per CMS-D-117, ties
   UP: padding `20px 24px 22px` -> `24px` (20 is an exact tie 16/24; 22 is 2
   from 24 against 6 from 16), kicker `margin-bottom:8px` -> `8px` (tie), title
   `margin-bottom:10px` -> `12px` (tie), link `gap:9px` -> `8px` (1 away
   against 3). `font-size`, `letter-spacing`, `line-height`, `max-width` and
   `min-height` are not spacing properties (§N), so 10px/21px/13.5px/.16em/
   -.026em/1.14/80%/460px stay verbatim.

   THE CONTROLS ARE OURS AND THEY STAY. The comp ships no pause and no dots —
   it is a motion study, not an accessible component, and WCAG 2.2.2 requires a
   mechanism to stop content that auto-updates. Since the comp has no placement
   for them to be faithful to, they stay on the caption plate, where black
   under white is legible by construction and an arbitrary photograph is not.
   ============================================================ */
/* ACCENT FOLLOWS THE SLIDE'S FAMILY, NOT ITS POSITION (owner direction
   2026-08-20). The four-tint positional cycle dressed whatever slide sat at
   index 2 in Academy purple and index 3 in Talents green — with the seeded
   five-slide deck that meant "INFOC ACADEMY" wore green, "TALENTS GATEWAY"
   wore blue, and a Solutions slide wore purple. The runtime now stamps
   `data-slide-fam` for slides routed to a page-wide-accent family
   (`route-path.ts` PAGE_FAMILY_BY_PREFIX, CMS-D-132: talents + academy, no
   others) and `data-slide-accent` (mod 2) for the house-blue majority — the
   two attrs are mutually exclusive, so no cascade race. The purple and green
   tints are family identity (footer route band `--rt`, B-10-V21) and are no
   longer reachable by position. */
body.ioc-site .ioc-hero-v6-visual{--ioc-slide-accent:var(--ioc-on-inverse-blue);position:relative;min-height:460px}
body.ioc-site .ioc-hero-v6-visual[data-slide-accent="1"]{--ioc-slide-accent:var(--ioc-accent-on-inverse)}
body.ioc-site .ioc-hero-v6-visual[data-slide-fam="academy"]{--ioc-slide-accent:var(--ioc-on-inverse-purple)}
body.ioc-site .ioc-hero-v6-visual[data-slide-fam="talents"]{--ioc-slide-accent:var(--ioc-on-inverse-green)}
/* The photo fills the panel; the caption is lifted out of the flex flow. */
body.ioc-site .ioc-hero-v6-slide-img{flex:1;min-height:460px}
body.ioc-site .ioc-hero-v6-slide-body{position:absolute;left:0;bottom:0;max-width:80%;width:auto;border-top:0;padding:24px;background:var(--ioc-g100,#161616);box-shadow:inset 0 -3px 0 var(--ioc-slide-accent)}
body.ioc-site .ioc-hero-v6-slide-k{display:block;margin:0 0 8px;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.16em;color:var(--ioc-slide-accent);opacity:1}
body.ioc-site .ioc-hero-v6-slide-t{display:block;margin:0 0 12px;font-size:21px;font-weight:800;letter-spacing:-.026em;line-height:1.14;min-height:0;color:var(--ioc-text-on-color,#fff)}
/* The foot row keeps BOTH the link and the controls, on the plate. Moving the
   controls out to the panel's top-right was tried first and is impossible in
   CSS alone: they are nested INSIDE the caption, so once the caption became
   `position:absolute` it also became their containing block and `top/right`
   resolved against the plate — measured as a direct overlap of the link.
   Reaching the panel would mean re-parenting them in the variant template.
   Keeping them on the plate is better anyway: the comp ships no controls at
   all, so there is no placement to be faithful to, and black plate under white
   controls is legible by construction where a photograph is not. */
body.ioc-site .ioc-hero-v6-slide-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px}
body.ioc-site .ioc-hero-v6-slide-link{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--ioc-slide-accent);border-bottom:0;padding-bottom:0}
body.ioc-site .ioc-hero-v6-slide-link:hover{color:var(--ioc-text-on-color,#fff);border-bottom:0}
body.ioc-site .ioc-hero-v6-slide-link:focus-visible{outline:2px solid var(--ioc-slide-accent);outline-offset:2px}
body.ioc-site .ioc-hero-v6-slide-controls{position:static;gap:12px}
/* ④ the rail */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-head,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-block-head,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] h2,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-kicker{display:none}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"].ioc-block,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-block{padding-block:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-cards{gap:0;background:var(--ioc-g100,#161616);border:0;border-top:1px solid rgba(255,255,255,.22)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card{background:transparent;border:0;box-shadow:inset -1px 0 0 rgba(255,255,255,.22);padding:24px;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;align-items:center;justify-content:start;gap:8px;grid-column:auto}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card:last-child{box-shadow:none}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-media{display:none}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-eyebrow{font-family:var(--ioc-mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;color:var(--ioc-on-inverse-blue);margin:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="tal"] .ioc-card-eyebrow{color:var(--ioc-on-inverse-green)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="aca"] .ioc-card-eyebrow{color:var(--ioc-on-inverse-purple)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card h3,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card strong,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-link{font-size:16px;font-weight:700;letter-spacing:-.018em;line-height:1.25;color:var(--ioc-text-on-color,#fff);margin:0}
/* The comp's cell anatomy: glyph inline BEFORE the kicker, the arrow inline
   AFTER the title, one tight two-row rhythm. The card has NO body wrapper —
   children sit directly on the article — so the grid lives on the card:
   row 1 = the `.ioc-card-ix` icon + eyebrow, row 2 = title + arrow. A cell
   with no destination renders its link as `href="#"` (the template always
   emits the element); the comp draws no arrow there, so it is hidden. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card p:not(.ioc-card-eyebrow):not(.ioc-card-ix),
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-tags{display:none}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-ix{display:block;grid-column:1;grid-row:1;margin:0;line-height:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-cardicon{width:15px;height:15px;margin:0;color:var(--ioc-on-inverse-blue)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="tal"] .ioc-cardicon{color:var(--ioc-on-inverse-green)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="aca"] .ioc-cardicon{color:var(--ioc-on-inverse-purple)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-eyebrow{grid-column:2/4;grid-row:1;margin:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card h3{grid-column:1/3;grid-row:2;margin:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-link{grid-column:3;grid-row:2;display:inline-flex;align-items:center;margin:0;padding:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-link[href="#"]{display:none}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card-link svg{width:15px;height:15px;color:var(--ioc-text-on-color,#fff)}
/* The revision's rail has no family top rules — the kickers carry the colour.
   F38's 3px is !important, so this must match the flag. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam]{border-top:0!important;background:transparent}
/* The rail's two family cells are ROUTES, not copy — §V's footer route strip
   (same revision, same ink-cell anatomy) gives the treatment: the WHOLE cell
   hovers to accent blue. The template's only anchor is the 15px arrow
   (.ioc-card-link), so it stretches over the card to make the whole cell the
   hit area; the family kicker/glyph flip white on the blue ground like the
   strip's uniform white. Static cells (no route-fam value) keep still. */
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card{position:relative}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card .ioc-card-link:not([href="#"])::after{content:"";position:absolute;inset:0}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="tal"]:hover,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="aca"]:hover{background:var(--ioc-blue,#0001ff)}
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="tal"]:hover .ioc-card-eyebrow,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="aca"]:hover .ioc-card-eyebrow,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="tal"]:hover .ioc-cardicon,
body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-card[data-route-fam="aca"]:hover .ioc-cardicon{color:var(--ioc-text-on-color,#fff)}
/* (the credential slots 2-3 mask retired with the strip — chips note in §D) */
@media(max-width:860px){body.ioc-site [data-block-instance^="p-home-"][data-variant-id="B-11-V21"] .ioc-cards{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   V · Footer route strip (Home-standalone revision). The comp draws the
   three action cells on the measure as an ink grid with 1px white-22
   hairline gaps; each cell: a 40px bordered icon box · flex-grown text
   (15/600 title over 12.5 sub) · an 18px arrow flush at the cell's right;
   the WHOLE cell hovers to accent blue. The kit's light treatment (grey
   hover, accent icons, side borders) is superseded for the ink footer.
   The comp's 22/26/28px insets snap to 24 (DESIGN.md scale; T17).
   ============================================================ */
/* The strip sits FLUSH at the footer's top in the revision — the ink footer's
   64px head-room moves below the strip so the menu columns keep their air. */
body.ioc-site .ioc-footer{padding-top:0}
body.ioc-site .ioc-footer .footer-routes{border-bottom:1px solid rgba(255,255,255,.22)}
body.ioc-site .ioc-footer .footer-main{padding-top:48px}
/* The 48px above IS the head-room — but the kit grid's own
   `padding-block:clamp(56px,6vw,88px)` (infoc-cms.css:441) survived underneath
   it, so the columns sat 136px below the strip against the comp's 56
   (Home.dc.html:373). Zeroed here; the comp's closing anatomy — 36px, a
   container-width hairline, then the legal row (:375) — snaps to the scale as
   32px (this section's own precedent; T17). The hairline is currentColor at
   the strip hairline's 22% because it sits on the SKIN-SWAPPED band, where a
   white literal disappears on the white-footer skins, and the token vocabulary
   has no footer-hairline role (see §N's `.back-top` note). */
body.ioc-site .ioc-footer .footer-main-grid{padding-block:0 32px;border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
/* The comp's legal band is the footer's own ground (Home.dc.html:358 — one
   surface, the hairline above is the only separator). The kit's fixed
   `--ioc-g100` band also stranded §L's re-pointed ink: `--ioc-footer-text` is
   BLACK on the white-footer skins, on a band that stayed #161616. Transparent
   means the band reads the footer-surface/footer-text pair the skin contract
   already proves — and the two controls the kit tuned to the always-ink band
   (`.back-top` on `--ioc-text-on-color`, `.social` on `--ioc-g30`/`--ioc-g80`)
   move onto the same pair for the same reason. */
body.ioc-site .ioc-footer .legal{background:transparent}
body.ioc-site .ioc-footer .back-top{color:var(--ioc-footer-text,#fff);border-color:color-mix(in srgb,currentColor 22%,transparent)}
body.ioc-site .ioc-footer .social a,
body.ioc-site .ioc-footer .social button{color:var(--ioc-footer-text,#fff);border-color:color-mix(in srgb,currentColor 22%,transparent)}
/* No width cap here: the element is `.fwrap.route-grid`, so the kit's fwrap
   already holds it to `--ioc-maxw`, and §X below re-declares the geometry on
   the site measure anyway. The literal 1280px this rule once carried was the
   retired Home grid (§O's 2026-08-21 spine ruling) and was already dead under
   §X's later same-specificity override. */
body.ioc-site .ioc-footer .route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:0}
body.ioc-site .ioc-footer .route{min-height:0;display:flex;align-items:center;gap:16px;padding:24px;border:0;box-shadow:inset -1px 0 0 rgba(255,255,255,.22);background:var(--ioc-g100,#161616);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route:last-child{box-shadow:none}
body.ioc-site .ioc-footer .route>span:not(.rn){flex:1;min-width:0}
body.ioc-site .ioc-footer .route .rn{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route .rn svg{width:20px;height:20px}
body.ioc-site .ioc-footer .route b{font-size:15px;font-weight:600;margin-bottom:4px;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route small{font-size:12.5px;line-height:1.5;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route .ico{flex:none;width:18px;height:18px;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-footer .route:hover{background:var(--ioc-blue,#0001ff);color:var(--ioc-text-on-color,#fff)}
@media(max-width:860px){body.ioc-site .ioc-footer .route-grid{grid-template-columns:1fr}}

/* ============================================================
   W · Capability-gap role router (B-10-V21, CapabilityGap-standalone
   2026-08-17). Four role tabs over train-vs-hire card pairs — Academy
   purple vs Talents green via data-route-fam and the family tokens. The
   comp's inset ring/top-bar shadows become real borders (CMS-D-066 r4),
   its 7/10/11/14/22/26/30px steps snap to the DESIGN.md scale, and
   `[hidden]{display:none}` is restated because the panel is a grid (the
   B-10-V20 lesson). Selection is enhanceTabs' — no CSS radio hack.
   ============================================================ */
body.ioc-site .ioc-capgap-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
body.ioc-site .ioc-capgap-tab{display:flex;align-items:center;gap:12px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);padding:16px;font-size:15px;font-weight:700;letter-spacing:-.016em;color:var(--ioc-text-primary);cursor:pointer;text-align:left}
body.ioc-site .ioc-capgap-tab-ic{width:18px;height:18px;flex:none}
body.ioc-site .ioc-capgap-tab[aria-selected="true"]{background:var(--ioc-g100,#161616);border-color:var(--ioc-g100,#161616);color:var(--ioc-text-on-color,#fff)}
/* The comp hovers an unselected tab with an inset accent ring
   (`[data-roles] label:hover > span{box-shadow:inset 0 0 0 1px #0001ff}`);
   rings became real borders here (CMS-D-066 r4), so the border carries it. */
body.ioc-site .ioc-capgap-tab:not([aria-selected="true"]):hover{border-color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-capgap-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px}
body.ioc-site .ioc-capgap-panel[hidden]{display:none}
body.ioc-site .ioc-capgap-card{display:flex;flex-direction:column;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);border-top:4px solid var(--ioc-accent,#0001ff)}
body.ioc-site .ioc-capgap-card[data-route-fam="aca"]{border-top-color:var(--ioc-fam-academy,#6929c4)}
body.ioc-site .ioc-capgap-card[data-route-fam="tal"]{border-top-color:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-capgap-media{display:block;height:150px;overflow:hidden;background-color:var(--ioc-g20,#e0e0e0);background-size:cover;background-position:50% 40%}
body.ioc-site .ioc-capgap-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
body.ioc-site .ioc-capgap-card[data-route-fam="aca"] .ioc-capgap-media{background-color:var(--ioc-fam-academy,#6929c4)}
body.ioc-site .ioc-capgap-card[data-route-fam="tal"] .ioc-capgap-media{background-color:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-capgap-body{display:flex;flex-direction:column;flex:1;padding:24px;min-width:0}
body.ioc-site .ioc-capgap-krow{display:flex;align-items:center;gap:8px;margin-bottom:16px}
body.ioc-site .ioc-capgap-glyph{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;background:var(--ioc-fam-academy,#6929c4);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-capgap-card[data-route-fam="tal"] .ioc-capgap-glyph{background:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-capgap-glyph svg{width:16px;height:16px}
body.ioc-site .ioc-capgap-k{font-family:var(--ioc-mono);font-size:10px;font-weight:500;letter-spacing:.15em;color:var(--ioc-fam-academy,#6929c4)}
body.ioc-site .ioc-capgap-card[data-route-fam="tal"] .ioc-capgap-k{color:var(--ioc-fam-talents-ink,var(--ioc-fam-talents,#1a7a52))}
body.ioc-site .ioc-capgap-card strong{display:block;font-size:22px;line-height:1.16;font-weight:800;letter-spacing:-.028em;margin-bottom:8px}
body.ioc-site .ioc-capgap-d{display:block;font-size:14.5px;line-height:1.55;margin-bottom:16px;color:var(--ioc-text-primary)}
body.ioc-site .ioc-capgap-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
body.ioc-site .ioc-capgap-tags i{display:inline-flex;align-items:center;height:28px;padding:0 8px;background:var(--ioc-g10,#f4f4f4);border:1px solid var(--ioc-border-subtle);font-family:var(--ioc-mono);font-style:normal;font-size:10.5px;letter-spacing:.05em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-capgap-tags i:empty{display:none}
body.ioc-site .ioc-capgap-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;height:48px;padding:0 16px;min-width:230px;align-self:flex-start;background:var(--ioc-fam-academy,#6929c4);color:var(--ioc-text-on-color,#fff);font-size:14.5px;font-weight:600}
body.ioc-site .ioc-capgap-card[data-route-fam="tal"] .ioc-capgap-cta{background:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-capgap-cta:hover{filter:brightness(1.12)}
body.ioc-site .ioc-capgap-cta svg{width:16px;height:16px;flex:none}
@media(max-width:860px){body.ioc-site .ioc-capgap-tabs{grid-template-columns:repeat(2,1fr)}body.ioc-site .ioc-capgap-panel{grid-template-columns:1fr}}

/* ============================================================
   Z · Motion floor. Every transition/transform this sheet adds gets the
   same reduced-motion treatment the kit applies to its own (e.g.
   infoc-cms.css:1174, :1251, :1684).
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  body.ioc-site .ioc-card-media img,
  body.ioc-site .ioc-head-link svg,
  body.ioc-site .ioc-tabs-tab,
  body.ioc-site .ioc-tabs-links a svg,
  body.ioc-site .ioc-tabs-actions-link svg,
  body.ioc-site .ioc-plat-link,
  body.ioc-site .ioc-plat-layer{
    transition:none;
  }
}

/* ⑤ methodology illustrations in the four solution-body figures (V6_IMAGES
   illustration library, 2026-08-16). The library's methodology diagrams are
   16:9 left-to-right FLOWS — the base `.ioc-media-fig img` 5/4 cover-crop
   amputates ~30% of their width, so exactly these four instances render at
   the diagram's own ratio. Scoped by page prefix + variant (the ③b enquiry
   precedent), never by row index, so a reseed that shifts rows cannot
   detach them. Photos everywhere else keep the 5/4 book. */
body.ioc-site [data-block-instance^="p-solutions-business-applications-"][data-variant-id="B-05-V04"] .ioc-media-fig img,
body.ioc-site [data-block-instance^="p-solutions-cloud-modern-work-security-"][data-variant-id="B-05-V08"] .ioc-media-fig img,
body.ioc-site [data-block-instance^="p-solutions-data-ai-"][data-variant-id="B-05-V08"] .ioc-media-fig img,
body.ioc-site [data-block-instance^="p-solutions-managed-services-"][data-variant-id="B-05-V08"] .ioc-media-fig img{
  aspect-ratio:16/9;
}

/* ⑥ B-11-V21 grid-fill tile (owner direction, 2026-08-16). A 3-column card
   grid whose count is not a multiple of three left bordered BLANK cells on
   14 pages; the fix is a trailing card carrying only a media band
   (routeFam `fill`), spanning from its own cell to the grid's last line.
   The band element exists on every V21 card, so an unfilled one must
   collapse — and the fill card's text elements (empty h3/p/link, the
   admin-label title never renders) are hidden wholesale. `min-height`
   keeps the tile from collapsing when it is the row's only auto-height
   child; the img cover + focal vars come from rule D above. */
body.ioc-site .ioc-card .ioc-card-media:empty{display:none}
/* `span 2`, not `auto / -1` — a definite end line with an auto start resolves
   to span 1 ENDING at -1 (the tile lands in the last column and the blank
   moves to the middle; measured before this fix). Every V21 placement today
   is a 4-card grid, so the remainder is exactly 2 at three columns — and at
   the ≤960px two-column collapse the same span makes a full-width banner row.
   At the ≤620px single-column collapse a span of 2 would mint an implicit
   second column, so it resets to auto there. */
body.ioc-site .ioc-cards .ioc-card[data-route-fam="fill"]{padding:0;grid-column:span 2}
body.ioc-site .ioc-cards .ioc-card[data-route-fam="fill"] > :not(.ioc-card-media){display:none}
body.ioc-site .ioc-cards .ioc-card[data-route-fam="fill"] .ioc-card-media{height:100%;min-height:240px;aspect-ratio:auto}
@media(max-width:620px){body.ioc-site .ioc-cards .ioc-card[data-route-fam="fill"]{grid-column:auto;min-height:200px}}

/* ⑦ B-21-V05 office map — the CMS-D-032 click-to-load facade.
   The map used to be an unconditional OpenStreetMap embed frame baked into the
   variant's templateHtml: no cookie, but four requests left the browser on
   every /contact load and each disclosed the visitor's IP to a third party
   before any consent choice existed. (The host is deliberately not spelled as a
   URL in this comment — T19 grades loader positions by pattern, and a comment
   that reads like one is a finding nobody can act on.) The frame is now mounted
   by the SAME facade YouTube and Vimeo use (`.consent-box` + `[data-infoc-consent]`,
   `KitRuntimeAdapters.client.tsx`), which the kit sheet styles for the admin
   preview only (`infoc-admin-preview.css:267`) — the public sheet has no
   `.consent-box` rule at all, so the panel's presentation lives here.
   CMS-D-078 both ways: the office card, the badge and the map panel render
   whether or not anyone ever presses the button; only the third-party request
   is withheld. The frozen kit already owns everything AFTER the press —
   `.ioc-office-map iframe{position:absolute;inset:0;width:100%;height:100%}`
   (infoc-cms.css:1642) — so nothing here describes the loaded state, and the
   mounted frame fills the panel exactly as the baked one did.
   Focus is the kit's own `:focus-visible{box-shadow:var(--ioc-shadow-focus)}`
   (infoc-cms.css:184); no focus rule is restated here.
   Spacing is on DESIGN.md's scale (24 · 12 · 16), so T17's v6 ceiling is
   unmoved; every colour is a `var(--ioc-…)` the frozen sheet declares, so
   T16 ① sees no new literal. */
/* Owner direction 2026-08-17: the unloaded facade must not be a bare grey
   void. A code-owned map-sketch ground — fine token-grid "streets" on the
   soft surface with the office marked by an accent square over a hairline
   ring — so the panel reads as a map at rest. NOTHING is fetched: the real
   tiles still load only on the visitor's press (CMS-D-032). */
body.ioc-site .ioc-office-map:has(.consent-box){background:var(--ioc-g10,#f4f4f4);background-image:linear-gradient(var(--ioc-g20,#e0e0e0) 1px,transparent 1px),linear-gradient(90deg,var(--ioc-g20,#e0e0e0) 1px,transparent 1px),linear-gradient(45deg,transparent 48%,var(--ioc-g20,#e0e0e0) 48%,var(--ioc-g20,#e0e0e0) calc(48% + 1px),transparent calc(48% + 1px));background-size:48px 48px,48px 48px,192px 192px}
body.ioc-site .ioc-office-map:has(.consent-box)::after{content:"";position:absolute;left:50%;top:30%;width:12px;height:12px;transform:translateX(-50%);background:var(--ioc-blue,#0001ff);box-shadow:0 0 0 4px var(--ioc-surface,#fff),0 0 0 5px var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-office-map .consent-box{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;background:transparent}
body.ioc-site .ioc-office-map .ioc-office-load{position:relative;background:var(--ioc-surface,#fff)}
body.ioc-site .ioc-office-map .ioc-office-load{max-width:34ch;padding:12px 16px;font-family:var(--ioc-sans);font-size:14px;font-weight:600;line-height:1.4;color:var(--ioc-text-primary);background:var(--ioc-surface);border:1px solid var(--ioc-text-primary);cursor:pointer;transition:background .18s var(--ioc-ease),color .18s var(--ioc-ease),border-color .18s var(--ioc-ease)}
body.ioc-site .ioc-office-map .ioc-office-load:hover{background:var(--ioc-accent);border-color:var(--ioc-accent);color:var(--ioc-text-on-color)}
@media(prefers-reduced-motion:reduce){body.ioc-site .ioc-office-map .ioc-office-load{transition:none}}

/* ============================================================
   Q · Page-wide-family all-accent enforcement (owner rulings, 2026-08-17;
   decision entries OWED): Talents Gateway pages are ALL-GREEN and Academy
   pages are ALL-PURPLE. The family-accent standard
   (infoc-cms.css:1108-1112) routes --ioc-accent to each page-wide family's
   colour on [data-page-family="Talents Gateway"/"Academy"], but two
   defects kept surfaces on those routes painting house blue over it:
   ① this sheet's own §O kicker re-pin (`body.ioc-site .ioc-kicker`,
     :1508) spells `--ioc-blue` directly, so the family override never
     reaches any kicker;
   ② the absorbed legacy `.btn` (infoc-cms.css:2013,
     `background:var(--ioc--blue)`) FOLLOWS the canonical
     `.btn-primary`/`.btn-tertiary`/`.btn-on-dark` treatments (:245-256)
     at equal (0,1,0) specificity, so source order makes EVERY site button
     solid blue and the canonical accent treatments never paint — which is
     also why `.btn-tertiary` renders as a second primary instead of the
     outline the comps draw (Talents.dc.html hero secondary:
     `box-shadow:inset 0 0 0 1px #0001ff` on transparent). That clobber is
     a SITE-WIDE cascade defect; per the no-silent-scope rule it is
     corrected here ONLY inside the family scope the owner ruled on, and
     the site-wide half stays flagged for its own decision.
   The comps themselves keep kickers and the secondary CTA blue on these
   pages — the owner ruled that the two page-wide families carry their
   family accent on ALL page accents, so that residue is deliberately not
   reproduced. Global chrome (header/nav, cookie notice, chat launcher,
   skip-link, wordmark, the sh-progress blue→green ramp) stays house blue:
   shared by every route, it is not a page accent. The footer CTA band
   joins the scope via Footer.tsx carrying data-page-family on talents and
   academy routes (same commit) — it renders outside KitPageBody's wrapper
   and never inherited the family accent at all.
   Every value resolves through --ioc-accent/-hover/-ink, so the
   Appearance skin's family values (talents #0e6027, academy purple on the
   V6 skin) govern and every other page is pixel-identical. Industries/
   Company stay out on purpose: infoc-cms.css:1113 scopes them to the
   closing band only, and widening THAT is its own decision.
   ============================================================ */
body.ioc-site [data-page-family="Talents Gateway"] .ioc-kicker,
body.ioc-site [data-page-family="Academy"] .ioc-kicker{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site [data-page-family="Talents Gateway"] .btn-primary,
body.ioc-site [data-page-family="Academy"] .btn-primary{background:var(--ioc-accent)}
body.ioc-site [data-page-family="Talents Gateway"] .btn-primary:hover,
body.ioc-site [data-page-family="Talents Gateway"] .btn-primary:active,
body.ioc-site [data-page-family="Academy"] .btn-primary:hover,
body.ioc-site [data-page-family="Academy"] .btn-primary:active{background:var(--ioc-accent-hover)}
body.ioc-site [data-page-family="Talents Gateway"] .btn-tertiary,
body.ioc-site [data-page-family="Academy"] .btn-tertiary{background:transparent;color:var(--ioc-accent-ink,var(--ioc-accent));border-color:var(--ioc-accent)}
body.ioc-site [data-page-family="Talents Gateway"] .btn-tertiary:hover,
body.ioc-site [data-page-family="Academy"] .btn-tertiary:hover{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
body.ioc-site [data-page-family="Talents Gateway"] .btn-on-dark,
body.ioc-site [data-page-family="Academy"] .btn-on-dark{background:var(--ioc-accent)}
body.ioc-site [data-page-family="Talents Gateway"] .btn-on-dark:hover,
body.ioc-site [data-page-family="Academy"] .btn-on-dark:hover{background:var(--ioc-accent-hover)}

/* ============================================================
   T · PDPA consent tick — the comp's small print (owner ruling,
   2026-08-17; recorded 2026-08-19 as CMS-D-145). Every V6 comp draws the agree row as
   quiet small print directly above the button (Contact.dc.html:327:
   18px box, 12.5px/1.55 label in text-secondary, no card chrome) — the
   engine draws it through the generic checkbox branch, which the frozen
   kit styles as a boxed bold choice card (infoc-cms.css:1903-1910).
   Both renderers now add `ioc-consent` to that one fieldset (markup.ts +
   infoc-runtime.js, same commit) and this strips the card back to the
   comp's print. The DOM is unchanged — [data-required-group] validation
   and the error summary still hold — so this layer is presentation only.
   Spacing stays on the 4px scale (T17): the comp's 10px gap renders as
   12px; the input keeps the kit's own 3px optical offset. The checkbox
   is width/height (not snapped), and 12.5px is a font size, not spacing.
   ============================================================ */
body.ioc-site .ioc-consent .ioc-choices{display:block;border:0;background:transparent;overflow:visible}
body.ioc-site .ioc-consent .ioc-choice{padding:0;background:transparent;box-shadow:none;min-height:0;gap:12px}
body.ioc-site .ioc-consent .ioc-choice:hover{background:transparent}
body.ioc-site .ioc-consent .ioc-choice:has(input:checked){background:transparent;box-shadow:none}
body.ioc-site .ioc-consent .ioc-choice input{width:18px;height:18px}
body.ioc-site .ioc-consent .ioc-choice b{font-size:12.5px;font-weight:400;letter-spacing:0;line-height:1.55;color:var(--ioc-text-secondary)}

/* ============================================================
   W · Talk-to-INFOC topic chips (TalkToInfoc-standalone.html, owner
   revision 2026-08-17). The comp's "what is this about?" row is a wrap of
   toggle CHIPS, not the `.ioc-choices` card grid the radio groups use:
   each chip is a bordered pill that fills with accent blue when picked,
   its own checkbox visually hidden (the chip IS the control). `.ioc-multi`
   is the key both renderers emit (markup.ts + infoc-runtime.js). Steps are
   4/8/12/16 — DESIGN.md scale, so T17's ceiling is unmoved.
   ============================================================ */
body.ioc-site .ioc-multi .ioc-choices{display:flex;flex-wrap:wrap;gap:8px;border:0;background:transparent;overflow:visible;padding:0}
/* `position:relative` is LOAD-BEARING, not cosmetic. The input below is
   `position:absolute;inset:0;width:100%;height:100%`, so without a positioned
   ancestor it resolves against the INITIAL CONTAINING BLOCK and every hidden
   checkbox becomes a full-viewport invisible overlay — measured at 1440×1050.
   Ten of them stacked over the page meant every click anywhere landed on the
   topmost one, so exactly one chip (the last) could ever be selected and the
   rest of the page under them was unclickable. */
body.ioc-site .ioc-multi .ioc-choice{position:relative;flex:0 0 auto;min-height:0;padding:8px 12px;gap:0;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);box-shadow:none;cursor:pointer}
/* The checkbox is hidden but still FOCUSABLE and still hit-tested — `opacity:0`
   inside the chip, never `display:none` (which would drop it from the tab order
   and from `form.elements`, taking the group validator with it). No negative
   margin: the classic clip-rect recipe's `margin:-1px` is an off-scale value
   T17 counts, and inset:0 inside the positioned chip does the same job. */
body.ioc-site .ioc-multi .ioc-choice input{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:pointer;border:0;appearance:none}
body.ioc-site .ioc-multi .ioc-choice b{font-size:13px;font-weight:500;letter-spacing:-.008em;line-height:1.4;color:var(--ioc-text-primary)}
body.ioc-site .ioc-multi .ioc-choice:hover{border-color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-multi .ioc-choice:has(input:checked){background:var(--ioc-blue,#0001ff);border-color:var(--ioc-blue,#0001ff);box-shadow:none}
body.ioc-site .ioc-multi .ioc-choice:has(input:checked) b{color:var(--ioc-text-on-color,#fff)}
/* Keyboard reachability survives the hidden input: the chip carries the ring. */
body.ioc-site .ioc-multi .ioc-choice:has(input:focus-visible){outline:2px solid var(--ioc-blue,#0001ff);outline-offset:2px}
/* The authored helper line sits between legend and chips (both renderers). */
body.ioc-site .ioc-multi .ioc-fhint{margin:4px 0 12px}
body.ioc-site .ioc-field .ioc-fhint{margin:4px 0 8px}

/* ============================================================
   X · Subscription plan cards (B-11-V22, Marketplace-standalone.html,
   owner-delivered 2026-08-17). The comp's catalogue card: a mono unit
   label over the SKU name, the audience line, then a checked entitlement
   list. Its 5/7/12/14/20px steps snap to the DESIGN.md scale (T17), and
   its `box-shadow:inset 0 0 0 1px #e0e0e0` ring becomes a real 1px border
   (CMS-D-066 r4). An unfilled entitlement collapses so a shorter plan
   renders without a blank row — the `<span>` wrapper exists for exactly
   that test, since the check glyph would otherwise keep the row alive.
   ============================================================ */
body.ioc-site .ioc-card.ioc-plan{display:flex;flex-direction:column;padding:24px;gap:0}
body.ioc-site .ioc-card.ioc-plan .ioc-card-eyebrow{font-family:var(--ioc-mono);font-size:9.5px;font-weight:500;letter-spacing:.13em;color:var(--ioc-text-secondary);margin:0 0 12px}
body.ioc-site .ioc-card.ioc-plan h3{font-size:18px;font-weight:800;letter-spacing:-.022em;line-height:1.2;margin:0 0 4px}
body.ioc-site .ioc-card.ioc-plan>p:not(.ioc-card-eyebrow){font-size:13.5px;line-height:1.5;color:var(--ioc-text-secondary);margin:0 0 16px}
body.ioc-site .ioc-plan-inc{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
body.ioc-site .ioc-plan-inc li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;color:var(--ioc-text-primary)}
/* The comp nudges the glyph down 2px to sit on the first line's optical
   centre; 2 is off the DESIGN.md scale (T17), so the same alignment comes
   from matching the glyph box to the line box instead — `height:1.45em` IS
   the li's line-height, so the 14px mark centres itself and a wrapping
   entitlement still aligns to its first line. */
body.ioc-site .ioc-plan-inc li svg{width:14px;height:1.45em;flex:none;color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-plan-inc li:has(span:empty){display:none}


/* ============================================================
   X · Footer route band (FooterRouteBand.html, owner ruling 2026-08-18).
   Round 2, against the comp side by side — round 1 shipped four departures
   the comp did not ask for, each fixed below and each named so the next
   reader knows it was measured, not guessed.

   ① FULL BLEED. The comp labels itself "FULL WIDTH · SITS ABOVE THE FOOTER
      LINK GRID", and its cells run edge to edge so the four foot rules meet
      and cross the whole band. Round 1 left the kit's `padding:0 gutter` on
      `.footer-routes`, so the rules stopped a gutter short at both flanks and
      read as a broken line. The band sheds the inset; each CELL carries its
      own padding instead, which is where the comp puts it.
   ② THE TINTS ARE THE COMP'S. Round 1 read the solid family colours at
      2.45:1 on the ink ground, correctly refused them, and then over-corrected
      to plain white — losing the colour coding the band exists for. The comp
      already solved this: on ink it uses LIGHT tints (#a3adff #78a9ff #6fdc8c
      #be95ff), which clear AA comfortably. DESIGN.md forbids inventing a hex
      "not in the mock or tokens" — these ARE the mock's, so they are
      transcription, the same standing CMS-D-122 gives off-scale spacing.
   ③ THE GLYPHS. One 14px sprite icon per kicker, from the owned sheet:
      dashboard · store · people · education. Round 1 dropped them and called
      a four-icon vocabulary a separate decision; the comp had already chosen
      it, and the sprite already carries all four.
   ④ THE DIVIDER + THE OUTLINED SECOND ACTION. Each secondary cell rules off
      its action from its copy, and the comp's "All solutions" is an OUTLINED
      button beside the filled one, not an underlined text link.

   Motion is a 120ms colour/background transition only — no transform, no
   decorative motion (DESIGN.md anti-patterns).

   MARKETPLACE gets its own accent here rather than borrowing the house blue,
   which made two of four rules identical. It is declared as a token with a
   truthful fallback (T16 ⑨), site-scoped in this sheet. Promoting it into the
   per-site skin contract, with its own AA pairs in site-skin-contract.spec.ts,
   is the follow-up that decision owns.
   ============================================================ */
body.ioc-site{--ioc-fam-marketplace:#0043ce}
body.ioc-site .ioc-footer .footer-routes{padding:0}
/* BOXED, not bled (owner ruling 2026-08-18): the four cells sit inside the
   site container like every other band on the page. Round 2 pushed them edge
   to edge, which made the band the widest thing on the site and cost it the
   card reading the comp has. Only `.route-rule` below is full width. */
/* THE BOX IS THE SITE MEASURE (owner direction 2026-08-20). The literal
   1280px predated `--ioc-maxw:1360px` and left the band 40px inset from the
   header/footer containers on each side — the one band on the page that did
   not line up with the wordmarks. Same fix on `.route-rule` below, which
   mirrors this geometry by contract. */
body.ioc-site .ioc-footer .route-grid{max-width:var(--ioc-maxw,1360px);margin:0 auto;padding:0 var(--ioc-gutter);grid-template-columns:2fr 1fr 1fr 1fr;align-items:stretch;border:0}
body.ioc-site .ioc-footer .route{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px;border-right:1px solid rgba(255,255,255,.14);box-shadow:none;transition:background 120ms linear,color 120ms linear}
body.ioc-site .ioc-footer .route:last-child{border-right:0;box-shadow:none}
/* The outer cells' own 24px inset was the second half of the misalignment:
   the first cell's text sat 24px right of the wordmarks, the last cell's
   action 24px short of the contact column's right edge. The EDGE padding goes
   to zero so the band's first and last content columns sit exactly on the
   container content edge; interior insets and the hairline dividers keep the
   card reading. Positional (:first/:last-child), not `.route-primary` — the
   store picks which cell is primary, the grid track does not move. Desktop
   only: below 900px the cells stack and every cell needs its full inset. */
@media (min-width:901px){
  body.ioc-site .ioc-footer .route:first-child{padding-left:0}
  body.ioc-site .ioc-footer .route:last-child{padding-right:0}
}
/* Each family names its rule colour AND its on-ink tint. The rule is a graphic
   element so it wears the solid colour; the words wear the tint. */
/* CMS-D-164 — `--rt` NAMES ITS TOKEN NOW, and that is the whole point of this
   edit rather than a tidy-up. These four were the on-ink steps spelled as bare
   literals, so the Appearance controls added in the same commit would have
   moved the footer's column headings and left this band behind: one green in
   the Talents column, a different green in the Talents route cell, on the same
   black band. Marketplace keeps `#78a9ff` because it has no on-ink field —
   `--ioc-accent-on-inverse` is a different, fixed role. */
body.ioc-site .ioc-footer .route[data-fam="solutions"]{--rf:var(--ioc-accent,#0001ff);--rt:var(--ioc-on-inverse-blue,#33b1ff)}
body.ioc-site .ioc-footer .route[data-fam="marketplace"]{--rf:var(--ioc-fam-marketplace,#0043ce);--rt:#78a9ff}
body.ioc-site .ioc-footer .route[data-fam="talents"]{--rf:var(--ioc-fam-talents,#1a7a52);--rt:var(--ioc-on-inverse-green,#3fdba0)}
body.ioc-site .ioc-footer .route[data-fam="academy"]{--rf:var(--ioc-fam-academy,#6929c4);--rt:var(--ioc-on-inverse-purple,#be95ff)}
body.ioc-site .ioc-footer .route .rk{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:var(--rt,#33b1ff);font-family:var(--ioc-mono)}
body.ioc-site .ioc-footer .route .rk svg{width:14px;height:14px;flex:none}
body.ioc-site .ioc-footer .route b{font-size:16px;font-weight:800;letter-spacing:-.016em;line-height:1.2;color:var(--ioc-footer-text,#fff)}
body.ioc-site .ioc-footer .route small{font-size:12px;line-height:1.5;color:var(--ioc-footer-text,#fff);opacity:.8}
/* The action sits at the cell's foot, ruled off from the copy, so four cells of
   different copy lengths still line their actions up. */
body.ioc-site .ioc-footer .route .route-go{margin-top:auto;align-self:stretch;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:700;color:var(--rt,#a3adff)}
body.ioc-site .ioc-footer .route .route-go svg{width:16px;height:16px;flex:none}
/* Whole-cell hover: the cell IS the target (the B-10-V21 treatment). */
/* HOVER IS THE LINE (owner ruling 2026-08-18). The cell used to flood with the
   family colour, which meant every word had to restate itself in white and the
   band shouted on every pass of the mouse. The reward is now the rule beneath
   the cell; the cell itself only lifts. Because the ground barely moves, the
   tints keep the contrast they were measured at — nothing has to change colour
   to stay readable. */
body.ioc-site .ioc-footer a.route:hover{background:rgba(255,255,255,.04)}
body.ioc-site .ioc-footer .route-primary:hover{background:rgba(255,255,255,.04)}
body.ioc-site .ioc-footer a.route:focus-visible{outline:2px solid var(--rt,#a3adff);outline-offset:-4px}
/* THE PRIMARY CELL — one filled action, one outlined, the promise beneath. */
body.ioc-site .ioc-footer .route-primary{cursor:default;padding:24px 32px 24px 24px}
body.ioc-site .ioc-footer .route-primary b{font-size:24px;letter-spacing:-.02em;line-height:1.2}
body.ioc-site .ioc-footer .route-actions{margin-top:auto;display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
body.ioc-site .ioc-footer .route-cta{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;background:var(--ioc-accent,#0001ff);color:var(--ioc-text-on-color,#fff);font-size:14px;font-weight:700;transition:background 120ms linear}
body.ioc-site .ioc-footer .route-cta:hover{background:var(--ioc-accent-hover,#0000c4)}
body.ioc-site .ioc-footer .route-cta svg{width:16px;height:16px;flex:none}
body.ioc-site .ioc-footer .route-alt{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid rgba(255,255,255,.28);color:var(--ioc-footer-text,#fff);font-size:14px;font-weight:700;text-decoration:none;transition:border-color 120ms linear,background 120ms linear}
body.ioc-site .ioc-footer .route-alt:hover{border-color:var(--ioc-footer-text,#fff);background:rgba(255,255,255,.08)}
body.ioc-site .ioc-footer .route-assurance{font-size:12px;line-height:1.5;color:var(--ioc-footer-text,#fff);opacity:.7}
@media (max-width:900px){
  body.ioc-site .ioc-footer .route-grid{grid-template-columns:1fr}
  body.ioc-site .ioc-footer .route{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
}

/* ============================================================
   Y · Talk-desk CTA band (B-17-V11, TalkToInfoc-standalone.html,
   owner-delivered). The comp's single campaign block: the pitch and its
   two rails on the left, the form card on the right, one decision on the
   screen. Steps are the DESIGN.md scale (T17); the comp's inset rings are
   real 1px borders (CMS-D-066 r4) and the accent is house blue.
   ============================================================ */
/* THE BAND OPENS HIGHER THAN A CONTENT SECTION DOES. The comp's copy column
   starts 52px under its shell; inheriting `.ioc-block`'s site-wide 84px put
   148px of white between the header and the kicker on a page whose only job
   is the first screen. 48px is the scale step nearest the comp (T17). */
body.ioc-site .ioc-talkdesk{padding-top:48px;padding-bottom:48px}
body.ioc-site .ioc-talkdesk .ioc-td-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:start}
/* The comp's 40px holds from ~950px up; below that it runs to five lines on a
   phone, so the step is fluid rather than fixed. Bounds are TYPE, not spacing —
   T17 grades spacing declarations only. */
body.ioc-site .ioc-talkdesk .ioc-td-copy h2{font-size:clamp(30px,4.2vw,40px);line-height:1.05;font-weight:800;letter-spacing:-.04em;margin:12px 0 16px;max-width:21ch;text-wrap:pretty}
body.ioc-site .ioc-talkdesk .ioc-lede{font-size:16px;line-height:1.55;max-width:48ch;margin:0 0 24px}
/* THE CALL CARD — the comp's `box-shadow:0 0 0 2px #000` ring, drawn as a real
   2px border on the same terms B-17-V10's cards already set (CMS-D-066 r4:
   borders, never shadows-as-structure). It is an offer, not a divider. */
body.ioc-site .ioc-talkdesk .ioc-td-call{border:2px solid var(--ioc-g100,#161616);background:var(--ioc-surface,#fff);padding:16px 24px;margin:0 0 24px}
body.ioc-site .ioc-talkdesk .ioc-td-rk{display:flex;align-items:center;gap:8px;font-family:var(--ioc-mono);font-size:10.5px;font-weight:500;letter-spacing:.17em;color:var(--ioc-blue,#0001ff);margin:0 0 8px}
/* The live dot. Green because it states that the line is answered now. */
body.ioc-site .ioc-talkdesk .ioc-td-dot{display:block;width:8px;height:8px;flex:none;background:var(--ioc-success,#198038)}
body.ioc-site .ioc-talkdesk .ioc-td-tel{display:inline-flex;align-items:center;gap:8px;font-size:24px;font-weight:800;letter-spacing:-.028em;color:var(--ioc-text-primary);line-height:1.15}
body.ioc-site .ioc-talkdesk .ioc-td-tel svg{width:20px;height:20px;flex:none;color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-talkdesk .ioc-td-tel:hover{color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-talkdesk .ioc-td-hours{font-size:14px;line-height:1.55;color:var(--ioc-text-secondary);margin:8px 0 0}
body.ioc-site .ioc-talkdesk .ioc-td-hours a{color:var(--ioc-blue,#0001ff)}
/* THE PLATFORM PANEL — this page's ONE dark band (WIRING.md §5.3). */
body.ioc-site .ioc-talkdesk .ioc-td-panel{background:var(--ioc-g100,#161616);color:var(--ioc-text-on-color,#fff);padding:24px;margin:0 0 24px}
body.ioc-site .ioc-talkdesk .ioc-td-pk{font-family:var(--ioc-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--ioc-on-inverse-blue,#33b1ff);margin:0 0 16px}
/* Two columns, hairline-separated. The dividers are BORDERS, not a `gap:1px`:
   a 1px gap is off DESIGN.md's scale and would raise T17's v6 ceiling for a
   line that a border draws identically. */
body.ioc-site .ioc-talkdesk .ioc-td-chips{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;padding:0;list-style:none}
body.ioc-site .ioc-talkdesk .ioc-td-chip{display:flex;align-items:center;gap:12px;padding:12px;font-size:13px;font-weight:600;letter-spacing:-.012em;color:var(--ioc-text-on-color,#fff);border-top:1px solid rgba(255,255,255,.22)}
body.ioc-site .ioc-talkdesk .ioc-td-chip:nth-child(odd){border-right:1px solid rgba(255,255,255,.22)}
body.ioc-site .ioc-talkdesk .ioc-td-chip:nth-child(-n+2){border-top:0}
body.ioc-site .ioc-talkdesk .ioc-td-chip svg{width:16px;height:16px;flex:none;color:var(--ioc-on-inverse-blue,#33b1ff)}
body.ioc-site .ioc-talkdesk .ioc-td-chip:empty,body.ioc-site .ioc-talkdesk .ioc-td-chip:has(span:empty){display:none}
/* THE PROMISES — the page's only risk-reversal copy, and the reason the left
   column reaches the form's foot instead of stopping 358px above it. An empty
   slot hides, so an unseeded site renders a shorter column, never a bare tick. */
body.ioc-site .ioc-talkdesk .ioc-td-promises{display:flex;flex-direction:column;gap:12px;margin:0;padding-top:24px;list-style:none;border-top:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-talkdesk .ioc-td-promise{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.5;color:var(--ioc-text-primary)}
body.ioc-site .ioc-talkdesk .ioc-td-promise svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--ioc-blue,#0001ff)}
body.ioc-site .ioc-talkdesk .ioc-td-promise:has(span:empty){display:none}
body.ioc-site .ioc-talkdesk .ioc-td-promises:not(:has(.ioc-td-promise:not(:has(span:empty)))){display:none}
/* THE FORM IS ONE PANEL, NOT TWO. The mount used to carry its own border and
   32px of padding around `.ioc-form`, which carries a border and 36px of its
   own — two rings with nothing between them but 68px of air. The mount is now
   bare and the form itself is the comp's 2px-ringed card, with its title
   bleeding to the edges as the comp's ink header bar. */
body.ioc-site .ioc-talkdesk .ioc-td-form .ioc-form{border:2px solid var(--ioc-g100,#161616);padding:0 24px 24px;gap:24px}
body.ioc-site .ioc-talkdesk .ioc-td-form .ioc-form-title{margin:0 -24px;background:var(--ioc-g100,#161616);color:var(--ioc-text-on-color,#fff);padding:16px 24px;font-size:14px;font-weight:700;letter-spacing:-.012em}
@media(max-width:900px){
  /* minmax(0,1fr), NOT 1fr: a bare `1fr` floors at the column's MIN-CONTENT,
     and the form's inputs make that wider than a 390px viewport — the page
     scrolled 5px sideways. */
  body.ioc-site .ioc-talkdesk .ioc-td-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  body.ioc-site .ioc-talkdesk .ioc-td-chips{grid-template-columns:1fr}
  body.ioc-site .ioc-talkdesk .ioc-td-chip:nth-child(odd){border-right:0}
  body.ioc-site .ioc-talkdesk .ioc-td-chip:nth-child(2){border-top:1px solid rgba(255,255,255,.22)}
}

/* THE RULE STRIP — the ONE full-width element. It mirrors the grid's own
   2fr 1fr 1fr 1fr, so each segment is its route's share of the PAGE and the
   outer two bleed past the container the cells stop at.
   BLUE IS THE DEFINED FALLBACK (owner ruling): a family whose accent token is
   missing, and any family this stylesheet has no rule for, resolves to the
   house accent rather than to nothing — a segment that renders transparent
   would read as a gap in the rule, which is worse than the wrong blue. */
/* ALIGNED TO THE SECTION, not to the page (owner ruling 2026-08-18). The strip
   used to grid its four segments across the VIEWPORT while the cells were boxed
   to the container — so every segment was wider than its cell and shifted right
   of it, and hovering Talents lit a line that started mid-cell and ran past
   Academy. It now carries the SAME geometry as `.route-grid` — same max-width,
   same auto margins, same gutter, same 2fr 1fr 1fr 1fr — so each segment is
   exactly its own cell wide and sits directly beneath it. The two must be
   changed together: they are one measurement expressed twice, because the rule
   is a sibling of the grid rather than a child of the cell. */
body.ioc-site .ioc-footer .route-rule{display:grid;max-width:var(--ioc-maxw,1360px);margin:0 auto;padding:0 var(--ioc-gutter);grid-template-columns:2fr 1fr 1fr 1fr;height:3px}
body.ioc-site .ioc-footer .route-rule span{background:var(--ioc-accent,#0001ff);opacity:0;transition:opacity 140ms linear}
/* `:has()` because the rule is a SIBLING of the grid, not a child of the cell:
   the line must span the page while the cells stay boxed, so the two cannot be
   nested. Keyboard parity is deliberate — `:focus-visible` reveals the same
   segment, so the affordance is not mouse-only. */
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="solutions"]:hover) .route-rule span[data-fam="solutions"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="solutions"]:focus-visible) .route-rule span[data-fam="solutions"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="marketplace"]:hover) .route-rule span[data-fam="marketplace"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="marketplace"]:focus-visible) .route-rule span[data-fam="marketplace"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="talents"]:hover) .route-rule span[data-fam="talents"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="talents"]:focus-visible) .route-rule span[data-fam="talents"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="academy"]:hover) .route-rule span[data-fam="academy"],
body.ioc-site .ioc-footer .footer-routes:has(.route[data-fam="academy"]:focus-visible) .route-rule span[data-fam="academy"]{opacity:1}
body.ioc-site .ioc-footer .route-rule span[data-fam="solutions"]{background:var(--ioc-accent,#0001ff)}
body.ioc-site .ioc-footer .route-rule span[data-fam="marketplace"]{background:var(--ioc-fam-marketplace,#0043ce)}
body.ioc-site .ioc-footer .route-rule span[data-fam="talents"]{background:var(--ioc-fam-talents,#1a7a52)}
body.ioc-site .ioc-footer .route-rule span[data-fam="academy"]{background:var(--ioc-fam-academy,#6929c4)}
@media (max-width:900px){
  body.ioc-site .ioc-footer .route-rule{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   AA · Route-family CARD contract — the register closes, and the
   hand-off band becomes ONE variant (owner ruling 2026-08-18,
   CMS-D-130). Extends CMS-D-128 ① from page-wide family accents to the
   per-CARD family the same palette already implies.

   THE DEFECT THIS CLOSES. The card family mechanism has shipped since
   CMS-D-071 W6 (`infoc-cms.css:1648-1661` — top rule, 4% tint, tinted
   eyebrow/icon/link, hover, focus ring) and `routeFam` has been an
   admin field on every B-11 card since (`blocks/one/data-cards.ts:50`).
   Measured across the 23 seeded pages: 205 B-11 cards, 13 carrying a
   family, ELEVEN of those rendering one. Meanwhile the footer draws the
   same three or four routes in full colour on every one of those pages.
   The page contradicted itself about whether a route has identity —
   coloured at the foot, grey in the body. Nothing here is a new design;
   it is the design that was already built, finally reaching the cards.

   (1) ONE KEY JOINS THE REGISTER, AND IT IS NOT A NEW HEX.
       `sec` took `--ioc-fam-security #9f1853` when this section landed.
       SUPERSEDED by CMS-D-168: `sec` now resolves to house blue and that
       token is retired, because the reason it was held back in the first
       place (a token with no consumer) returned the moment the fold
       removed its only rule. The paragraph is kept because the rest of
       this section's argument still stands. Meanwhile the
       seed has been authoring `sec` on two cards the whole time (/home
       "Secure the platform", /solutions "Cloud, Modern Work &
       Security"); with no rule to match, `--rf` fell through to the page
       accent and both read as generic blue. Silent rather than broken,
       which is exactly why it survived a year of review.
       It measures 7.70:1 on the card ground. The closed set and its AA
       pairs are pinned by `route-family-contract.spec.ts`, so a new key
       cannot be typed into the seed without a rule to render it — the
       failure mode that produced `sec` in the first place.

       `mkt` IS DELIBERATELY NOT ADDED, and that is the same reasoning
       running the other way. `--ioc-fam-marketplace #0043ce` exists at
       section X and is reachable only from `.ioc-footer`, so a card
       cannot paint a Marketplace route — and section X's own comment
       names closing that as the follow-up it owes. But NO CARD IN THE
       SEED LINKS TO `/marketplace`: not one of the 205. A
       `[data-route-fam="mkt"]` rule would therefore be markup that no
       document can produce, which is precisely the dangling defect that
       held `sec` back — and adding the key while inventing a Marketplace
       hand-off card to justify it would break SOT 8 rule 1. The key
       lands when a real card routes there and its copy is authored.

   (2) THE HAND-OFF BAND IS B-11-V20, AND ONLY B-11-V20.
       Five bands across the site route the visitor to Solutions /
       Academy / Talents / Technologies, drawn on FOUR different
       variants. Two sat on V05, whose item contract has no `fam` key and
       no `data-route-fam` in its template, so those two could not carry
       a family however the content was authored — a content fix would
       have bounced off them forever. V20 is V05's item shape with the
       family attribute added and the trailing note dropped (neither band
       used it), so the swap is lossless and the content keys are
       identical. WIRING.md 5.3's "one class contract per block type",
       applied to a moment that had four.

   (3) THE ICON PLATE IS SCOPED TO V20, NOT GLOBAL.
       The footer route cell frames its glyph in a bordered box; that is
       the band's most recognisable move, and it is what makes the body
       band and the footer band read as one family of object rather than
       two designs that happen to share a palette. It is applied HERE
       ONLY: V17/V18/V21 ship their own measured icon treatments (the
       home V21 rules at 15px, section above) and a global plate would
       silently restyle every one of them. Hairline, radius 0, family
       colour — CMS-D-066 r4. It is deliberately a SQUARE: an icon in a
       coloured circle is the house style of every template on the
       internet, and radius 0 is a locked rule besides.
   ============================================================ */
/* CMS-D-168 - `sec` FOLDS INTO HOUSE BLUE, same ruling and same reasoning as
   `dat` above. Security is a service area too. `--ioc-fam-security` is
   RETIRED with it: this sheet was its only declaration and this rule its
   only consumer, so leaving it declared would be the T16 (2)b orphan the
   gate refuses. 3 live cards. */
body.ioc-site .ioc-cards [data-route-fam="sec"]{--rf:var(--ioc-blue);--rfi:var(--ioc-blue)}

/* An empty icon slot must not leave its margin behind. `.ioc-card-ix`
   carries `margin:0 0 18px` (infoc-cms.css:1222) and the kit hides only
   the SVG when the sprite id is blank (:1989), so a card authored with
   no icon paid 18px of lead for a glyph it never drew. Hide the WRAPPER,
   and only when its sole child is that blank-href svg, so the monogram
   variants (V12/V18) that put TEXT in the same paragraph are untouched.
   Specificity is deliberate: this lands at (0,4,2) against the plate
   rule below at (0,4,1), so an icon-less V20 card draws no empty box. */
body.ioc-site .ioc-card .ioc-card-ix:has(> svg:only-child > use[href$="#"]){display:none}

/* (3) the plate. */
body.ioc-site [data-variant-id="B-11-V20"] .ioc-card .ioc-card-ix{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 0 16px;border:1px solid color-mix(in oklch,var(--rf) 34%,var(--ioc-surface,#fff))}
body.ioc-site [data-variant-id="B-11-V20"] .ioc-card .ioc-card-ix .ioc-cardicon{width:20px;height:20px;color:var(--rfi)}
body.ioc-site [data-variant-id="B-11-V20"] .ioc-card:hover .ioc-card-ix{border-color:var(--rf)}

/* ============================================================
   AB · An empty icon slot must not reserve its lead (owner report
   2026-08-18, /talents "Evidence model" and the four bands like it).

   `.ioc-feature .ioc-fmark` (infoc-cms.css:1244) carries
   `margin-bottom:clamp(14px,1.4vw,20px)`, and the kit hides only the SVG
   when the sprite id is blank (`:1988`). The wrapper therefore stayed in
   flow at height ZERO with its full bottom margin — measured on /talents:
   `h:0, margin-bottom:20px` — so every feature card authored without an
   icon paid 20px of lead, on top of `.ioc-feature`'s own 34px padding, for
   a glyph it never drew. Thirty items across five bands did exactly that.

   The real fix is authoring the icons, and this round does that. This rule
   is the SAFETY NET for the next item authored without one, so the failure
   mode degrades to "no icon" instead of "no icon and a hole where it was".

   `:only-child` is load-bearing. `.ioc-fmark` is also the numbered variants'
   mono numeral slot (34-46px, `--ioc-g30`), and a numeral is TEXT in the same
   wrapper — without the guard, a numbered item that also carried a blank svg
   would lose its number. Same guard, same reason, as the `.ioc-card-ix` rule
   in section AA above.

   NOT A DEFECT, checked and recorded so the next reader does not re-open it:
   `.ioc-card-tags` and `.ioc-card-link[href="#"]` were both suspected of the
   same waste. They are not — `infoc-cms.css:1985` already collapses a tag row
   whose tags are all empty, and the dead card link is already hidden. Measured
   live on /talents: 8 tag rows and 8 dead links, ZERO of each visible.
   ============================================================ */
body.ioc-site .ioc-feature .ioc-fmark:has(> svg:only-child > use[href$="#"]){display:none}

/* ============================================================
   AC · The HEADER joins the page family (owner ruling 2026-08-18,
   CMS-D-132). Extends CMS-D-128 (1), which took the family accents page-wide
   in <main> and explicitly left "global chrome house blue".

   WHY AN ATTRIBUTE HAD TO BE ADDED IN TSX FIRST. `data-page-family` is emitted
   by `KitPageBody` on `body > main > article > div.infoc-cms`, and `<header>`
   is a SIBLING of `<main>` — measured, not assumed. No descendant selector
   from the page wrapper can ever reach the chrome, which is the identical
   structural reason the footer CTA band grew its own attribute under
   CMS-D-128. `Header.tsx` now sets it from `route-path.ts#pageFamilyOf`, the
   single route-to-family map (the copy that lived in `Footer.tsx` was folded
   into it, because two copies is how the band and the chrome drift apart).

   WHY THE TOKENS ARE REMAPPED RATHER THAN TEN SELECTORS RESTATED. Every blue
   in the header spells `var(--ioc-blue)` or `var(--ioc--blue)` LITERALLY, not
   `var(--ioc-accent)` — so the family scope alone moved none of them. Listing
   the selectors (wordmark, top CTA, mega labels, view-all, featured rail and
   its inline SVGs, which inherit through currentColor) would be a list that
   silently rots as the header grows. Remapping the two blue tokens inside this
   one scope moves everything downstream, including SVG fills nobody enumerated.
   `--ioc--blue` (double dash) is NOT a typo: it is the absorbed legacy layer's
   parallel token namespace, declared in `infoc-cms.css`, and the wordmark reads
   it. Both are mapped or the "C" stays blue while the CTA turns green.

   THIS IS SAFE HERE AND WOULD NOT BE ON THE FOOTER. The header has no
   per-route colour system, so remapping its blue is unambiguous. The footer
   does: `.route-cta` and `.route-rule span[data-fam="solutions"]` resolve
   `--ioc-accent` as the SOLUTIONS cell's own identity, so the same treatment
   there would paint Solutions green on /talents. `Footer.tsx` records that
   rejection at its root element; the route band keeps its per-route palette on
   every page, and its CTA band keeps the attribute CMS-D-128 gave it.

   No new hex: token to token, so T16 (1) sees no literal and DESIGN.md rule 3
   holds. Contrast is unchanged from the values the family scope already ships.
   ============================================================ */
body.ioc-site .ioc-header[data-page-family="Talents Gateway"]{
  --ioc-blue:var(--ioc-fam-talents);
  --ioc--blue:var(--ioc-fam-talents);
  --ioc-blue-hover:var(--ioc-fam-talents-hover);
}
body.ioc-site .ioc-header[data-page-family="Academy"]{
  --ioc-blue:var(--ioc-fam-academy);
  --ioc--blue:var(--ioc-fam-academy);
  --ioc-blue-hover:var(--ioc-fam-academy-hover);
}
/* THREE MORE TOKENS, each found by MEASURING the rendered page rather than by
   reading the sheet — the reason the list is not just `--ioc-blue`:
     `--ioc-header-active` paints the active nav underline and it is a ::AFTER,
   so an element scan cannot see it at all; on /talents the active slot is
   Talents Gateway, which would have kept a blue underline under a green
   wordmark and nobody would have caught it from the DOM.
     `--ioc-selected-border` rules the mega panel's featured rail. Its base is
   #c6d9ff, but the v6 SKIN overwrites it to #0001ff at runtime, which is why it
   survived the first pass — the value that renders is not the value the sheet
   declares.
     `--ioc-selected-surface` is the featured panel's pale wash (#edf5ff, a blue
   tint) and it has NO family equivalent — `--ioc-fam-talents-tint` and
   `-academy-tint` do not exist. Inventing the two hexes is forbidden
   (DESIGN.md, "NEVER invent a hex"), so it is DERIVED from the family accent
   with `color-mix`, the same instrument `.ioc-cards [data-route-fam]` already
   uses for its 4% card ground. Hex-free, and it follows any future skin. */
body.ioc-site .ioc-header[data-page-family]{
  --ioc-header-active:var(--ioc-accent);
  --ioc-selected-border:var(--ioc-accent);
  --ioc-selected-surface:color-mix(in oklch,var(--ioc-accent) 8%,var(--ioc-surface,#fff));
}

/* ============================================================
   AD · FORM AFFORDANCES, site-wide (owner ruling 2026-08-18, from a screenshot
   — its weight rule is scoped out of the consent tick by CMS-D-146; see (1)
   of /talk-to-infoc: "make the What is this about? items bold and focused, and
   the form easy to identify the box").

   THE MEASUREMENT. On B-17-V11 a selected topic chip changed ONE thing: its
   border colour, #e0e0e0 -> #0001ff, 1px. No fill, no weight change, no text
   colour. The native checkbox is `opacity:0;position:absolute` (kit :1907
   territory), so with the border being the only signal there is nothing else
   for the eye to catch — on a ten-chip grid a visitor cannot tell at a glance
   what they picked. The markup already ships `<b>`, and it was rendering at
   500 because nothing site-wide restated the kit's own `font-weight:600`.

   THIS IS NOT A NEW DESIGN — IT IS AN EXISTING ONE, DE-SCOPED. The good
   treatment already lived at `[data-block-instance^="p-home-"]
   [data-variant-id="B-17-V10"]` (:1203-1244): hairline border, blue border and
   tinted ground when checked, `b{font-weight:700}`. It was written for the HOME
   enquiry form and every other form on the site was left with the flat
   fallback. /talk-to-infoc is B-17-V11, so it matched none of it. Rather than
   copy the block to a second variant selector and have the same thing drift in
   two places, the rules move up to `body.ioc-site` where they describe what a
   choice chip IS. The home block keeps its own copies and still wins on
   specificity with identical values, so nothing about the home form moves.

   FIELDS BECOME A BOX, AND THAT DEPARTS FROM THE COMP. Section (1) above sets
   `border:0;border-bottom:1px` site-wide, citing Home.dc.html:341-343 —
   underline-only was faithful. The owner asked for the box, which outranks the
   comp exactly the way the white ground in (3a) already does on this same
   block. Focus keeps a real state rather than the 1px underline-colour swap the
   underline treatment could afford: border plus a 1px inset ring reads as a
   2px edge without adding a shadow-as-structure (CMS-D-066 r4).

   HINTS ARE PROSE, SO THEY ARE MANROPE. `.ioc-fhint` inherits `--ioc-mono` from
   the kit (:1925). CMS-D-066 r2 reserves JetBrains Mono for IDs, routes, tokens
   and numbers; "Pick as many as apply. Your selection decides who replies." is
   none of those, and it renders as code in the screenshot that prompted this.
   Corrected for the SITE only — the kit rule still governs the admin, where a
   hint may legitimately carry an id.

   NO NEW HEX (T16 (1)): every value is a token or a color-mix of one, and the
   selected ground uses the same instrument as `.ioc-cards [data-route-fam]`.
   ============================================================ */

/* (1) Choice chips — selection is legible without hunting for a 1px edge.

   `.ioc-choicegroup:not(.ioc-consent)` on the WEIGHT rule is CMS-D-146, and it
   is the same defect §AG/CMS-D-145 fixed one selector earlier: this rule was
   written for CHOICE CHIPS — things a visitor picks between — and an unqualified
   `.ioc-choices .ioc-choice b` also reaches the PDPA consent tick, which is a
   legal agreement and not a choice. It tied §T on specificity (both (0,3,2)) and
   won on source order, so §T's `font-weight:400` had never rendered on any page
   since this section landed: the agree line was bold everywhere, which is the
   opposite of small print. The owner ruled 400 the standard across all forms.
   The 700 itself is UNCHANGED and still the owner's 2026-08-18 ruling for the
   topic chips (the section header above); only the consent tick leaves its
   scope. The BORDER/padding rule deliberately keeps the old selector — §T
   already strips the card chrome off the consent row at higher specificity, so
   qualifying it too would add a second way to say the same thing. */
body.ioc-site .ioc-choices .ioc-choice{border:1px solid var(--ioc-border-subtle);box-shadow:none;padding:12px 16px}
body.ioc-site .ioc-choicegroup:not(.ioc-consent) .ioc-choices .ioc-choice b{font-weight:700}
/* `--ioc-accent`, not `--ioc-blue` (CMS-D-133). Section AD spelled the house
   blue literally, which is identical on every page EXCEPT the two that carry a
   family scope — on /talents and /academy a selected chip stayed blue inside a
   green or purple form, the same class of mismatch CMS-D-132 fixed in the
   header. `--ioc-accent` IS house blue everywhere else, so nothing else moves. */
body.ioc-site .ioc-choices .ioc-choice:hover{border-color:var(--ioc-accent);background:var(--ioc-g10)}
body.ioc-site .ioc-choices .ioc-choice:has(input:checked){
  border-color:var(--ioc-accent);
  background:color-mix(in oklch,var(--ioc-accent) 8%,var(--ioc-surface,#fff));
  box-shadow:inset 0 0 0 1px var(--ioc-accent);
}
body.ioc-site .ioc-choices .ioc-choice:has(input:checked) b{color:var(--ioc-accent-ink,var(--ioc-accent))}

/* (2) Text fields read as a box, and focus is a state rather than a hairline. */
body.ioc-site .ioc-field input,
body.ioc-site .ioc-field select,
body.ioc-site .ioc-field textarea{border:1px solid var(--ioc-border-strong);background:var(--ioc-surface,#fff)}
body.ioc-site .ioc-field input:focus,
body.ioc-site .ioc-field select:focus,
body.ioc-site .ioc-field textarea:focus{
  border-color:var(--ioc-blue);
  box-shadow:inset 0 0 0 1px var(--ioc-blue);
}

/* (3) Field hints are prose (CMS-D-066 r2). */
body.ioc-site .ioc-fhint{font-family:var(--ioc-sans);letter-spacing:0}

/* ============================================================
   AE · Choice options are ICON + TITLE (owner ruling 2026-08-18, CMS-D-133:
   "all the form go with icon+title and no subtitle ... make all the form sleek
   and objective is to get the information").

   WHAT CHANGED IN MARKUP, so this file is read against the right DOM. The radio
   option was `<span><b>Title</b><small>Sub-line</small></span>`; it is now
   `<svg class="ioc-choiceicon">` + `<span><b>Title</b></span>`. Eight options
   across three fields (`journey`, `learning_mode`, `gateway_side`, reached by
   four presets) carried a sub-line and no longer do; their strings are deleted
   from `presets.ts` rather than left unrendered, because a value nothing draws
   is the dangling defect this repo keeps paying for.

   THE ROW BECOMES ONE LINE, SO IT CENTRES. `.ioc-choice` is
   `align-items:flex-start` in the kit (:1918 territory) — correct when a
   two-line block sat beside a radio, wrong the moment the block is a single
   title, which left the radio and the glyph riding high against the text. This
   is the whole of the "sleek": less height per option, nothing decorative
   added, and the choice still reads at a glance.

   THE GLYPH IS SECONDARY UNTIL IT IS CHOSEN. At rest it is
   `--ioc-text-secondary`, so the TITLE leads and the icon supports; on the
   selected option it takes the accent alongside the title, which is the only
   moment the icon should compete for attention. It is `aria-hidden` in the
   markup — it repeats the title rather than adding to it, so a screen reader
   must not read it twice.

   WHAT THIS DOES NOT DO: it adds no fill, no radius and no shadow. The selected
   state is entirely section AD's (border, 8% ground, inset ring) and is
   untouched here beyond the token correction above.
   ============================================================ */
body.ioc-site .ioc-choices .ioc-choice{align-items:center}
body.ioc-site .ioc-choices .ioc-choice input{margin:0}
/* 16px, not 20 (owner ruling 2026-08-18, pointing at the home route rail).
   The glyph must sit UNDER the title's cap height so the words lead and the
   mark supports; at 20px it matched the 15px title's height and competed with
   it. 16 is the reference size the rail already uses (its `.ioc-cardicon` is
   15px) rounded onto DESIGN.md's 4px vocabulary, so it is the same mark at the
   same weight without adding a third icon size to the system. */
body.ioc-site .ioc-choices .ioc-choiceicon{width:16px;height:16px;flex:0 0 auto;color:var(--ioc-text-secondary)}
body.ioc-site .ioc-choices .ioc-choice:has(input:checked) .ioc-choiceicon{color:var(--ioc-accent-ink,var(--ioc-accent))}
/* The MULTI chips need the gap back (owner report 2026-08-18: the glyph was
   touching the first letter). `.ioc-multi .ioc-choice` sets `gap:0` in the kit,
   and that was right for as long as the chip held ONE visible child: its input
   is `position:absolute`, so it leaves flex flow entirely and a gap had nothing
   to act on. The glyph is the second visible child and the zero became real.
   8px, matching the gap BETWEEN chips, so the spacing inside a chip and the
   spacing around it come from one number. The radio options are untouched:
   they already resolve the base 12px, measured. */
body.ioc-site .ioc-multi .ioc-choices .ioc-choice{gap:8px}

/* ============================================================
   AF · POPUP CAPTURE (CMS-D-136 — PopupForm-standalone.html)

   Three shells, one contract. The comp draws a corner card, a right drawer and
   a bottom bar; they differ in position and motion and share everything else,
   so the shared rules live once and each shell adds only what makes it itself.

   SPACING IS ON THE SEVEN-STEP SCALE, and where the comp was not, the value is
   CORRECTED rather than respelled: the comp's 22px card padding becomes 24, its
   30/28 drawer padding becomes 32/24, and its 16/40 bar padding becomes 16/48.
   T17's V6 ceiling is at 27 with no headroom, so an off-scale value here fails
   the build — and respelling one to dodge the detector is the trap the ratchet
   itself records.

   WIDTHS ARE NOT SPACING. 340px and 380px are the comp's own dimensions and
   T17 scans gap/padding/margin only, so they are carried verbatim.

   MOTION: the comp describes 260/320/240ms in prose and ships no keyframes.
   They are authored here as transitions on a `[data-popup-open]` state, and
   every one is disabled under `prefers-reduced-motion` — a capture surface that
   ignores that preference is worse than one that does not animate at all.
   ============================================================ */
body.ioc-site .ioc-popup{position:fixed;z-index:60;color:var(--ioc-text-primary)}
body.ioc-site .ioc-popup[hidden]{display:none}

/* The scrim belongs to the drawer alone — the other two shells leave the page
   usable, which is why only the drawer is a modal dialog. */
body.ioc-site .ioc-popup__scrim{position:fixed;inset:0;background:rgba(22,22,22,.35);opacity:0;transition:opacity 320ms ease}
body.ioc-site .ioc-popup[data-popup-open] .ioc-popup__scrim{opacity:1}

body.ioc-site .ioc-popup__panel{position:relative;background:var(--ioc-surface);border-radius:0;box-shadow:var(--ioc-shadow-pop)}
body.ioc-site .ioc-popup__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
body.ioc-site .ioc-popup__kicker{margin:0;font-family:var(--ioc-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-popup__headline{display:block;font-size:18px;font-weight:800;letter-spacing:-.022em;line-height:1.2}
body.ioc-site .ioc-popup__sub{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ioc-text-secondary)}

/* The dismiss is a real button with a real accessible name (PopupMount supplies
   it from SITE_FALLBACKS), and it keeps a visible ring: the house treatment
   uses `outline-offset:-2px`, which a 28px control would otherwise swallow. */
body.ioc-site .ioc-popup__x{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ioc-text-secondary);cursor:pointer;padding:0}
body.ioc-site .ioc-popup__x:hover{color:var(--ioc-text-primary)}
body.ioc-site .ioc-popup__x:focus-visible{outline:2px solid var(--ioc-accent);outline-offset:-2px}
body.ioc-site .ioc-popup__x svg{width:16px;height:16px;fill:currentColor}

body.ioc-site .ioc-popup__sent{text-align:left}
body.ioc-site .ioc-popup__tick{margin:0 0 8px}
body.ioc-site .ioc-popup__tick svg{width:24px;height:24px;fill:var(--ioc-success,#198038)}
body.ioc-site .ioc-popup__sent strong{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
body.ioc-site .ioc-popup__sent p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ioc-text-secondary)}

/* 1 · CORNER SLIDE-IN — 340px, bottom right, no scrim, 260ms. */
body.ioc-site .ioc-popup--corner{right:24px;bottom:24px;width:340px;max-width:calc(100vw - 32px)}
body.ioc-site .ioc-popup--corner .ioc-popup__panel{padding:24px;transform:translateY(16px);opacity:0;transition:transform 260ms ease,opacity 260ms ease}
body.ioc-site .ioc-popup--corner[data-popup-open] .ioc-popup__panel{transform:translateY(0);opacity:1}

/* 2 · SIDE DRAWER — 380px, full height, scrim, 320ms. */
body.ioc-site .ioc-popup--drawer{inset:0}
body.ioc-site .ioc-popup--drawer .ioc-popup__panel{position:absolute;right:0;top:0;bottom:0;width:380px;max-width:100vw;padding:32px 24px;overflow:auto;transform:translateX(100%);transition:transform 320ms ease}
body.ioc-site .ioc-popup--drawer[data-popup-open] .ioc-popup__panel{transform:translateX(0)}

/* 3 · BOTTOM BAR — full width, 240ms. The comp lays it out as one row; below
   the mobile breakpoint it stacks, because seven flex children in 320px is not
   a row (WCAG 1.4.10 reflow, the rule §Y already applies to the rest of V6). */
body.ioc-site .ioc-popup--bar{left:0;right:0;bottom:0}
body.ioc-site .ioc-popup--bar .ioc-popup__panel{padding:16px 48px;transform:translateY(100%);transition:transform 240ms ease}
body.ioc-site .ioc-popup--bar[data-popup-open] .ioc-popup__panel{transform:translateY(0)}
body.ioc-site .ioc-popup--bar .ioc-popup__head{margin-bottom:4px}
body.ioc-site .ioc-popup--bar .ioc-popup__sub{display:none}
body.ioc-site .ioc-popup--bar [data-popup-body]{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
body.ioc-site .ioc-popup--bar .ioc-popup__headline{flex:0 0 auto;max-width:240px;font-size:15px}
body.ioc-site .ioc-popup--bar [data-ioc-cta-form]{flex:1 1 420px;min-width:0}
body.ioc-site .ioc-popup--bar .ioc-form-grid{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:600px){
  body.ioc-site .ioc-popup--corner{right:0;bottom:0;width:100%;max-width:100%}
  body.ioc-site .ioc-popup--drawer .ioc-popup__panel{width:100%}
  body.ioc-site .ioc-popup--bar .ioc-popup__panel{padding:16px}
  body.ioc-site .ioc-popup--bar [data-popup-body]{display:block}
}

@media (prefers-reduced-motion:reduce){
  body.ioc-site .ioc-popup__panel,
  body.ioc-site .ioc-popup__scrim{transition:none}
  body.ioc-site .ioc-popup--corner .ioc-popup__panel{transform:none;opacity:1}
  body.ioc-site .ioc-popup--drawer .ioc-popup__panel,
  body.ioc-site .ioc-popup--bar .ioc-popup__panel{transform:none}
}

/* ---- AF · the form INSIDE a popup ---------------------------------------
   THE BUG THIS FIXES: the form ran straight out of the card. A 340px corner
   card on a 1440px screen showed a 493px-wide form — 153px past its own panel.

   WHY, and it is worth stating because the same trap is waiting for the next
   narrow surface: the kit's form layout is sized by the VIEWPORT, not by its
   container. `.ioc-form-grid` is `1fr 1fr` and only collapses inside
   `@media(max-width:620px)`; `.ioc-choices` is `repeat(auto-fit,minmax(220px,1fr))`
   and cannot shrink below 220px. Both are right for B-17, which spans a page
   band and whose width really does track the viewport. A popup's width is set
   by its SHELL, so on a wide screen the media query never fires and the form
   keeps laying itself out for a band that is not there.

   The corner card and the drawer are therefore pinned to one column outright,
   and `min-width:0` is restored on the children — a grid item defaults to
   `min-width:auto`, which refuses to shrink below its content and is what turns
   a too-wide child into overflow rather than a wrap. The BOTTOM BAR is left
   alone: it is full-width by design and its own row treatment above already
   stacks it under 600px.

   No `@container` query: these two shells have known fixed widths, so a plain
   descendant rule says the same thing without asking anything of the browser. */
body.ioc-site .ioc-popup--corner .ioc-form-grid,
body.ioc-site .ioc-popup--drawer .ioc-form-grid{grid-template-columns:1fr}
body.ioc-site .ioc-popup--corner .ioc-choices,
body.ioc-site .ioc-popup--drawer .ioc-choices{grid-template-columns:1fr}
body.ioc-site .ioc-popup .ioc-form-grid > *,
body.ioc-site .ioc-popup .ioc-field,
body.ioc-site .ioc-popup .ioc-choicegroup,
body.ioc-site .ioc-popup .ioc-choice{min-width:0}
/* Long words in a label or an option must wrap rather than push the panel. */
body.ioc-site .ioc-popup .ioc-field label,
body.ioc-site .ioc-popup .ioc-choice span{overflow-wrap:anywhere}
/* The control itself never exceeds its column, whatever the kit sets. */
body.ioc-site .ioc-popup .ioc-form input,
body.ioc-site .ioc-popup .ioc-form select,
body.ioc-site .ioc-popup .ioc-form textarea{max-width:100%;box-sizing:border-box}

/* ============================================================
   AG · Symptom router — the ANSWER ROW RIDES THE TAB COLUMNS
   (B-10-V20; owner ruling 2026-08-19 — CMS-D-143 ①②③).

   Owner-reported from the rendered Home: "top row is 4 x 25%; second row
   should be 75% + 25% so it will be aligned properly." Measured on the
   running site at 1536px BEFORE the fix — the tablist's `repeat(4,1fr)`
   gap 12px gives four 295px columns at x=160/467/774/1081, while the split
   under it gave 880 + 320 with the aside starting at x=1056. The aside's
   left edge therefore sat 25px inside the fourth tab's, and the answer
   panel's right edge 41px inside the third tab's. Nothing lined up.

   THIS DEPARTS FROM THE COMP, DELIBERATELY. Home.dc.html:278 writes the
   split as `grid-template-columns:1.3fr .7fr` (65/35) with `gap:16px` over
   a tablist that is `repeat(4,1fr)` with `gap:12px` (:267) — two different
   column systems and two different gaps stacked on each other, so the comp
   is misaligned at every viewport too. The kit's base rule was a third
   system again (`minmax(0,1fr) minmax(16rem,20rem)`, i.e. a FIXED 320px
   aside, which is why the drift GREW with the viewport). The owner ruling
   replaces all three with the one thing that cannot drift: the answer row
   IS the tab grid — same four columns, same gap — with the panel spanning
   three of them. 75/25 then holds at every width by construction, rather
   than by a pair of ratios that only happen to agree at one.

   `gap:12px` here is the tablist's own value, not a new one; equal gaps are
   what make the two rows one grid, and it is why §R above no longer sets a
   gap on this rule. 12 is a DESIGN.md-scale step, and `grid-template-columns`
   / `grid-column` are not spacing properties (T17 §N ruling) — the v6
   ceiling is unmoved and this is a net REMOVAL of one spacing declaration.

   Scoped by variant id, like §R: B-10-V09 shares `.ioc-tabs-body` and keeps
   the base two-column rule. The 900px collapse has to be RESTATED because
   the base `@media` rule is (0,2,1) and this selector is (0,3,1) — media
   queries add no specificity, so without the pair below the four-column
   grid would survive onto mobile and paint four ~60px slivers.
   ============================================================ */
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-body{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-body>.ioc-tabs-answer{grid-column:span 3}
@media(max-width:900px){
  body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-body{grid-template-columns:minmax(0,1fr)}
  body.ioc-site [data-variant-id="B-10-V20"] .ioc-tabs-body>.ioc-tabs-answer{grid-column:auto}
}

/* ============================================================
   AH · Home outcome cards — ONE UNIFORM HAIRLINE
   (B-11-V17; owner ruling 2026-08-19 — CMS-D-143 ④⑤).

   Owner-reported alongside §AG: "WHERE TO START section outerbox line has
   to be uniform like all other boxes." Measured on the running Home at
   1536px, the four outcome cards were the ONLY boxes on the page whose
   border was not uniform — 3px on top in the route-family colour
   (measured then as #0001ff · #0001ff · #7a3ffc · #9f1853; the last two are
   house blue since CMS-D-168 folded `dat` and `sec`, which changes the
   colours this paragraph counted but not the finding) against 1px #e0e0e0
   on the other
   three sides, where every other box on the page (the four symptom tabs,
   the WHERE IT LEADS aside) is a plain 1px #e0e0e0 hairline all round.

   §R already set `border:1px solid var(--ioc-border-subtle)` on these
   cards and noted that F38's rule "outranks the border shorthand here":
   F38 is `body.ioc-site .ioc-cards [data-route-fam]` (0,3,1) carrying
   `!important`, which no unflagged shorthand can reach. So the top side is
   restated here at (0,4,1) with the flag matched — the same move, and the
   same reason, as B-11-V21's `border-top:0!important` above (:2234).

   THE FAMILY SIGNAL IS NOT LOST, which is why this is a border change and
   not a route-family retreat. Each card still carries `data-route-fam`,
   and the harvested `[data-route-fam] .ioc-card-link{color:var(--rfi)}`
   plus the family icon tint still paint "Data & AI" purple and
   "Cloud & security" crimson. Only the frame stops competing with them.

   SCOPE IS THIS VARIANT, deliberately. F38's rule is the site-wide
   route-family CARD contract (§AA) and still renders everywhere else; the
   owner ruling was taken on the Home section it was reported against, and
   widening it would retire that contract across all 23 pages — a bigger
   decision than the one that was made. Read the divergence as "one section
   ruled, the contract intact", not as drift.
   ============================================================ */
body.ioc-site [data-variant-id="B-11-V17"] .ioc-cards .ioc-card[data-route-fam]{border-top:1px solid var(--ioc-border-subtle)!important}

/* ============================================================
   AI · A FULL-BLEED BAND MUST NOT PRODUCE A HORIZONTAL SCROLLBAR
   (owner report 2026-08-19, from a screenshot of the home page).

   `100vw` MEASURES THE VIEWPORT INCLUDING THE CLASSIC VERTICAL SCROLLBAR
   and the containing block EXCLUDES it. So the standard 50%-50vw escape
   used by `.ioc-plat-layers` (SS T, :2071) lays out one scrollbar WIDER
   than the space available, and its negative margin recentres that, so
   half a scrollbar hangs off each side. Measured at a 1896px viewport
   with a 15px scrollbar: box left -7.5, right 1888.5, clientWidth 1881
   -- an 8px document overflow, i.e. a scrollbar under every fold.

   IT DOES NOT REPRODUCE HEADLESS. Headless Chromium hides scrollbars, so
   `100vw` equals `clientWidth` there and the overflow measures ZERO. Any
   future check for this class has to run headed or reserve a gutter;
   that blind spot is why the band shipped and why no gate saw it.

   IT TAKES BOTH ELEMENTS, AND THAT WAS MEASURED, NOT REASONED. The first
   attempt was `body.ioc-site` alone, on the textbook reading that
   body-to-viewport propagation applies while `html` is `visible`. The
   propagation DOES happen -- computed `body` overflow-x really is `clip`
   -- and the page still scrolled 8px. `html` alone also still scrolled,
   with computed `html` overflow-x reading `clip` the whole time. Only
   the PAIR stops it. Measured at 1440px, `.ioc-plat-layers` present:

     none .......... SCROLLS 8px
     html only ..... SCROLLS 8px
     body only ..... SCROLLS 8px
     html + body ... no scroll

   So do not "tidy" either half away because the other looks sufficient
   or because computed style says the value took: on this defect the
   computed value and the used value disagree, and only scrollability
   tells the truth. The `:has()` keeps the root half off the admin,
   honouring this sheet's public-only rule (it is linked from
   `app/(frontend)/layout.tsx` alone, so that is belt-and-braces).

   `clip`, NOT `hidden` -- and this one is measured too, not stylistic.
   Both spellings stop the scroll; `hidden` makes the viewport a scroll
   container and BREAKS THE STICKY HEADER (measured: the header stops
   pinning at top 0 on scroll). `clip` cannot create a scroll container,
   and the header was re-checked under the shipped rule: still
   `position:sticky`, still pinned at top 0 after a 2000px scroll.

   THIS IS THE COMPLETE FIX, NOT A MASK. The band's CONTENTS are already
   placed correctly: `.ioc-plat-layer`'s `padding-inline:max(32px,
   calc(50vw - 648px))` (648 since §O's 2026-08-21 spine ruling; the
   measurement below was taken at the era's 608, and the cancellation is
   the same-vw derivation, not the constant) is derived from the SAME `vw`
   as the margin, so the two errors cancel exactly -- measured content left
   104.5px against a section heading at 104.5px, drift ZERO. Only the empty 7.5px of band
   overhanging the right edge is wrong, and clipping it is what
   "full-bleed" means. A scrollbar-aware `--ioc-sbw` variable was
   REJECTED: it would have to move the padding rule too, in order to
   preserve an alignment that is already right, and it makes layout
   depend on JS having run.

   SITE-WIDE ON PURPOSE. All 23 routes were swept and only `/` overflowed.
   The guard is written once, here, rather than per-band, so that the next
   full-bleed block cannot reintroduce the same scrollbar.

   IT IS SCOPED TO >=768px, AND THAT IS A CORRECTNESS BOUND, NOT A TASTE
   ONE. Clipping is only safe where the thing being clipped is EMPTY BAND.
   At 320px the public site has a PRE-EXISTING reflow defect that predates
   this rule: `.ioc-news` and `.ioc-cta-panel.has-form` lay out 342px-wide
   children inside a 256px parent (the automatic minimum size of a grid
   item -- `min-width:auto` plus the frozen kit's `.ioc-news
   input{min-width:200px}` -- there is no literal 342px anywhere). An
   unscoped clip turned that from CONTENT A VISITOR COULD SCROLL TO into
   CONTENT SILENTLY CUT OFF, which is a worse SC 1.4.10 outcome than the
   scrollbar. Measured on /insights at 320px: 83px of real copy. So the
   guard stops at the breakpoint above which the only overhang is the
   band's own empty 7.5px. Below it the site behaves exactly as it did
   before this rule existed -- no regression, and the a11y suite ratchets
   that residue in the open instead of clipping it out of sight.

   A PURE-CSS SCROLLBAR-SAFE BREAKOUT WAS TRIED AND REJECTED ON EVIDENCE.
   `html{--ioc-sbw:calc(100vw - 100%)}` is the classic trick, but a custom
   property substitutes TOKENS: the `100%` re-resolves against the
   consuming element's containing block (the wrap), not the root. Measured:
   the band stopped being full-bleed at every width and picked up 32px of
   drift. The JS variant (`--ioc-sbw` written by the runtime) works but
   makes layout depend on script having run, and needs the padding rule
   moved in lockstep to keep an alignment that is already correct.

   ADDS NOTHING TO THE RATCHETS: no hex (T16 (1)) and no px (T17 -- 768 is
   a BREAKPOINT, not spacing).
   ============================================================ */
@media(min-width:768px){html:has(body.ioc-site),body.ioc-site{overflow-x:clip}}

/* ============================================================
   AJ · TWO A11Y REPAIRS THE L5 SUITE FOUND (owner ruling 2026-08-19,
   closing CMS-D-153 ③'s inventory).

   1 · AUDIENCE LIST — was two DEAD BUTTONS. `Footer.tsx` rendered
   `.ioc-cta-aud > button[aria-selected]`, and `aria-selected` is not an
   attribute ARIA permits on `button` (axe's only CRITICAL finding here).
   The attribute was the symptom; the cause is that NOTHING binds a
   handler to them -- not this sheet, not `Footer.tsx`, not
   `infoc-runtime.js` -- so they sat in the tab order of every page
   carrying the panel, wearing the frozen kit's `cursor:pointer`. A
   control that cannot be operated must not be focusable. They are now
   `<li>` in a `<ul>`, with `aria-current` (allowed on any element) for
   the highlighted entry.

   The frozen kit styles `.ioc-cta-aud button` and
   `.ioc-cta-aud button[aria-selected=true]` (infoc-cms.css:1594-1595),
   which no longer match. These rules carry that appearance across
   VERBATIM -- same border, fill, padding, transition -- with two
   deliberate differences: no `cursor:pointer` (the affordance lie) and
   `list-style:none` for the new element. Rendered result is otherwise
   identical, which is why this is a markup repair and not a redesign.

   2 · IN-TEXT LINKS -- links sitting inside a run of body copy were
   distinguishable from it by COLOUR ALONE, at 1.09:1 against that copy
   (#0001ff on #525252; WCAG needs 3:1 for the colour-only route, SC
   1.4.1). Underlining is the cheaper and more robust half of the rule:
   with it the 3:1 requirement no longer applies at all. 1px keeps the
   rule on the link's own colour rather than minting one, and the offset
   keeps descenders legible.

   THREE NAMED CONTAINERS, NOT A BLANKET `p a`. The prose contexts are
   `.ioc-cta-note` (the CTA band's footnote), `.ioc-prose` (the legal
   pages' body — privacy and cookies) and `.ioc-td-hours` (the contact
   card's hours line). A blanket rule would have been shorter and wrong:
   `<p>` is a LAYOUT element in this kit, carrying `.ioc-kicker` eyebrows
   and `.ioc-card-ix` icon slots among others, so underlining every `p a`
   would have drawn rules under card links and icon anchors that are not
   in a text block at all. `.ioc-privacy` is deliberately absent — the
   form's closing privacy line already passes.

   ADDS NOTHING TO THE RATCHETS: no hex (T16 (1)); 1px/2px are BORDER and
   offset values, not spacing steps (T17 -- §N's own precedent).
   ============================================================ */
body.ioc-site .ioc-cta-aud{list-style:none;margin:0;padding:0}
body.ioc-site .ioc-cta-aud>li{flex:1 1 42%;border:1px solid var(--ioc-g30);background:var(--ioc-surface,#fff);color:var(--ioc-text-primary);padding:12px;text-align:left;font:inherit;transition:background .15s,color .15s,border-color .15s}
body.ioc-site .ioc-cta-aud>li[aria-current="true"]{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff);border-color:var(--ioc-accent)}
body.ioc-site .ioc-cta-note a,
body.ioc-site .ioc-prose a,
body.ioc-site .ioc-td-hours a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* ============================================================
   AK · The 404 — the one page V6 never dressed (CMS-D-165).

   THE FINDING. Every other route got the V6 structural language;
   `.ioc-404` did not. It still rendered the base kit treatment
   (`infoc-cms.css:1572-1577`): a 640px column, centred, floating in
   white, with four equal-weight buttons in a row. Nothing about it
   said INFOC, and the page a visitor reaches when they are already
   lost was the one page with no wayfinding vocabulary on it.

   THE COLOUR RULING, and it is the load-bearing decision here.
   The kit paints `.code` in `--ioc-accent` at up to 150px. CMS-D-066
   rule 3 makes house blue the INTERACTION colour — "colour is rare
   and always means something" — so a 150px non-interactive numeral
   spends the one colour that should mean "you can act here", and it
   spends it on the least useful element. The code goes to ink; blue
   is left to the search field and the one real CTA. That is a
   recolour of a kit default by the OWNED delta sheet, which is what
   this sheet is for; the frozen kit is untouched.

   THE LAYOUT reuses the footer route band rather than inventing:
   destinations become a hairline-divided vertical list, the same
   object a visitor already met in the footer of the page they failed
   to reach. Markup is UNCHANGED (CMS-D-054 — `B-01-V10`'s template is
   canonical); every placement below is CSS grid over the existing
   DOM order (code, h1, p, form, links).

   SPACING is on the seven steps everywhere it is graded — T17's
   `v6CssOffScaleCeiling` is shrink-only at 27 and grades px inside
   `clamp()`. The hierarchy is carried by `font-size`, `min-height`,
   `max-width`, `grid-template-columns` and `border-width`, none of
   which T17 grades, so this whole section lands at an unmoved ceiling
   honestly rather than by respelling.
   ============================================================ */
body.ioc-site .ioc-404{
  max-width:100%;
  margin:0;
  padding:0;
  text-align:left;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  column-gap:48px;
  row-gap:0;
  align-items:start;
}

/* -- left column: the status, the sentence, the way out -- */
body.ioc-site .ioc-404 .code{
  grid-column:1;grid-row:1;
  font-family:var(--ioc-mono);
  font-size:clamp(52px,8vw,96px);
  font-weight:500;
  line-height:.82;
  letter-spacing:-.05em;
  /* Ink, not accent — see the colour ruling above. */
  color:var(--ioc-g100);
  padding-bottom:8px;
}
/* NO rule under the code, and that is a decision rather than an omission.
   It was authored with one and measured out: the code's border landed at
   y=297 while the destination list's first divider landed at y=249 — two
   horizontal rules 48px apart in adjacent columns, which reads as a
   near-miss rather than a grid. The columns now do different jobs: TYPE
   carries the message on the left, RULES carry the navigation on the
   right. One rule system on the page, not two competing ones. */
body.ioc-site .ioc-404 h1{
  grid-column:1;grid-row:2;
  margin:16px 0 0;
  font-size:clamp(30px,3.6vw,46px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.028em;
  max-width:18ch;
}
body.ioc-site .ioc-404 p{
  grid-column:1;grid-row:3;
  margin:12px 0 0;
  max-width:52ch;
  font-size:16px;
  line-height:1.6;
  color:var(--ioc-text-secondary);
}

/* The search is the most useful control on the page, so it reads as
   the primary one: full column width, taller than the kit default,
   and the only blue-bordered object in the left column on focus. */
body.ioc-site .ioc-404 .ioc-searchbar{
  grid-column:1;grid-row:4;
  margin:32px 0 0;
  max-width:none;
  min-height:64px;
  border:1px solid var(--ioc-g100);
}
body.ioc-site .ioc-404 .ioc-searchbar:focus-within{
  border-color:var(--ioc-accent);
  box-shadow:inset 0 0 0 1px var(--ioc-accent);
}
body.ioc-site .ioc-404 .ioc-searchbar svg{color:var(--ioc-g100)}
body.ioc-site .ioc-404 .ioc-searchbar input{font-size:17px}

/* -- right column: destinations, as the footer route band does them -- */
body.ioc-site .ioc-404-links{
  grid-column:2;grid-row:1 / span 4;
  display:flex;
  flex-direction:column;
  gap:0;
  justify-content:flex-start;
  border-top:1px solid var(--ioc-g100);
}
body.ioc-site .ioc-404-links .btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:64px;
  padding:12px 16px;
  border:0;
  border-bottom:1px solid var(--ioc-border-subtle);
  background:transparent;
  color:var(--ioc-text-primary);
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
  text-align:left;
  transition:background .16s var(--ioc-ease),color .16s var(--ioc-ease),padding-left .16s var(--ioc-ease);
}
body.ioc-site .ioc-404-links .btn:hover{
  background:var(--ioc-hover-wash);
  color:var(--ioc-accent);
  padding-left:24px;
}
/* The one real CTA keeps its weight: a filled block closing the list,
   and the only place blue is spent in this column. */
body.ioc-site .ioc-404-links .btn-primary{
  margin:16px 0 0;
  border-bottom:0;
  background:var(--ioc-accent);
  color:var(--ioc-text-on-primary,#fff);
}
body.ioc-site .ioc-404-links .btn-primary:hover{
  background:var(--ioc-blue-hover);
  color:var(--ioc-text-on-primary,#fff);
  padding-left:24px;
}
body.ioc-site .ioc-404-links .btn-primary svg{width:16px;height:16px;flex:none}

@media (max-width:900px){
  body.ioc-site .ioc-404{grid-template-columns:minmax(0,1fr);column-gap:0}
  body.ioc-site .ioc-404 .code,
  body.ioc-site .ioc-404 h1,
  body.ioc-site .ioc-404 p,
  body.ioc-site .ioc-404 .ioc-searchbar{grid-column:1}
  body.ioc-site .ioc-404-links{grid-column:1;grid-row:5;margin:32px 0 0}
}

/* -- AK continued · the destination rows get a directional mark ------------
   OWNER REQUEST 2026-08-20 ("give icon to menu on 404").

   A CHEVRON, NOT A ROUTE GLYPH, and the distinction is the whole reason this
   comment exists. The footer route band gives each cell an IDENTITY glyph from
   `Footer.tsx#ROUTE_GLYPH` — dashboard/store/people/education — and DESIGN.md
   (CMS-D-130) states "one glyph per route ... adding a second glyph for the
   same route is drift". That register covers solutions, marketplace, talents
   and academy. The 404's links are Solutions, Industries, Insights and
   Contact: only the first has a canonical glyph, so glyphing the other three
   would mean INVENTING route identity (SOT section 8 rule 1), and the sprite
   having a plausible `industry`/`information`/`email` is not the same as the
   register declaring one.

   It would also be a claim that can go false. These four links are
   store-driven and editor-editable; a per-slot identity glyph becomes a lie
   the moment someone repoints link 2, which is exactly the failure CMS-D-133
   refuses for form-choice glyphs ("an unmapped value renders no icon: never a
   fallback glyph, which would state something untrue").

   A chevron claims only "this goes somewhere", which is true of every row
   whatever the store says. Drawn from borders rather than a data-URI so the
   arrow-right sprite keeps exactly one source in the tree. The primary row
   already carries the real sprite arrow from the canonical template and is
   deliberately left alone — it is the one row whose mark is markup.
   ------------------------------------------------------------------------ */
body.ioc-site .ioc-404-links .btn-secondary::after{
  content:"";
  flex:none;
  width:9px;
  height:9px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  opacity:.5;
  transition:opacity .16s var(--ioc-ease),transform .16s var(--ioc-ease);
}
body.ioc-site .ioc-404-links .btn-secondary:hover::after{
  opacity:1;
  transform:rotate(45deg) translate(2px,-2px);
}
@media (prefers-reduced-motion:reduce){
  body.ioc-site .ioc-404-links .btn-secondary::after,
  body.ioc-site .ioc-404-links .btn-secondary:hover::after{transition:none}
}


/* ============================================================
   AL · Marketplace §THE DIFFERENCE and §HOW BUYING WORKS — a card
   grid with no column count, and a number slot carrying a phrase
   (B-03-V07 / B-13-V07; owner-reported 2026-08-20).

   ① A CARD GRID WITH NO COLUMN COUNT RENDERS AS ONE COLUMN.
   `.ioc-cards` (infoc-cms.css:1215) declares `display:grid` and no
   columns at all — the count lives entirely in the `.two`/`.three`/
   `.four` modifiers (1217-1219), which page-mapper.ts emits as
   `grid_01` from the block's stored `grid` field. The B-03-V07 template
   is `<div class="ioc-cards[[attr:grid_01]]">` with `grid_01` defaulting
   to `""`, so a block that never sets `grid` gets a BARE `.ioc-cards`:
   a one-column grid of full-width cards.

   MEASURED across the seed, not assumed: 20 of 64 card blocks carry no
   `grid` value, and every one of them is a `one-data-features` (B-03)
   block — every `one-data-cards` (B-11) block sets it. So this is not a
   marketplace typo; the B-03 authoring path never supplies the field.
   Marketplace §THE DIFFERENCE is the worst instance at 8 cards, and
   /technologies runs 13 in a single column.

   The fix restores the count the kit ALREADY declares for `.three`,
   breakpoints included (1218/1235/1236) — no new layout vocabulary. The
   `:not()` guard means it can never touch a block that does set
   two/three/four, nor `.is-rows`, which is flex (§ above) and has no
   columns to set.

   ② FOUR STEPS IN A SIX-COLUMN GRID. `.ioc-process` (1254) hard-codes
   `repeat(6,1fr)`. Every other B-13 instance in the seed has exactly six
   steps, so that constant has always matched; marketplace is the only
   one with four, and its strip ran two columns short with a third of the
   band left empty. Made count-aware rather than re-constanted, so the
   six-step instances are untouched by construction.

   The `min-width:1081px` guard is load-bearing: `body.ioc-site` outranks
   the kit's bare `.ioc-process`, so without it these rules would beat
   the kit's own collapse to 3 columns (1281) and 1 column (1282) and
   pin four columns onto a phone. The tablet arm gives the four-step case
   2×2 instead of the kit's 3-up, which would orphan its last step.

   ③ A PHRASE IN THE NUMBER SLOT. `.ioc-step-n` (1260) is sized
   `clamp(20px,1.8vw,26px)` mono with `tabular-nums` — a slot built for
   "01". The six other B-13 instances store no `mark` and render it
   EMPTY (verified on the running /how-we-help: six `<span
   class="ioc-step-n">` holding nothing but their icon). Marketplace is
   the only page that stores marks — "START A REQUEST", "DAY 1 TO 2" —
   so its labels rendered at up to 26px, wrapping inside the column and
   out-shouting the 15px `<b>` titles below them.

   Restyled to the kit's OWN eyebrow metrics (`.ioc-card-eyebrow`, 1224:
   mono / 11px / .1em / uppercase), keeping the accent colour the slot
   already carries. Left GLOBAL rather than scoped to marketplace on
   purpose: it is content-driven, so any page that later stores a mark
   gets the same treatment, and it is visually inert on the other six
   instances precisely BECAUSE their slot is empty. THE TRADE, stated:
   if a numbered process is ever authored, these metrics are wrong for
   it and the mark case will need its own class from the mapper — CSS
   cannot tell a text node from an absent one.

   ④ An empty `.ioc-card-eyebrow` still spends its `margin:0 0 10px`
   (1224). B-03 emits the element unconditionally and marketplace stores
   no eyebrow text, so all eight cards carried 10px of dead space above
   their title.
   ============================================================ */

body.ioc-site .ioc-cards:not(.two):not(.three):not(.four):not(.is-rows){
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:960px){
  body.ioc-site .ioc-cards:not(.two):not(.three):not(.four):not(.is-rows){
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:620px){
  body.ioc-site .ioc-cards:not(.two):not(.three):not(.four):not(.is-rows){
    grid-template-columns:1fr;
  }
}

@media (min-width:1081px){
  body.ioc-site .ioc-process:has(>.ioc-step:nth-child(3):last-child){
    grid-template-columns:repeat(3,1fr);
  }
  body.ioc-site .ioc-process:has(>.ioc-step:nth-child(4):last-child){
    grid-template-columns:repeat(4,1fr);
  }
  body.ioc-site .ioc-process:has(>.ioc-step:nth-child(5):last-child){
    grid-template-columns:repeat(5,1fr);
  }
}
@media (min-width:621px) and (max-width:1080px){
  body.ioc-site .ioc-process:has(>.ioc-step:nth-child(4):last-child){
    grid-template-columns:repeat(2,1fr);
  }
}

body.ioc-site .ioc-step .ioc-step-n{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.45;
}

body.ioc-site .ioc-card-eyebrow:empty{display:none}


/* ============================================================
   AM · Contact route cards — THE SELECTED ONE SAYS SO
   (B-17-V07 §CHOOSE THE RIGHT ROUTE; owner-reported 2026-08-20).

   These four cards are real `<button>`s: each preselects the enquiry
   form's `journey` radio, scrolls to the form and focuses the name
   field. Everything about their APPEARANCE said otherwise — no icon,
   and no acknowledgement after a click, so the one control the visitor
   had just used was the only surface that did not react.

   The icons and the `aria-pressed` attribute are markup, and land in
   the overlay manifest via apps/one/scripts/gen-b17-v07-route-icons.mjs.
   Only the pressed STYLE belongs in a stylesheet, and it is one rule.

   WHY AN INSET RING AND NOT A FILL. `.ioc-cards [data-route-fam]:hover`
   already takes the background to `--ioc-g10` (§ above, v6:1867), so a
   background change cannot also mean "selected" — the two states would
   be indistinguishable the moment the pointer rested on the chosen
   card. An inset ring in the card's own route-family colour is
   orthogonal to hover, reads at a glance, and changes no background,
   so no text/background contrast pair moves at all.

   The hairline is RE-DECLARED, not replaced: `.ioc-cards>*` draws every
   card's border with `box-shadow:0 0 0 1px` (infoc-cms.css:1216), so a
   bare `box-shadow` here would silently delete the selected card's own
   outline. Both shadows are listed.

   Focus is deliberately NOT touched — infoc-cms.css:1660 already gives
   `.ioc-cards [data-route-fam]:focus-visible` a 3px `--rf` outline, and
   a second focus treatment would fight it.
   ============================================================ */

body.ioc-site .ioc-card[data-contact-route][aria-pressed="true"]{
  box-shadow:0 0 0 1px var(--ioc-border-subtle),inset 0 0 0 2px var(--rf);
}

/* ================================================================
   CAMPAIGN LANDERS - the Departures Board (CMS-D-172 W1).
   docs/designs/V6_FRONTEND/REACH-CAMPAIGN-DESIGN.md as amended.
   Tokens only (T16 (1)); spacing on the documented seven steps
   (4/8/12/16/24/32/48 - T17); motion 110/240ms on the house ease.
   One blue FILL per screenful: the CTA. Selection inverts to INK.
   ================================================================ */

/* ---- B-01-V21 : departures hero ---- */
body.ioc-site .ioc-depart .ioc-depart-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.65fr);gap:48px;align-items:stretch;border:1px solid var(--ioc-border-subtle);position:relative}
body.ioc-site .ioc-depart .ioc-hero-copy{padding:48px;min-width:0}
/* The page's one load gesture: a 1px accent rule draws across the hero's top
   edge. Gated on js-motion; reduced-motion and no-JS get the instant state. */
body.ioc-site .ioc-depart .ioc-depart-grid::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--ioc-accent);transform-origin:left}
html.js-motion body.ioc-site .ioc-depart .ioc-depart-grid::before{transform:scaleX(0);animation:ioc-depart-rule 240ms var(--ioc-ease) forwards}
@keyframes ioc-depart-rule{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){html.js-motion body.ioc-site .ioc-depart .ioc-depart-grid::before{animation:none;transform:none}}
body.ioc-site .ioc-depart-stack{display:flex;flex-direction:column;justify-content:stretch;border-left:1px solid var(--ioc-border-subtle);min-width:0}
body.ioc-site .ioc-depart-num{flex:1;display:flex;flex-direction:column;justify-content:center;padding:16px 32px;border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-depart-num:last-child{border-bottom:0}
body.ioc-site .ioc-depart-num strong{font-family:var(--ioc-mono);font-weight:700;font-size:clamp(48px,6vw,84px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ioc-text-primary)}
body.ioc-site .ioc-depart-num span{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-text-helper);margin-top:8px}
body.ioc-site .ioc-depart-alt{font-weight:600;color:var(--ioc-text-primary);text-decoration:underline;text-underline-offset:4px;margin-left:24px}
body.ioc-site .ioc-depart-reply{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ioc-text-helper);margin:24px 0 0}
@media (max-width:860px){
  body.ioc-site .ioc-depart .ioc-depart-grid{grid-template-columns:1fr}
  body.ioc-site .ioc-depart-stack{border-left:0;border-top:1px solid var(--ioc-border-subtle);flex-direction:row}
  body.ioc-site .ioc-depart-num{border-bottom:0;border-right:1px solid var(--ioc-border-subtle);padding:16px}
  body.ioc-site .ioc-depart-num:last-child{border-right:0}
  body.ioc-site .ioc-depart-num strong{font-size:clamp(28px,9vw,48px)}
}

/* ---- B-17-V12 : campaign brief - the keypad IS the form ---- */
body.ioc-site .ioc-campaign-brief .ioc-cb-rail{display:flex;border:1px solid var(--ioc-border-subtle);margin:0 0 24px}
body.ioc-site .ioc-campaign-brief .ioc-cb-seg{flex:1;background:var(--ioc-surface);font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-text-helper);padding:8px 16px}
body.ioc-site .ioc-campaign-brief .ioc-cb-seg + .ioc-cb-seg{border-left:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-campaign-brief.cb-picked .ioc-cb-seg[data-cb-seg="1"]{background:var(--ioc-g100);color:var(--ioc-surface)}
/* The service_route radio group becomes the 4x2 keypad: shared 1px borders,
   zero gap, one ruled instrument. Cells are the server renderer's own
   .ioc-choice labels - nothing moves on hover, ever. */
body.ioc-site .ioc-campaign-brief .ioc-choicegroup{border:0;padding:0;margin:0}
body.ioc-site .ioc-campaign-brief .ioc-choicegroup legend{font-family:var(--ioc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ioc-text-helper);margin-bottom:12px}
/* Shared hairlines as real borders (gap stays 0 — a 1px gap is a border in
   disguise and T17 grades it as off-scale spacing): every cell draws its
   right+bottom rule; the 4th column and the last row hand theirs to the
   container's own border. */
body.ioc-site .ioc-campaign-brief .ioc-choices{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ioc-border-subtle);counter-reset:cbroute}
body.ioc-site .ioc-campaign-brief .ioc-choice{position:relative;display:block;background:var(--ioc-surface);padding:16px;min-height:96px;cursor:pointer;counter-increment:cbroute;border-right:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-campaign-brief .ioc-choice:nth-child(4n){border-right:0}
body.ioc-site .ioc-campaign-brief .ioc-choice:nth-last-child(-n+4):nth-child(4n+1),
body.ioc-site .ioc-campaign-brief .ioc-choice:nth-last-child(-n+4):nth-child(4n+1) ~ .ioc-choice{border-bottom:0}
body.ioc-site .ioc-campaign-brief .ioc-choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
body.ioc-site .ioc-campaign-brief .ioc-choice svg{display:none}
body.ioc-site .ioc-campaign-brief .ioc-choice span{display:block;position:relative}
body.ioc-site .ioc-campaign-brief .ioc-choice span::before{content:"0" counter(cbroute);font-family:var(--ioc-mono);font-size:12px;letter-spacing:.08em;color:var(--ioc-text-helper);display:block;margin-bottom:8px;transition:color 110ms var(--ioc-ease)}
body.ioc-site .ioc-campaign-brief .ioc-choice span b{font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.3}
/* The option's third tuple slot (the symptom line) - campaign context only. */
body.ioc-site .ioc-campaign-brief .ioc-choice span::after{content:attr(data-desc);display:block;font-size:12.5px;line-height:1.4;color:var(--ioc-text-secondary);margin-top:4px}
body.ioc-site .ioc-campaign-brief .ioc-choice:hover span::before,
body.ioc-site .ioc-campaign-brief .ioc-choice:focus-within span::before{color:var(--ioc-accent)}
body.ioc-site .ioc-campaign-brief .ioc-choice:focus-within{outline:2px solid var(--ioc-accent);outline-offset:0;z-index:1}
/* Selection inverts to INK (one-blue-fill rule): the input precedes the span,
   so input:checked ~ span carries the whole cell surface - no :has() needed. */
body.ioc-site .ioc-campaign-brief .ioc-choice input:checked ~ span{background:var(--ioc-g100);margin:-16px;padding:16px;min-height:96px;box-sizing:content-box}
body.ioc-site .ioc-campaign-brief .ioc-choice input:checked ~ span,
body.ioc-site .ioc-campaign-brief .ioc-choice input:checked ~ span b{color:var(--ioc-surface)}
body.ioc-site .ioc-campaign-brief .ioc-choice input:checked ~ span::before{color:var(--ioc-surface)}
body.ioc-site .ioc-campaign-brief .ioc-choice input:checked ~ span::after{color:var(--ioc-surface);opacity:.72}
/* The brief strip: a 48px mono readout that rewrites on selection. */
body.ioc-site .ioc-campaign-brief .ioc-cb-strip{display:flex;align-items:center;min-height:48px;border:1px solid var(--ioc-border-subtle);border-top:0;padding:0 16px;font-family:var(--ioc-mono);font-size:13px;letter-spacing:.04em;color:var(--ioc-text-secondary)}
/* JS-collapsed brief fields: only with the runtime present (html.js-motion)
   and only until a route is picked (.cb-open). No-JS renders everything. */
html.js-motion body.ioc-site .ioc-campaign-brief .ioc-cb-mount:not(.cb-open) .ioc-cta-field:not(:has(.ioc-choicegroup)),
html.js-motion body.ioc-site .ioc-campaign-brief .ioc-cb-mount:not(.cb-open) .ioc-cta-actions{display:none}
@media (max-width:860px){
  /* The keypad's 50%−50vw breakout is §AI's scrollbar class BELOW the >=768
     page guard (measured: 8px document overflow at 390px with a classic
     scrollbar; zero on real phones, zero headless). §AI's page-level clip
     stops at 768 because down there OTHER blocks overhang with REAL content
     — but THIS band's overhang is its own empty label padding, so the clip
     §AI prescribes for empty band is taken SECTION-scoped instead: it can
     only ever clip this band's own edges. `clip` not `hidden`, per §AI —
     `hidden` mints a scroll container. */
  body.ioc-site .ioc-campaign-brief{overflow-x:clip}
  body.ioc-site .ioc-campaign-brief .ioc-choices{grid-template-columns:1fr;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-left:0;border-right:0}
  body.ioc-site .ioc-campaign-brief .ioc-choice{min-height:64px;display:flex;align-items:center}
}

/* ---- B-06-V07 : D+ timeline - THE dark band ---- */
body.ioc-site .ioc-depart-band{background:var(--ioc-g100)}
body.ioc-site .ioc-depart-band .ioc-head h2{color:var(--ioc-surface)}
body.ioc-site .ioc-depart-band .ioc-sh-lead p{color:var(--ioc-surface);opacity:.8}
body.ioc-site .ioc-depart-band .ioc-sh-lead .meta{color:var(--ioc-on-inverse-green)}
body.ioc-site .ioc-db-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative;padding-top:24px}
/* The one theatrical gesture: the white rule draws once on reveal (240ms). */
body.ioc-site .ioc-db-rail::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ioc-surface);transform-origin:left}
html.js-motion body.ioc-site .ioc-db-rail[data-reveal]::before{transform:scaleX(0);transition:transform 240ms var(--ioc-ease)}
html.js-motion body.ioc-site .ioc-db-rail[data-reveal].in::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){html.js-motion body.ioc-site .ioc-db-rail[data-reveal]::before{transform:none;transition:none}}
body.ioc-site .ioc-db-mark strong{display:block;font-family:var(--ioc-mono);font-weight:700;font-size:20px;letter-spacing:.02em;color:var(--ioc-on-inverse-green)}
body.ioc-site .ioc-db-mark b{display:block;font-weight:700;font-size:15px;color:var(--ioc-surface);margin-top:8px}
body.ioc-site .ioc-db-mark p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ioc-surface);opacity:.72}
@media (max-width:860px){body.ioc-site .ioc-db-rail{grid-template-columns:1fr;gap:16px}}

/* ---- B-06-V08 : mono stat strip (48px breath mark) ---- */
body.ioc-site .ioc-stat-strip{border-top:1px solid var(--ioc-border-subtle);border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-stat-strip .ioc-ss-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;min-height:48px;gap:8px 16px;padding:8px 0}
body.ioc-site .ioc-ss-i{font-family:var(--ioc-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ioc-text-secondary);display:inline-flex;align-items:baseline;gap:8px}
body.ioc-site .ioc-ss-i strong{font-weight:700;color:var(--ioc-text-primary);font-variant-numeric:tabular-nums}
body.ioc-site .ioc-ss-i + .ioc-ss-i::before{content:"\00B7";color:var(--ioc-text-helper);margin-right:16px}

/* ---- Campaign runtime chrome (CMS-D-172 W2) ---- */
body.ioc-site .ioc-progress-rail{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ioc-accent);z-index:60;transition:width 110ms var(--ioc-ease)}
@media (prefers-reduced-motion:reduce){body.ioc-site .ioc-progress-rail{transition:none}}
body.ioc-site .ioc-cb-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;background:var(--ioc-blue);color:var(--ioc-surface);border-top:1px solid var(--ioc-g100);font-weight:700;text-align:center;padding:16px;text-decoration:none}
@media (max-width:860px){body.ioc-site .ioc-campaign-brief.cb-picked ~ * .ioc-cb-sticky,body.ioc-site .ioc-cb-sticky.cb-show{display:block}}
html.js-motion body.ioc-site .ioc-cb-mount .ioc-cta-field{transition:opacity 240ms var(--ioc-ease)}

/* ============================================================
   Z · Playful 404 (NotFoundPlayful-standalone.html, owner-directed
   2026-08-21 — B-01-V22 hero · B-11-V23 escape routes · B-06-V07
   accent CTA band). Grounds and inks are EXISTING tokens only: the
   comp's #0b0b12 band resolves to --ioc-g100 (the .ioc-depart-band
   precedent), its #ff8389 terminal line IS --ioc-danger-on-color's
   declared value (infoc-cms.css:118), its greens ride
   --ioc-on-inverse-green and its #a3adff kicker resolves to
   --ioc-on-inverse-blue — nothing minted, so nothing for T16 ②b to
   orphan. Translucent whites are color-mix over the on-ink role,
   never an rgba literal. The comp's ring/dot circles are SVG, not
   border-radius — radius stays ZERO (CMS-D-066 r4). The two hero
   cells ride `.ioc-hero .wrap`'s own grid (infoc-cms.css:1158).
   ============================================================ */
body.ioc-site .ioc-404p{position:relative;overflow:hidden;background:var(--ioc-g100);border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-404p::before{content:"";position:absolute;inset:-64px;background-image:linear-gradient(color-mix(in oklch,var(--ioc-text-on-primary,#fff) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklch,var(--ioc-text-on-primary,#fff) 7%,transparent) 1px,transparent 1px);background-size:64px 64px;pointer-events:none}
body.ioc-site .ioc-404p .wrap{position:relative}
body.ioc-site .ioc-404p .ioc-kicker{color:var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-404p h1{color:var(--ioc-text-on-primary,#fff);max-width:22ch}
body.ioc-site .ioc-404p .ioc-lede{color:var(--ioc-text-on-ink-muted,#c6c6c6)}
body.ioc-site .ioc-404p .ioc-lede:empty{display:none}
body.ioc-site .ioc-404p .ioc-lede+.ioc-lede{margin-top:12px}
body.ioc-site .ioc-404p-term{max-width:460px;margin-top:24px;padding:16px;background:var(--ioc-g100);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ioc-text-on-primary,#fff) 22%,transparent);display:flex;flex-direction:column}
body.ioc-site .ioc-404p-line{display:flex;gap:8px;font-family:var(--ioc-mono);font-size:11.5px;line-height:1.9;color:var(--ioc-text-on-ink-muted,#c6c6c6)}
body.ioc-site .ioc-404p-line b{font-weight:400;opacity:.5;flex:0 0 auto}
body.ioc-site .ioc-404p-line:first-child{color:var(--ioc-text-on-primary,#fff);font-weight:700}
body.ioc-site .ioc-404p-line:nth-child(2){color:var(--ioc-danger-on-color,#ff8389)}
body.ioc-site .ioc-404p-line.is-turn{color:var(--ioc-on-inverse-green)}
body.ioc-site .ioc-404p-cursor{display:inline-block;width:7px;height:14px;margin-left:4px;background:var(--ioc-on-inverse-green);align-self:center}
body.ioc-site .ioc-404p-art{display:flex;align-items:center;justify-content:center;gap:8px;user-select:none}
body.ioc-site .ioc-404p-num{font-family:var(--ioc-sans);font-size:clamp(110px,15vw,220px);font-weight:800;letter-spacing:-.06em;line-height:.86;color:var(--ioc-text-on-primary,#fff)}
body.ioc-site .ioc-404p-zero{position:relative;display:inline-flex;align-items:center;justify-content:center}
body.ioc-site .ioc-404p-num.zero{color:var(--ioc-accent);-webkit-text-stroke:2px var(--ioc-on-inverse-blue)}
body.ioc-site .ioc-404p-ring{position:absolute;left:50%;top:50%;width:112px;height:112px;transform:translate(-50%,-50%);overflow:visible}
body.ioc-site .ioc-404p-ring .c{fill:none;stroke:color-mix(in oklch,var(--ioc-text-on-primary,#fff) 35%,transparent);stroke-width:2}
body.ioc-site .ioc-404p-ring .d{fill:var(--ioc-on-inverse-green)}
@media(max-width:860px){body.ioc-site .ioc-404p-art{padding-bottom:32px}body.ioc-site .ioc-404p-num{font-size:clamp(88px,20vw,140px)}}

/* B-11-V23's head link worn as the comp's outlined search button; the
   base .ioc-head-link idiom (accent ink, end-aligned, gap) stays intact
   underneath — this only adds the border and control padding. */
body.ioc-site .ioc-404p-search{box-shadow:inset 0 0 0 1px var(--ioc-accent);padding:12px 16px}
body.ioc-site .ioc-404p-search svg{width:15px;height:15px}
body.ioc-site .ioc-404p-search:hover svg{transform:none}

/* B-06-V07 — the accent CTA band. On-accent ink is --ioc-text-on-color
   (minted for accent fills, infoc-cms.css:36); the primary button
   inverts to surface-on-accent and the tertiary keeps a translucent
   on-color ring. `blue` is baked into the variant's section class —
   TONE_CLASS has no blue arm and the variant IS the blue band. */
body.ioc-site .ioc-cta-band.blue{background:var(--ioc-accent);border-top:0;color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-cta-band.blue .ioc-cta-lead{color:var(--ioc-text-on-color,#fff);opacity:.9}
body.ioc-site .ioc-cta-band.blue .ioc-cta-lead b{color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-cta-band.blue .btn-primary{background:var(--ioc-surface,#fff);color:var(--ioc-accent)}
body.ioc-site .ioc-cta-band.blue .btn-primary:hover{background:var(--ioc-surface-subtle,#fbfbfb);color:var(--ioc-accent-hover,#0000c4)}
body.ioc-site .ioc-cta-band.blue .btn-tertiary{color:var(--ioc-text-on-color,#fff);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ioc-text-on-color,#fff) 60%,transparent)}
body.ioc-site .ioc-cta-band.blue .btn-tertiary:hover{background:color-mix(in oklch,var(--ioc-text-on-color,#fff) 12%,transparent)}

/* ============================================================
   AA · /search route (Search.dc.html, V6 rewire 2026-08-21). The route is
   code-owned (CMS-D-081 registered exemption — heading/meta resolve from
   `pages[path=search]`, microcopy from `widget-areas.search.*`); this is
   its class vocabulary, zero rules anywhere before this sheet. B-32
   `one/util-search` stays a client-free island OUTSIDE the block register
   (B-24 cap) per the handover override. Every colour is an existing
   token; kind-chip tints are color-mix over the family accents, the same
   mechanism as `.ioc-cards [data-route-fam]` (infoc-cms.css:1649). The
   comp's #0043ce Guide chip has no token and folds to house blue — the
   CMS-D-168 `dat` precedent.
   ============================================================ */
body.ioc-site .ioc-search-head{border-bottom:1px solid var(--ioc-border-subtle)}
body.ioc-site .ioc-search-crumb{display:flex;align-items:center;gap:8px;margin:0 0 16px;font-family:var(--ioc-mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-search-crumb a{display:inline-flex;color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-search-crumb a:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:2px}
body.ioc-site .ioc-search-crumb span{color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-head h1{margin:0 0 24px;font-size:clamp(32px,3vw,40px);line-height:1.06;font-weight:700;letter-spacing:-.04em}
body.ioc-site .ioc-search-field{display:flex;align-items:center;gap:12px;background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);border-bottom:2px solid var(--ioc-g100);padding:0 16px}
body.ioc-site .ioc-search-field:focus-within{outline:2px solid var(--ioc-accent);outline-offset:-2px}
body.ioc-site .ioc-search-field svg{flex:0 0 auto;width:18px;height:18px;color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-field input{width:100%;height:60px;border:0;background:transparent;font-family:inherit;font-size:17px;outline:none;color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-facets{display:flex;flex-wrap:wrap;gap:12px;border:1px solid var(--ioc-border-subtle);margin-top:24px}
body.ioc-site .ioc-search-facets a{flex:1 1 auto;padding:12px 16px;font-size:13.5px;font-weight:600;text-align:center;white-space:nowrap;background:var(--ioc-surface,#fff);color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-facets a:hover{background:var(--ioc-g10)}
body.ioc-site .ioc-search-facets a:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:-3px}
body.ioc-site .ioc-search-facets a[aria-current]{background:var(--ioc-accent);color:var(--ioc-text-on-color,#fff)}
body.ioc-site .ioc-search-count{margin:0 0 24px;font-family:var(--ioc-mono);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-list{display:flex;flex-direction:column;gap:12px}
body.ioc-site .ioc-search-hit{background:var(--ioc-surface,#fff);border:1px solid var(--ioc-border-subtle);padding:24px;transition:background 110ms var(--ioc-ease)}
body.ioc-site .ioc-search-hit:hover{background:var(--ioc-g10)}
body.ioc-site .ioc-search-kind{display:inline-block;margin-bottom:12px;padding:4px 8px;font-family:var(--ioc-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;--sk:var(--ioc-accent);color:var(--sk);background:color-mix(in oklch,var(--sk) 9%,var(--ioc-surface))}
body.ioc-site .ioc-search-kind.is-academy{--sk:var(--ioc-fam-academy)}
body.ioc-site .ioc-search-kind.is-talent{--sk:var(--ioc-fam-talents-ink,var(--ioc-fam-talents))}
body.ioc-site .ioc-search-kind.is-company{--sk:var(--ioc-fam-company)}
body.ioc-site .ioc-search-hit h3{margin:0 0 8px;font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.022em}
body.ioc-site .ioc-search-hit h3 a{color:var(--ioc-text-primary)}
body.ioc-site .ioc-search-hit h3 a:hover{color:var(--ioc-accent-ink,var(--ioc-accent))}
body.ioc-site .ioc-search-hit h3 a:focus-visible{outline:3px solid var(--ioc-accent);outline-offset:2px}
body.ioc-site .ioc-search-hit p{margin:0 0 8px;font-size:15px;line-height:1.62;color:var(--ioc-text-secondary);max-width:80ch}
body.ioc-site .ioc-search-path{font-family:var(--ioc-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ioc-text-helper)}
body.ioc-site .ioc-search-empty{margin:0;font-size:15px;color:var(--ioc-text-secondary)}


/* ============================================================
   CV2 · COMP-EXACT CAMPAIGN LANDERS (CMS-D-172 W6, owner ruling
   2026-08-21 — "exactly like the v2 comp, top to bottom, no site
   header/footer"). MACHINE-PORTED from the four v2 comps by
   apps/one/scripts + the session port script: comp classes renamed
   into the owned cv2- namespace, every hex resolved to a house
   token or a color-mix over tokens (T16), spacing snapped to the
   T17 scale, fonts to --ioc-sans/--ioc-mono, and the comp form
   interior re-targeted at the governed .ioc-form anatomy inside
   .cv2-card. The comps stay the SOURCE; regenerate rather than
   hand-editing large spans.
   ============================================================ */
body.ioc-site{
      --cv2-infoc-blue: var(--ioc-blue);
      --cv2-infoc-blue-dark: var(--ioc-blue-hover);
      --cv2-infoc-blue-soft: color-mix(in srgb, var(--ioc-blue) 7%, var(--ioc-surface));
      --cv2-infoc-pink: var(--ioc-accent);
      --cv2-ink: var(--ioc-g100);
      --cv2-ink-2: color-mix(in srgb, var(--ioc-g100) 91%, var(--ioc-surface));
      --cv2-muted: var(--ioc-g70);
      --cv2-muted-2: var(--ioc-g60);
      --cv2-paper: var(--ioc-surface);
      --cv2-canvas: var(--ioc-surface-subtle);
      --cv2-canvas-2: color-mix(in srgb, var(--ioc-g100) 7%, var(--ioc-surface));
      --cv2-line: color-mix(in srgb, var(--ioc-g100) 15%, var(--ioc-surface));
      --cv2-line-dark: color-mix(in srgb, var(--ioc-g100) 81%, var(--ioc-surface));
      --cv2-success: var(--ioc-success);
      --cv2-warning: var(--ioc-amber);
      --cv2-error: var(--ioc-danger);
      --cv2-max-width: 1280px;
      --cv2-header-height: 74px;
      --cv2-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ioc-blue) 22%, transparent);
      color-scheme: light;
    }body.ioc-site *,
body.ioc-site *::before,
body.ioc-site *::after{
      box-sizing: border-box;
    }.cv2-dropped{display:none;
      scroll-behavior: smooth;
      scroll-padding-top:calc(var(--cv2-header-height) + 1.5rem);
    }.cv2-dropped{display:none;
      margin:0;
      background: var(--cv2-paper);
      color: var(--cv2-ink);
      font-family:var(--ioc-sans);
      font-size: 1rem;
      line-height: 1.55;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }body.ioc-site a{
      color: inherit;
    }body.ioc-site button,
body.ioc-site input,
body.ioc-site select,
body.ioc-site textarea{
      font: inherit;
    }body.ioc-site button,
body.ioc-site a{
      -webkit-tap-highlight-color: transparent;
    }body.ioc-site :focus-visible{
      outline: 2px solid var(--cv2-infoc-blue);
      outline-offset: 3px;
    }body.ioc-site ::selection{
      background: var(--cv2-infoc-blue);
      color: var(--ioc-surface);
    }.cv2-dropped{display:none;
      position: fixed;
      top:0.75rem;
      left:0.75rem;
      z-index: 300;
      padding:0.75rem 1rem;
      background: var(--cv2-ink);
      color: var(--ioc-surface);
      text-decoration: none;
      transform: translateY(-180%);
      transition: transform 160ms ease;
    }.cv2-dropped{display:none;
      transform: translateY(0);
    }body.ioc-site .cv2-wrap{
      width: min(calc(100% - 2.5rem), var(--cv2-max-width));
      margin-inline:auto;
    }body.ioc-site .cv2-sec{
      padding-block:clamp(4.75rem, 8vw, 8rem);
    }body.ioc-site .cv2-eyebrow{
      display: inline-flex;
      align-items: center;
      gap:0.65rem;
      margin:0 0 1rem;
      color: var(--cv2-infoc-blue);
      font-size: 0.75rem;
      font-weight: 850;
      letter-spacing: 0.13em;
      line-height: 1.3;
      text-transform: uppercase;
    }body.ioc-site .cv2-eyebrow::before{
      width: 1.75rem;
      height: 2px;
      background: currentColor;
      content: "";
    }body.ioc-site .cv2-eyebrow--cv2-light{
      color: color-mix(in srgb, var(--ioc-blue) 28%, var(--ioc-surface));
    }body.ioc-site .cv2-display{
      margin:0;
      max-width: 12ch;
      font-size: clamp(3.25rem, 6.4vw, 6rem);
      font-weight: 780;
      letter-spacing: -0.065em;
      line-height: 0.95;
    }body.ioc-site .cv2-title{
      margin:0;
      max-width: 18ch;
      font-size: clamp(2.2rem, 4.5vw, 4.4rem);
      font-weight: 750;
      letter-spacing: -0.05em;
      line-height: 1.02;
    }body.ioc-site .cv2-sec-lead{
      margin:1.5rem 0 0;
      max-width: 760px;
      color: var(--cv2-muted);
      font-size: clamp(1.05rem, 1.6vw, 1.28rem);
      line-height: 1.65;
    }body.ioc-site .cv2-btn{
      min-height: 3.25rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap:0.75rem;
      padding:0.85rem 1.25rem;
      border: 1px solid transparent;
      border-radius: 0;
      cursor: pointer;
      font-weight: 780;
      line-height: 1;
      text-decoration: none;
      transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
    }body.ioc-site .cv2-btn:hover{
      transform: translateY(-2px);
    }body.ioc-site .cv2-btn--cv2-primary{
      background: var(--cv2-infoc-blue);
      color: var(--ioc-surface);
    }body.ioc-site .cv2-btn--cv2-primary:hover{
      background: var(--cv2-infoc-blue-dark);
    }body.ioc-site .cv2-btn--cv2-dark{
      background: var(--cv2-ink);
      color: var(--ioc-surface);
    }body.ioc-site .cv2-btn--cv2-dark:hover{
      background: var(--cv2-ink-2);
    }body.ioc-site .cv2-btn--cv2-light{
      background: var(--ioc-surface);
      color: var(--cv2-ink);
    }body.ioc-site .cv2-btn--cv2-light:hover{
      background: var(--cv2-infoc-blue-soft);
    }body.ioc-site .cv2-btn--cv2-ghost{
      border-color: var(--cv2-line);
      background: transparent;
      color: var(--cv2-ink);
    }body.ioc-site .cv2-btn--cv2-ghost:hover{
      border-color: var(--cv2-ink);
      background: var(--cv2-canvas);
    }body.ioc-site .cv2-btn-arrow{
      width: 1.05rem;
      height: 1.05rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-announce{
      min-height: 34px;
      display: grid;
      place-items: center;
      padding:0.45rem 1rem;
      background: var(--cv2-ink);
      color: var(--ioc-surface);
      font-family:var(--ioc-mono);
      font-size: 0.71rem;
      font-weight: 750;
      letter-spacing: 0.06em;
      text-align: center;
      text-transform: uppercase;
    }body.ioc-site .cv2-header{
      position: sticky;
      top:0;
      z-index: 100;
      border-bottom:1px solid var(--cv2-line);
      background: color-mix(in srgb, var(--ioc-surface) 96%, transparent);
      backdrop-filter: blur(14px);
    }body.ioc-site .cv2-header-in{
      min-height: var(--cv2-header-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap:2rem;
    }body.ioc-site .cv2-brand-wrap{
      display: flex;
      align-items: center;
      gap:1.3rem;
    }body.ioc-site .cv2-brand{
      position: relative;
      display: inline-flex;
      align-items: baseline;
      color: var(--cv2-ink);
      font-size: 1.55rem;
      font-weight: 900;
      letter-spacing: -0.08em;
      line-height: 1;
      text-decoration: none;
    }body.ioc-site .cv2-brand-c{
      position: relative;
      color: var(--cv2-infoc-blue);
    }body.ioc-site .cv2-brand-c::after{
      position: absolute;
      right:0;
      bottom:-0.42rem;
      width: 1.1em;
      height: 0.17em;
      background: var(--cv2-infoc-blue);
      content: "";
    }body.ioc-site .cv2-label{
      padding-left:1.3rem;
      border-left:1px solid var(--cv2-line);
      color: var(--cv2-muted);
      font-size: 0.79rem;
      font-weight: 740;
    }body.ioc-site .cv2-navwrap{
      display: flex;
      align-items: center;
      gap:0.25rem;
    }body.ioc-site .cv2-navwrap a:not(.cv2-btn){
      padding:0.75rem 0.9rem;
      color: color-mix(in srgb, var(--ioc-g100) 76%, var(--ioc-surface));
      font-size: 0.88rem;
      font-weight: 700;
      text-decoration: none;
    }body.ioc-site .cv2-navwrap a:not(.cv2-btn):hover{
      color: var(--cv2-infoc-blue);
    }body.ioc-site .cv2-hero{
      position: relative;
      overflow: clip;
      border-bottom:1px solid var(--cv2-line);
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--ioc-blue) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(color-mix(in srgb, var(--ioc-blue) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        var(--ioc-surface);
    }body.ioc-site .cv2-hero::after{
      position: absolute;
      right:-16rem;
      bottom:-16rem;
      width: 42rem;
      height: 42rem;
      border: 8rem solid color-mix(in srgb, var(--ioc-blue) 4%, transparent);
      border-radius: 50%;
      content: "";
      pointer-events: none;
    }body.ioc-site .cv2-hero-in{
      position: relative;
      z-index: 1;
      min-height: min(900px, calc(100vh - 1rem));
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
      align-items: start;
      gap:clamp(3rem, 6vw, 6.5rem);
      padding-block:clamp(3.75rem, 7vw, 6.5rem);
    }body.ioc-site .cv2-hero-copy{
      position: sticky;
      top:calc(var(--cv2-header-height) + 4rem);
      padding-top:1rem;
    }body.ioc-site .cv2-hero-lead{
      margin:1.65rem 0 0;
      max-width: 650px;
      color: var(--cv2-muted);
      font-size: clamp(1.08rem, 1.7vw, 1.32rem);
      line-height: 1.65;
    }body.ioc-site .cv2-promise{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top:2.2rem;
      border-top:1px solid var(--cv2-line);
      border-left:1px solid var(--cv2-line);
    }body.ioc-site .cv2-promise-item{
      min-height: 116px;
      padding:1rem;
      border-right:1px solid var(--cv2-line);
      border-bottom:1px solid var(--cv2-line);
      background: color-mix(in srgb, var(--ioc-surface) 78%, transparent);
    }body.ioc-site .cv2-promise-item span{
      display: inline-flex;
      align-items: center;
      gap:0.5rem;
      margin-bottom:0.65rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.67rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-promise-icon{
      width: 1.3rem;
      height: 1.3rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-promise-item strong{
      display: block;
      font-size: 0.91rem;
      line-height: 1.35;
    }body.ioc-site .cv2-hero-note{
      margin:1.5rem 0 0;
      display: flex;
      align-items: flex-start;
      gap:0.8rem;
      color: color-mix(in srgb, var(--ioc-g100) 76%, var(--ioc-surface));
      font-size: 0.86rem;
      line-height: 1.55;
    }body.ioc-site .cv2-hero-note::before{
      width: 0.65rem;
      height: 0.65rem;
      flex: 0 0 auto;
      margin-top:0.32rem;
      background: var(--cv2-infoc-pink);
      content: "";
    }body.ioc-site .cv2-card{
      position: relative;
      border: 1px solid var(--cv2-ink);
      background: var(--ioc-surface);
      box-shadow: 1.5rem 1.5rem 0 color-mix(in srgb, var(--ioc-blue) 9%, transparent);
    }body.ioc-site .cv2-card-bar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap:1rem;
      padding:0.85rem 1rem;
      border-bottom:1px solid var(--cv2-line-dark);
      background: var(--cv2-ink);
      color: var(--ioc-surface);
      font-family:var(--ioc-mono);
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }body.ioc-site .cv2-card-status{
      display: inline-flex;
      align-items: center;
      gap:0.45rem;
      color: color-mix(in srgb, var(--ioc-success) 45%, var(--ioc-surface));
    }body.ioc-site .cv2-card-status::before{
      width: 0.48rem;
      height: 0.48rem;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 4px rgba(142, 224, 189, 0.12);
      content: "";
    }body.ioc-site .cv2-card .ioc-form{
      padding:clamp(1.5rem, 3vw, 2.35rem);
    }body.ioc-site .cv2-card-head{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap:1rem;
      margin-bottom:1.35rem;
      padding-bottom:1.25rem;
      border-bottom:1px solid var(--cv2-line);
    }body.ioc-site .cv2-card-head h2{
      margin:0;
      max-width: 16ch;
      font-size: clamp(1.7rem, 3vw, 2.45rem);
      letter-spacing: -0.045em;
      line-height: 1.04;
    }body.ioc-site .cv2-card-head p{
      margin:0.55rem 0 0;
      max-width: 500px;
      color: var(--cv2-muted);
      font-size: 0.88rem;
      line-height: 1.55;
    }body.ioc-site .cv2-route-badge{
      max-width: 185px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap:0.45rem;
      padding:0.55rem 0.7rem;
      background: var(--cv2-infoc-blue-soft);
      color: var(--cv2-infoc-blue-dark);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: right;
      text-transform: uppercase;
    }body.ioc-site .cv2-route-badge svg{
      width: 1rem;
      height: 1rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-route-summary{
      margin-bottom:1.25rem;
      padding:1rem 1.05rem;
      border-left:4px solid var(--cv2-infoc-pink);
      background: var(--cv2-canvas);
    }body.ioc-site .cv2-rs-title{
      margin:0;
      font-size: 1rem;
      font-weight: 820;
      line-height: 1.3;
    }body.ioc-site .cv2-rs-copy{
      margin:0.45rem 0 0;
      color: var(--cv2-muted);
      font-size: 0.8rem;
      line-height: 1.5;
    }body.ioc-site .cv2-rs-target{
      display: grid;
      grid-template-columns: auto 1fr;
      gap:0.6rem;
      margin-top:0.65rem;
      padding-top:0.65rem;
      border-top:1px solid var(--cv2-line);
      color: color-mix(in srgb, var(--ioc-g100) 81%, var(--ioc-surface));
      font-size: 0.76rem;
      line-height: 1.45;
    }body.ioc-site .cv2-rs-target strong{
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.63rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }body.ioc-site .cv2-card .ioc-form-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:0.95rem;
    }body.ioc-site .cv2-card .ioc-field{
      display: grid;
      gap:0.4rem;
    }body.ioc-site .cv2-card .ioc-field.full{
      grid-column: 1 / -1;
    }body.ioc-site .cv2-card .ioc-field label{
      color: color-mix(in srgb, var(--ioc-g100) 83%, var(--ioc-surface));
      font-size: 0.76rem;
      font-weight: 790;
    }body.ioc-site .cv2-card .ioc-field label .cv2-optional{
      color: var(--cv2-muted-2);
      font-weight: 520;
    }body.ioc-site .cv2-card .ioc-field input,
body.ioc-site .cv2-card .ioc-field select,
body.ioc-site .cv2-card .ioc-field textarea{
      width: 100%;
      min-height: 3rem;
      border: 1px solid color-mix(in srgb, var(--ioc-g100) 34%, var(--ioc-surface));
      border-radius: 0;
      background: var(--ioc-surface);
      color: var(--cv2-ink);
      padding:0.72rem 0.78rem;
      transition: border-color 150ms ease, box-shadow 150ms ease;
    }body.ioc-site .cv2-card .ioc-field textarea{
      min-height: 6rem;
      resize: vertical;
    }body.ioc-site .cv2-card .ioc-field input:focus,
body.ioc-site .cv2-card .ioc-field select:focus,
body.ioc-site .cv2-card .ioc-field textarea:focus{
      border-color: var(--cv2-infoc-blue);
      outline: 0;
      box-shadow: var(--cv2-focus-ring);
    }body.ioc-site .cv2-card .ioc-field input::placeholder,
body.ioc-site .cv2-card .ioc-field textarea::placeholder{
      color: var(--ioc-g60);
    }body.ioc-site .cv2-card .ioc-field:has(input[type=checkbox]){
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1.05rem 1fr;
      gap:0.7rem;
      align-items: start;
      margin-top:0.1rem;
      color: var(--cv2-muted);
      font-size: 0.72rem;
      line-height: 1.5;
    }body.ioc-site .cv2-card .ioc-field:has(input[type=checkbox]) input{
      width: 1rem;
      height: 1rem;
      margin:0.15rem 0 0;
      accent-color: var(--cv2-infoc-blue);
    }body.ioc-site .cv2-card .ioc-form-actions{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap:1rem;
      margin-top:1.25rem;
    }body.ioc-site .cv2-card-note{
      margin:0;
      color: var(--cv2-muted);
      font-size: 0.69rem;
      line-height: 1.45;
    }body.ioc-site .cv2-card .ioc-form-ok{
      min-height: 1.4rem;
      margin:0.85rem 0 0;
      color: var(--cv2-success);
      font-size: 0.8rem;
      font-weight: 700;
    }body.ioc-site .cv2-card .ioc-form-ok[data-state="error"]{
      color: var(--cv2-error);
    }body.ioc-site .cv2-card .ioc-form-ok[data-state="demo"]{
      color: var(--cv2-warning);
    }body.ioc-site .cv2-route-strip{
      position: relative;
      z-index: 1;
      overflow-x: auto;
      border-top:1px solid var(--cv2-line);
      background: var(--cv2-canvas);
      scrollbar-width: thin;
    }body.ioc-site .cv2-route-strip-in{
      min-width: 880px;
      display: grid;
      grid-template-columns: repeat(8, minmax(110px, 1fr));
    }body.ioc-site .cv2-route-strip span{
      min-height: 4rem;
      display: grid;
      place-items: center;
      padding:0.75rem 1rem;
      border-right:1px solid var(--cv2-line);
      color: color-mix(in srgb, var(--ioc-g100) 72%, var(--ioc-surface));
      font-family:var(--ioc-mono);
      font-size: 0.68rem;
      font-weight: 850;
      letter-spacing: 0.07em;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
    }body.ioc-site .cv2-situations{
      background: var(--ioc-surface);
    }body.ioc-site .cv2-sec-head{
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
      align-items: end;
      gap:3rem;
      margin-bottom:clamp(2.7rem, 5vw, 4.8rem);
    }body.ioc-site .cv2-sec-head .cv2-sec-lead{
      margin:0;
    }body.ioc-site .cv2-route-grid{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top:1px solid var(--cv2-line);
      border-left:1px solid var(--cv2-line);
    }body.ioc-site .cv2-route-card{
      min-height: 278px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap:1.75rem;
      padding:1.45rem;
      border: 0;
      border-right:1px solid var(--cv2-line);
      border-bottom:1px solid var(--cv2-line);
      border-radius: 0;
      background: var(--ioc-surface);
      color: var(--cv2-ink);
      cursor: pointer;
      text-align: left;
      transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
    }body.ioc-site .cv2-route-card::after{
      position: absolute;
      right:1.3rem;
      bottom:1.3rem;
      width: 0.9rem;
      height: 0.9rem;
      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;
      content: "";
      transform: rotate(-45deg);
      transition: transform 180ms ease;
    }body.ioc-site .cv2-route-card:hover,
body.ioc-site .cv2-route-card[aria-pressed="true"]{
      z-index: 1;
      background: var(--cv2-infoc-blue);
      color: var(--ioc-surface);
      transform: translateY(-4px);
    }body.ioc-site .cv2-route-card:hover::after,
body.ioc-site .cv2-route-card[aria-pressed="true"]::after{
      transform: translateX(0.25rem) rotate(-45deg);
    }body.ioc-site .cv2-rc-label{
      display: inline-flex;
      align-items: center;
      gap:0.55rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-rc-icon{
      width: 1.4rem;
      height: 1.4rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-route-card:hover .cv2-rc-label,
body.ioc-site .cv2-route-card[aria-pressed="true"] .cv2-rc-label{
      color: color-mix(in srgb, var(--ioc-blue) 15%, var(--ioc-surface));
    }body.ioc-site .cv2-route-card h3{
      margin:0;
      max-width: 15ch;
      font-size: 1.22rem;
      letter-spacing: -0.025em;
      line-height: 1.16;
    }body.ioc-site .cv2-route-card p{
      margin:0.75rem 0 0;
      color: var(--cv2-muted);
      font-size: 0.87rem;
      line-height: 1.52;
    }body.ioc-site .cv2-route-card:hover p,
body.ioc-site .cv2-route-card[aria-pressed="true"] p{
      color: color-mix(in srgb, var(--ioc-blue) 11%, var(--ioc-surface));
    }body.ioc-site .cv2-rc-action{
      display: inline-flex;
      align-items: center;
      gap:0.45rem;
      padding-right:2rem;
      color: inherit;
      font-size: 0.75rem;
      font-weight: 800;
    }body.ioc-site .cv2-platform{
      position: relative;
      overflow: hidden;
      background: var(--cv2-ink);
      color: var(--ioc-surface);
    }body.ioc-site .cv2-platform::before{
      position: absolute;
      inset:0;
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--ioc-surface) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(color-mix(in srgb, var(--ioc-surface) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px;
      content: "";
      pointer-events: none;
    }body.ioc-site .cv2-platform-in{
      position: relative;
      z-index: 1;
    }body.ioc-site .cv2-platform .cv2-sec-lead{
      color: color-mix(in srgb, var(--ioc-g100) 21%, var(--ioc-surface));
    }body.ioc-site .cv2-plat-map{
      display: grid;
      grid-template-columns: 1.2fr repeat(2, 1fr);
      margin-top:4rem;
      border-top:1px solid var(--cv2-line-dark);
      border-left:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-plat-card{
      min-height: 230px;
      position: relative;
      padding:clamp(1.4rem, 3vw, 2rem);
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
      background: color-mix(in srgb, var(--ioc-g100) 94%, var(--ioc-surface));
    }body.ioc-site .cv2-plat-core{
      grid-row: span 2;
      min-height: 460px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: var(--cv2-infoc-blue);
    }body.ioc-site .cv2-plat-index{
      color: color-mix(in srgb, var(--ioc-g100) 38%, var(--ioc-surface));
      font-family:var(--ioc-mono);
      font-size: 0.67rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-plat-core .cv2-plat-index{
      color: color-mix(in srgb, var(--ioc-blue) 21%, var(--ioc-surface));
    }body.ioc-site .cv2-plat-card h3{
      margin:2.6rem 0 0;
      font-size: clamp(1.35rem, 2.4vw, 2rem);
      letter-spacing: -0.035em;
      line-height: 1.08;
    }body.ioc-site .cv2-plat-core h3{
      max-width: 10ch;
      font-size: clamp(2.3rem, 4vw, 4.1rem);
      letter-spacing: -0.055em;
      line-height: 0.98;
    }body.ioc-site .cv2-plat-card p{
      margin:0.85rem 0 0;
      color: color-mix(in srgb, var(--ioc-g100) 26%, var(--ioc-surface));
      font-size: 0.87rem;
      line-height: 1.55;
    }body.ioc-site .cv2-plat-core p{
      max-width: 420px;
      color: color-mix(in srgb, var(--ioc-blue) 12%, var(--ioc-surface));
      font-size: 0.98rem;
    }body.ioc-site .cv2-plat-tags{
      display: flex;
      flex-wrap: wrap;
      gap:0.45rem;
      margin-top:1.5rem;
    }body.ioc-site .cv2-plat-tags span{
      padding:0.42rem 0.55rem;
      border: 1px solid color-mix(in srgb, var(--ioc-surface) 24%, transparent);
      color: color-mix(in srgb, var(--ioc-blue) 5%, var(--ioc-surface));
      font-family:var(--ioc-mono);
      font-size: 0.63rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }body.ioc-site .cv2-outcomes{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top:2rem;
      border-top:1px solid var(--cv2-line-dark);
      border-left:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-outcome{
      min-height: 150px;
      padding:1.25rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-outcome span{
      color: color-mix(in srgb, var(--ioc-blue) 37%, var(--ioc-surface));
      font-family:var(--ioc-mono);
      font-size: 0.66rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-outcome strong{
      display: block;
      margin-top:0.8rem;
      max-width: 22ch;
      font-size: 1.02rem;
      line-height: 1.35;
    }body.ioc-site .cv2-plat-ai{
      background:
        linear-gradient(145deg, rgba(255, 0, 119, 0.22), transparent 52%),
        color-mix(in srgb, var(--ioc-g100) 93%, var(--ioc-surface));
    }body.ioc-site .cv2-plat-ai h3{
      max-width: 12ch;
    }body.ioc-site .cv2-ai-panel{
      display: grid;
      grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
      gap:clamp(1.5rem, 4vw, 3.5rem);
      margin-top:2rem;
      padding:clamp(1.5rem, 3vw, 2.5rem);
      border: 1px solid var(--cv2-line-dark);
      background: color-mix(in srgb, var(--ioc-g100) 97%, var(--ioc-surface));
    }body.ioc-site .cv2-ai-head h3{
      margin:0.7rem 0 0;
      max-width: 13ch;
      font-size: clamp(1.9rem, 3.4vw, 3.2rem);
      letter-spacing: -0.05em;
      line-height: 1.02;
    }body.ioc-site .cv2-ai-head p{
      margin:1rem 0 0;
      max-width: 460px;
      color: color-mix(in srgb, var(--ioc-g100) 26%, var(--ioc-surface));
      font-size: 0.88rem;
      line-height: 1.6;
    }body.ioc-site .cv2-capabilities{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-top:1px solid var(--cv2-line-dark);
      border-left:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-capability{
      min-height: 118px;
      padding:1rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-capability strong{
      display: block;
      color: var(--ioc-surface);
      font-size: 0.88rem;
      line-height: 1.35;
    }body.ioc-site .cv2-capability span{
      display: block;
      margin-top:0.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 33%, var(--ioc-surface));
      font-size: 0.73rem;
      line-height: 1.5;
    }body.ioc-site .cv2-path-wrap{
      grid-column: 1 / -1;
      margin-top:0.5rem;
      padding-top:1.75rem;
      border-top:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-path-wrap h4{
      margin:0;
      font-size: clamp(1.25rem, 2vw, 1.65rem);
      letter-spacing: -0.025em;
    }body.ioc-site .cv2-path-wrap > p{
      margin:0.55rem 0 0;
      max-width: 780px;
      color: color-mix(in srgb, var(--ioc-g100) 33%, var(--ioc-surface));
      font-size: 0.8rem;
      line-height: 1.55;
    }body.ioc-site .cv2-path{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top:1.25rem;
      border-top:1px solid var(--cv2-line-dark);
      border-left:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-path-step{
      min-height: 150px;
      padding:1rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-path-icon{
      display: block;
      width: 1.45rem;
      height: 1.45rem;
      color: color-mix(in srgb, var(--ioc-blue) 37%, var(--ioc-surface));
    }body.ioc-site .cv2-path-step strong{
      display: block;
      margin-top:0.65rem;
      color: var(--ioc-surface);
      font-size: 0.94rem;
      line-height: 1.3;
    }body.ioc-site .cv2-path-step span{
      display: block;
      margin-top:0.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 33%, var(--ioc-surface));
      font-size: 0.7rem;
      line-height: 1.48;
    }body.ioc-site .cv2-ai-guardrail{
      grid-column: 1 / -1;
      margin:0;
      padding-top:1.25rem;
      border-top:1px solid var(--cv2-line-dark);
      color: color-mix(in srgb, var(--ioc-g100) 21%, var(--ioc-surface));
      font-size: 0.72rem;
      line-height: 1.58;
    }@media (max-width: 1100px){body.ioc-site .cv2-ai-panel{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-path{
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }}@media (max-width: 820px){body.ioc-site .cv2-path{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }}@media (max-width: 620px){body.ioc-site .cv2-ai-panel{
        margin-inline:-0.35rem;
        padding:1.25rem;
      }body.ioc-site .cv2-capabilities,
body.ioc-site .cv2-path{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-path-step{
        min-height: auto;
      }}body.ioc-site .cv2-close{
      position: relative;
      overflow: hidden;
      background: var(--cv2-infoc-blue);
      color: var(--ioc-surface);
    }body.ioc-site .cv2-close::before{
      position: absolute;
      inset:0;
      background:
        linear-gradient(135deg, transparent 0 65%, color-mix(in srgb, var(--ioc-surface) 9%, transparent) 65% 66%, transparent 66%),
        linear-gradient(90deg, color-mix(in srgb, var(--ioc-surface) 6%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(color-mix(in srgb, var(--ioc-surface) 6%, transparent) 1px, transparent 1px) 0 0 / 80px 80px;
      content: "";
      pointer-events: none;
    }body.ioc-site .cv2-close-in{
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(400px, 0.72fr);
      align-items: end;
      gap:clamp(3rem, 8vw, 8rem);
    }body.ioc-site .cv2-close .cv2-title{
      max-width: 13ch;
    }body.ioc-site .cv2-close-lead{
      margin:1.35rem 0 0;
      max-width: 650px;
      color: color-mix(in srgb, var(--ioc-blue) 12%, var(--ioc-surface));
      font-size: 1.08rem;
      line-height: 1.62;
    }body.ioc-site .cv2-close-steps{
      display: grid;
      gap:0.8rem;
      margin-top:2.1rem;
    }body.ioc-site .cv2-close-step{
      display: grid;
      grid-template-columns: 2rem 1fr;
      gap:0.8rem;
      align-items: start;
      color: color-mix(in srgb, var(--ioc-blue) 4%, var(--ioc-surface));
      font-size: 0.88rem;
    }body.ioc-site .cv2-close-step span{
      width: 2rem;
      height: 2rem;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--ioc-surface) 48%, transparent);
      font-family:var(--ioc-mono);
      font-size: 0.64rem;
      font-weight: 850;
    }body.ioc-site .cv2-close-action{
      padding:clamp(1.5rem, 4vw, 2.4rem);
      border: 1px solid color-mix(in srgb, var(--ioc-surface) 45%, transparent);
      background: color-mix(in srgb, var(--ioc-g100) 15%, transparent);
    }body.ioc-site .cv2-close-action p{
      margin:0 0 1.2rem;
      color: color-mix(in srgb, var(--ioc-blue) 10%, var(--ioc-surface));
      font-size: 0.9rem;
      line-height: 1.55;
    }body.ioc-site .cv2-close-action .cv2-btn{
      width: 100%;
    }body.ioc-site .cv2-close-action small{
      display: block;
      margin-top:0.9rem;
      color: color-mix(in srgb, var(--ioc-blue) 18%, var(--ioc-surface));
      font-size: 0.69rem;
      line-height: 1.45;
    }body.ioc-site .cv2-footer{
      background: var(--cv2-ink);
      color: var(--ioc-surface);
    }body.ioc-site .cv2-footer-in{
      min-height: 108px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap:2rem;
      padding-block:1.5rem;
    }body.ioc-site .cv2-footer-brand{
      display: flex;
      align-items: center;
      gap:1.5rem;
    }body.ioc-site .cv2-footer .cv2-brand{
      color: var(--ioc-surface);
    }body.ioc-site .cv2-footer-brand p{
      margin:0;
      color: color-mix(in srgb, var(--ioc-g100) 33%, var(--ioc-surface));
      font-size: 0.78rem;
    }body.ioc-site .cv2-footer-links{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap:1rem;
      color: color-mix(in srgb, var(--ioc-g100) 28%, var(--ioc-surface));
      font-size: 0.75rem;
    }body.ioc-site .cv2-footer-links a{
      text-decoration: none;
    }body.ioc-site .cv2-footer-links a:hover{
      color: var(--ioc-surface);
      text-decoration: underline;
      text-underline-offset: 0.25rem;
    }@media (max-width: 1100px){body.ioc-site .cv2-hero-in{
        grid-template-columns: 1fr;
        min-height: auto;
      }body.ioc-site .cv2-hero-copy{
        position: static;
        max-width: 850px;
        padding-top:0;
      }body.ioc-site .cv2-card{
        max-width: 850px;
      }body.ioc-site .cv2-route-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }body.ioc-site .cv2-plat-map{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }body.ioc-site .cv2-plat-core{
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 340px;
      }body.ioc-site .cv2-close-in{
        grid-template-columns: 1fr;
        align-items: start;
      }body.ioc-site .cv2-close-action{
        max-width: 700px;
      }}@media (max-width: 820px){body.ioc-site{
        --cv2-header-height: 66px;
      }body.ioc-site .cv2-wrap{
        width: min(calc(100% - 2rem), var(--cv2-max-width));
      }body.ioc-site .cv2-label,
body.ioc-site .cv2-navwrap a:not(.cv2-btn){
        display: none;
      }body.ioc-site .cv2-sec-head{
        grid-template-columns: 1fr;
        align-items: start;
        gap:1.5rem;
      }body.ioc-site .cv2-outcomes{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-footer-in,
body.ioc-site .cv2-footer-brand{
        align-items: flex-start;
        flex-direction: column;
      }body.ioc-site .cv2-footer-links{
        justify-content: flex-start;
      }}@media (max-width: 620px){body.ioc-site .cv2-announce{
        font-size: 0.64rem;
      }body.ioc-site .cv2-display{
        font-size: clamp(2.85rem, 13vw, 4.1rem);
      }body.ioc-site .cv2-hero-in{
        gap:2.1rem;
        padding-top:2.75rem;
      }body.ioc-site .cv2-hero-lead{
        font-size: 1rem;
        line-height: 1.55;
      }body.ioc-site .cv2-promise,
body.ioc-site .cv2-hero-note{
        display: none;
      }body.ioc-site .cv2-promise,
body.ioc-site .cv2-card .ioc-form-grid,
body.ioc-site .cv2-route-grid,
body.ioc-site .cv2-plat-map{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-promise-item{
        min-height: auto;
      }body.ioc-site .cv2-card{
        margin-inline:-0.35rem;
        box-shadow: 0.8rem 0.8rem 0 color-mix(in srgb, var(--ioc-blue) 9%, transparent);
      }body.ioc-site .cv2-card-head,
body.ioc-site .cv2-card .ioc-form-actions{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-route-badge{
        max-width: none;
        text-align: left;
      }body.ioc-site .cv2-card .ioc-form-actions .cv2-btn{
        width: 100%;
      }body.ioc-site .cv2-route-card{
        min-height: 220px;
      }body.ioc-site .cv2-plat-card,
body.ioc-site .cv2-plat-core{
        grid-column: auto;
        min-height: 230px;
      }body.ioc-site .cv2-plat-core h3{
        font-size: clamp(2.5rem, 13vw, 3.7rem);
      }body.ioc-site .cv2-close-action{
        margin-inline:-0.35rem;
      }body.ioc-site .cv2-footer-brand p{
        max-width: 260px;
      }}@media (prefers-reduced-motion: reduce){body.ioc-site *,
body.ioc-site *::before,
body.ioc-site *::after{
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }}body.ioc-site .cv2-promise-item span{
      display: block;
      margin-bottom:0.65rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.67rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-promise-icon,
body.ioc-site .cv2-route-badge-icon,
body.ioc-site .cv2-rc-icon{
      width: 1.25rem;
      height: 1.25rem;
      flex: 0 0 1.25rem;
    }body.ioc-site .cv2-promise-icon{
      display: block;
      margin-bottom:0.65rem;
    }body.ioc-site .cv2-route-badge{
      display: inline-flex;
      align-items: center;
      gap:0.4rem;
      max-width: 185px;
      padding:0.55rem 0.7rem;
      background: var(--cv2-infoc-blue-soft);
      color: var(--cv2-infoc-blue-dark);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: right;
      text-transform: uppercase;
    }body.ioc-site .cv2-rc-label{
      display: inline-flex;
      align-items: center;
      gap:0.45rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}@media (prefers-reduced-motion: reduce){}body.ioc-site .cv2-rs-ai{
      display: grid;
      grid-template-columns: auto 1fr;
      gap:0.6rem;
      margin-top:0.65rem;
      padding-top:0.65rem;
      border-top:1px solid var(--cv2-line);
      color: color-mix(in srgb, var(--ioc-g100) 81%, var(--ioc-surface));
      font-size: 0.76rem;
      line-height: 1.45;
    }body.ioc-site .cv2-rs-ai strong{
      color: var(--cv2-infoc-pink);
      font-family:var(--ioc-mono);
      font-size: 0.63rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }body.ioc-site .cv2-route-card{
      min-height: 372px;
    }body.ioc-site .cv2-rc-ai{
      margin-top:1rem;
      padding-top:0.9rem;
      border-top:1px solid var(--cv2-line);
      color: color-mix(in srgb, var(--ioc-g100) 77%, var(--ioc-surface));
      font-size: 0.75rem;
      line-height: 1.48;
    }body.ioc-site .cv2-rc-ai strong{
      display: block;
      margin-bottom:0.32rem;
      color: var(--cv2-infoc-pink);
      font-family:var(--ioc-mono);
      font-size: 0.61rem;
      font-weight: 850;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }body.ioc-site .cv2-route-card:hover .cv2-rc-ai,
body.ioc-site .cv2-route-card[aria-pressed="true"] .cv2-rc-ai{
      border-top-color: color-mix(in srgb, var(--ioc-surface) 32%, transparent);
      color: color-mix(in srgb, var(--ioc-blue) 6%, var(--ioc-surface));
    }body.ioc-site .cv2-route-card:hover .cv2-rc-ai strong,
body.ioc-site .cv2-route-card[aria-pressed="true"] .cv2-rc-ai strong{
      color: color-mix(in srgb, var(--ioc-accent) 25%, var(--ioc-surface));
    }body.ioc-site .cv2-ai-panel{
      display: grid;
      grid-template-columns: minmax(250px, 0.65fr) minmax(0, 1.35fr);
      gap:2rem;
      margin-top:2rem;
      padding:clamp(1.5rem, 3vw, 2.2rem);
      border: 1px solid var(--cv2-line-dark);
      background: color-mix(in srgb, var(--ioc-g100) 97%, var(--ioc-surface));
    }body.ioc-site .cv2-ai-panel h3{
      margin:0.55rem 0 0;
      max-width: 13ch;
      font-size: clamp(1.7rem, 3vw, 2.75rem);
      letter-spacing: -0.045em;
      line-height: 1.05;
    }body.ioc-site .cv2-ai-head{
      margin:1rem 0 0;
      color: color-mix(in srgb, var(--ioc-g100) 26%, var(--ioc-surface));
      font-size: 0.86rem;
      line-height: 1.55;
    }body.ioc-site .cv2-capability{
      min-height: 112px;
      padding:1rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-capability span{
      display: block;
      margin-top:0.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 33%, var(--ioc-surface));
      font-size: 0.72rem;
      line-height: 1.48;
    }body.ioc-site .cv2-ai-guardrail{
      grid-column: 1 / -1;
      margin:0;
      padding-top:1rem;
      border-top:1px solid var(--cv2-line-dark);
      color: color-mix(in srgb, var(--ioc-g100) 21%, var(--ioc-surface));
      font-size: 0.72rem;
      line-height: 1.55;
    }body.ioc-site .cv2-form-disclosure{
      grid-column: 1 / -1;
      margin:-0.15rem 0 0;
      color: var(--cv2-muted-2);
      font-size: 0.68rem;
      line-height: 1.45;
    }@media (max-width: 820px){}@media (max-width: 620px){body.ioc-site .cv2-route-card{
        min-height: 300px;
      }body.ioc-site .cv2-rs-ai,
body.ioc-site .cv2-rs-target{
        grid-template-columns: 1fr;
      }body.ioc-site .cv2-capabilities{
        grid-template-columns: 1fr;
      }}body.ioc-site{
      --cv2-m365-blue: var(--ioc-blue);
      --cv2-m365-blue-dark: var(--ioc-blue-hover);
      --cv2-m365-cyan: color-mix(in srgb, var(--ioc-green) 55%, var(--ioc-surface));
      --cv2-m365-navy: color-mix(in srgb, var(--ioc-g100) 98%, var(--ioc-surface));
      --cv2-m365-soft: color-mix(in srgb, var(--ioc-blue) 7%, var(--ioc-surface));
    }body.ioc-site .cv2-page .cv2-announce{
      background: var(--cv2-m365-navy);
    }body.ioc-site .cv2-page .cv2-hero{
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--ioc-blue) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(color-mix(in srgb, var(--ioc-blue) 5%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(135deg, var(--ioc-surface) 0 68%, color-mix(in srgb, var(--ioc-blue) 5%, var(--ioc-surface)) 68% 100%);
    }body.ioc-site .cv2-page .cv2-hero::after{
      border-color: color-mix(in srgb, var(--ioc-blue) 5%, transparent);
    }body.ioc-site .cv2-page .cv2-hero-note::before,
body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-m365-blue);
    }body.ioc-site .cv2-page .cv2-route-card:hover,
body.ioc-site .cv2-page .cv2-route-card[aria-pressed="true"]{
      background: var(--cv2-m365-blue);
    }body.ioc-site .cv2-page .cv2-rc-label,
body.ioc-site .cv2-page .cv2-rs-target strong,
body.ioc-site .cv2-page .cv2-eyebrow{
      color: var(--cv2-m365-blue);
    }body.ioc-site .cv2-page .cv2-eyebrow--cv2-light{
      color: var(--cv2-m365-cyan);
    }body.ioc-site .cv2-page .cv2-route-badge{
      background: var(--cv2-m365-soft);
      color: var(--cv2-m365-blue-dark);
    }body.ioc-site .cv2-page .cv2-route-summary{
      border-left-color: var(--cv2-m365-cyan);
    }body.ioc-site .cv2-page .cv2-plat-core{
      background: var(--cv2-m365-blue);
    }body.ioc-site .cv2-page .cv2-plat-ai{
      background: color-mix(in srgb, var(--ioc-g100) 85%, var(--ioc-blue));
    }body.ioc-site .cv2-page .cv2-plat-ai .cv2-plat-index{
      color: var(--cv2-m365-cyan);
    }body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-m365-navy);
    }body.ioc-site .cv2-page .cv2-close-action{
      border-color: rgba(85, 230, 193, 0.55);
      background: color-mix(in srgb, var(--ioc-blue) 18%, transparent);
    }body.ioc-site .cv2-page .cv2-outcome span{
      color: var(--cv2-m365-cyan);
    }body.ioc-site .cv2-ai-panel{
      display: grid;
      grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
      gap:clamp(1.5rem, 4vw, 3.5rem);
      margin-top:2rem;
      padding:clamp(1.5rem, 3vw, 2.5rem);
      border: 1px solid var(--cv2-line-dark);
      background:
        linear-gradient(145deg, rgba(85, 230, 193, 0.11), transparent 44%),
        color-mix(in srgb, var(--ioc-g100) 97%, var(--ioc-surface));
    }body.ioc-site .cv2-ai-head p{
      margin:1rem 0 0;
      max-width: 470px;
      color: color-mix(in srgb, var(--ioc-g100) 20%, var(--ioc-surface));
      font-size: 0.88rem;
      line-height: 1.6;
    }body.ioc-site .cv2-capability{
      min-height: 124px;
      padding:1rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-capability span{
      display: block;
      margin-top:0.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 28%, var(--ioc-surface));
      font-size: 0.73rem;
      line-height: 1.5;
    }body.ioc-site .cv2-path-wrap h4{
      margin:0;
      color: var(--ioc-surface);
      font-size: clamp(1.25rem, 2vw, 1.65rem);
      letter-spacing: -0.025em;
    }body.ioc-site .cv2-path-wrap > p{
      margin:0.55rem 0 0;
      max-width: 820px;
      color: color-mix(in srgb, var(--ioc-g100) 28%, var(--ioc-surface));
      font-size: 0.8rem;
      line-height: 1.55;
    }body.ioc-site .cv2-path{
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      margin-top:1.25rem;
      border-top:1px solid var(--cv2-line-dark);
      border-left:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-path-step{
      min-height: 154px;
      padding:1rem;
      border-right:1px solid var(--cv2-line-dark);
      border-bottom:1px solid var(--cv2-line-dark);
    }body.ioc-site .cv2-path-step b{
      display: block;
      color: var(--cv2-m365-cyan);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-path-step span{
      display: block;
      margin-top:0.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 28%, var(--ioc-surface));
      font-size: 0.7rem;
      line-height: 1.48;
    }body.ioc-site .cv2-ai-guardrail{
      grid-column: 1 / -1;
      margin:0;
      padding-top:1.25rem;
      border-top:1px solid var(--cv2-line-dark);
      color: color-mix(in srgb, var(--ioc-g100) 17%, var(--ioc-surface));
      font-size: 0.72rem;
      line-height: 1.58;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}body.ioc-site .cv2-promise-label{
      display: inline-flex;
      align-items: center;
      gap:.5rem;
      margin:0 0 .65rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: .67rem;
      font-weight: 850;
      letter-spacing: .08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-promise-icon,
body.ioc-site .cv2-route-badge-icon,
body.ioc-site .cv2-rc-icon{
      width: 1.25rem;
      height: 1.25rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-route-badge{
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap:.45rem;
      max-width: 185px;
      padding:0.55rem 0.7rem;
      background: var(--cv2-infoc-blue-soft);
      color: var(--cv2-infoc-blue-dark);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: right;
      text-transform: uppercase;
    }body.ioc-site .cv2-rc-label{
      display: inline-flex;
      align-items: center;
      gap:.45rem;
      color: var(--cv2-infoc-blue);
      font-family:var(--ioc-mono);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-plat-index{
      display: inline-flex;
      align-items: center;
      gap:.45rem;
      color: color-mix(in srgb, var(--ioc-g100) 38%, var(--ioc-surface));
      font-family:var(--ioc-mono);
      font-size: 0.67rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }body.ioc-site .cv2-plat-icon{
      width: 1.25rem;
      height: 1.25rem;
      flex: 0 0 auto;
    }body.ioc-site .cv2-close-action .cv2-secondary-diagnostic{
      margin:1rem 0 0;
      color: color-mix(in srgb, var(--ioc-blue) 18%, var(--ioc-surface));
      font-size: 0.78rem;
      line-height: 1.45;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}@media (prefers-reduced-motion: reduce){}@media (max-width: 820px){}@media (max-width: 620px){}body.ioc-site{
      --cv2-azure-blue: var(--ioc-blue);
      --cv2-azure-blue-dark: var(--ioc-blue-hover);
      --cv2-azure-cyan: color-mix(in srgb, var(--ioc-green) 55%, var(--ioc-surface));
      --cv2-azure-navy: color-mix(in srgb, var(--ioc-g100) 95%, var(--ioc-surface));
      --cv2-azure-soft: color-mix(in srgb, var(--ioc-blue) 5%, var(--ioc-surface));
    }body.ioc-site .cv2-page .cv2-announce{
      background: var(--cv2-azure-navy);
    }body.ioc-site .cv2-page .cv2-hero{
      background:
        linear-gradient(90deg, rgba(0, 120, 212, 0.055) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(rgba(0, 120, 212, 0.055) 1px, transparent 1px) 0 0 / 80px 80px,
        linear-gradient(135deg, var(--ioc-surface) 0 68%, color-mix(in srgb, var(--ioc-blue) 4%, var(--ioc-surface)) 68% 100%);
    }body.ioc-site .cv2-page .cv2-hero::after{
      border-color: rgba(0, 120, 212, 0.055);
    }body.ioc-site .cv2-page .cv2-hero-note::before,
body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-azure-blue);
    }body.ioc-site .cv2-page .cv2-route-card:hover,
body.ioc-site .cv2-page .cv2-route-card[aria-pressed="true"]{
      background: var(--cv2-azure-blue);
    }body.ioc-site .cv2-page .cv2-rc-label,
body.ioc-site .cv2-page .cv2-rs-target strong,
body.ioc-site .cv2-page .cv2-eyebrow{
      color: var(--cv2-azure-blue);
    }body.ioc-site .cv2-page .cv2-eyebrow--cv2-light{
      color: var(--cv2-azure-cyan);
    }body.ioc-site .cv2-page .cv2-route-badge{
      background: var(--cv2-azure-soft);
      color: var(--cv2-azure-blue-dark);
    }body.ioc-site .cv2-page .cv2-route-summary{
      border-left-color: var(--cv2-azure-cyan);
    }body.ioc-site .cv2-page .cv2-plat-core{
      background: var(--cv2-azure-blue);
    }body.ioc-site .cv2-page .cv2-plat-ai{
      background: color-mix(in srgb, var(--ioc-g100) 72%, var(--ioc-blue));
    }body.ioc-site .cv2-page .cv2-plat-ai .cv2-plat-index{
      color: var(--cv2-azure-cyan);
    }body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-azure-navy);
    }body.ioc-site .cv2-page .cv2-close-action{
      border-color: rgba(80, 230, 255, 0.55);
      background: rgba(0, 120, 212, 0.18);
    }body.ioc-site .cv2-page .cv2-outcome span{
      color: var(--cv2-azure-cyan);
    }body.ioc-site .cv2-ai-panel{
      display: grid;
      grid-template-columns: minmax(270px, 0.72fr) minmax(0, 1.28fr);
      gap:clamp(1.5rem, 4vw, 3.5rem);
      margin-top:2rem;
      padding:clamp(1.5rem, 3vw, 2.5rem);
      border: 1px solid var(--cv2-line-dark);
      background:
        linear-gradient(145deg, rgba(0, 188, 242, 0.10), transparent 44%),
        color-mix(in srgb, var(--ioc-g100) 96%, var(--ioc-surface));
    }body.ioc-site .cv2-path-step b{
      display: block;
      color: var(--cv2-azure-cyan);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}body.ioc-site .cv2-promise-icon{
      width: 1.5rem;
      height: 1.5rem;
      display: block;
      margin-bottom:0.65rem;
      color: var(--cv2-infoc-blue);
    }body.ioc-site .cv2-route-badge{
      max-width: 185px;
      display: inline-flex;
      align-items: center;
      gap:0.45rem;
      padding:0.55rem 0.7rem;
      background: var(--cv2-infoc-blue-soft);
      color: var(--cv2-infoc-blue-dark);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      line-height: 1.35;
      text-align: left;
      text-transform: uppercase;
    }body.ioc-site .cv2-route-badge-icon{
      width: 1.25rem;
      height: 1.25rem;
      flex: 0 0 auto;
    }body.ioc-site [data-secondary-diagnostic]{
      margin-top:0.45rem;
    }body.ioc-site .cv2-rc-icon{
      width: 1.5rem;
      height: 1.5rem;
      flex: 0 0 auto;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}@media (prefers-reduced-motion: reduce){}@media (max-width: 820px){}@media (max-width: 620px){}body.ioc-site{
      --cv2-fabric-blue: var(--ioc-blue);
      --cv2-fabric-blue-dark: var(--ioc-blue-hover);
      --cv2-fabric-cyan: color-mix(in srgb, var(--ioc-green) 60%, var(--ioc-surface));
      --cv2-fabric-navy: color-mix(in srgb, var(--ioc-g100) 97%, var(--ioc-surface));
      --cv2-fabric-soft: color-mix(in srgb, var(--ioc-blue) 7%, var(--ioc-surface));
    }body.ioc-site .cv2-page .cv2-announce{
      background: var(--cv2-fabric-navy);
    }body.ioc-site .cv2-page .cv2-hero-note::before,
body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-fabric-blue);
    }body.ioc-site .cv2-page .cv2-route-card:hover,
body.ioc-site .cv2-page .cv2-route-card[aria-pressed="true"]{
      background: var(--cv2-fabric-blue);
    }body.ioc-site .cv2-page .cv2-rc-label,
body.ioc-site .cv2-page .cv2-rs-target strong,
body.ioc-site .cv2-page .cv2-eyebrow{
      color: var(--cv2-fabric-blue);
    }body.ioc-site .cv2-page .cv2-eyebrow--cv2-light{
      color: var(--cv2-fabric-cyan);
    }body.ioc-site .cv2-page .cv2-route-badge{
      background: var(--cv2-fabric-soft);
      color: var(--cv2-fabric-blue-dark);
    }body.ioc-site .cv2-page .cv2-route-summary{
      border-left-color: var(--cv2-fabric-cyan);
    }body.ioc-site .cv2-page .cv2-plat-core{
      background: var(--cv2-fabric-blue);
    }body.ioc-site .cv2-page .cv2-plat-ai .cv2-plat-index{
      color: var(--cv2-fabric-cyan);
    }body.ioc-site .cv2-page .cv2-close{
      background: var(--cv2-fabric-navy);
    }body.ioc-site .cv2-page .cv2-outcome span{
      color: var(--cv2-fabric-cyan);
    }body.ioc-site .cv2-path-step b{
      display: block;
      color: var(--cv2-fabric-cyan);
      font-family:var(--ioc-mono);
      font-size: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }@media (max-width: 1100px){}@media (max-width: 820px){}@media (max-width: 620px){}

/* CV2: the diagnostic card's head is TEMPLATE-owned (form_heading_01/
   form_copy_01) — the runtime's own fallback title/copy inside the mount
   would print a second heading, so it is suppressed here, not in JS. */
body.ioc-site .cv2-card .ioc-form-title{display:none}

/* CV2: the campaign chrome wears the MAIN SITE LOGO (owner instruction
   2026-08-21) — the same .infoc-logo lockup the site header renders, word
   store-defaulted via brand_01, letters split by the runtime (no-JS shows
   the plain Michroma word). The comp's own INFO+boxed-C approximation is
   retired; .cv2-brand-c rules below are inert. */
body.ioc-site .cv2-brand{font-size:17px;color:var(--ioc-g100);text-decoration:none}
body.ioc-site .cv2-footer .cv2-brand{color:var(--ioc-surface)}

/* CV2 · SC 1.4.10 FLOOR (CMS-D-172 W6). The comp's own mobile rules stack
   with bare `1fr` tracks, and a bare `1fr` is minmax(auto,1fr) — the
   min-content of a 45px display headline or a wide diagnostic card grows
   the track past a 320px viewport (measured: hero copy 341px, card 352px
   in a 305px client). minmax(0,1fr) + min-width:0 is the fix the kit uses
   for the same class elsewhere; word wrapping catches the residue. */
@media (max-width:767px){
  body.ioc-site .cv2-hero-in,
  body.ioc-site .cv2-promise,
  body.ioc-site .cv2-route-grid,
  body.ioc-site .cv2-plat-map,
  body.ioc-site .cv2-capabilities,
  body.ioc-site .cv2-outcomes,
  body.ioc-site .cv2-path,
  body.ioc-site .cv2-card .ioc-form-grid{grid-template-columns:minmax(0,1fr)}
  body.ioc-site .cv2-hero-copy,
  body.ioc-site .cv2-card,
  body.ioc-site .cv2-capability,
  body.ioc-site .cv2-route-card,
  body.ioc-site .cv2-card .ioc-field{min-width:0;max-width:100%}
  body.ioc-site .cv2-card{margin-inline:0}
  body.ioc-site .cv2-display,
  body.ioc-site .cv2-title{overflow-wrap:anywhere}
}

/* CV2 · SC 1.4.10 floor, round 2 (measured at 320px): the adoption panel's
   path kept a fixed track and its h4/step text refused to wrap; the header
   nav row would not break. Content is made to FIT — nothing is clipped. */
@media (max-width:767px){
  body.ioc-site .cv2-ai-panel{max-width:100%;min-width:0}
  body.ioc-site .cv2-ai-panel .cv2-path-wrap{max-width:100%;min-width:0}
  body.ioc-site .cv2-ai-panel .cv2-path{grid-template-columns:minmax(0,1fr);width:100%;min-width:0}
  body.ioc-site .cv2-ai-panel .cv2-path-step{min-width:0;width:auto;max-width:100%}
  body.ioc-site .cv2-path-wrap h4,
  body.ioc-site .cv2-path-step strong,
  body.ioc-site .cv2-path-step span{white-space:normal;overflow-wrap:anywhere}
  body.ioc-site .cv2-navwrap{flex-wrap:wrap;justify-content:flex-end;min-width:0}
  body.ioc-site .cv2-navwrap .cv2-btn{max-width:100%}
  body.ioc-site .cv2-header-in{flex-wrap:wrap}
}

/* SC 1.4.10 · THE HONEYPOT CONTAINMENT the a11y ratchet's own inventory
   prescribes ("Containing it … should take this ceiling from 24 to about
   3"). `.ioc-hp` is position:absolute WITHOUT an inset, so its 1px box sits
   at its STATIC position — the end of the form row, frequently past the
   right edge — and an absolute box beyond the edge extends the document
   scroll area even though its content is clipped. Pinning it to the form's
   origin removes the dominant narrow-reflow class site-wide. Here and not
   in infoc-cms.css: the kit sheet is byte-pinned (CMS-D-054); this sheet is
   the owned tiebreak layer. */
body.ioc-site .ioc-hp{left:0;top:0}

/* SC 1.4.10 · below the §AI page-clip guard (<768px) the plat-layers band's
   50%−50vw breakout is the only thing left overhanging (8px of EMPTY band at
   390, the measured §AI class). Down here the breakout buys nothing a 390px
   viewport can see, so it is retired rather than clipped — the band spans
   its container, no content moves, no scrollbar. */
@media (max-width:767px){
  body.ioc-site .ioc-plat-layers{width:100%;margin-left:0}
}

/* SC 2.5.8 · the UTILITY BAR's phone/email anchors measure 106x19 packed
   tighter than the 24px spacing exception — the one target class failing
   both of the criterion's own exceptions once the reflow debt stopped
   masking the check. Block padding lifts the HIT AREA to >=24px; the
   negative block margin keeps the bar's visual height unchanged.
   DELIBERATELY NO display DECLARATION. The first cut wrote
   display:inline-block here, and it broke the contact anchors on the live
   bar: it won the cascade over their display:inline-flex (§J, same
   specificity, earlier in the sheet), the anchor stopped being a flex
   container, and the frontend's Tailwind preflight (svg{display:block})
   stacked the 14px icon above its label — measured 41px anchor against the
   one-line 25px. It bought nothing anywhere: both clusters are flex
   containers (.ioc-utility-links §J, .ioc-utility-contact above), so their
   anchor flex ITEMS blockify to the same computed display with or without
   it, and padding grows a flex item's bounding box for the criterion just
   the same. utility-bar-contact-display.int.spec.ts pins the cascade
   winner. */
body.ioc-site .ioc-utility-contact a,
body.ioc-site .ioc-utility-links a{padding-block:4px;margin-block:-4px}

/* SC 1.4.3 + 2.5.8 · two below-the-fold findings the a11y suite's new
   reveal-sweep unmasked (they predate CMS-D-172; the pre-sweep scan measured
   pages in their unrevealed state and could not see them):
   · .ioc-plat-note printed white at opacity .55 — ~3.3:1 where the note
     crosses the blue accent card. Raised to .8 → ≥5.4:1 over the blue and
     ≥9:1 over the band.
   · .ioc-card-link is a 19px-tall target with a neighbour inside 24px on
     the talents cards. Same remedy as the utility bar: block padding lifts
     the hit area, the negative margin keeps the layout. */
body.ioc-site .ioc-plat-note{opacity:.8}
body.ioc-site .ioc-card .ioc-card-link{padding-block:4px;margin-block:-4px;margin-top:14px}

/* SC 1.4.3 · the aud selector's CURRENT item prints its 12px small line at
   the kit's opacity .82 over the accent fill — axe measures it under 4.5:1.
   Full opacity on the selected item only; unselected items keep the kit's
   treatment on their white ground (where it passes). Kit sheet is byte-
   pinned, so the override lives here. */
body.ioc-site .ioc-cta-aud>li[aria-current="true"] small{opacity:1}

/* CV2 · DESKTOP QUALITY PASS (owner review 2026-08-21, 1920px screenshots).
   Four measured repairs — file-late so they win their earlier ported twins:
   1) The display clamp capped: at 1920 the comp's own 6rem cap set
      "implementation" (96px, −0.065em) wider than the 512px copy column and
      the card clipped it mid-word. 4.6vw/5.1rem keeps every headline's
      longest word inside the column at any width; break-word is the safety
      net, inert while things fit.
   2) The situation card's HOVER lost its blue fill in the port while its
      text-color rules survived — hover printed near-white text on a white
      card. Hover and pressed now share one canonical treatment: blue fill,
      white h3, near-white body, pale chip/action.
   3) The campaign header wraps untidily at wide viewports — label, nav
      anchors and the CTA each broke to two lines. Single-line at >=768.
   4) The route-summary/back-of-card text inherits correctly. */
body.ioc-site .cv2-display{font-size:clamp(3.25rem,4.6vw,5.1rem);overflow-wrap:break-word}
body.ioc-site .cv2-route-card:hover,
body.ioc-site .cv2-route-card[aria-pressed="true"]{background:var(--ioc-blue);border-color:var(--ioc-blue);color:var(--ioc-surface)}
body.ioc-site .cv2-route-card:hover h3,
body.ioc-site .cv2-route-card[aria-pressed="true"] h3{color:var(--ioc-surface)}
body.ioc-site .cv2-route-card:hover p,
body.ioc-site .cv2-route-card[aria-pressed="true"] p{color:color-mix(in srgb, var(--ioc-surface) 88%, var(--ioc-blue))}
body.ioc-site .cv2-route-card:hover .cv2-rc-label,
body.ioc-site .cv2-route-card[aria-pressed="true"] .cv2-rc-label,
body.ioc-site .cv2-route-card:hover .cv2-rc-action,
body.ioc-site .cv2-route-card[aria-pressed="true"] .cv2-rc-action{color:var(--ioc-surface)}
@media (min-width:768px){
  body.ioc-site .cv2-label{white-space:nowrap}
  body.ioc-site .cv2-nav a{white-space:nowrap}
  body.ioc-site .cv2-navwrap .cv2-btn{white-space:nowrap}
}

/* CV2 · desktop pass, round 2 (both measured): "implementation" at the
   5.1rem cap is 567px in a 512px column — 4.5rem measures 500px and every
   page's longest headline word now fits at any width. And the dark bands'
   kicker inherited the base eyebrow's full blue (0,1,255 on black — near
   invisible); the light variant re-asserts its periwinkle here where the
   cascade can't lose it. */
body.ioc-site .cv2-display{font-size:clamp(3.25rem,4.6vw,4.5rem)}
body.ioc-site .cv2-eyebrow.cv2-eyebrow-light{color:color-mix(in srgb, var(--ioc-blue) 34%, var(--ioc-surface))}

/* CV2: an empty kicker must not print its lone dash. */
body.ioc-site .cv2-eyebrow:empty{display:none}

/* ============================================================
   CV2 · FORM-FIRST CARD + FOCUS TYPOGRAPHY + SITE FOOTER ROW
   (owner review 2026-08-21: "form is the main focus … remove all
   the clutter text … no proper padding … footer last row like the
   general home page footer").
   The card is now bar → fields → submit → one reply line. Field
   type is tuned for focus: quiet 12.5px/600 sans labels, 16px
   inputs (no mobile zoom), calm 16px rhythm, a real focus ring.
   The footer bottom row is the site footer's legal-row anatomy:
   one 64px flex row, brand+tagline left, © + links right with
   the same 20px gaps and 12.5px muted type.
   ============================================================ */
body.ioc-site .cv2-card-body{padding:24px}
body.ioc-site .cv2-card .ioc-form-grid{gap:16px}
body.ioc-site .cv2-card .ioc-field label{font-family:var(--ioc-sans);font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--ioc-text-primary);margin-bottom:8px}
body.ioc-site .cv2-card .ioc-field input,
body.ioc-site .cv2-card .ioc-field select,
body.ioc-site .cv2-card .ioc-field textarea{font-family:var(--ioc-sans);font-size:16px;line-height:1.4;padding:12px;border:1px solid color-mix(in srgb, var(--ioc-g100) 24%, var(--ioc-surface));background:var(--ioc-surface);color:var(--ioc-text-primary);width:100%}
body.ioc-site .cv2-card .ioc-field input:focus-visible,
body.ioc-site .cv2-card .ioc-field select:focus-visible,
body.ioc-site .cv2-card .ioc-field textarea:focus-visible{outline:2px solid var(--ioc-blue);outline-offset:0}
body.ioc-site .cv2-card .ioc-field textarea{min-height:96px}
body.ioc-site .cv2-card .ioc-field:has(input[type=checkbox]) label,
body.ioc-site .cv2-card .ioc-field .ioc-fhint{font-size:12px;font-weight:400;color:var(--ioc-g70);line-height:1.5}
body.ioc-site .cv2-card .ioc-form-actions{margin-top:24px}
body.ioc-site .cv2-card .ioc-form-actions button{font-size:16px;font-weight:700;padding:16px 24px;width:100%}
body.ioc-site .cv2-footer{padding:0}
body.ioc-site .cv2-footer .wrap.cv2-footer-in{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px;flex-wrap:wrap}
body.ioc-site .cv2-footer-brand{display:flex;align-items:center;gap:16px;margin:0}
body.ioc-site .cv2-footer-brand p{margin:0;font-size:12.5px;color:color-mix(in srgb, var(--ioc-surface) 72%, var(--ioc-g100))}
body.ioc-site .cv2-footer-links{display:flex;align-items:center;gap:16px;font-size:12.5px;color:color-mix(in srgb, var(--ioc-surface) 72%, var(--ioc-g100))}
body.ioc-site .cv2-footer-nav{display:inline-flex;align-items:center;gap:16px}
body.ioc-site .cv2-footer-nav a{color:inherit;text-decoration:none}
body.ioc-site .cv2-footer-nav a:hover{color:var(--ioc-surface)}
/* ── CV2 R2 (owner 2026-08-21): per-section perfection + the site footer legal row ── */
/* An icon slot the store leaves empty holds no space above the promise label
   (the comps' promise chips are text-only; a store-supplied icon still renders). */
body.ioc-site .cv2-promise-icon:has(use[href$=".svg#"]){display:none}
/* A two-column cell grid with an odd tail must not frame an empty cell:
   the last odd capability spans the full row. */
body.ioc-site .cv2-capabilities .cv2-capability:nth-child(odd):last-child{grid-column:1 / -1}
/* The campaign footer's LAST ROW is the site footer's legal row, verbatim. */
body.ioc-site .cv2-footer .wrap.cv2-footer-in{min-height:0;padding-block:24px 16px}
body.ioc-site .cv2-footer-legal{border-top:1px solid color-mix(in srgb, var(--ioc-surface) 16%, transparent)}
body.ioc-site .cv2-legal-row{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:12px}
body.ioc-site .cv2-legal-links{display:flex;align-items:center;flex-wrap:wrap;gap:16px;font-size:12.5px;color:color-mix(in srgb, var(--ioc-surface) 72%, var(--ioc-g100))}
body.ioc-site .cv2-legal-button{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
body.ioc-site .cv2-legal-button:hover{color:var(--ioc-surface);text-decoration:underline;text-underline-offset:4px}
body.ioc-site .cv2-legal-actions{display:flex;align-items:center;gap:16px}
body.ioc-site .cv2-social{display:flex;align-items:center;gap:8px}
body.ioc-site .cv2-social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--ioc-surface);color:var(--cv2-ink)}
body.ioc-site .cv2-social a:hover{background:var(--cv2-infoc-blue);color:var(--ioc-surface)}
body.ioc-site .cv2-social svg{display:block}
body.ioc-site .cv2-back-top{display:inline-flex;align-items:center;gap:8px;margin:0;border:0;padding:8px 12px;background:var(--ioc-surface);color:var(--cv2-ink);font-family:var(--ioc-sans);font-size:12.5px;font-weight:600;cursor:pointer}
body.ioc-site .cv2-back-top:hover{background:var(--cv2-infoc-blue);color:var(--ioc-surface)}
@media (max-width: 820px){
body.ioc-site .cv2-legal-row{flex-direction:column;align-items:flex-start;gap:16px;padding-block:16px}
body.ioc-site .cv2-legal-actions{width:100%;justify-content:space-between}
}
/* ── CV2 R3 (QA 2026-08-21, ISSUE-003): the campaign display heading's 3.25rem
   floor renders one word per line at phone widths and pushes the form nearly
   two screens down. Below 620px the floor steps down; the vw term keeps it
   fluid up to the old floor. Scale-snapped (2rem / 3.25rem bounds). ── */
@media (max-width: 620px){
body.ioc-site .cv2-display{font-size:clamp(2rem,9vw,3.25rem)}
}