/* GENERATED by scripts/copy-render-kit-runtime.mjs — do not edit by hand.
 * The marketplace.infoc.com site sheet (CMS-D-261): the canonical CMS-D-054 kit,
 * then forms, then slider, then the infoc-mkt skin LAST. No overrides.css,
 * no v6.css — the sites share nothing at the skin layer. */
/* 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;
  /* ONE placeholder colour for every form input on the site (owner direction
     2026-08-28). Placeholders were set FIVE different ways — g50, g60, g70,
     an on-brand tint and a raw rgba — and `.field input::placeholder` sat on
     g50 (#8d8d8d), which is 3.4:1 on white and FAILS WCAG AA for the hint text
     a visitor reads to know what to type.
     Built from the existing scale rather than a new literal: it lands ~#757575,
     4.8:1 on white. Lighter than the g60 the campaign forms used (5.7:1), so it
     reads as a hint and not as a filled value, while keeping real headroom over
     the 4.5:1 floor — the lightest fully safe grey is about #767676, so there
     is no room to go lighter than this and stay compliant. */
  --ioc-placeholder:color-mix(in srgb,var(--ioc-g50) 38%,var(--ioc-g60));
  --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-placeholder)}
.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-placeholder)}
.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}
/* The site-standard field had NO placeholder rule, so every .ioc-form on the
   site (the thin campaign landers, the chat panel) fell to the browser default
   -- black at 50% alpha, which is exactly the "hint reads as a value" report
   the shared token exists to end. The audit that found it was per-page, which
   is why a token that covered four field classes still missed the fifth. */
.ioc-field input::placeholder,.ioc-field textarea::placeholder{color:var(--ioc-placeholder)}
/* The two search boxes carry a STORE-backed placeholder (search.placeholder,
   with a registered fallback) and had no rule either. The coverage test in
   form-placeholder-contract found them; a class that styles its input must
   style its hint. */
.ioc-search-field input::placeholder,.search-field input::placeholder{color:var(--ioc-placeholder)}
.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-placeholder)}
.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)}

/* 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);
}

/* The success panel's REFERENCE and REPLY-BY lines (2026-09-04).
   The forms runtime injects both as <p class="ioc-form-ref"> after a
   successful submit, and until now that class had ZERO rules in any of the
   five concat parts, so a reference identifier rendered in Manrope at the
   same 16px as the sentence above it -- the one string a person may need to
   read back to us, set as prose.
   THREE THINGS HERE ARE LOAD-BEARING.
   (1) `p.ioc-form-ref` and not `.ioc-form-ref`: the generated correction
   layer emits `body.ioc-site .ioc-form-success p{color:...}` at (0,2,2), so
   a (0,2,1) rule loses on the element count before source order is ever
   consulted. `color` is deliberately NOT set here for the same reason -- it
   could not beat the dark-band rule at (0,4,2), and the inherited secondary
   grey is already correct.
   (2) `align-self:stretch`: the success panel is `align-items:flex-start`,
   so without it the divider spans only the text width, not the panel.
   (3) The adjacent-sibling rule: the runtime injects the class TWICE, so a
   plain `border-top` would paint a double divider between two meta lines.
   This lives in forms.css rather than the infoc.com skin on purpose -- it is
   in all three site concats, so infoc.ai and infoc.one get it too, and the
   win is by specificity rather than sheet order, which makes the placement
   safe either way. */
.ioc-form-success p.ioc-form-ref {
  align-self: stretch;
  border-top: 1px solid var(--ioc-border-subtle, #e0e0e0);
  padding-top: var(--ioc-s4, 12px);
  font-family: var(--ioc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.ioc-form-success p.ioc-form-ref + p.ioc-form-ref {
  border-top: 0;
  padding-top: 0;
}

/* The form summary is a section heading under the page title. */
.ioc-form-errors h2{margin:0 0 8px;font-size:15px;letter-spacing:-.01em}

/* NO BLUE BOX AROUND THE SUCCESS PANEL OR THE ERROR SUMMARY (owner report,
   2026-09-15). The runtime focuses `[data-success]` after a submit and
   `.ioc-form-errors` after a failed one, so a screen reader announces them.
   Both are tabindex="-1" CONTAINERS, not controls and not in the tab order,
   yet three rules painted a 2px house-blue box on them on every Site: the
   frozen kit's `.ioc-form-success:focus` / `.ioc-form-errors:focus` (ANY focus,
   so every mouse submit), each skin's `body.ioc-site :focus-visible` ring at
   (0,2,1), and the kit's focus box-shadow. The focus MOVE stays (it is the
   announcement); only the ring on these two containers goes. Every button,
   link and field keeps its ring, including "Send another" inside the panel.
   This sheet sits BEFORE every skin in each Site concat, so it wins by
   SPECIFICITY — (0,4,1) and (0,3,1) against (0,2,1) — never by order and never
   by !important. Pinned by `form-focus-target-ring.int.spec.ts`. */
body .ioc-form .ioc-form-success[data-success]:focus,
body .ioc-form .ioc-form-success[data-success]:focus-visible,
body .ioc-form .ioc-form-errors:focus,
body .ioc-form .ioc-form-errors:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Q22 (a): the consent dialog's notice link must read as a link (WCAG 1.4.1); it lives here because the canonical sheet infoc-cms.css is byte-frozen (CMS-D-054, CMS-D-205 ①). */
.sh-cookie-dialog .cd-body a{text-decoration:underline}

/* ============================================================
   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;
  }
}

/* CMS-D-261 — the AUTHORED skin for marketplace.infoc.com (INFOC Marketplace).
 *
 * WHAT THIS FILE IS. The fifth Site's own visual layer, served STANDALONE: the
 * concat is kit + forms + slider + this file LAST, with NO overrides.css and NO
 * v6.css — the sites share nothing at the skin layer (CMS-D-211 ①).
 *
 * PLAN 1 (this head) carries only the transport and the measured tokens.
 * PLAN 3 re-scopes the storefront's own `app/globals.css` onto this Site's
 * V100–V129 variant ids (`:where([data-variant-id="…"])`, never `:is`) and
 * declares the Manrope and mono faces with their measured usage. Values here
 * are from design/DESIGN.md §2 — measured on 2026-09-23, not chosen.
 *
 * NO `ioc-`-PREFIXED SELECTOR MAY APPEAR IN THIS SHEET (the skin contract). The shared
 * shell takes this Site's action colour through the `--ioc-*` custom
 * properties set on `body` below, as www.infoc.one does.
 */

/* -- Figtree ------------------------------------------------------------
 * The wordmark face. S4 refuses a font CDN, so it is self-hosted: the SAME two
 * committed woff2 files www.infoc.com, www.infoc.one and www.infoc.in already
 * serve — one URL, one cache entry, zero new bytes. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/infoc-one-cms/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/infoc-one-cms/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* -- The measured tokens (design/DESIGN.md §2) --------------------------- */
body {
  --mkt-paper: #ffffff;
  --mkt-canvas: #f6f6f8;
  --mkt-ink: #111111;
  --mkt-muted: #595959;
  --mkt-action: #0001ff;
  --mkt-hover: #0000c4;
  --mkt-border: #dedee5;
  /* The shared shell reads these; the Site's action colour IS house blue. */
  --ioc-blue: var(--mkt-action);
  --ioc-blue-hover: var(--mkt-hover);
}

/* -- Authored rules the generated layer cannot carry (CMS-D-261 plan 3) --- */
/* The masthead search label: visually hidden (:3910's .sr-only, which the shell does not ship). */
.mh__search-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The utility strip's separator glyph. :3910 draws it as a span INSIDE its
 * label: "Microsoft Cloud Solution Provider " + `.utility-dot` + " Singapore",
 * one span with a space either side of the dot. The layer carries the dot's
 * 7px margins (`.utility-dot` → `.ub__lab::after`); the two spaces are drawn
 * here, preserved at the end of the label's own box (measured: the label
 * group 263.1px wide on :3910, 258.3 without the spaces; "Singapore" starts
 * at x=246.6 on both at 1440 with them). */
.ub__lab::after { content: ' · '; white-space: pre; }
/* The utility strip's three groups (correction to the final review's P1
 * package, its concern 1). :3910's `.utility .shell` is flex + space-between
 * over THREE children — the label span, the email, "Back to INFOC" (capture
 * home.html) — so the email sits centred in the free space. The Com shell
 * nests the email in `.ub__l` with the label and the locale, and the way back
 * in `.ub__r`, so the mapped space-between saw two children and the email ran
 * straight on from "Singapore" (measured x=298.3 against :3910's 749 at 1440,
 * 282.3 against 541 at 1024). Neither wrapper contributes a box, so the flex
 * items are :3910's; the label and the locale are ONE span on :3910, so the
 * mapped 12px gap between them is cancelled; and the free space falls only
 * either side of the email — auto margins take it before space-between can,
 * and split it exactly as space-between splits it over three children. The
 * same two margins still hold the way back at the right edge when the email
 * is hidden (600px and below) and are inert when both anchors are (520px). */
.ub__l, .ub__r { display: contents; }
.ub__lab + .ub__loc { margin-left: -12px; }
.ub__loc { margin-right: auto; }
.ub__r a { margin-left: auto; }
/* The utility strip's outbound arrow: :3910 paints "Back to INFOC ↗", the ↗
 * an aria-hidden span after a space (final review audit-glyph-drop). Drawn
 * where the dot above is drawn; the `/ ''` alternative text keeps it out of
 * the accessible name, as aria-hidden does on :3910 (the first declaration
 * is the fallback for an engine without that syntax). */
.ub__r a::after { content: ' ↗'; content: ' ↗' / ''; }
/* -- The shell's icons (final review skin-01) ----------------------------
 * The Com shell renders every mark as `<svg class="ph"><use/></svg>` with no
 * width, height or viewBox (ComChromeShell.tsx `Ph`), and nothing in this
 * Site's concat sized them, so each fell back to the 300x150 replaced-element
 * default under the kit's `svg{display:block;max-width:100%}`: a 186px utility
 * bar round a giant envelope, a 152px masthead search. `1em` square is the
 * house base the sibling skins give `.ph`; the two this Site renders are then
 * set to :3910 exactly. :3910's utility strip has no icon at all, and its
 * search icon is an inline svg with width="21" height="21" (curl'd
 * home.html) on the baseline, centred by the button's own text alignment —
 * the app's Tailwind preflight sets svg `vertical-align: middle`, which
 * dropped it 5px (measured dy 10px in the button on :3910). */
svg.ph { width: 1em; height: 1em; }
.ub svg.ph { display: none; }
.mh__search button svg.ph { display: inline; vertical-align: baseline; width: 21px; height: 21px; }
/* The carousel's slide wrapper contributes no box, so :3910's stage rules see the photos as direct children. */
.cloud-hero-slide { display: contents; }
/* A slide that is not active hides its services line and caption — EXCEPT the
 * first slide while no slide is active yet (final review seams-1). The server
 * HTML marks no slide active (one shared item template, CMS-D-100's
 * server-rendered first slide); only the deferred island's show(0) adds
 * `.is-active`. :3910's server HTML already paints slide 1, so with JavaScript
 * off, blocked or still loading this Site must too: the first slide stands in
 * as active until the island marks one, and the island's own marking then
 * takes over with no change on screen. */
.cloud-hero-slide:not(.is-active):not(:first-child) .cloud-hero-services,
.cloud-hero-slide:not(.is-active):not(:first-child) .cloud-hero-caption,
.cloud-hero-stage:has(.is-active) > .cloud-hero-slide:not(.is-active) .cloud-hero-services,
.cloud-hero-stage:has(.is-active) > .cloud-hero-slide:not(.is-active) .cloud-hero-caption { display: none; }
main#content .cloud-hero-stage:not(:has(.is-active)) > .cloud-hero-slide:first-child > .cloud-hero-photo { opacity: 1; }
/* :3910 renders each slide photo as a Next Image in FILL mode (inline
 * `position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;
 * color:transparent`, curl'd home.html). The media slot renders a static
 * <img> at its 1536x1024 attributes instead, so without these the photo kept
 * its 3:2 box, :3910's `object-fit:cover` had nothing to crop, and a navy
 * band showed under it on every phone (final review
 * gap0-skin-intermediate-widths-01). */
main#content .cloud-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; color: transparent; }
/* Bindings cannot carry markup (P3-R10): a bound hard break; joined
 * paragraphs. Every channel the composer joins with a blank line renders it
 * (final review seams-4): the prose and guide section bodies, the empty
 * state's sentence and a card grid's lead. */
.mkt-br,
main#content .prose-page section p,
main#content .guide-page section p,
main#content .page-empty > p,
main#content .home-section-head > p { white-space: pre-line; }
/* :3910 hides the how-it-works heading's <br> at 800px and below (its
 * `.how-section h2 br{display:none}`, carried in the layer); a bound break is
 * a newline, not a <br>, so the layer's rule matches nothing here and the
 * newline must stop breaking instead (final review
 * gap0-skin-intermediate-widths-03). */
@media (max-width: 800px) {
  main#content .how-section h2.mkt-br { white-space: normal; }
}
/* An empty binding renders no box. */
main#content .eyebrow:empty, main#content p:empty, main#content .prose-link:has(> a[href="#"]:empty), main#content a.button[href="#"]:empty { display: none; }

/* -- This Site's ink (CMS-D-261 plan 3 Task 9 fix 1) ---------------------
 * CMS-D-092/093's admin-governed typography block is injected per-Site at
 * runtime by `[siteKey]/layout.tsx`'s `<style data-one-typography>` tag. Its
 * source, `siteTypographyStyleSheet` (packages/standard), reads a
 * `typography` row that belongs to the DEFAULT Site only — `globalForSite`
 * refuses it for any other Site — so for siteKey `infoc-mkt` it falls back to
 * `TYPOGRAPHY_DEFAULTS` and injects `--ioc-text-primary`/`--ioc-footer-text`
 * as `#000000` (measured: computed `color` is `rgb(0, 0, 0)` on `body`, `h1`,
 * `.site-header`, every prose element and the footer's own heading). :3910's
 * own value is `--ink`, `design/live-capture/globals.css:32` (`#111111`) —
 * already this Site's own `--mkt-ink` above. Every other token in the
 * injected block (39 total: surface, accent, header/footer surfaces, family
 * accents, …) was compared against the measured defect list; none but these
 * two manifest as a real (non-visually-equivalent) difference.
 *
 * The injected block declares on `body` scoped by the shared ioc-site class
 * (specificity 0,1,1); a bare
 * `body{}` rule here would lose that tie outright. This follows the sibling
 * skins' own precedent EXACTLY — `sites/infoc.one/src/skin/infoc-one.css`'s
 * `body[class]` trick (CMS-D-215): an attribute selector ties the injected
 * block's specificity, and this sheet loads after it in document order (like
 * every sibling skin), so the tie is ours. Measured after: computed `color`
 * on `body`, a prose `p` and a footer `p` all read `rgb(17, 17, 17)`.
 *
 * The SAME rule also carries `background: transparent` (Task 9 fix 5, the
 * re-grade's last token defect): kit.css's own P36/CMS-D-092 consumer, the
 * same `body` rule scoped by the shared ioc-site class that consumes
 * `--ioc-text-primary` above, ALSO paints `background:var(--ioc-white)` —
 * body opaque white; :3910 never sets a background on its own `<body>` at all
 * (measured:
 * `transparent`, the html root's white showing through — both render
 * identically white, but the audit compares literal computed values). Ties
 * the same (0,1,1) specificity by the same `body[class]` trick and wins by
 * load order, restoring :3910's own transparent-body mechanism exactly. */
body[class] {
  --ioc-text-primary: var(--mkt-ink);
  --ioc-footer-text: var(--mkt-ink);
  background: transparent;
}

/* -- Resets: properties the kit paints on the mapped chrome / canonical
 * interiors that :3910 leaves at their inherited or UA value (measured) --- */
/* kit.css:2054 — the render-kit's unscoped legacy "V1 landing page" block
 * (the `Legacy --ioc--* names alias…` section, kit.css:2037-2298) sets a bare
 * `footer{padding-top:4rem}` with no class/attribute scope, so it paints over
 * the Com shell's real <footer> (mapped from :3910's `.site-footer`,
 * CHROME_MAP). :3910's own `.site-footer` never sets `padding-top` at all
 * (measured: computed 0px on /help) — its `background`/`color` ARE set
 * explicitly by :3910 and are already carried correctly by this Site's
 * mapped rules (measured: both origins compute `rgb(0, 0, 0)` /
 * `rgb(255, 255, 255)` already; only `padding-top` differs). OWED: scoping
 * that legacy block out of the bare `footer`/`h1..h3`/`p`/`a`/etc. selectors
 * is a render-kit change against the byte-pinned kit sha — recorded here,
 * not done in this Site's skin. */
footer { padding-top: 0; }
/* The kit's `.wrap` (max-width + a 32px gutter at every width) is the one
 * container the shell puts round the footer's two rows; :3910 has none — its
 * `.footer-main` and `.footer-bottom` each ARE a `.shell`, and the live layer
 * carries that `.shell` rule onto `.ft`/`.ft__bot` (final review skin-02). So
 * the wrap gives the rows the full footer width to measure from, and the
 * footer sits at :3910's 40/24/16px gutter (measured x=40/w=1360 at 1440,
 * x=16/w=358 at 390; was x=32 at both). */
footer > .wrap { max-width: none; padding-inline: 0; }
/* The shell always emits `<div class="ft__soc">` for socials and a
 * back-to-top link; this Site declares neither (`socials: []`, no
 * `backToTop`), so the div is always empty — and :3910's bottom row has three
 * children, not four, so the mapped `justify-content: space-between` put the
 * legal links and the locale line in the wrong places (final review
 * gap0-skin-intermediate-widths-02). An empty one renders no box. */
.ft__soc:empty { display: none; }
/* Keyboard focus. The kit's `:focus-visible{outline:none;box-shadow:…}`
 * (0,1,0) reaches every focusable element; :3910's ring is its outline alone
 * (measured: box-shadow none on :3910, a white-2px + blue-5px double ring
 * here, on a main button, a nav link, a footer link and a utility link —
 * final review skin-07). The outline and its 4px offset come from :3910's
 * own `:focus-visible` rules, which the layer carries into main and onto the
 * chrome; only the kit's box-shadow needs clearing. */
main#content :focus-visible, .ub :focus-visible, .mh :focus-visible, footer :focus-visible { box-shadow: none; }
/* The app's Tailwind preflight (`(frontend)/globals.css`, @layer base) zeroes
 * every button's padding; :3910 has no preflight, so a button it never pads
 * keeps Chrome's UA `padding: 1px 6px` (measured: "+ Compare plan" 104px wide
 * on :3910 and 92px here; the masthead search button's padding-left 6px
 * against 0 — final review skin-08). Restored at that UA value, low enough
 * that every :3910 rule which pads a button, (1,1,x) in main, still wins. */
main#content button, .mh__search button { padding: 1px 6px; }
/* The masthead brand turns blue on hover on :3910: its `.brand{color:#000}`
 * is (0,1,0) and its global `a:hover{color:var(--blue)}` (0,1,1) outranks it.
 * The layer carries both, but the brand needs `body a.wm` (0,1,2) to beat the
 * kit's (0,1,2) `a{color:inherit}` scoped by the shared ioc-site body class,
 * which ties the chrome copy of `a:hover` and wins on source order — the one
 * place the builder's anchor
 * qualification inverts :3910's order (measured: rgb(0,1,255) on :3910,
 * rgb(0,0,0) here; final review skin-02). Restored at :3910's value. Since
 * CMS-D-264 the letters are www.infoc.com's master lockup, code-owned artwork
 * no colour rule repaints (CMS-D-066), so the hover now reaches the service
 * word alone. The footer's brand stays white on hover on both, by :3910's own
 * `.site-footer a:hover{color:white}`. */
.mh a.wm:hover { color: var(--blue); }
/* CMS-D-264 (owner, 2026-09-28: "logo to follow infoc.com logo"): both brand
 * anchors carry www.infoc.com's master lockup (`chrome.ts` `mark`), at
 * CMS-D-240's one INFOC size — 85px wide, 74px at ≤560px, masthead = footer —
 * the values www.infoc.com's own `.wm__lockup` rule states. Restated here
 * because this skin may name no kit-namespace class (CMS-D-211 ①: the sites share
 * the artwork, served under /infoc-one-cms like the favicon, never a skin
 * rule). `flex: none` keeps the anchor's flex row from shrinking it. */
body a.wm .wm__lockup { display: block; flex: none; width: 85px; height: auto; }
@media (max-width: 560px) { body a.wm .wm__lockup { width: 74px; } }
/* The brand BOX stays :3910's: its letters are a 21px Figtree line at
 * line-height 1.5, a 31.5px box at both audit viewports (measured on /help,
 * 2026-09-28), and at 390px that box sets the masthead's first row. The lockup
 * is 25.83px tall (22.48px at <=560px), which dropped the 390 masthead 9px
 * (155.48 against 164.5, the wave-3 basket deferred). Held on both anchors, so
 * the footer column keeps :3910's rhythm too; the anchors centre their row. */
body a.wm { min-height: 31.5px; }
/* :3910's `.footer-main h2` (mapped to `.ft h5`) never sets `line-height` on
 * its own class rule either — font-size/letter-spacing/color/font-weight all
 * already match exactly (measured on /help). Its measured 14.9568px (at the
 * matching 13.12px font-size, a 1.14 ratio) comes from a SEPARATE, unrelated
 * `h1,h2,h3{line-height:1.14}` tag rule elsewhere in :3910's capture — this
 * Site's shell renders the same footer heading as an `<h5>` (ComChromeShell),
 * which that rule never targets, and the footer sits outside `main#content`
 * besides, so the per-selector chrome map has no way to carry it. Not a
 * kit-legacy leak: this Site's own `.ft h5` line-height is simply unset and
 * falls back to the inherited body value (1.5) instead. Carried directly
 * since the ratio is the measured fact, not a guess. */
.ft h5 { line-height: 1.14; }
/* The kit's canonical `.eyebrow{text-transform:uppercase}` (CMS-D-054,
 * code-owned block interior) differs from :3910's own eyebrow, which is
 * typed in caps directly in its copy and never transforms (measured:
 * text-transform: none on every `.eyebrow` probed on :3910, including the
 * one whose text is already empty on this Site — a separate, unrelated
 * binding gap). CMS-D-054 protects a canonical block's MARKUP; a Site skin
 * styling one of its own canonical interiors is exactly what a skin is for.
 *
 * The same kit block leaks more than the transform (final review skin-03): the
 * layer's uniform prefix outranks the kit only for properties :3910 DECLARES,
 * and :3910 declares no display, alignment or gap on `.eyebrow` and no
 * ::before at all — so every eyebrow was a flex row led by the kit's 32x2px
 * blue bar, its text 44px right of :3910's. :3910's measured values: display
 * block, ::before none. Its own `.hero-copy .eyebrow{display:flex}` is
 * (1,2,0) in the layer and still wins where it applies. Likewise the kit's
 * `.faq-list{border-top}` (a 1px near-black rule over /help's FAQ; :3910
 * none) and its `.search-field{position:relative;width:min(100%,28rem)}` /
 * `.search-field input{height:3.5rem}` (a 56px listing search where :3910's
 * is 44px, and a 448px cap at 481-520px): each reset to the value :3910
 * computes because it never sets the property. The asset-delivery spec pins
 * the shared-class list so the next shared class cannot leak silently. */
main#content .eyebrow { text-transform: none; }
main#content .eyebrow { display: block; align-items: normal; gap: normal; }
main#content .eyebrow::before { content: none; }
main#content .faq-list { border-top: 0; }
main#content .search-field { position: static; width: auto; }
main#content .search-field input { height: auto; }
/* -- The split prose and guide pages (final review skin-04, skin-05) -------
 * :3910 renders a prose page (/privacy, /licensing, /help) or a guide post as
 * ONE `.prose-page`/`.guide-page` element carrying ONE padding-block (60/80px,
 * 35/50px at 520px and below; 32/64px for a guide). The composer splits it
 * into two to four blocks and every block root keeps the base class, so the
 * padding repeated at each seam: +140px per seam on the prose pages, +96px on
 * a guide. Each split root takes only its share: the head its top, the close
 * or action row its bottom, a middle block neither. The body block is shared
 * by both page kinds (`shell <band> prose-page--body`). One class of the pair
 * more than the layer's `main#content .prose-page` so the share wins at every
 * width. */
main#content .prose-page.prose-page--head,
main#content .guide-page.guide-page--head { padding-bottom: 0; }
main#content .prose-page.prose-page--body,
main#content .guide-page.prose-page--body,
main#content .prose-page.prose-page--options { padding-block: 0; }
main#content .prose-page.prose-page--close,
main#content .prose-page.prose-page--actions,
main#content .guide-page.guide-page--close { padding-top: 0; }
/* /help nests the two classes on :3910 (`div.shell > article.prose-page`), so
 * its 850px column sits at the shell's LEFT edge; /privacy and /licensing put
 * both on one element, which centres it. /help's blocks reuse the one-element
 * roots, so its column was centred (x=295 at 1440 against :3910's 40) while
 * its FAQ band stayed at 40. Only /help renders the contact-options block
 * (B-22-V100, `.prose-page--options`), so a page carrying it takes the
 * shell's left edge at each of :3910's `.shell` widths (80/48/32px, the
 * layer's 1150px and 520px steps): margin 40/24/16px, the right margin still
 * auto. CSS only; no composer change. */
main#content:has(.prose-page--options) .prose-page { margin-left: 40px; }
@media (max-width: 1150px) {
  main#content:has(.prose-page--options) .prose-page { margin-left: 24px; }
}
@media (max-width: 520px) {
  main#content:has(.prose-page--options) .prose-page { margin-left: 16px; }
}
/* The footer blurb (P3-R10 iii): a bound `\n` cannot carry markup, so a
 * multi-line blurb needs `white-space: pre-line` to render its break. The
 * narrowest hook: `ComChromeShell.tsx`'s footer wordmark anchor
 * (`.wm.ft__wm`) is immediately followed by the blurb `<p>` (no class of its
 * own) in the same column — `.ft__wm + p` hits only that paragraph. Inert
 * until the chrome's own `\n` binding lands (a separate Task 1 fix); this
 * rule alone changes nothing today. */
.ft__wm + p { white-space: pre-line; }
/* packages/render-kit/assets/infoc-cms.css:2072 (served as kit.css) carries a
 * legacy block-library rule: `.empty-state{display:none}` with a companion
 * `.empty-state.visible{display:block}` this Site never toggles. :3910's own
 * captured `.empty-state` rule (padding/background/border/border-radius) never
 * sets `display` either (measured: /quote's `.empty-state.page-empty`
 * computes `display: block` on :3910 — the kit's own hide is what's wrong,
 * not a missing :3910 value), so under the uniform prefix the kit's hide is
 * the only declaration for that property and wins. Same class of fix as the
 * other kit-neutralising resets above: the value is :3910's measured computed
 * state, not a guess. */
.empty-state { display: block; }
/* :3910 ships no nav-collapse toggle or off-canvas drawer at all (measured at
 * 390×844: its `.header-inner` is a three-row grid and the nav simply wraps
 * onto the grid's third row, still fully visible — no control, nothing to
 * open). The fidelity contract (the end state is EXACTLY :3910) wins over the
 * plan's earlier V7 nav-collapse port (Task 9 fix 5, retiring fixes 2 and 4).
 * Hidden, not removed: the shell renders the toggle unconditionally; this
 * Site's islands bundle carries no handler for it (final review hygiene-2),
 * so nothing opens it. The drawer (`.sh-drawer#mobile-drawer`, Overlays.tsx) needs no rule:
 * it is off-canvas and `inert` by the shell's own CSS and nothing opens it.
 * (An earlier `.mm{display:none}` here named `.mm` the drawer; `.mm` is the
 * masthead's MEGA PANEL, ComChromeShell.tsx's MegaPanel, which this Site's
 * five plain nav links never render — it hid nothing, and would have hidden
 * a future panel silently. Removed: final review, parked T9.) */
.navtog { display: none; }
/* The toggle's group, `.mh__r`, contributes no box, as `.ub__l`/`.ub__r` above
 * contribute none (CMS-D-266, found by Task D10's audit rehearsal). The shell
 * renders it unconditionally, and on this Site it holds only the toggle hidden
 * above (chrome.ts declares no `search` link and no `cta`; :3910's
 * `.header-inner` has neither). The layer makes `.mh__in` :3910's grid, so the
 * empty box was a fifth grid item, auto-placed into an implicit row of height
 * 0 that still took one row gap: the masthead measured 150px against :3910's
 * 134 at 1440 (16px gap) and 194 against 182 at 390 (12px), every child box
 * already :3910's. Unwrapped, the grid items are :3910's four (measured: 134
 * and 182 on /help, /subscriptions and a product page, no child moved). Not
 * `display: none`: a control this group renders later still shows. */
.mh__r { display: contents; }
/* CMS-D-265 (owner, 2026-09-29: "the product logo … is missing … fix the
 * missing" — the answer to CMS-D-261 §9 item 1): the Microsoft product marks
 * :3910 draws, from its own files (served unchanged under
 * /infoc-one-cms/products/). ONE mechanism for every context: the catalogue
 * cards and product pages (React) and the page templates (home tiles, need
 * cards, guide art) all render `.shop-product-icon.large[data-mkt-icon=<key>]`
 * — the classifier's key (`productIconFor`, :3910's own name rule) or the
 * extracted one — and a template cannot branch its markup, so the key is
 * painted here over the same 68×64 box and the fallback shape is hidden. The
 * geometry is :3910's, measured: one mark is a 52×52 image centred in the box;
 * the suite is `.suite-icons` (68×54, centred) of three 32px images at x 0, 19
 * and 38, the middle one lifted 9px (`translateY(-9px)`, which also paints it
 * over both neighbours — hence first in the list), so y 16 / 7 / 16. The
 * generic shapes (cloud, shield, app) stay drawn. */
main#content .shop-product-icon[data-mkt-icon="azure"] { background-image: url('/infoc-one-cms/products/azure.svg'); }
main#content .shop-product-icon[data-mkt-icon="dynamics-365"] { background-image: url('/infoc-one-cms/products/dynamics-365.webp'); }
main#content .shop-product-icon[data-mkt-icon="power-bi"] { background-image: url('/infoc-one-cms/products/power-bi.svg'); }
main#content .shop-product-icon[data-mkt-icon="teams"] { background-image: url('/infoc-one-cms/products/teams.svg'); }
main#content .shop-product-icon[data-mkt-icon="defender"] { background-image: url('/infoc-one-cms/products/defender.svg'); }
main#content .shop-product-icon[data-mkt-icon="onedrive"] { background-image: url('/infoc-one-cms/products/onedrive.svg'); }
main#content .shop-product-icon[data-mkt-icon="outlook"] { background-image: url('/infoc-one-cms/products/outlook.svg'); }
main#content .shop-product-icon[data-mkt-icon="powerpoint"] { background-image: url('/infoc-one-cms/products/powerpoint.svg'); }
main#content .shop-product-icon[data-mkt-icon="onenote"] { background-image: url('/infoc-one-cms/products/onenote.svg'); }
main#content .shop-product-icon[data-mkt-icon="excel"] { background-image: url('/infoc-one-cms/products/excel.svg'); }
main#content .shop-product-icon[data-mkt-icon="word"] { background-image: url('/infoc-one-cms/products/word.svg'); }
main#content .shop-product-icon[data-mkt-icon="azure"],
main#content .shop-product-icon[data-mkt-icon="dynamics-365"],
main#content .shop-product-icon[data-mkt-icon="power-bi"],
main#content .shop-product-icon[data-mkt-icon="teams"],
main#content .shop-product-icon[data-mkt-icon="defender"],
main#content .shop-product-icon[data-mkt-icon="onedrive"],
main#content .shop-product-icon[data-mkt-icon="outlook"],
main#content .shop-product-icon[data-mkt-icon="powerpoint"],
main#content .shop-product-icon[data-mkt-icon="onenote"],
main#content .shop-product-icon[data-mkt-icon="excel"],
main#content .shop-product-icon[data-mkt-icon="word"] { background-position: center; background-size: 52px 52px; background-repeat: no-repeat; }
main#content .shop-product-icon[data-mkt-icon="suite"] { background-image: url('/infoc-one-cms/products/excel.svg'), url('/infoc-one-cms/products/outlook.svg'), url('/infoc-one-cms/products/word.svg'); background-position: 19px 7px, 38px 16px, 0 16px; background-size: 32px 32px; background-repeat: no-repeat; }
main#content .shop-product-icon[data-mkt-icon="azure"] > svg,
main#content .shop-product-icon[data-mkt-icon="dynamics-365"] > svg,
main#content .shop-product-icon[data-mkt-icon="power-bi"] > svg,
main#content .shop-product-icon[data-mkt-icon="teams"] > svg,
main#content .shop-product-icon[data-mkt-icon="defender"] > svg,
main#content .shop-product-icon[data-mkt-icon="onedrive"] > svg,
main#content .shop-product-icon[data-mkt-icon="outlook"] > svg,
main#content .shop-product-icon[data-mkt-icon="powerpoint"] > svg,
main#content .shop-product-icon[data-mkt-icon="onenote"] > svg,
main#content .shop-product-icon[data-mkt-icon="excel"] > svg,
main#content .shop-product-icon[data-mkt-icon="word"] > svg,
main#content .shop-product-icon[data-mkt-icon="suite"] > svg { visibility: hidden; }
/* Commerce parity (2026-09-29 comparison, reproduced by its skeptics) ①: the
 * kit parks the closed shell drawer at `translateX(102%)` with `box-shadow:
 * -2rem 0 5rem rgba(0,0,0,.18)` (infoc-cms.css:381, canonical and pinned), so
 * the shadow painted a ~100px grey fade down the right edge of every page
 * (measured: the drawer's left edge at 1449 on a 1440 viewport). Nothing opens
 * the drawer on this Site; the shadow belongs to the open state. */
body .sh-drawer:not(.open) { box-shadow: none; }
/* ②: :3910's comparison lists keep the browser's list defaults (disc markers,
 * a 1em block margin: 13.12px at the table's size); the app's preflight
 * (`ol,ul{list-style:none}`, `*{margin:0}`) removed both, so the features ran
 * into the billing unit and the details link (the table measured 245px against
 * 271). The layer already carries :3910's 18px indent. */
main#content .comparison-scroll ul { list-style: disc; margin-block: 1em; }
/* ③: the skip link at :3910's values (`globals.css:131-143` plus its global
 * `:focus-visible` outline, recoloured to var(--blue) by its line 1850). The builder drops `.skip-link` (the root layout's
 * link is outside every mapped region), so the kit's rule governed it and the
 * kit's site-scoped `a{color:inherit}` turned its text #111 on #0001ff — about
 * 2.2:1. `body a.skip-link` (0,1,2) ties that kit rule and wins by loading
 * last; the focused rule (0,2,2) outranks the kit's `.skip-link:focus-visible`
 * ring. */
body a.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--paper); color: var(--blue); border: 2px solid var(--blue); font: inherit; transition: none; }
body a.skip-link:focus, body a.skip-link:focus-visible { top: 12px; box-shadow: none; outline: 3px solid var(--blue); outline-offset: 4px; }

/* CMS-D-266 — the basket renders where :3910 renders it: the button in the
 * masthead, the tray, drawer and live region after the page footer (its
 * BasketProvider wraps the whole body). The layer reaches them through
 * `body .basket-*` and the `body :where(.mh__in, .basket-dialog, .basket-tray)`
 * copies (build-skin-layer.mjs 1b), so the kit leaks the main#content resets
 * above neutralise are neutralised in the drawer too, at the same measured
 * values; the drawer's buttons get the same UA padding floor. */
body :where(.basket-dialog) .eyebrow { text-transform: none; }
body :where(.basket-dialog) .eyebrow { display: block; align-items: normal; gap: normal; }
body :where(.basket-dialog) .eyebrow::before { content: none; }
/* :3910's global `p { margin: 0 }` reaches main's eyebrow (main#content p beats the
 * kit's `.eyebrow{margin:0 0 1.25rem}`) but not the drawer's, where its copy under
 * BASKET_SCOPE (0,0,2) loses to the kit class (0,1,0): :3910 computes 0 there. */
body :where(.basket-dialog) .eyebrow { margin: 0; }
.basket-dialog :focus-visible, .basket-tray :focus-visible { box-shadow: none; }
.basket-dialog button, .basket-tray button { padding: 1px 6px; }
/* The kit's body sets `text-rendering: optimizeLegibility` and `-webkit-font-smoothing:
 * antialiased`; :3910 sets neither (computed `auto` on both), and the legibility mode kerns
 * the tray's label 0.03px wider, which rounds its box to 114px where :3910's is 115px at 390px
 * (measured, task review). Scoped to the tray, the one place the difference was measured. */
.basket-tray { text-rendering: auto; -webkit-font-smoothing: auto; }
/* The drawer's own <footer> (:3910's `.basket-panel > footer`) is NOT the page
 * footer, but the chrome map sends :3910's `.site-footer` rules to the bare
 * `footer` element and the kit's legacy block styles bare `footer` too, so
 * both reach it: a dark band, white hover underlines, a white focus ring.
 * :3910 computes that footer transparent on the white panel, in the dialog's
 * ink, its Continue link with no hover underline and the page's blue ring. */
body .basket-panel > footer { background: transparent; color: inherit; }
body .basket-panel > footer a:hover { text-decoration: none; }
body .basket-panel > footer :focus-visible { outline-color: var(--blue); }
/* The kit's `.contact-form{display:grid;grid-template-columns:1fr 1fr}`:
 * /quote's request form (CMS-D-266) is the first `.contact-form` this Site
 * renders; :3910 declares display and gap but no columns, so the kit's two
 * columns would pair every label with the next. :3910 computes `none`. */
main#content .contact-form { grid-template-columns: none; }

/* BEGIN LIVE LAYER */
/* generated by scripts/build-skin-layer.mjs from design/live-capture/globals.css (sha256 809f49b6fb9354da67c5be88ff9750f2f17c144f19d171cfe9e3fd184c7ea9ef) — DO NOT EDIT BY HAND */
/* every body selector begins with main#content: :3910's relative specificity is preserved because the prefix is uniform, and the kit's bare-class rules inside main are outranked for every property :3910 declares; kit properties :3910 leaves unset are neutralised in the authored head above (eyebrow, faq-list, search-field, empty-state, the focus ring's box-shadow, the button padding) */
/* dropped: .skip-link | .skip-link:focus | .sr-only */
/* unmapped chrome (not shipped): .brand-dot */
/* emitted twice, scoped into main AND onto the chrome (.shell onto .ub__in/.mh__in/.ft/.ft__bot; global element rules under body :where(.ub, .mh, footer)): .shell | :focus-visible | a | a:hover | button | button:disabled | input | input::placeholder | label | p */
/* basket (CMS-D-266): emitted once under body: .basket-button | .basket-button > span:first-child | .basket-button > span:last-of-type | .basket-button b | .basket-button:hover | .basket-dialog | .basket-dialog::backdrop | .basket-panel | .basket-panel > footer | .basket-panel > footer > p | .basket-panel > header | .basket-panel h2 | .basket-scroll | .basket-tray | .basket-tray .button | .basket-tray > div | .basket-tray > div > span | .basket-tray strong; copied under body :where(.mh__in, .basket-dialog, .basket-tray): .button | .button.primary | .button.primary:hover | .button.secondary | .button.secondary:hover | .empty-state | .empty-state p | .eyebrow | .icon-button | .icon-button:hover | .line-controls | .line-controls input | .line-controls label | .line-controls select | .muted | .quote-line-title | .quote-line-title .icon-button | .quote-line-title > a | .quote-lines | .quote-lines .small | .quote-lines > li | .sku-reference | .small | .text-button | :focus-visible | a | a:hover | button | button:disabled | h2 | h3 | input | input::placeholder | label | p | select */
/* enquiry band (CMS-D-266 plan 3b): copied under body .enquiry-band, .contact-form mapped onto the band's form: .contact-form | .contact-form label | .quote-page | .shell | .sku-reference */
/* NO nav-collapse mechanic (Task 9 fix 5): :3910 wraps its nav at phone widths and ships no toggle — the authored head above hides the shell's toggle unconditionally; the shell's drawer (.sh-drawer) stays off-canvas and inert by the shell's own CSS */
/* -- :3910 globals.css: chrome mapped onto the shell, pages scoped under main#content -- */
@font-face { font-family: 'Figtree';
  src: url('/infoc-one-cms/fonts/figtree-latin.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap; }
@font-face { font-family: 'Manrope';
  src: url('/fonts/infoc-modern-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap; }
@font-face { font-family: 'INFOC Mono';
  src: url('/fonts/infoc-mono-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap; }
@font-face { font-family: 'INFOC Mark';
  src: url('/fonts/infoc-mark-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; }
:root { --canvas: #f6f6f8;
  --paper: #fff;
  --ink: #111111;
  --muted: #595959;
  --blue: #0001ff;
  --blue-dark: #0000c4;
  --line: #dedee5;
  --mint: #0b6658;
  --radius: 0px;
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  line-height: 1.5; }
* { box-sizing: border-box; }
html { scroll-behavior: auto;
  scroll-padding-top: 24px; }
body { margin: 0; }
main#content button, body :where(.ub, .mh, footer) button, body :where(.mh__in, .basket-dialog, .basket-tray) button, main#content input, body :where(.ub, .mh, footer) input, body :where(.mh__in, .basket-dialog, .basket-tray) input, main#content select, body :where(.mh__in, .basket-dialog, .basket-tray) select, main#content textarea { font: inherit; }
main#content button, body :where(.ub, .mh, footer) button, body :where(.mh__in, .basket-dialog, .basket-tray) button, main#content a, body :where(.ub, .mh, footer) a, body :where(.mh__in, .basket-dialog, .basket-tray) a, main#content input, body :where(.ub, .mh, footer) input, body :where(.mh__in, .basket-dialog, .basket-tray) input, main#content select, body :where(.mh__in, .basket-dialog, .basket-tray) select, main#content textarea { -webkit-tap-highlight-color: transparent; }
main#content button, body :where(.ub, .mh, footer) button, body :where(.mh__in, .basket-dialog, .basket-tray) button { cursor: pointer; }
main#content button:disabled, body :where(.ub, .mh, footer) button:disabled, body :where(.mh__in, .basket-dialog, .basket-tray) button:disabled { cursor: wait;
  opacity: 0.65; }
main#content a, body :where(.ub, .mh, footer) a, body :where(.mh__in, .basket-dialog, .basket-tray) a { color: inherit;
  text-decoration: none; }
main#content p, body :where(.ub, .mh, footer) p, body :where(.mh__in, .basket-dialog, .basket-tray) p, main#content h1, main#content h2, body :where(.mh__in, .basket-dialog, .basket-tray) h2, main#content h3, body :where(.mh__in, .basket-dialog, .basket-tray) h3 { margin: 0; }
main#content h1, main#content h2, body :where(.mh__in, .basket-dialog, .basket-tray) h2, main#content h3, body :where(.mh__in, .basket-dialog, .basket-tray) h3 { line-height: 1.14;
  letter-spacing: -0.035em; }
main#content h1 { font-size: clamp(2.25rem, 4.7vw, 4rem);
  font-weight: 650; }
main#content h2, body :where(.mh__in, .basket-dialog, .basket-tray) h2 { font-size: clamp(1.65rem, 2.6vw, 2.35rem);
  font-weight: 650; }
main#content h3, body :where(.mh__in, .basket-dialog, .basket-tray) h3 { font-size: 1.1rem;
  font-weight: 650; }
main#content p, body :where(.ub, .mh, footer) p, body :where(.mh__in, .basket-dialog, .basket-tray) p { line-height: 1.65; }
main#content a:hover, body :where(.ub, .mh, footer) a:hover, body :where(.mh__in, .basket-dialog, .basket-tray) a:hover { color: var(--blue); }
main#content :focus-visible, body :where(.ub, .mh, footer) :focus-visible, body :where(.mh__in, .basket-dialog, .basket-tray) :focus-visible { outline: 3px solid #064cc8;
  outline-offset: 4px; }
main#content:focus { outline: none; }
main#content .shell, .ub__in, .mh__in, .ft, .ft__bot, body .enquiry-band .shell { width: calc(100% - 80px);
  margin-inline: auto; }
main#content .eyebrow, body :where(.mh__in, .basket-dialog, .basket-tray) .eyebrow { font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.5;
  color: var(--muted); }
main#content .small, body :where(.mh__in, .basket-dialog, .basket-tray) .small { font-size: 0.82rem; }
main#content .muted, body :where(.mh__in, .basket-dialog, .basket-tray) .muted { color: var(--muted); }
main#content .button, body :where(.mh__in, .basket-dialog, .basket-tray) .button { display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 44px;
  border-radius: 7px;
  padding: 11px 18px;
  border: 1px solid transparent;
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.4;
  transition:
    background 0.15s,
    border-color 0.15s;
  white-space: normal; }
main#content .button.primary, body :where(.mh__in, .basket-dialog, .basket-tray) .button.primary { background: var(--blue);
  color: #fff; }
main#content .button.primary:hover, body :where(.mh__in, .basket-dialog, .basket-tray) .button.primary:hover { background: var(--blue-dark);
  color: #fff; }
main#content .button.secondary, body :where(.mh__in, .basket-dialog, .basket-tray) .button.secondary { background: #fff;
  color: var(--blue);
  border-color: var(--line); }
main#content .button.secondary:hover, body :where(.mh__in, .basket-dialog, .basket-tray) .button.secondary:hover { background: #edf3ff;
  border-color: var(--blue); }
main#content .button.quiet { color: var(--ink);
  padding-inline: 8px; }
main#content .button.selected { background: #edf8f2;
  border-color: #a8d6bf;
  color: #135e43; }
main#content .button-row { display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap; }
main#content .text-button, body :where(.mh__in, .basket-dialog, .basket-tray) .text-button { border: 0;
  background: none;
  color: var(--blue);
  min-height: 44px;
  text-decoration: underline; }
main#content .icon-button, body :where(.mh__in, .basket-dialog, .basket-tray) .icon-button { display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem; }
main#content .icon-button:hover, body :where(.mh__in, .basket-dialog, .basket-tray) .icon-button:hover { background: #edf2fa;
  color: var(--ink); }
.ub { background: #11253f;
  color: #e0e8f6;
  font-size: 0.7rem; }
.ub__in { display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px; }
.ub a:hover { color: white; }
.ub__lab::after { margin-inline: 7px; }
.mh { border-bottom: 1px solid var(--line);
  background: var(--paper); }
.mh__in { min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px; }
body a.wm { display: inline-flex;
  align-items: center;
  gap: 0;
  font-weight: 800;
  color: #17356f;
  font-size: 1.65rem;
  letter-spacing: -0.06em; }
.wm__word { letter-spacing: 0.055em; }
.wm__div { height: 27px;
  width: 1px;
  background: var(--line);
  margin: 0 16px; }
.wm__svc { font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--muted); }
.mh__nav { display: flex;
  gap: 30px;
  font-size: 0.85rem;
  font-weight: 550; }
.mh__nav a { padding-block: 14px; }
body .basket-button { border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
  gap: 10px; }
body .basket-button b { display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding-inline: 4px;
  background: #eaf1ff;
  color: var(--blue);
  font-size: 0.72rem;
  border-radius: 4px; }
main#content .hero { background: #f4f7fd;
  border-bottom: 1px solid var(--line); }
main#content .hero-grid { display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 76px;
  padding-block: 65px 62px; }
main#content .hero-copy .eyebrow { display: flex;
  align-items: center;
  gap: 9px;
  color: #24569b; }
main#content .live-dot { width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%; }
main#content .hero h1 { margin: 20px 0;
  font-size: clamp(2.6rem, 4.6vw, 4.3rem);
  letter-spacing: -0.055em; }
main#content .hero h1 > span { color: var(--blue); }
main#content .hero-description { max-width: 520px;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 28px; }
main#content .hero-footnote { font-size: 0.75rem;
  color: var(--muted);
  margin-top: 25px; }
main#content .cloud-directory { background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 25px;
  box-shadow: 0 18px 45px -30px #254a8860;
  transform: rotate(-1deg); }
main#content .directory-heading { display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 18px;
  border-bottom: 1px solid #e5ebf4; }
main#content .directory-heading .eyebrow { font-size: 0.62rem; }
main#content .directory-row { display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #e9edf4; }
main#content .directory-row:last-child { border-bottom: 0;
  padding-bottom: 0; }
main#content .directory-row > div { display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px; }
main#content .directory-row strong { font-size: 0.89rem;
  font-weight: 650; }
main#content .directory-row > div > span { font-size: 0.72rem;
  color: var(--muted); }
main#content .directory-count { font-size: 0.69rem;
  color: var(--muted);
  white-space: nowrap; }
main#content .directory-count > span { font-size: 1rem;
  margin-left: 5px; }
main#content .product-mark { display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  border-radius: 9px;
  background: #e8efff;
  color: #124a99; }
main#content .family-0 { background: #eef0ff;
  color: #434ca1; }
main#content .family-1 { background: #e9ecff;
  color: #3e499a; }
main#content .family-2 { background: #e3f1ff;
  color: #11648d; }
main#content .family-3 { background: #f4eefb;
  color: #7540a2; }
main#content .family-4 { background: #e6f5ef;
  color: #176c55; }
main#content .benefits { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-block: 27px;
  border-bottom: 1px solid var(--line); }
main#content .benefits > div { display: flex;
  gap: 14px;
  align-items: center; }
main#content .benefits > div > span { font-size: 1.2rem;
  min-width: 26px;
  color: var(--blue); }
main#content .benefits p { display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.5; }
main#content .benefits strong { font-size: 0.8rem;
  font-weight: 600; }
main#content .benefits p span { font-size: 0.74rem;
  color: var(--muted); }
main#content .catalog-section { padding: 55px 0 64px; }
main#content .section-heading { display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px; }
main#content .section-heading h2 { margin-top: 9px; }
main#content .section-heading > p { font-size: 0.85rem;
  color: var(--muted);
  max-width: 280px; }
main#content .catalog-layout { display: grid;
  grid-template-columns: 206px minmax(0, 1fr);
  gap: 32px; }
main#content .category-sidebar { padding-top: 10px; }
main#content .filter-heading { color: var(--muted);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  margin: 0 12px 14px; }
main#content .category { display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 12px;
  min-height: 44px;
  border-radius: 7px;
  font-size: 0.81rem;
  color: var(--muted);
  margin-bottom: 4px; }
main#content .category span { font-size: 0.68rem;
  color: var(--muted); }
main#content .category.active { background: #eaf1fe;
  color: var(--blue);
  font-weight: 650; }
main#content .category.active span { color: var(--blue); }
main#content .category:hover { background: #f0f4fb; }
main#content .advisor-note { margin-top: 35px;
  border-top: 1px solid var(--line);
  padding: 24px 12px 0; }
main#content .advisor-note > span { display: block;
  font-size: 1.5rem;
  color: var(--blue);
  margin-bottom: 8px; }
main#content .advisor-note h3 { font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: -0.025em; }
main#content .advisor-note p { font-size: 0.79rem;
  color: var(--muted);
  margin: 8px 0 12px; }
main#content .advisor-note a { font-size: 0.76rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--blue); }
main#content .catalog-toolbar { display: flex;
  gap: 12px;
  align-items: center; }
main#content .search-field { display: flex !important;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  flex: 1;
  padding: 0 12px;
  background: #fff;
  margin: 0 !important; }
main#content .search-field > span:not(.sr-only) { font-size: 1.6rem;
  color: var(--muted); }
main#content .search-field input { border: 0;
  min-width: 0;
  width: 100%;
  padding: 12px 0;
  min-height: 44px;
  font-size: 0.85rem;
  background: transparent; }
main#content .search-field:focus-within { outline: 2px solid var(--blue);
  outline-offset: 2px; }
main#content .search-field input:focus-visible { outline: none; }
main#content .sort-field { width: 148px;
  flex-shrink: 0;
  margin: 0 !important; }
main#content .sort-field select { font-size: 0.78rem;
  min-height: 47px; }
main#content .result-line { display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 18px 0 19px;
  color: var(--muted);
  font-size: 0.76rem; }
main#content .result-line > span { font-size: 0.7rem; }
main#content .product-grid { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; }
main#content .product-card { display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 23px 21px 17px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition:
    border-color 0.18s,
    box-shadow 0.18s; }
main#content .product-card:hover { border-color: #aebfda;
  box-shadow: 0 9px 22px -16px #2a477b55; }
main#content .card-top { display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px; }
main#content .card-category { font-size: 0.62rem;
  color: var(--muted);
  text-align: right;
  max-width: 94px;
  line-height: 1.4; }
main#content .product-card h3 { font-size: 1.08rem;
  letter-spacing: -0.035em;
  line-height: 1.32; }
main#content .product-card h3 a:hover { text-decoration: underline;
  text-underline-offset: 4px; }
main#content .card-description { font-size: 0.78rem;
  color: var(--muted);
  margin-top: 9px;
  line-height: 1.7; }
main#content .features { display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 22px 0; }
main#content .features li { display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 0.76rem;
  color: #3a4d68;
  line-height: 1.55; }
main#content .features li > span { color: var(--mint);
  font-weight: 700;
  flex-shrink: 0; }
main#content .card-bottom { margin-top: auto;
  border-top: 1px solid #e8edf4;
  padding-top: 17px; }
main#content .billing-unit { font-size: 0.66rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em; }
main#content .price-label { font-size: 0.9rem;
  font-weight: 600;
  margin: 7px 0 14px; }
main#content .price-label span { display: block;
  font-size: 0.65rem;
  color: var(--muted);
  font-weight: 400;
  margin-top: 3px; }
main#content .card-bottom .button { width: 100%;
  justify-content: space-between;
  font-size: 0.78rem;
  padding-inline: 13px; }
main#content .detail-link { display: inline-flex;
  gap: 12px;
  align-items: center;
  min-height: 40px;
  font-size: 0.77rem;
  color: var(--blue);
  text-underline-offset: 4px; }
main#content .detail-link:hover { text-decoration: underline; }
main#content .card-bottom .detail-link { display: flex;
  justify-content: center;
  font-size: 0.71rem;
  margin-top: 3px; }
main#content .catalog-note { font-size: 0.75rem;
  color: var(--muted);
  margin-top: 22px; }
main#content .catalog-note a { text-decoration: underline; }
main#content .how-section { display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  background: #f2f6fd;
  border-radius: 14px;
  padding: 46px 50px;
  margin-bottom: 65px; }
main#content .how-section h2 { margin: 14px 0 23px; }
main#content .how-section a { font-size: 0.8rem;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px; }
main#content .how-section ol { list-style: none;
  display: grid;
  gap: 26px;
  padding: 0;
  margin: 0; }
main#content .how-section li { display: flex;
  gap: 20px; }
main#content .how-section li > span { color: var(--blue);
  font-size: 0.75rem;
  font-weight: 650;
  padding-top: 2px; }
main#content .how-section h3 { font-size: 1.02rem;
  letter-spacing: -0.025em;
  margin-bottom: 7px; }
main#content .how-section li p { font-size: 0.81rem;
  color: var(--muted); }
footer { background: #11253f;
  color: #d7e1ef;
  padding-bottom: 90px; }
.ft { display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 70px;
  padding-block: 45px; }
body a.ft__wm { color: #fff;
  font-size: 1.8rem; }
.ft p { font-size: 0.83rem;
  margin: 14px 0;
  color: #b7c7dc; }
.ft .small { font-size: 0.69rem;
  color: #b7c7dc; }
.ft h5 { font-size: 0.82rem;
  letter-spacing: 0;
  color: #fff;
  font-weight: 600;
  margin-bottom: 15px; }
.ft li a { display: block;
  font-size: 0.78rem;
  margin-block: 12px; }
footer a:hover { color: white;
  text-decoration: underline; }
.ft__bot { border-top: 1px solid #30445f;
  padding-top: 22px;
  font-size: 0.68rem;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #b7c7dc; }
.ft__bot nav { display: flex;
  gap: 20px; }
body .basket-tray { position: fixed;
  z-index: 25;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100% - 32px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: #132b4c;
  color: white;
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 0 10px 40px #102a4c30; }
body .basket-tray > div { display: flex;
  flex-direction: column;
  gap: 3px; }
body .basket-tray strong { font-size: 0.88rem; }
body .basket-tray > div > span { font-size: 0.73rem;
  color: #c6d6ed; }
body .basket-dialog { position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden; }
body .basket-dialog::backdrop { background: #10243d70; }
body .basket-panel { position: absolute;
  right: 0;
  top: 0;
  width: min(570px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -10px 0 50px #0b254522; }
body .basket-panel > header { padding: 28px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--line); }
body .basket-panel h2 { font-size: 1.6rem;
  margin-top: 7px; }
body .basket-scroll { padding: 0 28px;
  overflow: auto;
  flex: 1; }
body .basket-panel > footer { padding: 22px 28px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px; }
body .basket-panel > footer > p { font-size: 0.78rem;
  color: var(--muted);
  text-align: center; }
main#content .quote-lines, body :where(.mh__in, .basket-dialog, .basket-tray) .quote-lines { list-style: none;
  padding: 0;
  margin: 0; }
main#content .quote-lines > li, body :where(.mh__in, .basket-dialog, .basket-tray) .quote-lines > li { padding: 25px 0;
  border-bottom: 1px solid var(--line); }
main#content .quote-line-title, body :where(.mh__in, .basket-dialog, .basket-tray) .quote-line-title { display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px; }
main#content .quote-line-title > a, body :where(.mh__in, .basket-dialog, .basket-tray) .quote-line-title > a { font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere; }
main#content .quote-line-title .icon-button, body :where(.mh__in, .basket-dialog, .basket-tray) .quote-line-title .icon-button { margin-top: -9px;
  margin-right: -8px; }
main#content .line-controls, body :where(.mh__in, .basket-dialog, .basket-tray) .line-controls { display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 16px;
  margin: 15px 0 12px; }
main#content label, body :where(.ub, .mh, footer) label, body :where(.mh__in, .basket-dialog, .basket-tray) label { display: grid;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--ink); }
main#content input, body :where(.ub, .mh, footer) input, body :where(.mh__in, .basket-dialog, .basket-tray) input, main#content select, body :where(.mh__in, .basket-dialog, .basket-tray) select, main#content textarea { width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #aab9ce;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 11px 12px;
  font-size: 0.85rem;
  line-height: 1.4; }
main#content textarea { resize: vertical; }
main#content input::placeholder, body :where(.ub, .mh, footer) input::placeholder, body :where(.mh__in, .basket-dialog, .basket-tray) input::placeholder, main#content textarea::placeholder { color: #67758b;
  opacity: 1; }
main#content input[type='checkbox'] { width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 3px 0;
  accent-color: var(--blue); }
main#content .line-controls label, body :where(.mh__in, .basket-dialog, .basket-tray) .line-controls label { font-size: 0.71rem; }
main#content .line-controls input, body :where(.mh__in, .basket-dialog, .basket-tray) .line-controls input, main#content .line-controls select, body :where(.mh__in, .basket-dialog, .basket-tray) .line-controls select { font-size: 0.76rem;
  padding: 10px 9px; }
main#content .quote-lines .small, body :where(.mh__in, .basket-dialog, .basket-tray) .quote-lines .small { font-size: 0.7rem; }
main#content .page-heading { margin: 42px 0 35px; }
main#content .page-heading h1 { font-size: clamp(2rem, 3.7vw, 3.15rem);
  margin: 12px 0 15px; }
main#content .page-heading > p:last-child { color: var(--muted);
  max-width: 640px; }
main#content .quote-page, body .enquiry-band .quote-page { padding-block: 6px 70px; }
main#content .quote-page-grid { display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start; }
main#content .quote-review { padding-right: 10px; }
main#content .quote-review .section-heading { align-items: center;
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 0 0 15px; }
main#content .quote-review h2 { font-size: 1.25rem;
  margin: 0; }
main#content .quote-review .section-heading a { font-size: 0.8rem;
  text-decoration: underline;
  color: var(--blue); }
main#content .contact-form, body .enquiry-band form { position: relative;
  padding: 30px;
  background: #f5f7fb;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 20px; }
main#content .contact-form h2 { font-size: 1.55rem; }
main#content .contact-form .eyebrow + h2 { margin-top: -9px; }
main#content .contact-form h2 + p { margin-top: -7px; }
main#content .contact-form label, body .enquiry-band form label { font-size: 0.83rem; }
main#content .contact-form .optional { font-weight: 400;
  color: var(--muted); }
main#content .consent { display: flex;
  gap: 11px;
  align-items: flex-start;
  line-height: 1.65;
  font-weight: 400;
  font-size: 0.75rem !important; }
main#content .consent a, main#content .info-note a { text-decoration: underline;
  color: var(--blue); }
main#content .honeypot { display: none; }
main#content .info-note { margin: 26px 0;
  padding: 18px;
  border-left: 3px solid #7399d4;
  background: #f3f6fc;
  color: var(--muted);
  font-size: 0.81rem;
  line-height: 1.75; }
main#content .field-error { color: #a32020;
  font-size: 0.75rem;
  font-weight: 400; }
main#content .error-summary { border: 1px solid #da9e9e;
  background: #fff2f2;
  color: #9f2020;
  padding: 15px;
  font-size: 0.82rem;
  display: grid;
  gap: 7px; }
main#content .error-summary a { text-decoration: underline; }
main#content .empty-state, body :where(.mh__in, .basket-dialog, .basket-tray) .empty-state { padding: 50px 25px;
  text-align: center;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px; }
main#content .empty-state p, body :where(.mh__in, .basket-dialog, .basket-tray) .empty-state p { margin: 14px auto 22px;
  max-width: 480px;
  color: var(--muted);
  font-size: 0.9rem; }
main#content .page-empty { margin: 55px auto;
  max-width: 840px;
  padding: 60px 25px; }
main#content .page-empty h1 { font-size: 2.3rem; }
main#content .loading { padding: 80px 0;
  text-align: center; }
main#content .receipt { max-width: 800px;
  margin: 65px auto;
  text-align: center; }
main#content .receipt .eyebrow { color: var(--mint);
  margin: 20px 0 10px; }
main#content .receipt h1 { font-size: 2.8rem;
  margin-bottom: 22px; }
main#content .receipt > p { color: var(--muted);
  max-width: 640px;
  margin-inline: auto; }
main#content .receipt .button-row { justify-content: center;
  margin: 28px 0; }
main#content .receipt .small a { text-decoration: underline;
  color: var(--blue); }
main#content .success-mark { display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #e7f5ed;
  color: #126445;
  font-size: 1.8rem; }
main#content .reference { display: grid;
  gap: 9px;
  margin: 28px 0;
  background: var(--canvas);
  border: 1px solid var(--line);
  padding: 22px;
  border-radius: 10px; }
main#content .reference span { font-size: 0.8rem;
  color: var(--muted); }
main#content .reference strong { overflow-wrap: anywhere;
  font-family: monospace;
  font-size: 1rem; }
main#content .receipt-items { list-style: none;
  margin: 20px 0;
  padding: 0;
  text-align: left; }
main#content .receipt-items li { border-bottom: 1px solid var(--line);
  padding: 18px 0;
  display: grid;
  gap: 5px; }
main#content .receipt-items strong { font-size: 0.93rem; }
main#content .receipt-items span { font-size: 0.8rem;
  color: var(--muted); }
main#content .breadcrumbs { display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 42px; }
main#content .product-page { padding-block: 30px 70px; }
main#content .product-detail-grid { display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 85px;
  align-items: start; }
main#content .product-mark.large { width: 72px;
  height: 72px;
  font-size: 1rem;
  margin-bottom: 25px; }
main#content .product-detail-grid h1 { font-size: clamp(2.1rem, 3.6vw, 3.3rem);
  margin: 13px 0 20px; }
main#content .product-lede { font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 24px; }
main#content .entitlements { margin-top: 35px;
  border-top: 1px solid var(--line);
  padding-top: 25px; }
main#content .entitlements h2 { font-size: 1.25rem; }
main#content .entitlements .features { gap: 17px; }
main#content .entitlements .features li { font-size: 0.93rem; }
main#content .configuration { background: #f2f6fd;
  border: 1px solid var(--line);
  padding: 33px;
  border-radius: 12px;
  display: grid;
  gap: 23px;
  position: sticky;
  top: 20px; }
main#content .configuration h2 { font-size: 1.65rem; }
main#content .configuration > p:not(.eyebrow) { font-size: 0.84rem;
  color: var(--muted); }
main#content .configuration .button { justify-content: space-between; }
main#content .family-page { padding-block: 35px 65px; }
main#content .family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
main#content .family-grid .product-card { padding: 28px; }
main#content .prose-page { max-width: 850px;
  padding-block: 60px 80px; }
main#content .prose-page > h1 { margin: 18px 0 25px; }
main#content .prose-page section { margin: 32px 0; }
main#content .prose-page section h2 { font-size: 1.35rem;
  margin-bottom: 14px; }
main#content .prose-page section p { color: var(--muted);
  line-height: 1.85;
  margin-top: 12px; }
main#content .prose-page section a { color: var(--blue);
  text-decoration: underline; }
main#content .contact-options { display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0 42px; }
main#content .contact-options a { display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--canvas);
  padding: 22px;
  border-radius: 9px;
  min-width: 0; }
main#content .contact-options span { font-size: 0.8rem;
  color: var(--muted); }
main#content .contact-options strong { font-size: 0.94rem;
  overflow-wrap: anywhere;
  color: var(--blue); }
@media (min-width: 1450px) {
  main#content .hero-grid { padding-block: 80px; }
  main#content .hero h1 { font-size: 4.5rem; }
}
@media (max-width: 1150px) {
  main#content .shell, .ub__in, .mh__in, .ft, .ft__bot, body .enquiry-band .shell { width: calc(100% - 48px); }
  .mh__in { gap: 20px; }
  .mh__nav { gap: 18px; }
  main#content .hero-grid { gap: 35px; }
  main#content .catalog-layout { grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px; }
  main#content .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main#content .cloud-directory { padding: 18px; }
  main#content .directory-count { display: none; }
  main#content .quote-page-grid { gap: 30px; }
  main#content .product-detail-grid { gap: 40px; }
  main#content .how-section { gap: 45px;
    padding: 35px; }
  main#content .family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .mh__in { flex-wrap: wrap;
    min-height: 0;
    padding-block: 18px;
    gap: 16px; }
  .mh__nav { order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 28px;
    border-top: 1px solid #e9edf4;
    padding-top: 7px; }
  .mh__nav a { padding: 8px 0; }
  main#content .hero-grid { grid-template-columns: 1fr;
    gap: 35px;
    padding-block: 42px; }
  main#content .hero h1 { font-size: 3.45rem; }
  main#content .hero-description { max-width: 600px; }
  main#content .cloud-directory { transform: none;
    max-width: 600px; }
  main#content .directory-count { display: block; }
  main#content .benefits { gap: 22px; }
  main#content .benefits > div { align-items: start;
    gap: 8px; }
  main#content .section-heading { align-items: start; }
  main#content .catalog-layout { display: block; }
  main#content .category-sidebar { display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 0; }
  main#content .filter-heading, main#content .advisor-note { display: none; }
  main#content .category { width: auto;
    font-size: 0.76rem;
    padding: 9px 12px;
    gap: 12px;
    background: #f5f7fb;
    margin: 0; }
  main#content .category.active { box-shadow: inset 0 0 0 1px #abc4ec; }
  main#content .product-grid, main#content .family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main#content .how-section { grid-template-columns: 1fr;
    gap: 30px; }
  main#content .how-section h2 br { display: none; }
  .ft { gap: 30px;
    grid-template-columns: 1fr 1fr; }
  .ft > div:first-child { grid-column: 1/-1; }
  .ft__bot { flex-wrap: wrap; }
  main#content .quote-page-grid, main#content .product-detail-grid { grid-template-columns: minmax(0, 1fr);
    gap: 35px; }
  main#content .quote-review { padding: 0; }
  main#content .configuration { position: static; }
  main#content .product-page h1 { font-size: 2.7rem; }
}
@media (max-width: 520px) {
  main#content .shell, .ub__in, .mh__in, .ft, .ft__bot, body .enquiry-band .shell { width: calc(100% - 32px); }
  .ub { font-size: 0.6rem; }
  .ub__in { min-height: 36px; }
  .ub__l a, .ub__r a { display: none; }
  body a.wm { font-size: 1.4rem; }
  .wm__div { margin-inline: 9px;
    height: 21px; }
  .wm__svc { font-size: 0.82rem; }
  body .basket-button { padding: 9px;
    min-height: 44px;
    font-size: 0.75rem;
    gap: 7px; }
  body .basket-button > span:first-child { display: none; }
  .mh__nav { font-size: 0.8rem;
    justify-content: space-between;
    gap: 10px; }
  .mh__in { gap: 13px; }
  main#content .hero-grid { padding-block: 34px;
    gap: 30px; }
  main#content .hero h1 { font-size: 2.8rem;
    line-height: 1.1;
    margin: 18px 0; }
  main#content .hero-copy .eyebrow { font-size: 0.59rem;
    letter-spacing: 0.09em; }
  main#content .hero-description { font-size: 0.9rem;
    margin-bottom: 21px; }
  main#content .button-row { gap: 12px; }
  main#content .hero .button-row .button { font-size: 0.78rem;
    padding-inline: 12px; }
  main#content .hero-footnote { font-size: 0.69rem;
    margin-top: 20px; }
  main#content .cloud-directory { padding: 18px; }
  main#content .directory-heading { gap: 8px; }
  main#content .directory-heading .small { display: none; }
  main#content .directory-row { gap: 12px;
    padding-block: 14px; }
  main#content .directory-row strong { font-size: 0.8rem; }
  main#content .directory-row > div > span { font-size: 0.67rem; }
  main#content .directory-count { font-size: 0.61rem; }
  main#content .directory-count > span { display: none; }
  main#content .product-mark { width: 38px;
    height: 38px;
    font-size: 0.61rem; }
  main#content .benefits { grid-template-columns: 1fr;
    gap: 15px;
    padding-block: 24px; }
  main#content .benefits > div { gap: 12px;
    align-items: center; }
  main#content .benefits p { flex: 1;
    gap: 0; }
  main#content .benefits strong { font-size: 0.77rem; }
  main#content .benefits p span { font-size: 0.71rem; }
  main#content .catalog-section { padding-top: 35px; }
  main#content .section-heading { display: block;
    margin-bottom: 24px; }
  main#content .section-heading h2 { font-size: 1.9rem; }
  main#content .section-heading > p { margin-top: 14px;
    max-width: 100%; }
  main#content .catalog-toolbar { display: grid;
    grid-template-columns: minmax(0, 1fr); }
  main#content .sort-field { width: 100%; }
  main#content .sort-field select { width: 100%;
    min-height: 44px; }
  main#content .search-field input { font-size: 0.79rem; }
  main#content .category { font-size: 0.71rem;
    padding: 10px;
    gap: 9px; }
  main#content .product-grid, main#content .family-grid { grid-template-columns: minmax(0, 1fr);
    gap: 16px; }
  main#content .product-card, main#content .family-grid .product-card { padding: 23px; }
  main#content .product-card h3 { font-size: 1.25rem; }
  main#content .card-top { margin-bottom: 17px; }
  main#content .card-description { font-size: 0.84rem; }
  main#content .features li { font-size: 0.82rem; }
  main#content .card-category { font-size: 0.69rem;
    max-width: 130px; }
  main#content .card-bottom .button { font-size: 0.83rem; }
  main#content .card-bottom .detail-link { font-size: 0.78rem; }
  main#content .result-line { font-size: 0.71rem; }
  main#content .how-section { padding: 26px 22px;
    margin-bottom: 35px; }
  main#content .how-section h2 { font-size: 1.9rem; }
  main#content .how-section li { gap: 14px; }
  .ft { grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-block: 34px; }
  .ft > div:first-child { grid-column: auto; }
  .ft__bot { display: grid;
    gap: 14px; }
  body .basket-tray { padding: 12px;
    gap: 10px;
    bottom: 10px;
    border-radius: 10px; }
  body .basket-tray > div > span { display: none; }
  body .basket-tray strong { font-size: 0.77rem; }
  body .basket-tray .button { font-size: 0.75rem;
    padding-inline: 12px;
    gap: 8px; }
  body .basket-panel > header { padding: 22px 18px; }
  body .basket-panel h2 { font-size: 1.4rem; }
  body .basket-scroll { padding: 0 18px; }
  body .basket-panel > footer { padding: 18px; }
  main#content .line-controls, body :where(.mh__in, .basket-dialog, .basket-tray) .line-controls { grid-template-columns: minmax(0, 1fr); }
  main#content .quote-line-title > a, body :where(.mh__in, .basket-dialog, .basket-tray) .quote-line-title > a { font-size: 0.91rem; }
  main#content .contact-form, body .enquiry-band form { padding: 22px 18px; }
  main#content .page-heading { margin-top: 30px; }
  main#content .page-heading h1 { font-size: 2.2rem; }
  main#content .page-heading > p:last-child { font-size: 0.9rem; }
  main#content .quote-review .section-heading { display: flex; }
  main#content .quote-review h2 { font-size: 1.1rem; }
  main#content .quote-review .section-heading a { font-size: 0.75rem; }
  main#content .quote-page, body .enquiry-band .quote-page { padding-bottom: 40px; }
  main#content .prose-page { padding-block: 35px 50px; }
  main#content .prose-page h1 { font-size: 2.35rem; }
  main#content .product-lede { font-size: 1rem; }
  main#content .contact-options { grid-template-columns: minmax(0, 1fr);
    gap: 12px; }
  main#content .configuration { padding: 25px 20px; }
  main#content .product-page h1 { font-size: 2.2rem; }
  main#content .product-detail-grid { gap: 25px; }
  main#content .entitlements .features li { font-size: 0.9rem; }
  main#content .breadcrumbs { font-size: 0.74rem;
    gap: 8px;
    margin-bottom: 28px; }
  main#content .receipt { margin-block: 35px; }
  main#content .receipt h1 { font-size: 2.25rem; }
  main#content .receipt > p { font-size: 0.9rem; }
  main#content .receipt .button-row { flex-direction: column; }
  main#content .reference { padding: 18px 14px; }
  main#content .reference strong { font-size: 0.84rem; }
  main#content .page-empty h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important; }
}
@media (max-width: 520px) {
  body .basket-button > span:first-child { display: inline; }
  body .basket-button > span:last-of-type { display: none; }
}
main#content .catalog-pagination { display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 28px 0; }
main#content .sku-reference, body :where(.mh__in, .basket-dialog, .basket-tray) .sku-reference, body .enquiry-band .sku-reference { overflow-wrap: anywhere; }
main#content .card-description { display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden; }
main#content h1, main#content h2, body :where(.mh__in, .basket-dialog, .basket-tray) h2, main#content h3, body :where(.mh__in, .basket-dialog, .basket-tray) h3 { font-weight: 800; }
main#content h1 { letter-spacing: -0.055em; }
main#content :focus-visible, body :where(.ub, .mh, footer) :focus-visible, body :where(.mh__in, .basket-dialog, .basket-tray) :focus-visible { outline-color: var(--blue); }
.ub { background: #000;
  color: #fff;
  font-size: 0.75rem; }
.ub a:hover { text-decoration: underline; }
.ub :focus-visible, footer :focus-visible { outline-color: #fff; }
.mh__in { min-height: 80px; }
body a.wm { color: #000; }
.wm__word { font-family: 'INFOC Mark', sans-serif;
  font-weight: 400;
  letter-spacing: -0.065em;
  font-size: 1.6rem;
  white-space: nowrap; }
.wm__c { color: var(--blue); }
.wm__svc { color: #333;
  font-size: 0.875rem;
  font-weight: 600; }
.mh__nav { font-size: 0.875rem;
  font-weight: 600; }
.mh__nav a:hover { text-decoration: underline;
  text-underline-offset: 6px; }
main#content .button, body :where(.mh__in, .basket-dialog, .basket-tray) .button, main#content .icon-button, body :where(.mh__in, .basket-dialog, .basket-tray) .icon-button, body .basket-button b, main#content input, body :where(.ub, .mh, footer) input, body :where(.mh__in, .basket-dialog, .basket-tray) input, main#content select, body :where(.mh__in, .basket-dialog, .basket-tray) select, main#content textarea, main#content .product-mark, main#content .product-card, main#content .category, main#content .search-field, main#content .sort-field select, main#content .configuration, main#content .info-note, main#content .reference, body .basket-dialog, body .basket-tray { border-radius: 0; }
main#content .button, body :where(.mh__in, .basket-dialog, .basket-tray) .button { font-weight: 700;
  min-height: 46px;
  padding: 12px 18px; }
main#content .button.secondary, body :where(.mh__in, .basket-dialog, .basket-tray) .button.secondary { border-color: #c7c7d2; }
main#content .button.secondary:hover, body :where(.mh__in, .basket-dialog, .basket-tray) .button.secondary:hover { background: #f2f2ff;
  border-color: var(--blue); }
main#content .button.selected { color: #0000c4;
  background: #ededff;
  border-color: var(--blue); }
body .basket-button { background: var(--blue);
  border-color: var(--blue);
  color: #fff; }
body .basket-button:hover { background: var(--blue-dark);
  color: #fff; }
body .basket-button b { background: #fff;
  color: var(--blue); }
main#content .hero { background: #fff; }
main#content .hero-grid { gap: 56px;
  padding-block: 64px;
  grid-template-columns: 1.1fr 1fr; }
main#content .hero h1 { font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 800; }
main#content .hero-description { color: #595959;
  font-size: 1.0625rem;
  line-height: 1.75; }
main#content .eyebrow, body :where(.mh__in, .basket-dialog, .basket-tray) .eyebrow, main#content .filter-heading, main#content .card-category, main#content .directory-count { font-family: 'INFOC Mono', monospace; }
main#content .hero-copy .eyebrow { color: var(--blue);
  font-size: 0.7rem;
  letter-spacing: 0.15em; }
main#content .live-dot { display: none; }
main#content .cloud-directory { display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  transform: none;
  box-shadow: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff; }
main#content .directory-heading { grid-column: 1 / -1;
  padding: 18px;
  background: #000;
  color: #fff;
  border: 0; }
main#content .directory-heading .muted { color: #d1d1d7; }
main#content .directory-heading .eyebrow { color: #fff; }
main#content .directory-row { padding: 18px;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
  flex-wrap: wrap; }
main#content .directory-row:nth-child(even) { border-right: 1px solid var(--line); }
main#content .directory-row:last-child { padding-bottom: 18px; }
main#content .directory-row:last-child { grid-column: 1 / -1; }
main#content .directory-row:hover { background: #f4f4ff; }
main#content .directory-row > div { min-width: 110px; }
main#content .directory-count { width: 100%;
  padding-left: 54px;
  font-size: 0.625rem;
  color: #595959; }
main#content .directory-row strong { font-size: 0.8125rem;
  font-weight: 750; }
main#content .product-mark[class] { background: #f0f0ff;
  color: #0000c4; }
main#content .benefits { border-block: 1px solid #000;
  background: #000;
  color: #fff;
  padding: 24px;
  gap: 24px; }
main#content .benefits strong { font-size: 0.8125rem;
  font-weight: 700; }
main#content .benefits p span { color: #d1d1d7; }
main#content .benefits > div > span { color: #aaaaff; }
main#content .catalog-section { background: #fafafa; }
main#content .catalog-section .section-heading { padding-top: 4px; }
main#content .product-card { box-shadow: none;
  border-color: var(--line);
  transition: border-color 0.15s; }
main#content .product-card:hover { border-color: var(--blue);
  box-shadow: none;
  transform: none; }
main#content .product-card h3 { font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 750;
  letter-spacing: -0.025em; }
main#content .product-card .sku-reference { font-size: 0.625rem;
  line-height: 1.65;
  color: #595959; }
main#content .product-card .sku-reference strong { color: #333; }
main#content .product-card .sku-reference > span { display: block; }
main#content .card-description { font-size: 0.8125rem; }
main#content .card-category { font-size: 0.625rem; }
main#content .category.active { background: #ededff;
  color: #0000c4;
  border-left: 3px solid var(--blue); }
main#content .category:hover { background: #f0f0f5; }
main#content .advisor-note { background: #f0f0f5;
  border-radius: 0; }
main#content .configuration { background: #f6f6f8;
  border-top: 3px solid var(--blue); }
main#content .info-note { background: #f2f2ff;
  border-left-color: var(--blue); }
footer { background: #000;
  color: #fff; }
body a.ft__wm { color: #fff; }
.ft__wm .wm__c { color: #aaaaff; }
.ft p, .ft .small, .ft__bot { color: #c8c8ce; }
footer a:hover { color: #fff;
  text-decoration: underline; }
.ft__bot { border-color: #393939; }
@media (max-width: 1000px) {
  main#content .hero-grid { grid-template-columns: 1fr;
    gap: 36px; }
  main#content .cloud-directory { max-width: none; }
}
@media (max-width: 600px) {
  .ub__l a { display: none; }
  .mh__in { min-height: 70px; }
  .wm__word { font-size: 1.2rem; }
  .wm__svc { font-size: 0.75rem; }
  main#content .hero-grid { padding-block: 36px;
    gap: 28px; }
  main#content .hero h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  main#content .cloud-directory { grid-template-columns: 1fr; }
  main#content .directory-row { flex-wrap: nowrap;
    align-items: center;
    padding: 14px; }
  main#content .directory-row:nth-child(even) { border-right: 0; }
  main#content .directory-row > div { min-width: 0; }
  main#content .directory-count { width: auto;
    padding-left: 0;
    font-size: 0.6rem; }
  main#content .directory-heading { flex-wrap: wrap; }
  main#content .benefits { padding: 20px; }
  main#content .button, body :where(.mh__in, .basket-dialog, .basket-tray) .button { padding-inline: 14px; }
}
.mh__in { display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px 32px;
  padding-block: 18px 0; }
.mh__in > .wm { grid-column: 1;
  grid-row: 1; }
.mh__in > .basket-button { grid-column: 3;
  grid-row: 1; }
.mh__search { display: flex;
  min-width: 0;
  border: 1px solid #c9cbd8;
  border-radius: 8px;
  background: #f7f8fb;
  overflow: hidden; }
.mh__search input { min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 13px 16px;
  font: inherit;
  font-size: 0.875rem; }
.mh__search button { flex: none;
  width: 48px;
  border: 0;
  background: var(--blue);
  color: white;
  cursor: pointer; }
.mh__search:focus-within { outline: 2px solid var(--blue);
  outline-offset: 3px; }
.mh__nav { flex-wrap: wrap;
  grid-row: 2;
  grid-column: 1/-1;
  position: static;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 32px;
  border-top: 1px solid #eeeef3; }
.mh__nav a { display: flex;
  align-items: center;
  min-height: 44px; }
.mh__nav a[aria-current] { color: var(--blue);
  box-shadow: inset 0 -2px var(--blue); }
main#content .help-actions { display: flex;
  flex-wrap: wrap;
  gap: 12px; }
main#content .shop-hero { display: grid;
  grid-template-columns: 46% 54%;
  margin-block: 28px;
  background: #f1f5fd;
  border-radius: 16px;
  overflow: hidden; }
main#content .shop-hero-copy { padding: 44px 36px;
  position: relative;
  z-index: 1; }
main#content .shop-kicker { color: #0000bb;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 20px; }
main#content .shop-hero h1 { font-size: clamp(2.5rem, 4vw, 3.7rem);
  line-height: 1.08;
  margin: 0 0 22px; }
main#content .shop-hero h1 span { color: var(--blue); }
main#content .shop-hero-copy > p:not(.shop-kicker) { font-size: 0.95rem;
  line-height: 1.75;
  color: #484b59;
  max-width: 430px;
  margin-bottom: 24px; }
main#content .shop-hero .button { border-radius: 6px; }
main#content .hero-assurance { margin-top: 22px;
  font-size: 0.7rem;
  color: #484b59;
  line-height: 1.8; }
main#content .shop-hero-art { position: relative;
  min-height: 380px; }
main#content .cloud-hero { display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff; }
main#content .cloud-hero-stage { position: relative;
  flex: 1;
  min-height: 390px;
  overflow: hidden;
  background: #26374b; }
main#content .cloud-hero-photo { position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease; }
main#content .cloud-hero-photo.is-active { opacity: 1; }
main#content .cloud-hero-photo img { object-fit: cover;
  object-position: center 35%; }
main#content .cloud-hero-stage::after { content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 26%,
    rgba(8, 18, 34, 0.38) 51%,
    rgba(8, 18, 34, 0.94) 100%
  ); }
main#content .cloud-hero-services { position: absolute;
  z-index: 1;
  top: 20px;
  left: 24px;
  right: 24px;
  width: fit-content;
  max-width: calc(100% - 48px);
  padding: 9px 12px;
  border-radius: 5px;
  background: #fff;
  color: #192332;
  font-size: 0.72rem;
  line-height: 1.6;
  font-weight: 800; }
main#content .cloud-hero-caption { position: absolute;
  z-index: 1;
  left: 28px;
  right: 28px;
  bottom: 24px;
  color: #fff; }
main#content .cloud-hero-caption h2 { margin: 0 0 8px;
  max-width: 440px;
  color: #fff;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.035em; }
main#content .cloud-hero-caption p { max-width: 430px;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: #f0f3f9; }
main#content .cloud-hero-caption a { display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 5px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 5px; }
main#content .cloud-hero-caption a:hover { color: #d7e5ff; }
main#content .cloud-hero-controls { padding: 10px 20px 0;
  border-top: 1px solid #dedee5; }
main#content .cloud-hero-navigation { display: flex;
  align-items: center;
  gap: 6px; }
main#content .cloud-hero-count { flex-shrink: 0;
  font-size: 0.72rem;
  color: #595959;
  font-variant-numeric: tabular-nums; }
main#content .cloud-hero-count strong { color: var(--blue); }
main#content .cloud-hero-current { flex: 1;
  margin-left: 8px;
  color: #303746;
  font-size: 0.72rem;
  font-weight: 700; }
main#content .cloud-hero-navigation button { display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #f4f6fa;
  color: #152034;
  border: 1px solid #dedee5;
  border-radius: 5px;
  font-size: 1.1rem;
  cursor: pointer; }
main#content .cloud-hero-navigation button:hover { background: #e7edff;
  border-color: var(--blue); }
main#content .cloud-hero-navigation .cloud-hero-pause { width: auto;
  min-width: 64px;
  padding: 0 8px;
  font-size: 0.72rem; }
@media (max-width: 400px) {
  main#content .cloud-hero-current { display: none; }
  main#content .cloud-hero-count { flex: 1; }
}
main#content .cloud-hero-selectors { display: flex;
  gap: 6px; }
main#content .cloud-hero-selectors button { display: grid;
  place-items: center;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer; }
main#content .cloud-hero-selectors span { display: block;
  width: 100%;
  height: 3px;
  background: #d2d7e2;
  border-radius: 3px; }
main#content .cloud-hero-selectors button[aria-pressed='true'] span { background: var(--blue);
  height: 5px; }
main#content .cloud-hero-selectors button:hover span { background: #737dc0; }
@media (prefers-reduced-motion: reduce) {
  main#content .cloud-hero-photo { transition: none; }
}
@media (max-width: 440px) {
  main#content .cloud-hero-stage { min-height: 370px; }
  main#content .cloud-hero-services { top: 16px;
    left: 16px;
    right: 16px;
    max-width: calc(100% - 32px);
    font-size: 0.65rem; }
  main#content .cloud-hero-caption { left: 20px;
    right: 20px;
    bottom: 16px; }
  main#content .cloud-hero-controls { padding: 8px 12px 0; }
  main#content .cloud-hero-navigation { gap: 4px; }
  main#content .cloud-hero-current { font-size: 0.65rem;
    margin-left: 4px; }
  main#content .cloud-hero-selectors { display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: 0 6px; }
}
main#content .shop-families { display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px; }
main#content .shop-families > a { display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #e1e3eb;
  border-radius: 10px;
  padding: 20px 8px;
  gap: 8px;
  background: white;
  transition:
    border-color 0.15s,
    box-shadow 0.15s; }
main#content .shop-families > a:hover { border-color: var(--blue);
  box-shadow: 0 4px 18px #101a4210; }
main#content .shop-families strong { font-size: 0.85rem; }
main#content .shop-families > a > span:last-child { font-size: 0.7rem;
  color: #595d6b; }
main#content .shop-product-icon { display: inline-flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  color: #194fbb; }
main#content .shop-product-icon.large { width: 68px;
  height: 64px; }
main#content .shop-product-icon > img { object-fit: contain;
  width: 52px;
  height: 52px; }
main#content .suite-icons { display: flex;
  align-items: center;
  width: 68px;
  height: 54px; }
main#content .suite-icons img { width: 32px;
  height: 32px;
  object-fit: contain; }
main#content .suite-icons img + img { margin-left: -13px; }
main#content .suite-icons img:nth-child(2) { transform: translateY(-9px); }
main#content .benefits { background: #fff;
  color: #1b2130;
  border-block: 1px solid #e4e6ee;
  padding-block: 20px; }
main#content .benefits p span { color: #595d6b; }
main#content .benefits > div > span { color: var(--blue); }
main#content .catalog-section { background: #f7f8fb; }
main#content .product-card { border-radius: 12px;
  padding: 22px;
  background: white; }
main#content .product-card:hover { box-shadow: 0 5px 24px #1620440a; }
main#content .card-top { align-items: center;
  margin-bottom: 18px; }
main#content .product-card h3 { font-size: 1.12rem; }
main#content .product-card .sku-reference { font-size: 0.69rem; }
main#content .card-description { font-size: 0.85rem;
  line-height: 1.7; }
main#content .product-card .button { border-radius: 6px; }
main#content .product-card .button.secondary { background: var(--blue);
  color: white;
  border-color: var(--blue); }
main#content .product-card .button.secondary:hover { background: #0000bb; }
main#content .compare-toggle { background: transparent;
  color: #454a5d;
  border: 0;
  min-height: 44px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  margin-top: 6px; }
main#content .compare-toggle[aria-pressed='true'] { color: #0000bb;
  font-weight: 700; }
main#content .compare-toggle:disabled { color: #676b76;
  cursor: not-allowed; }
main#content .comparison-panel { min-width: 0;
  background: white;
  border: 1px solid #bfc8e6;
  border-radius: 12px;
  padding: 24px;
  margin-block: 24px; }
main#content .comparison-panel .section-heading { display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center; }
main#content .comparison-panel h3 { margin: 0; }
main#content .comparison-scroll { overflow-x: auto;
  max-width: 100%;
  margin-top: 18px; }
main#content .comparison-scroll table { border-collapse: collapse;
  width: 100%; }
main#content .comparison-scroll th, main#content .comparison-scroll td { text-align: left;
  vertical-align: top;
  min-width: 200px;
  padding: 16px;
  border: 1px solid #e1e4ed;
  font-size: 0.82rem;
  line-height: 1.7; }
main#content .comparison-scroll th { background: #f2f5fc; }
main#content .comparison-scroll ul { padding-left: 18px; }
main#content .comparison-scroll td { overflow-wrap: anywhere; }
main#content .comparison-scroll a { color: #0000bb;
  text-decoration: underline; }
@media (max-width: 1000px) {
  .mh__in { gap: 12px 20px; }
  main#content .shop-hero-copy { padding: 32px 24px; }
  main#content .shop-families { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .mh__in { grid-template-columns: minmax(0, 1fr) auto;
    padding-top: 14px; }
  .mh__in > .basket-button { grid-column: 2; }
  .mh__search { grid-column: 1/-1;
    grid-row: 2; }
  .mh__nav { grid-row: 3;
    gap: 24px; }
  main#content .shop-hero { grid-template-columns: 1fr; }
  main#content .shop-hero-copy { padding: 32px 24px; }
  main#content .shop-hero h1 { font-size: 2.8rem; }
  main#content .shop-hero-art { min-height: 260px; }
  main#content .hero-art-label { left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 12px 16px; }
}
@media (max-width: 440px) {
  main#content .shop-hero { margin-block: 18px;
    border-radius: 10px; }
  main#content .shop-hero-copy { padding: 26px 20px; }
  main#content .shop-hero h1 { font-size: 2.35rem; }
  main#content .shop-families { grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; }
  main#content .shop-families > a { padding: 14px 6px; }
  main#content .shop-hero-art { min-height: 220px; }
  main#content .comparison-panel { padding: 14px; }
  main#content .comparison-panel .section-heading { align-items: flex-start;
    flex-direction: column; }
}
main#content .hero-help { display: block;
  width: fit-content;
  margin-top: 16px;
  padding-block: 8px;
  color: #0000bb;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px; }
main#content .shop-hero h1 { max-width: 720px;
  font-size: clamp(2.2rem, 3.7vw, 4.5rem); }
main#content .shop-hero-copy > p:not(.shop-kicker) { max-width: 540px; }
main#content .home-section { padding-block: 64px; }
main#content .home-section-head { display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 28px; }
main#content .home-section h2, main#content .home-contact h2 { font-size: clamp(1.8rem, 2.5vw, 2.8rem);
  line-height: 1.17;
  letter-spacing: -0.045em;
  margin: 8px 0 18px; }
main#content .home-section-head > p { max-width: 360px;
  color: #505565;
  line-height: 1.7;
  font-size: 0.9rem; }
main#content .needs-grid { display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; }
main#content .need-card { border: 1px solid #dce1ee;
  background: #f8faff;
  border-radius: 12px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; }
main#content .need-card h3, main#content .learning-card h3 { font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: -0.03em;
  margin: 20px 0 12px; }
main#content .need-card p, main#content .learning-card p { font-size: 0.9rem;
  line-height: 1.8;
  color: #505565;
  max-width: 55ch;
  margin: 0 0 20px; }
main#content .home-text-link { color: #0000bb;
  font-size: 0.875rem;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 5px; }
main#content .need-card .home-text-link, main#content .learning-card .home-text-link { margin-top: auto; }
main#content .need-card, main#content .learning-card { transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease; }
main#content .need-card:hover, main#content .learning-card:hover { border-color: #0001ff;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px #182e6310; }
main#content .learning-card { border: 1px solid #dce1ee;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column; }
main#content .learning-art { min-height: 170px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px;
  gap: 20px;
  background: #edf2ff; }
main#content .learning-art > span:last-child { font-size: 0.875rem;
  font-weight: 700;
  color: #29426f; }
main#content .art-02 { background: #eaf6fd; }
main#content .art-03 { background: #f0effc; }
main#content .learning-copy { padding: 8px 28px 24px;
  flex: 1;
  display: flex;
  flex-direction: column; }
main#content .home-faq { border-top: 1px solid #dce1ee;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px; }
main#content .home-faq > div > p { max-width: 35ch;
  color: #505565;
  line-height: 1.8; }
main#content .faq-list details { border-bottom: 1px solid #dce1ee; }
main#content .faq-list summary { min-height: 64px;
  padding: 20px 4px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  list-style: none; }
main#content .faq-list summary::-webkit-details-marker { display: none; }
main#content .faq-list summary > span { color: #0000bb;
  font-size: 1.25rem;
  flex: none;
  transition: transform 180ms ease; }
main#content .faq-list details[open] summary > span { transform: rotate(45deg); }
main#content .faq-answer { padding: 0 28px 20px 4px; }
main#content .faq-answer p { margin: 0;
  color: #505565;
  font-size: 0.9rem;
  line-height: 1.9;
  max-width: 75ch; }
main#content .home-contact { display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  background: #0d1933;
  color: #fff;
  padding: 44px;
  border-radius: 16px;
  margin-bottom: 64px; }
main#content .home-contact p { color: #d6deef;
  line-height: 1.8;
  max-width: 55ch; }
main#content .home-contact-actions { display: flex;
  flex-direction: column;
  gap: 12px;
  flex: none; }
main#content .home-contact .button.secondary { color: #111;
  background: #fff; }
main#content .home-contact :focus-visible { outline-color: #fff; }
main#content .guide-header { padding-block: 60px 24px;
  max-width: 850px; }
main#content .guide-header h1 { font-size: clamp(2.1rem, 4vw, 3.8rem);
  line-height: 1.12; }
main#content .guide-header p { color: #505565;
  font-size: 1.05rem;
  line-height: 1.8; }
main#content .guide-page { max-width: 850px;
  padding-block: 32px 64px; }
main#content .guide-page section { margin-bottom: 32px; }
main#content .guide-page section p, main#content .guide-source p { color: #505565;
  line-height: 1.9; }
main#content .guide-page h2 { font-size: 1.5rem; }
main#content .guide-source { padding: 24px;
  border-left: 3px solid #0001ff;
  background: #f3f6fc;
  margin-block: 32px; }
@media (max-width: 800px) {
  main#content .needs-grid { grid-template-columns: 1fr;
    gap: 16px; }
  main#content .home-section { padding-block: 36px; }
  main#content .home-section-head { align-items: flex-start;
    flex-direction: column;
    gap: 0; }
  main#content .home-faq { grid-template-columns: 1fr;
    gap: 20px; }
  main#content .home-contact { flex-direction: column;
    align-items: stretch;
    padding: 28px;
    margin-bottom: 36px; }
  main#content .learning-art { min-height: 130px; }
  main#content .guide-header { padding-block: 32px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  main#content .need-card:hover, main#content .learning-card:hover { transform: none; }
  main#content .need-card, main#content .learning-card, main#content .faq-list summary > span { transition: none; }
}
@media (max-width: 440px) {
  .mh__nav { gap: 14px;
    font-size: 0.8rem;
    justify-content: space-between; }
  main#content .need-card { padding: 24px; }
  main#content .home-contact { padding: 24px 20px; }
}
@media (max-width: 440px) {
  .mh__nav { gap: 10px; }
  .mh__nav a { font-size: 0.75rem;
    white-space: nowrap; }
  main#content .shop-hero-copy { padding: 24px 20px; }
  main#content .shop-hero h1 { font-size: 1.9rem; }
  main#content .shop-hero-copy > p:not(.shop-kicker) { font-size: 0.875rem;
    line-height: 1.7; }
  main#content .shop-kicker { font-size: 0.65rem;
    margin-bottom: 16px; }
}
.wm__word, body a.ft__wm { font-family: 'Figtree', sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0; }
/* END LIVE LAYER */