/* ==========================================================================
   SkillBench marketing site — v4
   Implements "SkillBench Marketing Site v4.dc.html".
   Foundations come from css/tokens.css (generated from Figma Variables).
   Nothing here hardcodes a colour that exists as a token.
   ========================================================================== */

:root {
  /* Type stacks. Token values are family names only; these are the usable stacks. */
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  /* Libre Franklin: a Franklin Gothic revival, so it shares the American
     editorial lineage Newsreader draws on. NB tokens.css still records
     "Inter" for --font-family-body; that variable is unreferenced, and the
     file is generated from Figma, so the Figma variable is what needs
     updating rather than this. */
  --font-body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 200ms;
  --dur-rise: 320ms;

  /* Layout */
  --container: 1180px;
  --gutter: 32px;
  --marker-col: 140px;

  /* Translucent surfaces derived from tokens (alpha has no token equivalent) */
  --nav-bg: rgb(249 248 244 / 0.95);
  --scrim: rgb(31 31 29 / 0.5);
  --modal-shadow: 0 24px 48px rgb(31 31 29 / 0.18);

  /* Ink on the green-900 sections */
  --on-dark: var(--color-stone-50);
  --on-dark-body: rgb(249 248 244 / 0.72);
  --on-dark-sub: rgb(249 248 244 / 0.7);
  --on-dark-link: rgb(249 248 244 / 0.6);
  --on-dark-faint: rgb(249 248 244 / 0.5);
  --on-dark-dim: rgb(249 248 244 / 0.4);
  --on-dark-rule: rgb(249 248 244 / 0.3);
  --on-dark-hairline: rgb(249 248 244 / 0.16);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky 60px nav must not cover anchor targets. */
  scroll-padding-top: 60px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: var(--accent-default); }
a:hover { color: var(--accent-hover); }
::selection { background: var(--accent-muted); color: var(--text-primary); }

:focus-visible {
  outline: calc(var(--focus-ring-width) * 1px) solid var(--focus-ring-color);
  outline-offset: calc(var(--focus-ring-offset) * 1px);
  border-radius: calc(var(--radius-sm) * 1px);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: calc(var(--z-toast));
  transform: translateY(-200%);
  background: var(--accent-default);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  border-radius: calc(var(--radius-md) * 1px);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); color: var(--text-inverse); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Entrance motion (hero only, matching the design)
   -------------------------------------------------------------------------- */

/* Copy settles first (done by ~450ms), then the chart takes its reading.
   Whole sequence resolves inside ~810ms. */

@keyframes v4-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: v4-rise var(--dur-rise) var(--ease) both; }
.rise--1 { animation-delay: 90ms; }
.rise--2 { animation-delay: 150ms; }
.rise--3 { animation-delay: 200ms; }
.rise--4 { animation-delay: 160ms; }

/* The ruled scale wipes in from the left instead of fading, so it reads as
   an instrument being laid across the page. clip-path rather than scaleX:
   scaling would stretch the tick spacing on the way in. */
@keyframes v4-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.tick-rule { animation: v4-reveal 420ms var(--ease) 60ms both; }

/* Columns grow off the baseline in sequence. The measured run is indexed
   0-8 and the modelled bars jump to 11-13, so the gap in the index is
   itself a beat — the chart posts what it measured, pauses, then projects. */
@keyframes v4-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.barchart__bar {
  transform-origin: bottom;
  animation: v4-grow 240ms var(--ease) both;
  animation-delay: calc(360ms + var(--i, 0) * 16ms);
}

/* Scroll reveals for the sections below the hero. Applied to each section's
   inner container, not the section, so full-bleed fills and bands don't fade
   against the page. Scoped to .js (set by an inline script in <head>) so the
   hidden state never lands on an unscripted page — see js/reveal.js. */
.js .reveal-block {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.js .reveal-block.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .tick-rule, .barchart__bar { animation: none; }
  /* Show outright rather than snapping in on scroll. */
  .js .reveal-block { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}

/* --------------------------------------------------------------------------
   Typography primitives
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-display) * 1px);   /* 58 */
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-wrap: balance;
}
.display em { font-style: italic; color: var(--text-accent); }
.display--jumbo { font-size: 76px; line-height: 1.02; letter-spacing: -0.025em; margin-bottom: 28px; }

.h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-h1) * 1px);        /* 44 */
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.h2--lg     { font-size: 50px; line-height: 1.08; max-width: 24ch; margin-bottom: 20px; }
.h2--md     { font-size: 40px; }
.h2--sm     { font-size: 38px; line-height: 1.12; }
.h2--narrow { max-width: 24ch; }
.h2--tight  { max-width: 22ch; }
.h2--on-dark { color: var(--on-dark); }

.h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: calc(var(--font-size-h2) * 1px);        /* 30 */
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lede {
  font-size: calc(var(--font-size-lede) * 1px);      /* 18 */
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: 36px;
}
.lede--center { font-size: 19px; margin: 0 auto 40px; }

.sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 58ch;
  margin-bottom: 48px;
}
.sub--on-dark { color: var(--on-dark-sub); line-height: 1.65; max-width: 52ch; margin-bottom: 36px; }

.body { font-size: 16px; line-height: 1.65; }
.body--secondary { color: var(--text-secondary); margin-bottom: 14px; }
.body--muted { color: var(--text-muted); }
.body--lead { margin-bottom: 32px; }
.body--flush { font-size: 15px; margin: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: calc(var(--font-size-label) * 1px);     /* 12 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.eyebrow--accent   { color: var(--text-accent); letter-spacing: 0.12em; }
.eyebrow--muted    { color: var(--text-muted); }
.eyebrow--disabled { font-size: 11px; letter-spacing: 0.12em; color: var(--text-disabled); }

.mono, .caption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.caption { line-height: 1.5; margin-top: 10px; }

.pull {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  text-wrap: balance;
}

/* Footnote references, linked to the source notes in the footer */
.fn {
  text-decoration: none;
  color: var(--text-accent);
  border-radius: calc(var(--radius-sm) * 1px);
}
.fn sup {
  font-family: var(--font-mono);
  font-size: 0.32em;
  padding-left: 1px;
}
.fn:hover sup { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: calc(var(--radius-md) * 1px);
  padding: 15px 24px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.btn--primary { background: var(--accent-default); color: var(--text-inverse); }
.btn--primary:hover { background: var(--accent-hover); color: var(--text-inverse); }

.btn--outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  padding: 14px 24px;
}
.btn--outline:hover {
  background: var(--bg-inset);
  border-color: var(--color-stone-400);
  color: var(--text-secondary);
}

.btn--light {
  background: var(--color-stone-50);
  color: var(--color-green-900);
  padding: 17px 30px;
}
.btn--light:hover { background: var(--color-green-100); color: var(--color-green-900); }

.btn--sm { font-size: 12px; letter-spacing: 0.08em; padding: 12px 18px; }
.btn--block { flex: 1; padding: 15px 18px; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-hairline);
}
.nav__inner {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav__brand:hover { opacity: 0.75; }

.nav__logo { display: block; height: 18.7px; width: auto; }

.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__link {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: calc(var(--font-size-label) * 1px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--text-accent); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { background: var(--bg-page); padding: 72px 0 88px; }

.hero__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 14px;
}

/* Ruled tick scale, graduated like a ruler's edge: minor ticks every 10px at
   6px deep, with a major tick every fifth (50px) at 11px. Two layered
   gradients — the major is listed first so it paints over the minor tick that
   shares its position, extending it rather than doubling it. */
.tick-rule {
  height: 12px;
  margin-bottom: 56px;
  border-top: 1px solid var(--border-strong);
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--border-strong) 0, var(--border-strong) 1px,
      transparent 1px, transparent 50px
    ),
    repeating-linear-gradient(
      90deg,
      var(--border-strong) 0, var(--border-strong) 1px,
      transparent 1px, transparent 10px
    );
  background-size: 100% 11px, 100% 6px;
  background-repeat: no-repeat, no-repeat;
}
/* 1b's own rule, unticked: on that variant the tick texture competed with
   the abstract SVG's own grid lines for "measurement" duty. */
.tick-rule--plain {
  height: 0;
  background-image: none;
}

.hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: start;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Hero variant 1b — light abstract geometry. Swapped in via the debug panel.
   Reuses .eyebrow/.mono/.tick-rule/.lede/.hero__actions/.btn--primary/
   .btn--outline directly, since this is a light hero like the default —
   only the grid rhythm and the oversized heading are variant-specific. */
.hero--abstract { background: var(--bg-page); padding: 96px 0; }
.hero-abstract__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 72px;
  align-items: center;
}
.hero-abstract__meta { display: flex; align-items: baseline; gap: 20px; padding-bottom: 14px; }
.hero-abstract__heading {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 62px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 24px;
  text-wrap: balance;
}

/* Hero variant 1c — text-only, ruled pattern. Swapped in via the debug panel. */
.hero--solo { position: relative; overflow: hidden; background: var(--bg-page); padding: 0; }
.hero-solo__pattern {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--color-stone-200) 0, var(--color-stone-200) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(0deg, var(--color-stone-200) 0, var(--color-stone-200) 1px, transparent 1px, transparent 80px);
  opacity: 0.55;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, black 40%, transparent 100%);
}
/* Same major/minor graduation as .tick-rule (1a's hero), not the flat
   single-depth pattern this had before. Major listed first so it paints
   over, rather than beside, the minor tick sharing its position. */
.hero-solo__edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--border-strong) 0, var(--border-strong) 1px,
      transparent 1px, transparent 50px
    ),
    repeating-linear-gradient(
      90deg,
      var(--border-strong) 0, var(--border-strong) 1px,
      transparent 1px, transparent 10px
    );
  background-size: 100% 11px, 100% 6px;
  background-repeat: no-repeat, no-repeat;
}
.hero-solo__edge--top {
  top: 0;
  border-bottom: 1px solid var(--border-strong);
  background-position: bottom;
  transform: scaleY(-1);
}
/* Border and ticks are already adjacent at the box's own top edge (both at
   the default position), so flipping alone moves that pair to the box's
   bottom edge — the rule lands flush with the section boundary and the
   ticks now project upward into the hero, matching --top's mirrored logic
   without needing a background-position override too. */
.hero-solo__edge--bottom {
  bottom: 0;
  border-top: 1px solid var(--border-strong);
  transform: scaleY(-1);
}
.hero-solo__inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 120px 32px 128px;
  text-align: center;
}
/* .eyebrow is a <span> — vertical margins on an inline box are ignored, so
   this needs display:block to actually push the heading down. Scoped here
   rather than on .eyebrow itself, which is also used inline elsewhere. */
.hero-solo__inner > .eyebrow { display: block; margin-bottom: 28px; }
.hero-solo__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
/* Only this hero has the ruled grid behind it, so the outline button's
   transparent face shows the pattern straight through. Fill it with the page
   colour. The :hover needs restating at higher specificity — the base rule
   below matches .btn--outline:hover's specificity but is declared later, so
   without this the hover background would stop changing. */
.hero-solo__actions .btn--outline { background: var(--bg-page); }
.hero-solo__actions .btn--outline:hover { background: var(--bg-inset); }
.hero-solo__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 36px; }

/* While 1c is live, its own ruled edges are the hero's border. Fade the
   nav's and the stat ledger's hairlines to transparent (not `none`) so
   nothing shifts by 1px when the debug panel swaps variants. */
body.is-hero-solo .nav { border-bottom-color: transparent; }
body.is-hero-solo .ledger { border-top-color: transparent; }

/* --------------------------------------------------------------------------
   Panels & figures
   -------------------------------------------------------------------------- */

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: calc(var(--radius-md) * 1px);
}
.panel--tight { padding: 26px 28px 20px; }
.panel--page  { background: var(--bg-page); padding: 28px; }
.panel--flush { overflow: hidden; }

.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.panel__metric {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.panel__metric-unit { font-size: 18px; }

.panel__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--border-hairline);
  margin-top: 16px;
  padding-top: 12px;
}

.figure figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 10px;
}

/* Legend, swatches, confidence dots */
.legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.swatch {
  width: 10px; height: 10px;
  border-radius: calc(var(--radius-sm) * 1px);
  flex-shrink: 0;
}
.swatch--solid { background: var(--data-fill); }
.swatch--tint  { background: var(--data-projected-tint); box-shadow: inset 0 0 0 1.5px var(--color-green-300); }
.swatch--partial { background: var(--color-green-400); }
.swatch--hatch {
  background: repeating-linear-gradient(45deg, var(--color-green-100) 0, var(--color-green-100) 2px, transparent 2px, transparent 5px);
  box-shadow: inset 0 0 0 1px var(--color-green-300);
}

.confidence { display: inline-flex; gap: 3px; }
.confidence__dot {
  width: 5px; height: 5px;
  border-radius: calc(var(--radius-pill) * 1px);
  background: var(--data-fill);
  opacity: var(--opacity-confidence-high);
}
.confidence__dot--limited { opacity: var(--opacity-confidence-limited); }

/* Fig. 1 (variant 1a) — weekly bar chart */
.barchart { position: relative; height: 190px; }
.barchart__grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.barchart__gridline { border-top: 1px solid var(--color-stone-200); }
.barchart__bars {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-bottom: 1px solid var(--border-strong);
  padding: 0 4px;
}
.barchart__bar { flex: 1; background: var(--data-fill); }
.barchart__bar--projected {
  border: 1.5px dashed var(--color-green-300);
  background: repeating-linear-gradient(45deg, var(--color-green-100) 0, var(--color-green-100) 3px, transparent 3px, transparent 7px);
}
.barchart__weeks {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-stone-400);
}

/* Fig. 2 — role decomposition matrix. One row per certified task; each row's
   strip divides that task's subtasks into twenty equal parts. Cells are
   flex:1 so every strip is exactly full-width at any container size — the
   ragged right edge was the main weakness of the source exploration. */
.matrix__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--color-stone-900);
  padding-bottom: 8px;
}
.matrix__role {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 13px;
  color: var(--text-primary);
}
.matrix__stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--color-stone-500);
  white-space: nowrap;
}

.matrix__row { padding: 14px 0; border-bottom: 1px solid var(--border-hairline); }
.matrix__row:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.matrix__rowhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 9px;
}
.matrix__task {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 13px;
  color: var(--text-primary);
}
.matrix__count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-stone-500);
  white-space: nowrap;
}

.matrix__strip { display: flex; gap: 3px; }
.matrix__cell {
  flex: 1;
  height: 16px;
  border-radius: calc(var(--radius-sm) * 1px);
  background: var(--data-fill);
}
/* A solid mid-green rather than a faded primary: the opacity ramp already
   means "confidence" elsewhere on the page, so reusing it for delegation
   status would collide. */
.matrix__cell--partial { background: var(--color-green-400); }
.matrix__cell--candidate {
  background: repeating-linear-gradient(45deg, var(--color-green-100) 0, var(--color-green-100) 2px, transparent 2px, transparent 5px);
  border: 1px solid var(--color-green-300);
}

.matrix__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
}

/* Fig. 3 — visibility ledger. A real <table>: the rows and columns are
   genuinely tabular, so scope'd headers get announced, and border-collapse
   keeps the row rules aligned across all three columns for free (the source
   exploration drew a border per cell and they landed at different heights). */
.visibility {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.visibility th,
.visibility td { padding: 12px 0; }

.visibility thead th {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-stone-900);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: center;
}
.visibility tbody th {
  font-weight: var(--font-weight-regular);
  font-size: 12px;
  color: var(--text-secondary);
  padding-right: 12px;
}
.visibility tbody tr { border-bottom: 1px solid var(--border-hairline); }
.visibility tbody tr:last-child { border-bottom: 0; }
.visibility td { text-align: center; }
.visibility__col { width: 116px; }

/* The two data columns are fixed-width, so on a narrow viewport they starve
   the label column and "k-anonymous" starts breaking at its hyphen. Give the
   labels the room back rather than letting the table go horizontally scrollable. */
@media (max-width: 620px) {
  .visibility__col { width: 76px; }
  .visibility thead th { font-size: 10px; letter-spacing: 0.04em; }
  .visibility tbody th { padding-right: 8px; }
}

/* The organization's column is tinted its full height. A near-empty column
   beside a full one IS the argument, so the emptiness should be the first
   thing the eye lands on rather than something you work out row by row. */
.visibility__org { background: var(--bg-inset); }

/* The one row the organization can see. Marking the exception is what makes
   the rest of the column legible as deliberate. */
.visibility__row.is-shared th { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.visibility__row.is-shared .visibility__org { background: var(--accent-subtle); }

.visibility__note { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.visibility__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: calc(var(--radius-pill) * 1px);
  background: var(--data-fill);
}
/* Nil marker, per the usual convention for an empty cell in a printed table.
   Deliberately not an outlined dot: outline already means "modeled" in
   Figs. 1 and 2, and reusing it here would read as "partially". */
.visibility__never { color: var(--color-stone-400); font-size: 12px; }

.visibility__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-stone-500);
}
.visibility__legend span { display: inline-flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------------------
   Stat ledger
   -------------------------------------------------------------------------- */

.ledger {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.ledger__grid {
  display: grid;
  grid-template-columns: 5fr 3fr 3fr 3fr;
}

.stat { padding: 28px 24px; border-right: 1px solid var(--border-hairline); }
.stat--lead {
  padding: 28px 32px 28px 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
.stat--last { padding-right: 0; border-right: 0; }

.stat__num {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__num--xl { font-size: 52px; }

.stat__label {
  font-size: calc(var(--font-size-caption) * 1px);   /* 13 */
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 8px;
}
.stat__label--inline { margin-top: 0; max-width: 20ch; }

/* --------------------------------------------------------------------------
   Sections & § markers
   -------------------------------------------------------------------------- */

.section { padding: 96px 0; border-bottom: 1px solid var(--border-hairline); }
.section--snug  { padding: 72px 0; }
.section--airy  { padding: 112px 0; }
.section--surface { background: var(--bg-surface); }
.section--dark {
  background: var(--color-green-900);
  border-bottom: 0;
}

.section__grid {
  display: grid;
  grid-template-columns: var(--marker-col) 1fr;
  gap: 40px;
}

.marker {
  border-top: 1px solid var(--border-strong);
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.marker--on-dark {
  border-top-color: var(--on-dark-rule);
  color: var(--color-green-300);
}
.marker__name { display: block; }

/* --------------------------------------------------------------------------
   Template breaks — §01 and §06 deliberately step out of the
   marker-column-plus-content armature the other five sections share, so the
   page reads as a composition rather than one layout repeated seven times.
   In both, the marker becomes a full-width header rule instead of a side rail.
   -------------------------------------------------------------------------- */

.marker--top { margin-bottom: 40px; }

/* §01 — full-bleed statement. No side rail, and the type steps up to become
   the loudest moment on the page after the h1, which suits the section
   carrying the argument's premise. */
.section--statement .statement { font-size: 50px; max-width: 32ch; }
.section--statement .statement__after { max-width: 62ch; margin-top: 36px; }

/* §07 — the closing ask, given the same full-bleed treatment as §01 so the two
   dark bands read as a matched pair framing the argument: premise stated big
   at the top, ask stated big at the bottom. Deliberately not centred — a dark
   band with one centred button is the most templated ending in the category. */
.section--closing .h2 { font-size: 56px; max-width: 26ch; }
.section--closing .sub { max-width: 54ch; }

/* §06 — the two figures escape the container and run edge to edge. Deliberately
   rhymes with the stat ledger under the hero (same surface, same hairlines,
   same divided cells) so the page opens on a ledger of claims and closes on a
   ledger of evidence. */
.section--evidence .pull--wide { font-size: 38px; max-width: 40ch; }
/* The band is the section's last child and closes itself with a hairline, so
   the usual bottom padding left 72px of dead space between two boundaries.
   Drop it onto §07 flush, matching how the stat ledger meets §01.
   Doubled selector on purpose: the responsive `padding: 64px 0` shorthand has
   equal specificity and lands later, so a single class loses on mobile. */
.section.section--evidence { padding-bottom: 0; }

.evidence-band {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  margin-top: 48px;
}
.evidence-band__grid { display: grid; grid-template-columns: 1fr 1fr; }
.evidence-band__cell {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 34px 40px 34px 0;
}
.evidence-band__cell + .evidence-band__cell {
  border-left: 1px solid var(--border-hairline);
  padding-left: 40px;
  padding-right: 0;
}
.evidence-band__cell .stat__label { margin-top: 0; max-width: 26ch; }

/* Dark-section statement type */
.statement {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-stone-50);
  max-width: 30ch;
  text-wrap: balance;
}
.statement__after {
  font-size: 16px;
  line-height: 1.7;
  color: var(--on-dark-body);
  margin-top: 32px;
  max-width: 56ch;
}

.split { display: grid; gap: 64px; }
.split--method   { grid-template-columns: 5fr 6fr; align-items: start; }
.split--trust    { grid-template-columns: 5fr 6fr; align-items: start; }

/* --------------------------------------------------------------------------
   Comparison table (Table 1)
   -------------------------------------------------------------------------- */

.compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
.compare thead tr { background: var(--bg-inset); }
.compare th {
  padding: 14px 28px;
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--border-hairline);
}
.compare th:first-child,
.compare td:first-child { border-right: 1px solid var(--border-hairline); }
.compare td { padding: 22px 28px; vertical-align: top; }
.compare tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border-hairline); }

.compare__q {
  font-family: var(--font-display);
  font-size: calc(var(--font-size-h3) * 1px);        /* 21 */
  line-height: 1.35;
  color: var(--text-muted);
}
.compare__q--ours { color: var(--text-primary); }

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.products { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.pcard {
  background: var(--bg-page);
  border-radius: calc(var(--radius-lg) * 1px);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pcard--projected { border: 1.5px dashed var(--color-green-300); }
.pcard--observed  { border: 1px solid var(--color-green-700); }

.pcard__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.pcard__kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-accent);
}

.pill {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-inset);
  border: 1px solid var(--border-hairline);
  border-radius: calc(var(--radius-pill) * 1px);
  padding: 5px 12px;
  white-space: nowrap;
}
.pill--accent {
  color: var(--text-accent);
  background: var(--accent-subtle);
  border-color: var(--color-green-200);
}

.pcard__list { margin-top: 4px; display: flex; flex-direction: column; }
.pcard__list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  padding: 11px 0;
  border-top: 1px solid var(--border-hairline);
}

.bullet {
  width: 8px; height: 8px;
  border-radius: calc(var(--radius-sm) * 1px);
  flex-shrink: 0;
  position: relative;
  top: 2px;
}
.bullet--solid { background: var(--data-fill); }
.bullet--tint  { background: var(--data-projected-tint); box-shadow: inset 0 0 0 1.5px var(--color-green-300); }

/* --------------------------------------------------------------------------
   Trust principles & compliance strip
   -------------------------------------------------------------------------- */

.principles { display: flex; flex-direction: column; }
.principle {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--border-hairline);
}
.principle:first-child { border-top-color: var(--border-strong); }
.principle:last-child  { border-bottom: 1px solid var(--border-hairline); }

.principle__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-accent);
  padding-top: 2px;
}
.principle__title {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 15px;
  margin-bottom: 4px;
}
.principle__body { font-size: 14px; line-height: 1.6; color: var(--text-muted); }

.compliance {
  margin-top: 56px;
  border-top: 1px solid var(--border-hairline);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Evidence
   -------------------------------------------------------------------------- */

/* Field strip — a thin band between §01 and §02. Surface fill and a closing
   hairline separate it from the section below; the dark band above supplies
   its own top edge. */
.fieldstrip {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-hairline);
  padding: 22px 0;
}
.logos {
  display: flex;
  gap: 20px 36px;
  flex-wrap: wrap;
  align-items: baseline;
}
.logos__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text-disabled);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--color-green-900);
  border-top: 1px solid var(--on-dark-hairline);
  padding: 28px 0;
}
.footer__sources {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--on-dark-faint);
  margin-bottom: 20px;
  max-width: 88ch;
}
.footer__sources span:target { color: var(--on-dark); }

.footer__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid var(--on-dark-hairline);
  padding-top: 20px;
}
.footer__logo {
  display: block;
  height: 14px;
  width: auto;
  /* The supplied mark is charcoal-on-transparent only; force it to the light
     wordmark used elsewhere in dark sections rather than waiting on a second,
     pre-inverted asset. */
  filter: brightness(0) invert(1);
}
.footer__links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer__links a {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.footer__links a:hover { color: var(--on-dark); }
.footer__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--on-dark-dim);
}

/* --------------------------------------------------------------------------
   Walkthrough modal — native <dialog> for free focus trap + Esc
   -------------------------------------------------------------------------- */

.modal {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100dvh;
  margin: 0;
  padding: 24px;
  border: 0;
  background: transparent;
  overflow: auto;
  display: none;
  place-items: center;
}
.modal[open] { display: grid; }
.modal::backdrop {
  background: var(--scrim);
  backdrop-filter: blur(3px);
}

.modal__panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: calc(var(--radius-lg) * 1px);
  box-shadow: var(--modal-shadow);
  padding: 40px;
  width: 440px;
  max-width: 100%;
}

.modal__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: 26px;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.modal__sub { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }

.fields { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: calc(var(--font-size-label) * 1px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.field input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius-md) * 1px);
  background: var(--bg-page);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input::placeholder { color: var(--text-disabled); }
.field input:focus-visible {
  outline: none;
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) * 1px) var(--accent-muted);
}
.field input[aria-invalid="true"] { border-color: var(--border-error); }

.field__error {
  font-size: 13px;
  color: var(--text-error);
  margin-top: 12px;
}

.modal__actions { display: flex; gap: 10px; margin-top: 24px; }

.modal__done { text-align: center; padding: 8px 0; }
.modal__done-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-medium);
  font-size: 34px;
  color: var(--text-accent);
  margin-bottom: 10px;
}
.modal__done-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Responsive
   The design is a fixed 1180px composition; these are the collapse rules.
   --layout-breakpoint-compact = 860.
   -------------------------------------------------------------------------- */

@media (max-width: 1060px) {
  :root { --marker-col: 96px; }
  .display { font-size: 50px; }
  .h2 { font-size: 38px; }
  .h2--lg { font-size: 42px; }
  .h2--md { font-size: 34px; }
  .h2--sm { font-size: 32px; }
  .statement { font-size: 34px; }
  .section--statement .statement { font-size: 40px; }
  .section--closing .h2 { font-size: 46px; }
  .pull { font-size: 28px; }
  .split { gap: 40px; }
  .hero__grid { gap: 40px; }
  .stat__num--xl { font-size: 44px; }
}

@media (max-width: 900px) {
  .hero__grid,
  .split--method,
  .split--trust { grid-template-columns: 1fr; }
  .split--method, .split--trust { align-items: start; }

  /* Stacked figures would otherwise stretch to the full column and swamp the
     copy they illustrate. */
  .hero__grid > .figure { max-width: 560px; }
  .split > .figure { max-width: 640px; }

  .ledger__grid { grid-template-columns: 1fr 1fr; }
  .stat { padding: 24px; }
  .stat:nth-child(1), .stat:nth-child(3) { padding-left: 0; }
  .stat:nth-child(2), .stat:nth-child(4) { padding-right: 0; border-right: 0; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--border-hairline); }
  .stat--lead { display: block; padding: 24px 24px 24px 0; }
  .stat--lead .stat__label--inline { margin-top: 8px; max-width: none; }

  .products { grid-template-columns: 1fr; }

  /* Band stacks: divider goes from vertical to horizontal, number above label. */
  .evidence-band__grid { grid-template-columns: 1fr; }
  .evidence-band__cell { display: block; padding: 26px 0; }
  .evidence-band__cell .stat__label { margin-top: 8px; max-width: none; }
  .evidence-band__cell + .evidence-band__cell {
    border-left: 0;
    border-top: 1px solid var(--border-hairline);
    padding-left: 0;
  }
  .compliance { justify-content: flex-start; gap: 12px 28px; }
  .logos { gap: 24px 32px; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; }

  .section, .section--snug, .section--airy { padding: 64px 0; }
  .hero { padding: 48px 0 64px; }

  /* § marker becomes a horizontal label above its section body */
  .section__grid { grid-template-columns: 1fr; gap: 24px; }
  .marker { display: flex; gap: 10px; }

  .display { font-size: 40px; }
  .h2, .h2--lg, .h2--md, .h2--sm { font-size: 30px; }
  .statement { font-size: 28px; max-width: none; }
  .section--statement .statement { font-size: 30px; max-width: none; }
  .section--closing .h2 { font-size: 32px; max-width: none; }
  .pull { font-size: 24px; }
  .lede, .sub { font-size: 16px; }

  .marker--top { margin-bottom: 28px; }

  .compare th, .compare td { padding: 16px 20px; }
  .compare__q { font-size: 18px; }

  .pcard { padding: 28px; }
  .panel--tight { padding: 20px 20px 16px; }
  .panel--page { padding: 20px; }

  /* Section links live in the footer at this width; keep the CTA reachable. */
  .nav__link { display: none; }
}

@media (max-width: 620px) {
  .ledger__grid { grid-template-columns: 1fr; }
  .stat, .stat--lead {
    padding: 20px 0;
    border-right: 0;
    border-top: 1px solid var(--border-hairline);
  }
  .stat:first-child, .stat--lead:first-child { border-top: 0; }

  .hero__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .display { font-size: 34px; }
  .hero__actions .btn { flex: 1 1 100%; }

  .compare, .compare tbody, .compare tr, .compare td, .compare th { display: block; }
  .compare thead { display: none; }
  .compare tr { border-bottom: 1px solid var(--border-hairline); }
  .compare tr:last-child { border-bottom: 0; }
  .compare td { border-right: 0 !important; border-bottom: 0 !important; padding: 16px 20px 4px; }
  .compare td:last-child { padding-bottom: 16px; }
  .compare td::before {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .compare td:first-child::before  { content: "Usage dashboards ask"; }
  .compare td:last-child::before   { content: "SkillBench asks"; color: var(--text-accent); }

  .modal { padding: 12px; }
  .modal__panel { padding: 28px 22px; }
  .modal__actions { flex-direction: column-reverse; }
  .modal__actions .btn { width: 100%; }

  .footer__bar { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* --------------------------------------------------------------------------
   Debug panel — ⌘⇧Y / Ctrl+Shift+Y. Ported verbatim (class names and all)
   from skillbench-prototype's src/App.css so this reads as the same dev
   tool, not a lookalike. Deliberately its own chrome, not the product's
   design tokens — plain hex/system-font values throughout, on purpose.
   -------------------------------------------------------------------------- */

.dbg {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
  padding: 10px 12px 12px;
  background: #17181a;
  border: 1px solid #34363a;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;

  opacity: 0;
  visibility: hidden;
  transform-origin: bottom right;
  transform: translateY(8px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.dbg.dbg--open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 0s;
}

.dbg__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}

.dbg__tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8b8e94;
}

.dbg__hint {
  margin-left: auto;
  font-size: 10.5px;
  color: #63656a;
  white-space: nowrap;
}

.dbg__close {
  appearance: none;
  border: none;
  background: transparent;
  color: #8b8e94;
  font-size: 16px;
  line-height: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dbg__close:hover { background: #26282c; color: #fff; }
.dbg__close:focus-visible { outline: 2px solid #9db8ff; outline-offset: 1px; }

.dbg__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: none;
}

.dbg__legend {
  padding: 0 2px 6px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #8b8e94;
}

.dbg__opt {
  appearance: none;
  text-align: left;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #b9bcc2;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.dbg__opt:hover { background: #23252a; color: #fff; }

.dbg__opt--on {
  background: #2c2f36;
  border-color: #454951;
  color: #fff;
}

.dbg__opt:focus-visible { outline: 2px solid #9db8ff; outline-offset: 1px; }

@media (max-width: 640px) {
  .dbg { left: 8px; right: 8px; bottom: 8px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dbg, .dbg *, .dbg *::before, .dbg *::after {
    animation: none !important;
    transition: none !important;
  }
}