/* ============================================================================
   ITEPL Brand Book — Site styles (src/styles.css)
   Base from site/styles.css + Concept A/C/D component layer from prototypes.
   Tokens come from brand/tokens/; this file adds layout, shell, and
   doc-specific components. Do NOT hardcode colors — use tokens.
   ============================================================================ */

/* ============================================================================
   TOKEN BREAKPOINT SCALE — PostCSS custom-media (Gate-3 Q4, R-10)
   sm640 / md768 (rail⇄drawer) / lg1024 / xl1280 / 2xl1536
   ============================================================================ */
@custom-media --bp-sm (min-width: 640px);
@custom-media --bp-md (min-width: 768px);
@custom-media --bp-lg (min-width: 1024px);
@custom-media --bp-xl (min-width: 1280px);
@custom-media --bp-2xl (min-width: 1536px);
@custom-media --bp-lt-md (max-width: 767px);
@custom-media --bp-lt-sm (max-width: 639px);

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--ite-font-sans);color:var(--ite-color-text);
  background:var(--ite-color-bg);line-height:var(--ite-leading-normal);
  text-rendering:optimizeLegibility}

/* ============================================================================
   METALLIC RECIPES (Concept D — declared once, reused on lids + rail)
   ============================================================================ */
:root{
  --alloy-base: linear-gradient(168deg,#eceef1 0%,#dcdfe4 38%,#e7e9ed 60%,#cfd2d8 100%);
  --alloy-grain: repeating-linear-gradient(94deg,
      rgba(255,255,255,0.50) 0px,rgba(255,255,255,0.50) 0.5px,
      rgba(19,20,24,0.045) 1px,rgba(19,20,24,0.045) 1.5px,
      rgba(255,255,255,0) 3px);
  --alloy-sheen: radial-gradient(120% 140% at 16% -20%, rgba(255,255,255,0.66), transparent 46%);
  --alloy-edge: inset 0 1px 0 rgba(255,255,255,0.85),
                inset 0 -1px 0 rgba(19,20,24,0.14),
                inset 1px 0 0 rgba(255,255,255,0.5),
                inset -1px 0 0 rgba(19,20,24,0.10);
  --engrave: 0 1px 0 rgba(255,255,255,0.75);

  /* ── Metal trio (maps to the brand colours) ─────────────────────────────
     Aluminium (--alloy-*, above) ↔ white · Copper ↔ orange · Gunmetal ↔ black.
     Chosen from the metal lab: copper = Polished "Balanced" (AAA, no halo);
     gunmetal = "Ink / anodised". */
  --copper-base: linear-gradient(165deg,#f7cba9,#ea9a6b 32%,#f3b387 50%,#e5965f 74%,#dd9560 100%);
  --copper-sheen: radial-gradient(130% 150% at 22% -25%, rgba(255,247,236,0.6), transparent 50%);
  --copper-edge: inset 0 1px 0 rgba(255,244,230,0.8), inset 0 -1px 0 rgba(70,26,10,0.22),
                 inset 1px 0 0 rgba(255,244,230,0.38), inset -1px 0 0 rgba(70,26,10,0.14);
  --copper-ink: #160a03;   /* AAA text on copper (7.9:1), no light halo */
  --gun-base: linear-gradient(168deg,#202228,#131417 45%,#1b1d22 60%,#0d0e11 100%);
  --gun-sheen: radial-gradient(120% 150% at 22% -20%, rgba(255,255,255,0.1), transparent 42%);
  --gun-brush: repeating-linear-gradient(92deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) .5px,
               rgba(0,0,0,0.3) 1px, rgba(0,0,0,0.3) 1.4px, rgba(255,255,255,0) 2.6px);
  --gun-edge: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.7);
}
/* .alloy — chapter lids + rail faceplate chip ONLY (Concept D: rationed) */
.alloy{background:var(--alloy-sheen),var(--alloy-grain),var(--alloy-base);
  box-shadow:var(--alloy-edge);position:relative;isolation:isolate}

/* .copper — warm accent metal (chips, ticks, accents). Text = --copper-ink, no halo. */
.copper{background:var(--copper-sheen),var(--copper-base);box-shadow:var(--copper-edge);
  color:var(--copper-ink);position:relative;isolation:isolate}
.copper *{text-shadow:none}

/* .gunmetal — dark panel metal surface. Light text. */
.gunmetal{background:var(--gun-sheen),var(--gun-brush),var(--gun-base);
  box-shadow:var(--gun-edge);color:var(--ite-gray-50);position:relative;isolation:isolate}

/* Copper rule — metallic copper hairline divider (matches the copper surface) */
.copper-rule{height:2px;border:0;background:linear-gradient(90deg,
  #a85a36,#dd9560 40%,#f3b387 70%,transparent)}

/* P4: squircle corners on the rounded rectangular surfaces. border-radius is
   the universal fallback; corner-shape (superellipse) enhances supporting
   browsers. Pills, dots and circles are intentionally excluded (stay round). */
.btn, .cplate, .plate, .usage-card, .card, .doc-callout, .note, .callout,
.rating-plate, .ph-box, .ph-mini, .motif, .slogan-plate, .chart-frame,
.steps__item, .pf-link, .pagefoot__link, .modalmock, .modalmock__panel,
.cover__wash, .cover__meta, .hero-frame, .cs-band, .cs-plate, .cs-cell,
.balance-bar, .toast, .prodcard, .datatable, .seg, .fmt-toggle, .code-export,
.socialtile, .signmock, .navmock,
.stage, .hero, .gs-surface, .gs-card, .gs-card__k, .depth-demo div, .elev div, .ease-demo, .mobilebar,
.slide, .emailsig, .dodont__item, .vcard, .compartment, .cs-matrix, .pairing__card,
.accordion, .vehicle, .pagination button, pre,
.swatch, .chip, .chip__sw, .cs-val, .cs-matrix__chip, .copy, .ramp__step, .cc__swap, .seg__btn,
.cplate__lid, .prod-hero, .field input, .field select, .field textarea,
input[type=text], input[type=email], input[type=tel], input[type=search],
select, textarea, .kbd {
  corner-shape: var(--ite-corner);
}

/* .mono — resolved via --ite-font-mono (P5-3 folded into token stack) */
.mono{font-family:var(--ite-font-mono);font-feature-settings:"tnum" 1,"zero" 1}

/* ============================================================================
   A11Y — SKIP LINK
   ============================================================================ */
.skip{position:absolute;left:-9999px;top:8px;z-index:90;
  background:var(--ite-gray-900);color:var(--ite-white);padding:10px 16px;
  border-radius:var(--ite-radius-md);font-size:var(--ite-text-sm);
  text-decoration:none;white-space:nowrap}
.skip:focus{left:8px}

/* ============================================================================
   LAYOUT SHELL (§1.1)
   ============================================================================ */
/* Two-row grid: content (1fr) + footer (auto). The rail spans BOTH rows so it
   is one continuous dark element from the top to the very bottom of the page,
   beside the footer — no body-level offset, no strip, nothing to seam. */
.layout{display:grid;grid-template-columns:264px 1fr;grid-template-rows:1fr auto;min-height:100vh}
@media(min-width:1024px){.layout{grid-template-columns:300px 1fr}}
.content{min-width:0;grid-row:1;grid-column:2}
.content__inner{max-width:var(--ite-container-max);margin:0 auto;
  padding:0 var(--ite-container-pad)}
@media(min-width:1024px){.content__inner{padding:0 var(--ite-space-8)}}

/* ============================================================================
   DARK MILLED RAIL (§3.6, §6.1)
   ============================================================================ */
/* The rail cell spans both grid rows (content + footer) and fills the full page
   height with a flat dark base. The actual nav lives in a sticky inner that
   carries the gradient; below it, the flat base continues seamlessly (both end
   at var(--ite-chrome-bg)). Border + edge shadow live here so they run the full height. */
.sidebar{grid-row:1 / -1;grid-column:1;background:var(--ite-chrome-bg);
  border-right:1px solid var(--ite-chrome-border);color:var(--ite-gray-300);
  box-shadow:inset -1px 0 0 rgba(255,255,255,0.04),inset -6px 0 14px -10px rgba(0,0,0,0.6)}
.rail-inner{position:sticky;top:0;max-height:100vh;overflow-y:auto;
  padding:var(--ite-space-6) 0 var(--ite-space-10);
  background:linear-gradient(180deg,var(--ite-chrome-bg-top),var(--ite-gray-900) 64%,var(--ite-chrome-bg) 88%)}
.rail-head{padding:0 var(--ite-space-6) var(--ite-space-5);
  border-bottom:1px solid var(--ite-chrome-border-2);margin-bottom:var(--ite-space-4)}
.rail-mark{display:flex;align-items:center;gap:10px}
.rail-mark .rotor{width:30px;height:30px;flex:0 0 30px}
.rail-wordmark{font-family:var(--ite-font-display);font-weight:700;
  font-size:var(--ite-text-lg);letter-spacing:-0.02em;color:var(--ite-white);line-height:1}
.rail-sub{font-size:var(--ite-text-2xs);letter-spacing:0.06em;color:var(--ite-gray-500);
  text-transform:uppercase;margin-top:3px}
.rail-version{font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);color:var(--ite-gray-500)}
.rail-search{margin:var(--ite-space-4) var(--ite-space-6) var(--ite-space-2);
  display:flex;align-items:center;gap:8px;
  width:calc(100% - var(--ite-space-6)*2);background:var(--ite-chrome-bg-2);
  border:1px solid var(--ite-chrome-border);border-radius:var(--ite-radius-md);
  padding:8px 10px;color:var(--ite-gray-400);font-size:var(--ite-text-sm);cursor:text}
.rail-search:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.rail-search .kbd{margin-left:auto;font-family:var(--ite-font-mono);
  font-size:var(--ite-text-2xs);color:var(--ite-gray-400);border:1px solid var(--ite-chrome-line);
  border-radius:5px;padding:1px 6px;background:var(--ite-chrome-surface)}
/* 4 nav groups (R-12) */
.rail-group{margin-top:var(--ite-space-5)}
.rail-group__label{font-size:var(--ite-text-2xs);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ite-gray-500);padding:0 var(--ite-space-6) 6px;
  display:flex;align-items:center;gap:8px;user-select:none}
.rail-group__label::before{content:"";width:14px;height:1px;background:var(--ite-gray-600)}
/* Rail links */
.rail-link{display:flex;align-items:center;gap:10px;padding:7px var(--ite-space-6);
  color:var(--ite-gray-300);text-decoration:none;font-size:var(--ite-text-sm);
  border-left:2px solid transparent;
  transition:color var(--ite-dur-fast) var(--ite-ease-standard),
    background var(--ite-dur-fast) var(--ite-ease-standard),
    border-color var(--ite-dur-fast) var(--ite-ease-standard)}
.rail-link .num{font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);
  color:var(--ite-gray-500);min-width:18px}
.rail-link:hover{color:var(--ite-white);background:rgba(255,255,255,0.03)}
.rail-link:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.rail-link[aria-current="page"]{color:var(--ite-white);
  border-left-color:var(--ite-orange-500);
  background:linear-gradient(90deg,rgba(242,101,34,0.12),transparent 80%)}
.rail-link[aria-current="page"] .num{color:var(--ite-orange-300)}
/* On-this-page sub-nav */
.nav__sub{margin:2px 0 6px 28px;border-left:1px solid var(--ite-chrome-border);padding-left:8px}
.nav__sublink{display:block;padding:5px 8px;border-radius:6px;text-decoration:none;
  font-size:var(--ite-text-sm);color:var(--ite-gray-500);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__sublink:hover{color:var(--ite-gray-200);background:rgba(255,255,255,0.04)}
.nav__sublink.is-active{color:var(--ite-orange-300)}
.nav__badge{font-size:var(--ite-text-3xs);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--ite-gray-400);background:var(--ite-chrome-surface);border-radius:999px;padding:2px 7px;
  border:1px solid var(--ite-chrome-border)}

/* ============================================================================
   MOBILE TOPBAR + DRAWER (≤767, R-10)
   ============================================================================ */
.topbar{display:none}.scrim{display:none}
@media(max-width:767px){
  .layout{display:block}
  .topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;
    z-index:var(--ite-z-mobilebar);background:linear-gradient(180deg,var(--ite-chrome-bg-top),var(--ite-gray-900));
    border-bottom:1px solid var(--ite-chrome-border);padding:10px 14px;color:var(--ite-white)}
  .topbar .burger{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:1px solid var(--ite-chrome-line);border-radius:var(--ite-radius-md);
    background:var(--ite-chrome-surface);cursor:pointer;flex:0 0 40px}
  .topbar .burger:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
  .topbar .burger span{position:relative;width:16px;height:2px;background:var(--ite-gray-100)}
  .topbar .burger span::before,.topbar .burger span::after{content:"";position:absolute;
    left:0;width:16px;height:2px;background:var(--ite-gray-100)}
  .topbar .burger span::before{top:-5px}.topbar .burger span::after{top:5px}
  .topbar .tb-mark{font-family:var(--ite-font-display);font-weight:700;
    font-size:var(--ite-text-base);letter-spacing:-0.02em}
  .topbar .tb-k{margin-left:auto;font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);
    color:var(--ite-gray-400);border:1px solid var(--ite-chrome-line);border-radius:5px;
    padding:3px 8px;background:var(--ite-chrome-surface);cursor:pointer}
  .topbar .tb-k:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);
    z-index:var(--ite-z-drawer);transform:translateX(-100%);
    transition:transform var(--ite-dur-base) var(--ite-ease-standard);height:100vh}
  .sidebar.open,.sidebar.is-open{transform:translateX(0)}
  .scrim{position:fixed;inset:0;z-index:var(--ite-z-overlay);
    background:rgba(19,20,24,0.5);opacity:0;pointer-events:none;
    transition:opacity var(--ite-dur-base) var(--ite-ease-standard)}
  .scrim.open,.scrim.is-open{display:block;opacity:1;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}.scrim{transition:none}}

/* Fallback menu-toggle from legacy book.js chrome */
.menu-toggle{display:none}

/* ============================================================================
   CHAPTER LID — .chapter-lid.alloy (§6.3)
   ============================================================================ */
/* P1: banners align to the content column (no full-bleed break-out) so their
   edges match the card grid within the single 1440 container. */
.chapter-lid{position:relative;border-radius:0 0 var(--ite-radius-xl) var(--ite-radius-xl);
  padding:var(--ite-space-10) var(--ite-space-8) var(--ite-space-8);overflow:hidden;
  margin:0 0 var(--ite-space-10)}
.chapter-lid::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--ite-grain);background-size:160px 160px;opacity:0.05;mix-blend-mode:multiply}
.lid-num{font-family:var(--ite-font-mono);font-weight:600;font-size:var(--ite-text-sm);
  color:var(--ite-gray-700);text-shadow:var(--engrave);letter-spacing:0.08em}
.chapter-lid h1{font-family:var(--ite-font-display);font-weight:700;letter-spacing:-0.03em;
  font-size:clamp(2rem,4vw,3rem);color:var(--ite-gray-900);text-shadow:var(--engrave);
  margin:var(--ite-space-3) 0 var(--ite-space-3);position:relative;z-index:1}
.chapter-lid p{max-width:56ch;color:var(--ite-gray-700);position:relative;z-index:1;
  font-size:var(--ite-text-lg);line-height:var(--ite-leading-relaxed)}
/* Decorative engineering line-art at right of lid */
.lid-form{position:absolute;right:-10px;top:50%;transform:translateY(-50%);
  width:240px;height:auto;opacity:0.32;z-index:0}
.lid-form *{stroke:var(--ite-gray-700);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}

/* ============================================================================
   BODY SECTIONS (ink-on-white — no metal)
   ============================================================================ */
.section{padding:0 0 var(--ite-space-12);scroll-margin-top:32px}
.section + .section{border-top:none;padding-top:0}
.section__head{margin-bottom:var(--ite-space-6)}
.section__head .ite-overline{color:var(--ite-text-orange)}
.section__head h2{font-family:var(--ite-font-display);font-weight:600;
  font-size:var(--ite-text-2xl);letter-spacing:-0.02em;margin:6px 0 4px}
.section__head p{color:var(--ite-color-text-muted);font-size:var(--ite-text-sm);max-width:62ch}
/* Eyebrow */
.eyebrow{font-size:var(--ite-text-xs);font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ite-text-orange);margin:0 0 10px}
.eyebrow__chap{font-family:var(--ite-font-mono);color:var(--ite-color-text-subtle)}
/* Headings */
.section h1{font-family:var(--ite-font-display);font-size:var(--ite-text-5xl);
  font-weight:700;line-height:1.15;letter-spacing:-0.03em;margin:0 0 16px}
.section h2{font-family:var(--ite-font-display);font-size:var(--ite-text-3xl);
  font-weight:700;line-height:1.3;letter-spacing:-0.02em;margin:0 0 12px}
.section h3{font-family:var(--ite-font-display);font-size:var(--ite-text-xl);
  font-weight:600;margin:40px 0 12px}
.section p{color:var(--ite-color-text-muted);margin:0 0 16px;max-width:68ch}
.section .lead{font-size:var(--ite-text-xl);line-height:var(--ite-leading-relaxed);
  color:var(--ite-color-text);margin-bottom:28px}
/* In-body links: ink text + orange underline accent (AAA — never colour alone) */
.section a{color:var(--ite-color-text);text-decoration:underline;
  text-decoration-color:var(--ite-link-underline);text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:text-decoration-color var(--ite-dur-fast) var(--ite-ease-standard)}
.section a:hover{text-decoration-color:var(--ite-orange-600)}
/* Block links (cards, prev/next) are not body links — no underline. */
.section a.btn,.section a.cplate,.section a.pf-link,
.section a.cat-card,.section a.rs-card,.section a.rs-feat__card{text-decoration:none}
.section ul,.section ol{color:var(--ite-color-text-muted);padding-left:22px;margin:0 0 16px}
.section li{margin:6px 0}
/* Conformance checklist — crisp green "passed" tiles (every item conforms),
   matching the success colour used by the AAA badges elsewhere. */
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.check-list li{position:relative;padding:13px 16px 13px 48px;margin:0;
  background:var(--ite-color-bg-subtle);border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);
  color:var(--ite-color-text);line-height:var(--ite-leading-normal)}
.check-list li::before{content:"";position:absolute;left:15px;top:13px;
  width:21px;height:21px;border-radius:6px;corner-shape:var(--ite-corner);
  background:linear-gradient(155deg,#2faa66,#1c7c4a 58%,#15643c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.32),0 1px 2px rgba(0,0,0,0.18)}
.check-list li::after{content:"✓";position:absolute;left:15px;top:13px;
  width:21px;height:21px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:var(--ite-white);line-height:1}
.section strong{color:var(--ite-color-text);font-weight:600}
/* Heading anchor */
.anchor{margin-left:8px;color:var(--ite-text-orange);text-decoration:none;
  font-family:var(--ite-font-mono);font-size:0.8em;font-weight:500;
  opacity:0;transform:translateX(-4px);
  transition:opacity var(--ite-dur-fast) var(--ite-ease-standard),
    transform var(--ite-dur-fast) var(--ite-ease-standard)}
h2:hover .anchor,h3:hover .anchor,.anchor:focus-visible{opacity:1;transform:none}

/* ============================================================================
   COLOR RAMP (§6.9) — reflows/scrolls < sm (UX §4 fix)
   ============================================================================ */
.ramp{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-top:var(--ite-space-4)}
@media(max-width:640px){.ramp{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .ramp::-webkit-scrollbar{height:5px}
  .ramp::-webkit-scrollbar-thumb{background:var(--ite-gray-300);border-radius:9999px}
  .ramp .swatch{flex:0 0 84px;scroll-snap-align:start}}
/* Ramp step (renderRamp variant from book.js) */
.ramp__step{height:56px;position:relative;cursor:pointer;border-radius:var(--ite-radius-sm);
  border:1px solid rgba(0,0,0,0.06)}
.ramp__step span{position:absolute;bottom:4px;left:0;right:0;text-align:center;
  font-family:var(--ite-font-mono);font-size:var(--ite-text-micro);color:rgba(255,255,255,.85)}
.ramp__step.is-dark span{color:rgba(0,0,0,.5)}

/* ============================================================================
   SWATCHES (§6.8 — button-based, not ramp steps)
   ============================================================================ */
.swatch{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);
  overflow:hidden;cursor:pointer;background:none;text-align:left;padding:0;
  font:inherit;color:inherit;
  transition:transform var(--ite-dur-fast) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard)}
.swatch:hover{transform:translateY(-2px);box-shadow:var(--ite-shadow-sm)}
.swatch:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.swatch__chip{height:64px}
.swatch__meta{padding:7px 8px;border-top:1px solid var(--ite-color-border)}
.swatch__meta .n{font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);font-weight:600;display:block}
.swatch__meta .h{font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);color:var(--ite-color-text-muted)}
.swatch__copied{display:block;font-size:var(--ite-text-3xs);color:var(--ite-text-orange);
  height:0;opacity:0;overflow:hidden;transition:opacity var(--ite-dur-fast)}
.swatch.copied .swatch__copied{height:auto;opacity:1}

/* ============================================================================
   SPEC-PLATE — .plate (§6.5, Concept C)
   ============================================================================ */
.plate-stack{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ite-space-5)}
@media(max-width:768px){.plate-stack{grid-template-columns:1fr}}
.plate{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  background:var(--ite-color-surface);box-shadow:var(--ite-ring-hairline);overflow:hidden}
.plate__head{display:flex;align-items:center;gap:10px;padding:11px 14px;
  background:var(--ite-color-bg-subtle);border-bottom:1px solid var(--ite-color-border)}
.plate__head .dot{width:14px;height:14px;border-radius:4px;border:1px solid var(--ite-color-border)}
.plate__head .name{font-family:var(--ite-font-display);font-weight:600;
  font-size:var(--ite-text-base)}
.plate__head .role{margin-left:auto;font-size:var(--ite-text-2xs);letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ite-color-text-subtle)}
.plate__row{display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--ite-color-border)}
.plate__row:last-child{border-bottom:0}
.plate__k{font-size:var(--ite-text-2xs);letter-spacing:0.05em;text-transform:uppercase;
  color:var(--ite-color-text-subtle);min-width:64px}
.plate__v{font-family:var(--ite-font-mono);font-size:var(--ite-text-sm);color:var(--ite-color-text)}

/* ============================================================================
   COPY BUTTON (§6.7)
   ============================================================================ */
.copy{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--ite-color-border);background:var(--ite-color-surface);
  border-radius:var(--ite-radius-sm);padding:4px 9px;cursor:pointer;
  font-size:var(--ite-text-2xs);color:var(--ite-color-text-muted);min-height:28px;
  transition:border-color var(--ite-dur-fast) var(--ite-ease-standard),
    color var(--ite-dur-fast) var(--ite-ease-standard)}
.copy:hover{border-color:var(--ite-gray-400);color:var(--ite-color-text)}
.copy:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.copy.done{color:var(--ite-text-orange);border-color:var(--ite-orange-300)}

/* ============================================================================
   CONTRAST MATRIX (§6.10) — stacked cards < md (UX §4 fix)
   ============================================================================ */
.matrix{width:100%;border-collapse:separate;border-spacing:0;
  margin-top:var(--ite-space-4);font-size:var(--ite-text-sm)}
.matrix th,.matrix td{text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--ite-color-border)}
.matrix th{font-size:var(--ite-text-2xs);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ite-color-text-subtle);font-weight:600}
.matrix tbody tr:hover{background:var(--ite-color-bg-subtle)}
.matrix .pair{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ite-font-mono);font-size:12px}
.matrix .sw{width:26px;height:18px;border-radius:4px;border:1px solid var(--ite-color-border)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--ite-text-2xs);font-weight:600;
  padding:3px 9px;border-radius:9999px}
/* [BRAND EVOLUTION] --ite-color-success: #1c7c4a (landed in C2) */
.tag--pass{background:var(--ite-color-success-bg);color:var(--ite-color-success-text);border:1px solid var(--ite-color-success-border)}
.tag--ui{background:var(--ite-orange-50);color:var(--ite-text-orange);
  border:1px solid var(--ite-orange-200)}
@media(max-width:768px){
  .matrix,.matrix tbody,.matrix tr,.matrix td{display:block;width:100%}
  .matrix thead{position:absolute;left:-9999px}
  .matrix tr{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);
    margin-bottom:12px;padding:6px 4px;background:var(--ite-color-surface)}
  .matrix td{border:0;display:flex;justify-content:space-between;gap:14px;padding:7px 14px}
  .matrix td::before{content:attr(data-k);font-size:var(--ite-text-2xs);letter-spacing:0.06em;
    text-transform:uppercase;color:var(--ite-color-text-subtle);font-weight:600}
}

/* ============================================================================
   ENGINEERING NOTE / CALLOUT (§6.14)
   ============================================================================ */
.note{border-left:2px solid var(--ite-orange-500);background:var(--ite-orange-50);
  padding:14px 16px;border-radius:0 var(--ite-radius-md) var(--ite-radius-md) 0;
  font-size:var(--ite-text-sm);color:var(--ite-gray-800);margin-top:var(--ite-space-6)}
.note strong{color:var(--ite-text-orange)}
/* When a .note is used inline as a caption in a flex .stage (e.g. Iconography),
   drop the block margin so it sits centred with the icons. */
.stage .note{margin-top:0;align-self:center}

/* ============================================================================
   PAGE FOOTER — .pagefoot (§6.15)
   ============================================================================ */
.pagefoot{display:flex;justify-content:space-between;gap:var(--ite-space-4);
  padding:var(--ite-space-12) 0;border-top:1px solid var(--ite-color-border)}
.pf-link{text-decoration:none;color:var(--ite-color-text);
  display:flex;flex-direction:column;gap:3px;padding:12px 16px;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);min-width:190px;
  transition:border-color var(--ite-dur-fast) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard)}
.pf-link:hover{border-color:var(--ite-gray-400);box-shadow:var(--ite-shadow-sm)}
.pf-link:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.pf-link .k{font-size:var(--ite-text-2xs);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ite-color-text-subtle)}
.pf-link .v{font-family:var(--ite-font-display);font-weight:600}
.pf-link--next{text-align:right}
/* Legacy book.js injected classes */
.pagefoot__link{text-decoration:none;color:var(--ite-color-text);
  display:flex;flex-direction:column;gap:3px;padding:12px 16px;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);min-width:190px;
  transition:border-color var(--ite-dur-fast) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard)}
.pagefoot__link:hover{border-color:var(--ite-gray-400);box-shadow:var(--ite-shadow-sm)}
.pagefoot__dir{font-size:var(--ite-text-2xs);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ite-color-text-subtle)}
.pagefoot__title{font-family:var(--ite-font-display);font-weight:600}
.pagefoot__link--next{text-align:right}
/* ============================================================================
   SITE FOOTER — single brand footer (§6.15b). Lives in the grid's content
   column (row 2), so it sits in the white right section while the dark rail
   spans the full height beside it. Logo + version shown once; chapter number
   filled by book.js #footNum.
   ============================================================================ */
.site-footer{position:relative;grid-row:2;grid-column:2;background:var(--ite-color-bg-subtle)}
/* Full-bleed copper separator — spans the whole content column, from the
   sidebar's right edge to the right screen edge (no inset, no fade-out). */
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#a85a36,#dd9560 32%,#f3b387 55%,#dd9560 80%,#a85a36)}
.site-footer__inner{position:relative;max-width:var(--ite-container-max);
  margin:0 auto;padding:var(--ite-space-8) var(--ite-container-pad);
  display:flex;align-items:center;gap:var(--ite-space-5) var(--ite-space-8);
  flex-wrap:wrap}
@media(min-width:1024px){.site-footer__inner{padding-left:var(--ite-space-8);
  padding-right:var(--ite-space-8)}}
.site-footer__mark{display:flex;align-items:center;gap:10px}
.site-footer__num{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  letter-spacing:0.06em;color:var(--ite-color-text-subtle);
  padding-left:10px;margin-left:2px;border-left:1px solid var(--ite-color-border)}
.site-footer__mark .rotor{width:26px;height:26px;flex:0 0 26px}
.site-footer__lockup{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  letter-spacing:0.04em;color:var(--ite-color-text-muted)}
.site-footer__lockup b{color:var(--ite-color-text);font-weight:600}
.site-footer__copy{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  color:var(--ite-color-text-subtle);margin-left:auto}
/* "Back to cover" — designed squircle link with a copper-tinted hover lift */
.site-footer__cover{display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;font-size:var(--ite-text-sm);font-weight:600;
  color:var(--ite-color-text);padding:9px 16px;
  border:1px solid var(--ite-color-border-strong);border-radius:var(--ite-radius-md);
  corner-shape:var(--ite-corner);background:var(--ite-color-surface);
  transition:border-color var(--ite-dur-fast) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard),
    transform var(--ite-dur-fast) var(--ite-ease-standard)}
.site-footer__cover:hover{border-color:var(--ite-gray-400);
  box-shadow:var(--ite-shadow-sm);transform:translateY(-1px)}
.site-footer__cover:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.site-footer__arrow{font-size:14px;line-height:1;color:var(--ite-text-orange);
  transition:transform var(--ite-dur-base) var(--ite-ease-emphasis)}
.site-footer__cover:hover .site-footer__arrow{transform:translateY(-2px)}
@media(max-width:639px){
  .site-footer__inner{flex-direction:column;align-items:flex-start;
    gap:var(--ite-space-4)}
  .site-footer__copy{margin-left:0}
}

/* ============================================================================
   TOAST (§6.16)
   ============================================================================ */
.toast{position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--ite-gray-900);color:var(--ite-white);
  padding:10px 18px;border-radius:var(--ite-radius-md);font-size:var(--ite-text-sm);
  opacity:0;pointer-events:none;
  transition:opacity var(--ite-dur-base) var(--ite-ease-standard),
    transform var(--ite-dur-base) var(--ite-ease-standard);
  z-index:var(--ite-z-toast)}
.toast.show,.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================================
   OFFICIAL COLOUR SPEC — cs-plates / cs-matrix / cs-bands (book.js renderers)
   ============================================================================ */
.colorspec__tabs{margin:4px 0 20px}
.cs-plates{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cs-plate{grid-column:span 1;border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-lg);overflow:hidden;background:var(--ite-color-surface);
  box-shadow:var(--ite-shadow-sm);
  transition:transform var(--ite-dur-base) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard)}
.cs-plate:hover{transform:translateY(-2px);box-shadow:var(--ite-shadow-md)}
.cs-plate--hero{grid-column:1 / -1}
.cs-plate__chip{height:170px}
.cs-plate--hero .cs-plate__chip{height:240px}
.cs-plate__chip--bordered{border-bottom:1px solid var(--ite-color-border)}
.cs-plate__body{padding:18px 20px 20px}
.cs-plate__name{font-family:var(--ite-font-display);font-size:var(--ite-text-xl);
  font-weight:700;letter-spacing:-0.02em;margin:0 0 2px;color:var(--ite-color-text)}
.cs-plate__pantone{font-size:var(--ite-text-sm);font-weight:600;
  color:var(--ite-color-text-muted);margin:0 0 14px}
.cs-plate__pantone sup{font-size:0.6em}
.cs-plate__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cs-val{font:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:8px 12px;border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-sm);
  background:var(--ite-color-bg-subtle);color:var(--ite-color-text);cursor:pointer;text-align:left}
.cs-val span{font-size:var(--ite-text-3xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ite-color-text-subtle)}
.cs-val b{font-family:var(--ite-font-mono);font-size:var(--ite-text-sm);font-weight:500}
.cs-val:hover{background:var(--ite-color-bg-muted)}
.cs-val:active{transform:translateY(1px)}
/* Matrix */
#csMatrix{overflow-x:auto}
.cs-matrix{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--ite-text-sm);
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);overflow:hidden}
.cs-matrix thead th{text-align:left;background:var(--ite-color-bg-subtle);font-weight:600;
  padding:12px 14px;border-bottom:1px solid var(--ite-color-border)}
.cs-matrix__chip{display:inline-block;width:14px;height:14px;border-radius:var(--ite-radius-xs);
  margin-right:8px;vertical-align:-2px}
.cs-matrix__chip--bordered{box-shadow:var(--ite-ring-hairline)}
.cs-matrix tbody th{text-align:left;padding:11px 14px;width:110px;font-size:var(--ite-text-xs);
  font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ite-color-text-subtle);border-bottom:1px solid var(--ite-color-border)}
.cs-matrix td{padding:6px 8px;border-bottom:1px solid var(--ite-color-border)}
.cs-matrix tbody tr:last-child th,.cs-matrix tbody tr:last-child td{border-bottom:none}
.cs-matrix tbody tr:hover{background:var(--ite-color-bg-subtle)}
.cs-cell{font:inherit;font-family:var(--ite-font-mono);font-size:var(--ite-text-sm);
  background:none;border:none;border-radius:var(--ite-radius-xs);color:var(--ite-color-text);
  cursor:pointer;padding:5px 6px;text-align:left}
.cs-cell:hover{color:var(--ite-text-orange)}
.cs-cell--none{color:var(--ite-color-text-subtle);cursor:default;padding:5px 6px}
/* Bands */
.cs-band{border-radius:var(--ite-radius-xl);padding:24px 28px;margin:0 0 14px;
  display:flex;flex-direction:column;gap:14px}
.cs-band__name{font-family:var(--ite-font-display);font-size:var(--ite-text-2xl);
  font-weight:700;letter-spacing:-0.02em;margin:0}
.cs-band__vals{display:flex;flex-wrap:wrap;gap:8px}
.cs-band--black{color:var(--ite-black)}
.cs-band--white{color:var(--ite-white)}
.cs-band--bordered{border:1px solid var(--ite-color-border);color:var(--ite-color-text)}
.cs-val--band{background:transparent;color:inherit}
.cs-val--band span,.cs-val--band b{color:inherit}
.cs-val--band span{opacity:0.7}
.cs-band--black .cs-val--band{border-color:rgba(0,0,0,.28)}
.cs-band--black .cs-val--band:hover{background:rgba(0,0,0,.07)}
.cs-band--white .cs-val--band{border-color:rgba(255,255,255,.35)}
.cs-band--white .cs-val--band:hover{background:rgba(255,255,255,.12)}
.cs-band--bordered .cs-val--band{border-color:var(--ite-color-border)}
.cs-band--bordered .cs-val--band:hover{background:var(--ite-color-bg-muted)}
/* Typography pins */
.section p.cs-plate__name{color:var(--ite-color-text);margin:0 0 2px}
.section p.cs-plate__pantone{color:var(--ite-color-text-muted);margin:0 0 14px}
.section p.cs-band__name{color:inherit;margin:0}

/* ============================================================================
   PALETTE EXPLORER + COLOUR-PAGE CONTROLS (Ch.8 rework)
   Segmented view switcher, format toggle, swatch chips, contrast checker,
   usage-in-context demos, copy-as-code export. Reuses .ramp / .cs-* / .btn.
   ============================================================================ */
/* Control bar: view switcher (left) + format toggle (right) */
.seg-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--ite-space-3);margin:var(--ite-space-5) 0 var(--ite-space-6)}
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--ite-color-bg-subtle);
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);padding:3px}
.seg__btn{font:inherit;font-size:var(--ite-text-sm);font-weight:500;
  color:var(--ite-color-text-muted);background:none;border:0;cursor:pointer;
  padding:7px 16px;border-radius:var(--ite-radius-md);min-height:36px;
  transition:background var(--ite-dur-fast) var(--ite-ease-standard),
    color var(--ite-dur-fast) var(--ite-ease-standard)}
.seg__btn:hover{color:var(--ite-color-text)}
.seg__btn.is-active{background:var(--ite-color-surface);color:var(--ite-color-text);
  box-shadow:var(--ite-shadow-sm)}
.seg__btn:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.fmt-toggle{display:inline-flex;border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-sm);overflow:hidden;font-family:var(--ite-font-mono)}
.fmt-toggle button{font:inherit;font-size:var(--ite-text-2xs);letter-spacing:0.04em;
  background:var(--ite-color-surface);color:var(--ite-color-text-muted);
  border:0;border-left:1px solid var(--ite-color-border);cursor:pointer;
  padding:7px 12px;min-height:34px}
.fmt-toggle button:first-child{border-left:0}
.fmt-toggle button.is-active{background:var(--ite-orange-600);color:var(--ite-white)}
.fmt-toggle button:focus-visible{outline:var(--ite-focus-ring);outline-offset:-2px}

/* Palette groups + grid view */
.palette-view{margin-top:var(--ite-space-2)}
.pal-group{margin-bottom:var(--ite-space-8)}
.pal-group:last-child{margin-bottom:0}
.pal-group__head{font-size:var(--ite-text-xs);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ite-color-text-subtle);margin-bottom:var(--ite-space-3)}
.palette-fallback{color:var(--ite-color-text-muted);font-size:var(--ite-text-sm);
  margin-top:var(--ite-space-4)}

/* Swatch chips (core / semantic in the grid view) */
.swatch-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:var(--ite-space-3)}
.chip{display:flex;align-items:center;gap:10px;font:inherit;text-align:left;cursor:pointer;
  padding:8px;border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);
  background:var(--ite-color-surface);
  transition:transform var(--ite-dur-fast) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard)}
.chip:hover{transform:translateY(-2px);box-shadow:var(--ite-shadow-sm)}
.chip:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.chip__sw{flex:0 0 auto;width:38px;height:38px;border-radius:var(--ite-radius-sm)}
.chip__sw--bordered{box-shadow:var(--ite-ring-hairline)}
.chip__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.chip__name{font-size:var(--ite-text-sm);font-weight:600;color:var(--ite-color-text)}
.chip__val{font-size:var(--ite-text-2xs);color:var(--ite-color-text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Compact card grid + palette matrix tweaks for the whole-palette explorer */
.cs-plates--compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cs-plates--compact .cs-plate__chip{height:96px}
.cs-plates--compact .cs-plate--hero{grid-column:auto}
.cs-plates--compact .cs-plate--hero .cs-plate__chip{height:140px}
.cs-plates--compact .cs-plate__body{padding:12px 14px 14px}
.cs-plates--compact .cs-plate__name{font-size:var(--ite-text-base)}
.cs-plates--compact .cs-plate__pantone{font-size:var(--ite-text-xs);margin:0 0 10px}
#view-matrix{overflow-x:auto}
.cs-matrix--palette td,.cs-matrix--palette th{border-bottom:1px solid var(--ite-color-border)}
.cs-matrix--palette thead th.is-active{color:var(--ite-text-orange)}
.cs-matrix__group th{background:var(--ite-color-bg-subtle);
  font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);letter-spacing:0.06em;
  text-transform:uppercase;color:var(--ite-color-text-subtle);padding:9px 14px}
.cs-matrix__name{color:var(--ite-color-text);font-weight:500}
.cs-cell.is-active{color:var(--ite-text-orange);font-weight:600}
.cs-band--compact{padding:14px 18px;gap:8px;border-radius:var(--ite-radius-md)}
.cs-band--compact .cs-band__name{font-size:var(--ite-text-lg)}

/* Contrast checker */
.contrast-checker{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  background:var(--ite-color-surface);box-shadow:var(--ite-ring-hairline);
  padding:var(--ite-space-5);display:grid;gap:var(--ite-space-5);
  grid-template-columns:1fr;margin-top:var(--ite-space-4)}
@media(min-width:768px){.contrast-checker{grid-template-columns:1fr 1fr}
  .cc__controls{grid-column:1 / -1}}
.cc__controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ite-space-3)}
.cc__field{display:flex;flex-direction:column;gap:4px;flex:1 1 220px;
  font-size:var(--ite-text-2xs);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ite-color-text-subtle)}
.cc__field select{font:inherit;font-size:var(--ite-text-sm);text-transform:none;
  letter-spacing:0;color:var(--ite-color-text);padding:9px 11px;min-height:42px;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-sm);
  background:var(--ite-color-surface);cursor:pointer}
.cc__field select:focus-visible{outline:var(--ite-focus-ring);outline-offset:1px}
.cc__swap{flex:0 0 auto;align-self:flex-end;width:42px;height:42px;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-sm);
  background:var(--ite-color-surface);cursor:pointer;font-size:18px;
  color:var(--ite-color-text-muted)}
.cc__swap:hover{border-color:var(--ite-gray-400);color:var(--ite-color-text)}
.cc__swap:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.cc__sample{display:flex;flex-direction:column;gap:8px;justify-content:center;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);
  padding:var(--ite-space-5);min-height:150px}
.cc__aa{font-family:var(--ite-font-display);font-weight:700;font-size:2.5rem;line-height:1}
.cc__line{font-size:var(--ite-text-base)}
.cc__line--sm{font-size:var(--ite-text-sm)}
.cc__readout{display:flex;flex-direction:column;gap:var(--ite-space-4);justify-content:center}
/* Headline verdict — the ratio + the single highest level the pair clears.
   A left status bar (colour-coded) makes the pass/fail signal read instantly. */
.cc__score{display:flex;align-items:center;gap:var(--ite-space-5);flex-wrap:wrap;
  padding:var(--ite-space-4);padding-left:calc(var(--ite-space-4) + 6px);
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);
  corner-shape:var(--ite-corner);background:var(--ite-color-surface);position:relative;overflow:hidden}
.cc__score::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--ite-color-text-subtle)}
.cc__score--aaa::before{background:var(--ite-color-success)}
.cc__score--aa::before{background:var(--ite-color-warn-text)}
.cc__score--large::before{background:var(--ite-orange-500)}
.cc__score--fail::before{background:var(--ite-color-danger)}
.cc__ratio{font-family:var(--ite-font-display);display:flex;align-items:baseline;gap:5px;line-height:1}
.cc__ratio b{font-size:clamp(3rem,2rem + 4vw,4.25rem);font-weight:700;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;line-height:.9;color:var(--ite-color-text)}
.cc__ratio span{font-size:var(--ite-text-xl);color:var(--ite-color-text-muted)}
.cc__verdict{display:flex;flex-direction:column;gap:3px;min-width:0}
.cc__tier{font-family:var(--ite-font-display);font-weight:700;font-size:var(--ite-text-2xl);
  line-height:1;letter-spacing:-0.01em}
.cc__score--aaa .cc__tier{color:var(--ite-color-success-text)}
.cc__score--aa .cc__tier{color:var(--ite-text-orange)}
.cc__score--large .cc__tier{color:var(--ite-text-orange)}
.cc__score--fail .cc__tier{color:var(--ite-color-danger)}
.cc__note{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted)}
/* Grade table — context · threshold · AA/AAA chips, with a quiet header row. */
.cc__grades{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cc__grades li{display:grid;grid-template-columns:1.2fr 1.3fr auto;align-items:center;
  gap:var(--ite-space-3);padding:11px 0;border-bottom:1px solid var(--ite-color-border)}
.cc__grades li:last-child{border-bottom:0}
.cc__grades-head{padding:0 0 7px!important;border-bottom:1px solid var(--ite-color-border)!important}
.cc__grades-head span{font-size:var(--ite-text-3xs);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ite-color-text-subtle)}
.cc__grades-head .cc__marks{justify-self:end}
.cc__g{font-size:var(--ite-text-sm);font-weight:600;color:var(--ite-color-text)}
.cc__th{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  color:var(--ite-color-text-muted);letter-spacing:0}
.cc__marks{display:flex;gap:6px;justify-self:end}
@media(max-width:560px){
  .cc__grades li{grid-template-columns:1fr auto;gap:var(--ite-space-2) var(--ite-space-3)}
  .cc__g{grid-column:1;grid-row:1}
  .cc__th{grid-column:1;grid-row:2;margin-top:1px}
  .cc__marks{grid-column:2;grid-row:1 / 3;align-self:center}
  .cc__grades-head{grid-template-columns:1fr auto}
  .cc__grades-head .cc__th{display:none}
}
.tag--fail{background:var(--ite-color-danger-bg);color:var(--ite-color-danger);border:1px solid var(--ite-color-danger-border)}

/* Usage in context */
/* P8: 60-30-10 balance bars */
.balance{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ite-space-6);margin-top:var(--ite-space-4)}
@media(max-width:768px){.balance{grid-template-columns:1fr}}
.balance-case{margin:0}
.balance-case figcaption{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ite-color-text-subtle);margin-bottom:8px}
.balance-bar{display:flex;height:64px;border-radius:var(--ite-radius-md);overflow:hidden;
  box-shadow:var(--ite-ring-hairline)}
.balance-seg{display:flex;align-items:flex-end;padding:8px 10px;font-family:var(--ite-font-mono);
  font-size:var(--ite-text-2xs);font-weight:600;letter-spacing:0.02em}
.balance-case > p{margin:10px 0 0;font-size:var(--ite-text-sm);color:var(--ite-color-text-muted)}
.usage-demo{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ite-space-5);
  margin-top:var(--ite-space-4)}
@media(max-width:768px){.usage-demo{grid-template-columns:1fr}}
.usage-card{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  background:var(--ite-color-surface);box-shadow:var(--ite-ring-hairline);
  padding:var(--ite-space-5);display:flex;flex-direction:column;gap:var(--ite-space-3)}
.usage-card__tag{font-size:var(--ite-text-2xs);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ite-color-text-subtle)}
.usage-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ite-space-3)}
.usage-note{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);margin:0}
.usage-link{color:var(--ite-color-text);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--ite-link-underline);text-decoration-thickness:2px;text-underline-offset:3px}
.usage-link:hover{text-decoration-color:var(--ite-orange-600)}
.usage-card--brand{background:var(--ite-orange-500);color:var(--ite-black);
  border-color:var(--ite-orange-600)}
.usage-card--brand h3{font-family:var(--ite-font-display);font-weight:700;
  letter-spacing:-0.01em;font-size:var(--ite-text-xl);margin:0;color:var(--ite-black)}
.usage-card--brand p{margin:0;color:var(--ite-black)}
.usage-card--brand .usage-card__tag{color:rgba(0,0,0,.6)}
.pill{display:inline-flex;align-items:center;font-size:var(--ite-text-2xs);font-weight:600;
  padding:3px 10px;border-radius:9999px;background:var(--ite-color-bg-muted);
  color:var(--ite-color-text-muted)}
.pill--accent{background:var(--ite-orange-500);color:var(--ite-black)}
.usage-dontdo{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:var(--ite-space-5)}
@media(max-width:768px){.usage-dontdo{grid-template-columns:1fr}}
.dd{display:flex;align-items:center;gap:var(--ite-space-3);padding:var(--ite-space-4);
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);
  background:var(--ite-color-surface)}
.dd__label{font-size:var(--ite-text-2xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
.dd--do{border-left:3px solid var(--ite-color-success)}
.dd--do .dd__label{color:var(--ite-color-success-text)}
.dd--dont{border-left:3px solid var(--ite-color-danger)}
.dd--dont .dd__label{color:var(--ite-color-danger)}
.dd__chip{font-family:var(--ite-font-mono);font-size:var(--ite-text-sm);
  padding:7px 12px;border-radius:var(--ite-radius-sm)}

/* Copy-as-code export */
.code-export{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  overflow:hidden;background:var(--ite-color-surface);box-shadow:var(--ite-ring-hairline);
  margin-top:var(--ite-space-4)}
.code-export .seg-bar{margin:0;padding:var(--ite-space-3) var(--ite-space-4);
  border-bottom:1px solid var(--ite-color-border);background:var(--ite-color-bg-subtle)}
.code-export__copy{min-height:36px;padding:7px 16px}
.code-export__pre{margin:0;padding:var(--ite-space-5);overflow-x:auto;
  background:var(--ite-gray-900);color:var(--ite-gray-50);max-height:420px}
.code-export__pre code{font-family:var(--ite-font-mono);font-size:var(--ite-text-sm);
  line-height:1.6;white-space:pre}

/* ============================================================================
   TYPE SCALE SPECIMENS (book.js renderRamp)
   ============================================================================ */
.type-row{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--ite-color-border)}
.type-row:first-child{border-top:none}
.type-row__meta{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  color:var(--ite-color-text-muted)}

/* ============================================================================
   BUTTONS — .btn (§6.13)  min-height 44px, radius-md per spec
   ============================================================================ */
.btn{display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:var(--ite-text-sm);font-weight:500;
  border-radius:var(--ite-radius-md);padding:11px 18px;
  /* neutral base border — kills the UA <button> 2px outset bevel that
     otherwise reads as a dark stroke over half the button (variants override) */
  border:1px solid transparent;background-clip:padding-box;
  text-decoration:none;min-height:44px;cursor:pointer;
  transition:transform var(--ite-dur-fast) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard),
    background var(--ite-dur-fast) var(--ite-ease-standard)}
/* Primary = BLACK on vivid brand orange-500. AAA: the label is bold and
   ≥18.66px (14pt bold = WCAG "large text"), so black-on-orange-500 6.66:1
   clears the 4.5:1 large-text bar. This keeps the brand orange vivid while the
   site claims AAA. Hover BRIGHTENS to orange-400 (black rises to 7.6:1). */
.btn--primary{background:var(--ite-orange-500);color:var(--ite-black);
  font-size:1.1875rem;font-weight:700;letter-spacing:-0.01em;line-height:1;
  padding:9px 22px;
  border:1px solid var(--ite-orange-700);box-shadow:var(--ite-shadow-md)}
/* Option C — soft elevated shadow at rest; lifts on hover, settles on press */
.btn--primary:hover{background:var(--ite-orange-400);
  box-shadow:var(--ite-shadow-lg);transform:translateY(-1px)}
.btn--primary:active{background:var(--ite-orange-500);transform:translateY(0);box-shadow:var(--ite-shadow-sm)}
.btn--ghost{background:transparent;color:var(--ite-color-text);
  border:1px solid var(--ite-color-border-strong)}
.btn--ghost:hover{box-shadow:var(--ite-ring-hairline),var(--ite-shadow-sm);
  border-color:var(--ite-gray-400)}
.btn:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
/* D1 — specificity fix: .section a (0,1,1) outranks .btn--primary (0,1,0) */
.section a.btn--primary{color:var(--ite-black)}
.section a.btn--ghost{color:var(--ite-color-text)}

/* ============================================================================
   COVER HERO (archetype 1 — the ONE B moment, §4)
   ============================================================================ */
/* The cover is the first thing under the sticky topbar. The wash is a
   contained "engineered band": it breaks out to the content-column edges
   (cancelling .content__inner padding), rounds its lower corners and seats
   on a copper hairline so it reads as an intentional plate, not a SaaS
   full-page gradient. Padding inside is aligned to the page rhythm. */
/* NOTE: --ite-space-14 is not in the token scale (it jumps 12→16), so the
   original value silently resolved to 0 — the hero had no vertical padding
   and the CTAs hugged the bottom border. Fallback 3.5rem restores the intent. */
.cover{position:relative;padding:var(--ite-space-14,3.5rem) 0 var(--ite-space-14,3.5rem);
  margin:var(--ite-space-5) 0 var(--ite-space-12);overflow:visible}
/* P1: now an inset plate (not full-bleed) — round all four corners so it reads
   intentional. (Background treatment itself is reworked in P8.) */
/* P8: the hero is the flagship PREMIUM surface → 60% gunmetal-black /
   30% white / 10% orange (orange kept only as the hairline + accent word). */
.cover__wash{position:absolute;z-index:-2;
  top:0;bottom:0;left:0;right:0;
  background:var(--gun-sheen),var(--gun-brush),var(--gun-base);
  border-bottom:2px solid var(--ite-orange-500);
  border-radius:var(--ite-radius-2xl);
  box-shadow:var(--gun-edge),var(--ite-shadow-lg);overflow:hidden}
.cover__wash::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--ite-grain);background-size:160px 160px;
  opacity:var(--ite-grain-opacity,0.05);mix-blend-mode:multiply}
/* P1: wash is now the same width as the content column, so the content needs
   its own inset padding (the wash stays full-width as the plate background). */
.cover__inner{display:grid;grid-template-columns:1.04fr 0.96fr;
  gap:var(--ite-space-12);align-items:center;padding:0 var(--ite-space-10)}
@media(max-width:1023px){.cover__inner{grid-template-columns:1fr;gap:var(--ite-space-10)}}
.cover__text{min-width:0}
/* Eyebrow → pill with a copper status tick (hierarchy step 1) */
.eyebrow--pill{display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 10px;border:1px solid var(--ite-color-border);
  border-radius:999px;background:var(--ite-color-surface);
  box-shadow:var(--ite-shadow-xs);color:var(--ite-color-text-muted)}
.eyebrow--pill::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ite-orange-500);
  box-shadow:0 0 0 3px rgba(242,101,34,0.18)}
.cover h1{font-family:var(--ite-font-display);font-weight:700;letter-spacing:-0.03em;
  line-height:1.03;font-size:clamp(2.6rem,5.2vw,4rem);
  color:var(--ite-white);text-shadow:0 1px 1px rgba(0,0,0,0.35);
  margin:var(--ite-space-5) 0 var(--ite-space-5)}
/* Annotated word — orange-300 reads AAA on the gunmetal; underline = the accent */
.cover h1 .ann{color:var(--ite-orange-300);position:relative;white-space:nowrap}
.cover h1 .ann::after{content:"";position:absolute;left:0;right:0;bottom:0.04em;
  height:3px;background:linear-gradient(90deg,var(--ite-orange-500),var(--ite-orange-300));
  border-radius:2px;opacity:0.9}
.cover__lead{font-size:var(--ite-text-lg);line-height:var(--ite-leading-relaxed);
  color:var(--ite-gray-300);max-width:54ch}
/* Meta strip → dark-glass spec-rail with hairline dividers (on the gunmetal hero) */
.cover__meta{display:flex;gap:0;margin-top:var(--ite-space-8);flex-wrap:wrap;
  border:1px solid rgba(255,255,255,0.14);border-radius:var(--ite-radius-lg);
  background:rgba(255,255,255,0.05);backdrop-filter:blur(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);overflow:hidden;width:fit-content}
.meta-cell{display:flex;flex-direction:column;gap:3px;
  padding:12px var(--ite-space-5);border-left:1px solid rgba(255,255,255,0.14)}
.meta-cell:first-child{border-left:0}
.meta-cell .k{font-size:var(--ite-text-xs);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ite-gray-400)}
.meta-cell .v{font-family:var(--ite-font-mono);font-size:var(--ite-text-base);
  color:var(--ite-white)}
.cover__actions{display:flex;gap:var(--ite-space-3);margin-top:var(--ite-space-8);
  flex-wrap:wrap}
/* Eyebrow pill + ghost button: dark-surface variants for the gunmetal hero */
.cover .eyebrow--pill{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.18);
  color:var(--ite-gray-200);box-shadow:none}
/* Cover ghost sits on the dark gunmetal hero — white label + visible hairline.
   Specificity must beat .section a.btn--ghost (the AAA ink-link rule). */
.cover.section .btn--ghost{color:var(--ite-white);border-color:rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.04)}
.cover.section .btn--ghost:hover{border-color:rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12)}

/* Hero frame (§4.1) — the exploded-transformer plate.
   Blueprint-tinted radial wash + layered orange-tinted elevation so it reads
   as a machined instrument card, not a flat illustration. */
.hero-frame{position:relative;aspect-ratio:1/1;width:100%;max-width:480px;
  margin-inline:auto;
  border:1px solid var(--ite-color-border-strong);border-radius:var(--ite-radius-2xl);
  background:
    radial-gradient(130% 130% at 50% -8%, var(--ite-white), var(--ite-gray-50) 62%, var(--ite-gray-100) 100%);
  box-shadow:var(--ite-shadow-lg),var(--ite-ring-hairline);
  overflow:hidden;isolation:isolate}
.hero-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--ite-grain);background-size:160px 160px;
  opacity:var(--ite-grain-opacity,0.05);mix-blend-mode:multiply}
/* Inset corner registration brackets — drafting-table register */
.hero-frame::before{content:"";position:absolute;inset:14px;pointer-events:none;
  border:1px solid transparent;
  background:
    linear-gradient(var(--ite-orange-500),var(--ite-orange-500)) left top/16px 1px no-repeat,
    linear-gradient(var(--ite-orange-500),var(--ite-orange-500)) left top/1px 16px no-repeat,
    linear-gradient(var(--ite-orange-500),var(--ite-orange-500)) right bottom/16px 1px no-repeat,
    linear-gradient(var(--ite-orange-500),var(--ite-orange-500)) right bottom/1px 16px no-repeat;
  opacity:0.6;z-index:2}
/* Corner captions */
.hero-cap{position:absolute;left:18px;top:16px;font-size:var(--ite-text-2xs);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ite-color-text-subtle);
  font-family:var(--ite-font-mono);z-index:3}
.hero-cap--r{left:auto;right:18px;text-align:right}
.hero-svg{position:absolute;inset:0;width:100%;height:100%}

/* "Settle into tolerance" assemble layers (§4.3) */
.exp-layer{opacity:0;
  animation:seat var(--ite-dur-slower) var(--ite-ease-entrance) forwards}
.exp-layer.l1{animation-delay:120ms}
.exp-layer.l2{animation-delay:240ms}
.exp-layer.l3{animation-delay:360ms}
.exp-layer.l4{animation-delay:480ms}
.exp-leader{opacity:0;
  animation:fade var(--ite-dur-slow) var(--ite-ease-standard) forwards;
  animation-delay:640ms}
@keyframes seat{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}}
@keyframes fade{to{opacity:1}}

/* Live spec-anchor callouts (§4.4) */
.callout{position:absolute;font-size:var(--ite-text-2xs);font-family:var(--ite-font-mono);
  color:var(--ite-color-text);background:rgba(255,255,255,0.86);
  border:1px solid var(--ite-color-border);border-radius:6px;padding:2px 7px;
  backdrop-filter:blur(2px);white-space:nowrap}
.callout a{color:var(--ite-color-text);text-decoration:underline;
  text-decoration-color:var(--ite-link-underline);text-decoration-thickness:2px;text-underline-offset:3px}
.callout a:hover{text-decoration-color:var(--ite-orange-600)}

/* ============================================================================
   COVER-PLATE GRID — .plate-grid / .cplate (§6.2, Concept A catalogue)
   ============================================================================ */
.plate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ite-space-6)}
@media(max-width:1023px){.plate-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.plate-grid{grid-template-columns:1fr}}

/* Category band — editorial divider that heads each group of cards (P2).
   Engraved index + display title + count, finished with a copper hairline. */
.cat-band{display:flex;align-items:baseline;gap:var(--ite-space-4);
  margin:var(--ite-space-12) 0 var(--ite-space-6)}
.cat-band--first,.cat-band:first-child{margin-top:0}
.cat-band__idx{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  font-weight:600;letter-spacing:0.12em;color:var(--ite-text-orange)}
.cat-band__title{font-family:var(--ite-font-display);font-weight:700;
  font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-0.02em;line-height:1;margin:0;
  white-space:nowrap;color:var(--ite-color-text)}
.cat-band__meta{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  letter-spacing:0.06em;text-transform:uppercase;color:var(--ite-color-text-subtle);
  white-space:nowrap}
.cat-band__rule{flex:1;height:2px;align-self:center;border-radius:2px;
  background:linear-gradient(90deg,#a85a36,#dd9560 35%,#f3b387 60%,transparent)}
@media(max-width:560px){
  .cat-band{flex-wrap:wrap;gap:8px 12px}
  .cat-band__rule{flex-basis:100%;order:3}
}
/* Card is a flex column so the body fills the row-equalised height and the
   "Open chapter / View specs" foot bottom-aligns across every card (P2). */
.cplate{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);overflow:hidden;
  border:1px solid var(--ite-color-border);background:var(--ite-color-surface);
  box-shadow:var(--ite-ring-hairline);
  transition:transform var(--ite-dur-base) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard),
    border-color var(--ite-dur-fast) var(--ite-ease-standard)}
.cplate:hover{transform:translateY(-4px);box-shadow:var(--ite-shadow-lg);
  border-color:var(--ite-color-border-strong)}
.cplate:focus-visible{outline:var(--ite-focus-ring);outline-offset:3px}
.cplate__lid{position:relative;aspect-ratio:16/9;padding:14px 16px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between}
.cplate__lid::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--ite-grain);background-size:160px;opacity:0.04;mix-blend-mode:multiply}
/* Hover sheen — a soft light sweeps across the machined lid. */
.cplate__lid::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,0.55) 50%,transparent 62%);
  transform:translateX(-130%);
  transition:transform var(--ite-dur-slower) var(--ite-ease-standard)}
.cplate:hover .cplate__lid::before{transform:translateX(130%)}
.cplate__num{font-family:var(--ite-font-mono);font-weight:600;font-size:var(--ite-text-sm);
  color:var(--ite-gray-700);text-shadow:var(--engrave);position:relative;z-index:1}
.cplate__form{position:absolute;right:10px;bottom:8px;width:58%;height:auto;
  opacity:0.5;z-index:0}
.cplate__form path,.cplate__form line,.cplate__form rect,.cplate__form circle{
  stroke:var(--ite-gray-700);stroke-width:1.1;fill:none;vector-effect:non-scaling-stroke}
.cplate__body{display:flex;flex-direction:column;flex:1;
  padding:16px 18px 18px;border-top:1px solid var(--ite-color-border)}
.cplate__body h3{font-family:var(--ite-font-display);font-weight:600;
  font-size:var(--ite-text-xl);letter-spacing:-0.015em;line-height:1.15}
.cplate__body p{color:var(--ite-color-text-muted);font-size:var(--ite-text-sm);
  margin-top:6px;line-height:var(--ite-leading-normal)}
.cplate__foot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;
  font-size:var(--ite-text-2xs);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ite-text-orange);font-weight:600}
.cplate__foot::after{content:"→";font-weight:700;
  transition:transform var(--ite-dur-fast) var(--ite-ease-standard)}
.cplate:hover .cplate__foot::after{transform:translateX(4px)}

/* ============================================================================
   PRODUCT SLIM LID — .prod-lid.alloy (§6.4, archetype 4)
   ============================================================================ */
/* Product header = premium GUNMETAL band (60-30-10: dark ground, white type,
   orange/copper accents). Flagship treatment that sets products apart from the
   light alloy chapter lids. Overrides the .alloy class background. (P5) */
.prod-lid{position:relative;display:grid;grid-template-columns:1fr 380px;
  gap:var(--ite-space-10);align-items:center;
  background:var(--gun-sheen),var(--gun-brush),var(--gun-base);
  box-shadow:var(--gun-edge),var(--ite-shadow-lg);
  border-radius:var(--ite-radius-2xl);corner-shape:var(--ite-corner);
  padding:var(--ite-space-10);
  overflow:hidden;margin:var(--ite-space-5) 0 var(--ite-space-12)}
@media(max-width:1023px){.prod-lid{grid-template-columns:1fr;gap:var(--ite-space-6)}}
.prod-lid::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--ite-grain);background-size:160px;opacity:0.06;mix-blend-mode:overlay}
.prod-lid .crumb{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  letter-spacing:0.08em;color:var(--ite-orange-300);position:relative;z-index:1}
.prod-lid h1{font-family:var(--ite-font-display);font-weight:700;letter-spacing:-0.03em;
  font-size:clamp(1.875rem,3.5vw,2.75rem);color:var(--ite-white);
  text-shadow:0 1px 2px rgba(0,0,0,0.4);margin:10px 0 8px;position:relative;z-index:1}
.prod-lid .tagline{color:var(--ite-gray-300);max-width:48ch;
  position:relative;z-index:1}
.placeholder-flag{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:var(--ite-text-2xs);font-weight:600;letter-spacing:0.04em;
  color:var(--ite-text-orange);background:rgba(255,255,255,0.6);
  border:1px dashed var(--ite-orange-300);border-radius:9999px;
  padding:4px 11px;position:relative;z-index:1}
/* Hero reuse slot — static line-art poster in product lid */
.prod-hero{position:relative;aspect-ratio:1/1;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-xl);
  background:radial-gradient(120% 120% at 50% 0%,var(--ite-white),var(--ite-gray-50) 80%);
  box-shadow:var(--ite-shadow-md);overflow:hidden;z-index:1}
.prod-hero .cap{position:absolute;left:12px;top:10px;
  font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);
  letter-spacing:0.06em;color:var(--ite-color-text-subtle)}
.prod-hero svg{position:absolute;inset:0;width:100%;height:100%}
.prod-hero svg *{stroke:var(--ite-gray-700);stroke-width:1.1;fill:none;vector-effect:non-scaling-stroke}

/* ============================================================================
   RATING PLATE — .rating-plate (§6.6, Concept C physical-object metaphor)
   ============================================================================ */
.rating-plate{border:1px solid var(--ite-gray-300);border-radius:var(--ite-radius-lg);
  corner-shape:var(--ite-corner);
  overflow:hidden;box-shadow:var(--ite-ring-hairline),var(--ite-shadow-md);
  max-width:580px}
/* Nameplate header: brushed-alloy bar with a copper hairline beneath. */
.rating-plate__top{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:var(--alloy-sheen),var(--alloy-grain),var(--alloy-base);
  border-bottom:1px solid var(--ite-gray-300)}
.rating-plate__top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,#a85a36,#dd9560 40%,#f3b387 65%,transparent)}
/* rating-plate chip → copper accent (overrides the paired .alloy background) */
.alloy-chip{width:38px;height:38px;border-radius:7px;corner-shape:var(--ite-corner);flex:none;
  background:var(--copper-sheen),var(--copper-base);box-shadow:var(--copper-edge)}
.rating-plate__top .t-name{font-family:var(--ite-font-display);font-weight:700;
  font-size:var(--ite-text-xl);letter-spacing:-0.015em;text-shadow:var(--engrave)}
.rating-plate__top .t-sub{font-size:var(--ite-text-2xs);letter-spacing:0.07em;text-transform:uppercase;
  color:var(--ite-color-text-muted);margin-top:2px}
.dl{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-sm);
  padding:5px 10px;font-size:var(--ite-text-2xs);color:var(--ite-color-text-muted);
  cursor:pointer;min-height:30px;background:var(--ite-color-surface);
  transition:border-color var(--ite-dur-fast) var(--ite-ease-standard),
    color var(--ite-dur-fast) var(--ite-ease-standard)}
.dl:hover{border-color:var(--ite-gray-400);color:var(--ite-color-text)}
.dl:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.rating-grid{display:grid;grid-template-columns:1fr 1fr;background:var(--ite-color-surface)}
.rating-grid .cell{padding:13px 18px;border-bottom:1px solid var(--ite-color-border);
  border-right:1px solid var(--ite-color-border)}
.rating-grid .cell:nth-child(2n){border-right:0}
.rating-grid .k{font-size:var(--ite-text-2xs);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ite-color-text-subtle)}
.rating-grid .v{font-family:var(--ite-font-mono);font-size:var(--ite-text-lg);font-weight:500;
  color:var(--ite-color-text);margin-top:3px}

/* ============================================================================
   VARIANT CARDS — .vcard (§6.11)
   ============================================================================ */
.variants{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ite-space-5);
  margin-top:var(--ite-space-4)}
@media(max-width:1023px){.variants{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.variants{grid-template-columns:1fr}}
.vcard{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  background:var(--ite-color-surface);box-shadow:var(--ite-ring-hairline);
  padding:16px;
  transition:transform var(--ite-dur-base) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard)}
.vcard:hover{transform:translateY(-2px);box-shadow:var(--ite-shadow-sm)}
.vcard .rating{font-family:var(--ite-font-display);font-weight:700;
  font-size:var(--ite-text-2xl);letter-spacing:-0.02em}
.vcard .unit{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);font-weight:400}
.vcard .meta{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);margin-top:6px}
.vcard hr{border:0;border-top:1px solid var(--ite-color-border);margin:12px 0}
.vcard .row{display:flex;justify-content:space-between;
  font-size:var(--ite-text-sm);padding:3px 0}
.vcard .row .vv{font-family:var(--ite-font-mono)}

/* ============================================================================
   SPEC TABLE — .spec (§6.12)
   ============================================================================ */
.spec{width:100%;border-collapse:separate;border-spacing:0;
  font-size:var(--ite-text-sm);max-width:640px}
.spec td{padding:10px 14px;border-bottom:1px solid var(--ite-color-border)}
.spec tr:last-child td{border-bottom:0}
.spec .k{color:var(--ite-color-text-muted);width:46%}
.spec .v{font-family:var(--ite-font-mono);color:var(--ite-color-text)}
.spec tr:hover{background:var(--ite-color-bg-subtle)}

/* ============================================================================
   ⌘K COMMAND PALETTE — .palette (§6.17, R-1 plate-level)
   ============================================================================ */
.palette-scrim{position:fixed;inset:0;background:rgba(19,20,24,0.42);
  z-index:var(--ite-z-overlay);display:none;align-items:flex-start;
  justify-content:center;padding-top:12vh;backdrop-filter:blur(2px)}
.palette-scrim.open{display:flex}
.palette{width:min(620px,92vw);background:var(--ite-color-surface);
  border:1px solid var(--ite-color-border-strong);border-radius:var(--ite-radius-xl);
  box-shadow:var(--ite-shadow-xl);overflow:hidden}
.palette__in{display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--ite-color-border)}
.palette__in svg{flex:0 0 16px;color:var(--ite-color-text-subtle)}
.palette__in input{flex:1;border:0;outline:0;font-size:var(--ite-text-lg);
  font-family:var(--ite-font-sans);color:var(--ite-color-text);background:transparent}
.palette__in input::placeholder{color:var(--ite-color-text-subtle)}
.palette__hint{font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);
  color:var(--ite-color-text-subtle);border:1px solid var(--ite-color-border);
  border-radius:5px;padding:2px 6px;flex:0 0 auto}
.palette__list{max-height:46vh;overflow-y:auto;padding:6px}
.pal-sec{font-size:var(--ite-text-2xs);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ite-color-text-subtle);padding:10px 12px 4px}
.pal-row{display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-radius:var(--ite-radius-md);cursor:pointer}
.pal-row:hover,.pal-row.sel{background:var(--ite-color-bg-subtle)}
.pal-row .chip{width:18px;height:18px;border-radius:5px;
  border:1px solid var(--ite-color-border);flex:0 0 18px}
.pal-row .lab{font-size:var(--ite-text-sm)}
.pal-row .path{margin-left:auto;font-family:var(--ite-font-mono);
  font-size:var(--ite-text-2xs);color:var(--ite-color-text-subtle)}

/* ============================================================================
   GENERIC DOC COMPONENTS (from existing site/styles.css)
   ============================================================================ */
.card{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  corner-shape:var(--ite-corner);padding:24px;
  background:var(--ite-color-surface);margin:0 0 16px;
  transition:transform var(--ite-dur-fast) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard),
    border-color var(--ite-dur-fast) var(--ite-ease-standard)}
.card:hover{transform:translateY(-2px);box-shadow:var(--ite-shadow-md);
  border-color:var(--ite-color-border-strong)}
.card-heading{margin-top:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* .callout is defined above for hero callout chips; generic doc variant: */
.doc-callout{display:flex;gap:12px;border-radius:var(--ite-radius-lg);padding:16px 18px;margin:0 0 16px;
  font-size:var(--ite-text-sm);border:1px solid var(--ite-color-border);
  background:var(--ite-color-bg-subtle)}
.doc-callout--accent{border-color:var(--ite-orange-200);background:var(--ite-orange-50)}
.doc-callout__icon{flex:none;font-weight:700;color:var(--ite-orange-600)}
.doc-callout p{margin:0;color:var(--ite-color-text)}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--ite-text-xs);
  font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ite-color-text-muted);background:var(--ite-color-bg-muted);
  border-radius:999px;padding:4px 10px}
.status-pill--draft::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ite-orange-400)}
code,.code{font-family:var(--ite-font-mono);font-size:0.85em;
  background:var(--ite-color-bg-muted);padding:0.12em 0.4em;border-radius:5px}
pre{background:var(--ite-gray-900);color:var(--ite-gray-50);border-radius:var(--ite-radius-md);
  padding:18px 20px;overflow-x:auto;font-size:var(--ite-text-sm);
  line-height:var(--ite-leading-normal)}
pre code{background:none;padding:0;color:inherit;font-size:inherit}
.table{width:100%;border-collapse:collapse;font-size:var(--ite-text-sm);margin:0 0 16px}
.table th,.table td{text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--ite-color-border)}
.table th{font-weight:600;color:var(--ite-color-text)}
.table td{color:var(--ite-color-text-muted)}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dodont__item{border-radius:var(--ite-radius-md);border:1px solid var(--ite-color-border);padding:16px}
.dodont__tag{font-size:var(--ite-text-xs);font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;margin-bottom:8px;display:inline-flex;align-items:center;gap:6px}
.dodont__item--do .dodont__tag{color:var(--ite-color-success-text)}
.dodont__item--dont .dodont__tag{color:var(--ite-text-orange)}
.spec{width:100%;border-collapse:collapse;font-size:var(--ite-text-sm)}
.spec td{padding:11px 8px;border-bottom:1px solid var(--ite-color-border)}
.spec td:first-child{color:var(--ite-color-text-muted);width:46%}
.spec td:last-child{color:var(--ite-color-text);font-family:var(--ite-font-mono)}
.spec tbody tr:hover{background:var(--ite-color-bg-subtle)}

/* ============================================================================
   FOUNDATIONS — motif, steps, slogan-plate, accent-underline (C7 port)
   ============================================================================ */

/* .motif — "We offer best quality products" dark grain sentence plate */
.motif{position:relative;overflow:hidden;border-radius:var(--ite-radius-2xl);
  /* gunmetal dark-panel surface (brand black ↔ gunmetal); uniform dark so the
     heading reads across the whole plate, orange payoff word pops on it */
  background:var(--gun-sheen),var(--gun-brush),var(--gun-base);
  box-shadow:var(--gun-edge),var(--ite-shadow-lg);
  padding:var(--ite-space-12) var(--ite-space-10);margin:var(--ite-space-6) 0}
.motif__sentence{font-family:var(--ite-font-display);font-size:clamp(1.9rem,4vw,3rem);
  font-weight:var(--ite-weight-bold);letter-spacing:var(--ite-tracking-display);
  line-height:var(--ite-leading-snug);color:var(--ite-white);margin:0;max-width:18ch}
/* scoped under .motif__sentence to outrank `.section a` (0,1,1) link colour */
.motif__sentence .motif__word{color:var(--ite-white);text-decoration:none;display:inline-block;
  transition:transform var(--ite-dur-fast) var(--ite-ease-standard),
    color var(--ite-dur-fast) var(--ite-ease-standard)}
/* payoff word lit in orange (high-contrast orange-300 on the dark right side) */
.motif__sentence .motif__word:last-child{color:var(--ite-orange-300)}
.motif__word:hover{transform:translateY(-2px)}
.motif__word:active{transform:translateY(0)}
.motif__sentence .motif__word:hover,.motif__sentence .motif__word:focus-visible{color:var(--ite-orange-300);
  text-decoration:underline;text-underline-offset:0.18em;text-decoration-thickness:2px}
.motif__note{margin:var(--ite-space-5) 0 0;font-size:var(--ite-text-sm);
  color:var(--ite-gray-400);max-width:52ch}

/* .motif-mini — per-section running device (lit word in orange) */
.motif-mini{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  letter-spacing:var(--ite-tracking-wide);text-transform:uppercase;
  color:var(--ite-color-text-subtle);margin:0 0 14px}
.motif-mini em{font-style:normal;color:var(--ite-text-orange);font-weight:var(--ite-weight-bold)}

/* .steps — quality-control pipeline, 2×2 grid */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.steps__item{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  background:var(--ite-color-surface);padding:20px 22px;position:relative}
.steps__num{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  color:var(--ite-text-orange);display:block;margin-bottom:8px}
.steps__word{font-size:var(--ite-text-xs);font-weight:var(--ite-weight-semibold);
  letter-spacing:var(--ite-tracking-caps);text-transform:uppercase;
  color:var(--ite-color-text-subtle);display:block;margin-bottom:2px}
.steps__title{font-family:var(--ite-font-display);font-size:var(--ite-text-xl);
  font-weight:var(--ite-weight-semibold);margin:0 0 8px;color:var(--ite-color-text)}
.section .steps__item p{margin:0;font-size:var(--ite-text-sm)}

/* .slogan-plate — twin official-line plates (light + dark/drift variants) */
.slogan-plate{position:relative;overflow:hidden;border-radius:var(--ite-radius-xl);
  padding:var(--ite-space-10) var(--ite-space-8);margin:0 0 16px}
/* Both slogans — one etched-blueprint treatment (R5): gunmetal ground scored
   with the dark blueprint grid, edged with a single orange keyline, slogan
   inscribed in near-white. Slogan 01 and 02 share the plate; only the copy and
   the orange year/accent differ. AAA: near-white on gunmetal ≫ 7:1. */
.slogan-plate--light,
.slogan-plate--dark{background:var(--ite-tx-grid-dark),var(--gun-sheen),var(--gun-base);
  box-shadow:var(--gun-edge),var(--ite-shadow-lg)}
.slogan-plate--light::before,
.slogan-plate--dark::before{content:"";position:absolute;left:0;top:0;bottom:0;z-index:1;
  width:4px;background:var(--ite-orange-500)}
.slogan-plate--light .slogan-plate__text,
.slogan-plate--light .slogan-plate__meta,
.slogan-plate--dark .slogan-plate__text,
.slogan-plate--dark .slogan-plate__meta{position:relative;z-index:1}
.slogan-plate__text{font-family:var(--ite-font-display);
  font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:var(--ite-weight-bold);
  letter-spacing:var(--ite-tracking-display);line-height:var(--ite-leading-snug);
  margin:0 0 var(--ite-space-6);max-width:22ch}
.section p.slogan-plate__text{color:var(--ite-color-text)}
.slogan-plate--light .slogan-plate__text,
.section .slogan-plate--light p.slogan-plate__text,
.slogan-plate--dark .slogan-plate__text,
.section .slogan-plate--dark p.slogan-plate__text{color:var(--ite-gray-50)}
.slogan-plate__caps{letter-spacing:var(--ite-tracking-caps)}
/* Slogan 02 sits on a single line on the wide plate; scales with viewport so
   it never wraps on desktop, relaxes to normal wrap below md. */
.slogan-plate__text--oneline{max-width:none}
@media(min-width:768px){
  .slogan-plate__text--oneline{white-space:nowrap;font-size:clamp(1.3rem,2.7vw,2.2rem)}
}
/* On the etched-blueprint ground the brand orange returns as the accent. */
.slogan-plate__text .accent-underline{box-shadow:inset 0 -0.16em 0 var(--ite-orange-400)}
.slogan-plate__year{color:var(--ite-orange-400)}
.slogan-plate__meta{display:flex;align-items:center;gap:14px;
  font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  letter-spacing:var(--ite-tracking-wide);text-transform:uppercase;
  color:var(--ite-color-text-subtle)}
.slogan-plate--light .slogan-plate__meta{color:var(--ite-gray-300)}
.slogan-plate--dark .slogan-plate__meta{color:var(--ite-gray-300)}
.slogan-plate__copy{font:inherit;font-family:var(--ite-font-mono);
  font-size:var(--ite-text-xs);letter-spacing:var(--ite-tracking-wide);
  text-transform:uppercase;background:transparent;
  border:1px solid var(--ite-color-border-strong);border-radius:var(--ite-radius-pill);
  color:inherit;padding:4px 12px;cursor:pointer}
.slogan-plate__copy:hover{background:var(--ite-color-bg-muted)}
.slogan-plate__copy:active{transform:translateY(1px)}
.slogan-plate--light .slogan-plate__copy{border-color:rgba(255,255,255,0.35);color:var(--ite-gray-100)}
.slogan-plate--light .slogan-plate__copy:hover{background:rgba(255,255,255,0.12)}
.slogan-plate--dark .slogan-plate__copy{border-color:rgba(255,255,255,0.35);color:var(--ite-gray-100)}
.slogan-plate--dark .slogan-plate__copy:hover{background:rgba(255,255,255,0.12)}

/* .version-log — governance.md changelog timeline */
.version-log{border-left:2px solid var(--ite-orange-300);padding-left:20px;
  display:grid;gap:18px;margin:16px 0}
.version-log__item{position:relative}
.version-log__item::before{content:"";position:absolute;left:-26px;top:5px;
  width:10px;height:10px;border-radius:50%;background:var(--ite-orange-500)}
.version-log__ver{font-family:var(--ite-font-mono);font-weight:700;font-size:var(--ite-text-sm)}
.version-log__date{font-size:var(--ite-text-xs);color:var(--ite-color-text-subtle);margin-left:8px}
.version-log__desc{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);margin:2px 0 0}

/* .accent-underline — orange highlight underline on key phrases */
.accent-underline{box-shadow:inset 0 -0.3em 0 var(--ite-orange-200)}
.hero .accent-underline{box-shadow:inset 0 -0.3em 0 var(--ite-orange-200)}

/* Responsive: motif/steps/slogan-plate mobile tightening (mirrors site/styles.css:572-576) */
@media(max-width:767px){
  .motif{padding:var(--ite-space-8) var(--ite-space-6)}
  .steps{grid-template-columns:1fr}
  .slogan-plate{padding:var(--ite-space-6)}
}

/* ============================================================================
   TABS (color-spec view switcher)
   ============================================================================ */
.tabs{display:flex;gap:4px;padding:4px;background:var(--ite-color-bg-subtle);
  border-radius:var(--ite-radius-md);width:fit-content;margin-bottom:var(--ite-space-4)}
.tabs__tab{font:inherit;font-size:var(--ite-text-sm);font-weight:500;cursor:pointer;
  padding:7px 14px;border-radius:var(--ite-radius-sm);border:none;
  background:transparent;color:var(--ite-color-text-muted);
  transition:background var(--ite-dur-fast) var(--ite-ease-standard),
    color var(--ite-dur-fast) var(--ite-ease-standard)}
.tabs__tab:hover{color:var(--ite-color-text);background:var(--ite-color-bg-muted)}
.tabs__tab.is-active{background:var(--ite-color-surface);color:var(--ite-color-text);
  box-shadow:var(--ite-shadow-xs)}
.tabs__tab:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}

/* ============================================================================
   RESPONSIVE GUARDS — mobile tightening
   ============================================================================ */
@media(max-width:767px){
  .content__inner{padding:var(--ite-space-4) var(--ite-space-4) var(--ite-space-12)}
  .chapter-lid{margin:0 0 var(--ite-space-8);
    padding:var(--ite-space-8) var(--ite-space-5) var(--ite-space-6)}
  .prod-lid{margin:0 0 var(--ite-space-8);
    padding:var(--ite-space-8) var(--ite-space-5) var(--ite-space-6)}
  .cover{padding:var(--ite-space-10) 0 var(--ite-space-10);margin-bottom:var(--ite-space-10)}
  .cover__inner{padding:0 var(--ite-space-5)}
  .cover__meta{width:auto}
  .meta-cell{flex:1 1 40%;min-width:120px}
  .grid-2,.grid-3,.dodont{grid-template-columns:1fr}
  .cs-plates{grid-template-columns:1fr}
  .pagefoot{flex-direction:column}
  .pf-link--next{text-align:left}
  .cover__actions{flex-direction:column}
  .cover__actions .btn{width:100%;justify-content:center}
}
@media(max-width:640px){
  .cs-plates{grid-template-columns:1fr}
  .cs-band{padding:18px 20px}
  .type-row{grid-template-columns:1fr;gap:8px}
}

/* ============================================================================
   ⌘K COMMAND PALETTE (D2 — R-1 plate-level; ported from cover.html prototype)
   ============================================================================ */
.palette-scrim{position:fixed;inset:0;background:rgba(19,20,24,0.42);
  z-index:var(--ite-z-overlay);display:none;align-items:flex-start;
  justify-content:center;padding-top:12vh;backdrop-filter:blur(2px)}
.palette-scrim.open{display:flex}
.palette{width:min(620px,92vw);background:var(--ite-color-surface);
  border:1px solid var(--ite-color-border-strong);
  border-radius:var(--ite-radius-xl);box-shadow:var(--ite-shadow-xl);overflow:hidden}
.palette__in{display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--ite-color-border)}
.palette__in input{flex:1;border:0;outline:0;font-size:var(--ite-text-lg);
  font-family:var(--ite-font-sans);color:var(--ite-color-text);background:transparent}
.palette__hint{font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);
  color:var(--ite-color-text-subtle);border:1px solid var(--ite-color-border);
  border-radius:5px;padding:2px 6px}
.palette__list{max-height:46vh;overflow-y:auto;padding:6px}
.pal-sec{font-size:var(--ite-text-2xs);letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ite-color-text-subtle);padding:10px 12px 4px}
.pal-row{display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-radius:var(--ite-radius-md);cursor:pointer}
.pal-row:hover,.pal-row.sel{background:var(--ite-color-bg-subtle)}
.pal-row .chip{width:18px;height:18px;border-radius:5px;
  border:1px solid var(--ite-color-border);flex:0 0 18px}
.pal-row .lab{font-size:var(--ite-text-sm)}
.pal-row .path{margin-left:auto;font-family:var(--ite-font-mono);
  font-size:var(--ite-text-2xs);color:var(--ite-color-text-subtle)}
.palette-empty{padding:24px 18px;text-align:center;
  font-size:var(--ite-text-sm);color:var(--ite-color-text-subtle)}

/* ============================================================================
   MOTION SPEC (§9) — "settle into tolerance" — the ONE primitive
   Duration & easing tokens are in web.css; these are the application rules.
   All motion: transform + opacity only. Never transition-all.
   ============================================================================ */
/* Section reveal (book.js IntersectionObserver). Sections rise + fade as they
   enter; the cards inside then breeze in on a short stagger — "flowy". All
   transform/opacity only, and fully collapsed under reduced-motion (below). */
.rv-on .content__inner .section{opacity:0;transform:translateY(18px);
  transition:opacity var(--ite-dur-slow) var(--ite-ease-entrance) calc(var(--rv-i,0)*60ms),
    transform var(--ite-dur-slow) var(--ite-ease-entrance) calc(var(--rv-i,0)*60ms)}
.rv-on .content__inner .section.is-in{opacity:1;transform:none}
/* Child stagger — grid/items inside a section settle in just after the section */
@keyframes rv-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rv-on .content__inner .section.is-in
  :is(.grid-2,.grid-3,.plate-grid,.usage-demo,.variants,.balance,.easings,.bezier-grid,.feat-list,.dodont)>*{
  animation:rv-rise var(--ite-dur-slow) var(--ite-ease-entrance) both}
.rv-on .content__inner .section.is-in :is(.grid-2,.grid-3,.plate-grid,.usage-demo,.variants,.balance,.easings,.bezier-grid,.feat-list,.dodont)>*:nth-child(2){animation-delay:70ms}
.rv-on .content__inner .section.is-in :is(.grid-2,.grid-3,.plate-grid,.usage-demo,.variants,.balance,.easings,.bezier-grid,.feat-list,.dodont)>*:nth-child(3){animation-delay:140ms}
.rv-on .content__inner .section.is-in :is(.grid-2,.grid-3,.plate-grid,.usage-demo,.variants,.balance,.easings,.bezier-grid,.feat-list,.dodont)>*:nth-child(4){animation-delay:210ms}
.rv-on .content__inner .section.is-in :is(.grid-2,.grid-3,.plate-grid,.usage-demo,.variants,.balance,.easings,.bezier-grid,.feat-list,.dodont)>*:nth-child(5){animation-delay:280ms}
.rv-on .content__inner .section.is-in :is(.grid-2,.grid-3,.plate-grid,.usage-demo,.variants,.balance,.easings,.bezier-grid,.feat-list,.dodont)>*:nth-child(n+6){animation-delay:350ms}

/* ============================================================================
   STATES — reduced-motion collapse (§9 + §10)
   ============================================================================ */
@media(prefers-reduced-motion:reduce){
  /* Hero assemble: paint final state immediately */
  .exp-layer,.exp-leader{animation:none !important;
    opacity:1 !important;transform:none !important}
  /* Drawer + scrim: snap, no slide */
  .sidebar,.scrim{transition:none}
  /* Section reveal: no stagger */
  .rv-on .content__inner .section{opacity:1;transform:none;transition:none}
  /* Lift effects on cards are safe (transform cheap) but entrance anims stop */
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important}
}

/* ===========================================================
   Chapter component library (ported from site/styles.css — Phase 5b)
   Faithful port of token-driven component families missing from
   the migrated stylesheet. No token changes. No redesign.
   =========================================================== */

/* ---- CHUNK C-a: Foundation specimens ------------------------------------ */

/* SKIPPED: .layout — owned by new shell */
/* SKIPPED: .sidebar — owned by new shell */
/* SKIPPED: .content — owned by new shell */
/* SKIPPED: .card — owned by new shell */
/* SKIPPED: .swatch — owned by new shell */
/* SKIPPED: .ramp — owned by new shell */
/* SKIPPED: .motif — owned by new shell */
/* SKIPPED: .slogan-plate — owned by new shell */
/* SKIPPED: cplate — owned by new shell */
/* SKIPPED: .steps — owned by new shell */

/* Gradient surfaces shown "in action" (web.html) — a floating card sits ON each
   wash so the depth reads, not an abstract swatch. */
.gs-surfaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 6px; }
.gs-surface { position: relative; isolation: isolate; overflow: hidden; min-height: 190px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 18px;
  border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-xl); }
.gs-surface--grid  { background: var(--ite-tx-grid), var(--ite-white); }
.gs-surface--hatch { background: var(--ite-tx-hatch), var(--ite-white); }
.gs-surface--metal { background: var(--ite-tx-grid-dark), var(--gun-sheen), var(--gun-base); border-color: transparent; box-shadow: var(--gun-edge); }
.gs-card { position: relative; z-index: 1; align-self: flex-start; display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; background: var(--ite-white); border-radius: var(--ite-radius-md);
  box-shadow: var(--ite-shadow-lg); }
.gs-surface--dark .gs-card { background: var(--ite-gray-900); box-shadow: var(--ite-shadow-xl); }
.gs-card__k { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ite-radius-sm);
  font-family: var(--ite-font-display); font-weight: 700; font-size: 15px;
  background: var(--copper-sheen), var(--copper-base); color: var(--copper-ink); box-shadow: var(--copper-edge); }
.gs-card__lab { font-family: var(--ite-font-mono); font-size: var(--ite-text-xs); color: var(--ite-color-text-muted); }
.gs-surface--dark .gs-card__lab { color: var(--ite-gray-300); }
.gs-surface__cap { position: relative; z-index: 1; font-family: var(--ite-font-mono); font-size: var(--ite-text-xs);
  color: var(--ite-color-text); display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.gs-surface__cap span { color: var(--ite-color-text-muted); }
.gs-surface--dark .gs-surface__cap { color: var(--ite-gray-100); }
.gs-surface--dark .gs-surface__cap span { color: var(--ite-gray-400); }

/* Depth/elevation specimens */
.depth-demo { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.depth-demo div { width: 130px; height: 84px; border-radius: var(--ite-radius-md); background: var(--ite-color-surface); display: grid; place-items: center; font-family: var(--ite-font-mono); font-size: var(--ite-text-xs); color: var(--ite-color-text-muted); }
.depth-demo .d-base { box-shadow: var(--ite-ring-hairline); }
.depth-demo .d-elev { box-shadow: var(--ite-shadow-md); }
.depth-demo .d-float { box-shadow: var(--ite-shadow-xl); }

.scale-cap { font-family: var(--ite-font-mono); font-size: var(--ite-text-xs); color: var(--ite-color-text-muted); display: block; margin-top: 4px; text-align: center; }

/* Spacing scale — editorial ramp (layout.html). Token · value · proportional
   bar · usage. Bars grow on scroll-reveal (transform-only, reduced-motion safe). */
.space-scale { display: flex; flex-direction: column; margin-top: var(--ite-space-2); }
.space-row { display: grid; grid-template-columns: 92px 96px 1fr; align-items: center;
  gap: var(--ite-space-4); padding: 11px 0; border-bottom: 1px solid var(--ite-color-border); }
.space-row:last-child { border-bottom: 0; }
.space-row__tok { font-family: var(--ite-font-mono); font-size: var(--ite-text-xs);
  font-weight: 600; color: var(--ite-color-text); }
.space-row__val { font-family: var(--ite-font-mono); font-size: var(--ite-text-xs);
  color: var(--ite-color-text); display: flex; flex-direction: column; line-height: 1.3; }
.space-row__val small { color: var(--ite-color-text-subtle); }
.space-row__bar { grid-row: 1; grid-column: 3; justify-self: start; height: 18px; width: var(--w);
  background: linear-gradient(90deg, var(--ite-orange-500), var(--ite-orange-300));
  border-radius: var(--ite-radius-xs); corner-shape: var(--ite-corner);
  transform: scaleX(0); transform-origin: left center; }
.rv-on .space-row__bar { transition: transform var(--ite-dur-slow, .36s) var(--ite-ease-standard, ease);
  transform: scaleX(1); }
.space-row__use { grid-row: 2; grid-column: 3; font-size: var(--ite-text-sm);
  color: var(--ite-color-text-muted); }
@media (prefers-reduced-motion: reduce) {
  .space-row__bar, .rv-on .space-row__bar { transition: none; transform: scaleX(1); }
}
@media (max-width: 560px) {
  .space-row { grid-template-columns: 78px 1fr; }
  .space-row__bar { grid-column: 2; }
  .space-row__use { grid-column: 1 / -1; grid-row: auto; }
}

/* Radius (squircle) scale — real tiles using the live tokens + corner-shape. */
.radius-scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: var(--ite-space-5); margin-top: var(--ite-space-2); }
.rad-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rad-tile { width: 100%; height: 88px; corner-shape: var(--ite-corner);
  background: var(--ite-color-surface);
  border: 1px solid var(--ite-color-border-strong); box-shadow: var(--ite-shadow-xs); }
.rad-tile--pill { background: var(--ite-orange-100); border-color: var(--ite-orange-200); }
.rad-cap { font-family: var(--ite-font-mono); font-size: var(--ite-text-xs);
  color: var(--ite-color-text); display: flex; flex-direction: column; align-items: center;
  line-height: 1.35; text-align: center; }
.rad-cap b { font-size: var(--ite-text-sm); letter-spacing: 0.02em; }
.rad-cap small { color: var(--ite-color-text-subtle); }
.rad-note { margin-top: var(--ite-space-5); font-size: var(--ite-text-sm);
  color: var(--ite-color-text-muted); }

/* Depth planes — overlapping cards staggered on three z-levels. */
.planes { position: relative; height: 230px; margin: var(--ite-space-4) 0 var(--ite-space-10); }
.plane { position: absolute; width: min(340px, 76%); padding: var(--ite-space-5) var(--ite-space-6);
  border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-lg);
  corner-shape: var(--ite-corner); background: var(--ite-color-surface);
  display: flex; align-items: baseline; gap: var(--ite-space-3); }
.plane__z { font-family: var(--ite-font-mono); font-size: var(--ite-text-sm); font-weight: 700;
  color: var(--ite-text-orange); }
.plane__name { font-family: var(--ite-font-display); font-weight: 600; font-size: var(--ite-text-lg);
  color: var(--ite-color-text); }
.plane__meta { font-size: var(--ite-text-xs); color: var(--ite-color-text-muted);
  margin-left: auto; text-align: right; }
.plane--base { left: 0; top: 0; box-shadow: var(--ite-ring-hairline); }
.plane--raised { left: 40px; top: 70px; box-shadow: var(--ite-shadow-md); }
.plane--float { left: 80px; top: 140px; box-shadow: var(--ite-shadow-xl); }
@media (max-width: 560px) {
  .planes { height: auto; display: flex; flex-direction: column; gap: var(--ite-space-3); }
  .plane { position: static; width: 100%; left: auto; top: auto; }
}

/* Breakpoint ruler */
.bp-ruler { margin: var(--ite-space-2) 0 var(--ite-space-8); padding: var(--ite-space-2) 32px 0; }
.bp-ruler__track { position: relative; height: 4px; border-radius: var(--ite-radius-pill);
  background: var(--ite-color-border); margin: 56px 0 44px; }
.bp-ruler__container { position: absolute; left: 0; top: 50%; height: 12px; width: var(--c);
  transform: translateY(-50%); border-radius: var(--ite-radius-pill);
  background: linear-gradient(90deg, var(--ite-orange-300), var(--ite-orange-500)); opacity: 0.32; }
.bp-ruler__container-lbl { position: absolute; left: 0; top: -30px; font-family: var(--ite-font-mono);
  font-size: var(--ite-text-xs); color: var(--ite-text-orange); white-space: nowrap; }
.bp-ruler__tick { position: absolute; left: var(--x); top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; }
.bp-ruler__tick i { width: 2px; height: 16px; background: var(--ite-color-text-subtle);
  border-radius: 1px; }
.bp-ruler__tick b { position: absolute; bottom: 16px; font-family: var(--ite-font-display);
  font-size: var(--ite-text-sm); font-weight: 600; color: var(--ite-color-text); }
.bp-ruler__tick small { position: absolute; top: 16px; font-family: var(--ite-font-mono);
  font-size:var(--ite-text-3xs); color: var(--ite-color-text-subtle); }

/* Elevation specimens */
.elev { display: flex; gap: 24px; flex-wrap: wrap; }
.elev div { width: 120px; height: 72px; background: var(--ite-color-surface); border-radius: var(--ite-radius-sm); display: grid; place-items: center; font-family: var(--ite-font-mono); font-size: var(--ite-text-xs); color: var(--ite-color-text-muted); }

/* Easing specimens */
.easings { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ease-demo { border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-sm); padding: 12px; font-size: var(--ite-text-sm); }
.ease-demo .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ite-orange); margin-top: 8px; animation: ite-slide 2.4s infinite; }
@keyframes ite-slide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(140px); } }

/* ---- Bezier visualisations (Motion page) -------------------------------- */
.bezier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;margin-top:var(--ite-space-4)}
.bezier-card{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  corner-shape:var(--ite-corner);padding:16px;background:var(--ite-color-surface);
  display:flex;flex-direction:column;gap:12px;
  transition:transform var(--ite-dur-fast) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard)}
.bezier-card:hover{transform:translateY(-2px);box-shadow:var(--ite-shadow-md)}
.bezier-graph{width:100%;aspect-ratio:1/1;display:block;
  background:var(--ite-color-bg-subtle);border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner)}
.bezier-graph .bz-frame{stroke:var(--ite-color-border);stroke-width:1;fill:none}
.bezier-graph .bz-diag{stroke:var(--ite-gray-300);stroke-width:1;stroke-dasharray:3 4;fill:none}
.bezier-graph .bz-curve{stroke:var(--ite-orange-500);stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.bezier-graph .bz-cp{stroke:var(--ite-gray-300);stroke-width:1;fill:none}
.bezier-graph .bz-cpdot{fill:var(--ite-orange-300)}
/* The travelling ball — transform-only, distance via container query width. */
.bezier-track{position:relative;height:18px;border-radius:9999px;
  background:var(--ite-color-bg-muted);overflow:hidden;container-type:inline-size}
.bezier-ball{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#dd9560,#a85a36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  animation:bz-run 1.9s infinite alternate}
@keyframes bz-run{from{transform:translateX(0)}to{transform:translateX(calc(100cqw - 18px))}}
.bezier-meta{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  color:var(--ite-color-text-muted)}
.bezier-meta b{display:block;font-family:var(--ite-font-display);font-size:var(--ite-text-base);
  font-weight:600;color:var(--ite-color-text);letter-spacing:-0.01em}
.bezier-meta .bz-use{color:var(--ite-color-text-subtle)}

/* Motion playground — live designed states to hover/press */
.mo-play{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  padding:var(--ite-space-6);background:var(--ite-color-bg-subtle);
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  corner-shape:var(--ite-corner)}
.mo-play .card{margin:0;min-width:160px}
.mo-hint{font-size:var(--ite-text-sm);color:var(--ite-color-text-subtle)}
@media(prefers-reduced-motion:reduce){
  .bezier-ball{animation:none}
}

/* Component specimen stage */
.stage {
  position: relative;
  border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-lg);
  padding: 24px; background: var(--ite-color-surface);
  box-shadow: var(--ite-shadow-xs);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 0 0 16px;
}
.stage[data-spec]::before {
  content: attr(data-spec);
  display: block;
  flex: 1 1 100%;
  font-family: var(--ite-font-mono);
  font-size: var(--ite-text-xs);
  letter-spacing: var(--ite-tracking-wide);
  text-transform: uppercase;
  color: var(--ite-color-text-subtle);
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--ite-color-border);
}

/* Catalogue grid (forms/resources) */
.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 8px 0;
}
/* Engraved steel nameplate (R4): brushed-alloy plate, engraved label, rivet
   corners. Rivets + brush are drawn with pseudo-elements (no markup change). */
.cat-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  border: 1px solid rgba(120,128,138,0.55);
  border-radius: var(--ite-radius-md);
  corner-shape: var(--ite-corner);
  padding: 17px 18px 16px;
  text-decoration: none;
  background: var(--alloy-sheen), var(--alloy-base);
  box-shadow: var(--alloy-edge), var(--ite-shadow-sm);
  color: #15171a;
  transition: box-shadow var(--ite-dur-base,.22s) var(--ite-ease-standard,ease),
    transform var(--ite-dur-base,.22s) var(--ite-ease-standard,ease);
}
/* brushed-metal striations */
.cat-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(60,66,74,0.10) 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
}
/* four machined rivets (transparent outside the stud so the plate shows) */
.cat-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle 4px at 9px 9px, var(--ite-white) 0, #9aa0a8 52%, #5e646c 88%, transparent 92%),
    radial-gradient(circle 4px at calc(100% - 9px) 9px, var(--ite-white) 0, #9aa0a8 52%, #5e646c 88%, transparent 92%),
    radial-gradient(circle 4px at 9px calc(100% - 9px), var(--ite-white) 0, #9aa0a8 52%, #5e646c 88%, transparent 92%),
    radial-gradient(circle 4px at calc(100% - 9px) calc(100% - 9px), var(--ite-white) 0, #9aa0a8 52%, #5e646c 88%, transparent 92%);
}
.cat-card:hover { box-shadow: var(--alloy-edge), var(--ite-shadow-lg); transform: translateY(-2px); }
.cat-card:active { transform: translateY(0); box-shadow: var(--alloy-edge), var(--ite-shadow-sm); }
.cat-card:focus-visible { outline: var(--ite-focus-ring); outline-offset: 2px; }
.cat-card__status {
  font-size:var(--ite-text-3xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ite-text-orange); text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.cat-card__title { font-weight: var(--ite-weight-semibold); font-size: var(--ite-text-base);
  line-height: 1.25; color: #15171a; text-shadow: 0 1px 0 rgba(255,255,255,0.65); }
.cat-card__code { font-size: var(--ite-text-xs); color: #34383d;
  font-family: var(--ite-font-mono); margin-top: auto; padding-top: 4px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5); }

/* Product card grid */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; width: 100%; }
.prodcard { border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-lg); background: var(--ite-color-surface); overflow: hidden; transition: box-shadow var(--ite-dur-base,.22s) var(--ite-ease-standard, ease), transform var(--ite-dur-base,.22s) var(--ite-ease-standard, ease); }
.prodcard:hover { box-shadow: var(--ite-shadow-md); transform: translateY(-2px); }
.prodcard__media { height: 120px; background: var(--ite-gray-100); display: grid; place-items: center; color: var(--ite-color-text-subtle); font-size: var(--ite-text-sm); }
.prodcard__body { padding: 16px; }
.prodcard__title { font-weight: var(--ite-weight-semibold); margin: 0 0 4px; }
.prodcard__desc { font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); margin: 0; }

/* Type pairing specimens (typography.html) */
.pairing { display: grid; gap: 16px; margin: 16px 0; }
.pairing__card {
  border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-lg);
  background: var(--ite-color-surface); padding: 28px; position: relative;
}
.pairing__card.is-provisional { border-color: var(--ite-orange-300); box-shadow: var(--ite-shadow-sm); }
.pairing__tag {
  position: absolute; top: 16px; right: 16px;
  font-size:var(--ite-text-3xs); font-weight: var(--ite-weight-bold); letter-spacing: var(--ite-tracking-caps);
  text-transform: uppercase; color: var(--ite-text-orange);
  background: var(--ite-orange-50); border: 1px solid var(--ite-orange-200);
  border-radius: 999px; padding: 3px 9px;
}
.pairing__name { font-size: var(--ite-text-sm); font-weight: var(--ite-weight-semibold); margin: 0 0 2px; }
.pairing__meta { font-family: var(--ite-font-mono); font-size: var(--ite-text-xs); color: var(--ite-color-text-muted); margin: 0 0 18px; }
.pairing__display { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 12px; color: var(--ite-color-text); }
.pairing__body { font-family: var(--ite-font-sans); font-size: var(--ite-text-base); line-height: var(--ite-leading-relaxed); color: var(--ite-color-text-muted); margin: 0; max-width: 60ch; }
.font-slab     { font-family: "Roboto Slab", serif; }
.font-grotesk  { font-family: "Space Grotesk", sans-serif; }
.font-serif    { font-family: "Source Serif 4", Georgia, serif; }

/* Colour swatch grid (color page — plural container; .swatch button is already in shell) */
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* Ramp label (below each ramp row) */
.ramp-label { font-size: var(--ite-text-xs); color: var(--ite-color-text-muted); margin: 0 0 4px; font-weight: var(--ite-weight-medium); }

/* ---- CHUNK C-b: Components / dataviz / voice ---------------------------- */

/* Data table (web) */
.datatable { width: 100%; border-collapse: collapse; font-size: var(--ite-text-sm); border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-md); overflow: hidden; }
.datatable th { text-align: left; background: var(--ite-color-bg-subtle); font-weight: var(--ite-weight-semibold); padding: 11px 14px; border-bottom: 1px solid var(--ite-color-border); }
.datatable td { padding: 11px 14px; border-bottom: 1px solid var(--ite-color-border); color: var(--ite-color-text-muted); }
.datatable tbody tr:hover { background: var(--ite-orange-50); }
.datatable tbody tr:last-child td { border-bottom: none; }
.datatable td.num { font-family: var(--ite-font-mono); color: var(--ite-color-text); text-align: right; }

/* Accordion */
.accordion { border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-md); overflow: hidden; width: 100%; }
.accordion details { border-top: 1px solid var(--ite-color-border); }
.accordion details:first-child { border-top: none; }
.accordion summary {
  cursor: pointer; padding: 14px 18px; font-weight: var(--ite-weight-medium);
  font-size: var(--ite-text-sm); list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--ite-orange-600); font-weight: 700; }
.accordion details[open] summary::after { content: "–"; }
.accordion summary:hover { background: var(--ite-color-bg-subtle); }
.accordion summary:active { background: var(--ite-gray-100); }
.accordion__body { padding: 0 18px 14px; font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); }

/* Toggle switch */
.switch { position: relative; display: inline-flex; width: 44px; height: 26px; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--ite-gray-300); pointer-events: none; transition: background var(--ite-dur-fast) var(--ite-ease-standard); }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ite-white); box-shadow: var(--ite-shadow-sm); transition: transform var(--ite-dur-fast) var(--ite-ease-standard); }
.switch input:checked + .switch__track { background: var(--ite-cta-bg); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }

/* Form field */
.field { display: block; margin-bottom: 14px; }
.field__label { display: block; font-size: var(--ite-text-sm); font-weight: var(--ite-weight-medium); margin-bottom: 6px; }
.field__label .req { color: var(--ite-orange-600); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--ite-text-sm);
  padding: 9px 12px; border: 1px solid var(--ite-color-border-strong);
  border-radius: var(--ite-radius-sm); background: var(--ite-color-surface); color: var(--ite-color-text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--ite-orange); outline-offset: 1px; border-color: transparent;
}

/* Chart legend */
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Bar chart */
.chart-frame { border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-lg); padding: 24px; background: var(--ite-color-surface); margin: 0 0 16px; }
.chart-bars { display: flex; align-items: flex-end; gap: 18px; height: 180px; border-bottom: 1px solid var(--ite-chart-axis); padding: 0 8px; }
.chart-bars .bar { flex: 1; display: grid; align-content: end; gap: 0; }
.chart-bars .bar i { display: block; border-radius: 4px 4px 0 0; }
.chart-bars .bar span { font-family: var(--ite-font-mono); font-size: var(--ite-text-xs); color: var(--ite-chart-label); text-align: center; padding-top: 6px; }
.chart-bars .bar span.bar__lead { color: var(--ite-text-orange); font-weight: 700; }

/* ---- Data-viz: series palette, chart types, anatomy, encoding (dataviz.html) ---- */
.chart-frame figcaption { display: flex; flex-direction: column; margin: 0 0 16px; }
.chart-frame figcaption strong { color: var(--ite-color-text); }
.chart-frame figcaption span { font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); }

.series-scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--ite-space-3); margin: var(--ite-space-2) 0 var(--ite-space-6); }
.series-cell { display: grid; grid-template-columns: 32px auto 1fr; grid-template-rows: auto auto;
  align-items: center; column-gap: 9px; border: 1px solid var(--ite-color-border);
  border-radius: var(--ite-radius-md); corner-shape: var(--ite-corner); padding: 11px 13px;
  background: var(--ite-color-surface); }
.series-sw { grid-row: 1 / 3; grid-column: 1; width: 32px; height: 32px;
  border-radius: var(--ite-radius-sm); corner-shape: var(--ite-corner); box-shadow: var(--ite-ring-hairline); }
.series-cell b { grid-row: 1; grid-column: 2; font-family: var(--ite-font-mono); font-size:var(--ite-text-3xs);
  color: var(--ite-color-text-subtle); align-self: end; }
.series-tok { grid-row: 1; grid-column: 3; font-family: var(--ite-font-mono);
  font-size: var(--ite-text-xs); font-weight: 600; color: var(--ite-color-text); align-self: end; }
.series-cell small { grid-row: 2; grid-column: 2 / 4; font-size:var(--ite-text-2xs); color: var(--ite-color-text-muted); }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ite-space-5); }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg text { font-family: var(--ite-font-mono); font-size:var(--ite-text-2xs); fill: var(--ite-chart-label); }
.chart-svg .cg { stroke: var(--ite-chart-grid); stroke-width: 1; }
.chart-svg .cax { stroke: var(--ite-chart-axis); stroke-width: 1.5; }

.chart-key { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.ck { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ite-text-xs);
  color: var(--ite-color-text-muted); }
.ck i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.ck--dash i { height: 0; background: transparent !important; border-top: 2px dashed var(--ite-chart-4); }

.donut-wrap { display: flex; align-items: center; gap: var(--ite-space-6); flex-wrap: wrap; }
.donut-wrap .chart-svg { width: 150px; flex: none; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 9px; min-width: 168px; }
.donut-legend li { display: flex; align-items: center; gap: 9px; font-size: var(--ite-text-sm);
  color: var(--ite-color-text); }
.donut-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.donut-legend b { margin-left: auto; font-family: var(--ite-font-mono); color: var(--ite-color-text-muted); }

.anatomy { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--ite-space-6); align-items: center; }
.anat-notes { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 11px; }
.anat-notes li { font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); padding-left: 4px; }
.anat-notes li::marker { font-family: var(--ite-font-mono); font-size: var(--ite-text-xs); color: var(--ite-text-orange); }
.anat-notes li b { color: var(--ite-color-text); }
@media (max-width: 760px) { .anatomy { grid-template-columns: 1fr; } }

.enc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ite-space-4); margin-top: var(--ite-space-2); }
.enc-card { border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-lg);
  corner-shape: var(--ite-corner); padding: 18px; background: var(--ite-color-surface); }
.enc-chip { display: flex; align-items: center; height: 24px; margin-bottom: 11px; }
.enc-chip svg { width: 48px; height: 20px; }
.enc-card b { display: block; font-size: var(--ite-text-sm); margin-bottom: 4px; color: var(--ite-color-text); }
.enc-card p { margin: 0; font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); }

/* ---- Voice & Tone (voice.html) ---- */
.tone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ite-space-4); margin-top: var(--ite-space-2); }
.tone-card { border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-lg);
  corner-shape: var(--ite-corner); padding: 20px; background: var(--ite-color-surface);
  display: flex; flex-direction: column; gap: 10px; }
.tone-card__aud { font-family: var(--ite-font-display); font-weight: 600;
  font-size: var(--ite-text-base); color: var(--ite-color-text); }
.tone-card__need { margin: 0; font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); }
.tone-card__ex { margin: auto 0 0; font-size: var(--ite-text-sm); color: var(--ite-color-text);
  border-left: 2px solid var(--ite-orange-400); padding-left: 12px; font-style: italic; }

.rewrites { display: flex; flex-direction: column; gap: var(--ite-space-4); margin-top: var(--ite-space-2); }
.rw { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ite-space-4); align-items: stretch; }
.rw__col { border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-md);
  corner-shape: var(--ite-corner); padding: 16px 18px; }
.rw__col p { margin: 0; font-size: var(--ite-text-base); }
.rw__tag { display: inline-block; font-family: var(--ite-font-mono); font-size:var(--ite-text-3xs);
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.rw__bad { background: var(--ite-color-danger-surface); border-color: var(--ite-color-danger-surface-border); }
.rw__bad .rw__tag { color: var(--ite-color-danger); }
.rw__bad p { color: var(--ite-color-text-muted); }
.rw__good { border-left: 3px solid var(--ite-color-success); }
.rw__good .rw__tag { color: var(--ite-color-success-text); }
@media (max-width: 680px) { .rw { grid-template-columns: 1fr; } }

.wordlist td:first-child { font-weight: 600; color: var(--ite-color-text); }
.wordlist td:nth-child(2) { color: var(--ite-color-text-muted); text-decoration: line-through;
  text-decoration-color: var(--ite-color-text-subtle); }
.wordlist td:nth-child(3) { color: var(--ite-color-text-muted); font-size: var(--ite-text-sm); }
.avoid-list { list-style: none; margin: var(--ite-space-2) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px; }
.avoid-list li { font-family: var(--ite-font-mono); font-size: var(--ite-text-sm);
  color: var(--ite-color-text-muted); background: var(--ite-color-bg-muted);
  border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-pill);
  padding: 5px 14px; text-decoration: line-through; text-decoration-color: var(--ite-color-danger-underline); }

/* Pagination */
.pagination { display: flex; gap: 6px; }
.pagination button {
  font: inherit; font-size: var(--ite-text-sm); min-width: 38px; height: 38px;
  border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-sm); background: var(--ite-color-surface);
  color: var(--ite-color-text-muted); cursor: pointer;
  transition: background var(--ite-dur-fast) var(--ite-ease-standard);
}
.pagination button:hover { background: var(--ite-color-bg-subtle); color: var(--ite-color-text); }
.pagination button:active { background: var(--ite-gray-200); }
/* AAA: small page-number label needs 7:1 — white on orange-800 = 9.47:1 */
.pagination button.is-current { background: var(--ite-cta-bg); border-color: var(--ite-cta-bg); color: var(--ite-white); }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--ite-text-sm); flex-wrap: wrap; }
.breadcrumb a { color: var(--ite-color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ite-text-orange); text-decoration: underline; }
.breadcrumb a:active { color: var(--ite-text-orange); }
.breadcrumb__sep { color: var(--ite-color-text-subtle); }
.breadcrumb__current { color: var(--ite-color-text); font-weight: var(--ite-weight-medium); }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ite-text-xs); font-weight: var(--ite-weight-semibold); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ite-color-border); color: var(--ite-color-text-muted); }
.badge--accent { color: var(--ite-text-orange); border-color: var(--ite-orange-200); background: var(--ite-orange-50); }

/* Interactive state matrix */
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
.states__cell { display: grid; gap: 8px; justify-items: start; }
.states__label { font-family: var(--ite-font-mono); font-size: var(--ite-text-xs); color: var(--ite-color-text-subtle); }
/* Demo state swatches mirror the real .btn--primary (black on orange, brightens on hover) */
.btn.demo-hover  { background: var(--ite-orange-400); color: var(--ite-black); border-color: var(--ite-orange-700); box-shadow: var(--ite-shadow-lg); transform: translateY(-1px); }
.btn.demo-active { background: var(--ite-orange-500); color: var(--ite-black); border-color: var(--ite-orange-700); transform: translateY(0); box-shadow: var(--ite-shadow-sm); }
.btn.demo-focus  { background: var(--ite-orange-500); color: var(--ite-black); border-color: var(--ite-orange-700); outline: var(--ite-focus-ring); outline-offset: var(--ite-focus-offset); }

/* Provisional pairing card state */
.pairing__card.is-provisional { border-color: var(--ite-orange-300); box-shadow: var(--ite-shadow-sm); }

/* Mobile action bar */
.mobilebar { display: flex; gap: 12px; width: 320px; max-width: 100%; padding: 12px; border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-lg); background: var(--ite-color-surface); box-shadow: var(--ite-shadow-lg); }
.mobilebar .btn { flex: 1; justify-content: center; }
.mobilebar .btn--call { background: var(--ite-gray-100); color: var(--ite-color-text); }

/* Stencil (environment) */
.stencil { font-family: var(--ite-font-mono); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border: 2.5px dashed var(--ite-gray-700); color: var(--ite-gray-800); padding: 18px 22px; display: inline-block; border-radius: 4px; font-size: var(--ite-text-lg); }

/* Complete interactive states for remaining clickable elements */
.btn--secondary { background: var(--ite-color-surface); color: var(--ite-color-text); border: 1px solid var(--ite-color-border-strong); }
.btn--secondary:hover { background: var(--ite-color-bg-subtle); }
.btn--secondary:active { background: var(--ite-gray-200); }
.btn--ghost:active { background: var(--ite-orange-100); }
.btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ============================================================================
   BUTTON STATE MATRIX (P12) — variants (cols) × states (rows). Buttons are
   static specimens; states are simulated via [data-demo] so every combination
   shows at once. Real interactive buttons live in the "Try it live" stage.
   ============================================================================ */
.btn-matrix-scroll{overflow-x:auto}
.btn-matrix{display:grid;grid-template-columns:auto repeat(3,1fr);
  gap:0 var(--ite-space-6);align-items:center;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  corner-shape:var(--ite-corner);padding:var(--ite-space-4) var(--ite-space-6) var(--ite-space-6);
  background:var(--ite-color-surface);box-shadow:var(--ite-ring-hairline)}
.btn-matrix__h{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ite-color-text-muted);text-align:center;padding-bottom:var(--ite-space-4)}
.btn-matrix__rl{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  letter-spacing:0.04em;color:var(--ite-color-text-subtle);white-space:nowrap;
  border-top:1px solid var(--ite-color-border);padding:var(--ite-space-4) var(--ite-space-5) var(--ite-space-4) 0}
.btn-matrix__cell{display:flex;justify-content:center;align-items:center;
  border-top:1px solid var(--ite-color-border);padding:var(--ite-space-4) 0}
.btn-matrix__cell .btn{pointer-events:none}
/* Simulated states, scoped per variant (no collision with global :hover etc.) */
.btn-matrix .btn--primary[data-demo="hover"]{background:var(--ite-orange-400);
  box-shadow:var(--ite-shadow-lg);transform:translateY(-1px)}
.btn-matrix .btn--primary[data-demo="active"]{background:var(--ite-orange-500);
  box-shadow:var(--ite-shadow-sm)}
.btn-matrix .btn--primary[data-demo="focus"]{outline:var(--ite-focus-ring);outline-offset:var(--ite-focus-offset)}
.btn-matrix .btn--secondary[data-demo="hover"]{background:var(--ite-color-bg-subtle);border-color:var(--ite-gray-400)}
.btn-matrix .btn--secondary[data-demo="active"]{background:var(--ite-gray-200)}
.btn-matrix .btn--secondary[data-demo="focus"]{outline:var(--ite-focus-ring);outline-offset:var(--ite-focus-offset)}
.btn-matrix .btn--ghost[data-demo="hover"]{box-shadow:var(--ite-ring-hairline),var(--ite-shadow-sm);border-color:var(--ite-gray-400)}
.btn-matrix .btn--ghost[data-demo="active"]{background:var(--ite-orange-100)}
.btn-matrix .btn--ghost[data-demo="focus"]{outline:var(--ite-focus-ring);outline-offset:var(--ite-focus-offset)}
@media(max-width:680px){.btn-matrix{min-width:560px}}
.nav__link:active { background: var(--ite-gray-200); }

/* ---- CHUNK C-c: Applications (fd-* forms, marketing, environment, engineering, resources/governance) */

/* Social tile grid (marketing.html) — alloy/plate/copper register */
.socialgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.socialtile { position: relative; isolation: isolate; aspect-ratio: 1/1; border-radius: var(--ite-radius-lg); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 14px;
  border: 1px solid var(--ite-color-border); box-shadow: var(--ite-ring-hairline), 0 6px 18px -10px rgba(19,20,24,0.45); }
.socialtile::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: var(--alloy-grain); opacity: 0.12; mix-blend-mode: overlay; }
.socialtile > * { position: relative; z-index: 1; }
/* product tile = brushed alloy plate */
.socialtile--product { background: var(--alloy-sheen), var(--alloy-grain), var(--alloy-base); box-shadow: var(--alloy-edge), 0 6px 18px -10px rgba(19,20,24,0.45); color: var(--ite-gray-900); }
.socialtile--product::after { opacity: 0; }
/* announce tile = gunmetal dark panel with copper top edge */
.socialtile--announce { background: var(--gun-sheen), var(--gun-brush), var(--gun-base); color: var(--ite-white);
  border-color: rgba(255,255,255,0.10); box-shadow: var(--gun-edge), 0 6px 18px -10px rgba(19,20,24,0.6); }
.socialtile--announce::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--ite-orange-700), var(--ite-orange-500) 40%, var(--ite-orange-300) 70%, transparent); }
.socialtile--announce::after { opacity: 0.06; mix-blend-mode: screen; }
/* stat tile = orange, kept loud + legible, alloy texture toned down */
.socialtile--stat { background: var(--ite-orange-500); color: var(--ite-black); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 18px -10px rgba(213,89,18,0.55); }
.socialtile--stat::after { opacity: 0.10; mix-blend-mode: multiply; }
.socialtile__kicker { font-size:var(--ite-text-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.socialtile--product .socialtile__kicker { color: var(--ite-text-orange); opacity: 1; text-shadow: var(--engrave); }
.socialtile__headline { font-family: var(--ite-font-display); font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: -0.02em; }
.socialtile--product .socialtile__headline { text-shadow: var(--engrave); }
.socialtile__logo { height: 14px; align-self: flex-start; }

/* Sign mock (environment.html) — fabricated alloy/painted signage */
.signmock { position: relative; isolation: isolate; border-radius: var(--ite-radius-lg); padding: 28px 32px; display: flex; align-items: center; gap: 18px; max-width: 460px; overflow: hidden;
  box-shadow: var(--ite-ring-hairline), 0 10px 26px -14px rgba(19,20,24,0.5); }
.signmock::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--alloy-grain); opacity: 0.10; mix-blend-mode: overlay; }
.signmock > * { position: relative; z-index: 1; }
/* facade = dark anodised panel, copper baseline */
.signmock--facade { background: var(--ite-tx-grid-dark), var(--gun-sheen), var(--gun-base); box-shadow: var(--gun-edge); color: var(--ite-white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 26px -14px rgba(19,20,24,0.65); }
.signmock--facade::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--ite-orange-700), var(--ite-orange-500) 40%, var(--ite-orange-300) 70%, transparent); }
.signmock--facade::after { opacity: 0.06; mix-blend-mode: screen; }
/* safety = painted orange plate, kept loud */
.signmock--safety { background: var(--ite-orange-500); color: var(--ite-black);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 26px -14px rgba(213,89,18,0.55); }
.signmock--safety::after { opacity: 0.10; mix-blend-mode: multiply; }
/* wayfind = brushed-alloy wayfinding plate */
.signmock--wayfind { background: var(--alloy-sheen), var(--alloy-grain), var(--alloy-base); color: var(--ite-gray-900);
  box-shadow: var(--alloy-edge), 0 10px 26px -14px rgba(19,20,24,0.5); }
.signmock--wayfind::after { opacity: 0; }
.signmock__logo { height: 34px; }
.signmock__text { font-family: var(--ite-font-display); font-weight: 700; font-size: var(--ite-text-xl); letter-spacing: -0.01em; }
.signmock--wayfind .signmock__text { text-shadow: var(--engrave); }

/* Nav mock (web.html) — brushed-alloy wayfinding bar */
.navmock { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; border-radius: var(--ite-radius-md); overflow: hidden; }
.navmock::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--alloy-grain); opacity: 0.10; mix-blend-mode: overlay; }
.navmock > * { position: relative; z-index: 1; }
.navmock--light { background: var(--alloy-sheen), var(--alloy-grain), var(--alloy-base); color: var(--ite-gray-900); box-shadow: var(--alloy-edge); }
.navmock--light::after { opacity: 0; }
.navmock__logo { height: 26px; }
.navmock__links { display: flex; gap: 2px; padding: 4px; background: rgba(19,20,24,0.06); border: 1px solid rgba(19,20,24,0.08); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(19,20,24,0.10); }
.navmock__links span { font-size: var(--ite-text-sm); color: var(--ite-gray-700); padding: 6px 12px; border-radius: 999px; text-shadow: var(--engrave); }
.navmock__links span.is-active { background: var(--ite-white); color: var(--ite-text-orange); font-weight: var(--ite-weight-medium); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 1px 2px rgba(19,20,24,0.18); }
[data-ite-theme="dark"] .navmock__links { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,0.12); }

/* Vehicle livery (environment.html) — brushed-alloy bodywork + copper pin-stripe */
.vehicle { border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-lg); overflow: hidden; max-width: 520px; background: var(--ite-color-surface); box-shadow: var(--ite-ring-hairline), 0 10px 26px -14px rgba(19,20,24,0.5); }
.vehicle__body { height: 110px; position: relative; isolation: isolate; overflow: hidden;
  background: var(--alloy-sheen), var(--alloy-grain), var(--alloy-base); box-shadow: var(--alloy-edge); }
.vehicle__band { position: absolute; bottom: 0; left: 0; right: 0; height: 26px; background: var(--ite-orange-500);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 2px 0 -1px rgba(0,0,0,0.0); }
.vehicle__band::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--ite-orange-700), var(--ite-orange-500) 40%, var(--ite-orange-300) 70%, transparent); }
.vehicle__logo { position: absolute; top: 22px; left: 24px; height: 30px; z-index: 1; }
.vehicle__contact { position: absolute; top: 30px; right: 24px; font-size: 12px; font-weight: 600; color: var(--ite-gray-800); text-shadow: var(--engrave); z-index: 1; }
.vehicle__caption { padding: 10px 14px; font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); border-top: 1px solid var(--ite-color-border); }

/* Presentation slide (marketing.html) */
.slide { aspect-ratio: 16/9; border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-md); overflow: hidden; background: var(--ite-white); display: flex; flex-direction: column; box-shadow: var(--ite-shadow-sm); }
.slide--title { background: var(--ite-tx-grid), var(--ite-white); justify-content: center; padding: 9%; }
.slide--title .slide__heading { font-family: var(--ite-font-display); font-size: clamp(1.2rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 4%; }
.slide--dark { background: var(--ite-tx-grid-dark), var(--gun-sheen), var(--gun-base); box-shadow: var(--gun-edge); color: var(--ite-white); }
.slide__kicker { font-size: clamp(.55rem, 1.1vw, .75rem); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ite-text-orange); }
.slide--dark .slide__kicker { color: var(--ite-orange-300); }
.slide__content { padding: 7% 9%; flex: 1; }
.slide__footer { display: flex; justify-content: space-between; align-items: center; padding: 3% 9%; border-top: 1px solid var(--ite-color-border); font-size: clamp(.5rem, 1vw, .7rem); color: var(--ite-color-text-subtle); }
.slide--dark .slide__footer { border-top-color: rgba(255,255,255,.15); }
.slide__logo { height: clamp(12px, 2.4vw, 20px); }

/* Modal mock (components.html) */
.modalmock { background: rgba(19,20,24,.45); border-radius: var(--ite-radius-lg); padding: 40px; display: grid; place-items: center; }
.modalmock__panel { background: var(--ite-color-surface); border-radius: var(--ite-radius-2xl); box-shadow: var(--ite-shadow-xl); padding: 24px; max-width: 380px; width: 100%; }
.modalmock__title { font-family: var(--ite-font-display); font-weight: var(--ite-weight-semibold); font-size: var(--ite-text-lg); margin: 0 0 8px; }
.modalmock__body { font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); margin: 0 0 18px; }
.modalmock__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Email signature (marketing.html) */
.emailsig { border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-md); padding: 20px 24px; background: var(--ite-white); max-width: 460px; font-size: 13px; line-height: 1.5; }
.emailsig__name { font-weight: 700; font-size: 15px; color: var(--ite-gray-900); }
.emailsig__role { color: var(--ite-gray-600); margin-bottom: 8px; }
.emailsig__rule { border: none; border-top: 2px solid var(--ite-orange-500); width: 48px; margin: 8px 0; }
.emailsig__co { font-weight: 600; color: var(--ite-gray-900); }
.emailsig__contact { color: var(--ite-gray-600); }
.emailsig__contact a { color: var(--ite-text-orange); text-decoration: none; }

/* Logo stage (identity.html) */
.logo-stage {
  display: grid; place-items: center;
  height: 180px; border-radius: var(--ite-radius-lg); corner-shape: var(--ite-corner); position: relative;
  border: 1px solid var(--ite-color-border);
}
.logo-stage--light { background: var(--ite-white); }
.logo-stage--dark  { background: var(--ite-gray-900); }
.logo-stage--brand { background: var(--ite-orange); }
.logo-img { max-height: 72px; max-width: 80%; width: auto; height: auto; }
.logo-stage__note {
  position: absolute; bottom: 10px; left: 12px;
  font-size: var(--ite-text-xs);
}

/* Nameplate (environment.html) */
.nameplate {
  border: 2px solid var(--ite-gray-500); border-radius: 6px; max-width: 420px;
  background: linear-gradient(160deg, var(--ite-gray-100), var(--ite-gray-300));
  color: var(--ite-gray-900); padding: 16px 18px; font-size:var(--ite-text-2xs);
  font-family: var(--ite-font-sans);
}
.nameplate__head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid var(--ite-gray-600); padding-bottom: 8px; margin-bottom: 8px; }
.nameplate__brand { font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.nameplate__type { font-weight: 600; }
.nameplate table { width: 100%; border-collapse: collapse; }
.nameplate td { border: 1px solid var(--ite-gray-500); padding: 3px 6px; }
.nameplate td:first-child { font-weight: 600; width: 45%; }

/* Engineering titleblock (engineering.html) */
.titleblock { width: 100%; border-collapse: collapse; font-size:var(--ite-text-3xs); border: 1.5px solid #231f20; background: var(--ite-white); color: #231f20; }
.titleblock td { border: 1px solid #231f20; padding: 4px 7px; }
.titleblock .tb-label { font-size: 7.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ite-gray-600); display: block; }
.titleblock .tb-value { font-weight: 700; }
.titleblock .tb-co { font-weight: 700; font-size: 12px; }

/* Form design-system gallery (forms.html, engineering.html) */
.formdemo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0;
}
.formdemo__item {
  border: 1px solid var(--ite-color-border);
  border-radius: var(--ite-radius-lg);
  corner-shape: var(--ite-corner);
  overflow: hidden;
  background: var(--ite-color-surface);
}
.formdemo__stage {
  background: var(--ite-white);
  color: var(--ite-black);
  padding: 16px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
  border-bottom: 1px solid var(--ite-color-border);
}
.formdemo__label { margin: 0; padding: 10px 14px; font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); }
.formdemo__label strong { color: var(--ite-color-text); }

/* fd-* mini form components (monochrome, doc-scaled) */
.fd-header { display: flex; justify-content: space-between; align-items: flex-start; }
.fd-code { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fd-title { font-size: 15px; font-weight: 700; text-transform: uppercase; }
.fd-logo {
  border: 1.5px solid var(--ite-black); font-weight: 700; font-size: 12px;
  padding: 2px 6px; letter-spacing: .04em;
}
.fd-bar { background: #231f20; color: var(--ite-white); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 5px; font-size: 13px; }
.fd-tabbox { position: relative; border: 1.5px solid #231f20; padding: 16px 10px 10px; font-size: 12px; margin-top: 7px; }
.fd-tab { position: absolute; top: -7px; left: -1.5px; width: 80px; height: 7px; background: #231f20; border-radius: 7px 7px 0 0; }
.fd-grid { width: 100%; border-collapse: collapse; font-size:var(--ite-text-2xs); }
.fd-grid td { border: 1px solid #231f20; padding: 4px 6px; height: 22px; }
.fd-check::before { content: ""; display: inline-block; width: 11px; height: 11px; border: 1.5px solid #231f20; margin-right: 5px; vertical-align: -1px; }
.fd-ghost { color: #dcddde; }
.fd-signoff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; }
.fd-signoff div { border-top: 1.5px solid #231f20; padding-top: 4px; font-size:var(--ite-text-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: center; }
.fd-rail { display: flex; align-items: stretch; border: 1.5px solid #231f20; width: 100%; }
.fd-rail__label { writing-mode: vertical-rl; transform: rotate(180deg); padding: 4px 2px; font-size:var(--ite-text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-right: 1px solid #231f20; display: flex; align-items: center; justify-content: center; }
.fd-rail__body { flex: 1; padding: 10px; font-size:var(--ite-text-2xs); }
.fd-dual { width: 100%; border-collapse: collapse; font-size:var(--ite-text-2xs); }
.fd-dual td { border: 1px solid #231f20; padding: 3px 6px; }
.fd-dual td.acol { width: 34px; text-align: center; font-size: 8px; color: #aeb0b6; }
.fd-dual tr:nth-child(even) td { background: var(--ite-gray-100); }
.fd-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size:var(--ite-text-2xs); }
.fd-key b { font-weight: 700; }
.fd-rows { width: 100%; border-collapse: collapse; font-size:var(--ite-text-2xs); }
.fd-rows td { border: 1px solid #231f20; height: 20px; }
.fd-rows td.num { width: 18px; text-align: center; color: var(--ite-gray-600); }
.fd-dim { font-size: 13px; }
.fd-dim .blank { display: inline-block; min-width: 42px; border-bottom: 1px solid #231f20; }
.fd-approval { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid #231f20; width: 100%; }
.fd-approval div { border-right: 1px solid #231f20; min-height: 44px; display: flex; align-items: flex-end; justify-content: center; padding: 4px; font-size:var(--ite-text-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.fd-approval div:last-child { border-right: none; }

/* Hero (light + dark) — for web.html hero component demo */
.hero { border-radius: var(--ite-radius-2xl); padding: 56px 40px; background: var(--ite-tx-grid), var(--ite-color-bg); border: 1px solid var(--ite-color-border); }
.hero__eyebrow { color: var(--ite-text-orange); }
.hero h1, .hero .hero__title { font-family: var(--ite-font-display); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: var(--ite-weight-bold); letter-spacing: var(--ite-tracking-display); line-height: 1.1; margin: 12px 0; color: var(--ite-black); text-shadow: 0 1px 2px rgba(255,255,255,.40), 0 2px 24px rgba(255,255,255,.35); }
.hero--dark h1, .hero--dark .hero__title { color: var(--ite-white); text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 28px rgba(0,0,0,.40); }
.hero .accent-underline { box-shadow: inset 0 -0.3em 0 var(--ite-orange-200); }
.hero__year { color: var(--ite-text-orange-lg); }
.hero__cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero--dark { border: none; background: var(--ite-tx-grid-dark), var(--gun-sheen), var(--gun-base); box-shadow: var(--gun-edge); }

/* SKIPPED: .version-log — already ported in C7 / owned by new stylesheet */

/* Resources range rows */
.range { border: 1px solid var(--ite-color-border); border-radius: var(--ite-radius-lg); overflow: hidden; margin: 16px 0; }
.range__row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--ite-color-surface);
}
.range__row + .range__row { border-top: 1px solid var(--ite-color-border); }
.range__name { font-weight: var(--ite-weight-medium); color: var(--ite-color-text); }
.range__code {
  margin-left: auto;
  font-family: var(--ite-font-mono);
  font-size: var(--ite-text-xs);
  color: var(--ite-color-text-muted);
  background: var(--ite-color-bg-muted);
  border-radius: var(--ite-radius-pill);
  padding: 3px 10px;
}

/* Foundations copy slot (awaiting official copy) */
.copyslot {
  border: 1px dashed var(--ite-color-border-strong);
  border-radius: var(--ite-radius-lg);
  background: var(--ite-color-bg-subtle);
  padding: var(--ite-space-6);
  margin: 0 0 16px;
}
.copyslot__tag {
  display: inline-block;
  font-family: var(--ite-font-mono);
  font-size: var(--ite-text-xs);
  letter-spacing: var(--ite-tracking-wide);
  text-transform: uppercase;
  color: var(--ite-color-text-subtle);
  margin-bottom: 8px;
}
.copyslot p { margin: 0; font-size: var(--ite-text-sm); color: var(--ite-color-text-muted); }

/* Responsive adjustments for C-c families */
@media (max-width: 900px) {
  .formdemo { grid-template-columns: 1fr 1fr; }
  .catalogue { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: 1fr; }
}

/* ============================================================================
   PRODUCT PHOTOGRAPHY (Phase 2) — studio shots in the prod-lid hero +
   feature list, application tags, secondary figure. Images come from
   tools/process_product_photo.py (brand/assets/products/*).
   ============================================================================ */
@media(min-width:1024px){
  .prod-lid--photo{grid-template-columns:1fr minmax(380px,460px)}
}
.prod-hero--photo{aspect-ratio:4/3;
  background:radial-gradient(120% 120% at 50% 0%,var(--ite-white),var(--ite-gray-50) 80%)}
.prod-hero--photo picture{position:absolute;inset:0;display:block}
.prod-hero--photo img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block}
.prod-hero__cap{position:absolute;left:12px;top:10px;z-index:1;
  font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);letter-spacing:0.06em;
  color:var(--ite-color-text-subtle);background:rgba(255,255,255,0.6);
  padding:2px 6px;border-radius:var(--ite-radius-xs)}

/* "Also known as" alt-name line — surfaces product synonyms for buyers + SEO.
   Lives on the dark alloy hero, so it uses the same light-on-dark tokens as the
   crumb (--ite-orange-300) and tagline (--ite-gray-300), and z-index:1 to sit
   above the .prod-lid::after grain overlay. */
.prod-aka{position:relative;z-index:1;margin:12px 0 0;font-family:var(--ite-font-mono);
  font-size:var(--ite-text-xs);letter-spacing:0.01em;color:var(--ite-gray-300);line-height:1.6}
.prod-aka b{margin-right:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.07em;
  color:var(--ite-orange-300)}

/* Feature list — bulleted capability statements from the data sheet */
/* Specification as a designed spec sheet — copper tick rows, hover highlight. */
.feat-list{list-style:none;margin:var(--ite-space-4) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 var(--ite-space-8)}
@media(max-width:768px){.feat-list{grid-template-columns:1fr}}
.feat-list li{position:relative;padding:12px 10px 12px 26px;font-size:var(--ite-text-sm);
  color:var(--ite-color-text);line-height:var(--ite-leading-normal);
  border-top:1px solid var(--ite-color-border);
  transition:background var(--ite-dur-fast) var(--ite-ease-standard)}
.feat-list li:hover{background:var(--ite-color-bg-subtle)}
.feat-list li::before{content:"";position:absolute;left:6px;top:17px;width:8px;height:8px;
  border-radius:2px;corner-shape:var(--ite-corner);
  background:linear-gradient(135deg,#dd9560,#a85a36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35)}
.feat-list li b{font-weight:600}

/* Application tags — designed chips with a copper pip + hover lift. */
.app-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--ite-space-4)}
.app-tag{display:inline-flex;align-items:center;gap:8px;font-size:var(--ite-text-sm);font-weight:500;
  padding:7px 14px;border-radius:9999px;border:1px solid var(--ite-color-border);
  background:var(--ite-color-surface);color:var(--ite-color-text);
  transition:border-color var(--ite-dur-fast) var(--ite-ease-standard),
    box-shadow var(--ite-dur-base) var(--ite-ease-standard),
    transform var(--ite-dur-fast) var(--ite-ease-standard)}
.app-tag::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#dd9560,#a85a36)}
.app-tag:hover{border-color:var(--ite-color-border-strong);
  box-shadow:var(--ite-shadow-xs);transform:translateY(-1px)}

/* Secondary product figure (e.g. head-on angle) */
.prod-figure{margin:var(--ite-space-4) 0 0;border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-xl);overflow:hidden;box-shadow:var(--ite-ring-hairline);
  background:radial-gradient(120% 120% at 50% 0%,var(--ite-white),var(--ite-gray-50) 80%);
  max-width:560px}
.prod-figure img{display:block;width:100%;height:auto}
.prod-figure figcaption{padding:10px 16px;border-top:1px solid var(--ite-color-border);
  font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  color:var(--ite-color-text-subtle);background:var(--ite-color-surface)}

/* Hub card with a real product photo in the lid (Phase 2) */
.cplate__lid--photo{padding:0;
  background:radial-gradient(120% 120% at 50% 0%,var(--ite-white),var(--ite-gray-50) 80%)}
.cplate__lid--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cplate__lid--photo .cplate__num{position:absolute;left:14px;top:12px;z-index:2;
  background:rgba(255,255,255,0.65);padding:2px 7px;border-radius:var(--ite-radius-xs)}

/* ============================================================================
   PRODUCT IMAGE PLACEHOLDERS — premium "photo to follow" treatment
   For product lines whose studio photograph is still being commissioned
   (products.json hasPhoto:false). An engineered alloy plate on a faint
   blueprint-grid ground with copper registration ticks + LINE·NN — reads as
   deliberate drafting, never as a broken/empty image.
   ============================================================================ */
.prod-hero--ph,.cplate__lid--ph{
  --ph-grid:rgba(58,62,68,0.06);
  background:
    linear-gradient(var(--ph-grid) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,var(--ph-grid) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(120% 120% at 50% 0%,var(--ite-white),var(--ite-gray-50) 82%)}

.prod-hero--ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
/* Machined photo-mount plate — copper corner registration ticks awaiting the shot. */
.ph-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  width:74%;max-width:320px;padding:30px 26px;
  border:1px solid var(--ite-color-border-strong);
  border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);
  background:linear-gradient(150deg,rgba(255,255,255,0.94),rgba(244,244,245,0.80));
  box-shadow:var(--ite-shadow-sm)}
.ph-box::before,.ph-box::after{content:"";position:absolute;width:12px;height:12px;
  border:1.5px solid var(--ite-copper-base,#a85a36);opacity:0.75}
.ph-box::before{left:8px;top:8px;border-right:0;border-bottom:0}
.ph-box::after{right:8px;bottom:8px;border-left:0;border-top:0}
.ph-box__glyph{width:58px;height:auto;opacity:0.9}
.ph-box__glyph *{fill:none;stroke:var(--ite-gray-500);stroke-width:1.5;
  vector-effect:non-scaling-stroke}
.ph-box__label{font-family:var(--ite-font-mono);font-size:0.6875rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ite-color-text-subtle);text-align:center;line-height:1.55}
.ph-box__label b{display:block;color:var(--ite-color-text);font-weight:600;letter-spacing:0.04em}

/* Hub card placeholder lid — LINE·NN top-left, engineered mark centred */
.cplate__lid--ph{display:flex;align-items:center;justify-content:center}
.cplate__lid--ph .cplate__num{position:absolute;left:14px;top:12px;z-index:2;
  background:rgba(255,255,255,0.7);padding:2px 7px;border-radius:var(--ite-radius-xs)}
.cplate__lid--ph .ph-mini{display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}
.cplate__lid--ph .ph-mini svg{width:42px;height:auto;opacity:0.85;
  transition:opacity var(--ite-dur-base) var(--ite-ease-standard)}
.cplate__lid--ph .ph-mini svg *{fill:none;stroke:var(--ite-gray-400);stroke-width:1.5;
  vector-effect:non-scaling-stroke}
.cplate__lid--ph .ph-mini span{font-family:var(--ite-font-mono);font-size:0.625rem;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--ite-color-text-subtle)}
.cplate:hover .cplate__lid--ph .ph-mini svg{opacity:1}

/* ============================================================================
   MANUFACTURING & TESTING — cinematic capability galleries (.mf-*)
   In-situ works photography in a uniform equal-size grid (3-up), all 16:9,
   with a hover lift + copper top-edge keyline.
   ============================================================================ */
.mf-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ite-space-5);
  margin-top:var(--ite-space-6)}
.mf-cell{display:flex;flex-direction:column;margin:0;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  corner-shape:var(--ite-corner);overflow:hidden;background:var(--ite-color-surface);
  box-shadow:var(--ite-shadow-xs);
  transition:box-shadow var(--ite-dur-base) var(--ite-ease-standard),
    transform var(--ite-dur-fast) var(--ite-ease-standard),
    border-color var(--ite-dur-fast) var(--ite-ease-standard)}
.mf-shot{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--gun-base)}
.mf-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);
  transition:transform 600ms var(--ite-ease-standard)}
/* copper hairline along the top edge on hover — the etched/registered look */
.mf-shot::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ite-orange-500),transparent);
  opacity:0;transition:opacity var(--ite-dur-base) var(--ite-ease-standard)}
.mf-cell:hover,.mf-cell:focus-within{box-shadow:var(--ite-shadow-md);
  border-color:var(--ite-color-border-strong);transform:translateY(-2px)}
.mf-cell:hover .mf-shot img,.mf-cell:focus-within .mf-shot img{transform:scale(1.045)}
.mf-cell:hover .mf-shot::after,.mf-cell:focus-within .mf-shot::after{opacity:1}
.mf-cap{display:grid;gap:4px;padding:var(--ite-space-4) var(--ite-space-5) var(--ite-space-5)}
.mf-cap__k{font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ite-text-orange)}
.mf-cap__t{font-family:var(--ite-font-display);font-weight:600;font-size:var(--ite-text-lg);
  color:var(--ite-color-text);line-height:1.2}
.mf-cap__d{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);
  line-height:var(--ite-leading-normal)}
/* portrait / odd-ratio shots show in full on a gunmetal ground, not cropped */
.mf-cell--contain .mf-shot{background:var(--gun-sheen),var(--gun-base)}
.mf-cell--contain .mf-shot img{object-fit:contain}
@media(prefers-reduced-motion:reduce){.mf-shot img,.mf-cell{transition:none}}
@media(max-width:900px){.mf-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mf-gallery{grid-template-columns:1fr}}

/* Sidebar product family sub-nav (nested under Products & Range) */
.rail-subgroup{margin:2px 0 2px 10px;padding-left:10px;
  border-left:1px solid var(--ite-color-border)}
.rail-subgroup__label{font-family:var(--ite-font-mono);font-size:var(--ite-text-micro);font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ite-color-text-subtle);
  padding:8px 8px 4px}
.rail-link--sub{font-size:var(--ite-text-sm)}
.rail-link--sub .num{opacity:0.7}

/* Multi-column spec table (e.g. Load Break Switch variants) */
.spec-cols{width:100%;border-collapse:separate;border-spacing:0;
  font-size:var(--ite-text-sm);margin-top:var(--ite-space-4)}
.spec-cols th,.spec-cols td{text-align:left;padding:10px 14px;
  border-bottom:1px solid var(--ite-color-border);vertical-align:top}
.spec-cols thead th{font-size:var(--ite-text-2xs);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ite-color-text-subtle);font-weight:600;background:var(--ite-color-bg-subtle)}
.spec-cols tbody th{font-weight:500;color:var(--ite-color-text-muted)}
.spec-cols td{font-family:var(--ite-font-mono);color:var(--ite-color-text)}
.spec-cols tbody tr:hover{background:var(--ite-color-bg-subtle)}
@media(max-width:768px){.spec-cols{overflow-x:auto;display:block;white-space:nowrap}}

/* Compartment blocks (Compact Sub-Station) */
.compartments{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ite-space-5);
  margin-top:var(--ite-space-4)}
@media(max-width:900px){.compartments{grid-template-columns:1fr}}
.compartment{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  background:var(--ite-color-surface);box-shadow:var(--ite-ring-hairline);padding:var(--ite-space-5)}
.compartment h3{font-family:var(--ite-font-display);font-weight:600;font-size:var(--ite-text-lg);
  margin:0 0 4px}
.compartment .ite-overline{display:block;margin-bottom:var(--ite-space-3)}
.compartment ul{list-style:none;margin:0;padding:0}
.compartment li{position:relative;padding:8px 0 8px 18px;font-size:var(--ite-text-sm);
  color:var(--ite-color-text);border-top:1px solid var(--ite-color-border);line-height:1.5}
.compartment li:first-child{border-top:0}
.compartment li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;
  border-radius:2px;background:var(--ite-orange-500)}

/* ============================================================================
   ROUND-2 PAGE COMPONENTS — Applications overhaul + Typography/Iconography
   rebuilds. Namespaced per page (.ev/.fm/.rs/.gov/.ic/.ty). Dark panels use
   the gunmetal gradient + light text; all rounded surfaces are squircled.
   ============================================================================ */

/* ---- Environment — gunmetal lead panel (.ev-*) ---- */
/* Gunmetal editorial chapter-lead panel — shared by environment + marketing. */
.ev-lead,.mk-lead{padding:clamp(24px,4vw,40px);border-radius:var(--ite-radius-2xl);corner-shape:var(--ite-corner);
  box-shadow:var(--gun-edge),var(--ite-shadow-lg);margin:4px 0 0;overflow:hidden}
.ev-lead__over,.mk-lead__over{display:block;font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ite-orange-300);margin-bottom:14px}
.ev-lead__statement,.mk-lead__statement{font-family:var(--ite-font-display);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);
  line-height:1.2;letter-spacing:-0.01em;color:var(--ite-white);margin:0 0 16px;max-width:34ch}
.ev-lead__accent,.mk-lead__accent{color:var(--ite-orange-300)}
.ev-lead__body,.mk-lead__body{font-size:var(--ite-text-base);line-height:1.7;color:var(--ite-gray-300);max-width:68ch;margin:0 0 18px}
.ev-lead__rail,.mk-lead__rail{display:flex;flex-wrap:wrap;gap:10px}
.ev-lead__chip,.mk-lead__chip{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-gray-200);
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--ite-radius-pill);padding:5px 13px}

/* ---- Forms — dark rule panel + catalogue group label (.fm-*) ---- */
.fm-lead{padding:clamp(22px,3.5vw,34px);border-radius:var(--ite-radius-2xl);corner-shape:var(--ite-corner);
  background:var(--gun-sheen),var(--gun-brush),var(--gun-base);box-shadow:var(--gun-edge),var(--ite-shadow-lg);margin:4px 0 0}
.fm-lead__rule{font-family:var(--ite-font-display);font-weight:600;font-size:clamp(1.15rem,2.4vw,1.55rem);
  line-height:1.4;color:var(--ite-white);margin:0;max-width:62ch}
.fm-lead__rule a{color:var(--ite-orange-300)}
.fm-catgroup{display:flex;align-items:center;gap:10px;font-family:var(--ite-font-display);font-weight:600;
  font-size:var(--ite-text-lg);color:var(--ite-color-text);margin:0 0 12px}
.fm-catgroup__chip{width:15px;height:15px;border-radius:5px;corner-shape:var(--ite-corner);flex:none}

/* ---- Resources — download cards, feature exports, doc list, asset grid (.rs-*) ---- */
.rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:6px}
/* Engraved steel download card (R4): brushed-alloy plate, gunmetal download stud, rivet corners. */
.rs-card{position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:3px;
  text-decoration:none;border:1px solid rgba(120,128,138,0.55);border-radius:var(--ite-radius-md);
  corner-shape:var(--ite-corner);background:var(--alloy-sheen),var(--alloy-base);padding:18px 18px 16px;
  box-shadow:var(--alloy-edge),var(--ite-shadow-sm);
  transition:box-shadow var(--ite-dur-base) var(--ite-ease-standard),transform var(--ite-dur-base) var(--ite-ease-standard)}
.rs-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0.5) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(60,66,74,0.10) 0 1px,transparent 1px 5px);mix-blend-mode:soft-light}
.rs-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle 4px at 9px 9px,var(--ite-white) 0,#9aa0a8 52%,#5e646c 88%,transparent 92%),
    radial-gradient(circle 4px at calc(100% - 9px) 9px,var(--ite-white) 0,#9aa0a8 52%,#5e646c 88%,transparent 92%),
    radial-gradient(circle 4px at 9px calc(100% - 9px),var(--ite-white) 0,#9aa0a8 52%,#5e646c 88%,transparent 92%),
    radial-gradient(circle 4px at calc(100% - 9px) calc(100% - 9px),var(--ite-white) 0,#9aa0a8 52%,#5e646c 88%,transparent 92%)}
.rs-card:hover{box-shadow:var(--alloy-edge),var(--ite-shadow-lg);transform:translateY(-2px)}
.rs-card:active{transform:translateY(0);box-shadow:var(--alloy-edge),var(--ite-shadow-sm)}
.rs-card:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.rs-card:hover .rs-card__tick{transform:translateY(2px)}
.rs-card__tick{grid-row:1/3;grid-column:1;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner);font-weight:700;font-size:16px;align-self:start;
  background:var(--gun-sheen),var(--gun-base);box-shadow:var(--gun-edge);color:var(--ite-orange-300);
  transition:transform var(--ite-dur-base) var(--ite-ease-standard)}
.rs-card__name{grid-column:2;font-family:var(--ite-font-mono);font-weight:600;font-size:var(--ite-text-sm);
  color:#15171a;text-shadow:0 1px 0 rgba(255,255,255,0.6)}
.rs-card__desc{grid-column:2;font-size:var(--ite-text-sm);color:#34383d;line-height:1.5}
.rs-card__meta{grid-column:1/3;margin-top:8px;padding-top:8px;border-top:1px solid rgba(60,66,74,0.25);
  font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);color:#3a3e44}
.rs-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:6px}
.rs-feat__card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-decoration:none;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-xl);corner-shape:var(--ite-corner);
  background:var(--ite-color-surface);padding:24px;box-shadow:var(--ite-shadow-sm);
  transition:box-shadow var(--ite-dur-base) var(--ite-ease-standard),transform var(--ite-dur-base) var(--ite-ease-standard)}
.rs-feat__card:hover{box-shadow:var(--ite-shadow-lg);transform:translateY(-2px)}
.rs-feat__card:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.rs-feat__chip{font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);letter-spacing:0.06em;text-transform:uppercase;
  border-radius:var(--ite-radius-pill);padding:4px 12px}
.rs-feat__title{font-family:var(--ite-font-display);font-weight:700;font-size:var(--ite-text-xl);color:var(--ite-color-text)}
.rs-feat__desc{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.6}
.rs-feat__desc a{color:var(--ite-text-orange)}
.rs-feat__cta{margin-top:6px;font-weight:600;font-size:var(--ite-text-sm);color:var(--ite-text-orange)}
.rs-docs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.rs-docs li{padding:12px 16px;border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);
  corner-shape:var(--ite-corner);background:var(--ite-color-surface)}
.rs-docs a{font-family:var(--ite-font-mono);font-weight:600;color:var(--ite-text-orange);text-decoration:none}
.rs-docs span{color:var(--ite-color-text-muted);font-size:var(--ite-text-sm)}
.rs-asset{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.rs-asset__card{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);
  background:var(--ite-color-surface);padding:16px 18px}
.rs-asset__chip{display:inline-block;font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);letter-spacing:0.08em;
  border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner);padding:4px 10px;margin-bottom:10px}
.rs-asset__card p{margin:0;font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.55}
.rs-asset__card code{font-size:var(--ite-text-xs)}

/* ---- Governance — policy cards, exception flow, naming, version timeline (.gov-*) ---- */
.gov-policy{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:6px}
.gov-policy__card{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);
  background:var(--ite-color-surface);padding:20px;box-shadow:var(--ite-shadow-xs)}
.gov-policy__card--truth{border-color:var(--ite-orange-300);box-shadow:var(--ite-shadow-sm)}
.gov-policy__card p{margin:10px 0 0;font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.6}
.gov-chip{display:inline-block;font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);letter-spacing:0.08em;
  text-transform:uppercase;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner);padding:4px 10px}
.gov-chip--locked{background:var(--ite-gray-800);color:var(--ite-white)}
.gov-chip--open{background:var(--ite-color-success);color:var(--ite-white)}
.gov-flow{margin-top:18px;padding:clamp(22px,3.5vw,32px);border-radius:var(--ite-radius-2xl);corner-shape:var(--ite-corner);
  background:var(--gun-sheen),var(--gun-brush),var(--gun-base);box-shadow:var(--gun-edge),var(--ite-shadow-lg)}
.gov-flow__label{display:block;font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--ite-orange-300);margin-bottom:16px}
.gov-flow__steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.gov-flow__steps li{display:flex;align-items:flex-start;gap:14px}
.gov-flow__n{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  font-family:var(--ite-font-mono);font-weight:700;font-size:var(--ite-text-sm);color:var(--ite-orange-300);
  border:1px solid rgba(233,128,70,0.42);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner)}
.gov-flow__t{font-size:var(--ite-text-base);line-height:1.5;color:var(--ite-gray-200)}
.gov-flow__t strong{color:var(--ite-white)}
.gov-name{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.gov-name__row{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:16px;align-items:start;
  padding:14px 16px;border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);
  corner-shape:var(--ite-corner);background:var(--ite-color-surface)}
.gov-name__k{align-self:start;width:fit-content;height:fit-content;font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);
  letter-spacing:0.06em;text-transform:uppercase;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner);padding:4px 10px}
.gov-name__v{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.55}
@media(max-width:560px){.gov-name__row{grid-template-columns:1fr}}
.gov-log{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.gov-rel{padding:20px 22px;border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);
  background:var(--gun-sheen),var(--gun-brush),var(--gun-base);box-shadow:var(--gun-edge),var(--ite-shadow-md)}
.gov-rel__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.gov-rel__ver{font-family:var(--ite-font-display);font-weight:700;font-size:var(--ite-text-xl);color:var(--ite-white)}
.gov-rel__tag{font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);letter-spacing:0.08em;text-transform:uppercase;
  border-radius:var(--ite-radius-pill);padding:3px 10px}
.gov-rel__tag--now{background:var(--ite-orange-500);color:var(--ite-black)}
.gov-rel__tag--major{background:rgba(255,255,255,0.14);color:var(--ite-white)}
.gov-rel__date{margin-left:auto;font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-gray-300)}
.gov-rel__lede{font-family:var(--ite-font-display);font-weight:600;font-size:var(--ite-text-base);
  color:var(--ite-orange-300);margin:0 0 6px}
.gov-rel__desc{font-size:var(--ite-text-sm);line-height:1.6;color:var(--ite-gray-300);margin:0}
.gov-rel__desc a{color:var(--ite-white);text-decoration:underline;text-decoration-color:rgba(255,255,255,0.4)}
.gov-rel__desc code{background:rgba(255,255,255,0.08);color:var(--ite-gray-200);padding:1px 5px;border-radius:4px}

/* ---- Iconography — hero specimen, axes demos, set grid (.ic-*) ---- */
.ic-hero{padding:clamp(24px,4vw,40px);border-radius:var(--ite-radius-2xl);corner-shape:var(--ite-corner);
  box-shadow:var(--gun-edge),var(--ite-shadow-lg);overflow:hidden}
.ic-hero__lead{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ic-hero__glyph{font-size:clamp(72px,14vw,104px);line-height:1;color:var(--ite-white);
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' -25,'opsz' 48}
.ic-hero__caption{display:flex;flex-direction:column;gap:6px}
.ic-hero__tag{font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--ite-orange-300)}
.ic-hero__spec{font-family:var(--ite-font-mono);font-size:var(--ite-text-sm);color:var(--ite-gray-300)}
.ic-hero__row{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.12)}
.ic-hero__sm{font-size:32px;color:var(--ite-gray-200);font-variation-settings:'FILL' 0,'wght' 400,'GRAD' -25,'opsz' 32}
.ic-hero__sm--accent{color:var(--ite-orange-400)}
.ic-axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:6px 0 18px}
.ic-axis{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);
  background:var(--ite-color-surface);padding:18px;box-shadow:var(--ite-shadow-xs)}
.ic-axis__demo{display:flex;align-items:center;gap:10px;height:56px;margin-bottom:12px;color:var(--ite-color-text)}
.ic-axis__demo .material-symbols-outlined{font-size:38px}
.ic-axis__demo--opsz{align-items:baseline}
.ic-axis__ghost{opacity:0.24}
.ic-axis__name{display:block;font-family:var(--ite-font-mono);font-size:var(--ite-text-sm);font-weight:700;color:var(--ite-text-orange)}
.ic-axis__set{display:block;font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-color-text-muted);margin:2px 0 8px}
.ic-axis__note{margin:0;font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.5}
.ic-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px;margin-top:6px}
.ic-cell{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 12px 16px;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);
  background:var(--ite-color-surface);box-shadow:var(--ite-shadow-xs);
  transition:box-shadow var(--ite-dur-base) var(--ite-ease-standard),transform var(--ite-dur-base) var(--ite-ease-standard)}
.ic-cell:hover{box-shadow:var(--ite-shadow-md);transform:translateY(-2px)}
.ic-cell__icon{font-size:36px;color:var(--ite-color-text);font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 40}
.ic-cell--accent .ic-cell__icon{color:var(--ite-text-orange)}
.ic-cell__code{font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);color:var(--ite-color-text-muted)}

/* ---- Typography rebuild (.ty-*) ---- */
.ty-faces{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0}
.ty-face{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-xl);corner-shape:var(--ite-corner);
  background:var(--ite-color-surface);padding:22px 22px 20px;display:flex;flex-direction:column;
  box-shadow:var(--ite-ring-hairline);overflow:hidden}
.ty-face--display{color:var(--ite-gray-100);border-color:var(--ite-chrome-border)}
.ty-face__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.ty-face__role{font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--ite-text-orange)}
.ty-face--display .ty-face__role{color:var(--ite-orange-300)}
.ty-face__specimen{font-size:clamp(4rem,14vw,7rem);line-height:0.9;font-weight:700;letter-spacing:-0.03em;margin:6px 0 4px;color:var(--ite-color-text)}
.ty-face--display .ty-face__specimen{color:var(--ite-white)}
.ty-face--mono .ty-face__specimen{letter-spacing:0}
.ty-face__name{font-size:var(--ite-text-lg);font-weight:600;margin:0 0 10px}
.ty-face--display .ty-face__name{color:var(--ite-white)}
.ty-face__chars{font-size:var(--ite-text-sm);line-height:1.7;margin:0 0 14px;color:var(--ite-color-text-muted);word-spacing:0.04em}
.ty-face--display .ty-face__chars{color:var(--ite-gray-300)}
.ty-face__stack{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--ite-color-border);
  font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);line-height:1.5;color:var(--ite-color-text-muted)}
.ty-face--display .ty-face__stack{border-top-color:rgba(255,255,255,0.14);color:var(--ite-gray-400)}
.ty-mono{font-family:var(--ite-font-mono)}
.ty-scale-panel{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);
  background:var(--ite-color-surface);padding:8px 24px;margin:16px 0 14px;box-shadow:var(--ite-ring-hairline)}
.ty-scale-strip{display:flex;flex-wrap:wrap;gap:8px}
.ty-step{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-color-text-muted);
  background:var(--ite-color-bg-subtle);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-sm);
  corner-shape:var(--ite-corner);padding:4px 9px}
.ty-step--accent{color:var(--ite-text-orange);border-color:var(--ite-orange-300)}
.ty-weights{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:18px 0 16px}
.ty-weight{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);
  background:var(--ite-color-surface);padding:18px 16px 14px;text-align:center;box-shadow:var(--ite-ring-hairline)}
.ty-weight__glyph{display:block;font-size:clamp(2.6rem,7vw,3.4rem);line-height:1;letter-spacing:-0.02em;color:var(--ite-color-text)}
.ty-weight__name{display:block;margin-top:12px;font-size:var(--ite-text-sm);font-weight:600}
.ty-weight__val{display:inline-block;margin-top:4px;font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-color-text-muted)}
.ty-utils{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.ty-util-chip{background:var(--ite-color-bg-subtle);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-sm);
  corner-shape:var(--ite-corner);padding:5px 10px}
.ty-util-chip code{font-size:var(--ite-text-xs);color:var(--ite-color-text)}
.ty-lockup{position:relative;border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-xl);corner-shape:var(--ite-corner);
  background:var(--ite-color-surface);padding:clamp(26px,5vw,48px);margin:18px 0 0;box-shadow:var(--ite-shadow-sm);overflow:hidden}
.ty-lockup__eyebrow{font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--ite-color-text-muted);margin:0 0 14px}
.ty-lockup__title{font-size:clamp(2rem,5.5vw,3.5rem);font-weight:700;line-height:1.05;letter-spacing:var(--ite-tracking-display);color:var(--ite-color-text);margin:0 0 18px}
.ty-lockup__accent{color:var(--ite-text-orange-lg)}
.ty-lockup__body{font-size:var(--ite-text-lg);line-height:var(--ite-leading-relaxed);color:var(--ite-color-text-muted);max-width:60ch;margin:0 0 16px}
.ty-lockup__spec{font-size:var(--ite-text-sm);color:var(--ite-color-text);padding-top:14px;border-top:1px solid var(--ite-color-border);margin:0}
@media(max-width:600px){.ty-face__specimen{font-size:4.5rem}}

/* ---- Engineering — document-standards gunmetal panel (.eng-*) ---- */
.eng-standards{border-radius:var(--ite-radius-2xl);corner-shape:var(--ite-corner);
  padding:var(--ite-space-8);margin:var(--ite-space-6) 0;
  background:var(--ite-tx-grid-dark),var(--gun-sheen),var(--gun-base);
  box-shadow:var(--gun-edge),var(--ite-shadow-lg);overflow:hidden}
.eng-standards__label{display:block;font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  letter-spacing:var(--ite-tracking-caps);text-transform:uppercase;color:var(--ite-orange-300);
  margin:0 0 var(--ite-space-6);padding-bottom:var(--ite-space-4);border-bottom:1px solid rgba(255,255,255,0.1)}
/* Numbered ledger (R5): index+label rail · bold key fact · detail, hairline rows */
.eng-standards__list{display:flex;flex-direction:column}
.eng-standards__row{display:grid;grid-template-columns:clamp(96px,15vw,128px) 1fr;gap:var(--ite-space-6);
  padding:var(--ite-space-5) 0;border-top:1px solid rgba(255,255,255,0.1)}
.eng-standards__row:first-child{border-top:0;padding-top:0}
.eng-standards__rail{display:flex;flex-direction:column;gap:6px}
.eng-standards__num{font-family:var(--ite-font-mono);font-size:0.7rem;font-weight:700;letter-spacing:.06em;color:var(--ite-orange-300)}
.eng-standards__k{font-family:var(--ite-font-mono);font-size:0.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ite-gray-100)}
.eng-standards__lead{font-family:var(--ite-font-display);font-weight:600;font-size:1.1rem;letter-spacing:-0.01em;color:var(--ite-white);margin:0 0 5px;line-height:1.22}
.eng-standards__detail{margin:0;font-size:var(--ite-text-sm);line-height:1.55;color:var(--ite-gray-300);max-width:62ch}
.eng-standards__detail a{color:var(--ite-orange-300);text-underline-offset:.16em}
.eng-standards__detail code{font-family:var(--ite-font-mono);font-size:0.9em;color:var(--ite-gray-100)}
@media(max-width:560px){.eng-standards__row{grid-template-columns:1fr;gap:var(--ite-space-2)}}

/* ---- Print — copper status chips, built-out stationery specs (.pr-*) ---- */
.pr-chip{flex:none;align-self:flex-start;font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner)}
/* Provisional spec cards (print): dashed, no copper "ready" tab, muted status chip. */
.cat-card--spec{border-style:dashed;border-color:var(--ite-color-border-strong);box-shadow:none}
.cat-card--spec::before{display:none}
.cat-card--spec .cat-card__status{color:var(--ite-color-text-subtle);background:var(--ite-color-bg-subtle);
  box-shadow:inset 0 0 0 1px var(--ite-color-border-strong);
  padding:2px 9px;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner)}
.pr-spec{display:grid;gap:var(--ite-space-6);margin:var(--ite-space-8) 0 var(--ite-space-6)}
.pr-spec__item{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-xl);corner-shape:var(--ite-corner);
  background:var(--ite-color-surface);padding:var(--ite-space-6) var(--ite-space-6) var(--ite-space-4)}
.pr-spec__head{display:flex;align-items:center;justify-content:space-between;gap:var(--ite-space-4);margin-bottom:6px}
.pr-spec__name{font-family:var(--ite-font-display);font-size:var(--ite-text-2xl);font-weight:var(--ite-weight-semibold);color:var(--ite-color-text)}
.pr-spec__lede{margin:0 0 var(--ite-space-4);max-width:62ch;font-size:var(--ite-text-base);line-height:var(--ite-leading-relaxed);color:var(--ite-color-text-muted)}
.pr-spec__table{margin:0}
.pr-spec__table td{vertical-align:top}
@media(min-width:768px){.pr-spec{grid-template-columns:1fr 1fr}}

/* ============================================================================
   ch8 IMAGERY (.im-*) — tenets, subject line-art, treatment grades (R3 overhaul)
   ============================================================================ */
/* Numbered principle cards — copper left-edge, shared by imagery + components. */
.im-tenets,.cm-tenets{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:6px}
.im-tenet,.cm-tenet{display:flex;flex-direction:column;gap:4px;padding:18px 18px 18px 20px;background:var(--ite-color-surface);
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);
  box-shadow:var(--ite-shadow-xs);position:relative;isolation:isolate;overflow:hidden}
.im-tenet::before,.cm-tenet::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--copper-sheen),var(--copper-base)}
.im-tenet__k,.cm-tenet__k{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);font-weight:700;color:var(--ite-text-orange)}
.im-tenet b,.cm-tenet b{font-family:var(--ite-font-display);font-weight:600;font-size:var(--ite-text-base);color:var(--ite-color-text)}
.im-tenet span,.cm-tenet span{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.5}
.cm-tenet code{font-size:0.88em}

.im-subjects{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:6px}
.im-subject{margin:0;display:flex;flex-direction:column;border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-xl);corner-shape:var(--ite-corner);overflow:hidden;background:var(--ite-color-surface);
  box-shadow:var(--ite-shadow-xs);transition:box-shadow var(--ite-dur-base) var(--ite-ease-standard),transform var(--ite-dur-base) var(--ite-ease-standard)}
.im-subject:hover{box-shadow:var(--ite-shadow-md);transform:translateY(-2px)}
.im-subject__art{display:block;width:100%;height:108px;padding:14px;
  background:var(--ite-tx-grid),var(--ite-color-bg-subtle);border-bottom:1px solid var(--ite-color-border)}
.im-subject__art rect,.im-subject__art line,.im-subject__art circle{fill:none;stroke:var(--ite-gray-500);stroke-width:2;stroke-linecap:round}
.im-subject figcaption{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px}
.im-subject b{font-family:var(--ite-font-display);font-weight:600;color:var(--ite-color-text)}
.im-subject span{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.5}

.im-grades{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:6px}
.im-grade{margin:0;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:188px;padding:16px;border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-xl);corner-shape:var(--ite-corner)}
.im-grade--neutral{background:linear-gradient(145deg,var(--ite-gray-300),var(--ite-gray-200))}
.im-grade--tint{background:linear-gradient(150deg,rgba(242,101,34,0.32),transparent 68%),linear-gradient(145deg,var(--ite-gray-700),var(--ite-gray-900))}
.im-grade--mono{background:repeating-linear-gradient(45deg,var(--ite-gray-200),var(--ite-gray-200) 7px,var(--ite-gray-100) 7px,var(--ite-gray-100) 14px)}
.im-grade__tag{position:absolute;top:14px;left:14px;z-index:1;font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);
  letter-spacing:0.06em;text-transform:uppercase;padding:3px 9px;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner);
  background:var(--copper-sheen),var(--copper-base);color:var(--copper-ink);box-shadow:var(--copper-edge)}
.im-grade figcaption{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;padding:12px 13px;
  background:var(--ite-white);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);box-shadow:var(--ite-shadow-md)}
.im-grade b{font-family:var(--ite-font-display);font-weight:600;color:var(--ite-color-text);font-size:var(--ite-text-sm)}
.im-grade span{font-size:var(--ite-text-xs);color:var(--ite-color-text-muted);line-height:1.45}

/* ============================================================================
   ch4 IDENTITY (.id-*) — clear-space diagram (R3 overhaul)
   ============================================================================ */
.id-clearspace{margin:8px 0 var(--ite-space-4)}
.id-clearspace__frame{position:relative;display:grid;place-items:center;
  padding:clamp(40px,8vw,68px);background:var(--ite-white);
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-xl);corner-shape:var(--ite-corner)}
.id-clearspace__frame::before{content:"";position:absolute;inset:clamp(22px,4.5vw,40px);
  border:1.5px dashed var(--ite-orange-400);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);
  pointer-events:none}
.id-clearspace__logo{position:relative;z-index:1;height:clamp(38px,6vw,58px);width:auto}
.id-cs-tick{position:absolute;z-index:2;display:grid;place-items:center;width:22px;height:22px;
  font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);font-weight:700;color:var(--copper-ink);
  background:var(--copper-sheen),var(--copper-base);box-shadow:var(--copper-edge);
  border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner)}
.id-cs-tick--top{top:calc(clamp(22px,4.5vw,40px) - 11px);left:50%;transform:translateX(-50%)}
.id-cs-tick--bottom{bottom:calc(clamp(22px,4.5vw,40px) - 11px);left:50%;transform:translateX(-50%)}
.id-cs-tick--left{left:calc(clamp(22px,4.5vw,40px) - 11px);top:50%;transform:translateY(-50%)}
.id-cs-tick--right{right:calc(clamp(22px,4.5vw,40px) - 11px);top:50%;transform:translateY(-50%)}
.id-clearspace__note{margin:10px 0 0;font-size:var(--ite-text-sm);color:var(--ite-color-text-muted)}
.id-clearspace__note b{color:var(--ite-text-orange);font-family:var(--ite-font-mono)}

/* ============================================================================
   R4 WORKER-INTEGRATED CSS — content chapters drafted by the agent swarm.
   Single-writer integration; textures not washes; AAA verified at QA gate.
   ============================================================================ */

/* ---- W1 · Product spec tables (.ps-*) ---- */
.ps-spec{width:100%;border-collapse:collapse;border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);
  overflow:hidden;box-shadow:0 0 0 1px var(--ite-color-border);font-size:var(--ite-text-sm)}
.ps-spec tr + tr{border-top:1px solid var(--ite-color-border)}
.ps-spec__k,.ps-spec__v{padding:var(--ite-space-3) var(--ite-space-4);vertical-align:top;text-align:left}
.ps-spec__k{width:38%;color:var(--ite-color-text-muted);font-weight:500;
  border-right:1px solid var(--ite-color-border);background:var(--ite-color-surface)}
.ps-spec__v{color:var(--ite-color-text);font-weight:500;font-family:var(--ite-font-mono);font-variant-numeric:tabular-nums}
@media(max-width:640px){.ps-spec{font-size:var(--ite-text-xs)}
  .ps-spec__k,.ps-spec__v{padding:var(--ite-space-2) var(--ite-space-3)}.ps-spec__k{width:42%}}

/* ---- W2 · Credentials & Approvals (.cr-*) ---- */
.cr-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ite-space-6);margin:var(--ite-space-2) 0 0}
.cr-card{display:flex;flex-direction:column;gap:var(--ite-space-3);padding:var(--ite-space-6) var(--ite-space-6) var(--ite-space-5);
  background:var(--ite-color-surface);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-xl);
  corner-shape:var(--ite-corner);box-shadow:var(--ite-shadow-md)}
.cr-card__chip{align-self:flex-start;font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner)}
.cr-card__title{font-family:var(--ite-font-display);font-weight:600;font-size:var(--ite-text-lg);letter-spacing:-0.01em;color:var(--ite-color-text);margin:2px 0 0}
.cr-card__desc{margin:0;font-size:var(--ite-text-sm);line-height:var(--ite-leading-relaxed);color:var(--ite-color-text-muted)}
.cr-speclist{list-style:none;margin:auto 0 0;padding:var(--ite-space-3) 0 0;border-top:1px solid var(--ite-color-border)}
.cr-speclist li{display:flex;justify-content:space-between;gap:var(--ite-space-4);padding:7px 0;border-bottom:1px solid var(--ite-color-border)}
.cr-speclist li:last-child{border-bottom:0}
.cr-speclist__k{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted)}
.cr-speclist__v{font-family:var(--ite-font-mono);font-size:var(--ite-text-sm);font-weight:500;color:var(--ite-color-text);text-align:right}
.cr-speclist--panel{border-top:0;padding:var(--ite-space-2) var(--ite-space-5);align-self:start;min-width:240px;
  background:var(--ite-color-bg-subtle);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner)}
.cr-testing{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:var(--ite-space-8);align-items:start}
.cr-testing__lead p{margin:0 0 var(--ite-space-4)}.cr-testing__lead p:last-child{margin-bottom:0}
.cr-iso{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ite-space-5);margin:var(--ite-space-2) 0 0}
.cr-iso__item{display:flex;flex-direction:column;gap:var(--ite-space-2);padding:var(--ite-space-6) var(--ite-space-5);
  background:var(--ite-color-surface);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);box-shadow:var(--ite-shadow-sm)}
.cr-iso__std{font-family:var(--ite-font-display);font-weight:700;font-size:var(--ite-text-xl);letter-spacing:-0.01em;color:var(--ite-color-text)}
.cr-iso__name{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted)}
.cr-iso__state{align-self:flex-start;margin-top:var(--ite-space-2);font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner)}
.cr-mes{border-radius:var(--ite-radius-2xl);corner-shape:var(--ite-corner);padding:var(--ite-space-8);
  margin:var(--ite-space-2) 0 0;background:var(--ite-tx-grid-dark),var(--gun-sheen),var(--gun-base);
  box-shadow:var(--gun-edge),var(--ite-shadow-lg);overflow:hidden}
.cr-mes__label{display:block;font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);letter-spacing:var(--ite-tracking-caps);
  text-transform:uppercase;color:var(--ite-orange-300);margin:0 0 var(--ite-space-6);
  padding-bottom:var(--ite-space-4);border-bottom:1px solid rgba(255,255,255,0.1)}
.cr-mes__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ite-space-4)}
.cr-mes__cmd{display:flex;flex-direction:column;gap:5px;padding:var(--ite-space-4) var(--ite-space-5);
  background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner)}
.cr-mes__hq{font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ite-orange-300)}
.cr-mes__zone{font-size:var(--ite-text-sm);color:var(--ite-gray-50)}
.cr-reg{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ite-space-6);margin:var(--ite-space-6) 0 0}
.cr-reg__item{display:flex;gap:var(--ite-space-4);align-items:flex-start;padding:var(--ite-space-5) var(--ite-space-6);
  background:var(--ite-color-surface);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);box-shadow:var(--ite-shadow-sm)}
.cr-reg__chip{flex:none;font-family:var(--ite-font-mono);font-size:var(--ite-text-2xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner)}
.cr-reg__title{font-family:var(--ite-font-display);font-weight:600;font-size:var(--ite-text-lg);letter-spacing:-0.01em;color:var(--ite-color-text);margin:0 0 4px}
.cr-reg__body p{margin:0;font-size:var(--ite-text-sm);line-height:var(--ite-leading-relaxed);color:var(--ite-color-text-muted)}
.cr-perf{display:flex;gap:var(--ite-space-4);align-items:flex-start;margin:var(--ite-space-2) 0 0;padding:var(--ite-space-6);
  background:var(--ite-color-bg-subtle);border:1px solid var(--ite-color-border);border-left:3px solid var(--ite-orange-500);
  border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner)}
.cr-perf__icon{flex:none;font-family:var(--ite-font-mono);font-weight:700;font-size:var(--ite-text-lg);line-height:1.4;color:var(--ite-text-orange)}
.cr-perf p{margin:0;line-height:var(--ite-leading-relaxed);color:var(--ite-color-text-muted)}
@media(max-width:860px){.cr-testing{grid-template-columns:1fr}.cr-mes__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cr-cards,.cr-iso,.cr-reg{grid-template-columns:1fr}.cr-mes__grid{grid-template-columns:1fr}}

/* ---- W3 · Reach & Markets (.rv-*) ---- */
.rv-lead{padding:var(--ite-space-12) var(--ite-space-10);border-radius:var(--ite-radius-2xl);corner-shape:var(--ite-corner);box-shadow:var(--gun-edge),var(--ite-shadow-lg);overflow:hidden}
.rv-lead__over{display:block;font:600 0.8125rem/1 var(--ite-font-display);letter-spacing:0.08em;text-transform:uppercase;color:var(--ite-orange-300);margin-bottom:var(--ite-space-5)}
.rv-lead__statement{font-family:var(--ite-font-display);font-weight:700;font-size:clamp(1.5rem,1rem + 2.4vw,2.6rem);line-height:1.12;letter-spacing:-0.02em;margin:0 0 var(--ite-space-5);max-width:24ch;color:var(--ite-white)}
.rv-lead__accent{color:var(--ite-orange-300)}
.rv-lead__body{max-width:62ch;margin:0 0 var(--ite-space-8);color:var(--ite-gray-300)}
.rv-lead__rail{display:flex;flex-wrap:wrap;gap:var(--ite-space-3)}
.rv-lead__chip{font:500 0.8125rem/1 var(--ite-font-sans);padding:var(--ite-space-2) var(--ite-space-4);border-radius:var(--ite-radius-pill);border:1px solid rgba(255,255,255,0.14);color:var(--ite-gray-100)}
.rv-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--ite-space-5);margin:var(--ite-space-8) 0 var(--ite-space-10)}
.rv-zone{padding:var(--ite-space-6);background:var(--ite-tx-grid),var(--ite-white);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);box-shadow:var(--ite-ring-hairline)}
.rv-zone__name{font:600 0.75rem/1 var(--ite-font-display);letter-spacing:0.1em;text-transform:uppercase;color:var(--ite-text-orange);margin:0 0 var(--ite-space-4);padding-bottom:var(--ite-space-3);border-bottom:1px solid var(--ite-color-border)}
.rv-zone__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ite-space-2);font-size:0.9375rem;color:var(--ite-color-text)}
.rv-zone--export{box-shadow:inset 0 0 0 1px var(--ite-orange-300),var(--ite-shadow-sm)}
.rv-stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ite-space-2);font-size:1rem;color:var(--ite-color-text-muted)}
.rv-stat__fig{font:700 1.5rem/1 var(--ite-font-mono);color:var(--ite-text-orange-lg)}
.rv-stat__sep{color:var(--ite-color-border);margin:0 var(--ite-space-2)}
/* Industries served — searchable, toggleable, equal-box grid (.rv-ind / .rv-grid / .rv-cell) */
.rv-ind{margin:var(--ite-space-8) 0 var(--ite-space-5)}
.rv-ind__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ite-space-4);margin-bottom:var(--ite-space-6)}
.rv-ind__search{display:flex;align-items:center;gap:var(--ite-space-2);flex:1 1 220px;min-width:200px;max-width:360px;padding:9px var(--ite-space-4);background:var(--ite-white);border:1px solid var(--ite-color-border-strong);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);color:var(--ite-color-text-subtle)}
.rv-ind__search:focus-within{border-color:var(--ite-orange-500);box-shadow:0 0 0 3px rgba(242,101,34,0.16)}
.rv-ind__search svg{flex:none}
.rv-ind__search input{flex:1;min-width:0;font:inherit;font-size:var(--ite-text-sm);border:0;background:transparent;color:var(--ite-color-text);padding:0}
.rv-ind__search input:focus{outline:none}
.rv-ind__toggle{display:inline-flex;padding:3px;background:var(--ite-color-bg-subtle);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner)}
.rv-ind__tab{font:600 0.8125rem/1 var(--ite-font-sans);padding:8px 15px;border:0;background:transparent;color:var(--ite-color-text-muted);border-radius:calc(var(--ite-radius-md) - 3px);corner-shape:var(--ite-corner);cursor:pointer;transition:color .15s ease,background .15s ease}
.rv-ind__tab:hover{color:var(--ite-color-text)}
.rv-ind__tab.is-active{background:var(--ite-white);color:var(--ite-color-text);box-shadow:var(--ite-shadow-sm)}
.rv-ind__tab:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.rv-ind__count{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-color-text-subtle);margin-left:auto}
.rv-group{margin:0 0 var(--ite-space-6)}
.rv-group:last-child{margin-bottom:0}
.rv-group.is-hidden{display:none}
.rv-group__head{display:flex;align-items:center;gap:var(--ite-space-3);margin:0 0 var(--ite-space-3)}
.rv-group__name{font:600 0.75rem/1 var(--ite-font-mono);letter-spacing:0.07em;text-transform:uppercase;color:var(--ite-text-orange)}
.rv-group__rule{flex:1;height:1px;background:var(--ite-color-border)}
.rv-group__count{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-color-text-subtle)}
.rv-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--ite-space-3)}
.rv-cell{height:46px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;font-size:0.84rem;line-height:1.15;color:var(--ite-color-text);background:var(--ite-gray-50);box-shadow:var(--ite-ring-hairline);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);overflow:hidden;transition:background .15s ease,box-shadow .15s ease,transform .15s ease}
.rv-cell:hover{background:var(--ite-white);box-shadow:var(--ite-ring-hairline),var(--ite-shadow-sm);transform:translateY(-1px)}
.rv-cell.is-hidden{display:none}
.rv-ind__empty{margin:var(--ite-space-2) 0 0;font-size:var(--ite-text-sm);color:var(--ite-color-text-muted)}
@media(prefers-reduced-motion:reduce){.rv-cell,.rv-ind__tab{transition:none}}
.rv-tags__more{font-size:0.9375rem;color:var(--ite-color-text-muted);margin-top:var(--ite-space-6)}
.rv-tags__more strong{color:var(--ite-color-text)}

/* ---- W6 · Imagery treatment recipe (.imtr-*) ---- */
.imtr-recipe{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ite-space-6);margin-top:var(--ite-space-8)}
@media(max-width:768px){.imtr-recipe{grid-template-columns:1fr;gap:var(--ite-space-8)}}
.imtr-step{margin:0;display:flex;flex-direction:column;gap:var(--ite-space-4)}
.imtr-shot{position:relative;aspect-ratio:4/3;border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);
  background:var(--ite-gray-200);box-shadow:var(--ite-ring-hairline);overflow:hidden}
/* placeholder tones showing the grade progression: muddy → neutral → tinted */
.imtr-shot--raw{background:#8c8782}
.imtr-shot--graded{background:#9ba1a7}
.imtr-shot--tint{background:#73503a}
.imtr-shot__label{position:absolute;left:var(--ite-space-3);bottom:var(--ite-space-3);padding:2px var(--ite-space-2);
  font-family:var(--ite-font-mono);font-size:0.6875rem;letter-spacing:0.06em;line-height:1.4;color:var(--ite-white);background:#15171a;
  border-radius:var(--ite-radius-xs);corner-shape:var(--ite-corner)}
.imtr-step figcaption{display:flex;flex-direction:column;gap:var(--ite-space-1)}
.imtr-step__k{font-family:var(--ite-font-mono);font-size:0.6875rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ite-color-text-muted)}
.imtr-step figcaption b{font-family:var(--ite-font-display);font-size:var(--ite-text-lg);letter-spacing:-0.01em;color:var(--ite-color-text)}
.imtr-step figcaption span:last-child{font-size:var(--ite-text-sm);line-height:1.55;color:var(--ite-color-text-muted)}
.imtr-step figcaption code{font-family:var(--ite-font-mono);font-size:0.85em}
.imtr-step--optional .imtr-step__k{color:var(--ite-text-orange)}
.imtr-step--optional .imtr-shot{box-shadow:var(--ite-ring-hairline),inset 0 0 0 2px var(--ite-orange)}
.imtr-note{margin-top:var(--ite-space-8);padding-top:var(--ite-space-6);border-top:1px solid var(--ite-color-border);
  font-size:var(--ite-text-sm);line-height:1.6;color:var(--ite-color-text-muted)}
.imtr-note strong{color:var(--ite-color-text)}
/* Treatment — designer grade table + developer CSS (dual audience) */
.imtr-build{display:grid;grid-template-columns:1fr 1fr;gap:var(--ite-space-8);margin-top:var(--ite-space-8)}
@media(max-width:760px){.imtr-build{grid-template-columns:1fr;gap:var(--ite-space-7)}}
.imtr-build__h{font-family:var(--ite-font-display);font-size:var(--ite-text-lg);margin:0 0 var(--ite-space-2)}
.imtr-build__sub{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.6;margin:0 0 var(--ite-space-4)}
.imtr-build__note{margin:var(--ite-space-3) 0 0;font-size:var(--ite-text-xs);color:var(--ite-color-text-subtle);line-height:1.5}
.imtr-grade{width:100%;border-collapse:collapse;font-size:var(--ite-text-sm)}
.imtr-grade th{text-align:left;font-weight:600;color:var(--ite-color-text);padding:8px var(--ite-space-4) 8px 0;vertical-align:top;border-bottom:1px solid var(--ite-color-border);width:42%}
.imtr-grade td{color:var(--ite-color-text-muted);padding:8px 0;border-bottom:1px solid var(--ite-color-border);font-family:var(--ite-font-mono);font-size:0.82rem;vertical-align:top}
.imtr-grade tr:last-child th,.imtr-grade tr:last-child td{border-bottom:0}
.imtr-grade__n{display:block;font-family:var(--ite-font-sans);font-size:var(--ite-text-xs);color:var(--ite-color-text-subtle);margin-top:2px}
@media(max-width:480px){.imtr-grade th{width:auto;white-space:normal}}
/* Texture — assets/code dual-audience split */
.txa-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--ite-space-8);margin-top:var(--ite-space-6)}
@media(max-width:760px){.txa-split{grid-template-columns:1fr;gap:var(--ite-space-7)}}
.txa-h{font-family:var(--ite-font-display);font-size:var(--ite-text-lg);margin:0 0 var(--ite-space-2)}
.txa-sub{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.6;margin:0 0 var(--ite-space-4)}
.txa-dl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ite-space-2)}
.txa-dl__btn{display:flex;align-items:center;justify-content:space-between;gap:var(--ite-space-3);padding:12px var(--ite-space-4);background:var(--ite-color-surface);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);text-decoration:none;color:var(--ite-color-text);box-shadow:var(--ite-shadow-sm);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.txa-dl__btn:hover{border-color:var(--ite-orange-400);transform:translateY(-1px);box-shadow:var(--ite-shadow-md)}
.txa-dl__name{font-size:var(--ite-text-sm);font-weight:500}
.txa-dl__ext{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-text-orange);letter-spacing:.04em;white-space:nowrap}
.section a.txa-dl__btn,.section a.txa-dl__btn:hover{text-decoration:none}
@media(prefers-reduced-motion:reduce){.txa-dl__btn{transition:none}}

/* ---- W5 · Email preview chrome (.em-*) ---- */
.em-preview{padding:var(--ite-space-6);background:var(--ite-color-bg-subtle);border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-md);overflow-x:auto;box-shadow:var(--ite-shadow-sm)}
.em-preview > table{margin:0 auto}
.em-copyblock{position:relative;border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);
  background:var(--ite-color-bg-muted,var(--ite-color-bg-subtle));overflow:hidden;margin-top:var(--ite-space-4)}
.em-copyblock pre{margin:0;padding:var(--ite-space-5);max-height:22rem;overflow:auto;font-family:var(--ite-font-mono);font-size:0.8125rem;line-height:1.55;background:var(--ite-gray-900);color:var(--ite-gray-50)}
.em-copy{position:absolute;top:var(--ite-space-3);right:var(--ite-space-3);padding:0.5rem 0.85rem;min-height:40px;
  font:600 0.8125rem/1 var(--ite-font-sans);color:var(--ite-cta-text,var(--ite-white));background:var(--ite-cta-bg,var(--ite-orange-700));
  border:0;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner);cursor:pointer;
  transition:background-color var(--ite-dur-fast,150ms) var(--ite-ease-standard,ease)}
.em-copy:hover{background:var(--ite-cta-bg-hover,var(--ite-orange-800,#7a3411))}
.em-copy:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px}
.em-copy.is-copied{background:var(--ite-color-success-text,#1c7c4a)}
@media(prefers-reduced-motion:reduce){.em-copy{transition:none}}
/* Email template generator — editable fields drive the live preview + copy */
.em-gen{margin-top:var(--ite-space-2)}
.em-gen__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--ite-space-4);margin-bottom:var(--ite-space-6);padding:var(--ite-space-5);background:var(--ite-color-bg-subtle);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner)}
.em-gen__field{display:flex;flex-direction:column;gap:6px}
.em-gen__field--full{grid-column:1 / -1}
.em-gen__field > span{font:600 0.72rem/1 var(--ite-font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ite-color-text-subtle)}
.em-gen__field input,.em-gen__field textarea{font:inherit;font-size:var(--ite-text-sm);padding:9px 12px;background:var(--ite-white);border:1px solid var(--ite-color-border-strong);border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner);color:var(--ite-color-text);resize:vertical}
.em-gen__field input:focus-visible,.em-gen__field textarea:focus-visible{outline:var(--ite-focus-ring);outline-offset:1px;border-color:var(--ite-orange-500)}
.em-gen__lbl{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);margin:0 0 var(--ite-space-3)}
@media(max-width:600px){.em-gen__fields{grid-template-columns:1fr}}

/* ---- W4 · Presentation system (.pz-*) ---- */
.pz-stage{max-width:880px;margin:0 0 var(--ite-space-4)}
.pz-slide.pz-title,.pz-slide.pz-about,.pz-slide.pz-spec,.pz-slide.pz-range,.pz-slide.pz-cred{padding:6% 7% 0}
.pz-slide .slide__footer{margin-top:auto}
.pz-rules{margin-top:var(--ite-space-4)}
.pz-cadence{display:flex;flex-wrap:wrap;gap:4px;margin:var(--ite-space-6) 0}
.pz-cad{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);padding:6px 10px;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner);border:1px solid var(--ite-color-border)}
.pz-cad--light{background:var(--ite-white);color:var(--ite-color-text-muted)}
.pz-cad--dark{background:var(--gun-sheen),var(--gun-base);color:var(--ite-gray-50);border-color:transparent;box-shadow:var(--gun-edge)}
.pz-title__slogan{font-family:var(--ite-font-display);font-weight:600;font-size:clamp(.7rem,1.5vw,1rem);letter-spacing:-0.02em;color:var(--ite-text-orange);margin:2% 0 1%}
.pz-title__sub{font-size:clamp(.6rem,1.2vw,.85rem);color:var(--ite-color-text-muted);margin:0 0 4%}
.pz-title__strip{display:flex;flex-wrap:wrap;gap:4% 6%;font-size:clamp(.5rem,1vw,.72rem);color:var(--ite-color-text-subtle);border-top:1px solid var(--ite-color-border);padding-top:3%}
.pz-divider__content{display:flex;flex-direction:column;justify-content:center}
.pz-divider__heading{font-family:var(--ite-font-display);font-weight:700;font-size:clamp(1.1rem,2.6vw,2rem);letter-spacing:-0.03em;line-height:1.1;margin:3% 0 6%}
.pz-divider__motif{font-family:var(--ite-font-display);font-weight:600;font-size:clamp(.85rem,1.9vw,1.35rem);letter-spacing:-0.01em;color:var(--ite-gray-200);margin:0}
.pz-divider__motif em{font-style:normal;color:var(--ite-orange-300)}
.pz-about__kicker{display:block;margin-bottom:4%}
.pz-about__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;flex:1}
.pz-col__label{font-size:clamp(.55rem,1.1vw,.75rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ite-color-text)}
.pz-col__rule{height:2px;border:0;margin:6% 0;width:28px;background:var(--ite-orange-500)}
.pz-col p{font-size:clamp(.62rem,1.3vw,.9rem);line-height:1.4;color:var(--ite-color-text-muted);margin:0}
.pz-spec{flex-direction:row;gap:5%;align-items:flex-start;flex-wrap:wrap}
.pz-spec__main{flex:1 1 58%;min-width:0}
.pz-spec__name{font-family:var(--ite-font-display);font-weight:700;font-size:clamp(.95rem,2.1vw,1.5rem);letter-spacing:-0.02em;margin:1% 0}
.pz-spec__rating{font-family:var(--ite-font-mono);font-size:clamp(.7rem,1.5vw,1rem);color:var(--ite-text-orange);margin:0 0 3%}
.pz-spec__table{font-size:clamp(.58rem,1.2vw,.82rem);margin:0}
.pz-spec__fig{flex:1 1 30%;margin:0;min-width:120px}
.pz-spec__ph{aspect-ratio:1;display:grid;place-items:center}
.pz-spec__ph svg{width:70%;height:70%;fill:none;stroke:var(--ite-gray-500);stroke-width:2}
.pz-spec__fig figcaption{font-family:var(--ite-font-mono);font-size:clamp(.5rem,1vw,.68rem);color:var(--ite-color-text-subtle);margin-top:6px;text-align:center}
.pz-spec .slide__footer{flex-basis:100%}
.pz-range__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3%;flex:1;margin:4% 0}
.pz-rcell{border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);padding:4% 5%;display:flex;flex-direction:column;gap:4px;background:var(--ite-color-surface)}
.pz-rcell__name{font-family:var(--ite-font-display);font-weight:600;font-size:clamp(.66rem,1.4vw,.95rem);letter-spacing:-0.01em}
.pz-rcell__scope{font-size:clamp(.52rem,1.05vw,.72rem);color:var(--ite-color-text-muted);line-height:1.35}
.pz-rcell--accent{border-color:var(--ite-orange-500);box-shadow:inset 0 0 0 1px var(--ite-orange-500)}
.pz-rcell--accent .pz-rcell__name{color:var(--ite-text-orange)}
.pz-cred__row{display:flex;justify-content:space-between;gap:4%;flex-wrap:wrap;align-items:flex-end;margin:5% 0}
.pz-cred__mark{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.pz-cred__mark .ph-mini{font-family:var(--ite-font-mono);font-weight:700;font-size:clamp(.7rem,1.6vw,1.05rem);letter-spacing:.04em;color:var(--ite-color-text);display:grid;place-items:center;min-width:56px;aspect-ratio:16/9}
.pz-cred__cap{font-size:clamp(.5rem,1vw,.68rem);color:var(--ite-color-text-muted)}
.pz-cred__proof{font-family:var(--ite-font-display);font-weight:600;font-size:clamp(.78rem,1.7vw,1.15rem);letter-spacing:-0.01em;line-height:1.3;margin:0}
.pz-cred__lit{color:var(--ite-text-orange)}
.pz-contents__content{display:flex;flex-direction:column;justify-content:center}
.pz-toc{list-style:none;margin:4% 0 0;padding:0}
.pz-toc li{display:grid;grid-template-columns:34% 1fr auto;align-items:baseline;gap:3%;padding:1.6% 0;border-bottom:1px solid rgba(255,255,255,.12)}
.pz-toc__motif{font-family:var(--ite-font-display);font-weight:600;font-size:clamp(.8rem,1.8vw,1.25rem);letter-spacing:-0.01em;color:var(--ite-gray-200)}
.pz-toc__motif--lit{color:var(--ite-orange-300)}
.pz-toc__item{font-size:clamp(.6rem,1.3vw,.9rem);color:var(--ite-gray-300)}
.pz-toc__no{font-family:var(--ite-font-mono);font-size:clamp(.55rem,1.1vw,.78rem);color:var(--ite-gray-400)}
.pz-contact__content{display:flex;flex-direction:column;justify-content:center}
.pz-contact__co{font-family:var(--ite-font-display);font-weight:700;font-size:clamp(.95rem,2.2vw,1.55rem);letter-spacing:-0.03em;line-height:1.12;margin:0 0 1%}
.pz-contact__line{font-family:var(--ite-font-display);font-weight:600;font-size:clamp(.62rem,1.4vw,.95rem);color:var(--ite-gray-200);margin:0 0 5%}
.pz-contact__lit{color:var(--ite-orange-300)}
.pz-contact__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5%}
.pz-contact__label{display:block;font-size:clamp(.5rem,1vw,.68rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ite-orange-300);margin-bottom:8px}
.pz-contact__col p{font-size:clamp(.56rem,1.2vw,.82rem);line-height:1.5;color:var(--ite-gray-200);margin:0}
.pz-contact__muted{color:var(--ite-gray-400)}
@media(max-width:768px){.pz-about__grid,.pz-range__grid,.pz-contact__grid{grid-template-columns:1fr;gap:var(--ite-space-3)}
  .pz-spec{flex-direction:column}.pz-cred__row{justify-content:flex-start;gap:var(--ite-space-4)}
  .pz-toc li{grid-template-columns:1fr auto}.pz-toc__item{display:none}}

/* ---- W8 · Texture & Material chapter (.txc-* / .tx-demo) ---- */
/* Specimens are framed swatch-plates: the texture sits flush inside a bordered
   card with a mono caption footer — reads as a designed sample, not a bare band. */
.txc-specimen{margin:var(--ite-space-6) 0;border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);overflow:hidden;
  background:var(--ite-color-surface);box-shadow:var(--ite-shadow-xs)}
.tx-demo{aspect-ratio:16/7;overflow:hidden;background:var(--ite-white)}
/* Specimen tiles are shown at a raised documentation intensity (~13% line /
   16% grain) so each pattern is legible at thumbnail size; production stays ~5%. */
/* Specimen-only: a coarser, stronger grain so it reads at thumbnail size.
   The production --ite-grain token stays fine + ~5%; this override is local. */
.tx-demo[data-tx="grain"]{background:var(--ite-gray-100);
  --ite-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --ite-grain-opacity:0.5}
.tx-demo[data-tx="grid"]{--ite-tx-line:rgba(19,20,24,0.14);background:var(--ite-tx-grid),var(--ite-white)}
.tx-demo[data-tx="hatch"]{--ite-tx-line:rgba(19,20,24,0.14);background:var(--ite-tx-hatch),var(--ite-white)}
.tx-demo[data-tx="grid-dark"],.tx-demo[data-tx="gun-grid"],.tx-demo.txc-gun{--ite-tx-line-dark:rgba(255,255,255,0.14);
  background:var(--ite-tx-grid-dark),var(--gun-sheen),var(--gun-base);box-shadow:var(--gun-edge)}
.tx-demo.txc-copper{background:var(--copper-sheen),var(--copper-base);box-shadow:var(--copper-edge)}
.tx-demo.txc-alloy{background:var(--alloy-sheen),var(--alloy-grain),var(--alloy-base);box-shadow:var(--alloy-edge)}
/* plain gunmetal swatch — needs .tx-demo specificity to beat the white base */
.tx-demo.txc-gunplain{background:var(--gun-sheen),var(--gun-brush),var(--gun-base);box-shadow:var(--gun-edge)}
.txc-cap{margin:0;padding:var(--ite-space-3) var(--ite-space-4);border-top:1px solid var(--ite-color-border);
  background:var(--ite-color-surface);font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);
  line-height:1.4;color:var(--ite-color-text-muted)}
.txc-when{margin:var(--ite-space-4) 0}
.txc-code{background:var(--ite-gray-50);color:var(--ite-color-text);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);
  box-shadow:var(--ite-ring-hairline);padding:var(--ite-space-4);overflow-x:auto;
  font-family:var(--ite-font-mono);font-size:var(--ite-text-sm);line-height:1.55;margin:var(--ite-space-4) 0}
.txc-code code{font-family:inherit;white-space:pre}
.txc-pair{display:grid;gap:var(--ite-space-6);grid-template-columns:1fr;margin:var(--ite-space-6) 0}
.txc-pair .txc-specimen{margin:0}
@media(min-width:768px){.txc-pair{grid-template-columns:1fr 1fr}}
.txc-rules{display:grid;gap:var(--ite-space-3);padding-left:1.1em;margin:var(--ite-space-4) 0}
.txc-rules li{line-height:1.55}

/* W8 · in-page chapter index — quick-jump to the material families */
.txc-index{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ite-space-3);
  margin:var(--ite-space-6) 0 0;padding:0;list-style:none}
.txc-index a{display:flex;flex-direction:column;gap:3px;padding:var(--ite-space-4);
  text-decoration:none;border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);
  corner-shape:var(--ite-corner);background:var(--ite-color-surface);box-shadow:var(--ite-ring-hairline);
  transition:border-color var(--ite-dur-fast) var(--ite-ease-standard),
    transform var(--ite-dur-fast) var(--ite-ease-standard),box-shadow var(--ite-dur-base) var(--ite-ease-standard)}
.txc-index a:hover{border-color:var(--ite-orange-400);transform:translateY(-2px);box-shadow:var(--ite-shadow-sm)}
.txc-index__k{font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ite-text-orange)}
.txc-index__t{font-family:var(--ite-font-display);font-weight:600;font-size:var(--ite-text-base);color:var(--ite-color-text)}
.txc-index__d{font-size:var(--ite-text-xs);color:var(--ite-color-text-muted);line-height:1.45}
@media(max-width:760px){.txc-index{grid-template-columns:1fr}}

/* dual-format texture downloads (SVG + PNG per swatch) */
.txa-dl__row{display:flex;align-items:center;justify-content:space-between;gap:var(--ite-space-3);
  padding:12px var(--ite-space-4);background:var(--ite-color-surface);border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);box-shadow:var(--ite-shadow-sm)}
.txa-dl__fmts{display:flex;gap:6px;flex:none}
.section a.txa-fmt,.txa-fmt{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);letter-spacing:.04em;
  padding:5px 10px;border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner);
  color:var(--ite-text-orange);border:1px solid var(--ite-color-border);background:var(--ite-color-bg-subtle);
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.section a.txa-fmt:hover,.txa-fmt:hover{border-color:var(--ite-orange-400);color:var(--ite-cta-bg);
  background:var(--ite-white);text-decoration:none}

/* materials · metals — 3-up recipe cards */
.txc-metals{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ite-space-5);margin:var(--ite-space-6) 0}
@media(max-width:860px){.txc-metals{grid-template-columns:1fr}}
.txc-metal{display:flex;flex-direction:column;border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);overflow:hidden;
  background:var(--ite-color-surface);box-shadow:var(--ite-shadow-xs)}
.txc-metal .tx-demo{aspect-ratio:16/9;border-radius:0;box-shadow:none}
.txc-metal__body{padding:var(--ite-space-4) var(--ite-space-5) var(--ite-space-5);display:grid;gap:6px}
.txc-metal__name{font-family:var(--ite-font-display);font-weight:600;font-size:var(--ite-text-lg)}
.txc-metal__use{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.5}
.txc-metal__rec{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-color-text-subtle);
  line-height:1.5;border-top:1px solid var(--ite-color-border);padding-top:var(--ite-space-3);margin-top:2px}
.txc-metal__rec b{color:var(--ite-text-orange);font-weight:600}

/* surface language — elevation row + corner comparison */
.txc-elev{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--ite-space-6);margin:var(--ite-space-6) 0;
  padding:var(--ite-space-7) var(--ite-space-6);background:var(--ite-color-bg-subtle);
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner)}
@media(max-width:760px){.txc-elev{grid-template-columns:repeat(2,1fr)}}
.txc-elev__cell{display:grid;gap:var(--ite-space-3);place-items:center;text-align:center}
.txc-elev__chip{width:100%;aspect-ratio:3/2;background:var(--ite-color-surface);
  border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner)}
.txc-elev__chip--xs{box-shadow:var(--ite-shadow-xs)}
.txc-elev__chip--sm{box-shadow:var(--ite-shadow-sm)}
.txc-elev__chip--md{box-shadow:var(--ite-shadow-md)}
.txc-elev__chip--lg{box-shadow:var(--ite-shadow-lg)}
.txc-elev__chip--xl{box-shadow:var(--ite-shadow-xl)}
.txc-elev__k{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-color-text-subtle)}
.txc-corners{display:grid;grid-template-columns:1fr 1fr;gap:var(--ite-space-5);margin:var(--ite-space-6) 0}
.txc-corner{display:grid;gap:var(--ite-space-3);place-items:center;text-align:center;
  padding:var(--ite-space-6);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  corner-shape:var(--ite-corner);background:var(--ite-color-bg-subtle)}
.txc-corner__box{width:96px;height:96px;background:linear-gradient(135deg,var(--ite-orange-400),var(--ite-orange-600));
  border-radius:18px}
.txc-corner--round .txc-corner__box{corner-shape:round}
.txc-corner--squircle .txc-corner__box{corner-shape:superellipse(2.5)}
.txc-corner__k{font-family:var(--ite-font-mono);font-size:var(--ite-text-xs);color:var(--ite-color-text-subtle)}

/* ---- W7 · Motion "in use" demos (.mo-*) — layout + compositor animations ---- */
.mo-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--ite-space-6);margin-top:var(--ite-space-6)}
.mo-demo{display:flex;flex-direction:column;border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);
  corner-shape:var(--ite-corner);overflow:clip;background:var(--ite-color-surface)}
.mo-demo__stage{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--ite-space-3);min-height:168px;padding:var(--ite-space-6);background:var(--ite-color-bg-subtle);border-bottom:1px solid var(--ite-color-border)}
.mo-demo__body{padding:var(--ite-space-5) var(--ite-space-6);display:flex;flex-direction:column;gap:var(--ite-space-2)}
.mo-demo__body h3{margin:0;font-family:var(--ite-font-display);font-size:var(--ite-text-lg);letter-spacing:-0.01em}
.mo-why{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);margin:2px 0 6px;line-height:1.5}
.mo-spec{display:grid;gap:0;margin:0}
.mo-spec > div{display:grid;grid-template-columns:minmax(74px,auto) 1fr;gap:var(--ite-space-3);align-items:baseline;
  border-top:1px solid var(--ite-color-border);padding:6px 0}
.mo-spec dt{font-size:var(--ite-text-3xs);text-transform:uppercase;letter-spacing:0.06em;color:var(--ite-color-text-subtle);margin:0;font-family:var(--ite-font-mono)}
.mo-spec dd{font-size:var(--ite-text-sm);margin:0;color:var(--ite-color-text)}
.mo-replay{position:absolute;top:var(--ite-space-3);right:var(--ite-space-3);z-index:3;padding:4px 11px;font-size:var(--ite-text-xs);min-height:0}
.mo-hint{margin-top:var(--ite-space-6);font-size:var(--ite-text-sm);color:var(--ite-color-text-muted)}

/* 01 section-reveal */
.mo-reveal-row{display:flex;gap:var(--ite-space-3)}
.mo-reveal-item{width:46px;height:46px;border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);
  background:var(--ite-orange-200);border:1px solid var(--ite-orange-300);
  opacity:0;transform:translateY(18px);transition:opacity var(--ite-dur-slower,.6s) var(--ite-ease-entrance,cubic-bezier(.16,1,.3,1)),transform var(--ite-dur-slower,.6s) var(--ite-ease-entrance,cubic-bezier(.16,1,.3,1))}
.mo-reveal-item.is-in{opacity:1;transform:none}
.mo-reveal-item:nth-child(2){transition-delay:70ms}
.mo-reveal-item:nth-child(3){transition-delay:140ms}

/* 03 card-lift (pure CSS) */
.mo-lift-card{cursor:pointer;box-shadow:var(--ite-shadow-md);
  transition:transform var(--ite-dur-fast,.14s) var(--ite-ease-standard,ease),box-shadow var(--ite-dur-fast,.14s) var(--ite-ease-standard,ease)}
.mo-lift-card:hover,.mo-lift-card:focus-visible{transform:translateY(-4px);box-shadow:var(--ite-shadow-lg);outline:none}

/* 04 accordion */
.mo-accordion{width:100%;max-width:320px;border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);background:var(--ite-color-surface);overflow:hidden}
.mo-acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  font:inherit;font-weight:600;font-size:var(--ite-text-sm);background:none;border:0;cursor:pointer;color:var(--ite-color-text)}
.mo-acc-trigger:focus-visible{outline:var(--ite-focus-ring);outline-offset:-2px}
.mo-acc-chevron{transition:transform var(--ite-dur-fast,.14s) var(--ite-ease-standard,ease);color:var(--ite-text-orange)}
.mo-acc-trigger[aria-expanded="true"] .mo-acc-chevron{transform:rotate(180deg)}
.mo-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ite-dur-slow,.36s) var(--ite-ease-entrance,cubic-bezier(.16,1,.3,1))}
.mo-acc-panel.is-open{grid-template-rows:1fr}
.mo-acc-inner{overflow:hidden;font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);
  padding:0 14px;border-top:1px solid transparent}
.mo-acc-panel.is-open .mo-acc-inner{padding:10px 14px 14px;border-top-color:var(--ite-color-border)}

/* 05 modal (scoped to the stage) */
.mo-modal{position:absolute;inset:0;z-index:6;display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:opacity var(--ite-dur-fast,.14s) var(--ite-ease-standard,ease)}
.mo-modal[hidden]{display:none}
.mo-modal.is-open{opacity:1;pointer-events:auto}
.mo-modal__backdrop{position:absolute;inset:0;background:rgba(15,16,19,0.55)}
.mo-modal__panel{position:relative;z-index:1;max-width:80%;background:var(--ite-color-surface);
  border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);padding:var(--ite-space-5);box-shadow:var(--ite-shadow-xl);
  transform:scale(0.96);transition:transform var(--ite-dur-slow,.36s) var(--ite-ease-entrance,cubic-bezier(.16,1,.3,1))}
.mo-modal.is-open .mo-modal__panel{transform:scale(1)}

/* 06 toast (scoped to the stage) */
.mo-toast{position:absolute;right:var(--ite-space-4);bottom:var(--ite-space-4);z-index:4;
  padding:9px 14px;border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);
  background:var(--gun-sheen),var(--gun-base);box-shadow:var(--gun-edge),var(--ite-shadow-lg);color:var(--ite-gray-50);
  font-size:var(--ite-text-sm);font-weight:600;transform:translateX(130%);opacity:0;
  transition:transform var(--ite-dur-slow,.36s) var(--ite-ease-entrance,cubic-bezier(.16,1,.3,1)),opacity var(--ite-dur-slow,.36s) ease}
.mo-toast.is-visible{transform:translateX(0);opacity:1}

/* 07 tabs / segment */
.mo-segment{position:relative;display:inline-flex;gap:0;padding:4px;background:var(--ite-color-bg-subtle);
  border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);border:1px solid var(--ite-color-border)}
.mo-segment__pill{position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;z-index:0;
  background:var(--ite-color-surface);border-radius:var(--ite-radius-sm);corner-shape:var(--ite-corner);box-shadow:var(--ite-shadow-xs);
  transform:translateX(0);transition:transform var(--ite-dur-base,.22s) var(--ite-ease-standard,ease),width var(--ite-dur-base,.22s) var(--ite-ease-standard,ease)}
.mo-seg{position:relative;z-index:1;font:inherit;font-size:var(--ite-text-sm);font-weight:500;padding:6px 16px;
  background:none;border:0;cursor:pointer;color:var(--ite-color-text-muted)}
.mo-seg[aria-selected="true"]{color:var(--ite-color-text)}
.mo-seg:focus-visible{outline:var(--ite-focus-ring);outline-offset:2px;border-radius:var(--ite-radius-sm)}

/* 08 sticky header (internal scroll) */
.mo-stickywrap{position:relative;width:100%;max-width:320px;height:148px;overflow:auto;border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner);background:var(--ite-color-surface)}
.mo-fakeheader{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;
  background:var(--ite-color-surface);border-bottom:1px solid var(--ite-color-border);
  transition:height var(--ite-dur-base,.22s) var(--ite-ease-standard,ease),background var(--ite-dur-base,.22s) ease}
.mo-fakeheader.is-condensed{height:34px;background:var(--gun-sheen),var(--gun-base)}
.mo-fakeheader__mark{width:26px;height:26px;border-radius:6px;corner-shape:var(--ite-corner);background:var(--copper-sheen),var(--copper-base);box-shadow:var(--copper-edge);
  transition:transform var(--ite-dur-base,.22s) var(--ite-ease-standard,ease)}
.mo-fakeheader.is-condensed .mo-fakeheader__mark{transform:scale(0.82)}
.mo-fakeheader__nav{flex:1;height:8px;border-radius:4px;background:var(--ite-gray-200);
  transition:opacity var(--ite-dur-base,.22s) ease}
.mo-fakeheader.is-condensed .mo-fakeheader__nav{opacity:0}
.mo-scrollproxy{display:flex;flex-direction:column;gap:10px;padding:14px 12px}
.mo-scrollproxy span{height:32px;border-radius:6px;corner-shape:var(--ite-corner);background:var(--ite-gray-100)}
.mo-scrollproxy--tall span{height:40px}

/* 09 scroll progress */
.mo-progress{position:sticky;top:0;z-index:2;width:100%;max-width:320px;height:5px;background:var(--ite-gray-200);
  border-radius:999px;overflow:hidden}
.mo-progress__bar{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);
  background:var(--ite-orange-500)}
.mo-demo[data-demo="scroll-progress"] .mo-demo__stage,
.mo-demo[data-demo="sticky-header"] .mo-demo__stage{align-items:stretch}
.mo-demo[data-demo="scroll-progress"] .mo-scrollproxy{max-width:320px;width:100%;height:120px;overflow:auto;margin:0 auto;
  border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-md);corner-shape:var(--ite-corner)}

/* 10 count-up */
.mo-count{font-family:var(--ite-font-display);font-weight:700;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;
  letter-spacing:-0.02em;color:var(--ite-color-text);font-variant-numeric:tabular-nums}
.mo-count__label{font-size:var(--ite-text-sm);color:var(--ite-color-text-muted)}

@media(prefers-reduced-motion:reduce){
  .mo-reveal-item{opacity:1;transform:none;transition:none}
  .mo-acc-panel,.mo-modal,.mo-modal__panel,.mo-toast,.mo-segment__pill,.mo-fakeheader,.mo-fakeheader__mark,.mo-acc-chevron{transition:none}
}

/* ---- ch4 IDENTITY · square clear-space + mark-protection system (R4) ---- */
.id-cs{display:grid;grid-template-columns:1fr 1fr;gap:var(--ite-space-6);margin:var(--ite-space-6) 0 var(--ite-space-4)}
@media(max-width:680px){.id-cs{grid-template-columns:1fr}}
.id-cs__case{margin:0}
.id-cs__stage{display:flex;justify-content:center;align-items:center;padding:clamp(28px,5vw,48px);min-height:160px;
  background:var(--ite-white);border:1px solid var(--ite-color-border);border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner)}
.id-cs__zone{position:relative;display:inline-flex;padding:var(--x,32px)}
.id-cs__zone::before{content:"";position:absolute;inset:0;border:1.4px dashed var(--ite-orange-400);pointer-events:none}
.id-cs__logo{display:block}
.id-cs__logo--icon{width:72px;height:72px}
.id-cs__logo--lockup{width:clamp(120px,18vw,160px);height:auto}
.id-cs__x{position:absolute;z-index:1;display:grid;place-items:center;width:18px;height:18px;
  font-family:var(--ite-font-mono);font-size:var(--ite-text-micro);font-weight:700;color:var(--copper-ink);
  background:var(--copper-sheen),var(--copper-base);box-shadow:var(--copper-edge);
  border-radius:4px;corner-shape:var(--ite-corner)}
.id-cs__x.t{top:calc(var(--x,32px) - 9px);left:50%;transform:translateX(-50%)}
.id-cs__x.b{bottom:calc(var(--x,32px) - 9px);left:50%;transform:translateX(-50%)}
.id-cs__x.l{left:calc(var(--x,32px) - 9px);top:50%;transform:translateY(-50%)}
.id-cs__x.r{right:calc(var(--x,32px) - 9px);top:50%;transform:translateY(-50%)}
.id-cs__case figcaption{margin-top:10px;font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.5}
.id-cs__case figcaption b{color:var(--ite-color-text)}
.id-cs__module{display:flex;align-items:center;gap:10px;font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);margin:0 0 var(--ite-space-2)}
.id-cs__dot{flex:none;width:18px;height:18px;background:var(--ite-orange-500)}
.id-cs__module b{color:var(--ite-text-orange);font-family:var(--ite-font-mono)}
.id-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ite-space-5);margin:var(--ite-space-6) 0}
@media(max-width:680px){.id-rules{grid-template-columns:1fr}}
.id-rule{padding:var(--ite-space-5);background:var(--ite-color-surface);border:1px solid var(--ite-color-border);
  border-radius:var(--ite-radius-lg);corner-shape:var(--ite-corner);box-shadow:var(--ite-shadow-xs)}
.id-rule__k{font-family:var(--ite-font-mono);font-size:var(--ite-text-3xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ite-text-orange)}
.id-rule h3{margin:6px 0 4px;font-family:var(--ite-font-display);font-size:var(--ite-text-base);letter-spacing:-0.01em}
.id-rule p{margin:0;font-size:var(--ite-text-sm);color:var(--ite-color-text-muted);line-height:1.5}