/* ==========================================================================
   INDUSTRIES SUB-PAGES — SECTION 2: INDUSTRY EXPERTISE BRIEF
   10 designs — built on the HOME PAGE base, blue-cyan family
   ==========================================================================
   Preview-only. Winning blocks move into styles.css; this file and its
   preview page are then deleted. Every class is namespaced .i2- / .i2vN- so
   five section stylesheets can load on one page without colliding.

   THE BASE — index.html, not solutions.html (same contract the approved
   sol-0* sets were built on, blue-cyan-substituted):

     RADIUS      var(--radius) = 4px. Media only gets 8px. Bento tiles none.
     BORDERS     neutral #c4c4c4 on cards, var(--c-line) on rules.
                 NEVER --fam-line.
     SHADOWS     neutral. 0 14px 30px rgba(20,20,40,.08) on cards,
                 0 30px 60px rgba(0,0,0,.35) on media. NEVER --fam-shadow.
     HOVER       .22s and modest — border-color, translateY(-2px), the arrow
                 nudging translateX(4px). No wipes, blooms or dimming.
     MOTIF       the 60x60 outlined arrow box, 48x48 in row lists.
     GRADIENT    held back — numerals and thin accent rules only.
     ROW LISTS   one var(--c-line) bottom rule; hover recolours ONLY it.
     DARK        hairlines rgba(255,255,255,.22); numerals on dark are SOLID
                 var(--fam-300), never the gradient (the sol-05 deviation,
                 same reason: the gradient dies against --fam-800).

   The one substitution: --c-accent → var(--fam-700) = #00819F blue-cyan
   (the 2026-08-05 swap with Technologies; was #0B4B54 teal), via
   ind-family.css. Geometry, weights, shadows, timings unchanged.

   CONTENT — the Manufacturing doc's worst case, in every design:
   8 operating models + 9 target segments, one segment carrying the doc's
   own "subject to capability validation" hedge. The hedge is a shared
   device (.i2-hedge — a dashed, muted chip) so it reads as conditional
   everywhere, and it must never be dropped when a variant is lifted.

   RESPONSIVE — mobile-first at 390px stepping up with min-width.
   Steps: 390 base · 561 · 761 · 941 (+1100 for 4-up cells)
   ========================================================================== */


/* ==========================================================================
   PREVIEW CHROME — not part of any design
   ========================================================================== */
.i2-flag { position: sticky; top: 0; z-index: 60; background: #14141c; color: #fff; font-size: 13px; }
.i2-flag .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 10px; }
.i2-flag b { font-weight: 700; }
.i2-flag span { color: rgba(255,255,255,.62); }

.i2-label { border-top: 2px solid var(--c-ink); background: #fff; padding-block: 30px 6px; }
.i2-label .container { display: flex; flex-direction: column; gap: 7px; }
.i2-label h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.i2-label h2 b { color: var(--fam-700); font-weight: 800; }
.i2-label p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--c-muted); max-width: 78ch; }
.i2-label code, .i2-label i { font-size: 13px; color: var(--fam-700); font-style: normal; }

.i2-note { background: var(--fam-tint); }
.i2-note .container { padding-block: 36px; }
.i2-note h3 { font-size: 17px; margin: 0 0 9px; color: var(--c-ink); }
.i2-note p { font-size: 15px; line-height: 1.7; color: var(--c-body); margin: 0; max-width: 76ch; }
.i2-note p + p { margin-top: 12px; }
.i2-note code { color: var(--fam-700); font-size: 13.5px; }


/* ==========================================================================
   SHARED — the home page's type and motif, blue-cyan-substituted
   ========================================================================== */

/* .services-title: 700, line-height 1.0, -.025em — stepped down from the
   home 64px cap because §2 sits under an H1 hero (the approved §2 step). */
.i2-h2 {
  font-size: clamp(30px, 4.8vw, 52px); font-weight: 700; line-height: 1.0;
  letter-spacing: -.025em; color: var(--c-ink); margin: 0; text-wrap: balance;
}
.i2-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fam-700); margin: 0 0 14px;
}
/* .svc-card p: 16px / 300 / 1.6 / #323232 */
.i2-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; }
.i2-lede b { font-weight: 600; color: var(--c-ink); }
.i2-head { margin-bottom: 30px; }
.i2-head .i2-lede { margin-top: 18px; max-width: 68ch; }

/* THE MOTIF — .card-arrow: 60x60 outlined box, 48x48 in row lists */
.i2-arrow {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border: 1px solid #c4c4c4;
  border-radius: var(--radius); color: var(--fam-700);
  transition: border-color .22s var(--ease);
}
.i2-arrow svg { width: 26px; height: 24px; transition: transform .22s var(--ease); }
.i2-arrow--sm { width: 48px; height: 48px; align-self: center; }
.i2-arrow--sm svg { width: 22px; height: 20px; }

/* Bullet list — the sitewide 10x2 gradient rule marker (a thin accent rule,
   which is one of the gradient's two permitted homes) */
.i2-bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.i2-bul li {
  position: relative; padding-left: 20px;
  font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232;
}
.i2-bul li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 10px; height: 2px; background: var(--fam-grad);
}

/* THE HEDGE — the doc's "subject to capability validation" flag, one shared
   device so it reads as conditional in every design: dashed border, muted,
   never bold. Content guardrail: it must stay visibly ATTACHED to its
   segment, not drift into a footnote no one connects back. */
.i2-hedge {
  display: inline-block; font-style: normal; vertical-align: baseline;
  margin-left: 6px; padding: 2px 8px;
  font-size: 12px; font-weight: 500; letter-spacing: .01em;
  color: var(--c-muted); background: var(--c-surface-2);
  border: 1px dashed #c4c4c4; border-radius: 3px;
}
.i2-fnote { margin: 12px 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--c-muted); }

/* CHIPS — non-interactive labels, so they take the neutral border, not the
   card hover. inline-block li, which is what keeps the field 390-safe (the
   .s3v2-caps inline-run overflow lesson). Filled = var(--fam-chip), the
   token that exists for exactly this. */
.i2-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.i2-chips li {
  display: inline-block; padding: 8px 13px;
  font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--c-body);
  background: #fff; border: 1px solid #c4c4c4; border-radius: var(--radius);
}
.i2-chips--filled li { background: var(--fam-chip); border-color: transparent; color: var(--fam-ink-2); }
.i2-chip-hedged { border-style: dashed !important; color: var(--c-muted) !important; }
.i2-chip-hedged i { font-style: normal; font-weight: 700; color: var(--fam-700); margin-left: 2px; }


/* ==========================================================================
   DESIGN 1 — EDITORIAL SPLIT + DEEP MODELS BAND
   The home .glance: white head split, then a deep blue band carrying the
   models beside the factory photo. Media: 8px radius, neutral
   0 30px 60px rgba(0,0,0,.35) shadow, nudged left:40/bottom:15 at ≥941 —
   the home treatment exactly.
   Worst case: the models list is the band's whole left column — eight rows
   of hairline ledger on dark, two-up from 561 so the band stays shallow.
   ========================================================================== */
.i2v1-top { display: grid; gap: 20px; }
.i2v1-rail { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; align-items: baseline; }
.i2v1-rail > span { font-size: 15px; font-weight: 300; line-height: 1.8; color: #323232; }
.i2v1-rail > span:not(:last-child)::after { content: "·"; margin: 0 10px; color: #b7b7c2; }

.i2v1-band { margin-top: 34px; padding-block: 34px; background: var(--fam-grad-deep); color: #fff; }
.i2v1-inner { display: grid; gap: 26px; }
.i2v1-band .i2-eyebrow { color: var(--fam-200); }
.i2v1-statement {
  margin: 0 0 22px; font-size: 19px; font-weight: 300; line-height: 1.5;
  letter-spacing: -.01em; color: rgba(255,255,255,.86);
}
.i2v1-statement b { color: #fff; font-weight: 700; }
.i2v1-models { list-style: none; margin: 0; padding: 0; display: grid; }
.i2v1-models li {
  padding: 12px 2px; font-size: 15.5px; font-weight: 300; line-height: 1.45;
  color: rgba(255,255,255,.82); border-bottom: 1px solid rgba(255,255,255,.22);
  transition: border-bottom-color .22s var(--ease), color .22s var(--ease);
}
.i2v1-models li:first-child { border-top: 1px solid rgba(255,255,255,.22); }
@media (hover: hover) {
  .i2v1-models li:hover { border-bottom-color: #fff; color: #fff; }
}
.i2v1-media {
  border-radius: 14px; overflow: hidden; min-height: 240px;
  background: var(--img) center/cover no-repeat, var(--fam-900);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
@media (min-width: 561px) {
  /* row-wise 2-up: the first TWO cells form the top row, so both take the
     opening rule that :first-child alone was drawing */
  .i2v1-models { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
  .i2v1-models li:nth-child(-n+2) { border-top: 1px solid rgba(255,255,255,.22); }
}
@media (min-width: 761px) {
  .i2v1-top { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 52px; align-items: start; }
  .i2v1-statement { font-size: 21px; }
  .i2v1-media { min-height: 320px; }
}
@media (min-width: 941px) {
  .i2v1-band { padding-block: 44px; }
  .i2v1-inner { grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
  .i2v1-media { min-height: 380px; position: relative; left: 40px; bottom: 15px; }
}


/* ==========================================================================
   DESIGN 2 — DUAL LEDGER
   Two .svc-cards--rows ledgers side by side: models numbered, segments
   plain. Hover changes only the rule colour — nothing slides, nothing dims.
   Worst case: 8 + 9 uneven rows; columns are independent ledgers, so the
   odd row count never opens a hole.
   ========================================================================== */
.i2v2-grid { display: grid; gap: 34px; }
.i2v2-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--fam-700);
  font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--c-ink);
}
.i2v2-cap span { font-size: 13px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.i2v2-list { list-style: none; margin: 0; padding: 0; }
.i2v2-list li {
  display: flex; align-items: baseline; gap: 0;
  padding: 13px 2px; font-size: 15.5px; font-weight: 400; line-height: 1.45;
  color: var(--c-ink); border-bottom: 1px solid var(--c-line);
  transition: border-bottom-color .22s var(--ease);
}
.i2v2-list i {
  flex: 0 0 30px; font-style: normal; font-size: 13px; font-weight: 700;
  color: #b7b7c2; font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease);
}
@media (hover: hover) {
  .i2v2-list li:hover { border-bottom-color: var(--fam-700); }
  .i2v2-list li:hover i { color: var(--fam-700); }
}
@media (min-width: 761px) {
  .i2v2-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (min-width: 941px) {
  .i2v2-grid { gap: 56px; }
}


/* ==========================================================================
   DESIGN 3 — MODEL INDEX + SEGMENT CHIPS
   The .svc-cards--rows pattern with descriptions and the 48x48 arrow box —
   the highest-capacity print. Segments close as a chip field so the two
   lists read as different kinds of thing (rows = how, chips = who).
   OWNER PICK MODIFICATION (2026-08-04): at ≥941 the head pins (sticky)
   while the index scrolls past on the right — the sol-02·3 treatment.
   Worst case: eight described rows is the tall half; the chip field absorbs
   nine segments in two lines at width.
   ========================================================================== */
.i2v3 { display: grid; gap: 28px; }
.i2v3-index { display: flex; flex-direction: column; }
.i2v3-item {
  display: grid; grid-template-columns: 38px minmax(0,1fr) 48px;
  gap: 0 12px; align-items: center;
  padding: 18px 2px; border-bottom: 1px solid var(--c-line);
  transition: border-bottom-color .22s var(--ease);
}
.i2v3-item:first-child { border-top: 1px solid var(--c-line); }
.i2v3-n {
  font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: #b7b7c2; font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease);
}
.i2v3-item h4 { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.i2v3-item p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 4px 0 0; }
@media (hover: hover) {
  .i2v3-item:hover { border-bottom-color: var(--fam-700); }
  .i2v3-item:hover .i2v3-n { color: var(--fam-700); }
  .i2v3-item:hover .i2-arrow { border-color: var(--fam-700); }
  .i2v3-item:hover .i2-arrow svg { transform: translateX(4px); }
}
.i2v3-segs { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.i2v3-segcap { font-size: 15px; font-weight: 700; color: var(--c-ink); margin: 0 0 14px; }
@media (min-width: 761px) {
  .i2v3-item { grid-template-columns: 56px minmax(0,1fr) 48px; gap: 0 20px; padding: 22px 4px; }
  .i2v3-n { font-size: 24px; }
  .i2v3-item h4 { font-size: 20px; }
}
@media (min-width: 941px) {
  .i2v3 { grid-template-columns: minmax(0,420px) minmax(0,1fr); gap: 64px; align-items: start; }
  .i2v3-head { position: sticky; top: 110px; }
}


/* ==========================================================================
   DESIGN 4 — MEDIA + MODEL CELLS
   The home .glance split on a light ground: factory photo beside the
   statement, models as bordered .svc-card cells, segments as an inline run.
   Media: 8px, neutral shadow, and the right:40/bottom:15 nudge out of its
   own (left) column at ≥941 — exactly where the home page applies it.
   Worst case: eight cells resolve 2-up from 561 and 4-up from 1100.
   ========================================================================== */
.i2v4 { display: grid; gap: 28px; }
.i2v4-split { display: grid; gap: 28px; }
.i2v4-media {
  border-radius: 14px; overflow: hidden; min-height: 240px;
  background: var(--img) center/cover no-repeat, var(--fam-900);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.i2v4-cells { display: grid; grid-template-columns: 1fr; gap: 14px; }
.i2v4-cell {
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.i2v4-cell h4 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
@media (hover: hover) {
  .i2v4-cell:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
}
.i2v4-segs { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.i2v4-segcap {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fam-700); margin-bottom: 10px;
}
.i2v4-run { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: #323232; }
@media (min-width: 561px) {
  .i2v4-cells { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 761px) {
  .i2v4-media { min-height: 320px; }
}
@media (min-width: 941px) {
  .i2v4-split { grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center; }
  .i2v4-media { min-height: 400px; position: relative; right: 40px; bottom: 15px; }
  .i2v4-cells { margin-top: 6px; }
}
@media (min-width: 1100px) {
  .i2v4-cells { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   DESIGN 5 — BRIEF + SEGMENT MATRIX
   Statement and a compact model list left; the segments as a hairline
   matrix right — 1px var(--c-line) gaps showing through white cells, no
   radius, no boxes (the s6v10 "ruled paper" logic). The battery cell
   carries the hedge INSIDE itself, on a --fam-300 keyline.
   Worst case: 9 cells — the odd cell spans the full row at 2-up (561),
   and 941 resolves to a clean 3x3.
   ========================================================================== */
.i2v5 { display: grid; gap: 34px; }
.i2v5-models h3 {
  font-size: 15px; font-weight: 700; color: var(--c-ink);
  margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--c-line);
}
.i2v5-aside .i2-lede { margin-top: 18px; }
.i2v5-cap { font-size: 15px; font-weight: 700; color: var(--c-ink); margin: 0 0 14px; }
.i2v5-matrix {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--c-line);
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.i2v5-cell { background: #fff; padding: 15px 2px 16px; }
.i2v5-cell h4 { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
.i2v5-note {
  font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--c-muted);
  margin: 7px 0 0; padding-left: 10px; border-left: 2px solid var(--fam-300);
}
@media (min-width: 561px) {
  .i2v5-matrix { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .i2v5-cell { padding: 16px 16px 18px; }
  /* 9 cells in 2 columns leaves a hole that would render as a solid
     var(--c-line) rectangle — the odd cell spans the row instead */
  .i2v5-cell:last-child { grid-column: 1 / -1; }
}
@media (min-width: 941px) {
  .i2v5 { grid-template-columns: minmax(0,440px) minmax(0,1fr); gap: 64px; align-items: start; }
  .i2v5-matrix { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .i2v5-cell:last-child { grid-column: auto; }   /* 3x3 — no hole to fill */
}


/* ==========================================================================
   DESIGN 6 — CHIP TAXONOMY ON TINT
   The compact one: both lists as chip fields on the family tint, under
   counting caps. Models fill --fam-chip, segments stay outlined — two
   weights, one system. The numerals are the gradient-clipped kind, on
   white-adjacent tint where the gradient still reads.
   Worst case: chips wrap — 17 labels cost four to five lines at 390 and
   two at 1240. Nothing else moves.
   ========================================================================== */
.i2v6-sec { background: var(--fam-tint); }
.i2v6-field { margin-top: 30px; }
.i2v6-field:first-of-type { margin-top: 0; }
.i2-head + .i2v6-field { margin-top: 0; }
.i2v6-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--c-line);
}
.i2v6-cap h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--c-ink); margin: 0; }
.i2v6-count {
  font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: var(--fam-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.i2v6-sec .i2-chips li { background: #fff; }
.i2v6-sec .i2-chips--filled li { background: var(--fam-chip); }
@media (min-width: 761px) {
  .i2v6-field { margin-top: 36px; }
}


/* ==========================================================================
   DESIGN 7 — DECOUPLING-POINT SPECTRUM
   Draws the industry: six models on the real forecast-driven → order-driven
   axis along a continuous 2px gradient rule (a thin accent rule — the
   gradient's permitted home), mixed-mode and multi-plant as spanning bars
   beneath, because that is genuinely where they sit. Vertical spine at
   phone widths, horizontal from 941.
   Worst case: the axis is fixed at six nodes by the content itself; the
   two spanning bars absorb the models that don't sit on the axis.
   ========================================================================== */
.i2v7-axis { display: none; }
.i2v7-spectrum { position: relative; margin-top: 30px; padding-left: 30px; display: grid; gap: 22px; }
.i2v7-spectrum::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; background: var(--fam-grad);
}
.i2v7-node { position: relative; }
.i2v7-node::before {
  content: ""; position: absolute; left: -30px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fam-700); box-shadow: 0 0 0 4px #fff;
}
.i2v7-node h4 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
.i2v7-node p { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--c-muted); margin: 4px 0 0; }
.i2v7-spans { display: grid; gap: 12px; margin-top: 26px; }
.i2v7-span {
  background: #fff; border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 16px 18px;
}
.i2v7-span h4 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
.i2v7-span p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: #323232; margin: 6px 0 0; }
.i2v7-segs { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.i2v7-segcap { font-size: 15px; font-weight: 700; color: var(--c-ink); margin: 0 0 6px; }
.i2v7-seglist { list-style: none; margin: 0; padding: 0; display: grid; }
.i2v7-seglist li {
  padding: 12px 2px; font-size: 15.5px; font-weight: 400; line-height: 1.45;
  color: var(--c-ink); border-bottom: 1px solid var(--c-line);
  transition: border-bottom-color .22s var(--ease);
}
.i2v7-seglist li:first-child { border-top: 1px solid var(--c-line); }
@media (hover: hover) {
  .i2v7-seglist li:hover { border-bottom-color: var(--fam-700); }
}
@media (min-width: 561px) {
  .i2v7-seglist { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
  .i2v7-seglist li:nth-child(-n+2) { border-top: 1px solid var(--c-line); }
}
@media (min-width: 761px) {
  .i2v7-spans { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (min-width: 941px) {
  .i2v7-axis {
    display: flex; justify-content: space-between; margin-top: 34px;
    font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--c-muted);
  }
  .i2v7-spectrum {
    margin-top: 10px; padding-left: 0; padding-top: 34px;
    grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px;
  }
  .i2v7-spectrum::before { left: 0; right: 0; top: 13px; bottom: auto; width: auto; height: 2px; }
  .i2v7-node::before { left: 0; top: -26px; }
  .i2v7-node h4 { font-size: 15.5px; }
  /* the spanning bars run the full axis width — that is their meaning */
  .i2v7-spans { grid-template-columns: 1fr; gap: 12px; }
  .i2v7-span { display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: 4px 30px; align-items: baseline; }
  .i2v7-span p { margin: 0; }
  .i2v7-seglist { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .i2v7-seglist li:nth-child(-n+3) { border-top: 1px solid var(--c-line); }
}


/* ==========================================================================
   DESIGN 8 — DEEP PANEL + TICKED BLOCKS
   A deep-gradient panel pins the statement and the honest counts while the
   ticked blocks scroll past. No photograph — the gradient IS the panel
   (the s3v8 lesson: the panel must read with the image removed, so here it
   simply never had one). Panel sticky at ≥941 — the set's ONE sticky.
   Numerals on the deep fill are SOLID --fam-300 (the dark-band deviation).
   Worst case: blocks are auto-height; nine ticks just run deeper.
   ========================================================================== */
.i2v8 { display: grid; gap: 30px; }
.i2v8-panel {
  background: var(--fam-grad-deep); color: #fff;
  border-radius: 14px; padding: 26px 24px 28px;
}
.i2v8-panel .i2-eyebrow { color: var(--fam-200); }
.i2v8-panel .i2-h2 { color: #fff; font-size: clamp(26px, 3.6vw, 36px); }
.i2v8-panel .i2-lede { color: rgba(255,255,255,.78); margin-top: 16px; }
.i2v8-tally { display: flex; gap: 38px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22); }
.i2v8-num {
  display: block; font-size: 44px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--fam-300); font-variant-numeric: tabular-nums;
}
.i2v8-numl { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.62); }
.i2v8-block { padding: 22px 0; border-top: 1px solid var(--c-line); }
.i2v8-block:first-child { border-top: none; padding-top: 0; }
.i2v8-block h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--c-ink); margin: 0 0 14px; }
.i2v8-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.i2v8-block li { display: flex; gap: 10px; padding: 7px 0; font-size: 15.5px; font-weight: 300; line-height: 1.5; color: #323232; }
.i2v8-block .ic {
  flex: 0 0 14px; height: 14px; margin-top: 4px; position: relative;
  border: 1px solid var(--fam-400); border-radius: 3px;
}
.i2v8-block .ic::after {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--fam-700); border-bottom: 2px solid var(--fam-700);
  transform: rotate(-45deg);
}
@media (min-width: 561px) {
  .i2v8-block ul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 941px) {
  .i2v8 { grid-template-columns: minmax(0,420px) minmax(0,1fr); gap: 64px; align-items: start; }
  .i2v8-panel { position: sticky; top: 110px; padding: 32px 30px 34px; }
  .i2v8-block { padding: 26px 0; }
}


/* ==========================================================================
   DESIGN 9 — TYPE-LED MANIFESTO
   No boxes, no media, no fields — typography does the work. The statement
   set large and light, the models as a bold inline run broken by short
   gradient rules (thin accent rules — permitted), segments as a quiet
   closing run. The most restrained design in the set.
   Worst case: it's all text flow — 390 wraps it, 1240 caps the measure.
   ========================================================================== */
.i2v9 { max-width: 980px; }
.i2v9-statement {
  margin: 0; font-size: clamp(22px, 3.4vw, 34px); font-weight: 300;
  line-height: 1.45; letter-spacing: -.015em; color: var(--c-ink);
}
.i2v9-statement b { font-weight: 600; }
.i2v9-rule { height: 2px; width: 88px; background: var(--fam-grad); margin: 30px 0; }
.i2v9-models { line-height: 2; }
.i2v9-models span {
  font-size: clamp(19px, 2.4vw, 26px); font-weight: 700;
  letter-spacing: -.015em; color: var(--c-ink);
}
.i2v9-models span::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 2px; margin: 0 16px 0 16px; background: var(--fam-grad);
}
.i2v9-models span:last-child::after { content: none; }
.i2v9-segs { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.9; color: #323232; }
.i2v9-segs b { font-weight: 700; color: var(--c-ink); }


/* ==========================================================================
   DESIGN 10 — DEEP BAND BRIEF
   The full-bleed inverse: the whole brief on --fam-grad-deep, both lists
   as hairline-ruled dark columns, hairlines at rgba(255,255,255,.22)
   exactly as the approved sol dark bands rule. Closes on the
   .why-glance-stat device — --c-dark fill, 4px radius, SOLID 3px accent —
   carrying the hedge, so the honesty note is the band's last word.
   Worst case: 8 + 9 uneven columns; rows are auto-height ledgers.
   ========================================================================== */
.i2v10 { background: var(--fam-grad-deep); color: #fff; padding-block: 44px 48px; }
.i2v10-head { margin-bottom: 26px; }
.i2v10 .i2-eyebrow { color: var(--fam-200); }
.i2v10-head .i2-h2 { color: #fff; max-width: 22ch; }
.i2v10-head .i2-lede { color: rgba(255,255,255,.76); margin-top: 16px; max-width: 62ch; }
.i2v10-hr { height: 2px; width: 88px; background: var(--fam-grad); margin-top: 22px; }
.i2v10-cols { display: grid; gap: 26px; }
.i2v10-col h3 {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fam-300); margin: 0;
}
.i2v10-col ul { list-style: none; margin: 10px 0 0; padding: 0; }
.i2v10-col li {
  padding: 12px 2px; font-size: 15.5px; font-weight: 300; line-height: 1.45;
  color: rgba(255,255,255,.82); border-bottom: 1px solid rgba(255,255,255,.22);
  transition: border-bottom-color .22s var(--ease), color .22s var(--ease);
}
.i2v10-col li:first-child { border-top: 1px solid rgba(255,255,255,.22); }
@media (hover: hover) {
  .i2v10-col li:hover { border-bottom-color: #fff; color: #fff; }
}
.i2v10-close {
  margin-top: 30px; background: var(--c-dark); border-radius: var(--radius);
  padding: 20px 20px 18px; border-bottom: 3px solid var(--fam-300);
}
.i2v10-close p { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.78); }
.i2v10-close b { color: #fff; font-weight: 700; }
@media (min-width: 761px) {
  .i2v10 { padding-block: 56px 60px; }
  .i2v10-cols { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (min-width: 941px) {
  .i2v10 { padding-block: 64px 68px; }
  .i2v10-cols { gap: 64px; }
}


/* ==========================================================================
   REDUCED MOTION
   The budget is already small — border colours, a 2px lift, a 4px arrow
   nudge. This removes the transforms and leaves the colour changes.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .i2-arrow, .i2-arrow svg,
  .i2v1-models li, .i2v2-list li, .i2v2-list i, .i2v3-item, .i2v3-n,
  .i2v4-cell, .i2v7-seglist li, .i2v10-col li { transition: none; }
  .i2v4-cell:hover { transform: none; }
  .i2-arrow svg { transform: none !important; }
}