/* ===========================================================
   home.css: Homepage only (was: heroes-circuit + sections-v2 + home-circuit)
   =========================================================== */


/* ===========================================================
   Circuit hero   [from heroes-circuit.css]
   =========================================================== */

/* heroes-circuit.css: full-width ring-main hero */
.hero-v-circuit { padding: 32px 0 0; border-bottom: 1px solid var(--rule); overflow: hidden; background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 72%, var(--paper-2) 100%); }
.hcc-head { text-align: center; }
/* Type ramp, anchored on the laptop band: ~41px at 1440px (38px at 1280px,
   44px at 1600px, 49px at 1920px), easing continuously down to 27px on phones
   and up to a 60px cap on wide monitors, one fluid line, no breakpoint steps.
   Roughly 15% below the previous ramp (1.79vw + 22.3px, cap 72px).

   The markup's two <br>s fix the headline at three lines, so nothing here is
   fighting a wrap on the first two lines. The one size constraint left is the
   third line: "whole construction business." is the longest run and must fit
   the left column, which is tightest at 1100px where the two-column grid has
   not yet collapsed. Slope/intercept are a straight line through (1440, 41)
   and (2560, 59); shift the 17.9px intercept to move the whole ramp, then
   re-check that third line at 1100px. */
.hcc-head h1 { font-family: var(--f-deck); font-weight: var(--fw-deck); font-size: var(--fs-h1); margin: 0 auto; max-width: 26ch; letter-spacing: var(--ls-hero); line-height: 1.06; text-wrap: balance; }
/* Highlighted lead line, the same mark the point bar puts on "don't pay for
   it": solid accent block, near-white type, no radius. The negative left margin
   cancels the block's own left padding so the type still starts flush with the
   lines below it, and box-decoration-break keeps the padding on both fragments
   if the phrase ever wraps on a very narrow screen. The h1's line-height went
   from 1.06 to 1.10 for this: at 1.06 the block's bottom edge runs into the cap
   height of the line below. 1.10 is the tightest value that still clears. */
.hcc-head h1 .hl {
  color: var(--hazard-ink);
  padding: 0.04em 0.22em;
  /* No negative left margin: that existed to pull the block flush with the
     left edge of the lines below it. Centred, it would shove the block off
     centre by its own padding. */

  /* The band is painted as a sized background, not a plain fill.
     An inline element's background covers the font's whole content area, and
     Forma DJR Deck carries far more space above the caps (for accents) than
     below the baseline, measured at 1680/1440/1280px, the air above the ink
     was 0.455em against 0.138em below, a constant 0.31em imbalance that made
     the block sit visibly low. Padding cannot correct it: the top padding
     would have to go negative.

     So the band is drawn explicitly. The ink is 0.890em tall and starts
     0.455em down from the top of the box, so a 1.14em band placed at 0.33em
     leaves ~0.125em of air on both sides. Everything is in em, so it holds at
     every step of the type scale, and background-size/position are resolved
     per line fragment under box-decoration-break: clone, which this span
     needs, because it wraps onto two lines on a phone. */
  background-image: linear-gradient(var(--hazard), var(--hazard));
  background-repeat: no-repeat;
  background-size: 100% 1.14em;
  background-position: 0 0.33em;

  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
/* Quiet register marks. These used to be 10px accent squares inside a 4px
   glow ring, three more accent hits competing with the one CTA that should
   own the accent. Neutral and small: they punctuate the line, nothing more. */
.hcc-band { margin-top: 16px; }
.hero-circuit { width: 100%; }
.hcc-svg { display: block; width: 100%; height: auto; font-family: var(--f-ui); }

@keyframes hccRing { 0% { opacity: 0.5; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.28); } }
@media (max-width: 900px) { .hcc-band { overflow-x: auto; -webkit-overflow-scrolling: touch; } .hcc-band .hcc-svg { min-width: 1080px; } }
/* Laptops & desktops: the hero circuit is full bleed, edge to edge, breaking
   out of both the boxed content column (--maxw) and the page gutter. The
   section itself is unpadded and full width, so dropping max-width/padding is
   enough; no negative margins needed (which would overshoot by the scrollbar).
   Mobile (≤900px) keeps its tuned scroll/portrait behaviour above. */
@media (min-width: 901px) {
  .hcc-band { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}
.hcc-portrait { display: none; }
@media (max-width: 760px) {
  .hcc-band { overflow-x: visible; }
  .hcc-landscape { display: none; }
  .hcc-portrait { display: block; }
  .hcc-portrait .hcc-svg-p { min-width: 0; max-width: 480px; margin: 0 auto; }
  .hero-v-circuit { padding-top: 28px; }
  .hcc-band { margin-top: 12px; }
}

/* Oxford gradient accents now come from theme-oxford.css, which this page
   loads after home.css (see $page_css in index.php). It used to carry an
   inline copy of that file, which was the only reason the theme existed in
   three places. */


/* ===========================================================
   Homepage sections   [from sections-v2.css]
   =========================================================== */

/* sections-v2.css: editorial rebuild for the circuit homepage body.
   Big type, hairline rules, b/w documentary photography, oxford accents. */

/* section eyebrow: reuses the site-wide .hazard-mark motif (square + mono) */

/* Index section h2s — 58px; hero h1 (.hcc-head h1) stays on --fs-h1. */
.hcc-what-hd h2,
.v2-purge h2,
.v2-index h2,
#questions .sec-hd h2 {
  /* fluid below the laptop band: a flat 58px overran the viewport on phones */
  font-size: clamp(34px, 7.6vw, 58px);
}

.v2-base .v2-base-copy h2,
.v2-prom .v2-prom-copy h2 {
  /* fluid below the laptop band: a flat 82px clipped "regulation" on phones */
  font-size: clamp(38px, 10vw, 82px);
}

/* shared display scale */
.v2-purge h2, .v2-index h2, .v2-base h2, .v2-prom h2 { font-family: var(--f-deck); font-weight: var(--fw-deck); letter-spacing: -0.025em; line-height: 1.0; margin: 0; text-wrap: balance; }
.v2-purge h2 em, .v2-base h2 em, .v2-prom h2 em { font-style: italic; font-weight: 500; }

/* ── purge (ink) ── */
.v2-purge { background: var(--ink); color: var(--paper); }
.v2-purge-list { display: flex; flex-wrap: wrap; column-gap: 0.55em; row-gap: 0.1em; margin: 48px 0 0; max-width: 1280px; font-family: var(--f-deck); font-weight: var(--fw-deck); letter-spacing: -0.02em; line-height: 1.28; font-size: var(--fs-h2); }
.v2-strike { position: relative; white-space: nowrap; color: color-mix(in oklab, var(--paper) 60%, transparent); }
.v2-strike::after { content: ""; position: absolute; left: -0.06em; right: -0.06em; top: 53%; height: 0.075em; background: var(--accent-on-dark, var(--hazard)); transform: rotate(-1.4deg); }
.v2-strike:nth-child(even)::after { transform: rotate(1.1deg); top: 49%; }
.v2-strike:nth-child(3n)::after { transform: rotate(-0.5deg); top: 55%; }
.v2-purge-verdict { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 72px; align-items: end; }
.v2-purge-verdict h2 em { color: var(--accent-on-dark, var(--hazard)); }
.v2-purge-verdict p { margin: 0 0 10px; font-size: var(--fs-xl); line-height: 1.5; max-width: 34ch; color: color-mix(in oklab, var(--paper) 82%, transparent); text-wrap: pretty; }

/* ── proof band (photo + stat strip) ── */
.v2-proof { border-top: 1px solid var(--rule); }
.v2-proof-img {
  display: block;
  width: 100%;
  height: auto;
  object-position: center;
}
.v2-proof-bar { background: var(--ink); color: var(--paper); }
.v2-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.v2-stat { padding: 38px 32px 42px 0; }
.v2-stat + .v2-stat { padding-left: 32px; border-left: 1px solid color-mix(in oklab, var(--paper) 14%, transparent); }
.v2-stat b { display: block; font-family: var(--f-deck); font-weight: var(--fw-deck); letter-spacing: -0.02em; font-size: var(--fs-h1); line-height: 1; }
.v2-stat span { display: block; margin-top: 10px; font-family: var(--f-ui); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklab, var(--paper) 70%, transparent); }

/* ── module index (paper) ── */
.v2-index-hd { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; margin-bottom: 56px; }
.v2-index-list { border-bottom: 0; }
.v2-index-list .v2-row:last-child { border-bottom: 1px solid var(--rule); }
.v2-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 56px;
  align-items: center;
  gap: 24px;
  margin: 0 -24px;
  padding: 38px 24px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.v2-row-name {
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  letter-spacing: -0.022em;
  font-size: var(--fs-h3);
  line-height: 1.02;
  transition: color 0.15s ease;
}
.v2-ai {
  display: inline-block;
  vertical-align: 0.5em;
  margin-left: 14px;
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border: 1px solid var(--hazard);
  color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.v2-row-line {
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--ink-2);
  transition: color 0.15s ease;
}
.v2-row-arr {
  justify-self: end;
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  font-size: var(--fs-h3);
  color: var(--ink-mute);
  transition: transform 0.18s ease, color 0.18s ease;
}
.v2-row:hover {
  background: color-mix(in oklab, var(--hazard) 8%, var(--paper));
  box-shadow: inset 3px 0 0 var(--hazard);
}
.v2-row:hover .v2-row-name { color: var(--hazard); }
.v2-row:hover .v2-row-line { color: var(--ink); }
.v2-row:hover .v2-ai {
  background: var(--hazard);
  color: var(--hazard-ink);
  border-color: var(--hazard);
}
.v2-row:hover .v2-row-arr {
  transform: translateX(8px);
  color: var(--hazard);
}
.v2-index-ft { margin-top: 26px; font-size: var(--fs-lg); color: var(--ink-2); }
.v2-index-ft a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--hazard); }
.v2-index-ft a:hover { border-bottom-width: 2.5px; }

/* ── british baseline ── */
.v2-base { background: var(--paper-2); border-top: 1px solid var(--rule); }
.v2-base-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; align-items: center; }
.v2-base-copy h2 { margin-top: 30px; max-width: 14ch; }
.v2-base h2 em { color: var(--hazard); }
.v2-plates { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.v2-plate { font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-md); letter-spacing: 0.06em; padding: 13px 19px; border: 1.5px solid var(--ink); background: var(--paper); }
.v2-plate:first-child { background: var(--hazard); color: var(--hazard-ink); border-color: color-mix(in oklab, var(--hazard) 78%, black); }
.v2-base-line { margin: 30px 0 0; font-size: var(--fs-lg); line-height: 1.5; color: var(--ink-2); max-width: 40ch; text-wrap: pretty; }
.v2-base-photo { margin: 0; }
.v2-base-photo img { display: block; width: 100%; height: clamp(260px, 42vw, 460px); object-fit: cover; }
.v2-base-photo figcaption { margin-top: 14px; font-family: var(--f-ui); font-size: var(--fs-sm); letter-spacing: 0.05em; color: var(--ink-mute); }

/* ── promises ── */
.v2-prom-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 72px; align-items: center; padding: 84px 0; border-top: 1px solid var(--rule); }
.v2-prom-row:first-child { border-top: 0; padding-top: 0; }

.v2-prom-copy h2 { margin-top: 30px; max-width: 16ch; }
.v2-prom h2 em { color: var(--hazard); }
.v2-prom-copy p { margin: 26px 0 0; font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }
/* Image left, copy right: right-align the copy. */
.v2-prom-photo + .v2-prom-copy {
  text-align: right;
  justify-self: end;
}
.v2-prom-photo + .v2-prom-copy h2,
.v2-prom-photo + .v2-prom-copy p {
  margin-left: auto;
}
.v2-prom-photo { margin: 0; }
.v2-prom-photo img { display: block; width: 100%; height: clamp(320px, 48vw, 540px); object-fit: cover; }
.v2-prom-row:last-child { padding-bottom: 0; }

/* ── responsive ── */
@media (max-width: 1024px) {
  .v2-purge-verdict { grid-template-columns: 1fr; align-items: start; }
  .v2-base-grid, .v2-prom-row { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .v2-prom-photo + .v2-prom-copy {
    text-align: left;
    justify-self: start;
  }
  .v2-prom-photo + .v2-prom-copy h2,
  .v2-prom-photo + .v2-prom-copy p {
    margin-left: 0;
  }
  .v2-row { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 10px; align-items: start; margin: 0 -12px; padding: 26px 12px; }
  .v2-row-name { grid-column: 1; grid-row: 1; }
  .v2-row-line { grid-column: 1; grid-row: 2; }
  .v2-row-arr { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) {
  .v2-proof-grid { grid-template-columns: 1fr; }
  .v2-stat { padding: 26px 0; }
  .v2-stat + .v2-stat { padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in oklab, var(--paper) 14%, transparent); }
  .v2-row { margin: 0 -12px; padding: 26px 12px; }
  .v2-prom-row { padding: 56px 0; }
}


/* ===========================================================
   Homepage circuit tweaks   [from home-circuit.css]
   =========================================================== */

/* home-circuit.css: Homepage-only baseline.
   The Circuit homepage originally set these via a design-tool script; baked in
   here so the page renders identically without any runtime JS:
     • Oxford-blue accent (the "oxford" preset)
     • the "comfy" section rhythm (168px), overriding the 128px default */
:root {
  --hazard: oklch(0.28 0.09 268);
  --hazard-ink: oklch(0.99 0.005 268);
  --sec-pad: 168px;
}
.sec { padding: var(--sec-pad) 0; }

/* ===========================================================
   HOMEPAGE CLOSE SECTION + HERO CREDENTIALS
   Moved out of core.css on 3 August 2026. Every selector here is
   used by index.php alone, so it was being sent to all 21 pages.
   Order is preserved; theme-oxford.css still loads after this file
   and continues to win the accent rules, as it did before.
   =========================================================== */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hc:nth-child(2n) { border-right: 0; }
.hc:nth-child(n+3) { border-bottom: 0; }
.close {
  background: var(--ink);
  color: var(--paper);
  padding: var(--sec-pad, 168px) 0;
}
.close .hazard-mark { color: var(--hazard-ink); }
.close h2 {
  font-family: var(--f-deck);
  font-size: 82px;
  line-height: 0.96; letter-spacing: -0.035em; font-weight: var(--fw-deck);
  margin: 22px 0 0; max-width: 16ch; text-wrap: balance;
}
.close h2 em { font-family: var(--f-display); font-style: italic; font-weight: 400; }
.close-ctas {
  margin-top: 38px;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.close-ctas .btn:first-child {
  background: var(--hazard); color: var(--hazard-ink); border-color: var(--hazard);
}
.close-ctas .btn:first-child:hover { filter: brightness(0.96); }
.close-ctas .btn-ghost {
  background: transparent; color: var(--paper); border-color: oklch(0.45 0.01 60);
}
.close-ctas .btn-ghost:hover { border-color: var(--paper); }
.close-promises {
  margin-top: 48px;
  display: flex; flex-wrap: wrap; gap: 0 4px;
  border-top: 1px solid oklch(0.34 0.01 60);
  border-bottom: 1px solid oklch(0.34 0.01 60);
}
.close-promises span {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: oklch(0.84 0.005 60);
  padding: 16px 32px 16px 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.close-promises span::before { content: "✓"; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: var(--fs-xs); font-weight: 700; display: inline-grid; place-items: center; flex-shrink: 0; }
.close-contact {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid oklch(0.34 0.01 60);
}
.close-contact a {
  padding: 26px 24px 0 0;
  border-right: 1px solid oklch(0.34 0.01 60);
  display: block;
}
.close-contact a:last-child { border-right: 0; }
.close-contact a:not(:first-child) { padding-left: 24px; }
.close-contact .lbl {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--fs-sm); color: oklch(0.68 0.005 60);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.close-contact .val {
  display: block; margin-top: 8px;
  font-family: var(--f-display);
  font-size: var(--fs-lg); letter-spacing: -0.01em; color: var(--paper);
}
.close-contact a:hover .val { text-decoration: underline; text-underline-offset: 4px; }
.close .close-hd { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; }
.close .close-hd > div { min-width: 0; }
.cl-logo { display: block; background: var(--paper); padding: 16px 22px; height: clamp(84px, 10vw, 148px); width: auto; flex-shrink: 0; }

/* responsive overrides for the homepage close section, moved with their
   base rules so they continue to load after them */

@media (max-width: 1024px) {
  .close-contact { grid-template-columns: 1fr; }
  .close-contact a {
    border-right: 0; border-bottom: 1px solid oklch(0.34 0.01 60);
    padding: 20px 0;
  }
  .close-contact a:not(:first-child) { padding-left: 0; }
}

@media (max-width: 640px) {
  .close-promises span { padding: 12px 22px 12px 0; }
}

@media (max-width: 720px) {
  .close .close-hd { flex-wrap: wrap; }
  .cl-logo { height: 78px; }
}

/* ── "What Unibuild is", the crawlable summary ─────────────────────────────
   Added 9 Aug 2026. Prose column plus a definition list of the facts most often
   asked for. Deliberately uses the shared tokens rather than literal colours,
   so it survives being dropped onto a .sec-dark band later. */
.hcc-what-hd h2 {
  margin: 22px 0 0;
  max-width: 20ch;
  font-family: var(--f-deck);
  font-weight: var(--fw-deck);
  letter-spacing: -0.025em;
  line-height: 1.0;
  text-wrap: balance;
}

.hcc-what-top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px 56px;
  align-items: start;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 2px solid var(--ink);
}
.hcc-what-top .hcc-what-chips {
  margin-top: 0;
}

.hcc-what-chips {
  margin: 32px 0 0;
  padding: 0;
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: var(--paper);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent);
}
.hcc-what-chip {
  margin: 0;
  padding: 20px 22px 22px;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background: var(--paper);
  min-width: 0;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.hcc-what-chip:nth-child(-n+3) {
  border-top: 0;
}
.hcc-what-chip:nth-child(3n) {
  border-right: 0;
}
.hcc-what-chip:hover {
  background: var(--hazard);
  border-color: color-mix(in oklab, var(--hazard) 80%, black);
  z-index: 1;
}
.hcc-what-chips dt {
  margin: 0 0 8px;
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hazard);
  transition: color 0.18s ease;
}
.hcc-what-chip:hover dt {
  color: var(--accent-on-dark, color-mix(in oklab, var(--hazard) 55%, white));
}
.hcc-what-chips dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
  transition: color 0.18s ease;
}
.hcc-what-chip:hover dd {
  color: var(--hazard-ink, #fff);
}

.hcc-what-rows {
  margin: 0;
  padding: 0;
}
.hcc-what-row {
  display: grid;
  grid-template-columns: minmax(10rem, 0.32fr) minmax(0, 1fr);
  column-gap: 32px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  transition: background 0.15s ease;
}
.hcc-what-row:hover {
  background: color-mix(in oklab, var(--hazard) 4%, var(--paper));
}
.hcc-what-row:last-child {
  border-bottom: 0;
}
.hcc-what-row dt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.hcc-what-n {
  flex-shrink: 0;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.hcc-what-k {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-lg);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hcc-what-row dd {
  margin: 0;
}
.hcc-what-row dd p {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hcc-what-row dd p b {
  font-weight: 600;
  color: var(--ink);
}
.hcc-what-row-gaps {
  margin-top: 8px;
  padding: 20px 16px;
  border: 1px solid color-mix(in oklab, var(--hazard) 35%, var(--rule));
  border-bottom: 1px solid color-mix(in oklab, var(--hazard) 35%, var(--rule));
  background: color-mix(in oklab, var(--hazard) 5%, var(--paper));
}
.hcc-what-row-gaps .hcc-what-k {
  color: var(--hazard);
}

@media (max-width: 900px) {
  .hcc-what-top {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 36px;
  }
  .hcc-what-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hcc-what-chip:nth-child(-n+3) { border-top: 1px solid var(--rule); }
  .hcc-what-chip:nth-child(-n+2) { border-top: 0; }
  .hcc-what-chip:nth-child(3n) { border-right: 1px solid var(--rule); }
  .hcc-what-chip:nth-child(2n) { border-right: 0; }
  .hcc-what-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0;
  }
  .hcc-what-row-gaps {
    margin-top: 4px;
    padding: 18px 14px;
  }
}
@media (max-width: 540px) {
  .hcc-what-chips { grid-template-columns: 1fr; }
  .hcc-what-chip { border-right: 0; border-top: 1px solid var(--rule); }
  .hcc-what-chip:first-child { border-top: 0; }
  .hcc-what-chip:nth-child(2n) { border-right: 0; }
}

/* ── Clickable hero cards ──────────────────────────────────────────────────
   Wrap a card's positioned <g> in <a class="hcc-hit"> to make it clickable.

   outline:none: the schematic is decorative (its container is aria-hidden) so
   these links stay out of the tab order, but a click still focuses one, and
   the UA ring is drawn round the link's whole bbox, which includes the
   oversized rotated sheen. It reads as a stray box beside the card.

   Hover repaints the card hi-vis amber. Nothing moves or resizes. The label
   and the line icon are drawn near-white for the navy ground, which is only
   1.9:1 on amber, so they flip to ink at 11:1. Only fill and stroke change. */
:root { --hcc-hot: oklch(0.80 0.17 80); }
.hcc-hit { cursor: pointer; outline: none; }
.hcc-hit > g > g > rect,
.hcc-hit > g > g text,
.hcc-hit > g > g [stroke] { transition: fill 120ms ease, stroke 120ms ease; }
.hcc-hit:hover > g > g > rect { fill: var(--hcc-hot); }
.hcc-hit:hover > g > g text { fill: var(--ink); }
.hcc-hit:hover > g > g [stroke] { stroke: var(--ink); }

/* ── The module register ───────────────────────────────────────────────────
   Added 12 Aug 2026, when the 180-word module list stopped being a
   .visually-hidden crawler-only paragraph and became visible content. It is a
   <details> rather than a permanently open list because 38 items would bury
   the six feature cards above it, and a closed <details> is still fully
   present in the HTML, so nothing is hidden from a parser either.

   Deliberately not class="faq-item": ub_faq_ld_from_html() in schema.php
   matches on that class, and this is a list of nouns, not a Q&A. */
.mod-register {
  margin-top: 0;
  border: 0;
  padding: 0;
}
.mod-register > summary {
  cursor: pointer;
  font-family: var(--f-ui);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 -24px;
  padding: 22px 24px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.mod-register > summary::-webkit-details-marker { display: none; }
.mod-register > summary::before {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--hazard-ink);
  background: var(--hazard);
  transition: transform 0.15s ease;
}
.mod-register > summary:hover {
  background: color-mix(in oklab, var(--hazard) 8%, var(--paper));
  box-shadow: inset 3px 0 0 var(--hazard);
  color: var(--hazard);
}
.mod-register[open] > summary {
  background: color-mix(in oklab, var(--hazard) 8%, var(--paper));
  box-shadow: inset 3px 0 0 var(--hazard);
  color: var(--hazard);
}
.mod-register[open] > summary::before { transform: rotate(45deg); }
.mod-register-body {
  display: grid;
  gap: 28px 40px;
  margin-top: 8px;
  padding: 28px 24px;
  background: #F5F6FA;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--hazard);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.mod-group-h {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.mod-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.mod-group li {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 8px;
}
.mod-group li::before {
  content: "·";
  color: var(--hazard);
  font-weight: 700;
}
.mod-register-foot {
  margin: 20px 0 0;
  grid-column: 1 / -1;
}
.mod-register-foot a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--hazard);
}
.mod-register-foot a:hover { border-bottom-width: 2.5px; }

@media (max-width: 640px) {
  .mod-register > summary { margin: 0 -12px; padding: 18px 12px; }
  .mod-register-body { padding: 22px 16px; gap: 22px; }
}

/* .sec-dark hard-codes a light foreground, so anything that names --ink here
   would vanish if this block is ever moved onto a dark band. */
.sec-dark .mod-register > summary,
.sec-dark .mod-group-h { color: var(--ink-on-dark, #fff); }
.sec-dark .mod-group li { color: var(--ink-mute-on-dark, rgba(255,255,255,.72)); }