/* ═══════════════════════════════════════════════════════════
   Vākio - Product Page Styles
   Requires: design-system.css, components.css
   ═══════════════════════════════════════════════════════════ */

/* ── PAGE LAYOUT: reserved two-column grid ────────────────────
   <main id="main" class="vk-layout"> has exactly two direct
   children: .vk-content (the hero + all five .vk-panel sections,
   unchanged internally) and .vk-onthis (the "On this page" nav -
   full rules far below, near the end of this file). This grid is
   what makes the rail's space a genuine reservation rather than a
   floating overlay whose clearance has to be calculated per
   viewport width - see the long comment at .vk-onthis for the
   history of why the old position:fixed approach was replaced.

   minmax(0,1fr) on .vk-content's track (not a bare 1fr) is
   load-bearing: a bare `1fr` track's automatic minimum is `auto`
   (its content's min-content size) - the classic CSS Grid
   "blowout" gap, where sufficiently wide content can grow a bare
   1fr track past its fair share and into a sibling track.
   minmax(0,1fr) removes that automatic minimum, hard-capping
   .vk-content's track at the grid's actual available space
   regardless of what renders inside it. Paired with min-width:0 on
   .vk-content itself (the grid item, not just the track - grid
   items also default to min-width:auto, a second, independent
   source of the same blowout risk), this means: if anything inside
   .vk-content is ever wider than its track, it overflows/wraps/
   scrolls WITHIN that track using ordinary CSS overflow behavior -
   it does not, and structurally cannot, widen the track into
   .vk-onthis's reserved space. That is the whole guarantee: overlap
   is impossible by construction, not avoided by arithmetic.

   Below 1100px (this page's own existing .vk-moat-grid / .vk-ledger
   breakpoint, not an invented number) the grid collapses to a
   single column and .vk-onthis switches to position:fixed as a
   compact bottom dot strip, taking it out of the grid's flow
   entirely - see the @media block at .vk-onthis.

   SOFT-HIDDEN 2026-09-19: the rail (.vk-onthis, in index.html) is
   currently commented out, per explicit user instruction - a reserved
   190px second column with nothing in it would just be permanent dead
   space on the right of the page, so the two-column template above
   was collapsed to one column to match. Restoring the rail markup
   means restoring the two-column template here too (the block above
   documents its original reasoning and is left intact for that). */
.vk-layout{display:grid;grid-template-columns:minmax(0,1fr)}
.vk-content{grid-column:1;min-width:0}

/* ── VAKIO HERO ───────────────────────────────────────────── */
/* .vk-hero is intentionally full-bleed (min-height:100vh, no max-width)
   so its ::before radial gradient washes the whole viewport - same
   full-bleed-section / capped-inner-content split every other panel on
   this page already uses (.vk-panel is full-bleed, .vk-panel-inner
   carries max-width:var(--max-w)+sp-10 padding). .vk-hero-inner is this
   hero's .vk-panel-inner equivalent - it caps and centers the hero's
   content within .vk-content's own grid track (see .vk-layout at the
   top of this file), same as every other section.

   .vk-hero-inner is a SIDE-BY-SIDE two-column grid (2026-09-15,
   reverted the same day from a brief single-column stack): .vk-hero-left
   (wordmark, tags, pills, tagline, CTAs) sits beside .vk-hero-right (the
   Evidence Ledger), matching the design review's original hero
   composition. This was stacked earlier the same day on the reasoning
   that a nested hero-internal grid would compete for horizontal space
   with the "On this page" rail - but that reasoning is now moot: the
   rail is its own permanently reserved 190px column in .vk-layout (see
   the top of this file), not a floating overlay, so it was never
   actually contending with the hero's internal layout. The rail lives
   entirely outside .vk-content; nothing inside .vk-hero-inner needs to
   negotiate space with it. Stacking only ever solved a problem the
   rail's grid rebuild had already solved at a higher level - it just
   left dead whitespace beside the hero text where the Ledger used to
   sit. Do not re-propose stacking these two for rail-competition
   reasons; the only place they still stack is the 900px breakpoint
   below, and that's an ordinary narrow-viewport degradation, not a
   rail-clearance fix. */
.vk-hero{min-height:100vh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + var(--abar-h));
  position:relative;overflow:hidden}
.vk-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 70% at 85% 45%,rgba(0,180,162,.05),transparent);
  pointer-events:none}
/* Top padding cut from var(--sp-16) to var(--sp-8) (2026-09-18) - matches the
   same var(--sp-8) top-of-panel gap already used for Roadmap/Request Access
   below (see the Hub Panel Consolidation note in CLAUDE.md), so the gap
   under the fixed header no longer reads as far larger than every other
   inter-section gap on the page.
   Bottom padding cut twice more, 2026-09-19, per two explicit user
   follow-ups to close the gap before "Roadmap" specifically: var(--sp-16)
   (4rem) -> var(--sp-8) (2rem) -> var(--sp-2) (.5rem). Only this bottom
   value is touched each time, never .vk-panel's own top padding below
   (shared with the Roadmap -> Request Access gap, never flagged) - total
   gap is now .5rem+2rem=40px, down from the original 96px. */
.vk-hero-inner{width:100%;max-width:var(--max-w);margin:0 auto;padding:var(--sp-8) var(--sp-10) var(--sp-2);
  display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start;gap:var(--sp-8);
  position:relative;z-index:2}

/* minmax(0,1fr) on the left track (not a bare 1fr) is the same
   blowout-prevention pattern as .vk-layout above: it stops long,
   unbreakable hero text from ever forcing the Ledger's 380px column
   narrower than its own content needs. min-width:0 on .vk-hero-left
   closes the matching grid-item-level default (min-width:auto). */
.vk-hero-left{width:100%;min-width:0}
.vk-hero-right{width:100%;min-width:0}
/* .vk-hero-inner is align-items:start (not center), so by default this
   column's top would land at the very top of .vk-hero-left - level
   with the Vākio wordmark, well above the "Built for" capsule grid.
   This margin-top instead lines the video card's top edge up with the
   top of the first capsule row ("CHRO & Heads of HR" / "Compliance &
   Internal Audit"), per explicit user request/screenshot - it's the
   measured height of everything in .vk-hero-left that renders above
   .vk-cap-grid (wordmark + Hindi tagline + "For Organizations" tag +
   the "Built for" label and its margins). Revisit this value if any
   of that preceding content's copy or spacing changes.

   Scoped to `.vk-hero-inner .vk-hero-right` (the HUB's hero only) -
   NOT the bare `.vk-hero-right` class, because every /for/<audience>/
   spoke page's hero ALSO uses the `.vk-hero-right` class name (inside
   its own `.spoke-hero-inner`, a different container) to wrap its
   Evidence Ledger. An unscoped rule here was leaking this hub-specific
   235px offset onto every spoke's ledger too, breaking their own
   tag/ledger top-alignment fix in spoke.css - caught 2026-09-19 via a
   user screenshot showing the spoke ledger pushed far down out of
   alignment. */
.vk-hero-inner .vk-hero-right{margin-top:14.7rem}

.vk-wordmark{font-family:var(--font-vakio);font-size:clamp(2.5rem,4vw,3.5rem);font-weight:700;
  color:var(--text-1);line-height:1;margin:0 0 .2rem 0;letter-spacing:-.01em}
.vk-hindi{font-family:var(--font-hindi);font-size:var(--text-sm);font-weight:500;
  color:var(--vk2);letter-spacing:.04em;margin-bottom:.6rem}

/* Brand statement row (2026-09-19) - runs PARALLEL to the wordmark, not
   stacked under it, per explicit user request/design review. A
   horizontal row: the wordmark+Hindi block, a vertical teal-to-gold
   rule standing IN the gap between them as the "padding" itself
   (rather than just spacing - echoes both brand accents already on
   this page), and .vk-tagline running alongside, flowing all the way
   to the right edge of .vk-hero-left (up to the video card's column)
   rather than being capped to a narrow measure. At that column's
   actual width, .vk-tagline's original --text-lead size only ever
   wrapped to 4 lines no matter how wide it ran, so it's set to
   var(--text-sm) here specifically - that brings it to 3 lines at a
   height that closely matches the wordmark+Hindi-tagline block beside
   it (measured via getBoundingClientRect during the design review).
   Falls back to a stacked layout with a horizontal rule below 700px,
   where there isn't room for a real second column beside the
   wordmark. */
.vk-brand-row{display:flex;align-items:center;gap:1.75rem;margin-bottom:1.75rem}
.vk-brand-block{flex-shrink:0}
.vk-brand-block .vk-wordmark,.vk-brand-block .vk-hindi{margin-bottom:0}
.vk-hero-rule{flex-shrink:0;width:2px;align-self:stretch;border-radius:2px;
  background:linear-gradient(180deg,var(--vk),var(--vk2))}
.vk-tagline{flex:1;min-width:220px;font-size:var(--text-sm);color:var(--text-2);
  line-height:1.7;margin:0}
@media(max-width:700px){
  .vk-brand-row{flex-direction:column;align-items:flex-start;gap:1rem}
  .vk-hero-rule{width:2.75rem;height:3px;align-self:auto;
    background:linear-gradient(90deg,var(--vk),var(--vk2))}
}

/* Compliance diagram hero visual */
.vk-hero-vis{width:340px;display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}
.vk-vis-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--vk);margin-bottom:.25rem}
.vk-vis-row{display:flex;align-items:center;gap:.5rem}
.vk-vis-doc{flex:1;background:var(--bg-c);border:1px solid var(--vk-b);border-radius:var(--radius-md);
  padding:.5rem .75rem;font-size:var(--text-xs);color:var(--text-2);display:flex;align-items:center;gap:.4rem}
.vk-vis-doc-icon{font-size:1rem;flex-shrink:0}
.vk-vis-arrow{width:20px;flex-shrink:0;text-align:center;color:var(--vk);font-size:.8rem}
.vk-vis-engine{background:linear-gradient(135deg,var(--vk),var(--vk2));border-radius:var(--radius-lg);
  padding:.65rem var(--sp-4);text-align:center;box-shadow:0 0 28px var(--vk-g);
  animation:engine-pulse 3s ease-in-out infinite;font-size:1.4rem}
@keyframes engine-pulse{0%,100%{box-shadow:0 0 28px var(--vk-g)}50%{box-shadow:0 0 48px rgba(0,180,162,.45)}}
.vk-vis-outputs{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;flex:1}
.vk-vis-out{background:var(--bg-c);border-radius:var(--radius-md);padding:.45rem .6rem;
  font-size:.68rem;font-weight:600;display:flex;align-items:center;gap:.3rem}
.vk-vis-out.vid{border:1px solid rgba(0,180,162,.2);color:var(--vk-l)}
.vk-vis-out.quiz{border:1px solid rgba(196,154,60,.2);color:var(--vk2)}
.vk-vis-out.path{border:1px solid rgba(232,117,106,.15);color:var(--rn-l)}
.vk-vis-out.audit{border:1px solid rgba(201,168,76,.2);color:var(--gold-l)}

/* ── VAKIO TAB CONTENT SECTIONS ───────────────────────────── */
.vk-section{padding:var(--sp-10) 0}

/* Sector grid */
.sector-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin-bottom:2.75rem}
.sector-card{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-lg);
  padding:1.6rem 1.4rem;display:flex;align-items:flex-start;gap:var(--sp-4);min-width:0;
  transition:transform var(--ease-base),border-color var(--ease-base),box-shadow var(--ease-base)}
.sector-card:hover{transform:translateY(-3px);border-color:var(--vk-b);box-shadow:var(--shadow-vk)}
.sector-icon{font-size:2.2rem;flex-shrink:0;margin-top:.05rem}
.sector-name{font-size:var(--text-base);font-weight:600;color:var(--text-1);margin-bottom:.35rem}
.sector-acts{font-size:var(--text-sm);color:var(--vk-l);line-height:1.55}

/* Act badges */
.acts-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.75rem}
.act-badge{display:flex;align-items:center;gap:.38rem;background:var(--bg-c);
  border:1px solid var(--vk-b);border-radius:var(--radius-md);
  padding:.42rem .85rem;font-size:.75rem;font-weight:600;color:var(--vk-l);
  transition:all var(--ease-base)}
.act-badge:hover{background:var(--vk-d);box-shadow:0 4px 14px var(--vk-g)}
.act-dot{width:6px;height:6px;background:var(--vk);border-radius:50%;flex-shrink:0}

/* Pipeline */
.pipeline{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-xl);
  padding:var(--sp-8);margin-bottom:2.75rem;position:relative;overflow:hidden}
.pipeline::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--vk),var(--vk2))}
.pipe-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vk);margin-bottom:1.75rem}
.pipe-flow{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;align-items:center}
.pipe-step{text-align:center;padding:var(--sp-4) .5rem}
.pipe-icon{width:72px;height:72px;border-radius:50%;margin:0 auto .85rem;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  transition:transform var(--ease-base)}
.pipe-step:hover .pipe-icon{transform:scale(1.08)}
.pipe-step:nth-child(1) .pipe-icon{background:rgba(0,180,162,.08);border:1px solid var(--vk-b)}
.pipe-step:nth-child(3) .pipe-icon{background:rgba(196,154,60,.08);border:1px solid rgba(196,154,60,.25)}
.pipe-step:nth-child(5) .pipe-icon{background:rgba(0,180,162,.08);border:1px solid var(--vk-b)}
.pipe-title{font-size:var(--text-base);font-weight:600;color:var(--text-1);margin-bottom:.35rem}
.pipe-sub{font-size:var(--text-sm);color:var(--text-2);line-height:1.55}
.pipe-arrow{display:flex;align-items:center;justify-content:center;padding-bottom:1.5rem}
.pipe-arrow svg{width:40px;height:16px;overflow:visible}
.pipe-tags{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:.5rem}
.pipe-tag{font-size:var(--text-xs);padding:.15rem .5rem;border-radius:var(--radius-pill);
  background:var(--vk-d);color:var(--vk-l);border:1px solid var(--vk-b)}

/* KAEP vault (IP abstraction) */
.kaep-wrap{background:var(--bg-c);border:1px solid var(--vk-b);border-radius:var(--radius-xl);
  padding:var(--sp-8);position:relative;overflow:hidden}
.kaep-wrap::before{content:'';position:absolute;top:0;right:0;width:45%;height:100%;
  background:radial-gradient(ellipse at top right,var(--vk-d),transparent 70%);pointer-events:none}
.kaep-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vk);margin-bottom:.3rem;position:relative}

.vault-hdr{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--sp-6);flex-wrap:wrap;gap:var(--sp-4)}
.vault-n{font-family:var(--font-display);font-size:5rem;font-weight:700;
  color:var(--vk);line-height:1;text-shadow:0 0 40px rgba(0,180,162,.3)}
.vault-nl{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vk-l);line-height:1.45;margin-left:.35rem}
.vault-nl em{font-style:normal;font-size:.6rem;font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--text-3);display:block;margin-top:.2rem}
.vault-seal{display:flex;align-items:center;gap:.65rem;background:rgba(0,180,162,.06);
  border:1px solid var(--vk-b);border-radius:var(--radius-lg);padding:.7rem 1.1rem}
.vault-seal-icon{font-size:1.3rem;flex-shrink:0}
.vault-seal-t{font-size:var(--text-sm);font-weight:700;color:var(--vk-l);letter-spacing:.04em;line-height:1.55}

.kaep-diagram{display:grid;grid-template-columns:1fr 60px 1fr;gap:var(--sp-4);align-items:start}
.kaep-inputs{display:flex;flex-direction:column;gap:.35rem;position:relative}
.ki{display:flex;align-items:center;gap:.55rem;background:rgba(0,180,162,.06);
  border:1px solid rgba(0,180,162,.12);border-radius:var(--radius-md);
  padding:.45rem .75rem;transition:background var(--ease-base),border-color var(--ease-base)}
.ki:hover{background:rgba(0,180,162,.12);border-color:rgba(0,180,162,.25)}
.ki-n{width:18px;height:18px;background:var(--vk-d);border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:.6rem;font-weight:700;
  color:var(--vk);flex-shrink:0;border:1px solid var(--vk-b)}
.ki-t{font-size:var(--text-base);color:var(--text-2)}
.ki-t strong{color:var(--text-1);font-weight:600}

.ki.vis{border-color:var(--vk-b);background:rgba(0,180,162,.1)}
.ki.dim{opacity:.5}
.ki.half{opacity:.28;filter:blur(1.5px);user-select:none;pointer-events:none}
.ki.blr{opacity:.14;filter:blur(4px);user-select:none;pointer-events:none}

.vault-sealed{position:relative;overflow:hidden;border-radius:var(--radius-md)}
.vault-overlay{position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 0%,var(--bg-c) 52%);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.25rem;pointer-events:none}
.vault-lock{display:flex;align-items:center;gap:.65rem;background:var(--bg-c);
  border:1px solid var(--vk-b);border-radius:var(--radius-lg);padding:.7rem 1.25rem;
  box-shadow:0 4px 18px rgba(0,180,162,.14);pointer-events:all}
.vault-lock-count{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--vk);line-height:1}
.vault-lock-sub{font-size:.64rem;color:var(--text-3);margin-top:.15rem}

.kaep-engine-col{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.kaep-engine{width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--vk),var(--vk2));
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  box-shadow:0 0 28px var(--vk-g);animation:engine-pulse 3s ease-in-out infinite}
.kaep-arr{width:1px;height:28px;background:var(--vk-b);position:relative}
.kaep-arr::after{content:'▼';position:absolute;bottom:-10px;left:50%;
  transform:translateX(-50%);font-size:.5rem;color:var(--vk)}

.kaep-outputs{display:flex;flex-direction:column;gap:.5rem}
.ko{display:flex;align-items:center;gap:.55rem;border-radius:var(--radius-md);
  padding:.7rem .85rem;border:1px solid;min-width:0}
.ko.vid{background:rgba(0,180,162,.08);border-color:rgba(0,180,162,.2)}
.ko.quiz{background:rgba(196,154,60,.08);border-color:rgba(196,154,60,.2)}
.ko.path{background:rgba(232,117,106,.06);border-color:rgba(232,117,106,.15)}
.ko.audit{background:rgba(201,168,76,.08);border-color:rgba(201,168,76,.2)}
.ko-icon{font-size:1.1rem;flex-shrink:0}
.ko-t{font-size:var(--text-base);font-weight:600;color:var(--text-1)}
.ko-sub{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;display:block}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:900px){
  /* Narrow-viewport degradation only - not a rail-clearance fix (see
     the comment at .vk-hero-inner above). Below this width the
     side-by-side hero grid no longer has room for a 380px Ledger
     column next to readable hero text, so it falls back to the same
     stacked layout every other hero-adjacent diagram on this page
     already collapses to at 900px (pipe-flow, kaep-diagram). Reuses
     the base rule's gap:var(--sp-8) - only display/direction/align
     need overriding here. .vk-hero-inner .vk-hero-right's margin-top
     (added to top-align the video card with the capsule grid in the
     side-by-side layout) is reset here - stacked below .vk-hero-left,
     it should just follow directly with the ordinary gap, not an
     extra offset meant for a completely different geometry. */
  .vk-hero-inner{display:flex;flex-direction:column;align-items:flex-start}
  .vk-hero-inner .vk-hero-right{margin-top:0}
  .sector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pipe-flow{grid-template-columns:1fr;gap:1.25rem}
  .pipe-arrow{transform:rotate(90deg);min-height:48px}
  .kaep-diagram{grid-template-columns:1fr;gap:1.5rem}
  .kaep-engine-col{flex-direction:row;justify-content:center}
  .kaep-arr{width:28px;height:1px}
  .kaep-arr::after{content:'▶';bottom:auto;top:50%;left:auto;right:-10px;transform:translateY(-50%)}
}
@media(max-width:600px){
  .vk-hero-inner{padding:var(--sp-8) var(--sp-6) var(--sp-12)}
  .sector-grid{grid-template-columns:minmax(0,1fr)}
  .vault-n{font-size:3.5rem}
  .vault-hdr{flex-direction:column;gap:.75rem}
}

/* ── Priority 4: font-size floors ──────────────────────────── */
@media(max-width:480px){
  .pipe-sub{font-size:.8125rem}
  .vault-seal-t{font-size:.8125rem}
}

/* === Migrated from inline <style> block === */

/* ── VAKIO PAGE-SPECIFIC ──────────────────────────────────── */
/* The former sticky horizontal tab bar (.vk-tab-bar / .vk-tab-list /
   #vkTabNav) has been removed outright - it visually read as a
   pill/underline tab strip, which is exactly what Direction A was
   meant to retire. The "On this page" rail (below, .vk-onthis) is
   now the page's only nav surface, and it is position:fixed, so it
   contributes no in-flow height - .vk-panel's scroll-margin-top only
   needs to clear the fixed site header, not any page chrome. */
.vk-panel{padding:var(--sp-8) 0;
  scroll-margin-top:calc(var(--nav-h) + var(--abar-h) + .75rem)}
.vk-panel-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-10)}

.sec-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--vk);margin-bottom:.65rem}
.sec-title{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.2rem);
  font-weight:600;color:var(--text-1);letter-spacing:-.015em;line-height:1.2;margin-bottom:1rem}
.sec-sub{font-size:var(--text-md);color:var(--text-2);line-height:1.75;
  max-width:680px;margin-bottom:2.75rem}

/* Compliance pills */
.vk-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--sp-6)}
.vk-pill{font-size:var(--text-xs);font-weight:700;padding:.2rem .7rem;
  border-radius:var(--radius-pill);background:var(--vk-d);color:var(--vk-l);
  border:1px solid var(--vk-b);letter-spacing:.04em}

/* Moat cards */
.vk-moat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-10)}
.vk-moat{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-xl);
  padding:1.75rem;position:relative;overflow:hidden;min-width:0;
  transition:border-color var(--ease-base),box-shadow var(--ease-base)}
.vk-moat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--vk),transparent);opacity:0;transition:opacity var(--ease-base)}
.vk-moat:hover{border-color:var(--vk-b);box-shadow:var(--shadow-vk)}
.vk-moat:hover::before{opacity:1}
.vk-moat-num{font-family:var(--font-display);font-size:3.2rem;font-weight:700;
  color:var(--vk-d);line-height:.9;position:absolute;top:.85rem;right:1rem;
  -webkit-text-stroke:1px var(--vk-b);pointer-events:none;z-index:0}
.vk-moat-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;
  color:var(--vk-l);margin-bottom:.4rem;padding-right:3.25rem;position:relative;z-index:1}
.vk-moat-desc{font-size:var(--text-base);color:var(--text-2);line-height:1.65;position:relative;z-index:1}

/* Pipeline section - direct children are plain, unclassed <div>s in the
   markup (see index.html), so the item-level min-width:0 half of the
   blowout fix is scoped via a child combinator here instead of a new
   class. */
.pipe-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-12);
  align-items:start;margin-bottom:3.5rem}
.pipe-intro>div{min-width:0}
.pipe-claim{font-family:var(--font-display);font-size:clamp(1.4rem,2.5vw,2rem);
  font-weight:600;color:var(--text-1);line-height:1.3;margin-bottom:1rem}
.pipe-quote{font-family:var(--font-display);font-style:italic;font-size:var(--text-md);
  color:var(--vk-l);border-left:2px solid var(--vk-b);padding-left:1.2rem;
  line-height:1.6;margin:0}

/* KAEP intro */
.kaep-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-8);
  align-items:center;margin-bottom:3rem}
.kaep-text{}

/* Request Access */
/* min-height cut 480px -> 260px and top/bottom padding cut 4rem -> 2rem,
   2026-09-19, per explicit user request/screenshot flagging the large
   empty band above the "Limited Early Access" tag - with this much
   content (tag, headline, sub-copy, sectors, buttons, info box, fine
   print) the old min-height plus centered flex content was manufacturing
   dead space at top and bottom that padding alone wouldn't explain.
   Left/right padding (2rem) is unrelated to this ask. */
.vk-cta-wrap{min-height:260px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  background:linear-gradient(135deg,var(--bg),var(--vk-gl),rgba(196,154,60,.03),var(--bg));
  border-radius:var(--radius-2xl);border:1px solid var(--vk-b);
  padding:2rem 2rem;position:relative;overflow:hidden}
.vk-cta-wrap::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,var(--vk-gl),transparent);
  pointer-events:none}
.vk-cta-headline{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.4rem);
  font-weight:600;color:var(--text-1);line-height:1.15;margin-bottom:1rem;position:relative}
.vk-cta-sub{font-size:var(--text-base);color:var(--text-2);margin-bottom:.75rem;
  max-width:520px;position:relative;line-height:1.7}
.vk-cta-sectors{font-size:var(--text-sm);color:var(--vk-l);margin-bottom:2rem;
  position:relative;font-weight:600}
.vk-cta-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;position:relative}
.vk-cta-fine{font-size:var(--text-xs);color:var(--text-3);margin-top:1.25rem;
  letter-spacing:.04em;position:relative}

/* Competitor stripe */
.competitor-note{background:var(--bg-c);border:1px solid var(--b0);
  border-radius:var(--radius-lg);padding:1.5rem 1.75rem;margin-top:3rem;
  display:flex;align-items:flex-start;gap:1rem}
.competitor-note-icon{font-size:1.4rem;flex-shrink:0;margin-top:.1rem}
.competitor-note-text{font-size:var(--text-base);color:var(--text-2);line-height:1.65}
.competitor-note-text strong{color:var(--text-1)}

@media(max-width:1100px){
  .vk-moat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .vk-moat-grid{grid-template-columns:minmax(0,1fr)}
  .pipe-intro{grid-template-columns:minmax(0,1fr)}
  .kaep-intro{grid-template-columns:1fr}
}
@media(max-width:768px){
  .vk-panel-inner{padding:0 var(--sp-6)}
  .vk-panel{padding:3rem 0}
  .ko-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:480px){
  .vk-panel-inner{padding:0 var(--sp-5)}
  .ko-grid{grid-template-columns:minmax(0,1fr) !important}
}

/* ── Module Coverage by Wave ──────────────────────────────── */
.vk-wave-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.vk-wave-card--roadmap{background:linear-gradient(135deg,var(--bg-c),var(--vk-gl));
  border-style:dashed;border-color:var(--vk-b)}
.vk-wave-card--roadmap .vk-wave-n{color:var(--text-2)}
.vk-wave-card--roadmap .vk-mod-list li{color:var(--text-2);font-weight:400}
.vk-wave-card--roadmap .vk-mod-list li::before{content:'+';opacity:.7}
.vk-wave-card{background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-lg);
  padding:1.4rem 1.25rem;transition:border-color var(--ease-base),box-shadow var(--ease-base)}
.vk-wave-card:hover{border-color:var(--vk-b);box-shadow:var(--shadow-vk)}
.vk-wave-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  margin-bottom:.85rem;padding-bottom:.75rem;border-bottom:1px solid var(--b0)}
.vk-wave-n{font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--vk-l)}
.vk-wave-t{font-size:var(--text-sm);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.vk-mod-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}
.vk-mod-list li{font-size:var(--text-base);color:var(--text-1);font-weight:500;display:flex;gap:.5rem;align-items:baseline}
.vk-mod-list li::before{content:'›';color:var(--vk);flex-shrink:0;font-weight:700}
@media(max-width:900px){.vk-wave-grid{grid-template-columns:1fr}}

/* ── DPDP clocks strip ────────────────────────────────────── */
.vk-clocks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.vk-clock{background:var(--bg-c);border:1px solid var(--vk-b);border-radius:var(--radius-md);
  padding:.9rem .75rem;text-align:center;min-width:0;transition:border-color var(--ease-base)}
.vk-clock-v{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--vk-l);line-height:1.1}
.vk-clock-l{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin-top:.45rem;line-height:1.4}
@media(max-width:900px){.vk-clocks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.vk-clocks{grid-template-columns:minmax(0,1fr)}}

/* ── Responsive helpers for newly-added inline grids ─────── */
@media(max-width:768px){
  .vk-cwe-q{grid-template-columns:1fr !important}
  .vk-cwe-templates{grid-template-columns:repeat(2,1fr) !important}
  .vk-dpdp-hdr,.vk-dpdp-cell{padding:.5rem .65rem !important}
  .vk-dpdp-mid,.vk-dpdp-hdr-mid{padding:.4rem .35rem !important}
  .vk-dpdp-mid{font-size:.6rem !important;letter-spacing:.02em !important}
}
@media(max-width:480px){
  .vk-cwe-templates{grid-template-columns:1fr !important}
}

/* ── CWE four-template strip ──────────────────────────────── */
.vk-cwe-templates{display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--sp-3);margin-top:1.25rem}
.vk-cwe-tmpl{background:var(--bg);border:1px solid var(--vk-b);
  border-radius:var(--radius-md);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.vk-cwe-tmpl-h{font-size:var(--text-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vk-l);line-height:1.3}
.vk-cwe-tmpl-eg{font-size:var(--text-sm);color:var(--text-2);line-height:1.55}

/* ── KAEP output audience chip ────────────────────────────── */
.ko-aud{display:inline-block;font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);background:var(--bg);
  border:1px solid var(--b1);border-radius:var(--radius-pill);
  padding:.18rem .55rem;margin-top:.55rem;line-height:1.4}

/* ── DPDP bilateral attribute grid ──────────────────────── */
/* The middle "auto" track is deliberate (a small icon/label column sized
   to its own short content - not a blowout risk, unlike a bare 1fr). The
   two flanking 1fr tracks get the same minmax(0,1fr) + min-width:0 pair
   as every other nested grid audited 2026-09-15. */
.vk-dpdp-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  border:1px solid var(--vk-b);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg);margin-top:1.25rem}
.vk-dpdp-hdr,.vk-dpdp-cell,.vk-dpdp-seal{min-width:0}
.vk-dpdp-hdr{padding:.75rem 1.1rem;background:var(--vk-d)}
.vk-dpdp-hdr-mid{display:flex;align-items:center;justify-content:center;
  background:var(--bg-c);border-left:1px solid var(--vk-b);border-right:1px solid var(--vk-b);
  padding:.65rem .65rem;font-size:1.25rem}
.vk-dpdp-h{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;
  color:var(--vk-l);line-height:1.3}
.vk-dpdp-sub{font-size:var(--text-xs);color:var(--text-3);margin-top:.2rem;
  font-weight:600;letter-spacing:.03em}
.vk-dpdp-cell{padding:.6rem 1.1rem;border-top:1px solid var(--b1);
  display:flex;align-items:center;gap:.5rem;
  font-size:var(--text-xs);color:var(--text-1);line-height:1.45}
.vk-dpdp-cell::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--vk);flex-shrink:0}
.vk-dpdp-mid{display:flex;align-items:center;justify-content:center;text-align:center;
  border-top:1px solid var(--b1);border-left:1px solid var(--vk-b);border-right:1px solid var(--vk-b);
  padding:.5rem .6rem;font-size:var(--text-xs);font-weight:700;color:var(--vk);
  letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.vk-dpdp-seal{grid-column:1/-1;border-top:1px solid var(--vk-b);padding:.6rem 1rem;
  text-align:center;font-size:var(--text-xs);font-weight:700;color:var(--vk-l);
  background:linear-gradient(135deg,var(--vk-d),transparent,var(--vk-d));letter-spacing:.03em}

/* ── Reusable inline-block component classes ──────────────── */
.vk-mid-claim{font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.5rem);
  font-weight:600;color:var(--text-1);line-height:1.3;margin-bottom:.65rem}
.vk-mid-body{font-size:var(--text-base);color:var(--text-2);line-height:1.7;margin-bottom:1.25rem}
.vk-mini-title{font-family:var(--font-display);font-size:var(--text-base);font-weight:600;
  color:var(--vk-l);margin-bottom:.3rem}
.vk-mini-desc{font-size:var(--text-sm);color:var(--text-2);line-height:1.55;margin:0}
.vk-q-card-p{font-size:var(--text-base);color:var(--text-1);line-height:1.55;margin:0;font-weight:500}

/* ── Sector "why" line (under Acts list) ──────────────────── */
.sector-why{
  margin-top:.7rem;padding-top:.7rem;
  border-top:1px dashed var(--b0);
  font-size:var(--text-base);color:var(--text-2);line-height:1.6;
  font-style:italic;letter-spacing:.005em;
}

/* ── Category Architecture (Vākio in the Compliance Stack) ──────────────
   2x2 positioning map with a central Vākio chip at the intersection.
   Light hairline crosshairs make it read as a quadrant, not four cards. */
.vk-cat{margin-top:3rem;position:relative}
.vk-cat-h{
  font-family:var(--font-display);font-size:1.55rem;font-weight:700;
  color:var(--text-1);margin:0 0 .55rem;letter-spacing:-.01em;
}
.vk-cat-sub{
  font-size:var(--text-base);color:var(--text-2);line-height:1.65;
  max-width:720px;margin:0 0 1.75rem;
}
.vk-cat-map{position:relative}
.vk-cat-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr;
  gap:1px;background:var(--b1);
  border:1px solid var(--b1);border-radius:var(--radius-xl);
  overflow:hidden;position:relative;
}
.vk-cat-q{
  background:var(--bg-c);padding:1.5rem 1.6rem;
  display:flex;flex-direction:column;gap:.7rem;
  min-height:200px;min-width:0;position:relative;
  transition:background var(--ease-base);
}
.vk-cat-q:hover{background:var(--bg-b)}
.vk-cat-q-hdr{
  font-family:var(--font-display);font-size:var(--text-md);font-weight:600;
  color:var(--text-1);letter-spacing:-.005em;
}
.vk-cat-q-body{
  font-size:var(--text-base);color:var(--text-2);line-height:1.65;
  margin:0;
}
.vk-cat-q-tag{
  margin-top:auto;padding-top:.7rem;
  border-top:1px solid var(--b0);
  font-size:var(--text-xs);color:var(--text-1);font-weight:500;line-height:1.55;
}
.vk-cat-q-tag em{
  font-style:normal;font-weight:700;color:var(--vk-l);
  letter-spacing:.005em;
}
/* Padding adjustments so quadrant content does not collide with the centre chip */
.vk-cat-q--tl{padding-right:2.6rem;padding-bottom:2.2rem}
.vk-cat-q--tr{padding-left:2.6rem;padding-bottom:2.2rem}
.vk-cat-q--bl{padding-right:2.6rem;padding-top:2.2rem}
.vk-cat-q--br{padding-left:2.6rem;padding-top:2.2rem}

/* Centre Vākio chip sitting on the intersection */
.vk-cat-centre{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:linear-gradient(135deg,var(--vk),var(--vk-d));
  color:#fff;border-radius:var(--radius-lg);
  padding:.85rem 1.25rem;text-align:center;
  box-shadow:var(--shadow-vk),0 0 0 4px var(--bg-b);
  z-index:2;min-width:160px;
  pointer-events:none;
}
.vk-cat-centre-h{
  font-family:var(--font-display);font-size:1.1rem;font-weight:700;
  letter-spacing:-.005em;line-height:1.2;
}
.vk-cat-centre-s{
  font-size:var(--text-xs);font-weight:500;letter-spacing:.02em;
  margin-top:.25rem;opacity:.92;line-height:1.4;
}

/* VK-07: collapse to single column at 900px (matches the 2-col grid breakpoint).
   Vākio chip becomes a top banner. Hairline crosshairs not needed in stacked mode. */
@media(max-width:900px){
  .vk-cat-grid{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto;
  }
  .vk-cat-q,
  .vk-cat-q--tl,
  .vk-cat-q--tr,
  .vk-cat-q--bl,
  .vk-cat-q--br{
    padding:1.4rem 1.4rem;min-height:0;
  }
  .vk-cat-centre{
    position:static;transform:none;
    display:block;margin:0 0 1rem;
    box-shadow:var(--shadow-vk);
    padding:1rem 1.25rem;
  }
  .vk-cat-map{
    display:flex;flex-direction:column;
  }
  /* Re-order: chip banner first, then the stacked quadrants */
  .vk-cat-centre{order:0}
  .vk-cat-grid{order:1}
}

/* ── Upcoming / On Roadmap badge ──────────────────────────── */
.upcoming-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.18rem .65rem;border-radius:var(--radius-pill);
  font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(196,154,60,.12);color:var(--gold);
  border:1px solid rgba(196,154,60,.28);vertical-align:middle;
  line-height:1.4;flex-shrink:0;white-space:nowrap}
[data-theme="light"] .upcoming-badge{
  background:rgba(196,154,60,.10);color:var(--gold-l);border-color:var(--gold-g)}

/* ── VK-06a: DPDP bilateral grid - collapse auto column above 480px too ── */
@media(max-width:640px){
  .vk-dpdp-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .vk-dpdp-mid{
    grid-column:1;
    display:flex;flex-direction:row;flex-wrap:wrap;
    justify-content:center;gap:var(--sp-2);
    border-left:none;border-right:none;
    border-top:1px solid var(--b0);border-bottom:1px solid var(--b0);
    padding:var(--sp-4) 0;
    font-size:.8125rem !important
  }
}

/* ── VK-06: DPDP bilateral grid at 480px ─────────────────── */
@media(max-width:480px){
  .vk-dpdp-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .vk-dpdp-mid{
    grid-column:1;
    display:flex;flex-direction:row;flex-wrap:wrap;
    justify-content:center;gap:var(--sp-2);
    border-left:none;border-right:none;
    border-top:1px solid var(--b0);border-bottom:1px solid var(--b0);
    padding:var(--sp-4) 0;
    font-size:.8125rem !important
  }
}

/* ── VK-14: Request Access CTA stack + centre on 360px ────── */
@media(max-width:480px){
  .vk-cta-btns{flex-direction:column;align-items:center}
  .vk-cta-btns .btn{width:100%;max-width:320px}
  .vault-n{font-size:2.8rem}
}

/* ── Priority 4: font-size floors on mobile ──────────────── */
@media(max-width:480px){
  .vk-clock-l{font-size:var(--text-xs)}
  .pipe-sub{font-size:var(--text-sm)}
  .ko-sub{font-size:var(--text-sm)}
  .vault-seal-t{font-size:.8125rem}
}

/* ── Migrated from style="" attributes ──────────────────────── */

/* Hero: tag sits under the Vākio wordmark/Hindi tagline (2026-09-18,
   moved from above the wordmark) - a small top margin separates it from
   the tagline above, a larger bottom margin separates the "For
   Organizations" identity from the "Built for <persona>" capsules below. */
.vk-hero-tag{margin:.5rem 0 1.5rem}

/* Hero: "Built for" persona capsules (2026-09-16, replaces the former
   .vk-audiences plain-text link line - see the agent-memory note on
   this build). One capsule per audience-routed /for/<audience>/ spoke,
   sized as a real click target, not an inline link. */
.vk-cap-label{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin:1.1rem 0 .85rem
}
.vk-cap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-bottom:1.6rem}
.vk-cap{
  display:flex;flex-direction:column;gap:.6rem;text-decoration:none;color:inherit;
  background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-lg);
  padding:1rem 1.1rem;transition:border-color var(--ease-base),box-shadow var(--ease-base),transform var(--ease-base)
}
/* Capsules are deliberately neutral/grey (2026-09-19) - the site's teal
   accent is reserved for actionable buttons (Request Access, Contact Us
   for Access, View Platform...) so a capsule never visually reads as
   "the same color as a button to press." This applies uniformly across
   all five capsules, including the DPO/Upcoming one - there is no
   longer a gold special-case for it here, only its badge's dashed
   border (below) marks it as different in kind. */
.vk-cap:hover{border-color:var(--b2);box-shadow:0 8px 28px rgba(0,0,0,.16);transform:translateY(-2px)}
.vk-cap:focus-visible{outline:2px solid var(--vk);outline-offset:3px}
/* The DPO capsule spans the full row rather than sharing a 2x2 cell -
   it is the only Upcoming persona, so isolating it as its own wide row
   reads as a deliberate status distinction, not a leftover odd tile. */
.vk-cap-wide{grid-column:1/-1}
.vk-cap-top{display:flex;align-items:flex-start;gap:.7rem}
.vk-cap-ico{
  width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-md);
  background:var(--b1);border:1px solid var(--b2);color:var(--text-2);
  display:flex;align-items:center;justify-content:center
}
.vk-cap-name{font-weight:700;font-size:.9rem;color:var(--text-1);line-height:1.3}
.vk-cap-status{
  margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;
  font-size:.62rem;font-weight:700;letter-spacing:.05em;color:var(--text-2);padding-top:2px
}
.vk-cap-dot{width:6px;height:6px;border-radius:50%;background:var(--text-3);box-shadow:0 0 0 3px var(--b1);flex-shrink:0}
/* DPO's "Upcoming" pill - grey like the rest of the capsule row, a
   dashed border (rather than a color) is what marks it as different in
   kind from the four LIVE personas. Distinct from the site-wide gold
   .upcoming-badge used in the Roadmap panel, which is a different
   surface and keeps its own accent. */
.vk-cap-badge{
  margin-left:auto;flex-shrink:0;font-size:.62rem;font-weight:700;letter-spacing:.03em;
  color:var(--text-2);background:var(--b1);border:1px dashed var(--b2);
  border-radius:var(--radius-pill);padding:.18rem .55rem
}
.vk-cap-hook{font-size:.78rem;color:var(--text-2);line-height:1.5;margin:0}
.vk-cap-go{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  font-size:.72rem;font-weight:600;color:var(--text-2);padding-top:2px
}
.vk-cap:hover .vk-cap-go{color:var(--text-1)}
@media(max-width:640px){
  .vk-cap-grid{grid-template-columns:1fr}
}

/* Hero diagram: directional label */
.vk-vis-dir{text-align:center;color:var(--vk);font-size:.8rem;padding:.25rem 0}

/* Hero diagram: engine label text */
.vk-vis-engine-label{font-size:1rem;font-weight:700;letter-spacing:.04em;
  font-family:var(--font-vakio);color:#fff}

/* Overview: Module coverage - section label top margin */
.sec-label--spaced{margin-top:3rem}

/* Overview: sec-sub with custom bottom margin */
.sec-sub--tight{margin-bottom:1.75rem}

/* Overview: POSH shipped card */
.vk-posh-shipped{
  background:var(--bg-c);border:1px solid var(--vk-b);
  border-radius:var(--radius-xl);padding:1.4rem 1.65rem;
  margin-bottom:1.5rem;display:flex;align-items:center;
  gap:1.25rem;flex-wrap:wrap
}
.vk-posh-shipped-left{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.vk-posh-shipped-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--vk-d);border:1px solid var(--vk-b);
  font-size:1.1rem;color:var(--vk-l);font-weight:700
}
.vk-posh-shipped-sub{
  font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vk-l)
}
.vk-posh-shipped-title{
  font-family:var(--font-display);font-size:1.18rem;font-weight:600;
  color:var(--text-1);line-height:1.2
}
.vk-posh-shipped-body{
  flex:1;min-width:0;word-break:break-word;
  font-size:var(--text-base);color:var(--text-2);line-height:1.6;margin:0
}

/* Overview: Wave grid top margin */
.vk-wave-grid--spaced{margin-bottom:2.75rem}

/* Pipeline: pipe-step icon variant (gold) */
.pipe-icon--gold{background:rgba(196,154,60,.08);border:1px solid rgba(196,154,60,.25)}

/* Pipeline: pipe-tag variant (gold) */
.pipe-tag--gold{background:rgba(196,154,60,.08);color:var(--vk2);border-color:rgba(196,154,60,.2)}

/* Pipeline: ko-grid 4-col */
.ko-grid--4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
/* Pipeline: ko-grid 5-col (adds the language-delivery item) - existing .ko-grid
   responsive overrides at tablet/mobile breakpoints already collapse this
   variant to 2-col/1-col generically, no new breakpoint rule needed */
.ko-grid--5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4)}

/* Pipeline/Audit: info card (generic reusable block) */
.vk-info-card{
  background:var(--bg-c);border:1px solid var(--vk-b);
  border-radius:var(--radius-xl);padding:1.75rem 1.85rem;margin-top:2.5rem
}
.vk-info-card--top15{margin-top:1.5rem}

/* Pipeline: sec-label row with upcoming badge */
.sec-label--flex{
  margin-bottom:.4rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap
}

/* Pipeline: CWE Q-card grid */
.vk-cwe-q{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:1rem}

/* Pipeline: CWE Q-card item */
.vk-cwe-q-item{
  background:var(--bg);border:1px solid var(--vk-b);
  border-radius:var(--radius-md);padding:.95rem 1rem
}

/* Pipeline: CWE Q-card icon */
.vk-cwe-q-icon{font-size:1.1rem;margin-bottom:.4rem}

/* Pipeline: CWE proof line */
.vk-cwe-proof{font-size:var(--text-sm);color:var(--vk-l);font-weight:600;letter-spacing:.02em;margin:0}

/* Pipeline: competitor note top margin variant */
.competitor-note--spaced{margin-top:2.5rem}

/* Audit: ko-grid 3-col */
.ko-grid--3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:2.5rem}

/* Audit: compliance auto-mapper pill container */
.vk-pill-row{display:flex;flex-wrap:wrap;gap:.5rem}

/* Audit: vk-mid-body with tighter bottom margin */
.vk-mid-body--mb115{margin-bottom:1.15rem}

/* Audit: vk-mid-body no margin */
.vk-mid-body--mb0{margin-bottom:0}

/* Audit: DPDP two-layer heading with baseline alignment */
.vk-dpdp-title-row{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;margin-bottom:.45rem}

/* Audit: vk-mid-claim tighter bottom */
.vk-mid-claim--mb85{margin-bottom:.85rem}

/* Audit: SCORM / BYOLMS card (uses neutral border) */
.vk-info-card--neutral{border-color:var(--b1)}

/* KAEP Engine: vault header flex row */
.vault-hdr-inner{display:flex;align-items:baseline;gap:.45rem}

/* KAEP Engine: vault seal span fine-print */
.vault-seal-fine{font-weight:400;color:var(--text-3);font-size:var(--text-xs);text-transform:none;letter-spacing:.02em}

/* KAEP Engine: KAEP schema card */
.kaep-schema-card{
  background:var(--bg-c);border:1px solid var(--vk-b);
  border-radius:var(--radius-xl);padding:1.75rem;
  display:flex;flex-direction:column;gap:1rem
}

/* KAEP Engine: KAEP schema bullet row */
.kaep-schema-row{display:flex;flex-direction:column;gap:.45rem}
.kaep-schema-item{display:flex;align-items:center;gap:.65rem;font-size:var(--text-base);color:var(--text-2)}
.kaep-schema-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kaep-schema-dot--vk{background:var(--vk)}
.kaep-schema-dot--vk2{background:var(--vk2)}
.kaep-schema-dot--rn{background:var(--rn)}
.kaep-schema-item strong{color:var(--text-1)}

/* KAEP Engine: moat note box */
.kaep-moat-note{
  background:var(--vk-d);border:1px solid var(--vk-b);
  border-radius:var(--radius-md);padding:.75rem 1rem;
  font-size:var(--text-sm);color:var(--text-2);margin-top:.25rem;line-height:1.6
}

/* KAEP Engine: KAEP italic claim */
.kaep-italic-claim{
  font-family:var(--font-display);font-style:italic;font-size:var(--text-md);
  color:var(--vk-l);border-left:2px solid var(--vk-b);padding-left:1rem;line-height:1.6
}

/* KAEP Engine: inverted kaep-arr (flipped) */
.kaep-arr--flip{transform:scaleY(-1)}

/* KAEP Engine: ko item with vk border (analytics output) */
.ko--vk-border{background:var(--bg-c);border:1px solid var(--vk-b)}

/* Request Access: tag top margin */
.vk-cta-tag{margin-bottom:1.5rem}

/* Request Access: early access info box */
.vk-early-access-box{
  margin-top:1.4rem;padding:1.1rem 1.25rem;
  background:var(--bg-c);border:1px solid var(--vk-b);
  border-radius:var(--radius-lg);text-align:left;
  max-width:640px;margin-left:auto;margin-right:auto
}
.vk-early-access-label{
  font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--vk-l);margin-bottom:.6rem
}
.vk-early-access-body{font-size:var(--text-base);color:var(--text-2);line-height:1.65;margin:0}

/* Modals: contact block */
.modal-contact-block{
  background:var(--bg-s);border:1px solid var(--b0);
  border-radius:10px;padding:1.2rem 1.4rem;margin-bottom:1.4rem
}
.modal-contact-name{color:var(--text-1)}
.modal-contact-email{color:var(--gold)}
.modal-contact-last{margin-bottom:0}
.modal-contact-links{
  display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;
  padding-top:1.1rem;border-top:1px solid var(--b0)
}

/* Modals: Vakio access inquiry note */
.modal-vk-inquiry-note{font-size:var(--text-sm);color:var(--text-2);line-height:1.6;margin-bottom:1rem}

/* Modals: privacy fine-print */
.modal-privacy-fine{margin-top:1.5rem;font-size:0.85em;opacity:0.7}

/* Modals: moat-overlay audit section top margin override */
.vk-moat-grid--audit{margin-top:1rem}

/* Pipeline: sec-label with smaller top spacing */
.sec-label--spaced-sm{margin-top:1.5rem;margin-bottom:.25rem}

/* Audit: DPDP clocks sec-label top spacing */
.sec-label--clocks{margin-top:1.25rem;margin-bottom:.25rem}

/* KAEP Engine: sec-title tighter bottom margin */
.sec-title--mb75{margin-bottom:.75rem}

/* KAEP Engine: intro paragraph */
.kaep-intro-body{
  font-size:var(--text-md);color:var(--text-2);
  line-height:1.75;max-width:500px;margin-bottom:1.5rem
}

/* Pipeline/Audit: pipe-intro body paragraph */
.pipe-intro-body{
  font-size:var(--text-md);color:var(--text-2);
  line-height:1.75;margin:0;max-width:480px
}

/* Audit: DPDP accent text (data fiduciary etc.) */
.vk-text-accent{color:var(--vk-l)}

/* Audit: DPDP body paragraph bottom margin */
.vk-dpdp-body{margin-bottom:1rem}

/* Audit: small pill variant */
.vk-pill--sm{font-size:.62rem}

@media(max-width:480px){
  .vk-tagline{font-size:var(--text-md)}
}

/* ── Design-review Exhibit 01 / Direction A, "The Ledger Opens"
   (2026-09-14): hero Evidence Ledger card. Retires the Round 5 IA
   rebuild's .vk-hero-prog 3-column flow diagram above - both
   illustrated the same three Programmes (POSH / DPDP / Policy
   Library) producing evidence; the Ledger shows that evidence
   directly (a live-styled audit-record feed) rather than the
   abstract Filed→Investigated→Evidenced flow, so keeping both
   would have been two redundant treatments of one hero claim.
   Card chrome (bg-c surface, vk-b border, radius-lg, shadow-vk)
   matches .vk-hero-prog-col / .vk-prog-legend for continuity.

   width:100% + max-width:380px (not a fixed 380px) serves both hero
   layouts .vk-hero-inner now uses (see the comment there): on the
   default side-by-side grid (>900px), the Ledger sits in a dedicated
   380px grid column and width:100% simply fills it exactly, so
   max-width:380px never actually clips anything there - the two
   values agree by construction. Below the 900px breakpoint, where the
   hero stacks and .vk-hero-right becomes an ordinary full-width flex
   item, max-width:380px is what stops the card from stretching to the
   full (much wider than 380px) mobile/tablet content width, keeping
   the same card proportions at every size instead of a fixed-pixel
   value that would either overflow a narrow phone or leave the card
   comically narrow inside a wide column. One rule, correct at every
   width, in both hero layouts - no breakpoint-specific width swap
   needed. */
.vk-ledger{width:100%;max-width:380px;flex-shrink:0;background:var(--bg-c);border:1px solid var(--vk-b);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-vk);overflow:hidden}
.vk-ledger-head{display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1rem;background:var(--bg-ch);border-bottom:1px solid var(--vk-b)}
.vk-ledger-title{font-family:var(--font-display);font-size:var(--text-md);font-weight:700;color:var(--text-1)}
.vk-ledger-live{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--text-xs);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vk-l)}
.vk-ledger-live-dot{width:7px;height:7px;border-radius:50%;background:var(--vk);
  animation:vkLedgerPulse 1.8s ease-in-out infinite}
@keyframes vkLedgerPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)}}
.vk-ledger-row{padding:.65rem 1rem;border-bottom:1px solid var(--b1)}
.vk-ledger-row:last-child{border-bottom:none}
.vk-ledger-row-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .5rem}
.vk-ledger-tag{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.03em;
  padding:.18rem .5rem;border-radius:var(--radius-pill);border:1px solid var(--b1);white-space:nowrap}
.vk-ledger-tag--posh{border-color:var(--vk-b);color:var(--vk-l);background:var(--vk-d)}
.vk-ledger-tag--dpdp{border-color:var(--gold-g);color:var(--gold-l);background:var(--gold-d)}
.vk-ledger-tag--policy{border-color:var(--b2);color:var(--text-2);background:var(--bg)}
.vk-ledger-status{font-size:var(--text-xs);font-weight:700;color:var(--text-1)}
.vk-ledger-time{margin-left:auto;font-size:var(--text-xs);color:var(--text-3)}
.vk-ledger-item{margin-top:.3rem;font-size:var(--text-xs);color:var(--text-2);line-height:1.45}
.vk-ledger-foot{display:flex;align-items:flex-start;gap:.4rem;padding:.8rem 1rem;
  font-size:var(--text-xs);font-style:italic;color:var(--text-3);line-height:1.55;
  background:var(--bg-c);border-top:1px solid var(--b1)}
.vk-ledger-foot-ico{flex-shrink:0;line-height:1.3}
/* Flex items default to min-width:auto, so a long run of text as the
   second flex child can refuse to shrink below its own intrinsic width
   and overflow/misfold instead of wrapping - surfaced 2026-09-16 when
   the CHRO spoke's longer, Programme-scoped disclosure line broke onto
   two ragged columns instead of wrapping normally. min-width:0 on the
   text's own wrapper is the standard fix. */
.vk-ledger-foot-text{min-width:0}

/* ── Hub video playlist ("Vākio in Action") ──────────────────────────
   Replaces the hub's Evidence Ledger in the hero's right column
   (2026-09-19) - .vk-ledger itself is untouched above, since every
   /for/<audience>/ spoke still renders its own audience-scoped Evidence
   Ledger via the same class. Card footprint (max-width, border, radius,
   shadow) intentionally matches .vk-ledger's so the hero's two-column
   grid doesn't need to change. Each row is sized to roughly the same
   footprint as one "Built for" capsule (icon/thumb + name + one line of
   supporting copy), not a full-size embedded player - three live
   YouTube iframes in the hero would be unnecessary third-party weight
   on first load, so each row is a real YouTube thumbnail + play badge
   that opens the video on YouTube in a new tab. */
.vk-vids{width:100%;max-width:380px;flex-shrink:0;background:var(--bg-c);border:1px solid var(--vk-b);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-vk);overflow:hidden}
.vk-vids-head{display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1rem;background:var(--bg-ch);border-bottom:1px solid var(--vk-b)}
.vk-vids-title{font-family:var(--font-display);font-size:var(--text-md);font-weight:700;color:var(--text-1)}
.vk-vids-count{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--text-xs);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vk-l)}
.vk-vids-list{display:flex;flex-direction:column;gap:.55rem;padding:.75rem}
.vk-vid{display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:inherit;
  background:var(--bg);border:1px solid var(--b1);border-radius:var(--radius-md);padding:.75rem .8rem;
  transition:border-color var(--ease-base)}
.vk-vid:hover{border-color:var(--vk-b)}
.vk-vid:hover .vk-vid-play{background:var(--vk);color:var(--bg)}
.vk-vid-top{display:flex;align-items:flex-start;gap:.7rem}
.vk-vid-thumb{position:relative;width:112px;height:63px;flex-shrink:0;overflow:hidden;
  border-radius:8px;border:1px solid var(--vk-b);background:#000}
.vk-vid-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vk-vid-num{position:absolute;top:4px;left:4px;width:17px;height:17px;border-radius:50%;
  background:rgba(6,9,20,.72);color:#fff;font-size:.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}
.vk-vid-play{position:absolute;inset:0;margin:auto;width:28px;height:28px;border-radius:50%;
  background:rgba(6,9,20,.72);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background var(--ease-base),color var(--ease-base);pointer-events:none}
.vk-vid-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.vk-vid-tag{align-self:flex-start;font-size:.6rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:.15rem .5rem;border-radius:var(--radius-pill);
  border:1px solid var(--vk-b);color:var(--vk-l);background:var(--vk-d)}
.vk-vid-name{font-size:.82rem;font-weight:700;color:var(--text-1);line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vk-vids-foot{display:flex;align-items:flex-start;gap:.4rem;padding:.75rem 1rem;
  font-size:var(--text-xs);font-style:italic;color:var(--text-3);line-height:1.55;
  background:var(--bg-c);border-top:1px solid var(--b1)}
.vk-vids-foot-ico{flex-shrink:0;line-height:1.3}
.vk-vids-foot-text{min-width:0}

/* ── "On this page" rail - the page's ONE persistent nav surface,
   now a genuine reserved grid column, not a viewport-relative
   overlay (design-review Exhibit 01 / Direction A) ─────────────────
   SUPERSEDED APPROACH, replaced outright (2026-09-15): three
   consecutive passes kept this rail as position:fixed and tried to
   make it "safe" by computing, at each viewport width, whether its
   fixed right-edge offset happened to clear whatever page content sat
   underneath it - see agent-memory project_vakio_tabbar_removal_
   2026-09-14.md, project_vakio_hero_container_fix_2026-09-15.md and
   project_vakio_railbreakpoint_fix_2026-09-15.md for that full,
   increasingly elaborate clearance-math history. That approach was
   fragile by design (it had to be re-derived every time hero/panel
   geometry changed) and it still visibly failed in production - the
   rail rendered as a floating strip overlapping page content. It has
   been REMOVED, not retuned again. Do not reintroduce
   position:fixed + viewport-width breakpoint math for this element.

   This rail's horizontal position and width are now entirely the
   grid's doing - see .vk-layout at the top of this file. There is no
   right/top-percentage/transform-center positioning left on this
   selector for the desktop tier; grid-column places it, and its
   width is simply the grid track's own 190px.

   Desktop (>=1100px, whenever .vk-layout is two columns):
   position:sticky, WITHIN this element's own grid track - NOT
   fixed to the viewport. align-self:start (backed by .vk-layout's
   own align-items:start) keeps this element's box sized to its own
   content rather than stretched to the full height of the much
   taller content column; without that, the box would already span
   the entire column height and sticky positioning would have nothing
   to do. Its sticky containing block is the grid row, whose height
   is .vk-content's full height - so it travels with scroll and stays
   pinned at `top` continuously from the hero down through the last
   section (Request Access), only un-sticking once the bottom of that
   row is reached. This is "maintained throughout," not a hero-only
   placement. It is a REAL navigation surface (5 real buttons, real
   aria-labels) - never decorative, never aria-hidden. Driven by the
   single setActiveTab()/IntersectionObserver in index.html's inline
   script (see the comment above `var navBtns`); its active dot/label
   state is aria-current="true", toggled by that one function - never
   a second observer.

   Below 1100px: .vk-layout collapses to a single column (see the
   @media block below, same breakpoint) - there is no second grid
   track left to sticky within, so this SAME element switches to
   position:fixed and becomes a compact horizontal dot strip pinned to
   the viewport bottom, using the identical dot+connecting-line
   language (the line just runs horizontally instead of vertically).
   Once position:fixed, the element is taken out of the grid's layout
   algorithm entirely (fixed-position boxes are sized/placed against
   the viewport, not their grid track), so this tier costs the
   single-column layout nothing and cannot overlap it either - no
   width/clearance math needed for this tier, structurally, at any
   width. 1100px is this exact page's own existing .vk-moat-grid /
   .vk-ledger breakpoint, reused deliberately, not an invented
   number. */
.vk-onthis{grid-column:2;position:sticky;
  top:50%;transform:translateY(-50%);align-self:start;
  display:flex;flex-direction:column;gap:var(--vk-rail-gap,1.15rem);
  width:190px;padding:var(--vk-rail-py,1.25rem) var(--vk-rail-px,1.1rem);
  --vk-dot-d:12px;--vk-dot-mt:.2rem;
  background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card)}
.vk-onthis-stop{position:relative;z-index:1;display:flex;align-items:flex-start;
  gap:.7rem;width:100%;background:none;border:none;margin:0;padding:0;
  cursor:pointer;text-align:left;font:inherit;color:inherit}
/* Connecting line: one short segment per stop (its own ::after), not one
   long line precomputed against the container's padding - a stop's text
   can wrap to a different number of lines than its neighbours (e.g. "Personas
   / Evidence Ledger" vs "Roadmap / Next"), so row heights aren't uniform and
   a single top-to-bottom line sized off the container's edges either falls
   short of or overshoots the last dot depending on how tall the last row
   happens to be - exactly the overshoot bug this replaced. Each segment
   instead starts at THIS dot's own bottom edge and reaches exactly to the
   NEXT dot's centre using `height:100%` (this stop's own rendered height,
   whatever it is) plus the fixed, content-independent gap and dot metrics -
   so it's correct regardless of wrapping. Only non-last stops get a
   segment, so there is structurally nothing to draw past the last dot. */
.vk-onthis-stop:not(:last-child)::after{content:'';position:absolute;z-index:0;
  left:calc(var(--vk-dot-d)/2 - .5px);
  top:calc(var(--vk-dot-mt) + var(--vk-dot-d));
  height:calc(100% + var(--vk-rail-gap,1.15rem) - var(--vk-dot-d)/2);
  width:1px;background:var(--b2)}
.vk-onthis-dot{width:var(--vk-dot-d);height:var(--vk-dot-d);flex-shrink:0;margin-top:var(--vk-dot-mt);
  box-sizing:border-box;border-radius:50%;border:2px solid var(--b2);
  background:var(--bg-c);transition:background-color var(--ease-base),border-color var(--ease-base),box-shadow var(--ease-base)}
.vk-onthis-stop[aria-current="true"] .vk-onthis-dot{background:var(--vk);border-color:var(--vk);
  box-shadow:0 0 0 4px var(--vk-g)}
.vk-onthis-text{display:flex;flex-direction:column;gap:.1rem}
.vk-onthis-name{font-size:var(--text-xs);font-weight:700;color:var(--text-2);
  line-height:1.3;transition:color var(--ease-base)}
.vk-onthis-sub{font-size:.65rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-3);line-height:1.3}
.vk-onthis-stop[aria-current="true"] .vk-onthis-name,.vk-onthis-stop[aria-current="true"] .vk-onthis-short{color:var(--vk-l)}
.vk-onthis-stop:hover .vk-onthis-name,.vk-onthis-stop:focus-visible .vk-onthis-name,
.vk-onthis-stop:hover .vk-onthis-short,.vk-onthis-stop:focus-visible .vk-onthis-short{color:var(--vk-l)}
.vk-onthis-stop:focus-visible{outline:2px solid var(--vk);outline-offset:3px;border-radius:var(--radius-sm)}
/* Mobile-only short label (2026-09-16) - hidden on the desktop rail,
   shown by the mobile tab bar below in place of .vk-onthis-text. One
   word each, chosen as a case-insensitive substring of the button's
   own aria-label (WCAG 2.5.3 Label in Name): Overview, Programmes,
   Audit (of "Audit & Evidence"), Roadmap, Access (of "Request
   Access") - short enough to sit in a 1/5-viewport-wide column on a
   320px phone without wrapping or being ellipsised in practice. */
.vk-onthis-short{display:none}

/* Below 1100px: .vk-layout drops to a single column (no second grid
   track to sticky within), and this SAME element switches to a
   full-width bottom tab bar fixed to the viewport bottom - not the
   rail, and not a scrolling dot strip either (2026-09-16 rework:
   growing mobile traffic made a fixed-width, overflow-scrolled strip
   a discoverability problem - users had to scroll sideways to learn
   5 stops existed). The fix is structural, the same way .vk-layout's
   grid columns make rail/content overlap structurally impossible
   above: each of the 5 stops is an equal flex:1 1 0 share of the
   bar's own width:100%, so their combined width is always exactly
   the viewport width. There is nothing to horizontal-scroll to
   *by construction* - not because the labels happen to be short
   enough today, but because a 5th equal column literally cannot
   exceed 1/5 of 100%. No overflow-x, no max-width cap, no scrolling.
   Threshold matches .vk-layout's own collapse breakpoint exactly,
   with no gap and no double-render at the boundary. */
@media(max-width:1099px){
  .vk-layout{display:block}
  .vk-onthis{position:fixed;grid-column:auto;top:auto;
    left:0;right:0;bottom:0;
    transform:none;align-self:auto;z-index:850;
    flex-direction:row;gap:0;width:100%;max-width:none;
    border-width:1px 0 0 0;border-radius:0;
    padding:.35rem env(safe-area-inset-right,0px)
      calc(.35rem + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px);
    overflow-x:visible}
  /* The vertical rail's connecting line is dropped here rather than
     re-derived against flexible (non-fixed-width) column centres -
     that "recompute alignment against viewport-width math" pattern
     is exactly what broke this component three times before (see
     assets/css/vakio.css history / project_vakio_rail_grid_structural_fix
     memory). The bar's own top border already reads as a clear
     separator from page content without needing it. */
  .vk-onthis-stop::after{display:none}
  .vk-onthis-stop{flex:1 1 0;min-width:0;width:auto;height:auto;
    min-height:48px;flex-direction:column;align-items:center;
    justify-content:center;gap:.2rem;padding:.15rem .1rem}
  .vk-onthis-dot{margin-top:0}
  .vk-onthis-text{display:none}
  .vk-onthis-short{display:block;width:100%;max-width:100%;
    font-size:.62rem;font-weight:700;letter-spacing:.01em;
    line-height:1.2;color:var(--text-2);text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ── Round 5: Question-beat typographic treatment ────────────
   Applied uniformly to all 12 Programme passages (POSH, Policy
   Library, 10 Tier-2 rows). Never a bare paragraph continuation. */
.vk-question-beat{
  background:var(--vk-d);border-left:3px solid var(--vk);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:.9rem 1.15rem;margin:1.1rem 0
}
.vk-question-beat-label{
  display:block;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--vk-l);margin-bottom:.4rem
}
.vk-question-beat-body{
  font-style:italic;font-size:var(--text-base);color:var(--text-1);
  line-height:1.65;margin:0
}
[data-theme="light"] .vk-question-beat-body{color:var(--text-2)}

/* ── Round 5: Programme card spacing + disclosure note + helpers ──
   min-width:0 (2026-09-15, nested-grid overflow audit): this is a grid
   item of .vk-prog-grid (repeat(4,minmax(0,1fr)) - see that rule far
   below). Grid items default to min-width:auto, a second, independent
   blowout source alongside the track's own default minimum - closing
   only the track side (minmax(0,1fr)) is a common half-fix; both are
   needed together, same pairing as .vk-content/.vk-hero-left/.vk-hero-right
   above. This is the fix for the specific bug the rail-collision
   screenshot showed: see the long comment at .vk-prog-grid for the full
   structural reasoning. */
.vk-programme{margin-top:1.75rem;min-width:0}
.vk-mid-claim--mb0{margin-bottom:0}
.vk-disclosure-note{
  font-size:var(--text-sm);color:var(--text-3);font-style:italic;
  line-height:1.6;margin:0 0 2.75rem;max-width:680px
}
.vk-moat-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.vk-moat-grid--4{grid-template-columns:minmax(0,1fr)}}

/* Act badges: industry-specific (BOCW, Banking Regulation) visually distinguished
   from universal Acts - dashed border, no filled dot, muted label */
.act-badge--sector{border-style:dashed;opacity:.85}
.act-badge--sector .act-dot{background:var(--text-3)}

/* ── Round 6 (2026-09-04): Programme card visual redesign ────
   Replaces five stacked paragraphs per Programme with a scannable
   header (icon + name + fear tags + module pill), a synthesized
   hook line, the promoted Question beat, a compressed "what Vākio
   does" flow, an optional always-visible scope/gap note, and a
   <details> disclosure holding the full original Exposure/Evidence/
   Efficiency reasoning verbatim. Nothing is deleted - it is layered. */

/* Legend - teaches the fear-tag + card pattern once, above the first card */
.vk-prog-legend{
  background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-xl);
  padding:1.35rem 1.5rem;margin-bottom:2.25rem
}
.vk-prog-legend-hdr{
  font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);margin-bottom:.85rem
}
.vk-prog-legend-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:.9rem}
.vk-prog-legend-item{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.vk-prog-legend-t{font-size:var(--text-sm);color:var(--text-2);line-height:1.45}
.vk-prog-legend-foot{
  font-size:var(--text-sm);color:var(--text-2);line-height:1.6;margin:0;
  padding-top:.85rem;border-top:1px solid var(--b0)
}
@media(max-width:768px){.vk-prog-legend-row{grid-template-columns:minmax(0,1fr)}}

/* Card header - icon + name + fear tags, module pill flush right */
.vk-prog-head{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:.9rem;flex-wrap:wrap}
.vk-prog-icon{font-size:1.7rem;line-height:1;flex-shrink:0;margin-top:.1rem}
.vk-prog-head-text{flex:1;min-width:200px;display:flex;flex-direction:column;gap:.5rem}
.vk-prog-name{
  font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,1.35rem);
  font-weight:600;color:var(--text-1);line-height:1.25;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.vk-prog-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.vk-prog-head>.vk-pill{margin-top:.2rem}

/* Fear tags - one icon+label vocabulary, learned once, reused across all 12 cards */
.vk-fear-tag{
  display:inline-flex;align-items:center;gap:.32rem;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.03em;padding:.22rem .6rem;border-radius:var(--radius-pill);
  background:var(--bg);border:1px solid var(--b1);color:var(--text-2)
}
.vk-fear-ico{font-size:.85em;line-height:1}
.vk-fear-tag--exposure{border-color:rgba(201,168,76,.4);color:var(--gold-l)}
.vk-fear-tag--evidence{border-color:var(--vk-b);color:var(--vk-l)}
.vk-fear-tag--efficiency{border-color:var(--b2);color:var(--text-2)}
/* Secondary fears: same vocabulary, visually quieter - dashed border, muted, matches
   the .act-badge--sector convention already used elsewhere on this page */
.vk-fear-tag--secondary{border-style:dashed;opacity:.78}

/* Hook line - the compressed, synthesized tension statement, always visible */
.vk-prog-hook{
  font-size:var(--text-md);font-weight:500;color:var(--text-1);
  line-height:1.5;margin:0 0 1rem
}
/* On-card teaser variant only (Round 7 Uniform Cards) - clamped to two
   lines so every card keeps the same footprint regardless of hook length.
   The popover and the case modal both reuse the base, unclamped
   .vk-prog-hook for the same text in full. */
.vk-prog-hook--clamp{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:1.15rem
}

/* Flow - "what Vākio does," compressed into 2–4 connected steps */
.vk-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.1rem 0}
.vk-flow-step{
  display:inline-flex;align-items:center;gap:.4rem;font-size:var(--text-sm);font-weight:600;
  color:var(--text-1);background:var(--bg);border:1px solid var(--vk-b);
  border-radius:var(--radius-md);padding:.42rem .75rem .42rem .6rem;line-height:1.3
}
.vk-flow-ico{font-size:.95em;line-height:1}
.vk-flow-arrow{color:var(--vk);font-size:.85rem;flex-shrink:0}

/* Scope note - always-visible gap/exclusion flag. Never placed inside <details>. */
.vk-prog-scope{
  display:flex;align-items:flex-start;gap:.55rem;
  background:var(--gold-d);border:1px solid var(--gold-g);border-radius:var(--radius-md);
  padding:.7rem .9rem;margin:0 0 1.1rem;font-size:var(--text-sm);color:var(--text-2);line-height:1.55
}
.vk-prog-scope-ico{flex-shrink:0;color:var(--gold-l);font-size:1em;margin-top:.05rem}
.vk-prog-scope strong{color:var(--text-1)}


@media(max-width:480px){
  .vk-prog-legend{padding:1.1rem 1.15rem}
  .vk-flow{gap:.4rem}
  .vk-flow-step{font-size:.8rem;padding:.36rem .6rem .36rem .5rem}
}

/* ── LIGHT THEME OVERRIDES ────────────────────────────────── */
/* Decorative watermark numbers: more opaque so they read on light bg */
[data-theme="light"] .vk-moat-num{
  color:rgba(0,110,100,.30);
  -webkit-text-stroke:1px rgba(0,110,100,.56)
}
/* Card titles: use near-black instead of brand-teal on light bg */
[data-theme="light"] .vk-moat-title{color:var(--text-1)}
/* Italic quote blocks: near-black for readability on light bg */
[data-theme="light"] .pipe-quote{color:var(--text-1)}
[data-theme="light"] .kaep-italic-claim{color:var(--text-2)}

/* Round 6: Programme card redesign - light-theme contrast fixes */
[data-theme="light"] .vk-prog-scope{background:var(--gold-d);border-color:var(--gold-g)}
[data-theme="light"] .vk-prog-scope-ico{color:var(--gold-l)}

/* ── Exhibit F - "The Clock Wall, for real" (design review 2026-09-04,
   artifact 215de05b-8e9f-40fb-abb4-59d67fd06f66, Exhibit 06 Direction F),
   built into the live Programmes tab 2026-09-14. Three dial species
   replace the plain header summary as each card's at-a-glance element.
   Every colour below is a design-system token (var(--vk)/var(--vk-l)/
   var(--gold)/var(--gold-l)/var(--b1)/var(--b2)/var(--text-*)) so the
   dials read correctly in both themes without a separate light override
   block - this mirrors how .vk-fear-tag / .vk-flow-arrow / .vk-question-
   beat-label already do it elsewhere on this page. Fill/arc amounts are
   FIXED decorative styling shared identically by every dial of a given
   species - never a live, per-card, currently-tracked number. See the
   agent-memory note on this build for the fabricated-numbers correction
   this corrects vs. the original design mockup. */

/* Second legend row - teaches the three dial species once, mirrors the
   fear-tag legend's own "teach the pattern once" convention. Kept as its
   own sibling box so the existing fear-tag legend above stays untouched. */
.vk-dial-legend{
  background:var(--bg-c);border:1px solid var(--b1);border-radius:var(--radius-xl);
  padding:1.35rem 1.5rem;margin-bottom:2.25rem
}
.vk-dial-legend-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.vk-dial-legend-item{display:flex;align-items:center;gap:.75rem;min-width:0}
.vk-dial-legend-item>div{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.vk-dial-legend-name{font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;color:var(--text-1)}
@media(max-width:768px){.vk-dial-legend-row{grid-template-columns:minmax(0,1fr)}}

/* Dial block - icon + label pair, used inside every Programme card */
.vk-dial-block{display:flex;align-items:center;gap:.9rem;margin:.9rem 0 1.15rem}
.vk-dial{width:56px;height:56px;flex-shrink:0}
.vk-dial--sm{width:38px;height:38px}
.vk-dial-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.vk-dial-kind{font-size:.65rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--vk-l)}
.vk-dial-val{font-size:var(--text-base);font-weight:700;color:var(--text-1);line-height:1.3}
.vk-dial-sub{font-size:var(--text-xs);color:var(--text-2)}

/* Species 1 - Statutory Clock: solid arc. The ~68% fill is pure decorative
   styling, fixed and identical across all four Clock dials - the visible
   text (.vk-dial-val) always carries the real statutory ceiling, never a
   fabricated current-progress figure. */
.vk-dial-track{fill:none;stroke:var(--b1);stroke-width:6}
.vk-dial-arc{
  fill:none;stroke:var(--vk);stroke-width:6;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:32px 32px;
  stroke-dasharray:115.4 54.3
}
/* Highest-urgency window (72-hour breach notice) rendered in gold - a
   fixed categorical choice reflecting that this is the shortest absolute
   statutory window among the four Clock cards, not a live/changing state. */
.vk-dial-block--clock-urgent .vk-dial-arc{stroke:var(--gold)}
.vk-dial-block--clock-urgent .vk-dial-kind{color:var(--gold-l)}

/* Species 2 - Recurring Trigger: dashed full ring, no fill. Event-driven,
   not time-bound, so there is nothing to partially fill. */
.vk-dial-cycle-ring{fill:none;stroke:var(--vk);stroke-width:5;stroke-dasharray:6 7;opacity:.85}

/* Species 3 - Coverage Gauge: horizontal bar, not a circle. The fill is
   fixed decorative styling only - the visible text always names what is
   tracked, never a fabricated percentage. */
.vk-dial-gauge-bar{
  width:56px;height:14px;border-radius:var(--radius-pill);
  background:var(--b1);border:1px solid var(--b2);overflow:hidden;flex-shrink:0
}
.vk-dial-gauge-bar--sm{width:38px;height:10px}
.vk-dial-gauge-fill{height:100%;width:60%;background:var(--vk);border-radius:var(--radius-pill)}

/* POSH's second real clock (§9 filing window) - named in copy beside the
   dial rather than given its own dial, per the design brief. */
.vk-dial-note{font-size:var(--text-xs);color:var(--text-2);margin:-.55rem 0 1.1rem;line-height:1.55}

/* ── Uniform Programme grid (Round 7, 2026-09-15) - all twelve cards ──
   Supersedes the prior "Tier-2 Programme grid (ten cards)" layout, which
   kept POSH and Policy Library as full-width outliers above a separate
   4-column grid for the other ten. That special-casing is gone: every
   Programme, including POSH and Policy Library, now renders through the
   same card template inside this one grid, two per row. POSH's six-item
   feature grid moved into its case modal's carousel (see .vk-case-carousel
   below), which is what made folding it into a uniform card possible.

   min-width:0 on the grid items (.vk-programme, above) and minmax(0,...)
   on the track (not a bare 1fr) are kept from the 2026-09-15 nested-grid
   overflow fix - same mechanism, same reasoning: CSS Grid track sizing
   happens before content paints, so a track floored at 0 rather than its
   content's auto minimum can never be forced wider than its fair share by
   anything inside a card, which is what the "On this page" rail depends on
   to never be overlapped. Only two columns wide (vs. the prior four) means
   there is materially more room per card than before, so this floor is a
   structural backstop here, not a fix for an observed overflow. */
.vk-prog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:1.75rem}
.vk-prog-grid .vk-programme{margin-top:0}
@media(max-width:768px){.vk-prog-grid{grid-template-columns:minmax(0,1fr)}}

/* ── Round 7 - Uniform Programme Cards (2026-09-15) ──────────────────
   Replaces each card's always-visible fear-tag pills + "Ask Yourself"
   block + <details> full-case disclosure with: a compact dot row (full
   labels on hover/focus, via .vk-prog-popover), a reserved micro-slot
   (POSH only, CSS-cycled), a 2-line-clamped hook, and an "Open the case"
   button that opens a centred, two-column .modal--case (see further
   below). Every card is `position:relative` so its popover can anchor to
   it without affecting the grid's own layout/reflow. */
.vk-prog-card{position:relative}

/* Fear-tag dots - compact, unlabeled colour chips. Same three-colour
   vocabulary as .vk-fear-tag (exposure=gold-l, evidence=vk-l,
   efficiency=text-2, secondary=dashed/hollow/quieter), taught in full in
   the fear-tag legend above the grid and spelled out again in the
   popover. The row carries one role="img" + aria-label instead of
   aria-hidden, so assistive tech gets a single accurate label for the
   compact visual without needing per-dot exposure. */
.vk-prog-dots{display:flex;align-items:center;gap:.4rem;margin:.7rem 0 .1rem}
.vk-prog-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.vk-prog-dot--exposure{background:var(--gold-l)}
.vk-prog-dot--evidence{background:var(--vk-l)}
.vk-prog-dot--efficiency{background:var(--text-2)}
.vk-prog-dot--secondary{background:transparent;opacity:.78;border-width:1.5px;border-style:dashed}
.vk-prog-dot--secondary.vk-prog-dot--exposure{border-color:var(--gold-l)}
.vk-prog-dot--secondary.vk-prog-dot--evidence{border-color:var(--vk-l)}
.vk-prog-dot--secondary.vk-prog-dot--efficiency{border-color:var(--text-2)}

/* Micro-slot - reserved on every card (identical footprint) but only
   populated on POSH, which is the only Programme with ≥3 enumerable
   sub-items (its six statutory features). Pure-CSS frame rotation, no JS:
   six stacked, absolutely-positioned spans, each visible for ~3s of an
   18s loop via staggered animation-delay. Decorative preview only - the
   same six features are the accessible, authoritative content inside the
   POSH case modal's carousel, so this rotator is aria-hidden. */
.vk-prog-micro{position:relative;min-height:1.4rem;margin:.15rem 0 .9rem;overflow:hidden}
.vk-prog-micro-item{
  position:absolute;inset:0;opacity:0;
  font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;color:var(--vk-l);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:vkProgMicroCycle 18s ease-in-out infinite
}
.vk-prog-micro-item:nth-child(1){animation-delay:0s}
.vk-prog-micro-item:nth-child(2){animation-delay:3s}
.vk-prog-micro-item:nth-child(3){animation-delay:6s}
.vk-prog-micro-item:nth-child(4){animation-delay:9s}
.vk-prog-micro-item:nth-child(5){animation-delay:12s}
.vk-prog-micro-item:nth-child(6){animation-delay:15s}
@keyframes vkProgMicroCycle{
  0%{opacity:0}
  2%{opacity:1}
  15%{opacity:1}
  17%{opacity:0}
  100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .vk-prog-micro-item{animation:none;position:static;opacity:1}
  .vk-prog-micro-item:not(:first-child){display:none}
}

/* "Open the case" - opens this card's .modal--case (data-modal, wired
   generically by initModals()). */
.vk-prog-open-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;letter-spacing:.02em;
  color:var(--vk-l);background:transparent;border:1px solid var(--vk-b);
  border-radius:var(--radius-pill);padding:.5rem 1.05rem;cursor:pointer;
  transition:background var(--ease-base),border-color var(--ease-base)
}
.vk-prog-open-btn:hover,.vk-prog-open-btn:focus-visible{background:var(--vk-d);border-color:var(--vk)}
.vk-prog-open-btn-arrow{display:inline-block;transition:transform var(--ease-base)}
.vk-prog-open-btn:hover .vk-prog-open-btn-arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.vk-prog-open-btn-arrow{transition:none}}

/* Popover - hover/focus disclosure of the full tag labels, the full hook,
   and the "Ask Yourself" question. Absolutely positioned so it never
   reflows the grid (may visually sit over the row below, by design - it
   closes again on blur/mouseleave). :focus-within covers keyboard users
   tabbing onto the "Open the case" button. Not aria-hidden: its content
   is real, non-decorative text (duplicated, not exclusive - the same
   question and full tags are also inside the case modal), so assistive
   tech can reach it in normal document order regardless of hover state. */
.vk-prog-popover{
  position:absolute;left:0;right:0;top:100%;margin-top:.6rem;z-index:5;
  background:var(--bg-ch);border:1px solid var(--vk-b);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);padding:1.1rem 1.25rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--ease-base),transform var(--ease-base),visibility var(--ease-base)
}
.vk-prog-card:hover .vk-prog-popover,
.vk-prog-card:focus-within .vk-prog-popover{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto
}
.vk-prog-popover .vk-prog-hook{margin:.75rem 0}
.vk-prog-popover .vk-question-beat{margin:0}
@media(prefers-reduced-motion:reduce){.vk-prog-popover{transition:none}}
/* Touch/no-hover devices: no :hover to trigger the popover, and the grid
   collapses to one column anyway below 768px, so the popover is simply
   not shown - the clamped hook plus "Open the case" still carry the
   essential information without it. */

/* ── Programme Card Front v2 (2026-09-15) ─────────────────────────────
   Replaces two of the five card-front slots the Round 7 Uniform Card
   build established: the unlabeled fear-tag dot row becomes a row of
   labeled, clickable pills (the exact .vk-fear-tag markup/colours
   already used in the popover below, wrapped in a <button> instead of
   a bare <span> for the 2+-tag cards; the one 1-tag card, Product /
   Service Induction, keeps a plain non-interactive span - nothing to
   switch between), and the 2-line-clamped teaser paragraph becomes
   .vk-prog-body: the card's dominant, largest element by design (the
   pain-point line should visually lead, not the dial or stats),
   auto-alternating between the hook line and the "Ask Yourself"
   question every ~4s. A tag click redirects it to that tag's own
   labeled reasoning paragraph, sourced verbatim from each card's
   hidden .vk-prog-body-src block. Driven by
   assets/js/components/ProgrammeCardFront.js. The dial, micro-slot,
   icon/name header, "Open the case" button, and the popover are all
   unchanged. */
.vk-prog-tags--front{margin:.7rem 0 .1rem}
.vk-fear-tag--btn{
  cursor:pointer;font-family:inherit;appearance:none;-webkit-appearance:none;
  transition:background var(--ease-base),border-color var(--ease-base),color var(--ease-base)
}
.vk-fear-tag--btn:hover{border-style:solid;opacity:1}
.vk-fear-tag--btn:focus-visible{outline:2px solid var(--vk);outline-offset:2px}
.vk-fear-tag--btn[aria-pressed="true"]{border-style:solid;opacity:1;color:var(--bg)}
.vk-fear-tag--exposure.vk-fear-tag--btn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold)}
.vk-fear-tag--evidence.vk-fear-tag--btn[aria-pressed="true"]{background:var(--vk);border-color:var(--vk)}
.vk-fear-tag--efficiency.vk-fear-tag--btn[aria-pressed="true"]{background:var(--text-2);border-color:var(--text-2)}
/* Contrast fix, light theme only: var(--bg) is white on this theme, which
   is too low-contrast against the (theme-invariant) base gold/vk fill -
   var(--text-1) is near-black here and passes AA against both. The
   efficiency variant's fill is var(--text-2), which is already dark in
   light theme, so var(--bg) (white) text already passes there and needs
   no override. */
[data-theme="light"] .vk-fear-tag--exposure.vk-fear-tag--btn[aria-pressed="true"],
[data-theme="light"] .vk-fear-tag--evidence.vk-fear-tag--btn[aria-pressed="true"]{color:var(--text-1)}

.vk-prog-body{margin:0 0 1.15rem}
.vk-prog-body-label,.vk-prog-body-text{transition:opacity var(--ease-base)}
.vk-prog-body-label.vk-prog-body-fading,.vk-prog-body-text.vk-prog-body-fading{opacity:0}
.vk-prog-body-label{
  display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:.35rem
}
.vk-prog-body-label--exposure{color:var(--gold-l)}
.vk-prog-body-label--evidence{color:var(--vk-l)}
.vk-prog-body-label--efficiency{color:var(--text-2)}
.vk-prog-body-text{font-size:var(--text-lg);font-weight:700;color:var(--text-1);line-height:1.4;margin:0}
.vk-prog-body-foot{display:flex;align-items:center;min-height:1.1rem;margin-top:.65rem}
.vk-prog-body-dots{display:flex;gap:.35rem}
.vk-prog-body-dot{width:6px;height:6px;border-radius:50%;background:var(--b2)}
.vk-prog-body-dot--active{background:var(--vk-l)}
.vk-prog-body-back{
  display:inline-flex;align-items:center;gap:.35rem;background:none;border:none;padding:0;
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;color:var(--vk-l);cursor:pointer
}
.vk-prog-body-back:hover{color:var(--vk)}
.vk-prog-body-back:focus-visible{outline:2px solid var(--vk);outline-offset:2px;border-radius:var(--radius-sm)}
.vk-prog-body-back-ico{display:inline-block}
@media(prefers-reduced-motion:reduce){
  .vk-prog-body-label,.vk-prog-body-text{transition:none}
}

/* ── Round 7 - Programme case modal (two-column deep-dive) ───────────
   Extends the shared .modal-overlay/.modal/.modal__header/.modal__body
   system (components.css) the same way .modal--conversation already
   does - a width modifier, not a parallel modal implementation. Opened
   via the same [data-modal] wiring as every other modal on the site;
   Modal.js's shared focus trap + ESC + backdrop-click + return-focus-to-
   trigger behaviour all apply unchanged. */
.modal--case{max-width:940px}
.vk-case-body{padding-top:var(--sp-5)}
.vk-case-back{
  display:inline-flex;align-items:center;gap:.4rem;background:none;border:none;
  color:var(--vk-l);font-size:var(--text-sm);font-weight:700;cursor:pointer;
  padding:.3rem 0;margin-bottom:1.2rem;font-family:var(--font-body)
}
.vk-case-back:hover,.vk-case-back:focus-visible{color:var(--vk)}
.vk-case-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-8);align-items:stretch}
.vk-case-left{min-width:0}
.vk-case-left .vk-mid-body:last-of-type{margin-bottom:0}
.vk-case-right{min-width:0;display:flex}
.vk-case-right-inner{
  display:flex;flex-direction:column;justify-content:center;gap:.35rem;width:100%;
  background:var(--bg);border:1px solid var(--vk-b);border-radius:var(--radius-lg);padding:1.5rem;
  container-type:inline-size;
}
.vk-case-right-inner .vk-dial-block{margin:0 0 .4rem}
.vk-case-right-inner .vk-flow{margin:.9rem 0 0}
.vk-case-right-inner .vk-prog-scope{margin:.6rem 0 0}
/* Body font, not the display serif - these run several lines long (a
   full statutory question, not a short punchy quote), and italic
   Cormorant Garamond at that length reads noticeably harder than the
   Exposure/Evidence paragraphs right below it in the same modal.
   Weight + the existing left-border accent still mark it as a
   pullquote without trading away readability. */
.vk-case-pullquote{
  font-family:var(--font-body);font-weight:500;font-size:var(--text-lg);
  color:var(--text-1);line-height:1.5;border-left:3px solid var(--vk);
  padding:.15rem 0 .15rem 1.1rem;margin:0 0 1.5rem
}
@media(max-width:900px){.vk-case-grid{grid-template-columns:minmax(0,1fr)}}

/* POSH's carousel - the only case modal with ≥3 enumerable sub-items.
   assets/js/components/ProgrammeCarousel.js drives prev/next, dot
   pagination, and auto-advance (paused on hover/focus, disabled entirely
   under prefers-reduced-motion, and only running while this modal is
   actually open). */
.vk-case-carousel{margin-top:1.15rem;border-top:1px dashed var(--b1);padding-top:1.1rem}
.vk-case-carousel-viewport{overflow:hidden}
/* Scoped under .vk-case-carousel (2 classes, specificity 0,2,0) rather than
   bare .vk-case-carousel-track/-slide (1 class, 0,1,0) - this track/slide
   pair sits inside .modal__body, and components.css's generic prose-list
   reset (.modal__body ul{padding-left:1.2rem}, .modal__body li{margin-
   bottom:.3rem}) is a class+type selector (0,1,1), which outranks a bare
   single-class selector regardless of source order. That collision was
   injecting a stray 19.2px left padding into the track's content-box
   (where each slide's flex-basis:100% is measured from) while the JS's
   translateX(index*100%) step is measured against the track's full
   border-box (no padding) - two different-sized "100%"s per slide,
   which is what let the next slide's text bleed into view at rest. Fixed
   here at the cascade level, not by changing the JS's percentage math
   (which was correct once both percentages share the same reference
   box) - see the agent-memory note on this fix for the full trace. */
.vk-case-carousel .vk-case-carousel-track{display:flex;list-style:none;margin:0;padding:0;transition:transform var(--ease-base)}
.vk-case-carousel .vk-case-carousel-slide{flex:0 0 100%;min-width:0;padding-right:.25rem;margin-bottom:0}
.vk-case-carousel-controls{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1rem}
.vk-case-carousel-btn{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--vk-b);
  background:var(--bg-c);color:var(--vk-l);font-size:1.15rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--ease-base),border-color var(--ease-base)
}
.vk-case-carousel-btn:hover,.vk-case-carousel-btn:focus-visible{background:var(--vk-d);border-color:var(--vk)}
.vk-case-carousel-dots{display:flex;gap:.4rem}
.vk-case-carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--b2);border:none;padding:0;cursor:pointer}
.vk-case-carousel-dot[aria-selected="true"]{background:var(--vk)}
@media(prefers-reduced-motion:reduce){.vk-case-carousel-track{transition:none}}

@media(max-width:480px){
  .vk-prog-popover{padding:.95rem 1.05rem}
  .vk-case-right-inner{padding:1.15rem}
}

/* .vk-flow's base rule (line ~1178) is flex-wrap:wrap, sized for a row of
   3-4 pill-shaped steps. .vk-case-right-inner is the narrower (~1fr vs
   1.3fr) side of a two-column modal, so on real layouts it's rarely wide
   enough for that - the row wraps one step per line while the rightward
   arrow stays put beside each one, reading as a leftover horizontal
   connector rather than a designed vertical one (reported 2026-09-16).
   A viewport media query can't know .vk-case-right-inner's own width,
   only the screen's, so it guessed wrong; a container query asks the
   right question - checking the flow's own available space - and
   switches the axis and rotates the arrow into a top-to-bottom connector
   whenever that space is actually too narrow, at any viewport. Container
   established on .vk-case-right-inner via container-type:inline-size
   above. Threshold: four steps ("Compose Lifecycle", "Enforce ICC
   Rules", "Track Statutory Clocks", "Auto-File §21 Report") plus arrows
   need at least ~560px to read as a single row; below that, even two
   steps side by side crowd the column, so switch outright rather than
   allow an in-between wrapped state. */
@container (max-width:560px){
  .vk-flow{flex-direction:column;align-items:center;flex-wrap:nowrap;gap:.5rem}
  .vk-flow-arrow{align-self:center;transform:rotate(90deg)}
}