/* ==========================================================================
   INDUSTRIES SUB-PAGES — SECTION 6: COMMON USE CASES
   10 designs — built on the HOME PAGE base, blue-cyan family
   ==========================================================================
   Preview-only. Namespaced .i6- / .i6vN-. Content: 8 primary use cases
   (title + one doc-verbatim line) + 9 secondary titles.

   ONE GUARDRAIL EVERY DESIGN CARRIES — the doc's use-case control:
   .i6-control ("areas VISCAP can assess or support — not completed project
   outcomes"). A 3px --fam-300 keyline bar on the neutral surface; the
   --dark form holds the same shape on deep fills. It prints in all ten
   designs and must survive every lift. The primary/secondary distinction
   is the second invariant: primaries get room, secondaries stay titles
   (chips or runs) — never promoted to look like primaries.

   CONTRACT (index.html, blue-cyan): 4px radius (8px media), #c4c4c4 card
   borders, var(--c-line) rules, neutral shadows, .22s hover, gradient in
   numerals and thin rules only, dark hairlines rgba(255,255,255,.22),
   accents on dark SOLID --fam-300.

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


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

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

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


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

/* THE CONTROL NOTE — the section's honesty device, one shape everywhere */
.i6-control {
  margin: 26px 0 0; padding: 12px 16px;
  font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--c-muted);
  background: var(--c-surface-2); border-left: 3px solid var(--fam-300);
  max-width: 76ch;
}
.i6-control b { font-weight: 600; color: var(--c-body); }
.i6-control--dark { background: rgba(255,255,255,.08); color: rgba(255,255,255,.72); border-left-color: var(--fam-300); }

/* Secondary chips — titles only, outlined, never the primary treatment */
.i6-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.i6-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);
}
.i6-chips--ghost li { background: none; border-color: rgba(255,255,255,.34); color: rgba(255,255,255,.85); }
.i6-seccap { font-size: 15px; font-weight: 700; color: var(--c-ink); margin: 0 0 12px; }
.i6-seccap--dark { color: #fff; }

.i6-num {
  display: block; 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;
}
.i6-count {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #b7b7c2;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
}


/* ==========================================================================
   DESIGN 1 — NUMBERED LEDGER + SECONDARY STRIP
   Hairline rows, numerals lighting on hover, chips + control closing.
   ========================================================================== */
.i6v1-rows { display: flex; flex-direction: column; }
.i6v1-row {
  display: grid; grid-template-columns: 38px minmax(0,1fr);
  gap: 0 12px; align-items: start;
  padding: 16px 2px 18px; border-bottom: 1px solid var(--c-line);
  transition: border-bottom-color .22s var(--ease);
}
.i6v1-row:first-child { border-top: 1px solid var(--c-line); }
.i6v1-n {
  font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: #b7b7c2; font-variant-numeric: tabular-nums; padding-top: 2px;
  transition: color .22s var(--ease);
}
.i6v1-row h3 { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.i6v1-row p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 5px 0 0; }
@media (hover: hover) {
  .i6v1-row:hover { border-bottom-color: var(--fam-700); }
  .i6v1-row:hover .i6v1-n { color: var(--fam-700); }
}
.i6v1-sec { margin-top: 30px; }
@media (min-width: 761px) {
  .i6v1-row { grid-template-columns: 56px minmax(0,1fr); gap: 0 20px; padding: 20px 4px 22px; }
  .i6v1-n { font-size: 24px; }
  .i6v1-row h3 { font-size: 19px; }
}


/* ==========================================================================
   DESIGN 2 — CASE-CARD GRID
   .svc-cards verbatim: neutral border, 4px radius, .22s lift. Eight cards
   resolve 2-up at 561 and 4-up at 1100.
   ========================================================================== */
.i6v2-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.i6v2-card {
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 20px; background: #fff;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.i6v2-n { display: block; font-size: 13px; font-weight: 700; color: var(--fam-dot); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.i6v2-card h3 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 8px; }
.i6v2-card p { font-size: 14px; font-weight: 300; line-height: 1.55; color: #323232; margin: 0; }
@media (hover: hover) {
  .i6v2-card:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
}
.i6v2-sec { margin-top: 30px; }
@media (min-width: 561px) {
  .i6v2-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
}
@media (min-width: 1100px) {
  .i6v2-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 3 — STICKY BRIEF + CASE ROWS
   Brief, counts and the control pin left at ≥941 — the honesty note stays
   in view the whole scroll. Counters are the home data-count device.
   ========================================================================== */
.i6v3 { display: grid; gap: 30px; }
.i6v3-aside .i6-lede { margin-top: 18px; }
.i6v3-tally { display: flex; gap: 38px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.i6v3-num {
  display: block; font-size: 44px; 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;
}
.i6v3-numl { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--c-muted); }
.i6v3-aside .i6-control { margin-top: 22px; }
.i6v3-row { padding: 16px 0 18px; border-bottom: 1px solid var(--c-line); transition: border-bottom-color .22s var(--ease); }
.i6v3-row:first-child { padding-top: 0; }
.i6v3-row h3 { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.i6v3-row p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 5px 0 0; }
@media (hover: hover) {
  .i6v3-row:hover { border-bottom-color: var(--fam-700); }
}
.i6v3-sec { padding-top: 24px; }
@media (min-width: 941px) {
  .i6v3 { grid-template-columns: minmax(0,400px) minmax(0,1fr); gap: 64px; align-items: start; }
  .i6v3-aside { position: sticky; top: 110px; }
  .i6v3-row h3 { font-size: 18px; }
}


/* ==========================================================================
   DESIGN 4 — DEEP BAND CASES
   Full-bleed --fam-grad-deep: primaries as ruled pairs (2-up from 761),
   secondaries as ghost chips, and the control note ON the closing
   dark-stat bar — --c-dark fill, 4px radius, solid 3px --fam-300 rule.
   ========================================================================== */
.i6v4 { background: var(--fam-grad-deep); color: #fff; padding-block: 40px 44px; }
.i6v4-head { margin-bottom: 8px; }
.i6v4 .i6-eyebrow { color: var(--fam-200); }
.i6v4-head .i6-h2 { color: #fff; max-width: 22ch; }
.i6v4-head .i6-lede { color: rgba(255,255,255,.76); margin-top: 16px; }
.i6v4-hr { height: 2px; width: 88px; background: var(--fam-grad); margin-top: 22px; }
.i6v4-grid { display: grid; grid-template-columns: 1fr; gap: 0 48px; }
.i6v4-cell { padding: 18px 0 20px; border-bottom: 1px solid rgba(255,255,255,.22); transition: border-bottom-color .22s var(--ease); }
.i6v4-cell h3 { font-size: 17px; font-weight: 700; line-height: 1.35; color: #fff; margin: 0; }
.i6v4-cell p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.76); margin: 6px 0 0; }
@media (hover: hover) {
  .i6v4-cell:hover { border-bottom-color: var(--fam-100); }
}
.i6v4-sec { margin-top: 28px; }
.i6v4-close {
  margin-top: 28px; background: var(--c-dark); border-radius: var(--radius);
  padding: 18px 20px 16px; border-bottom: 3px solid var(--fam-300);
}
.i6v4-close p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.78); }
.i6v4-close b { color: #fff; font-weight: 700; }
@media (min-width: 761px) {
  .i6v4 { padding-block: 48px 52px; }
  .i6v4-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 941px) {
  .i6v4 { padding-block: 56px 60px; }
}


/* ==========================================================================
   DESIGN 5 — HAIRLINE MATRIX
   Ruled paper: 1px var(--c-line) gaps through white cells, no radius.
   Eight cells stay even at 2-up and 4-up. Secondary run + control below.
   ========================================================================== */
.i6v5-head { display: grid; gap: 14px; padding-bottom: 22px; }
.i6v5-head .i6-lede { max-width: 68ch; }
.i6v5-rule { height: 2px; background: var(--fam-grad); }
.i6v5-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--c-line); border-bottom: 1px solid var(--c-line);
}
.i6v5-cell { background: #fff; padding: 15px 2px 17px; }
.i6v5-cell h3 { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 6px; }
.i6v5-cell p { font-size: 13.5px; font-weight: 300; line-height: 1.55; color: var(--c-muted); margin: 0; }
.i6v5-sec { margin-top: 24px; }
.i6v5-run { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.8; color: #323232; }
.i6v5-run b { font-weight: 700; color: var(--c-ink); }
@media (min-width: 561px) {
  .i6v5-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .i6v5-cell { padding: 17px 18px 19px; }
  .i6v5-cell:nth-child(2n+1) { padding-left: 0; }
  .i6v5-cell:nth-child(2n)   { padding-right: 0; }
}
@media (min-width: 761px) {
  .i6v5-head { grid-template-columns: minmax(0,1fr) minmax(0,360px); align-items: end; gap: 30px; }
}
@media (min-width: 1100px) {
  .i6v5-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .i6v5-cell { padding: 18px; }
  .i6v5-cell:nth-child(2n+1), .i6v5-cell:nth-child(2n) { padding-inline: 18px; }
  .i6v5-cell:nth-child(4n+1) { padding-left: 0; }
  .i6v5-cell:nth-child(4n)   { padding-right: 0; }
}


/* ==========================================================================
   DESIGN 6 — COLUMN FLOW
   Eight cases packed by height; the secondary block flows as a ninth,
   visibly different item (tint field). Numerals large and findable.
   ========================================================================== */
.i6v6-flow { columns: 1; column-gap: 40px; column-rule: 1px solid var(--c-line); }
.i6v6-mod {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  padding: 20px 0; border-top: 1px solid var(--c-line);
}
.i6v6-mod:first-child { border-top: none; padding-top: 0; }
.i6v6-n { font-size: 30px; margin-bottom: 8px; }
.i6v6-mod h3 { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 7px; }
.i6v6-mod p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: #323232; margin: 0; }
.i6v6-mod--sec { background: var(--fam-tint); padding: 18px 16px 20px; border-top: none; border-radius: var(--radius); margin-top: 20px; }
.i6v6-mod--sec .i6-chips li { background: #fff; }
@media (min-width: 761px) {
  .i6v6-flow { columns: 2; }
  .i6v6-mod:first-child { border-top: 1px solid var(--c-line); padding-top: 20px; }
  .i6v6-mod--sec { border-top: none; }
}
@media (min-width: 1081px) {
  .i6v6-flow { columns: 3; column-gap: 44px; }
}


/* ==========================================================================
   DESIGN 7 — SNAP RAIL
   Eight cards, one gesture, fixed height; the track scrolls inside
   .container. Secondaries + control close under the rail.
   ========================================================================== */
.i6v7 { display: grid; gap: 24px; }
.i6v7-hint { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13.5px; color: var(--c-muted); }
.i6v7-hint svg { width: 18px; height: 12px; color: var(--fam-700); }
.i6v7-track {
  display: flex; gap: 14px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 2px 18px;
  scrollbar-width: thin; scrollbar-color: var(--fam-700) var(--c-line);
}
.i6v7-track:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 4px; }
.i6v7-track::-webkit-scrollbar { height: 4px; }
.i6v7-track::-webkit-scrollbar-track { background: var(--c-line); border-radius: 2px; }
.i6v7-track::-webkit-scrollbar-thumb { background: var(--fam-700); border-radius: 2px; }
.i6v7-card {
  flex: 0 0 80%; scroll-snap-align: start;
  display: flex; flex-direction: column;
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 20px 18px; background: #fff;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.i6v7-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.i6v7-card h3 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
.i6v7-card p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: #323232; margin: 0; flex: 1; }
@media (hover: hover) {
  .i6v7-card:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
}
.i6v7-sec { margin-top: 6px; }
@media (min-width: 561px) { .i6v7-card { flex-basis: 52%; } }
@media (min-width: 761px) { .i6v7-card { flex-basis: 38%; padding: 22px 20px; } }
@media (min-width: 941px) {
  .i6v7 { grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 56px; align-items: start; }
  .i6v7-head { position: static; }
  .i6v7-card { flex-basis: 48%; }
  .i6v7-sec, .i6v7 > .i6-control { grid-column: 2; }
}
@media (min-width: 1181px) { .i6v7-card { flex-basis: 36%; } }


/* ==========================================================================
   DESIGN 8 — SCRIMMED PANEL + TICKED CASES
   The photographic one: the factory shot under the 900-base blue scrim
   carries brief, counts AND the control note; ticked pairs beside it.
   Gradient remains the no-image fallback.
   ========================================================================== */
.i6v8 { display: grid; gap: 30px; }
.i6v8-panel {
  border-radius: 14px; overflow: hidden; color: #fff; padding: 26px 24px 28px;
  background:
    linear-gradient(160deg, rgba(7,47,70,.92) 0%, rgba(7,47,70,.84) 55%, rgba(0,90,136,.78) 100%),
    var(--img) center/cover no-repeat, var(--fam-grad-deep);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.i6v8-panel .i6-eyebrow { color: var(--fam-200); }
.i6v8-panel .i6-h2 { color: #fff; }
.i6v8-panel .i6-lede { color: rgba(255,255,255,.8); margin-top: 16px; }
.i6v8-tally { display: flex; gap: 38px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22); }
.i6v8-num {
  display: block; font-size: 44px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--fam-300); font-variant-numeric: tabular-nums;
}
.i6v8-numl { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.66); }
.i6v8-panel .i6-control--dark { margin-top: 22px; }
.i6v8-item {
  display: flex; gap: 12px; align-items: start;
  padding: 14px 0 16px; border-bottom: 1px solid var(--c-line);
}
.i6v8-item:first-child { padding-top: 0; }
.i6v8-item h3 { font-size: 16.5px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.i6v8-item p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: #323232; margin: 4px 0 0; }
.i6v8-item .ic {
  flex: 0 0 14px; height: 14px; margin-top: 5px; position: relative;
  border: 1px solid var(--fam-400); border-radius: 3px;
}
.i6v8-item .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);
}
.i6v8-sec { padding-top: 22px; }
@media (min-width: 941px) {
  .i6v8 { grid-template-columns: minmax(0,420px) minmax(0,1fr); gap: 64px; align-items: start; }
  .i6v8-panel { padding: 32px 30px 34px; }
}


/* ==========================================================================
   DESIGN 9 — ASYMMETRIC SPLIT + DARK SIDEBAR
   Primaries roomy on the left; secondaries in a pinned dark-stat card
   (--c-dark, 4px radius, solid 3px blue-cyan rule) with the control note as
   its foot — the two registers can't be confused.
   ========================================================================== */
.i6v9 { display: grid; gap: 34px; }
.i6v9-item {
  display: grid; grid-template-columns: 52px minmax(0,1fr);
  gap: 0 16px; align-items: start;
  padding: 18px 0 20px; border-bottom: 1px solid var(--c-line);
}
.i6v9-item:first-child { padding-top: 0; }
.i6v9-item:last-child { border-bottom: none; }
.i6v9-n { font-size: 30px; padding-top: 2px; }
.i6v9-item h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
.i6v9-item p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 6px 0 0; }
.i6v9-side {
  background: var(--c-dark); border-radius: var(--radius);
  border-bottom: 3px solid var(--fam-700);
  padding: 24px 22px 22px; color: #fff; align-self: start;
}
.i6v9-side h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; margin: 0 0 14px; }
.i6v9-side ul { list-style: none; margin: 0; padding: 0; }
.i6v9-side li {
  padding: 9px 0; font-size: 14.5px; font-weight: 300; line-height: 1.45;
  color: rgba(255,255,255,.78); border-bottom: 1px solid rgba(255,255,255,.14);
}
.i6v9-side li:last-child { border-bottom: none; }
.i6v9-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); font-size: 13px; line-height: 1.55; color: var(--fam-200); }
@media (min-width: 761px) {
  .i6v9-n { font-size: 34px; }
  .i6v9-item h3 { font-size: 19px; }
}
@media (min-width: 941px) {
  .i6v9 { grid-template-columns: minmax(0,1fr) minmax(0,360px); gap: 64px; align-items: start; }
  .i6v9-side { position: sticky; top: 110px; }
}


/* ==========================================================================
   DESIGN 10 — TYPE-LED CASE INDEX
   No boxes: each case opened by a short gradient rule, headline + line;
   secondaries as one quiet run; the control as the final word. Measure
   capped for reading.
   ========================================================================== */
.i6v10 { max-width: 900px; }
.i6v10-items { margin-top: 34px; }
.i6v10-item { padding: 22px 0 24px; }
.i6v10-item::before { content: ""; display: block; width: 32px; height: 2px; background: var(--fam-grad); margin-bottom: 16px; }
.i6v10-item h3 {
  font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; line-height: 1.25;
  letter-spacing: -.015em; color: var(--c-ink); margin: 0 0 8px;
}
.i6v10-item p { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--c-muted); margin: 0; max-width: 62ch; }
.i6v10-secrun { margin: 18px 0 0; padding-top: 24px; border-top: 1px solid var(--c-line); font-size: 15px; font-weight: 300; line-height: 1.8; color: #323232; }
.i6v10-secrun b { font-weight: 700; color: var(--c-ink); }


/* ==========================================================================
   DESIGN 11 — WATERMARK NUMERAL CARDS  (new palette round, 2026-08-04)
   The owner-approved Solutions-hub numeral-watermark look, re-authored
   fresh: white cards, neutral borders, a huge --fam-num numeral behind
   each case. Cards are not links — no hover choreography.
   ========================================================================== */
.i6v11-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.i6v11-card {
  position: relative; overflow: hidden;
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 20px 20px 46px; background: #fff;
}
.i6v11-card h3 { position: relative; z-index: 1; font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 8px; }
.i6v11-card p { position: relative; z-index: 1; font-size: 14px; font-weight: 300; line-height: 1.55; color: #323232; margin: 0; }
.i6v11-wm {
  position: absolute; right: 4px; bottom: -12px; z-index: 0;
  font-size: 92px; font-weight: 800; line-height: 1;
  letter-spacing: -.05em; color: var(--fam-num);
  font-variant-numeric: tabular-nums; user-select: none;
}
.i6v11-sec { margin-top: 30px; }
@media (min-width: 561px) {
  .i6v11-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
}
@media (min-width: 1100px) {
  .i6v11-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 12 — DUOTONE BRIEF PANEL  (new palette round, 2026-08-04)
   Design 9's two-register idea in the family's own colour: a solid
   --fam-700 panel (square corners — a surface, not a card) carries brief,
   secondaries and the control in white; primaries run as a white ledger
   beside it. Deliberately static — no sticky, no navy.
   ========================================================================== */
.i6v12 { display: grid; gap: 30px; }
.i6v12-claim { background: var(--fam-700); color: #fff; padding: 28px 24px 30px; align-self: start; }
.i6v12-claim .i6-eyebrow { color: var(--fam-100); }
.i6v12-claim .i6-h2 { color: #fff; }
.i6v12-claim .i6-lede { color: rgba(255,255,255,.82); margin-top: 16px; }
.i6v12-seccap { font-size: 15px; font-weight: 700; color: #fff; margin: 24px 0 4px; }
.i6v12-seclist { list-style: none; margin: 0; padding: 0; }
.i6v12-seclist li {
  padding: 10px 2px; font-size: 14.5px; font-weight: 300; line-height: 1.45;
  color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.18);
}
.i6v12-seclist li:last-child { border-bottom: none; }
.i6v12-claim .i6-control--dark { margin-top: 18px; }
.i6v12-row { padding: 16px 0 18px; border-bottom: 1px solid var(--c-line); }
.i6v12-row:first-child { padding-top: 0; }
.i6v12-row:last-child { border-bottom: none; }
.i6v12-row h3 { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--c-ink); margin: 0; }
.i6v12-row p { font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232; margin: 5px 0 0; }
@media (min-width: 941px) {
  .i6v12 { grid-template-columns: minmax(0,380px) minmax(0,1fr); gap: 0; align-items: start; }
  .i6v12-claim { padding: 34px 30px 36px; }
  .i6v12-body { padding-left: 56px; }
  .i6v12-row h3 { font-size: 18px; }
}


/* ==========================================================================
   DESIGN 13 — TINTED CHECKERBOARD  (new palette round, 2026-08-04)
   The palette as structure: cells alternate white and --fam-tint in a true
   checkerboard — no borders, rules or radius; the tint is the grid. The
   nth-child resets use :nth-child(n) so specificity ties resolve by order
   at each breakpoint.
   ========================================================================== */
.i6v13-grid { display: grid; grid-template-columns: 1fr; }
.i6v13-cell { padding: 20px 18px 22px; background: #fff; }
.i6v13-cell:nth-child(odd) { background: var(--fam-tint); }
.i6v13-cell h3 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 7px; }
.i6v13-cell p { font-size: 14px; font-weight: 300; line-height: 1.55; color: #323232; margin: 0; }
.i6v13-sec { margin-top: 30px; }
@media (min-width: 561px) {
  .i6v13-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .i6v13-cell:nth-child(n) { background: #fff; }
  .i6v13-cell:nth-child(4n+1), .i6v13-cell:nth-child(4n) { background: var(--fam-tint); }
}
@media (min-width: 1100px) {
  .i6v13-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .i6v13-cell:nth-child(n) { background: #fff; }
  .i6v13-cell:nth-child(8n+1), .i6v13-cell:nth-child(8n+3),
  .i6v13-cell:nth-child(8n+6), .i6v13-cell:nth-child(8n) { background: var(--fam-tint); }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .i6v1-row, .i6v1-n, .i6v2-card, .i6v3-row, .i6v4-cell, .i6v7-card { transition: none; }
  .i6v2-card:hover, .i6v7-card:hover { transform: none; }
  .i6v7-track { scroll-behavior: auto; scroll-snap-type: none; }
}