/* Critical Point Vision Site: sections.css
 * Per-section layout for the thirteen sections plus the composite baseline
 * rules (ground/scrim/halo/cutout). Owned by structure-builder. No box
 * shadows on resting cards. .prov itself stays undefined here (demos.css
 * owns it) beyond the .icon--xl sizing helper.
 */

/* ---------- section rhythm ---------- */

section[data-section] {
  position: relative;
  background: var(--background);
}

/* ================================================================ */
/* 1. hero                                                            */
/* ================================================================ */

#hero {
  min-height: 100svh;
  padding-top: var(--nav-h);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__field,
.hero__video,
.hero__still {
  display: none;
  position: absolute;
  inset: 0;
}

html[data-hero="field"] .hero__field {
  display: block;
}

html[data-hero="video"] .hero__video {
  display: block;
}

html[data-hero="still"] .hero__still {
  display: block;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(var(--ink-rgb) / 0.28), transparent 22%),
    linear-gradient(to right, rgb(var(--ink-rgb) / 0.82) 0%, rgb(var(--ink-rgb) / 0.55) 55%, transparent 90%);
}

.hero__still .comp {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  width: 100%;
  height: 100%;
}

.hero__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter-desktop);
}

.hero__copy-inner {
  /* 6 of 12 left "Keystone" alone on a line in the locked H1; 7 gives the
     display type enough measure to break cleanly */
  grid-column: 1 / 8;
  color: var(--foreground);
}

html[data-hero="video"] .hero__copy-inner,
html[data-hero="still"] .hero__copy-inner {
  color: #fff;
}

html[data-hero="video"] .hero__body,
html[data-hero="still"] .hero__body {
  color: rgb(255 255 255 / 0.85);
}

.hero__body {
  margin-top: var(--space-300);
  /* the copy column is wider than a comfortable measure for 18px body */
  max-width: 34rem;
}

.hero__line-wrap {
  display: block;
  overflow: hidden;
}

.hero__line {
  display: block;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
  margin-top: var(--space-400);
}

@media (max-width: 900px) {
  .hero__copy-inner {
    grid-column: 1 / -1;
  }
}

/* ================================================================ */
/* 2. the empty column                                                */
/* ================================================================ */

#empty-column .section-pad {
  padding-block: clamp(4rem, 10vw, 8rem);
}

.matrix-intro {
  max-width: 62ch;
  margin-bottom: var(--space-600);
}

.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-ui);
}

/* The caption used to live inside <table>, so display:block on the table at
   mobile (below) pulled it into the same horizontal scroller as the rows
   and cut it off mid-sentence at the viewport edge. It is now a plain <p>
   after the scroll wrapper (matrix-scroll) instead of a native <caption>,
   with aria-describedby on the table standing in for the lost association. */
.matrix-caption {
  text-align: left;
  margin-top: var(--space-300);
  color: var(--muted-foreground);
  font-size: var(--text-caption);
}

.matrix thead th {
  text-align: left;
  padding: var(--space-200);
  border-bottom: 2px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
}

.matrix tbody th,
.matrix tbody td {
  text-align: left;
  padding: var(--space-200);
  vertical-align: middle;
}

.matrix tbody th {
  font-weight: var(--body-bold-weight);
  display: flex;
  align-items: center;
  gap: var(--space-150);
}

.matrix tbody tr:nth-child(even) {
  background: var(--table-stripe);
}

.matrix__check {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--primary);
}

.matrix__motif {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--primary);
  flex: none;
}

.matrix tr[data-anim="matrix-col"] th {
  outline: 1.5px dashed var(--primary);
  outline-offset: 0.25rem;
  border-radius: var(--radius-md);
}

@media (max-width: 560px) {
  .matrix-scroll {
    overflow-x: auto;
    /* overlay scrollbars hid the fact that two columns sit off-screen; keep
       a visible track so the sideways scroll is discoverable */
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-500) var(--neutral-200);
    padding-bottom: var(--space-100);
  }

  .matrix {
    /* without a floor the row-label column keeps shrinking with the
       scroller and "What the work shows" wraps to four lines; a min-width
       keeps every column, including the label one, at a readable measure */
    min-width: 40rem;
  }

  .matrix-scroll::-webkit-scrollbar {
    height: 0.5rem;
  }

  .matrix-scroll::-webkit-scrollbar-track {
    background: var(--neutral-200);
    border-radius: var(--radius-full);
  }

  .matrix-scroll::-webkit-scrollbar-thumb {
    background: var(--neutral-500);
    border-radius: var(--radius-full);
  }
}

/* ================================================================ */
/* 3. provenance                                                      */
/* ================================================================ */

#provenance .splash {
  padding-block: clamp(4rem, 10vw, 8rem);
}

.provenance__head {
  text-align: center;
  margin-bottom: var(--space-800);
}

.provenance__head h2 {
  color: var(--primary-foreground);
}

.provenance__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-400);
}

.prov-poster {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: var(--space-300);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-xl);
}

.prov-poster .icon--xl {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

/* demos.css owns .prov's colors/padding/pill shape; this poster usage is
   much larger than the compact chip it was designed for, so the long labels
   ("Signed by the institution") need to wrap instead of overflowing the
   card at this scale */
.prov-poster .prov {
  display: flex;
  align-items: center;
  white-space: normal;
  max-width: 100%;
  min-width: 0;
  /* "Attested by a named person" and "Signed by the institution" wrap to two
     lines while the others stay on one, so the four descriptions below start
     at different heights. Reserve room for two lines on all four. */
  min-height: calc(var(--text-h4) * 2.4);
}

.prov-poster .prov__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  /* demos.css sets line-height: 1 for the compact one-line chip; these
     labels wrap at poster scale and need room between the lines */
  line-height: 1.2;
  white-space: normal;
}

.prov-poster__desc {
  color: rgb(255 255 255 / 0.9);
  font-size: var(--text-body);
}

.provenance__closing {
  text-align: center;
  margin-top: var(--space-800);
  color: rgb(255 255 255 / 0.9);
  max-width: 48ch;
  margin-inline: auto;
  /* avoids the one-word widow ("own.") without touching copy */
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .provenance__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .provenance__grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================ */
/* 4. builder                                                         */
/* ================================================================ */

.builder__intro {
  max-width: 62ch;
  margin-bottom: var(--space-600);
}

.builder__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  gap: var(--space-300);
  align-items: stretch;
}

.builder__bank {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.bank-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-300);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
  transition: opacity var(--duration-base) var(--ease-inside);
}

.bank-row[data-selected="false"] {
  opacity: 0.55;
}

.bank-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
}

.bank-row__snippet {
  color: var(--muted-foreground);
  font-size: var(--text-ui);
}

.bank-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100);
}

.bank-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-150);
  flex-wrap: wrap;
}

.label-unverified {
  font-size: var(--text-caption);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--space-050) var(--space-150);
}

.builder__connector {
  display: flex;
  align-items: stretch;
}

.builder__links {
  width: 100%;
  height: 100%;
}

.builder__links path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.5;
  /* the inline style starts these hidden for motion.js; this default
     forces them visible so the page reads correctly with no JS */
  stroke-dashoffset: 0 !important;
}

.builder__resume {
  /* align-items: stretch on the grid otherwise pulls this to match the
     six-row bank's height, leaving ~1030px of empty paper below ~226px of
     content; let it size to its own content instead. */
  align-self: start;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-400);
}

/* the paper fill is a fixed light colour (it is meant to read as an actual
   sheet of paper, not a themed card), so in dark theme it becomes a
   near-white slab with no border definition against the dark page. Swap it
   for the themed card fill there instead of the literal paper metaphor. */
html[data-theme="dark"] .builder__resume {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
}

.builder__resume h3 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-100);
}

.builder__resume-block + .builder__resume-block {
  margin-top: var(--space-400);
}

.builder__resume-block p {
  color: rgb(27 20 18 / 0.72);
  font-size: var(--text-ui);
}

html[data-theme="dark"] .builder__resume-block p {
  color: var(--muted-foreground);
}

.builder__note {
  margin-top: var(--space-400);
  color: var(--muted-foreground);
  max-width: 62ch;
}

@media (max-width: 900px) {
  .builder__grid {
    grid-template-columns: 1fr;
  }

  .builder__connector {
    display: none;
  }
}

/* ================================================================ */
/* 5 + 6 + 9. demo frames (shared shell; demos.css styles the mounted content) */
/* ================================================================ */

.demo {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  overflow: hidden;
}

.demo__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-150);
  padding: var(--space-150) var(--space-200);
  border-bottom: 1px solid var(--border);
  background: var(--secondary);
}

.demo__dots {
  display: inline-flex;
  gap: var(--space-075);
}

.demo__dots span {
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--neutral-400);
  display: inline-block;
}

.demo__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  margin-left: var(--space-100);
}

.demo__body {
  padding: var(--space-300);
  min-height: 13.75rem;
}

.demo__body:empty::before {
  content: "";
  display: block;
  min-height: 11.25rem;
}

#day-view .demo,
#verify .demo,
#employers .demo {
  margin-top: var(--space-600);
}

/* ================================================================ */
/* 6. verify                                                          */
/* ================================================================ */

#verify {
  overflow: hidden;
}

#verify .splash--blue {
  position: absolute;
  inset: 0 0 0 auto;
  left: 45%;
  width: 55%;
  border-radius: 0;
  margin-inline: 0;
  z-index: 0;
}

.verify__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-600);
  align-items: start;
}

.verify__copy {
  max-width: 44ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
  margin-top: var(--space-400);
  position: relative;
  z-index: 1;
}

/* the wrap has no own background at desktop: the section-level .splash--blue
   sibling above already covers the full right column height there. It only
   grows a background of its own at mobile (below), sized to its one child
   (the demo card) instead of a percentage-of-section guess. */
.verify__demo-wrap {
  position: relative;
}

@media (max-width: 900px) {
  /* Percentage-of-section-height positioning can't track where the demo
     card actually lands once the layout stacks to one column, and the
     guess used to cut across the middle of the card. Hide that block and
     give the wrap around the demo its own full-bleed background instead:
     it is sized by its content, so the card always sits entirely on it. */
  #verify .splash--blue {
    display: none;
  }

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

  .verify__demo-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--chart-2);
    z-index: 0;
  }

  .verify__demo-wrap .demo {
    position: relative;
    z-index: 1;
    margin-top: 0;
  }

  .verify__demo-wrap {
    padding-block: var(--space-500);
    margin-top: var(--space-600);
  }
}

/* ================================================================ */
/* composites (baseline; composites.css overrides the custom properties) */
/* ================================================================ */

.comp {
  position: relative;
  aspect-ratio: var(--comp-aspect, 2.732);
  border-radius: var(--comp-radius, 1.125rem);
  background: var(--comp-fill, var(--primary-100));
  overflow: visible;
}

.comp__ground {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* The free composite is the only one whose layers all sit inside the card at
   rest, so the parallax travel (-8% on the ground, +5% on the cutout) was the
   only thing pushing past its edges: the ground vacated the bottom and showed
   --comp-fill as a band under the photo, and the cutout hung below it. Clip
   this one card and give its ground enough bleed to cover the full travel.
   The hero and testimonial cutouts overhang on purpose and stay unclipped. */
[data-composite="free"] {
  overflow: hidden;
}

.comp__ground[data-anim="parallax"] {
  top: -10%;
  bottom: auto;
  height: 120%;
}

.comp__scrim {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--comp-scrim-w, 60%);
  height: var(--comp-scrim-h, 60%);
  border-radius: 50%;
  background: var(--comp-scrim-color, rgb(0 74 117 / 0.5));
  backdrop-filter: blur(var(--comp-scrim-blur, 4px));
}

/* The hero-still scrim is a flat-filled ellipse with a hard traceable
   border: everything inside reads bluer and softer, everything outside
   reads warm and sharp, with a crisp curve between the two. Mask the
   element's own edge to a soft stop so the tint (and the backdrop blur
   behind it) fades out instead of cutting off. */
[data-composite="hero"] .comp__scrim {
  mask-image: radial-gradient(ellipse at center, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 55%, transparent 100%);
}

.comp__halo {
  position: absolute;
  left: calc(var(--comp-halo-x, 50%) - var(--comp-halo-size, 50%) / 2);
  top: calc(var(--comp-halo-y, 50%) - var(--comp-halo-size, 50%) / 2);
  width: var(--comp-halo-size, 50%);
  height: var(--comp-halo-size, 50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 178 152 / var(--comp-halo-alpha, 0.53)), transparent);
  pointer-events: none;
}

.comp__cutout {
  position: absolute;
  bottom: 0;
  right: var(--comp-cutout-right, 17.1%);
  width: var(--comp-cutout-w, 40.9%);
  height: var(--comp-cutout-h, 106.4%);
  object-fit: contain;
  object-position: bottom;
}

/* ================================================================ */
/* 7. free                                                            */
/* ================================================================ */

.free__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-600);
  align-items: center;
}

.free__copy p + p {
  margin-top: var(--space-300);
}

@media (max-width: 900px) {
  .free__grid {
    grid-template-columns: 1fr;
  }

  .free__grid .comp {
    margin-top: var(--space-600);
  }

  .free__grid .comp__cutout {
    width: 104%;
    right: -2%;
    height: 112%;
  }
}

/* ================================================================ */
/* 8. plumbing                                                        */
/* ================================================================ */

#plumbing {
  background: var(--secondary);
}

html[data-theme="dark"] #plumbing {
  background: var(--card);
}

.plumbing__intro {
  max-width: 62ch;
  margin-bottom: var(--space-600);
}

.plumbing-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-500) var(--space-600);
}

.plumbing-list li {
  display: flex;
  gap: var(--space-200);
}

.plumbing-list .icon-wrap {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.plumbing-item__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  margin-bottom: var(--space-050);
}

.plumbing-item__desc {
  color: var(--muted-foreground);
  font-size: var(--text-ui);
}

@media (max-width: 900px) {
  .plumbing-list {
    grid-template-columns: 1fr;
  }
}

/* ================================================================ */
/* 9. employers                                                       */
/* ================================================================ */

.employers__intro {
  max-width: 62ch;
  margin-bottom: var(--space-600);
}

/* ================================================================ */
/* 10. outcomes                                                       */
/* ================================================================ */

.outcomes__intro {
  max-width: 62ch;
  margin-bottom: var(--space-600);
}

.sample {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-500);
  background: var(--card);
}

.sample__stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  font-size: var(--text-caption);
  color: var(--muted-foreground);
  border: 1px dashed var(--border);
  border-radius: var(--radius-full);
  padding: var(--space-075) var(--space-200);
  margin-bottom: var(--space-500);
}

.outcomes__figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-400);
  margin-bottom: var(--space-800);
}

.figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  color: var(--primary);
}

.figure-tile__label {
  display: block;
  margin-top: var(--space-100);
  font-size: var(--text-ui);
  color: var(--muted-foreground);
  max-width: 26ch;
}

.outcomes__charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-600);
  margin-bottom: var(--space-500);
}

.chart h3 {
  font-size: var(--text-ui);
  font-family: var(--font-body);
  font-weight: var(--body-bold-weight);
  margin-bottom: var(--space-200);
}

.chart svg {
  width: 100%;
  height: auto;
}

.chart__legend {
  display: flex;
  gap: var(--space-300);
  margin-top: var(--space-150);
  font-size: var(--text-caption);
  color: var(--muted-foreground);
}

.chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-075);
}

.chart__swatch {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 2px;
  display: inline-block;
}

.chart__bar-label {
  /* SVG text is sized in the local viewBox coordinate system, then scaled
     by the viewBox-to-rendered-width ratio like any other shape in the
     chart; at this chart's ~1.9x scale, var(--text-caption) (12px) would
     render at roughly 22-25px on screen, so this is set small in "user
     units" on purpose to land at a true ~11px caption size */
  font-size: 6px;
}

.outcomes__loop {
  color: var(--foreground);
  font-weight: var(--body-bold-weight);
}

@media (max-width: 900px) {
  .outcomes__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 560px) {
  .outcomes__figures {
    grid-template-columns: 1fr;
  }

  /* The label's "user unit" size assumes the desktop two-column ~1.9x
     scale-up (see the comment on .chart__bar-label). Single-column at this
     width the chart renders close to 1:1 with its viewBox, so the same 6
     user units come out at true ~6-7px. Set it directly in user units that
     read as ~12px at this width's near-1:1 scale. */
  .chart__bar-label {
    font-size: 12px;
  }
}

/* ================================================================ */
/* 11. testimonials                                                    */
/* ================================================================ */

/* The featured portrait's halo is centred on a .comp box that already pokes
   above the card on purpose (see the comment on .testimonial-card--featured
   .comp below); the halo's own radius then reaches further up than that box
   and bleeds past the section's top edge into the sticky nav strip. Clip at
   the section, not the card: the card must stay overflow:visible so the
   cutout's intentional overhang above it is unaffected. */
#testimonials {
  overflow: hidden;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-400);
}

.testimonial-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-500);
  background: var(--card);
}

.testimonial-card--featured {
  grid-column: 1;
  grid-row: 1 / -1;
  position: relative;
  overflow: visible;
  /* the portrait breaks the top edge by a fixed amount (space-500); this
     padding just needs to clear that fixed overlap, not the portrait's
     full (variable, aspect-ratio-driven) height */
  padding-top: calc(var(--space-500) * 2);
}

.testimonial-card--featured .comp {
  position: absolute;
  /* anchor from the bottom so only a fixed sliver (space-500) pokes into
     the card, regardless of how tall the portrait renders at 30% width */
  bottom: calc(100% - var(--space-500));
  right: var(--space-500);
  width: 26%;
  aspect-ratio: 3 / 4;
}

/* The cutout's own bottom edge is a flat photo crop with no relationship to
   the card's top border, so it ends in mid-air over the card face with no
   feather to explain the cut. Fade the last fifth of the image to
   transparent so it dissolves into the card instead of stopping dead. */
.testimonial-card--featured .comp__cutout {
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
}

.testimonial-card--featured blockquote {
  font-size: var(--text-h3);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-300);
}

.testimonial-card--plain {
  grid-column: 2;
}

.testimonial-card--plain blockquote {
  font-size: var(--text-lead);
  margin: var(--space-300) 0;
}

.testimonial__person {
  display: flex;
  align-items: center;
  gap: var(--space-200);
}

.testimonial__avatar {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--neutral-400);
  color: var(--neutral-1000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
}

.testimonial__name {
  font-weight: var(--body-bold-weight);
}

.testimonial__role {
  color: var(--muted-foreground);
  font-size: var(--text-ui);
}

@media (max-width: 900px) {
  .testimonials__grid {
    grid-template-columns: 1fr;
  }

  .testimonial-card--featured,
  .testimonial-card--plain {
    grid-column: 1;
    grid-row: auto;
  }

  .testimonial-card--featured {
    padding-top: var(--space-500);
  }

  .testimonial-card--featured .comp {
    /* stays relative (not static) so the absolutely-positioned cutout/halo
       inside it keep this box as their containing block instead of
       escaping to a distant positioned ancestor. The desktop rule's
       bottom/right offsets are written against absolute positioning (they
       pull the box up out of the card by design); relative positioning
       reads those same offsets as a drag off its own in-flow spot, so they
       must be cleared here or the portrait ends up ~450px above the card. */
    position: relative;
    bottom: auto;
    right: auto;
    width: 40%;
    margin-bottom: var(--space-300);
  }
}

/* ================================================================ */
/* 12. rules                                                          */
/* ================================================================ */

#rules .splash {
  padding-block: clamp(4rem, 10vw, 8rem);
}

#rules h2 {
  color: var(--primary-foreground);
  margin-bottom: var(--space-800);
  text-align: center;
}

.rules {
  counter-reset: rule;
  display: flex;
  flex-direction: column;
  gap: var(--space-600);
  max-width: 56rem;
  margin-inline: auto;
}

.rules li {
  counter-increment: rule;
  position: relative;
  padding-left: 4rem;
}

.rules li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  /* --primary-300 is 2.98:1 on the rust block, just under the 3:1 floor for
     24px bold; --primary-200 clears it at 3.5:1. */
  color: var(--primary-200);
}

.rules li h3 {
  font-size: var(--text-h2);
  color: #fff;
}

.rules li p {
  font-size: var(--text-lead);
  color: rgb(255 255 255 / 0.9);
  margin-top: var(--space-100);
  /* avoids the one-word widows on rules 02 and 05 without touching copy */
  text-wrap: pretty;
}

/* The section pins and lights one rule at a time, so all eight have to be on
   screen at once. In one column the list ran 1346px against a 900px viewport:
   rules 06 to 08 never appeared during the scrub, and everything except the
   last one was left sitting at 0.25 opacity afterwards. Four rows in two
   columns fit, and the scrub still reads top-to-bottom, then across. */
@media (min-width: 1024px) {
  #rules .splash {
    /* pinned at top top, so the heading needs to clear the sticky bar */
    padding-block: calc(var(--nav-h) + var(--space-300)) clamp(3rem, 6vw, 4.5rem);
  }

  #rules h2 {
    margin-bottom: var(--space-600);
  }

  .rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* version 2 has four items: two rows of two, read across then down */
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: row;
    column-gap: var(--space-800);
    row-gap: var(--space-600);
    max-width: 72rem;
  }

  .rules li p {
    font-size: var(--text-body);
  }
}

/* ================================================================ */
/* 13. close                                                          */
/* ================================================================ */

#close {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 14vw, 11rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.close__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.close__scrim {
  position: absolute;
  inset: 0;
  /* the flat 0.62 ink left the orange key phrase at about 2:1 over the
     photo's white wall (large text needs 3:1) and the white line under it at
     2.3:1 in its brightest spots. Deeper behind the copy, the old 0.62 at
     the edges, so the photograph still reads around it. Ink only, no hue. */
  background: radial-gradient(ellipse 72% 68% at 50% 50%, rgb(var(--ink-rgb) / 0.86) 0%, rgb(var(--ink-rgb) / 0.82) 50%, rgb(var(--ink-rgb) / 0.62) 100%);
  z-index: 1;
}

/* on a phone the copy fills the frame edge to edge, so the scrim is even */
@media (max-width: 560px) {
  .close__scrim { background: rgb(var(--ink-rgb) / 0.84); }
}

.close__content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 44rem;
  margin-inline: auto;
}

.close__content h2 {
  color: #fff;
}

.close__content p {
  color: rgb(255 255 255 / 0.94);
  font-size: var(--text-lead);
  max-width: 52ch;
  margin: var(--space-300) auto var(--space-600);
}

.close__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
  justify-content: center;
}

/* ================================================================ */
/* footer                                                              */
/* ================================================================ */

#site-footer {
  border-top: 1px solid var(--border);
  padding-block: clamp(3rem, 8vw, 5rem);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-800);
  flex-wrap: wrap;
  margin-bottom: var(--space-800);
}

.footer__wordmark {
  /* two-line lockup, viewBox 342x108: the 26-unit type scales with this
     height, so 4.5rem renders the type at about 17px */
  height: 4.5rem;
  width: auto;
  color: var(--wordmark); /* brand rust, set in nav.css */
  /* the viewBox starts 24 units left of the glyphs, which is 16px of dead
     space at this height (24 * 72 / 108); shift the mark left by that amount
     so it lands on the page's grid line like everything else */
  transform: translateX(-1rem);
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-400);
  align-items: start;
  flex: 1;
  max-width: 64rem;
}

.footer__column-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  margin-bottom: var(--space-200);
}

.footer__column ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-050);
  list-style: none;
  padding-left: 0;
}

.footer__column a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--muted-foreground);
  font-size: var(--text-ui);
  text-decoration: none;
}

.footer__column a:hover {
  color: var(--foreground);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-300);
  flex-wrap: wrap;
  padding-top: var(--space-500);
  border-top: 1px solid var(--border);
}

.footer__legal {
  color: var(--muted-foreground);
  font-size: var(--text-caption);
  max-width: 60ch;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.theme-toggle .icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
  display: inline-flex;
}

@media (max-width: 1100px) {
  .footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .footer__columns {
    grid-template-columns: 1fr;
  }
}

/* ================================================================ */
/* Version 2 (2026-09-17): sections added for the investor narrative */
/* Tokens only. Flat fills, straight edges, no gradients.            */
/* ================================================================ */

.section-intro {
  max-width: 62ch;
  margin-bottom: var(--space-600);
}

.plumbing__intro .lead,
.section-intro .lead {
  margin-top: var(--space-200);
}

.matrix-intro .lead,
.verify__copy .lead,
.builder__intro .lead,
.employers__intro .lead {
  margin-top: var(--space-200);
}

/* "Part" cell in the comparison: a word, never colour alone */
.matrix__part {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--space-025) var(--space-150);
}

/* concept stamp on the three demos */
.sample__stamp--demo {
  margin-top: var(--space-300);
  margin-bottom: 0;
  background: var(--card);
}

.verify__hint {
  margin-top: var(--space-300);
  color: var(--muted-foreground);
}

/* ---------- 2. the problem ---------- */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-400);
}

.problem-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: var(--space-400);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.problem-card h3 {
  font-size: var(--text-h4);
  text-wrap: balance;
}

.problem-card > p {
  color: var(--muted-foreground);
}

.problem-card__list {
  margin-top: auto;
  padding-top: var(--space-300);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  font-size: var(--text-ui);
}

.problem-card__list li {
  position: relative;
  padding-left: var(--space-250);
}

.problem-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: var(--primary);
}

/* ---------- 3. why now ---------- */

#why-now .splash {
  padding-block: clamp(4rem, 10vw, 8rem);
}

#why-now h2 {
  color: #fff;
  margin-bottom: var(--space-600);
}

.forces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-600);
}

.force {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding-top: var(--space-300);
  border-top: 1px solid rgb(255 255 255 / 0.35);
}

.force h3 {
  font-size: var(--text-h3);
  color: #fff;
  text-wrap: balance;
}

.force p {
  color: rgb(255 255 255 / 0.92);
  font-size: var(--text-lead);
}

.forces__closing {
  margin-top: var(--space-800);
  max-width: 40ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  text-wrap: balance;
}

/* ---------- 5. the solution (provenance head gains a lead) ---------- */

.provenance__lead {
  max-width: 62ch;
  margin: var(--space-300) auto 0;
  font-size: var(--text-lead);
  color: rgb(255 255 255 / 0.92);
}

/* ---------- 8. employers: the four points under the demo ---------- */

.employers__points {
  margin-top: var(--space-800);
}

.employers__points .icon-wrap {
  background: var(--secondary);
}

/* ---------- 9. what each side gets ---------- */

.sides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-400);
}

.side {
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
  padding-top: var(--space-300);
  border-top: 2px solid var(--primary);
}

.side h3 {
  font-size: var(--text-h3);
  text-wrap: balance;
}

.side > p:last-child {
  color: var(--muted-foreground);
}

.sides__model {
  margin-top: var(--space-600);
  padding: var(--space-300) var(--space-400);
  background: var(--secondary);
  border-radius: var(--radius-lg);
  max-width: 72ch;
}

html[data-theme="dark"] .sides__model {
  background: var(--card);
}

/* ---------- 10. guardrails ---------- */

#guardrails {
  background: var(--secondary);
}

html[data-theme="dark"] #guardrails {
  background: var(--card);
}

.guardrails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-500) var(--space-600);
}

.guardrail h3 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-100);
  text-wrap: balance;
}

.guardrail p {
  color: var(--muted-foreground);
}

/* #plumbing follows #guardrails; give it the page ground so two tinted
   bands do not run together */
#guardrails + #plumbing,
html[data-theme="dark"] #guardrails + #plumbing {
  background: var(--background);
}

#guardrails + #plumbing .icon-wrap {
  background: var(--secondary);
}

/* ---------- 13. where we are ---------- */

/* Five company phases (Eric, 2026-09-21). The two with the most to report, the
   finished one and the current one, take half the row each; the three still
   ahead share the second row. */
.phases {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-400);
  list-style: none;
  padding: 0;
  margin: 0;
}

.phase { grid-column: span 2; }
.phase:nth-child(-n + 2) { grid-column: span 3; }

.phase {
  padding: var(--space-400);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.phase__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-200);
  flex-wrap: wrap;
}

.phase__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
}

.phase__status {
  font-size: var(--text-caption);
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: var(--space-050) var(--space-200);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}

.phase__status--now {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.phase > p:last-child {
  color: var(--muted-foreground);
}

.phase__num {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-ui);
  color: var(--primary);
  margin-bottom: var(--space-050);
}

html[data-theme="dark"] .phase__num { color: var(--primary-400); }

.phase__status--done {
  background: transparent;
  border-color: var(--success);
  color: var(--success);
}

html[data-theme="dark"] .phase__status--done { border-color: #6FBF86; color: #6FBF86; }

.phase__list {
  list-style: none;
  padding: 0;
  margin: var(--space-100) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
}

.phase__item {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-150);
  align-items: start;
  color: var(--muted-foreground);
}

.phase__item--done,
.phase__item--now { color: var(--foreground); }

.phase__tick {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
  color: var(--success);
}

html[data-theme="dark"] .phase__tick { color: #6FBF86; }

/* an open ring for what is planned, a filled one for what is under way */
.phase__dot {
  width: 0.625rem;
  height: 0.625rem;
  margin: 0.4375rem 0.3125rem 0;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--neutral-600);
}

.phase__item--now .phase__dot {
  background: var(--primary);
  border-color: var(--primary);
}

/* ---------- 14. why us ---------- */

.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-600);
}

.person {
  display: flex;
  gap: var(--space-300);
  align-items: flex-start;
}

.person__avatar {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background: var(--chart-2);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.person h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-150);
}

.person p:last-child {
  color: var(--muted-foreground);
}

.people__company {
  margin-top: var(--space-600);
  font-size: var(--text-ui);
  color: var(--muted-foreground);
}

/* ---------- 15. placeholders for testimony ---------- */

.quote-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-400);
}

.quote-slot {
  min-height: 11rem;
  padding: var(--space-400);
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  color: var(--muted-foreground);
}

.quote-slot__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .phase,
  .phase:nth-child(-n + 2) { grid-column: auto; }

  .problem-grid,
  .sides,
  .phases,
  .quote-slots,
  .forces,
  .guardrails,
  .people {
    grid-template-columns: 1fr;
  }

  .forces {
    gap: var(--space-500);
  }
}

/* The fallback PNG is the settled mark. When the live field is about to play an
   entrance, do not let that settled image paint first and then vanish.
   hero-field.js forces the image back to opacity 1 inline whenever the canvas is
   not drawing, so a WebGL failure still shows it. */
html[data-motion="full"][data-hero="field"]:not([data-field-enter="instant"]) .hero__fallback {
  opacity: 0;
}

/* ================================================================ */
/* Stat block and source line (the pitch deck's big-number treatment) */
/* ================================================================ */

.stat {
  --stat-rule: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-150);
}

.stat[data-side="employers"] { --stat-rule: var(--success); }
.stat[data-side="students"] { --stat-rule: var(--chart-2); }
.stat[data-side="universities"] { --stat-rule: var(--primary); }

html[data-theme="dark"] .stat[data-side="employers"] { --stat-rule: #6FC48C; }
html[data-theme="dark"] .stat[data-side="students"] { --stat-rule: #5F9FCB; }
html[data-theme="dark"] .stat[data-side="universities"] { --stat-rule: var(--hl-on-ink); }

:is(h2, h3) + .stat { margin-top: var(--space-400); }
.split__copy > .stat + .stat { margin-top: var(--space-400); }

.stat__rule {
  display: block;
  width: 4rem;
  height: 2px;
  background: var(--stat-rule);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  letter-spacing: var(--display-track);
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}

.stat__label {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--muted-foreground);
  max-width: 28ch;
}

/* on a rust or ink ground the value and label go pale and the rule goes rose */
.splash--rust .stat,
#close .stat {
  --stat-rule: var(--hl-on-rust);
}

.splash--rust .stat__value,
#close .stat__value {
  color: var(--hl-on-rust);
}

.splash--rust .stat__label,
#close .stat__label {
  color: #fff;
}

@media (max-width: 560px) {
  .stat__value { font-size: 3.5rem; }
}

.srcline {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* 0.85 measured 4.45:1 on rust #B7410E; 0.92 clears 4.5:1 */
.splash--rust .srcline,
#close .srcline {
  color: rgb(255 255 255 / 0.92);
}

/* ================================================================ */
/* Version 3 (2026-10-02, deck alignment): blocks drawn from the     */
/* pitch deck slides. Flat fills, 1px lines, no gradients, no resting */
/* shadows. Tokens first; the side colours are the only new values.   */
/* ================================================================ */

/* ---------- side colours (shared by chips, stats, hub, pays, matrix) ---------- */
/* --side is the fill (white type on it clears 4.5:1); --side-text is the same
   colour as type, lightened on the dark theme; --side-tint is the circle fill. */

[data-side="employers"] { --side: #2E6F40; --side-text: #2E6F40; --side-tint: #E6F0E8; }
[data-side="students"] { --side: #004A75; --side-text: #004A75; --side-tint: #E3EDF3; }
[data-side="universities"] { --side: #B7410E; --side-text: #B7410E; --side-tint: #FBE9E1; }

html[data-theme="dark"] [data-side="employers"] { --side-text: #6FC48C; --side-tint: rgb(111 196 140 / 0.16); }
html[data-theme="dark"] [data-side="students"] { --side-text: #5F9FCB; --side-tint: rgb(95 159 203 / 0.16); }
html[data-theme="dark"] [data-side="universities"] { --side-text: #E8683A; --side-tint: rgb(232 104 58 / 0.16); }

/* ---------- chip (was .ev-chip in evidence.css; .ev-chip stays as an alias) ---------- */

.chip,
.ev-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--side, var(--primary));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  line-height: 1;
  letter-spacing: 0.01em;
  padding: var(--space-150) var(--space-300);
  border-radius: var(--radius-full);
}

.chip--sm,
.ev-chip--sm {
  font-size: var(--text-caption);
  padding: var(--space-100) var(--space-250);
}

/* ---------- 1. photo, split ---------- */

.photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  background: var(--secondary);
}

.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo--band {
  width: 100%;
  height: 42vh;
  min-height: 16rem;
  aspect-ratio: auto;
  border-radius: 0;
}

.split {
  --split-edge: max(var(--grid-gutter-desktop), calc((100vw - var(--grid-max-width)) / 2 + var(--grid-gutter-desktop)));
  --split-inner: clamp(2rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.split > .photo {
  grid-row: 1;
  min-height: 32rem;
  aspect-ratio: auto;
  border-radius: 0;
}

.split > .photo--bleed-right { grid-column: 2; }
.split > .photo--bleed-left { grid-column: 1; }

.split > :not(.photo) {
  grid-row: 1;
  align-self: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.split:has(> .photo--bleed-right) > :not(.photo) {
  grid-column: 1;
  padding-left: var(--split-edge);
  padding-right: var(--split-inner);
}

.split:has(> .photo--bleed-left) > :not(.photo) {
  grid-column: 2;
  padding-right: var(--split-edge);
  padding-left: var(--split-inner);
}

html[data-photos="off"] .photo { display: none; }
html[data-photos="off"] .split { grid-template-columns: 1fr; }

html[data-photos="off"] .split:has(> .photo--bleed-right) > :not(.photo),
html[data-photos="off"] .split:has(> .photo--bleed-left) > :not(.photo) {
  grid-column: 1;
  padding-inline: var(--split-edge);
}

/* ---------- 2. the three sides of the problem ---------- */

.sides {
  gap: clamp(2rem, 4vw, 3.5rem);
}

.side {
  gap: var(--space-200);
  padding-top: 0;
  border-top: 0;
}

.side h3 {
  font-size: var(--text-h3);
}

.side[data-side] .stat {
  --stat-rule: var(--side);
}

.side[data-side] .stat__rule {
  background: var(--side);
}

html[data-theme="dark"] .side[data-side] .stat {
  --stat-rule: var(--side-text);
}

html[data-theme="dark"] .side[data-side] .stat__rule {
  background: var(--side-text);
}

.side > p:not(.srcline) {
  color: var(--foreground);
}

/* ---------- 3. product overview hub ---------- */

.hub__variant { display: none; }

html:not([data-model]) .hub__variant[data-model-variant="interfaces"],
html[data-model="interfaces"] .hub__variant[data-model-variant="interfaces"],
html[data-model="layers"] .hub__variant[data-model-variant="layers"],
html[data-model="levels"] .hub__variant[data-model-variant="levels"] {
  display: block;
}

/* Interfaces diagram (A3, record first; Eric chose it on 2026-10-02). A grid:
   the record disc at the left, a fan of three spokes in the middle column, and
   one row per interface on the right. Everything is in rem, so it scales with
   the fluid root size. Each node is a link to its section on How it works. */

.hub__diagram {
  --spoke-w: 4;
  position: relative;
  display: grid;
  grid-template-columns: 6rem clamp(3rem, 7%, 5rem) minmax(0, 1fr);
  grid-template-rows: repeat(3, 8.5rem);
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
}

.hub__core {
  grid-area: 1 / 1 / 4 / 2;
  align-self: center;
  position: relative;
  z-index: 3;
  width: 6rem;
  height: 6rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: #1B1412;
  color: #fff;
  text-decoration: none;
  transition: transform var(--motion-select), box-shadow var(--motion-select);
}

html[data-theme="dark"] .hub__core {
  background: #0F0B0A;
  border: 1px solid rgb(255 255 255 / 0.3);
}

.hub__core > svg { width: 2.5rem; height: 2.5rem; }

.hub__core:is(:hover, :focus-visible) {
  transform: scale(1.06);
  box-shadow: var(--shadow-3);
}

.hub__core:focus-visible,
.hub__trust:focus-visible {
  outline: var(--focus-ring-width) solid var(--ring);
  outline-offset: 3px;
}

.hub__core-tag {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: var(--space-100);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--foreground);
}

.hub__fan {
  grid-area: 1 / 2 / 4 / 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--motion-select);
}

.hub__spoke {
  fill: none;
  stroke: var(--side, var(--primary));
  stroke-width: var(--spoke-w);
  stroke-linecap: round;
  opacity: 0.5;
  transition: stroke-width var(--motion-select), opacity var(--motion-select);
}

.hub__diagram:has(.hub__node[data-side="students"]:is(:hover, :focus-visible)) .hub__spoke[data-side="students"],
.hub__diagram:has(.hub__node[data-side="universities"]:is(:hover, :focus-visible)) .hub__spoke[data-side="universities"],
.hub__diagram:has(.hub__node[data-side="employers"]:is(:hover, :focus-visible)) .hub__spoke[data-side="employers"] {
  stroke-width: 8;
  opacity: 1;
}

.hub__node {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 4.5rem minmax(13rem, 15rem) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-200);
  color: var(--foreground);
  text-decoration: none;
  transition: opacity var(--motion-select), transform var(--motion-select);
}

.hub__node[data-side="students"] { grid-area: 1 / 3; }
.hub__node[data-side="universities"] { grid-area: 2 / 3; }
.hub__node[data-side="employers"] { grid-area: 3 / 3; }

.hub__node:is(:hover, :focus-visible) { transform: translateX(0.35rem); }

.hub__node:focus-visible {
  outline: var(--focus-ring-width) solid var(--ring);
  outline-offset: 0.25rem;
  border-radius: var(--radius-lg);
}

.hub__disc {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-full);
  background-color: var(--card);
  background-image: linear-gradient(var(--side-tint), var(--side-tint));
  color: var(--side-text);
  border: 2px solid var(--side);
  transition: background var(--motion-hot), color var(--motion-hot), box-shadow var(--motion-hot);
}

.hub__disc > svg { width: 2rem; height: 2rem; }

.hub__node:is(:hover, :focus-visible) .hub__disc {
  background-color: var(--side);
  background-image: none;
  color: #fff;
  box-shadow: var(--shadow-3);
}

.hub__text { display: grid; gap: var(--space-025); }

/* the outcome is the larger line, in the side colour; the interface name sits under it */
.hub__outcome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lead);
  line-height: 1.2;
  color: var(--side-text);
  white-space: nowrap;
}

.hub__node-label {
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--muted-foreground);
}

.hub__node ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.hub__feature {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: var(--text-ui);
  line-height: 1.3;
  color: var(--foreground);
  transition: border-color var(--motion-select), background var(--motion-select);
}

.hub__feature > svg { width: 1rem; height: 1rem; flex: none; color: var(--side-text); }

.hub__node:is(:hover, :focus-visible) .hub__feature {
  border-color: var(--side);
  background: var(--side-tint);
}

/* between the stacked layout and a full-width desktop the pills drop under the text */
@media (min-width: 901px) and (max-width: 1199px) {
  .hub__diagram { grid-template-rows: repeat(3, 10.5rem); }
  .hub__node { grid-template-columns: 4.5rem minmax(0, 1fr); row-gap: var(--space-100); align-content: center; }
  .hub__node ul { grid-column: 2; }
}

/* Wide hub (the home page): the record disc at the centre, Student dashboard at the
   left, Employer interface at the right, Admin data aggregator above on a short
   spoke. Same node markup as the record-first layout; each spoke is a bar inside
   its node. Under 901px the stacked list rules further down take over. */
@media (min-width: 901px) {
  .hub__diagram--wide {
    --w: 0.375rem;
    grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 3rem;
    align-items: start;
  }

  .hub__diagram--wide .hub__node {
    grid-template-columns: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-100);
    padding-inline: var(--space-200);
  }

  .hub__diagram--wide .hub__node[data-side="students"] { grid-area: 2 / 1; }
  .hub__diagram--wide .hub__node[data-side="employers"] { grid-area: 2 / 3; }
  .hub__diagram--wide .hub__node[data-side="universities"] { grid-area: 1 / 1 / 2 / 4; justify-self: center; max-width: 40rem; }
  .hub__diagram--wide .hub__node[data-side="universities"] > ul { order: 1; margin-bottom: var(--space-100); }
  .hub__diagram--wide .hub__node[data-side="universities"] > .hub__text { order: 2; }
  .hub__diagram--wide .hub__node[data-side="universities"] > .hub__disc { order: 3; }
  /* the text block sits above the disc here, so its two lines flip: the
     interface name first, the coloured outcome nearest the disc (Eric,
     2026-10-02 evening); sizes and colours are unchanged */
  .hub__diagram--wide .hub__node[data-side="universities"] > .hub__text .hub__node-label { order: 1; }
  .hub__diagram--wide .hub__node[data-side="universities"] > .hub__text .hub__outcome { order: 2; }

  .hub__diagram--wide .hub__text { justify-items: center; }
  .hub__diagram--wide .hub__node > ul { width: 100%; }
  .hub__diagram--wide .hub__node { padding-inline: 0.25rem; }
  /* two pills on the first row, the third centred beneath them */
  .hub__diagram--wide .hub__node > ul {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 0.3rem;
  }
  .hub__diagram--wide .hub__feature:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
  .hub__diagram--wide .hub__feature { padding-inline: 0.6rem; font-size: 0.875rem; }
  .hub__diagram--wide .hub__node:is(:hover, :focus-visible) { transform: translateY(-0.35rem); }

  .hub__diagram--wide .hub__core { grid-area: 2 / 2; align-self: start; margin-top: -0.75rem; }

  .hub__diagram--wide .hub__spoke {
    position: absolute;
    background: var(--side);
    opacity: 0.5;
    transition: width var(--motion-select), height var(--motion-select), opacity var(--motion-select);
  }

  .hub__diagram--wide .hub__node[data-side="students"] .hub__spoke,
  .hub__diagram--wide .hub__node[data-side="employers"] .hub__spoke {
    height: var(--w);
    top: calc(2.25rem - var(--w) / 2);
  }

  .hub__diagram--wide .hub__node[data-side="students"] .hub__spoke { left: calc(50% + 2.25rem); right: 0; }
  .hub__diagram--wide .hub__node[data-side="employers"] .hub__spoke { right: calc(50% + 2.25rem); left: 0; }

  .hub__diagram--wide .hub__node[data-side="universities"] .hub__spoke {
    width: var(--w);
    left: calc(50% - var(--w) / 2);
    top: 100%;
    height: 3.75rem;
  }

  .hub__diagram--wide .hub__node:is(:hover, :focus-visible) .hub__spoke { --w: 0.75rem; opacity: 1; }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .hub__diagram--wide .hub__feature { font-size: 0.8125rem; padding-inline: 0.5rem; }
}

/* the record, hovered or focused: the three interfaces and their spokes step back */
.hub__diagram:has(.hub__core:is(:hover, :focus-visible)) :is(.hub__node, .hub__fan) { opacity: 0.35; }

/* the trust box: always on the page, faint until the record or the box itself is hovered or focused */
.hub__trust {
  --trust-tint: rgb(183 65 14 / 0.08);
  margin-top: var(--space-300);
  padding: var(--space-250);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  opacity: 0.45;
  scroll-margin-top: 6rem;
  transition: opacity var(--motion-select), background var(--motion-select), border-color var(--motion-select);
}

html[data-theme="dark"] .hub__trust { --trust-tint: rgb(232 104 58 / 0.14); }

.hub__trust h3 { font-size: var(--text-h4); margin-bottom: var(--space-100); }
.hub__trust p { max-width: 60ch; }

.hub__trust:is(:hover, :focus-visible),
.hub__variant:has(.hub__core:is(:hover, :focus-visible)) .hub__trust {
  opacity: 1;
  background: var(--trust-tint);
  border-color: rgb(183 65 14 / 0.35);
}

@media (hover: none) { .hub__trust { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hub__core, .hub__fan, .hub__spoke, .hub__node, .hub__disc, .hub__feature, .hub__trust { transition: none; }
  .hub__node:is(:hover, :focus-visible), .hub__core:is(:hover, :focus-visible) { transform: none; }
}

/* layers variant: three part cards */
.hub__parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-400);
}

.hub__parts > *,
.hub__part {
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
  padding: var(--space-400);
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
}

.hub__parts > [data-side] {
  border-top: 0.375rem solid var(--side);
}

.hub__parts h3 { font-size: var(--text-h3); }
.hub__parts p { color: var(--muted-foreground); }

/* levels variant: four icon + label + description rows (the old prov-poster look) */
.hub__levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-400);
}

.level {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: var(--space-300);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}

.level svg,
.level__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  color: var(--primary);
}

.level__label,
.level h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  line-height: 1.2;
}

.level__desc,
.level p {
  color: var(--muted-foreground);
  font-size: var(--text-body);
}

.splash .level { border-color: rgb(255 255 255 / 0.25); }
.splash .level svg,
.splash .level__icon { color: currentColor; }
.splash .level__desc,
.splash .level p { color: rgb(255 255 255 / 0.9); }

/* ---------- 4. concept frame ---------- */

.frame {
  position: relative;
  padding: var(--space-150);
  background: #FBFAF9;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
}

.frame img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
}

.frame--on-rust { border-color: transparent; }

.ctag {
  position: absolute;
  top: 0;
  left: var(--space-250);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-075);
  padding: var(--space-075) var(--space-200);
  background: #FBFAF9;
  color: #1B1412;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1;
}

.ctag::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--primary);
}

.frames-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-500);
  align-items: start;
}

.frames-2 > * {
  display: flex;
  flex-direction: column;
  gap: var(--space-250);
  min-width: 0;
}

.frame__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  line-height: 1.2;
  /* the frame is paper (#FBFAF9) on every ground and theme; inheriting the
     ink splash's white made the caption white on white */
  color: var(--ink);
}

/* ---------- 5. three-step flow ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-600);
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.75rem;
  left: 4.5rem;
  right: calc(var(--space-600) * -1 + 1rem);
  height: 1px;
  background: var(--border);
}

.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--primary);
}

.step h3 { font-size: var(--text-h3); }

.splash--rust .step__num { color: var(--hl-on-rust); }
.splash--rust .step:not(:last-child)::after { background: rgb(255 255 255 / 0.4); }
.splash--ink .step__num { color: var(--hl-on-ink); }
.splash--ink .step:not(:last-child)::after { background: rgb(255 255 255 / 0.3); }

/* inside a split the copy column is half width: stack the steps, number beside text */
.split .steps { grid-template-columns: 1fr; gap: var(--space-400); margin-block: var(--space-400); }

.split .step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--space-250);
  align-items: start;
}

.split .step > * { grid-column: 2; }
.split .step__num { grid-column: 1; grid-row: 1 / span 3; }

.split .step:not(:last-child)::after {
  top: 3.5rem;
  bottom: calc(var(--space-400) * -1);
  left: 1.75rem;
  right: auto;
  width: 1px;
  height: auto;
}

/* ---------- 6. checklist, and the ink splash ---------- */

.splash--ink {
  background: #1B1412;
  color: #FBFAF9;
}

.splash--ink .hl { color: var(--hl-on-ink); }
.splash--ink .lead,
.splash--ink .srcline { color: rgb(251 250 249 / 0.8); }
.splash--ink .stat { --stat-rule: var(--hl-on-ink); }
.splash--ink .stat__value { color: var(--hl-on-ink); }
.splash--ink .stat__label { color: #FBFAF9; }

html[data-splash="quiet"] .splash--ink { border-radius: var(--radius-2xl); }

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-250);
  list-style: none;
  padding: 0;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-200);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.3;
  color: inherit;
}

.checklist li > svg {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  padding: 0.3125rem;
  border-radius: var(--radius-full);
  background: var(--success);
  color: #fff;
}

.checklist li:not(:has(> svg))::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 62% no-repeat;
}

.splash--ink .checklist li { color: #FBFAF9; }

/* ---------- 7. who pays ---------- */

.pays {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-500);
  align-items: stretch;
}

.pay {
  display: flex;
  flex-direction: column;
  gap: var(--space-250);
  padding: var(--space-500);
  overflow: hidden;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
}

.pay__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--side-tint, #FBE9E1);
  color: var(--side-text, var(--primary));
}

.pay__icon svg {
  width: 3rem;
  height: 3rem;
  stroke-width: 1.75;
}

.pay h3 {
  font-size: var(--text-h3);
  line-height: 1.25;
}

.pay p { color: var(--muted-foreground); }

.pay__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-100);
  order: 99;
  margin: auto calc(var(--space-500) * -1) calc(var(--space-500) * -1);
  padding: var(--space-200) var(--space-300);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lead);
  text-align: center;
}

html[data-theme="dark"] .pay__bar { background: var(--primary-1000); }

/* ---------- 8. the letter, set as a Gmail message pane ---------- */

/* Looks like the screenshot it stands in for (Eric, 2026-10-02 evening): a
   white card on Gmail's pale ground, Gmail's own chrome faces (Google Sans
   and Roboto where installed, else Arial), its greys, a 40px avatar, the
   subject at 22px, the body in Arial 14px. Sizes are rem so the whole pane
   scales with the page the way an image would. It stays white in dark mode:
   a screenshot does not take the site's theme. */
.letter {
  --gm-ink: #1F1F1F;
  --gm-grey: #5E5E5E;
  --gm-chrome: "Google Sans", Roboto, "Segoe UI", Arial, sans-serif;
  --gm-body: Arial, Helvetica, sans-serif;
  max-width: 46rem;
  padding: 0.5rem;
  background: #F6F8FC;
  color: var(--gm-ink);
  border: 1px solid #DADCE0;
  border-radius: 1rem;
  font-family: var(--gm-chrome);
  box-shadow: 0 1px 2px rgb(60 64 67 / 0.3), 0 2px 6px 2px rgb(60 64 67 / 0.15);
}

.gmail__bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 0.75rem;
  color: #444746;
}

.gmail__bar-group { display: inline-flex; gap: 1.25rem; }

.gmail__bar svg,
.gmail__head svg,
.gmail__actions svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.75; }

.gmail__bar > svg:last-child { margin-left: auto; }

.gmail__subject,
.gmail__head,
.gmail__body,
.gmail__actions {
  background: #fff;
}

.gmail__subject {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem 0.75rem 4.5rem;
  border-radius: 1rem 1rem 0 0;
}

.gmail__subject h3 {
  margin: 0;
  font-family: var(--gm-chrome);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--gm-ink);
}

.gmail__chip {
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  background: #DDDEE1;
  color: #444746;
  font-size: 0.75rem;
  line-height: 1.5;
}

.gmail__head {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: start;
  padding: 0.75rem 1.5rem 0.5rem;
}

.gmail__avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #6D4C9F;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
}

.gmail__who p { margin: 0; }

.gmail__from {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--gm-ink);
}

.gmail__from b { font-weight: 700; }
.gmail__addr { color: var(--gm-grey); }

.gmail__to {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.75rem;
  color: var(--gm-grey);
}

.gmail__to svg { width: 1rem; height: 1rem; }

.gmail__when {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.125rem;
  font-size: 0.75rem;
  color: var(--gm-grey);
  white-space: nowrap;
}

.gmail__when svg { color: #444746; }

.gmail__body {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 0;
  padding: 1rem 1.5rem 1.5rem 5rem;
  font-family: var(--gm-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gm-ink);
}

.gmail__body p { margin: 0; }

.gmail__sig { margin-top: 0.5em !important; }

/* the colleague's name and directory link, blurred like a redacted screenshot;
   the spans hold placeholder characters, so the blur hides nothing real */
.gmail__blur {
  filter: blur(4px);
  user-select: none;
  color: var(--gm-grey);
}

.gmail__blur--link {
  color: #1A73E8;
  text-decoration: underline;
}

.gmail__actions {
  display: flex;
  gap: 0.75rem;
  padding: 0 1.5rem 1.25rem 5rem;
  border-radius: 0 0 1rem 1rem;
}

.gmail__actions span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #747775;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #444746;
}

.letter__foot {
  max-width: 46rem;
  margin-top: var(--space-300);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* ---------- #art and #jhu side by side on the Evidence page ---------- */
/* Eric's pick from mockups L to O (2026-10-02 night). The page wraps the two
   sections in .ev-pair, which carries the container and the section padding
   for both. When the jhu flag is off only #art is inside and nothing here
   but the first rule applies, so it reads as a plain section. With both, a
   two-column grid: the headings share a row (subgrid), each under its own
   rule, and Art's column is stretched to the email's height with its blocks
   spread over it, so the two columns end together. */

.ev-pair > section > .container {
  padding: 0;
  max-width: none;
}

.ev-pair:has(> #jhu) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 3.5rem);
}

.ev-pair:has(> #jhu) > section {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

.ev-pair:has(> #jhu) > section > .container {
  display: contents;
}

.ev-pair:has(> #jhu) .section-intro {
  max-width: none;
  margin-bottom: var(--space-300);
  padding-bottom: var(--space-250);
  border-bottom: 1px solid var(--foreground);
}

.ev-pair:has(> #jhu) .section-intro h2 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.15;
}

.ev-pair:has(> #jhu) .section-intro .lead {
  margin-top: var(--space-100);
  font-size: var(--text-body);
  line-height: 1.45;
}

/* Art's column: compact type, and the blocks spread over the email's height */
.ev-pair:has(> #jhu) #art .ev-feature {
  grid-row: 1 / span 2;
  height: 100%;
  justify-content: space-between;
  gap: var(--space-300);
}

.ev-pair:has(> #jhu) #art .ev-profile {
  gap: var(--space-300);
}

.ev-pair:has(> #jhu) #art .ev-profile__pic {
  width: 4.5rem;
  height: 4.5rem;
  border-width: 0.1875rem;
}

.ev-pair:has(> #jhu) #art .ev-profile__name {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.ev-pair:has(> #jhu) #art .ev-profile__role {
  margin-top: 0.25rem;
  font-size: var(--text-ui);
}

.ev-pair:has(> #jhu) #art .ev-hero-q p {
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
  line-height: 1.15;
}

.ev-pair:has(> #jhu) #art .ev-hero-q__mark {
  font-size: 3.25rem;
}

.ev-pair:has(> #jhu) #art .ev-hero-q__key {
  color: var(--primary);
  font-weight: 700;
}

html[data-theme="dark"] .ev-pair:has(> #jhu) #art .ev-hero-q__key {
  color: #E8683A;
}

/* the three supporting quotes as label-and-quote rows between hairlines */
.ev-pair:has(> #jhu) #art .ev-feature__row {
  display: block;
  margin-top: 0;
  border-top: 1px solid var(--border);
}

.ev-pair:has(> #jhu) #art .ev-feature__mid {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: var(--space-200);
  align-items: start;
  padding-block: var(--space-200);
  border-bottom: 1px solid var(--border);
}

.ev-pair:has(> #jhu) #art .ev-feature__mid .ev-chip {
  justify-self: start;
  padding: var(--space-100) var(--space-200);
  font-size: var(--text-caption);
  white-space: nowrap;
}

.ev-pair:has(> #jhu) #art .ev-mid-q p {
  font-size: 1.0625rem;
  line-height: 1.35;
}

.ev-pair:has(> #jhu) #art .ev-source {
  margin: 0;
}

/* the email fills its column */
.ev-pair:has(> #jhu) #jhu .letter,
.ev-pair:has(> #jhu) #jhu .letter__foot {
  max-width: none;
}

.ev-pair:has(> #jhu) #jhu .letter__foot {
  margin-top: var(--space-150);
}

.ev-pair:has(> #jhu) #jhu .gmail__to {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .ev-pair:has(> #jhu) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-600);
  }

  .ev-pair:has(> #jhu) > section {
    grid-template-rows: auto auto;
    grid-row: auto;
  }

  .ev-pair:has(> #jhu) #art .ev-feature {
    height: auto;
    justify-content: flex-start;
  }

  .ev-pair:has(> #jhu) #art .ev-feature__mid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-100);
  }
}

@media (max-width: 560px) {
  .gmail__bar { gap: 0.875rem; }
  .gmail__bar-group { gap: 0.875rem; }
  .gmail__bar-group:last-of-type { display: none; }
  .gmail__subject { padding-left: 1rem; }
  .gmail__head { grid-template-columns: 2.5rem minmax(0, 1fr); padding-inline: 1rem; }
  .gmail__when { grid-column: 2; padding-top: 0.25rem; }
  .gmail__when svg:not(:first-of-type) { display: none; }
  .gmail__body { padding: 0.75rem 1rem 1.25rem; }
  .gmail__actions { padding-left: 1rem; }
}

/* ---------- 9. progress track ---------- */

.track {
  list-style: none;
  padding: 0;
}

/* the line and the phase columns share one set of weights and one gap, so
   the nodes sit over the columns */
.phases {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
  column-gap: var(--space-400);
  list-style: none;
  padding: 0;
  margin: 0;
}

.track__line {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-500);
}

.track__node {
  position: relative;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  border: 2px solid #B8B0AD;
  background: var(--background);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.track__node svg { width: 1rem; height: 1rem; }

.track__node[data-state="done"] { background: var(--success); border-color: var(--success); }
.track__node[data-state="underway"] { background: var(--primary); border-color: var(--primary); }

.track__node[data-state="done"]:empty::after {
  content: "";
  width: 0.4rem;
  height: 0.7rem;
  margin-top: -0.15rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* each gap spans its column plus the column gap, less the node (columns are
   1.15 / 1.25 / 0.9 / 0.85 / 0.85 of five, so 23 / 25 / 18 / 17 per cent) */
.track__seg {
  position: relative;
  flex: none;
  height: 3px;
  background: #D8D2CF;
}

.track__seg:nth-child(2) { width: calc(23% + var(--space-400) * 0.08 - 1.875rem); }
.track__seg:nth-child(4) { width: calc(25% - 1.875rem); }
.track__seg:nth-child(6) { width: calc(18% + var(--space-400) * 0.28 - 1.875rem); }
.track__seg:nth-child(8) { width: calc(17% + var(--space-400) * 0.32 - 1.875rem); }

/* first gap: forest for the first half, rust for the second */
.track__seg:nth-child(2) { background: var(--success); }
.track__seg:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: var(--primary);
}

.phases > .phase,
.track .phase {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-200);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  min-width: 0;
}

.phase .phase__num {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.phase h3 {
  font-size: var(--text-h3);
  line-height: 1.2;
  min-height: 2.4em;
}

.pchip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-100) var(--space-250);
  border: 1px solid #B8B0AD;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  line-height: 1;
}

.pchip[data-state="done"],
.pchip--done,
.phase[data-state="done"] .pchip { background: var(--success); border-color: var(--success); color: #fff; }

.pchip[data-state="underway"],
.pchip--underway,
.phase[data-state="underway"] .pchip { background: var(--primary); border-color: var(--primary); color: #fff; }

.phase ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
  margin: 0;
  padding: 0;
  list-style: none;
}

.phase li {
  position: relative;
  padding-left: var(--space-250);
  line-height: 1.45;
}

.phase li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-full);
  background: #B8B0AD;
}

/* ---------- 10. bars ---------- */

.bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-250);
}

.bar {
  display: flex;
  align-items: center;
  gap: var(--space-300);
}

.bar__label {
  flex: none;
  width: 16rem;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
}

.bar__track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 1.75rem;
}

.bar__fill {
  display: block;
  height: 1.75rem;
  width: var(--w, 0%);
  background: var(--success);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.bar__fill--range { border-radius: 0; }

/* the fill is not positioned, so the range segment measures against the track */
.bar__fill--range::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--w, 0%);
  width: calc(var(--w2, var(--w, 0%)) - var(--w, 0%));
  height: 1.75rem;
  background: #8FBF9C;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.bar__value {
  flex: none;
  min-width: 5rem;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lead);
  font-variant-numeric: tabular-nums;
}

.acq {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-400);
  align-items: center;
  margin-top: var(--space-300);
}

#market .bars + h3 { margin-top: var(--space-800); }


.acq__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

.acq__label {
  font-size: var(--text-lead);
  color: var(--muted-foreground);
  max-width: 30ch;
}

.footnote {
  margin-top: var(--space-300);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

/* ---------- 11. the matrix, deck version ---------- */

/* the legend sits outside the table, so it needs the mark colours too;
   without them its three sample marks drew with no border or fill */
.matrix,
.matrix__legend {
  --mark-ink: #1B1412;
  --mark-on-ink: #FBFAF9;
  --mark-none: #6A615E;
  --mark-tint: #FBE9E1;
}

html[data-theme="dark"] .matrix,
html[data-theme="dark"] .matrix__legend {
  --mark-ink: #E9E4E1;
  --mark-on-ink: #1B1412;
  --mark-none: #A59C98;
  /* 0.14 put the orange row labels at 4.1:1 on the tint; 0.09 clears 4.5:1 */
  --mark-tint: rgb(232 104 58 / 0.09);
}

.matrix thead th {
  text-align: center;
  vertical-align: bottom;
  padding: var(--space-200) var(--space-150);
  border-bottom: 1px solid var(--border);
  color: var(--primary);
  font-size: var(--text-body);
  line-height: 1.25;
}

html[data-theme="dark"] .matrix thead th { color: var(--hl-on-ink); }

.matrix thead th:first-child { text-align: left; }

.matrix thead th small,
.matrix__eg {
  display: block;
  margin-top: var(--space-100);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-caption);
  line-height: 1.4;
  color: var(--muted-foreground);
}

.matrix tbody th {
  display: table-cell;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-body);
  line-height: 1.3;
}

.matrix tbody td {
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.matrix tbody tr:nth-child(even) { background: none; }

.matrix tbody .matrix__row--key,
.matrix tbody .matrix__row--key th,
.matrix tbody .matrix__row--key td:not(.matrix__note) {
  background: var(--mark-tint);
}

.matrix tbody .matrix__row--key th { color: var(--primary); }
html[data-theme="dark"] .matrix tbody .matrix__row--key th { color: var(--hl-on-ink); }

.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix thead th:empty { border-bottom-color: transparent; }

.matrix .matrix__note {
  min-width: 12rem;
  padding: var(--space-250);
  text-align: left;
  vertical-align: middle;
  background: var(--mark-tint);
  border: 1.5px dashed var(--primary);
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  line-height: 1.2;
}

html[data-theme="dark"] .matrix .matrix__note { color: var(--hl-on-ink); border-color: var(--hl-on-ink); }

.mark {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline: auto;
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid var(--mark-none);
  border-radius: var(--radius-full);
  background: transparent;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.mark[data-level="full"] {
  background: var(--mark-ink);
  border-color: var(--mark-ink);
}

.mark[data-level="full"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.3125rem;
  height: 0.5625rem;
  border: solid var(--mark-on-ink);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.mark[data-level="half"] { border-color: var(--mark-ink); }

.mark[data-level="half"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--mark-ink);
}

.matrix__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-200) var(--space-400);
  margin-top: var(--space-300);
  font-size: var(--text-ui);
  color: var(--muted-foreground);
}

.matrix__legend > * {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
}

.matrix__legend .mark { margin-inline: 0; }

@media (max-width: 900px) {
  .matrix-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: var(--space-100);
  }

  .matrix { min-width: 46rem; }
}

/* ---------- 12. founders ---------- */

.founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-500);
  align-items: start;
}

.founder {
  display: flex;
  flex-direction: column;
  gap: var(--space-150);
  padding: var(--space-500);
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
}

.founder__pic {
  width: 7.5rem;
  height: 7.5rem;
  flex: none;
  border-radius: var(--radius-full);
  border: 3px solid var(--primary);
  object-fit: cover;
  margin-bottom: var(--space-100);
}

.founder__pic--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--primary);
  background: #FBE9E1;
  color: var(--primary);
}

html[data-theme="dark"] .founder__pic--placeholder { background: rgb(232 104 58 / 0.16); }

.founder__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
}

.founder__role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  line-height: 1.3;
  color: var(--primary);
}

html[data-theme="dark"] .founder__role { color: var(--hl-on-ink); }

.founder__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  margin: var(--space-100) 0 0;
  padding: 0;
  list-style: none;
}

.founder__facts li {
  position: relative;
  padding-left: var(--space-250);
  line-height: 1.45;
}

.founder__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-full);
  background: var(--primary);
}

.placeholder {
  display: flex;
  align-items: flex-start;
  gap: var(--space-150);
  margin-top: var(--space-200);
  padding: var(--space-200);
  border: 1.5px dashed var(--primary);
  border-radius: var(--radius-xl);
  font-size: var(--text-ui);
  line-height: 1.45;
  color: var(--muted-foreground);
}

.placeholder svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--primary);
}

.placeholder strong,
.placeholder b,
.placeholder__label {
  font-weight: 700;
  color: var(--primary);
}

html[data-theme="dark"] .placeholder strong,
html[data-theme="dark"] .placeholder b,
html[data-theme="dark"] .placeholder__label { color: var(--hl-on-ink); }

/* ---------- version 3: narrower ---------- */

@media (max-width: 900px) {
  /* photo stacks above the copy */
  .split { grid-template-columns: 1fr; }

  .split > .photo,
  .split > .photo--bleed-left,
  .split > .photo--bleed-right {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    height: 56vw;
  }

  .split > :not(.photo),
  .split:has(> .photo--bleed-right) > :not(.photo),
  .split:has(> .photo--bleed-left) > :not(.photo),
  html[data-photos="off"] .split:has(> .photo--bleed-right) > :not(.photo),
  html[data-photos="off"] .split:has(> .photo--bleed-left) > :not(.photo) {
    grid-column: 1;
    grid-row: 2;
    padding-inline: var(--grid-gutter-desktop);
    padding-block: clamp(2.5rem, 8vw, 4rem);
  }

  html[data-photos="off"] .split > :not(.photo),
  html[data-photos="off"] .split:has(> .photo--bleed-right) > :not(.photo),
  html[data-photos="off"] .split:has(> .photo--bleed-left) > :not(.photo) { grid-row: 1; }

  .hub__parts,
  .pays,
  .founders,
  .frames-2,
  .acq {
    grid-template-columns: 1fr;
  }

  .hub__levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* hub diagram becomes a vertical list: the record, then the three interfaces */
  .hub__diagram {
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
    max-width: 36rem;
  }

  .hub__fan,
  .hub__spoke { display: none; }

  .hub__core {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto var(--space-400);
  }

  .hub__core > svg { width: 2rem; height: 2rem; }
  .hub__diagram--wide .hub__core { order: -1; }

  .hub__node,
  .hub__node[data-side] {
    grid-area: auto;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    row-gap: var(--space-150);
    padding: var(--space-250);
    border: 1px solid var(--border);
    border-radius: var(--radius-2xl);
    background: var(--card);
  }

  .hub__node:is(:hover, :focus-visible) { transform: none; }
  .hub__disc { width: 3.5rem; height: 3.5rem; }
  .hub__disc > svg { width: 1.5rem; height: 1.5rem; }
  .hub__outcome { white-space: normal; }
  .hub__node ul { grid-column: 1 / -1; justify-content: flex-start; }
  .hub__diagram:has(.hub__core:is(:hover, :focus-visible)) :is(.hub__node, .hub__fan) { opacity: 1; }

  /* steps run top to bottom, joined by a vertical rule */
  .steps { grid-template-columns: 1fr; gap: var(--space-500); }

  .step {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: var(--space-250);
    align-items: start;
  }

  .step > * { grid-column: 2; }
  .step__num { grid-column: 1; grid-row: 1 / span 3; }

  .step:not(:last-child)::after {
    top: 4rem;
    bottom: calc(var(--space-500) * -1);
    left: 1.75rem;
    right: auto;
    width: 1px;
    height: auto;
  }

  /* track becomes a vertical list: the line is a left column of five equal
     rows, the phases a right column of five equal rows, so node n sits level
     with phase n */
  .track {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: var(--space-200);
  }

  .track__line {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    justify-items: center;
    margin-bottom: 0;
  }

  .phases {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    row-gap: 0;
  }

  .track__node,
  .track__seg { grid-column: 1; }

  .track__seg,
  .track__seg:nth-child(n) {
    width: 3px;
    height: auto;
    align-self: stretch;
    margin-top: 1.875rem;
  }

  .track__seg:nth-child(2)::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 50%; }

  .track__node:nth-child(1), .track__seg:nth-child(2) { grid-row: 1; }
  .track__node:nth-child(3), .track__seg:nth-child(4) { grid-row: 2; }
  .track__node:nth-child(5), .track__seg:nth-child(6) { grid-row: 3; }
  .track__node:nth-child(7), .track__seg:nth-child(8) { grid-row: 4; }
  .track__node:nth-child(9) { grid-row: 5; }

  .phases > .phase { padding-bottom: var(--space-400); }
  .phase h3 { min-height: 0; }

  .bar { flex-wrap: wrap; row-gap: var(--space-100); }
  .bar__label { width: 100%; }
  .bar__track { flex: 1 1 0; }
}

@media (max-width: 560px) {
  .hub__levels { grid-template-columns: 1fr; }
  .acq__value { font-size: 2.75rem; }
  .step__num { font-size: 2.75rem; }
  .founder { padding: var(--space-300); }
  .pay { padding: var(--space-300); }
  .pay__bar { margin: auto calc(var(--space-300) * -1) calc(var(--space-300) * -1); }
  .pay__icon { width: 5.5rem; height: 5.5rem; }
  .pay__icon svg { width: 2.25rem; height: 2.25rem; }
  .checklist li { font-size: var(--text-lead); }
}

/* ---------- hooks added by the HTML builders ---------- */

/* the word before a stat number ("Only 54%") */
.stat__pre {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0;
}

/* copy column of a split; placement is by grid column, so the photo may
   follow it in the DOM on either side */
.split__copy {
  min-width: 0;
}

/* subheader under a section heading above the matrix, and the examples line
   under each column heading */
.matrix__sub {
  margin-top: var(--space-150);
  max-width: 62ch;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--muted-foreground);
}

.matrix__eg {
  display: block;
  margin-top: var(--space-100);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-caption);
  line-height: 1.4;
  color: var(--muted-foreground);
}

/* checklist lines with a bold title and a muted description */
.checklist li:has(.checklist__title) {
  flex-wrap: wrap;
}

.checklist__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: inherit;
}

.checklist__desc {
  display: block;
  margin-top: var(--space-050);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--muted-foreground);
}

.splash--ink .checklist__desc,
.splash--rust .checklist__desc { color: rgb(251 250 249 / 0.82); }

.checklist li:has(.checklist__title) > :not(svg):not(:first-child) { flex: 1 1 0; min-width: 0; }

/* three captions under the university-view frame */
.captions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-400);
  margin-top: var(--space-300);
  font-size: var(--text-ui);
  line-height: 1.45;
  color: var(--muted-foreground);
}

.level h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h4);
  line-height: 1.2;
}

@media (max-width: 560px) {
  .captions { grid-template-columns: 1fr; gap: var(--space-200); }
}

/* the close section's photograph, same cover placement as the video it replaces */
.close__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ---------- Version 3 rendering fixes (2026-10-02) ---------- */

/* splash blocks whose container holds no split need their own vertical room */
#employers .splash > .container {
  padding-block: clamp(3rem, 7vw, 6rem);
}

#employers .frames-2 {
  margin-top: var(--space-800);
  /* a desktop screen (1800 x 1005) beside a phone screen (1000 x 1120, cropped
     to the card): the columns follow the two aspect ratios, so the frames come
     out the same height instead of the phone running twice as tall */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: stretch;
}
#employers .frames-2 .frame img { flex: 1 1 auto; min-height: 0; object-fit: cover; }
@media (max-width: 860px) {
  #employers .frames-2 { grid-template-columns: 1fr; }
  #employers .frames-2 .frame img { flex: none; }
}

/* the concept frame below the profile split: room above (for the tag) and below */
#profile-grows .frame {
  margin-block: var(--space-800);
}

@media (max-width: 900px) {
  /* the checklist's description drops under its title instead of squeezing beside it */
  .checklist li:has(.checklist__title) {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: var(--space-200);
    align-items: start;
  }

  .checklist li:has(.checklist__title) > :not(:first-child) { grid-column: 2; }
}


/* ---------- Polish pass (impeccable audit, 2026-10-02) ---------- */

/* Half-bleed photographs. Every .split sits inside a .container, so the photo
   stopped at the container edge and the copy column took --split-edge (an
   offset meant for a full-width split) on top of the container's own inset:
   the copy started about 144px right of the page's grid line at 1440. Pull the
   split out to the viewport so the photo meets the screen edge and the copy
   lands back on the grid line. */
.container .split {
  margin-inline: calc(50% - 50vw);
}

@media (max-width: 900px) {
  .split > :not(.photo),
  .split:has(> .photo--bleed-right) > :not(.photo),
  .split:has(> .photo--bleed-left) > :not(.photo),
  html[data-photos="off"] .split:has(> .photo--bleed-right) > :not(.photo),
  html[data-photos="off"] .split:has(> .photo--bleed-left) > :not(.photo) {
    padding-inline: var(--grid-gutter-desktop);
  }
}

@media (max-width: 768px) {
  .split > :not(.photo),
  .split:has(> .photo--bleed-right) > :not(.photo),
  .split:has(> .photo--bleed-left) > :not(.photo),
  html[data-photos="off"] .split:has(> .photo--bleed-right) > :not(.photo),
  html[data-photos="off"] .split:has(> .photo--bleed-left) > :not(.photo) {
    padding-inline: var(--grid-margin-mobile);
  }
}

/* Vertical rhythm inside a split's copy column: the reset zeroes paragraph
   margins, so heading, source line, body and list ran together. Stats, steps
   and the heading-to-stat gap keep their own (more specific) spacing. */
.split__copy > * + * { margin-top: var(--space-300); }
.split__copy > p + p { margin-top: var(--space-200); }
.split__copy > .stat + .srcline { margin-top: var(--space-200); }

/* Checklist on wide screens: the descriptions started wherever each title
   ended, so the three lines had three ragged left edges. A shared subgrid
   gives every description the same start. */
@media (min-width: 901px) {
  .checklist:has(.checklist__title) {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: var(--space-200);
    row-gap: var(--space-250);
  }

  .checklist:has(.checklist__title) > li {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: start;
    column-gap: var(--space-300);
  }

  .checklist:has(.checklist__title) > li > .checklist__desc { margin-top: 0.3em; }
}

/* Matrix on narrow screens: the credential-issuers header held a three-name
   example list in a narrow column and grew eight lines tall, opening a gap
   above the table. A wider floor for that one column keeps it to three. */
@media (max-width: 900px) {
  .matrix thead th:nth-child(4) { min-width: 13rem; }
}

/* The legend pairs each sample mark with its words; the gap inside a pair is
   smaller than the gap between pairs. */
.matrix__legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
}

/* Footer links: single-line links centred in their 44px target while two-line
   ones started at the top, so first lines did not line up across columns.
   Top-align and pad so a one-line link is still 44px tall. */
.footer__column a {
  align-items: flex-start;
  line-height: 1.5;
  padding-block: calc((var(--touch-target-min) - 1.5em) / 2);
}

.footer__legal > p + p { margin-top: var(--space-100); }

/* ---------- home page: break up the section grounds (2026-10-02) ---------- */

/* The warm tints are set here, not from --secondary: that token is one step
   off paper (#F5F3F2 against #FBFAF9) and did not read as a band at all. Art
   sits on a pale rust wash, the roadmap on a deeper warm sand, so the page
   runs paper, wash, paper, ink, sand, video. */
:root {
  --ground-wash: #F8ECE4;
  --ground-sand: #F0EAE5;
}
html[data-theme="dark"] {
  --ground-wash: #23170F;
  --ground-sand: #1D1714;
}
html[data-page="home"] #art { background: var(--ground-wash); }
html[data-page="home"] #roadmap { background: var(--ground-sand); }

/* the track node fill was paper; on the tint it should match the ground */
html[data-page="home"] #roadmap .track__node { background: var(--ground-sand); }
html[data-page="home"] #roadmap .track__node[data-state="done"] { background: var(--success); }
html[data-page="home"] #roadmap .track__node[data-state="underway"] { background: var(--primary); }

/* team: the ink band, same ink and text conventions as .splash--ink */
html[data-page="home"] #team {
  background: #1B1412;
  color: #FBFAF9;
}
html[data-page="home"] #team h2 { color: #FBFAF9; }
html[data-page="home"] #team .lead,
html[data-page="home"] #team .people__company { color: rgb(251 250 249 / 0.8); }
html[data-page="home"] #team .hl { color: var(--hl-on-ink); }
html[data-page="home"] #team .founder {
  background: rgb(251 250 249 / 0.06);
  color: #FBFAF9;
  border-color: rgb(251 250 249 / 0.24);
}
html[data-page="home"] #team .founder__name { color: #FBFAF9; }
html[data-page="home"] #team .founder__role { color: var(--hl-on-ink); }
html[data-page="home"] #team .founder__facts li { color: rgb(251 250 249 / 0.8); }
html[data-page="home"] #team .founder__facts li::before { background: var(--hl-on-ink); }
html[data-page="home"] #team .founder__pic { border-color: var(--hl-on-ink); }
html[data-page="home"] #team .founder__pic--placeholder,
html[data-theme="dark"][data-page="home"] #team .founder__pic--placeholder { background: rgb(232 104 58 / 0.16); color: var(--hl-on-ink); }
html[data-page="home"] #team .placeholder {
  color: rgb(251 250 249 / 0.8);
  border-color: var(--hl-on-ink);
}
html[data-page="home"] #team .placeholder svg { color: var(--hl-on-ink); }

/* ---------- problem, home: one side at a time (2026-10-02 evening) ---------- */

/* Three tabs and one panel each; js/problem-tabs.js switches them. The
   panels share one grid cell and cross-fade, so the section never changes
   height between sides. Without the script every panel shows, stacked. */
.ptabs {
  --ptab-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.ptabs__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-500);
}

.ptab {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lead);
  padding: 0.875rem 1.5rem;
  min-height: var(--touch-target-min);
  background: none;
  border: 0;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 320ms var(--ptab-ease);
}

.ptab:hover,
.ptab[aria-selected="true"] {
  color: var(--side-text);
}

.ptab:focus-visible {
  outline: 2px solid var(--side-text);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* one underline that slides between tabs; the script sets its width and x */
.ptabs__mark {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 0;
  background: var(--side-text);
  border-radius: 2px;
  transition: transform 420ms var(--ptab-ease), width 420ms var(--ptab-ease), background-color 320ms var(--ptab-ease);
}

/* before the script runs there is no mark; each selected tab underlines itself */
.ptabs:not([data-tabs-ready]) .ptab[aria-selected="true"] {
  box-shadow: inset 0 -3px 0 var(--side-text);
}

.ptabs__panels {
  display: grid;
}

.ppanel {
  grid-area: 1 / 1;
  display: grid;
  /* the copy column is the wider one so the number and its label share a line */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-600);
  row-gap: var(--space-300);
  /* top-aligned, not centred: the headline then starts at the same height on
     every tab, whatever the copy's length (Eric, 2026-10-02 evening) */
  align-items: start;
}

.ppanel__copy { grid-column: 1; grid-row: 1; }
.ppanel__photo { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 10; margin: 0; }
.ppanel__source { grid-column: 1 / -1; grid-row: 2; margin: 0; }

/* the cross-fade: the leaving panel fades out in place, the arriving one
   fades up a few pixels; visibility waits for the fade so the hidden panels
   take no focus and no clicks */
.ptabs[data-tabs-ready] .ppanel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 360ms var(--ptab-ease), transform 480ms var(--ptab-ease), visibility 0s linear 360ms;
  pointer-events: none;
}

.ptabs[data-tabs-ready] .ppanel[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 420ms var(--ptab-ease) 120ms, transform 560ms var(--ptab-ease) 120ms, visibility 0s;
  pointer-events: auto;
}

.ptabs[data-tabs-ready] .ppanel__photo img {
  transform: scale(1.04);
  transition: transform 900ms var(--ptab-ease);
}

.ptabs[data-tabs-ready] .ppanel[data-active="true"] .ppanel__photo img {
  transform: none;
}

.ppanel h3 {
  font-size: var(--text-h3);
  text-wrap: balance;
  max-width: 26ch;
}

.ppanel__copy > p:not(.srcline) {
  margin-top: var(--space-300);
  color: var(--foreground);
  max-width: 44ch;
}

/* the number with its label beside it, the "Only" on the number's line */
.stat--inline {
  flex-direction: row;
  /* the label's last line sits on the number's baseline, so a two-line label
     rises above the number rather than hanging below it */
  align-items: last baseline;
  gap: var(--space-300);
  margin-top: var(--space-300);
}

.stat--inline .stat__value {
  color: var(--side-text);
  white-space: nowrap;
  font-size: clamp(2.75rem, 4.4vw, 4rem);
}

.stat--inline .stat__label {
  flex: 1 1 14rem;
  max-width: 44ch;
  color: var(--muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .ptab, .ptabs__mark, .ptabs[data-tabs-ready] .ppanel, .ptabs[data-tabs-ready] .ppanel[data-active="true"], .ptabs[data-tabs-ready] .ppanel__photo img {
    transition: none;
  }
}

@media (max-width: 860px) {
  .ppanel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: var(--space-300);
  }
  .ppanel__photo { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; }
  .ppanel__copy { grid-column: 1; grid-row: 2; }
  .ppanel__source { grid-row: 3; }
  .ptab { padding: 0.75rem 1rem; font-size: var(--text-body); }
  .stat--inline { flex-wrap: wrap; gap: var(--space-100) var(--space-200); }
  .stat--inline .stat__label { max-width: 34ch; }
}

/* ---------- who owns it: the university above the two it serves (2026-10-02 evening) ---------- */

.owns {
  display: grid;
  justify-items: center;
}

/* the university card sits on top, on the width of one lower column and a
   half, with its icon and copy side by side so it reads as the head */
.owns__top {
  width: min(100%, 44rem);
  flex-direction: row;
  align-items: center;
  gap: var(--space-500);
  padding: var(--space-500) var(--space-600);
}

.owns__top > h3 { flex: 1 1 14rem; }
.owns__top > p { flex: 1 1 100%; }

@media (min-width: 861px) {
  .owns__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-500);
    row-gap: var(--space-200);
    align-items: center;
  }
  .owns__top .pay__icon { grid-row: 1 / span 3; }
  .owns__top > h3, .owns__top > p { grid-column: 2; }
}

/* the subscription line, quiet and in the side colour, with a rule above */
.pay__terms {
  margin-top: var(--space-100);
  padding-top: var(--space-200);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-ui);
  color: var(--side-text, var(--primary)) !important;
}

/* the connector: a stem down from the top card, a bar across, a stem up into
   each lower card (drawn by the cards' own ::before) */
.owns__link {
  position: relative;
  width: 100%;
  height: 3.5rem;
}

.owns__link::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 50%;
  background: var(--border);
  transform: translateX(-50%);
}

.owns__link::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  top: 50%;
  height: 2px;
  background: var(--border);
}

.owns__under {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-500);
  width: 100%;
  align-items: stretch;
}

.owns__under .pay {
  position: relative;
  overflow: visible;
}

.owns__under .pay::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1.75rem;
  width: 2px;
  height: 1.75rem;
  background: var(--border);
  transform: translateX(-50%);
}

/* the connector bar spans between the two lower cards' centres: with two
   equal columns and one gap those centres sit at 25% and 75% of the row,
   which the ::after above already uses */

@media (max-width: 860px) {
  .owns__top { flex-direction: column; align-items: flex-start; gap: var(--space-250); }
  .owns__top > h3, .owns__top > p { flex: none; }
  .owns__link { height: 2.5rem; }
  .owns__link::after { display: none; }
  .owns__link::before { height: 100%; }
  .owns__under { grid-template-columns: 1fr; gap: var(--space-400); }
  .owns__under .pay::before { display: none; }
  .owns__under .pay + .pay { margin-top: 0; }
}