/* ==========================================================================
   INDUSTRIES SUB-PAGES — SECTION 5: RELEVANT SAP SOLUTIONS
   10 designs — built on the HOME PAGE base, blue-cyan family
   ==========================================================================
   Preview-only. Namespaced .i5- / .i5vN-. The tiered section: 3 core
   foundation + 3 operational enablers + 2 conditional + 6 ecosystem
   MENTIONS. Every real solution links to its live /solutions/ page.

   THREE GUARDRAILS EVERY DESIGN CARRIES (content, not decoration):
   · .i5-bound — the two doc boundary notes (Integration Suite, Analytics)
     print WITH their solutions: 2px --fam-300 keyline, muted, small.
   · .i5-eco — the ecosystem six are mentions only: muted chips on the
     neutral surface, NEVER blue-cyan, NEVER links, never card-shaped like the
     eight linked solutions, always closing on .i5-econote's
     no-delivery-implication line.
   · .i5-condline — CX's "relevant where the manufacturer has:" intro.

   CONTRACT (index.html, blue-cyan): 4px radius (8px media), #c4c4c4 card
   borders, var(--c-line) rules, neutral shadows, .22s hover, gradient in
   numerals/thin rules, dark hairlines rgba(255,255,255,.22), dark-band
   accents SOLID --fam-300. Dark stat card = --c-dark fill, 4px radius,
   solid 3px accent bottom border (design 9's card).

   RESPONSIVE — mobile-first at 390. Steps: 390 · 561 · 761 · 941 ·
   1081/1100 (flow columns, 4-up rail)
   ========================================================================== */


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

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

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


/* ==========================================================================
   SHARED — type, tier furniture, and the three guardrail devices
   ========================================================================== */
.i5-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;
}
.i5-h2--col { font-size: clamp(28px, 3vw, 38px); }
.i5-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fam-700); margin: 0 0 14px;
}
.i5-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; }
.i5-lede b { font-weight: 600; color: var(--c-ink); }
.i5-head { margin-bottom: 30px; }
.i5-head .i5-lede { margin-top: 18px; max-width: 68ch; }

/* TIER CAP — the taxonomy's furniture: small-caps title over a 2px accent
   rule. The eco modifier steps the whole device down to the muted register
   (dashed hairline, no blue-cyan) — the tiers LOOK like their weight. */
.i5-tiercap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 38px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--fam-700);
}
.i5-tiercap:first-of-type { margin-top: 0; }
.i5-tiercap h3 {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fam-700); margin: 0;
}
.i5-tiercap span { font-size: 13px; font-weight: 500; color: var(--c-muted); white-space: nowrap; }
.i5-tiercap--eco { border-bottom: 1px dashed #c4c4c4; }
.i5-tiercap--eco h3 { color: var(--c-muted); }
.i5-tiercap--dark { border-bottom-color: rgba(255,255,255,.28); }
.i5-tiercap--dark h3 { color: var(--fam-300); }
.i5-tiercap--dark span { color: rgba(255,255,255,.6); }

/* Relevant-for runs — inline-block items (the 390 lesson) */
.i5-caps { list-style: none; margin: 0; padding: 0; }
.i5-caps li { display: inline-block; font-size: 15px; font-weight: 300; line-height: 1.8; color: #323232; }
.i5-caps li:not(:last-child)::after { content: "·"; margin: 0 9px; color: var(--fam-dot); }

.i5-dots { margin: 0; padding: 0; list-style: none; }
.i5-dots li {
  position: relative; padding-left: 17px; margin-bottom: 8px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  font-size: 14.5px; font-weight: 300; line-height: 1.5; color: #323232;
}
.i5-dots li:last-child { margin-bottom: 0; }
.i5-dots li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--fam-700);
}

/* BOUNDARY NOTE — guardrail device #1 */
.i5-bound {
  margin: 10px 0 0; padding-left: 10px;
  font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--c-muted);
  border-left: 2px solid var(--fam-300);
}
.i5-bound i { font-style: normal; font-weight: 700; color: var(--fam-700); margin-right: 4px; }
.i5-bound--dark { color: rgba(255,255,255,.62); }

/* CONDITIONAL INTRO — guardrail device #3 */
.i5-condline { margin: 0 0 8px; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--c-muted); }

/* ECOSYSTEM STRIP — guardrail device #2. Muted chips, no links, no blue-cyan. */
.i5-eco { margin-top: 40px; }
.i5-eco--tight { margin-top: 26px; }
.i5-ecochips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.i5-ecochips li {
  display: inline-block; padding: 7px 12px;
  font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--c-muted);
  background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.i5-econote { margin: 12px 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--c-muted); max-width: 76ch; }

/* Tier tag for flat layouts (matrix, flow, rail) — three colour weights */
.i5-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fam-700);
}
.i5-tag--mid { color: var(--fam-ink-3); }
.i5-tag--cond { color: var(--c-muted); }

/* Solution-name links — one treatment across the ledger-style designs:
   ink at rest, blue-cyan + 4px chevron nudge on hover. */
.i5v1-row h4 a, .i5v3-sol h4 a, .i5v4-rest h4 a, .i5v5-sol h4 a,
.i5v7-mod h3 a, .i5v8-sol h4 a {
  display: inline-flex; align-items: baseline; gap: 8px;
  /* padded to a ≥44px hit box, pulled back so the ledger rows don't move */
  padding-block: 12px; margin-block: -12px;
  color: var(--c-ink); transition: color .22s var(--ease);
}
.i5v1-row h4 svg, .i5v3-sol h4 svg, .i5v4-rest h4 svg, .i5v5-sol h4 svg,
.i5v7-mod h3 svg, .i5v8-sol h4 svg, .i5v4-sol h4 svg {
  width: 15px; height: 13px; flex-shrink: 0; align-self: center;
  transition: transform .2s var(--ease);
}
.i5v1-row h4 a:hover, .i5v3-sol h4 a:hover, .i5v4-rest h4 a:hover,
.i5v5-sol h4 a:hover, .i5v7-mod h3 a:hover, .i5v8-sol h4 a:hover { color: var(--fam-700); }
.i5v1-row h4 a:hover svg, .i5v3-sol h4 a:hover svg, .i5v4-rest h4 a:hover svg,
.i5v5-sol h4 a:hover svg, .i5v7-mod h3 a:hover svg, .i5v8-sol h4 a:hover svg { transform: translateX(4px); }

.i5-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);
}
.i5-arrow svg { width: 26px; height: 24px; transition: transform .22s var(--ease); }
.i5-arrow--sm { width: 48px; height: 48px; }
.i5-arrow--sm svg { width: 22px; height: 20px; }


/* ==========================================================================
   DESIGN 1 — TIERED LEDGER
   Tier caps + hairline solution rows. Name column beside the run from 761.
   Worst case: the 9-item S/4HANA run wraps to two lines and the row
   simply deepens; boundary notes sit under their own runs.
   ========================================================================== */
.i5v1-tier { margin-top: 38px; }
.i5v1-tier:first-of-type { margin-top: 0; }
.i5v1-row { padding: 16px 0 18px; border-bottom: 1px solid var(--c-line); }
.i5v1-row:last-child { border-bottom: none; padding-bottom: 4px; }
.i5v1-row h4 { font-size: 17.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 8px; }
@media (min-width: 761px) {
  .i5v1-row { display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 0 40px; padding: 18px 0 20px; }
  .i5v1-row h4 { margin-bottom: 0; font-size: 18px; }
}
@media (min-width: 941px) {
  .i5v1-row { grid-template-columns: minmax(0,380px) minmax(0,1fr); gap: 0 56px; }
}


/* ==========================================================================
   DESIGN 2 — WEIGHTED TIER GRID
   Hierarchy as weight: core = full .svc-card treatment with the 48x48
   arrow; enablers = plainer cards; conditional = light-ruled compacts;
   ecosystem = the strip. The border and padding ramp IS the taxonomy.
   ========================================================================== */
.i5v2-core { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 8px; }
.i5v2-card {
  display: flex; flex-direction: column;
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 24px 22px 20px; background: #fff; color: var(--c-ink);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.i5v2-card h4 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.i5v2-run { font-size: 14px; font-weight: 300; line-height: 1.65; color: var(--c-muted); margin: 0; }
.i5v2-run b { font-weight: 600; color: var(--c-body); }
.i5v2-card .i5-bound { margin-top: 10px; }
.i5v2-card .i5-arrow--sm { margin-top: 16px; align-self: flex-end; }
@media (hover: hover) {
  .i5v2-card:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
  .i5v2-card:hover .i5-arrow--sm { border-color: var(--fam-700); }
  .i5v2-card:hover .i5-arrow--sm svg { transform: translateX(4px); }
}
.i5v2-card:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }

.i5v2-mid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 8px; }
.i5v2-midcard {
  display: block; border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 18px 20px; color: var(--c-ink);
  transition: border-color .22s var(--ease);
}
.i5v2-midcard h4 { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0 0 8px; }
@media (hover: hover) { .i5v2-midcard:hover { border-color: var(--fam-700); } }
.i5v2-midcard:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }

.i5v2-cond { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 8px; }
.i5v2-condcard {
  display: block; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 16px 18px; color: var(--c-ink);
  transition: border-color .22s var(--ease);
}
.i5v2-condcard h4 { font-size: 16.5px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; }
@media (hover: hover) { .i5v2-condcard:hover { border-color: var(--fam-700); } }
.i5v2-condcard:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }
@media (min-width: 761px) {
  .i5v2-cond { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (min-width: 941px) {
  .i5v2-core { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
  .i5v2-mid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
}


/* ==========================================================================
   DESIGN 3 — STICKY TIER RAIL
   The taxonomy as navigation: four anchor rows with counts pin at ≥941;
   groups scroll past, each opened by its own 2px-ruled cap.
   ========================================================================== */
.i5v3 { display: grid; gap: 34px; }
.i5v3-aside .i5-lede { margin-top: 18px; }
.i5v3-rail { margin-top: 22px; border-top: 1px solid var(--c-line); }
.i5v3-rail ol { list-style: none; margin: 0; padding: 0; }
.i5v3-rail li { border-bottom: 1px solid var(--c-line); transition: border-bottom-color .22s var(--ease); }
.i5v3-rail a {
  display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px; align-items: baseline;
  min-height: 44px; padding: 12px 2px;
  font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--c-ink);
  transition: color .22s var(--ease);
}
.i5v3-rail i { font-style: normal; font-size: 13px; font-weight: 700; color: #b7b7c2; font-variant-numeric: tabular-nums; transition: color .22s var(--ease); }
.i5v3-rail span { font-size: 13px; font-weight: 700; color: var(--fam-dot); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .i5v3-rail li:hover { border-bottom-color: var(--fam-700); }
  .i5v3-rail li:hover a, .i5v3-rail li:hover i { color: var(--fam-700); }
}
.i5v3-rail a:focus-visible { outline: 2px solid var(--fam-700); outline-offset: -2px; }
.i5v3-group { margin-top: 30px; }
.i5v3-group:first-child { margin-top: 0; }
.i5v3-cap {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fam-700); margin: 0 0 6px; padding-bottom: 10px;
  border-bottom: 2px solid var(--fam-700);
}
.i5v3-cap--eco { color: var(--c-muted); border-bottom: 1px dashed #c4c4c4; }
.i5v3-sol { padding: 16px 0 18px; border-bottom: 1px solid var(--c-line); }
.i5v3-sol:last-child { border-bottom: none; }
.i5v3-sol h4 { font-size: 17.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 8px; }
.i5v3-group.i5-eco { margin-top: 30px; }
.i5v3-group.i5-eco .i5-ecochips { margin-top: 14px; }
@media (min-width: 941px) {
  .i5v3 { grid-template-columns: minmax(0,360px) minmax(0,1fr); gap: 64px; align-items: start; }
  .i5v3-aside { position: sticky; top: 110px; }
}


/* ==========================================================================
   DESIGN 4 — DEEP FOUNDATION BAND
   The metaphor made literal: the core tier IS the deep band; enablers and
   conditionals sit on white; the eco strip closes muted. Dark links hold
   white and lift to --fam-200 on hover; dark scope lists use the flat
   --fam-300 marker, not 27 hairline rules.
   ========================================================================== */
.i5v4-band { background: var(--fam-grad-deep); color: #fff; padding-block: 34px 40px; margin-bottom: 40px; }
.i5v4-cols { display: grid; gap: 26px; }
.i5v4-sol h4 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
.i5v4-sol h4 a {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding-block: 12px; margin-block: -12px;   /* 44px hit box, layout held */
  color: #fff; transition: color .22s var(--ease);
}
.i5v4-sol h4 a:hover { color: var(--fam-200); }
.i5v4-sol h4 a:hover svg { transform: translateX(4px); }
.i5v4-sol ul { list-style: none; margin: 0; padding: 0; }
.i5v4-sol li {
  position: relative; padding-left: 16px; margin-bottom: 7px;
  font-size: 14.5px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.78);
}
.i5v4-sol li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--fam-300);
}
.i5v4-sol .i5-bound--dark { margin-top: 12px; }
.i5v4-rest { display: grid; gap: 34px; }
.i5v4-row { padding: 14px 0 16px; border-bottom: 1px solid var(--c-line); }
.i5v4-row:last-of-type { border-bottom: none; }
.i5v4-row h4 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 6px; }
.i5v4-row p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--c-muted); margin: 0; }
.i5v4-row p b { font-weight: 600; color: var(--c-body); }
@media (min-width: 761px) {
  .i5v4-band { padding-block: 44px 50px; }
  .i5v4-cols { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; }
  .i5v4-rest { grid-template-columns: 1fr 1fr; gap: 48px; }
}


/* ==========================================================================
   DESIGN 5 — TIER ACCORDION
   Four <details>, tallies visible closed, core open by default. The eco
   panel keeps the muted strip inside the accordion — compression must not
   promote the mentions into links.
   ========================================================================== */
.i5v5-list { border-top: 1px solid var(--c-line); }
.i5v5-item { border-bottom: 1px solid var(--c-line); transition: border-bottom-color .22s var(--ease); }
.i5v5-item > summary { list-style: none; cursor: pointer; }
.i5v5-item > summary::-webkit-details-marker { display: none; }
.i5v5-item summary {
  display: grid; grid-template-columns: 38px minmax(0,1fr) 48px;
  grid-template-areas: "n h pm" "n t pm";
  gap: 0 12px; align-items: center; padding: 16px 2px; min-height: 68px;
}
.i5v5-n {
  grid-area: 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);
}
.i5v5-item summary h3 { grid-area: h; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; align-self: end; }
.i5v5-tally { grid-area: t; font-size: 13px; font-weight: 400; color: var(--c-muted); margin-top: 3px; align-self: start; }
.i5v5-pm {
  grid-area: pm; position: relative; width: 48px; height: 48px;
  border: 1px solid #c4c4c4; border-radius: var(--radius); justify-self: end;
  transition: border-color .22s var(--ease);
}
.i5v5-pm::before, .i5v5-pm::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--fam-700);
  transform: translate(-50%,-50%);
}
.i5v5-pm::before { width: 18px; height: 2px; }
.i5v5-pm::after { width: 2px; height: 18px; transition: transform .22s var(--ease); }
.i5v5-item[open] .i5v5-pm::after { transform: translate(-50%,-50%) scaleY(0); }
.i5v5-item[open] .i5v5-n { color: var(--fam-700); }
.i5v5-body { padding: 4px 2px 24px; }
.i5v5-sol { padding: 12px 0 14px; border-bottom: 1px solid var(--c-line); }
.i5v5-sol:last-child { border-bottom: none; padding-bottom: 0; }
.i5v5-sol h4 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 8px; }
.i5v5-item--eco .i5v5-body .i5-econote { margin-top: 14px; }
@media (hover: hover) {
  .i5v5-item:hover { border-bottom-color: var(--fam-700); }
  .i5v5-item:hover .i5v5-n { color: var(--fam-700); }
  .i5v5-item:hover .i5v5-pm { border-color: var(--fam-700); }
}
.i5v5-item > summary:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }
@media (min-width: 761px) {
  .i5v5-item summary { grid-template-columns: 56px minmax(0,1fr) 48px; gap: 0 16px; }
  .i5v5-item summary h3 { font-size: 19px; }
  .i5v5-n { font-size: 24px; }
  .i5v5-body { padding: 4px 0 28px 72px; }
}


/* ==========================================================================
   DESIGN 6 — SOLUTION MATRIX
   Ruled paper: 8 linked cells over 1px var(--c-line) gaps, no radius, no
   boxes. Cells are whole-cell links; hover recolours the title and nudges
   its chevron — nothing else. 8 cells stay even at 2-up and 4-up.
   ========================================================================== */
.i5v6-head { display: grid; gap: 14px; padding-bottom: 22px; }
.i5v6-head .i5-lede { max-width: 68ch; }
.i5v6-rule { height: 2px; background: var(--fam-grad); }
.i5v6-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--c-line); border-bottom: 1px solid var(--c-line);
}
.i5v6-cell { background: #fff; padding: 16px 2px 18px; display: block; }
.i5v6-cell .i5-tag { margin-bottom: 6px; }
.i5v6-cell h3 {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 7px;
  transition: color .22s var(--ease);
}
.i5v6-cell h3 svg { width: 14px; height: 12px; flex-shrink: 0; align-self: center; transition: transform .2s var(--ease); }
.i5v6-cell p { font-size: 13.5px; font-weight: 300; line-height: 1.6; color: var(--c-muted); margin: 0; }
.i5v6-cell p b { font-weight: 600; color: var(--c-body); }
.i5v6-cell .i5-bound { margin-top: 8px; font-size: 12.5px; }
@media (hover: hover) {
  .i5v6-cell:hover h3 { color: var(--fam-700); }
  .i5v6-cell:hover h3 svg { transform: translateX(4px); }
}
.i5v6-cell:focus-visible { outline: 2px solid var(--fam-700); outline-offset: -2px; }
@media (min-width: 561px) {
  .i5v6-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .i5v6-cell { padding: 18px 20px 20px; }
  .i5v6-cell:nth-child(2n+1) { padding-left: 0; }
  .i5v6-cell:nth-child(2n)   { padding-right: 0; }
}
@media (min-width: 761px) {
  .i5v6-head { grid-template-columns: minmax(0,1fr) minmax(0,380px); align-items: end; gap: 30px; }
}
@media (min-width: 1100px) {
  .i5v6-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .i5v6-cell { padding: 20px; }
  .i5v6-cell:nth-child(2n+1), .i5v6-cell:nth-child(2n) { padding-inline: 20px; }
  .i5v6-cell:nth-child(4n+1) { padding-left: 0; }
  .i5v6-cell:nth-child(4n)   { padding-right: 0; }
}


/* ==========================================================================
   DESIGN 7 — COLUMN FLOW
   Eight uneven solution blocks packed by height; tier tags carry the
   taxonomy out of reading order. column-rule separates; boundary notes
   stay inside their blocks (break-inside: avoid holds each block whole).
   ========================================================================== */
.i5v7-flow { columns: 1; column-gap: 40px; column-rule: 1px solid var(--c-line); }
.i5v7-mod {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  padding: 20px 0; border-top: 1px solid var(--c-line);
}
.i5v7-mod:first-child { border-top: none; padding-top: 0; }
.i5v7-mod .i5-tag { margin-bottom: 6px; }
.i5v7-mod h3 { font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); margin: 0 0 10px; }
@media (min-width: 761px) {
  .i5v7-flow { columns: 2; }
  .i5v7-mod:first-child { border-top: 1px solid var(--c-line); padding-top: 20px; }
}
@media (min-width: 1081px) {
  .i5v7-flow { columns: 3; column-gap: 44px; }
}


/* ==========================================================================
   DESIGN 8 — TIER SWITCHBOARD
   Four tabs, fixed-height panels. Phone: 2x2 labelled chips (four tabs
   always fit, so no numeral-only compromise here); ≥941: vertical list.
   No [aria-selected]:hover colour override — the §4·10 defect stays dead.
   ========================================================================== */
.i5v8 { display: grid; gap: 22px; }
.i5v8-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.i5v8-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 10px; text-align: center;
  border: 1px solid #c4c4c4; border-radius: var(--radius); background: #fff;
  font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--c-body);
  cursor: pointer;
  transition: border-color .22s var(--ease), color .22s var(--ease), background-color .22s var(--ease);
}
.i5v8-tab .n { display: none; }
.i5v8-tab .c { font-size: 12px; font-weight: 700; color: var(--fam-dot); font-variant-numeric: tabular-nums; }
.i5v8-tab[aria-selected="true"] { border-color: var(--fam-700); color: #fff; background: var(--fam-700); }
.i5v8-tab[aria-selected="true"] .c { color: var(--fam-200); }
@media (hover: hover) {
  .i5v8-tab:not([aria-selected="true"]):hover { border-color: var(--fam-700); color: var(--fam-700); }
}
.i5v8-tab:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }
.i5v8-panel[hidden] { display: none; }
.i5v8-panel:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 4px; }
.i5v8-sol { padding: 14px 0 16px; border-bottom: 1px solid var(--c-line); }
.i5v8-sol:first-child { padding-top: 0; }
.i5v8-sol:last-child { border-bottom: none; }
.i5v8-sol h4 { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 8px; }
.i5v8-panel .i5-ecochips { margin-top: 4px; }
@media (min-width: 941px) {
  .i5v8 { grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 44px; align-items: start; }
  .i5v8-rail { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--c-line); }
  .i5v8-tab {
    justify-content: flex-start; text-align: left; gap: 12px; min-height: 0;
    padding: 13px 4px; border: none; border-bottom: 1px solid var(--c-line);
    border-radius: 0; background: none; font-size: 15px; font-weight: 600;
  }
  .i5v8-tab .n { display: block; flex: 0 0 30px; color: #b7b7c2; transition: color .22s var(--ease); }
  .i5v8-tab .t { flex: 1; }
  .i5v8-tab .c { color: #b7b7c2; }
  .i5v8-tab[aria-selected="true"] { background: none; color: var(--c-ink); border-bottom-color: var(--fam-700); }
  .i5v8-tab[aria-selected="true"] .n, .i5v8-tab[aria-selected="true"] .c { color: var(--fam-700); }
  .i5v8-tab:hover .n { color: var(--fam-700); }
}


/* ==========================================================================
   DESIGN 9 — DARK SNAP RAIL
   Eight linked solutions as dark stat cards (--c-dark fill, 4px radius,
   solid 3px blue-cyan bottom border) on a snap rail; 4-up grid from 1100. The
   rail scrolls inside its own box — the page never scrolls sideways. The
   ecosystem six are NOT cards: mentions must not dress like links.
   ========================================================================== */
.i5v9-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 330px);
  gap: 12px; margin-top: 4px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
  padding: 4px 2px 14px;
  scrollbar-width: thin; scrollbar-color: #c4c4c4 transparent;
}
.i5v9-rail::-webkit-scrollbar { height: 6px; }
.i5v9-rail::-webkit-scrollbar-thumb { background: #c4c4c4; border-radius: 3px; }
.i5v9-rail::-webkit-scrollbar-track { background: transparent; }
.i5v9-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--c-dark); border-radius: var(--radius);
  border-bottom: 3px solid var(--fam-700);
  padding: 20px 18px 18px; min-height: 250px;
  transition: border-bottom-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.i5v9-tier { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fam-300); }
.i5v9-tier--mid { color: var(--fam-200); }
.i5v9-tier--cond { color: rgba(255,255,255,.56); }
.i5v9-card h3 { margin: 10px 0 0; font-size: 17.5px; font-weight: 700; line-height: 1.3; color: #fff; }
.i5v9-card p { margin: 9px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.72); flex: 1; }
.i5v9-card p b { font-weight: 600; color: rgba(255,255,255,.9); }
.i5v9-bound {
  display: block; margin: 9px 0 0; padding-left: 8px;
  font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.6);
  border-left: 2px solid var(--fam-300);
}
.i5v9-go { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fam-200); }
.i5v9-go svg { width: 15px; height: 13px; transition: transform .2s var(--ease); }
@media (hover: hover) {
  .i5v9-card:hover { border-bottom-color: var(--fam-300); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
  .i5v9-card:hover .i5v9-go svg { transform: translateX(4px); }
}
.i5v9-card:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 3px; }
.i5v9-hint { margin: 10px 0 0; font-size: 13.5px; color: var(--c-muted); display: flex; align-items: center; gap: 8px; }
.i5v9-hint svg { width: 18px; height: 12px; color: var(--fam-700); }
@media (min-width: 561px) {
  .i5v9-rail { grid-auto-columns: min(56%, 340px); gap: 16px; }
}
@media (min-width: 941px) {
  .i5v9-rail { grid-auto-columns: min(38%, 350px); }
}
@media (min-width: 1100px) {
  .i5v9-rail {
    grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0,1fr));
    grid-auto-columns: auto; gap: 18px; overflow-x: visible;
    scroll-snap-type: none; padding-bottom: 0;
  }
  .i5v9-card { min-height: 280px; }
  .i5v9-hint { display: none; }
}


/* ==========================================================================
   DESIGN 10 — TYPE-LED TIER INDEX
   No boxes: small-caps tier rules, large linked headlines, muted trailing
   runs, keylined footnotes, the ecosystem as the quiet last word. The
   most editorial §5 — measure capped so lines stay readable.
   ========================================================================== */
.i5v10 { max-width: 1000px; }
.i5v10-tier { margin-top: 34px; }
.i5v10-cap {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fam-700); margin: 0 0 6px; padding-top: 16px;
  border-top: 2px solid var(--fam-700);
}
.i5v10-cap--eco { color: var(--c-muted); border-top: 1px dashed #c4c4c4; }
.i5v10-line { margin: 14px 0 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--c-muted); }
.i5v10-line a {
  display: inline-block; padding-block: 10px; margin-block: -10px;   /* ≥44px hit box at the 390 clamp */
  font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; letter-spacing: -.015em;
  line-height: 1.3; color: var(--c-ink);
  transition: color .22s var(--ease);
}
.i5v10-line a:hover { color: var(--fam-700); }
.i5v10-line a:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 3px; }
.i5v10-line i { font-style: normal; font-weight: 700; color: var(--fam-700); margin-left: 3px; }
.i5v10-notes { margin-top: 26px; display: grid; gap: 8px; }
.i5v10-eco { margin-top: 34px; }
.i5v10-ecoline { margin: 12px 0 0; font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--c-muted); }


/* ==========================================================================
   DESIGN 11 — PALETTE-RAMP TIERS  (new palette round, 2026-08-04)
   The hierarchy drawn by the palette itself: four full-width bands
   descending the family ramp — deep gradient → solid --fam-700 → --fam-tint
   → neutral surface. Since the 2026-08-05 palette swap the 700 is #00819F:
   white on it holds ~4.5:1 — the AA floor, the owner-accepted trade that
   travels with this palette — still a legal text surface for body text.
   Counts as a page's DARK MOMENT when composed.
   Worst case: bands are auto-height; the boundary notes ride their dark
   bands in the --dark form.
   ========================================================================== */
.i5v11 { padding: 40px 0 0; background: #fff; }
.i5v11-head { margin-bottom: 30px; }
.i5v11-head .i5-lede { margin-top: 18px; max-width: 68ch; }
.i5v11-band { padding-block: 30px 36px; }
.i5v11-band .i5-tiercap { margin-top: 0; }
.i5v11-band--core { background: var(--fam-grad-deep); color: #fff; }
.i5v11-band--enab { background: var(--fam-700); color: #fff; }
.i5v11-band--cond { background: var(--fam-tint); }
.i5v11-band--eco { background: var(--c-surface-2); padding-block: 26px 32px; }
/* tier cap on the solid 700 band — hairline and caps step to the light end */
.i5v11-cap700 { border-bottom-color: rgba(255,255,255,.34); }
.i5v11-cap700 h3 { color: var(--fam-100); }
.i5v11-cap700 span { color: rgba(255,255,255,.7); }
.i5v11-cols { display: grid; gap: 22px; }
.i5v11-sol h4 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.i5v11-sol h4 a {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding-block: 12px; margin-block: -12px;   /* 44px hit box, layout held */
  color: #fff; transition: color .22s var(--ease);
}
.i5v11-sol h4 svg { width: 15px; height: 13px; flex-shrink: 0; align-self: center; transition: transform .2s var(--ease); }
.i5v11-sol h4 a:hover { color: var(--fam-100); }
.i5v11-sol h4 a:hover svg { transform: translateX(4px); }
.i5v11-sol h4 a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.i5v11-sol p { font-size: 14px; font-weight: 300; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0; }
.i5v11-sol .i5-bound--dark { margin-top: 10px; }
/* the tint band flips to ink */
.i5v11-sol--ink h4 a { color: var(--c-ink); }
.i5v11-sol--ink h4 a:hover { color: var(--fam-700); }
.i5v11-sol--ink h4 a:focus-visible { outline-color: var(--fam-700); }
.i5v11-sol--ink p { color: var(--c-muted); }
.i5v11-sol--ink p b { font-weight: 600; color: var(--c-body); }
@media (min-width: 761px) {
  .i5v11-band { padding-block: 36px 42px; }
  .i5v11-cols { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; }
  .i5v11-cols--two { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 12 — DUOTONE SPLIT  (new palette round, 2026-08-04)
   Two colour registers in one spread: a solid --fam-700 claim panel (brief
   + tier legend; the content pins at ≥941 while the panel stretches) and
   the eight solutions as a white tiered ledger beside it. Square corners
   on the panel — it is a surface, not a card.
   ========================================================================== */
.i5v12 { display: grid; gap: 30px; }
.i5v12-claim { background: var(--fam-700); color: #fff; padding: 28px 24px 30px; }
.i5v12-claim .i5-eyebrow { color: var(--fam-100); }
.i5v12-claim .i5-h2 { color: #fff; }
.i5v12-claim .i5-lede { color: rgba(255,255,255,.82); margin-top: 16px; }
.i5v12-legend { margin-top: 22px; border-top: 1px solid rgba(255,255,255,.3); }
.i5v12-legend div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.18);
  font-size: 14.5px; font-weight: 400; color: rgba(255,255,255,.85);
}
.i5v12-legend b { font-weight: 700; color: var(--fam-100); font-variant-numeric: tabular-nums; }
.i5v12-body .i5-tiercap:first-child { margin-top: 0; }
.i5v12-sol { padding: 14px 0 16px; border-bottom: 1px solid var(--c-line); }
.i5v12-sol:last-of-type { border-bottom: none; }
.i5v12-sol h4 { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 8px; }
.i5v12-sol h4 a {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding-block: 12px; margin-block: -12px;
  color: var(--c-ink); transition: color .22s var(--ease);
}
.i5v12-sol h4 svg { width: 15px; height: 13px; flex-shrink: 0; align-self: center; transition: transform .2s var(--ease); }
.i5v12-sol h4 a:hover { color: var(--fam-700); }
.i5v12-sol h4 a:hover svg { transform: translateX(4px); }
.i5v12-sol h4 a:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }
@media (min-width: 941px) {
  .i5v12 { grid-template-columns: minmax(0,380px) minmax(0,1fr); gap: 0; align-items: stretch; }
  .i5v12-claim { padding: 34px 30px 36px; }
  .i5v12-pin { position: sticky; top: 110px; }
  .i5v12-body { padding-left: 56px; }
}


/* ==========================================================================
   DESIGN 13 — TINTED BENTO  (new palette round, 2026-08-04)
   The home bento discipline — NO radius, NO borders (.feat-tile) — with
   the palette as the weight system: core tiles on the deep gradient,
   enablers on --fam-chip, conditional on --fam-tint-2. Whole tiles are
   links; hover nudges the go-chevron and nothing else moves. The eco six
   stay OFF the mosaic in the muted strip.
   Worst case: rows stretch to the tallest tile in each row; the mosaic
   is 1-up → 2-up → the 3+3+2 weighted rows at 941.
   ========================================================================== */
.i5v13-bento { display: grid; grid-template-columns: 1fr; gap: 10px; }
.i5v13-tile { display: flex; flex-direction: column; padding: 22px 20px; }
.i5v13-tile--core { background: var(--fam-grad-deep); color: #fff; }
.i5v13-tile--enab { background: var(--fam-chip); }
.i5v13-tile--cond { background: var(--fam-tint-2); }
.i5v13-tag { color: var(--fam-200); }
.i5v13-tag--mid { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fam-700); }
.i5v13-tag--cond { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.i5v13-tile h3 { margin: 8px 0 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; }
.i5v13-tile--enab h3, .i5v13-tile--cond h3 { color: var(--c-ink); }
.i5v13-tile p { margin: 9px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.75); flex: 1; }
.i5v13-tile--enab p, .i5v13-tile--cond p { color: var(--fam-ink-3); }
.i5v13-tile--cond p b { font-weight: 600; color: var(--c-body); }
.i5v13-bound {
  display: block; margin: 9px 0 0; padding-left: 8px;
  font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.6);
  border-left: 2px solid var(--fam-300);
}
.i5v13-go { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fam-200); }
.i5v13-go--ink { color: var(--fam-700); }
.i5v13-go svg { width: 15px; height: 13px; transition: transform .2s var(--ease); }
@media (hover: hover) {
  .i5v13-tile:hover .i5v13-go svg { transform: translateX(4px); }
}
.i5v13-tile:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }
@media (min-width: 561px) {
  .i5v13-bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 941px) {
  .i5v13-bento { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .i5v13-tile--core { grid-column: span 2; padding: 26px 24px; }
  .i5v13-tile--enab { grid-column: span 2; }
  .i5v13-tile--cond { grid-column: span 3; }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .i5-arrow, .i5-arrow svg,
  .i5v1-row h4 a, .i5v3-sol h4 a, .i5v4-rest h4 a, .i5v5-sol h4 a,
  .i5v7-mod h3 a, .i5v8-sol h4 a, .i5v4-sol h4 a,
  .i5v2-card, .i5v2-midcard, .i5v2-condcard,
  .i5v3-rail li, .i5v3-rail a, .i5v3-rail i,
  .i5v5-item, .i5v5-n, .i5v5-pm, .i5v5-pm::after,
  .i5v6-cell h3, .i5v6-cell h3 svg, .i5v8-tab, .i5v8-tab .n,
  .i5v9-card, .i5v9-go svg, .i5v10-line a { transition: none; }
  .i5v2-card:hover, .i5v9-card:hover { transform: none; }
  .i5v9-rail { scroll-snap-type: none; }
  .i5v1-row h4 svg, .i5v6-cell h3 svg, .i5v9-go svg { transform: none !important; }
}