/* ==========================================================================
   Ventori Pinnacle — foundation stylesheet
   Phase 1 skeleton. One file on purpose: it is the whole design system, and a
   single self-hosted asset is one fewer thing in the CSP.

   Tokens below are lifted from the production logo SVGs
   (design/logo/ventori-pinnacle-*.svg), not from the earlier mockups. Where the
   two disagree, the logo wins — see docs/brand-tokens.md.

   CONTRAST — do not "improve" these without re-checking:
     #f2f4f5 on #0c0c0c ... 18.6:1   body / headings
     #b9bdc0 on #0c0c0c ...  9.8:1   lede, secondary body
     #8a9197 on #0c0c0c ...  5.9:1   labels, eyebrows, nav  (floor for text)
     #6f767c on #0c0c0c ...  4.1:1   DECORATIVE ONLY — fails AA for text
     #c1121f on #0c0c0c ...  3.1:1   DECORATIVE / large display only
     #f2f4f5 on #c1121f ...  6.0:1   the accent is safe as a BACKGROUND
   The accent red is a fill, a rule and a marker. It is never small text.
   ========================================================================== */

/* --- 1. Fonts ------------------------------------------------------------ */
/* The site uses the two font stacks the logo SVG declares, and nothing else:
     display -> "Cormorant Garamond, Playfair Display, Times New Roman, serif"
     body    -> "Helvetica Neue, Helvetica, Arial, sans-serif"
   Copied verbatim from design/logo/ventori-pinnacle-primary-dark.svg so the
   page and the mark resolve to the same faces on the same machine.

   Only the display face is a webfont. The body stack is entirely system fonts —
   Helvetica Neue on macOS/iOS, Arial on Windows — so it downloads nothing,
   renders instantly, and adds no privacy surface. That is a deliberate
   consequence of matching the logo, not an omission.

   Cormorant Garamond is self-hosted: no Google Fonts CDN call, so a visitor's
   IP never leaves our origin and the CSP stays at font-src 'self'. Run
   scripts/fetch-fonts.sh to populate /assets/fonts/. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* 400 is what the logo SVG's <text> elements resolve to — they declare no
   font-weight. The inlined lockup depends on this face being present, so it is
   font-display: block, not swap: a logo should appear a beat late in the right
   face rather than instantly in Times New Roman. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  /* Ground and surfaces */
  --vp-black: #0c0c0c;
  --vp-surface: #151515;
  --vp-surface-2: #1b1f22;
  --vp-line: #2a2a2a;
  --vp-line-2: #33393e;

  /* Type */
  --vp-text: #f2f4f5;
  --vp-text-2: #dfe2e4;
  --vp-muted: #b9bdc0;
  --vp-steel: #8a9197;
  --vp-steel-dim: #6f767c; /* decorative only — see contrast note above */

  /* Accent */
  --vp-red: #c1121f;
  --vp-red-deep: #8d1420;

  /* Families — both stacks are the logo's own, verbatim */
  --font-display: "Cormorant Garamond", "Playfair Display", "Times New Roman", Times, serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Rhythm */
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 60px);
  --sp-section: clamp(72px, 10vw, 132px);

  /* Tracking — the wordmark is heavily tracked; the UI echoes it, more softly */
  --track-label: 0.22em;
  --track-word: 0.14em;
}

/* --- 3. Reset ------------------------------------------------------------ */

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

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--vp-black);
  color: var(--vp-text);
  font-family: var(--font-body);
  /* 400, not 300: Arial (the Windows resolution of this stack) has no Light,
     so a 300 here would be synthesised or silently rounded up. Setting it
     explicitly makes Windows and macOS agree. */
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  /* Agiloft tracks its sans slightly negative at every size (-0.015 to
     -0.028em). It tightens Arial's rather wide default fit and stops the body
     copy reading loose next to the tightly-tracked display serif. Labels and
     buttons override this with their own positive tracking. */
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Motion is opt-out at the root. Every animation below uses fill-mode `both`,
   so collapsing the duration lands the element on its FINAL keyframe — content
   is never left hidden by a disabled animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  /* Also disable page transitions — they are motion too. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* --- 3b. Motion ---------------------------------------------------------- */

/* Cross-document view transitions. One at-rule, no JavaScript: navigating
   between pages cross-fades instead of flashing white. Browsers without support
   simply navigate as normal. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 0.18s ease both; }
::view-transition-new(root) { animation: vt-in 0.28s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* The masthead is the same object on every page, so let it persist through the
   transition rather than cross-fading with itself. */
.site-head { view-transition-name: masthead; }
.site-foot { view-transition-name: footer; }

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Scroll-driven reveals, using a native view() timeline — no scroll listener,
   no IntersectionObserver, no JavaScript at all.

   Double-guarded on purpose. The initial `opacity: 0` only ever applies inside
   `@supports (animation-timeline: view())`, so a browser that cannot run the
   animation never hides the content in the first place. That is the failure
   mode worth designing against: a reveal effect that leaves a page blank is far
   worse than no reveal effect. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .strip__cell,
    .split__cell,
    .tier,
    .card,
    .steps li,
    .section__n,
    .section__h,
    .section__lede,
    .factbox,
    .qa {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }

    /* Stagger by shifting each sibling's range a little later, which is how you
       get a cascade on a scroll timeline — animation-delay does not apply. */
    .strip__cell:nth-child(2),
    .split__cell:nth-child(2),
    .tier:nth-child(2),
    .card:nth-child(2),
    .steps li:nth-child(2) { animation-range: entry 4% cover 33%; }

    .strip__cell:nth-child(3),
    .split__cell:nth-child(3),
    .tier:nth-child(3),
    .card:nth-child(3),
    .steps li:nth-child(3) { animation-range: entry 4% cover 40%; }

    .split__cell:nth-child(4),
    .steps li:nth-child(4) { animation-range: entry 4% cover 47%; }

    /* Accent rules draw out from their left edge as they arrive. */
    .rule--accent {
      transform-origin: left center;
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}

/* Hero content is above the fold, so it animates on load rather than on scroll.
   Kept short — this is a consultancy, not a title sequence. */
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > .eyebrow { animation: rise 0.5s ease both 0.05s; }
  .hero__title            { animation: rise 0.6s ease both 0.12s; }
  .hero__inner > .rule    { animation: rise 0.5s ease both 0.22s; }
  .hero__inner > .lede    { animation: rise 0.6s ease both 0.28s; }
  .hero__inner > .cta-row { animation: rise 0.6s ease both 0.36s; }
  .page-head .eyebrow          { animation: rise 0.45s ease both 0.04s; }
  .page-head__title            { animation: rise 0.55s ease both 0.1s; }
  .page-head .rule--accent     { animation: rise 0.45s ease both 0.18s; }
  .page-head .lede             { animation: rise 0.55s ease both 0.24s; }
}

/* --- 4. Focus & skip link ------------------------------------------------ */
/* Visible keyboard focus is an accessibility requirement, and a cheap defence
   against click-jacking-style confusion: the user can always see where they are. */

:focus-visible {
  outline: 2px solid var(--vp-red);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--vp-red);
  color: var(--vp-text);
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: var(--track-word);
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

main:focus { outline: none; }

/* --- 5. Layout primitives ------------------------------------------------ */

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

/* Brand marks carry no width/height attributes — every placement sizes them
   here, so there is exactly one file to change when a size is wrong. */
.crest { width: 28px; height: 28px; flex: none; }

/* Horizontal lockup, inlined from the logo SVG. `aspect-ratio` is what makes
   `width: auto` deterministic here: an inline <svg> that carries a viewBox but
   no width/height attribute has no reliable intrinsic width inside a flex
   parent, and can lay out at zero. The ratios are the cropped viewBoxes. */
.lockup-mark {
  height: 48px;
  width: auto;
  aspect-ratio: 700 / 246;
  flex: none;
}
/* Full lockup with tagline. Below ~340px wide the tagline stops being legible —
   that is why the header uses the cropped mark instead. */
.lockup-full {
  width: 100%;
  max-width: 380px;
  height: auto;
  aspect-ratio: 788 / 246;
}

.rule { height: 1px; background: var(--vp-line); }
.rule--accent {
  width: 64px;
  height: 2px;
  background: var(--vp-red);
  margin: 28px 0 28px;
}

.eyebrow,
.label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
}

.link {
  color: var(--vp-text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--vp-red-deep);
  padding-bottom: 2px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.link:hover { color: var(--vp-text); border-bottom-color: var(--vp-red); }

/* --- 6. Buttons ---------------------------------------------------------- */
/* Square. No pills, no gradients — the brand is engraved, not extruded. */

/* Square. Griffin uses fully-rounded pills; Agiloft uses 0-2px. We follow
   Agiloft — the brand is engraved, not extruded, and the spec rules out pills.
   The trailing arrow is Griffin's, and it costs nothing. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-word);
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn__arrow { transition: transform 0.18s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--solid {
  background: var(--vp-red);
  color: var(--vp-text);
  border-color: var(--vp-red);
}
.btn--solid:hover { background: var(--vp-red-deep); border-color: var(--vp-red-deep); }

/* background: transparent is load-bearing on both of these. They started life
   on <a> elements, which have none; on a <button> the UA's grey fill shows
   through and the control reads as disabled. */
.btn--outline {
  color: var(--vp-text);
  background: transparent;
  border-color: var(--vp-red-deep);
  padding: 10px 20px;
}
.btn--outline:hover { border-color: var(--vp-red); background: rgba(193, 18, 31, 0.08); }

.btn--quiet {
  padding: 15px 0;
  color: var(--vp-muted);
  background: transparent;
  border-bottom: 1px solid var(--vp-red-deep);
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 13px;
}
.btn--quiet:hover { color: var(--vp-text); border-bottom-color: var(--vp-red); }

/* --- 7. Header ----------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--vp-line);
  background: var(--vp-black);
}
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
}

/* The lockup is now the SVG itself — no HTML wordmark to keep in sync, and no
   letter-spacing for anyone to guess at. */
.lockup {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav__list { display: flex; gap: 30px; }
.site-nav__list a {
  position: relative;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: var(--track-word);
  text-transform: uppercase;
  color: var(--vp-steel);
  text-decoration: none;
  padding-block: 4px;
  transition: color 0.18s ease;
}
/* Underline wipes in from the left instead of snapping on. */
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--vp-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.site-nav__list a:hover { color: var(--vp-text); }
.site-nav__list a:hover::after { transform: scaleX(1); }
.site-nav__list a[aria-current="page"] { color: var(--vp-text); }
.site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 940px) {
  /* Phase 1 has no JS. Rather than ship a broken hamburger, the nav wraps.
     A proper disclosure menu is a Phase 2 job — and must stay CSP-safe
     (external script file, never inline). */
  .site-head__inner { flex-wrap: wrap; }
  .site-nav { width: 100%; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .site-nav__list { gap: 18px; flex-wrap: wrap; }
  .lockup-mark { height: 40px; }
}

/* --- 8. Hero ------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(120% 100% at 50% -10%, #1a1a1a 0%, var(--vp-black) 62%),
    var(--vp-black);
  padding-bottom: var(--sp-section);
}
/* Left-aligned, not centred. Both reference sites (griffin.com, agiloft.com)
   hang the headline off the left gutter and let it run — centring a long serif
   headline is the generic-template look this brand is trying to avoid. */
.hero__inner {
  padding-top: clamp(72px, 10vw, 120px);
}

/* Display treatment taken from those two: large, LIGHT, tightly tracked, with
   leading close to solid. Griffin runs 72px/w300/ls-0.02em/lh1.0; Agiloft runs
   88px/w200/ls-0.01em/lh1.05. Cormorant is a delicate face already, so 400 —
   which is also the wordmark's weight, so headline and mark agree. */
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 7vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--vp-text);
  margin-top: 20px;
  /* Wide enough that the explicit <br> decides the break rather than this —
     "presented as evidence." is 22ch, so 15ch was forcing a third line. */
  max-width: 24ch;
}

.lede {
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.6;
  color: var(--vp-text-2);
  max-width: 56ch;
}
/* Griffin's two-tone lede: the qualifying half drops back a step, so the
   opening claim carries and the caveat still reads. */
.lede__dim { color: var(--vp-steel); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  margin-top: 40px;
}

/* --- 9. Numbered strip --------------------------------------------------- */

.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--vp-line);
  margin-top: clamp(56px, 8vw, 96px);
}
.strip__cell {
  padding: 30px 34px 30px 0;
  border-right: 1px solid var(--vp-line);
}
.strip__cell:first-child { padding-left: 0; }
.strip__cell:not(:first-child) { padding-left: 34px; }
.strip__cell:last-child { border-right: 0; padding-right: 0; }

.strip__n {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vp-red);
  margin-bottom: 10px;
}
.strip__h {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--vp-text);
  margin-bottom: 8px;
}
.strip__p { font-size: 13.5px; line-height: 1.6; color: var(--vp-steel); }

@media (max-width: 800px) {
  .strip { grid-template-columns: 1fr; }
  .strip__cell {
    border-right: 0;
    border-bottom: 1px solid var(--vp-line);
    padding: 26px 0;
  }
  .strip__cell:not(:first-child) { padding-left: 0; }
  .strip__cell:last-child { border-bottom: 0; }
}

/* --- 9b. Plan band ------------------------------------------------------- */
/* Full-bleed texture under the hero. Both reference sites run one; ours is a
   venue floor plan rather than a decorative motif, because that is the actual
   subject. The tile is an SVG served from our own origin, so it stays inside
   img-src 'self'. */

.plan-band {
  position: relative;
  height: clamp(150px, 20vw, 240px);
  border-top: 1px solid var(--vp-line);
  border-bottom: 1px solid var(--vp-line);
  background-color: var(--vp-black);
  background-image: url("/assets/img/pattern-plan.svg");
  background-repeat: repeat;
  background-position: center;
  overflow: hidden;
}
/* Fade the tile into the page at both edges so it reads as texture rather than
   wallpaper with a hard seam. */
.plan-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--vp-black) 0%,
    rgba(12, 12, 12, 0) 26%,
    rgba(12, 12, 12, 0) 74%,
    var(--vp-black) 100%
  );
}
.plan-band__label {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--vp-black);
  border: 1px solid var(--vp-line-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-muted);
  white-space: nowrap;
}
.plan-band__dot { width: 6px; height: 6px; background: var(--vp-red); flex: none; }

/* The plan drifts, very slowly — enough that the band feels alive on a long
   read without ever pulling the eye off the type. 120s for one tile. Guarded
   rather than left to the global reduce rule, because collapsing an INFINITE
   animation's duration to 0.01ms means repainting flat out forever. */
@media (prefers-reduced-motion: no-preference) {
  .plan-band { animation: plan-drift 120s linear infinite; }
}
@keyframes plan-drift {
  from { background-position: 0 0; }
  to   { background-position: 240px 0; }
}

/* The marker pulses on the same slow clock as the drift. */
@media (prefers-reduced-motion: no-preference) {
  .plan-band__dot { animation: dot-pulse 3.2s ease-in-out infinite; }
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (max-width: 620px) {
  .plan-band__label { font-size: 9.5px; letter-spacing: 0.16em; padding: 8px 14px; }
}

/* --- 10. Sections -------------------------------------------------------- */

.section { padding-block: var(--sp-section); border-top: 1px solid var(--vp-line); }
.section--alt { background: var(--vp-surface); }
.section--cta { background: var(--vp-surface); }

.section__n {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vp-red);
  margin-bottom: 14px;
}
/* Larger section label that alternates red and grey down a page (/services/).
   Scoped under .section so it also beats the .prose p rule. */
.section .section__n--md { font-size: 16px; margin: 0 0 14px; }
.section .section__n--red { color: var(--vp-red); }
.section .section__n--grey { color: var(--vp-muted); }
.section__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--vp-text);
  max-width: 20ch;
}
.section__lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--vp-muted);
  max-width: 62ch;
  margin-top: 22px;
}
.section__foot { margin-top: 36px; font-size: 13px; }

/* --- 10b. Capacity scale -------------------------------------------------- */

.scale { margin-top: 40px; }
.scale__svg { width: 100%; height: auto; display: block; }
.scale__note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--vp-steel);
  max-width: 68ch;
}

/* The bands grow from the left as the graphic scrolls into view, so the eye
   reads the scale in the order the Act does: nothing, then 200, then 800.
   Same double guard as the other reveals - without scroll-timeline support the
   bands are simply drawn at full width. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scale__band {
      transform: scaleX(0);
      transform-origin: left center;
      animation: rule-draw linear both;
      animation-timeline: view();
    }
    .scale__band--out { animation-range: entry 12% cover 26%; }
    .scale__band--std { animation-range: entry 12% cover 36%; }
    .scale__band--enh { animation-range: entry 12% cover 46%; }
  }
}

/* --- 11. Split / tiers --------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--vp-line);
  border: 1px solid var(--vp-line);
  margin-top: 48px;
}
.split__cell { background: var(--vp-black); padding: 34px; }
/* Agiloft's stat-tile move: the number carries the tile, set large and light
   with the leading solid. Red is legitimate here — at 56px it is well past the
   large-text threshold, unlike body copy. */
.split__k {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 60px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--vp-red);
}
.split__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--vp-text);
  margin: 14px 0 10px;
}
.split__p { font-size: 14.5px; line-height: 1.7; color: var(--vp-steel); }

.caveat {
  margin-top: 28px;
  padding: 16px 20px;
  border-left: 2px solid var(--vp-red-deep);
  background: var(--vp-surface);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--vp-muted);
  max-width: 74ch;
}
.caveat strong { color: var(--vp-text-2); font-weight: 500; }

.tiers {
  display: grid;
  /* Two, not three. The tiers mirror the Act's own duty tiers - standard and
     enhanced - so a third marketing tier had nothing in law to map onto.
     Complex and multi-site work is quoted individually below the table. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--vp-line-2);
  border: 1px solid var(--vp-line-2);
  margin-top: 48px;
}
.tier {
  background: var(--vp-surface);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
}
.tier--feature { background: var(--vp-surface-2); }
.tier__flag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-text);
  background: var(--vp-red-deep);
  align-self: flex-start;
  padding: 4px 10px;
  margin-bottom: 14px;
}
.tier__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--vp-text);
}
.tier__price {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--vp-text-2);
  margin: 10px 0 18px;
}
.tier__price span { font-family: var(--font-body); font-size: 12px; color: var(--vp-steel); }
.tier__p { font-size: 14px; line-height: 1.7; color: var(--vp-steel); flex: 1; }
/* Services tier cards: intro, "Includes" and a list share the card's text size.
   The wrapper takes the flex growth so the retainer line stays at the foot. */
.tier__body { flex: 1; }
.tier__body .tier__p { flex: none; }
.tier__body .tier__p + .tier__p { margin-top: 12px; }
.tier .list { margin-top: 10px; }
.tier .list li { font-size: 14px; line-height: 1.6; margin-top: 8px; color: var(--vp-steel); }
.tier .list li::before { top: 11px; }
.tier__ret {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--vp-line-2);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--vp-steel);
}

@media (max-width: 860px) {
  .split, .tiers { grid-template-columns: 1fr; }
}

/* --- 12. CTA band -------------------------------------------------------- */

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cta-band .section__h { max-width: 16ch; }

/* --- 13. Footer ---------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--vp-line);
  padding-block: clamp(48px, 7vw, 80px) 40px;
  background: var(--vp-black);
}
.site-foot__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--vp-line);
}
/* The footer has room for the full lockup, tagline and all — so it gets the
   asset rather than a rebuilt-in-HTML approximation of it. */
.site-foot__nav .label { margin-bottom: 14px; }
.site-foot__nav li { margin-bottom: 9px; }
.site-foot__nav a {
  font-size: 13px;
  color: var(--vp-steel);
  text-decoration: none;
  transition: color 0.18s ease;
}
.site-foot__nav a:hover { color: var(--vp-text); }

.site-foot__note {
  margin-top: 32px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--vp-steel);
  max-width: 92ch;
}
.site-foot__copy {
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--vp-steel);
}

@media (max-width: 700px) {
  .site-foot__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* --- 14. Interior page head ---------------------------------------------- */

.page-head {
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--vp-line);
  background:
    radial-gradient(120% 140% at 0% -20%, #1a1a1a 0%, var(--vp-black) 60%),
    var(--vp-black);
}
/* A step below the home hero, so the home page keeps the largest type. */
.page-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--vp-text);
  max-width: 20ch;
  margin-top: 18px;
}

/* --- 15. Prose ----------------------------------------------------------- */

.prose { max-width: 74ch; }
.prose p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--vp-muted);
}
.prose strong { color: var(--vp-text-2); font-weight: 500; }
.prose em { color: var(--vp-text-2); font-style: italic; }
.prose .section__h + p { margin-top: 24px; }
/* Full-width blocks opt out of the reading measure. */
.prose .split,
.prose .steps,
.prose .caveat { max-width: none; }

.list { margin-top: 22px; }
.list li {
  position: relative;
  padding-left: 24px;
  margin-top: 15px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--vp-muted);
}
/* A hairline dash rather than a bullet — same language as the section rules. */
.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px;
  height: 1px;
  background: var(--vp-red);
}

.steps {
  margin-top: 42px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--vp-line);
  border: 1px solid var(--vp-line);
}
.steps li { background: var(--vp-black); padding: 30px; }
.steps li .steps__n {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vp-red);
}
.steps li .steps__n::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--vp-red);
}
.steps__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--vp-text);
  margin: 10px 0 14px;
}
.steps li p:not(.steps__n) {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--vp-steel);
}
.steps li p:not(.steps__n):last-child { margin: 0; }
.steps li p:not(.steps__n) strong { color: var(--vp-text); font-weight: 600; }

.prose__h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--vp-text);
  margin-top: 40px;
}

/* Screen-reader-only. Used for table captions that would be redundant on screen
   but that a screen reader needs to announce the table's purpose. */
.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;
}

/* Cited fact panel — for anything traceable to a named source. */
.factbox {
  margin-top: 34px;
  border: 1px solid var(--vp-line-2);
  background: var(--vp-surface);
  padding: 26px 28px;
  overflow-x: auto; /* the table scrolls inside this, never the page body */
}
.factbox__label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
  margin-bottom: 18px;
}
.factbox__src {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--vp-steel);
}
.ftable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.ftable th {
  text-align: left;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
  padding: 0 16px 11px 0;
  border-bottom: 1px solid var(--vp-line-2);
}
.ftable td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--vp-line);
  color: var(--vp-muted);
  vertical-align: top;
  line-height: 1.5;
}
.ftable tbody tr:last-child td { border-bottom: 0; }

/* Quoted statute. Set in the display face so a quotation reads as evidence
   rather than as more body copy. */
.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 2.3vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--vp-text-2);
}
.pullquote strong { color: var(--vp-text); font-weight: 400; }

.sources li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vp-muted);
}
.sources li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 1px;
  background: var(--vp-red);
}
.sources__note { color: var(--vp-steel); }

/* --- 15c. FAQ accordion --------------------------------------------------- */
/* Native <details>/<summary>. No JavaScript, so it works with the CSP as it
   stands, works before any script would have loaded, and is keyboard- and
   screen-reader-accessible without a single ARIA attribute. */

.qa {
  border-bottom: 1px solid var(--vp-line);
  max-width: none;
}
.qa:first-of-type { border-top: 1px solid var(--vp-line); }
.qa__q {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--vp-text-2);
  transition: color 0.18s ease;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--vp-text); }
.qa[open] .qa__q { color: var(--vp-text); }

/* Custom marker: a plus that becomes a minus. Drawn with two rules rather than
   a glyph so it stays aligned across the font stack's fallbacks. */
.qa__q::before,
.qa__q::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--vp-red);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.qa__q::before { width: 14px; height: 1.5px; transform: translateY(-50%); }
.qa__q::after { width: 1.5px; height: 14px; right: 12.25px; transform: translateY(-50%); }
.qa[open] .qa__q::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }

.qa__a { padding: 0 0 26px; }
.qa__a p { margin-top: 0; margin-bottom: 14px; font-size: 15.5px; }
.qa__a p:last-child { margin-bottom: 0; }
.qa__a .list { margin-top: 4px; }
.qa__a .factbox { margin-top: 20px; margin-bottom: 18px; }

/* --- 15b. Card lists (insights, sectors) --------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--vp-line);
  border: 1px solid var(--vp-line);
}
.card {
  background: var(--vp-black);
  padding: 32px 30px 28px;
  display: flex;
  flex-direction: column;
  transition: background-color 0.18s ease;
}
.card:hover { background: var(--vp-surface); }
/* An accent rule draws across the top edge on hover, from the left. Cheap,
   compositor-only (transform, not width), and it echoes the section rules. */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vp-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card:hover::before,
.card:focus-within::before { transform: scaleX(1); }
.card__meta {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
}
.card__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 14px 0 12px;
}
.card__h a {
  color: var(--vp-text);
  text-decoration: none;
}
/* Stretched link: the whole card is the target, but the accessible name still
   comes from the heading text alone. */
.card__h a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card__h a:hover { color: var(--vp-text); }
.card:hover .card__more { color: var(--vp-red); }
.card__p { font-size: 14.5px; line-height: 1.7; color: var(--vp-steel); flex: 1; }
.card__more {
  margin-top: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-word);
  text-transform: uppercase;
  color: var(--vp-steel-dim);
  transition: color 0.18s ease;
}

/* --- 16. Form controls --------------------------------------------------- */

.field { margin-bottom: 26px; border: 0; padding: 0; min-width: 0; }
.field__label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
  margin-bottom: 10px;
  padding: 0;
}
.field__hint {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vp-steel);
  margin: -2px 0 10px;
}
.field__control {
  width: 100%;
  background: var(--vp-black);
  color: var(--vp-text);
  border: 1px solid var(--vp-line-2);
  border-radius: 0;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: -0.011em;
  transition: border-color 0.18s ease;
}
.field__control:hover { border-color: var(--vp-steel-dim); }
.field__control:focus { border-color: var(--vp-red); outline: none; }
.field__control:focus-visible { outline: 2px solid var(--vp-red); outline-offset: 2px; }
select.field__control { appearance: none; cursor: pointer; }
textarea.field__control { resize: vertical; line-height: 1.6; }

.field--check { margin-bottom: 30px; }
.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vp-muted);
  cursor: pointer;
}
.check input { margin: 3px 0 0; accent-color: var(--vp-red); flex: none; }

.req { color: var(--vp-red); }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and the point is that they should fill this one in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__consent {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--vp-steel);
  margin: 4px 0 26px;
  max-width: 58ch;
}

/* --- 17. Scope checker --------------------------------------------------- */

.tool { max-width: 800px; }
.tool__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 6px; }
.tool__result {
  margin-top: 38px;
  border-left: 2px solid var(--vp-red);
  background: var(--vp-surface);
  padding: 28px 30px;
}
.tool__verdict {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--vp-text);
}
.tool__detail { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--vp-muted); }
.tool__notes { margin-top: 20px; }
.tool__notes li {
  position: relative;
  padding-left: 24px;
  margin-top: 13px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--vp-steel);
}
.tool__notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 1px;
  background: var(--vp-steel-dim);
}
.tool__privacy { margin-top: 26px; font-size: 13.5px; line-height: 1.7; color: var(--vp-steel); }
.tool__privacy strong { color: var(--vp-text-2); font-weight: 500; }
.tool__intro {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--vp-steel);
  max-width: 66ch;
  margin: 10px 0 28px;
}
.tool__intro strong { color: var(--vp-muted); font-weight: 500; }

/* Gap checker (rebuilt 2026-09-16): one area per screen, built from the
   question list in gap-checker.js. Shares the .wiz and .tool__ styles with the
   scope checker. */
/* .wiz__group.gap__q: .wiz__group is declared later in this file and would
   otherwise reset the margin, padding and border. */
.wiz__group.gap__q { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--vp-line); }
.wiz__help + .wiz__group.gap__q { margin-top: 30px; padding-top: 0; border-top: 0; }
.gap__q .gap__qtext { margin-top: 0; font-size: 17px; color: var(--vp-text); }
.gap__hint { margin: 2px 0 12px; max-width: 60ch; font-size: 14.5px; line-height: 1.55; color: var(--vp-muted); }
.gap__from { margin-top: 6px; color: var(--vp-text-2); }

.tool__badge[data-key="ready"] { border-color: var(--vp-text-2); background: var(--vp-text-2); color: var(--vp-black); }
.tool__badge[data-key="nearly"] { border-color: var(--vp-red); }
.tool__badge[data-key="not-ready"] { border-color: var(--vp-red); background: var(--vp-red); color: #fff; }

.gap__areas { margin: 8px 0 0; padding: 0; list-style: none; }
.gap__arearow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--vp-line);
  font-size: 16px;
  color: var(--vp-text-2);
}
.gap__chip {
  flex-shrink: 0;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--vp-steel);
  color: var(--vp-text-2);
}
.gap__chip[data-status="ready"] { border-color: var(--vp-text-2); background: var(--vp-text-2); color: var(--vp-black); }
.gap__chip[data-status="work"] { border-color: var(--vp-red); color: var(--vp-text); }
.gap__chip[data-status="missing"] { border-color: var(--vp-red); background: var(--vp-red); color: #fff; }

.gap__todos { margin: 14px 0 0; padding-left: 22px; }
.gap__todo { margin-top: 18px; padding-left: 4px; max-width: 64ch; }
.gap__todo::marker { color: var(--vp-steel); }
.gap__tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gap__tag--law { background: var(--vp-red); color: #fff; }
.gap__tag--guidance { border: 1px solid var(--vp-steel); color: var(--vp-text-2); }
.gap__fix { display: block; font-size: 16.5px; line-height: 1.6; color: var(--vp-text); }
.gap__area { display: block; margin-top: 2px; font-size: 13.5px; color: var(--vp-steel); }
.gap__help { display: inline-block; margin-top: 4px; font-size: 14.5px; }
.gap__working li { margin-top: 12px; }
.gap__wq { display: block; color: var(--vp-text-2); }
.gap__wa { display: block; margin-top: 2px; font-size: 13.5px; color: var(--vp-steel); }
.tool__privacy strong { color: var(--vp-text-2); font-weight: 500; }

/* --- 17b. Capacity calculator (scope checker) ----------------------------- */
/* Native <details>, same reasoning as the FAQ accordion: no JavaScript is
   needed just to open and close it, so none is spent on that. The plus/minus
   marker reuses the FAQ's visual idiom on a standalone panel rather than a
   list row, which is why it is its own class rather than reusing .qa.

   The layout is a table on desktop and a stack of labelled cards below 780px.
   Both states carry a name for every field: the column head does it on wide
   screens, .calc__cell-label does it when the columns collapse. A bare row of
   unlabelled inputs was the first version, and nobody could tell what went
   where — which is the whole reason this component was rebuilt. */

.calc {
  margin: 14px 0 0;
  border: 1px solid var(--vp-line-2);
  background: var(--vp-surface);
}
.calc__summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 46px 15px 18px;
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--vp-muted);
  transition: color 0.18s ease;
}
.calc__summary::-webkit-details-marker { display: none; }
.calc__summary:hover { color: var(--vp-text); }
.calc[open] .calc__summary { color: var(--vp-text); border-bottom: 1px solid var(--vp-line-2); }
.calc__summary::before,
.calc__summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  background: var(--vp-red);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.calc__summary::before { width: 12px; height: 1.5px; transform: translateY(-50%); }
.calc__summary::after { width: 1.5px; height: 12px; right: 23.25px; transform: translateY(-50%); }
.calc[open] .calc__summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }

.calc__body { padding: 24px 20px 28px; }
.calc__intro { font-size: 13.5px; line-height: 1.7; color: var(--vp-steel); max-width: 64ch; }
.calc__intro strong { color: var(--vp-muted); font-weight: 500; }

.calc__example {
  margin-top: 16px;
  padding: 11px 15px;
  border-left: 2px solid var(--vp-red-deep);
  background: var(--vp-black);
  font-size: 13px;
  line-height: 1.6;
  color: var(--vp-muted);
  max-width: 64ch;
}

.calc__step {
  margin-top: 32px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--vp-text);
}
.calc__stephint {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--vp-steel);
  max-width: 66ch;
}

.calc__head,
.calc__row {
  display: grid;
  grid-template-columns: 1.15fr 1.4fr 0.72fr 0.72fr 0.8fr auto;
  gap: 10px;
  align-items: center;
}
.calc__head {
  margin-top: 20px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--vp-line-2);
}
.calc__head span {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
}
.calc__rows { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.calc__cell { min-width: 0; }
.calc__cell-label { display: none; }
.calc__row .field__control { padding: 9px 10px; font-size: 13.5px; }
.calc__people {
  font-size: 15px;
  color: var(--vp-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__remove {
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track-word);
  text-transform: uppercase;
  color: var(--vp-steel-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.calc__remove:hover { color: var(--vp-red); }

@media (max-width: 780px) {
  .calc__head { display: none; }
  .calc__rows { gap: 14px; }
  .calc__row {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--vp-line-2);
    background: var(--vp-black);
    align-items: start;
  }
  .calc__cell--name,
  .calc__cell--type { grid-column: 1 / -1; }
  .calc__cell--remove { text-align: right; align-self: center; }
  .calc__cell-label {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--vp-steel);
    margin-bottom: 7px;
  }
}

.calc__add { margin-top: 16px; font-size: 11px; padding: 10px 18px; }

.calc__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 20px; }
.calc__pair .field { margin-bottom: 0; }
@media (max-width: 640px) { .calc__pair { grid-template-columns: 1fr; gap: 24px; } }

.calc__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--vp-black);
  border: 1px solid var(--vp-line-2);
}
.calc__total-label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
}
.calc__total-figure {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--vp-red);
  font-variant-numeric: tabular-nums;
}
.calc__totalnote {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--vp-steel);
  max-width: 64ch;
}

.calc .factbox { margin-top: 30px; }

/* The three questions are numbered so it is obvious there are only three,
   and which one you are on. */
.field__n {
  display: inline-block;
  margin-right: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--vp-red);
}

/* Result panel reuses the homepage's capacity scale to show where the
   answered figure actually lands — the same evidence-first move as the
   figure itself, not a decorative addition. */
.tool__result .scale { margin-top: 30px; }

/* --- 17c. Scope checker: the question-at-a-time guide -------------------- */
/* Rebuilt 2026-09-16 for visitors who have never read the Act: one question
   per screen, big answer buttons, and the legal working hidden behind a
   <details> in the result. Progress widths are classes, not inline styles,
   because the CSP forbids style attributes. */

.tool [hidden] { display: none !important; }

.wiz { max-width: 760px; }
.wiz__progress { height: 3px; background: var(--vp-line-2); }
.wiz__bar { display: block; height: 3px; width: 8%; background: var(--vp-red); transition: width 0.3s ease; }
.wiz__bar--1 { width: 11%; } .wiz__bar--2 { width: 22%; } .wiz__bar--3 { width: 33%; }
.wiz__bar--4 { width: 44%; } .wiz__bar--5 { width: 55%; } .wiz__bar--6 { width: 66%; }
.wiz__bar--7 { width: 77%; } .wiz__bar--8 { width: 88%; } .wiz__bar--9 { width: 95%; }
.wiz__count {
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
}

.wiz__step { margin-top: 14px; }
.wiz__q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--vp-text);
  outline: none;
}
.wiz__help {
  margin-top: 12px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vp-muted);
}

.wiz__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 26px;
}
.wiz__options--wide { grid-template-columns: 1fr; max-width: 620px; }
.wiz__opt {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 16px 18px;
  text-align: left;
  background: var(--vp-surface);
  border: 1px solid var(--vp-line-2);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--vp-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wiz__opt span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--vp-steel);
}
.wiz__opt:hover { border-color: var(--vp-red); background: rgba(193, 18, 31, 0.08); }
.wiz__opt:focus-visible { outline: 2px solid var(--vp-red); outline-offset: 2px; }

/* Spacing loosened 2026-09-16 at the owner's request: each question on a
   screen reads as its own block, with room between the label and its answer. */
.wiz__label {
  display: block;
  margin: 36px 0 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vp-text-2);
}
.wiz__help + .wiz__label,
.wiz__example + .wiz__label { margin-top: 32px; }
.wiz__label--gap { margin-top: 36px; }
.wiz__opt-tag { font-weight: 400; font-size: 13px; color: var(--vp-steel); }
.wiz__num { max-width: 260px; font-size: 20px; padding: 14px 16px; }
.wiz__group { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
.wiz__group .wiz__label { padding: 0; }
.wiz__num + .wiz__group { margin-top: 16px; }

.wiz__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.wiz__pill { position: relative; cursor: pointer; }
.wiz__pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wiz__pill span {
  display: block;
  min-width: 96px;
  padding: 13px 20px;
  text-align: center;
  background: var(--vp-surface);
  border: 1px solid var(--vp-line-2);
  font-size: 15.5px;
  color: var(--vp-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wiz__pill:hover span { border-color: var(--vp-steel-dim); }
.wiz__pill input:checked + span { border-color: var(--vp-red); background: rgba(193, 18, 31, 0.16); }
.wiz__pill input:focus-visible + span { outline: 2px solid var(--vp-red); outline-offset: 2px; }
.wiz__reveal { margin-top: 4px; }
.wiz__alt { margin-top: 26px; }
.wiz__example {
  margin-top: 18px;
  max-width: 60ch;
  padding: 14px 18px;
  border-left: 2px solid var(--vp-red);
  background: rgba(255, 255, 255, 0.03);
  font-size: 15px;
  line-height: 1.6;
  color: var(--vp-muted);
}
.wiz__example strong { color: var(--vp-text); font-weight: 500; }
.wiz__example-h {
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
}

.wiz__error {
  margin-top: 22px;
  padding: 12px 16px;
  border-left: 2px solid var(--vp-red);
  background: rgba(193, 18, 31, 0.1);
  font-size: 15px;
  color: var(--vp-text);
}
.wiz__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--vp-line);
}
.wiz__nav #wiz-next,
.wiz__nav #gap-next { margin-left: auto; }

.wiz .calc__head { margin-top: 26px; }
.wiz .calc__total { margin-top: 22px; }
.wiz .calc__pair { margin-top: 6px; }
.wiz .calc__pair .wiz__num { max-width: none; }

.flow__rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}
.flow__hour { display: block; }
.flow__label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--vp-steel);
  font-variant-numeric: tabular-nums;
}
.flow__hour .field__control { padding: 10px 11px; font-size: 15px; }
.flow__result { margin-top: 18px; font-size: 16px; line-height: 1.6; color: var(--vp-text); }

.tool__eyebrow {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
  margin-bottom: 8px;
}
.tool__plain { margin-top: 16px; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--vp-text-2); }
.tool__why { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--vp-muted); }

/* The answer a visitor reads first: a badge in one of four states, then one
   sentence. In scope = red; out of scope and exempt = light; unknown = dashed. */
.tool__answer { margin-top: 14px; }
.tool__badge {
  display: inline-block;
  padding: 10px 16px;
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--vp-steel);
  color: var(--vp-text);
}
.tool__badge[data-key="standard"] { border-color: var(--vp-red); color: var(--vp-text); }
.tool__badge[data-key="enhanced"] { border-color: var(--vp-red); background: var(--vp-red); color: #fff; }
.tool__badge[data-key="out"],
.tool__badge[data-key="exempt"] { border-color: var(--vp-text-2); background: var(--vp-text-2); color: var(--vp-black); }
.tool__badge[data-key="unknown"] { border-style: dashed; color: var(--vp-muted); }
.tool__answer .tool__verdict { margin-top: 14px; }
.tool__event-flag { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--vp-text); }

.tool__sec { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--vp-line-2); }
.tool__sec-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-text-2);
}
.tool__sec .tool__plain { margin-top: 8px; }
.tool__sec .scale { margin-top: 22px; }
/* Plan builder (2026-09-17): on-screen plan preview and pocket cards. */
.plan__intro { margin-top: 0; margin-bottom: 26px; }
.plan__input { max-width: 560px; }
textarea.plan__input { min-height: 110px; }
.plan__tips-h { margin-top: 26px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vp-steel); }
.plan__tips { margin: 8px 0 0; padding-left: 20px; max-width: 60ch; }
.plan__tips li { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--vp-muted); }
.plan__sheet {
  margin-top: 28px;
  padding: 26px 28px;
  background: #fff;
  color: #111;
  max-width: 760px;
}
.plan__title { font-family: var(--font-display); font-size: 26px; line-height: 1.2; color: #111; }
.plan__h { margin-top: 18px; padding-bottom: 4px; border-bottom: 1px solid #ccc; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #111; }
.plan__lines { margin: 8px 0 0; padding: 0; list-style: none; }
.plan__lines li { margin-top: 4px; font-size: 15px; line-height: 1.5; color: #222; }
.plan__lines .plan__bullet { padding-left: 14px; }
.plan__lines .plan__advice { color: #444; }
.plan__foot { margin-top: 18px; font-size: 12px; color: #666; }

.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.pcard {
  padding: 12px 14px;
  background: #fff;
  color: #111;
  border: 1px dashed #888;
  font-size: 12.5px;
  line-height: 1.35;
}
.pcard__title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #b00; }
.pcard__phrase { margin-top: 4px; font-weight: 700; font-size: 13.5px; color: #111; }
.pcard__steps { margin: 6px 0 0; padding-left: 18px; }
.pcard__steps li { margin-top: 2px; color: #222; }
.pcard__foot { margin-top: 6px; font-size: 10.5px; color: #555; }

@media print {
  html.print-record .plan-record__cards { page-break-before: always; break-before: page; }
  html.print-record .plan-record .plan__sheet,
  html.print-record .plan-record__page { padding: 0; }
  html.print-record .plan-record .plan__title { font-size: 18pt; }
  html.print-record .plan-record .plan__h { font-size: 10.5pt; margin-top: 10pt; }
  html.print-record .plan-record .plan__lines li { font-size: 10pt; margin-top: 2pt; }
  html.print-record .plan-record__cut { font-size: 9pt; margin-bottom: 6pt; }
  html.print-record .plan-record .pcards { display: grid; grid-template-columns: 85mm 85mm; gap: 0; }
  html.print-record .plan-record .pcard { width: 85mm; height: 55mm; box-sizing: border-box; overflow: hidden; page-break-inside: avoid; }
}

/* Staff briefing pack (2026-09-17): reuses the plan sheet styles. */
#brief-signoff { margin-top: 20px; }
.brief__sub { margin-top: 4px; }
.brief__qs { margin: 8px 0 0; padding-left: 20px; }
.brief__qs li { margin-top: 10px; color: #222; font-size: 15px; line-height: 1.5; }
.brief__q { display: block; font-weight: 600; color: #111; }
.brief__a { display: block; margin-top: 2px; color: #444; }
.brief__intro { margin-top: 10px; font-size: 15px; color: #222; }
.brief__table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.brief__table th,
.brief__table td { border: 1px solid #999; padding: 0 8px; height: 30px; text-align: left; font-size: 13px; color: #111; }
.brief__table th { background: #eee; font-weight: 600; }
@media print {
  html.print-record .brief-record .brief__table td { height: 9mm; }
  html.print-record .brief-record .brief__qs li { font-size: 10pt; }
}

/* "What next for you" on tool results, and the checker summary on /contact/. */
.tool__nextstep { border-top-color: var(--vp-red); }
.tool__nextstep-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.form__tool {
  margin-bottom: 26px;
  padding: 16px 18px;
  border: 1px solid var(--vp-line-2);
  border-left: 2px solid var(--vp-red);
  background: var(--vp-surface);
}
.form__tool-h { font-size: 15px; font-weight: 500; color: var(--vp-text); }
.form__tool-p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--vp-text-2); }
.form__tool-remove { margin-top: 8px; padding-left: 0; }
.tool__check { margin: 8px 0 0; padding: 0; list-style: none; }
.tool__check li {
  position: relative;
  margin-top: 8px;
  padding-left: 30px;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--vp-text-2);
}
.tool__check li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.tool__check--do li::before { content: "\2713"; color: var(--vp-red); }
.tool__check--dont li::before { content: "\2715"; color: var(--vp-steel); }
.tool__check ul { margin: 4px 0 0 2px; padding-left: 16px; list-style: disc; }
.tool__check ul li { padding-left: 0; margin-top: 2px; font-size: 16px; }
.tool__check ul li::before { content: none; }
.tool__lower {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--vp-line-2);
  border-left: 2px solid var(--vp-red);
}
.tool__lower-h { font-size: 18px; line-height: 1.4; color: var(--vp-text); }
.tool__lower-p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--vp-muted); }
.tool__lower-steps { margin: 6px 0 0 20px; padding: 0; }
.tool__lower-steps li { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--vp-muted); }
.tool__block { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--vp-line-2); }
.tool__block-h {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
}
.tool__block .tool__notes { margin-top: 4px; }
.tool__block .tool__notes li { font-size: 15px; color: var(--vp-muted); }
.tool__basis { margin-top: 16px; font-size: 14.5px; line-height: 1.7; color: var(--vp-muted); }
.tool__quality { margin-top: 8px; font-size: 13.5px; color: var(--vp-text-2); }
.tool__events li { margin-top: 14px; }
.tool__event-name { display: block; font-size: 15px; color: var(--vp-text); }
.tool__event-verdict { display: block; margin-top: 3px; font-size: 15px; line-height: 1.6; color: var(--vp-muted); }
.tool__working { margin-top: 30px; }
.tool__working .tool__block:first-of-type { margin-top: 20px; }
.tool__keep { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--vp-line-2); }
.tool__keep .tool__detail { margin-top: 8px; }
.tool__keep .calc__pair { margin-top: 4px; }
.tool__keep .wiz__label { margin-top: 16px; }
.tool__actions--result { margin-top: 24px; }

.ftable-wrap { overflow-x: auto; margin-top: 14px; }
.ftable--figure td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ftable--figure tr.is-governing td { color: var(--vp-text); font-weight: 500; }

/* The printable record. Never shown on screen: scope-checker.js builds it on
   request, appends it to <body>, and sets html.print-record for the print. */
.record { display: none; }
@media print {
  html.print-record body > *:not(.record) { display: none !important; }
  html.print-record, html.print-record body { background: #fff !important; color: #000 !important; }
  html.print-record .record {
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10.5pt;
    line-height: 1.45;
    color: #000;
  }
  .record__title { font-size: 18pt; font-weight: 600; margin: 0; }
  .record__sub { margin: 2pt 0 12pt; font-size: 9.5pt; color: #333; }
  .record__h {
    margin: 16pt 0 6pt;
    padding-bottom: 3pt;
    border-bottom: 1pt solid #000;
    font-size: 11.5pt;
    font-weight: 600;
    page-break-after: avoid;
  }
  .record__verdict { font-size: 13pt; font-weight: 600; margin: 0 0 4pt; }
  .record p.record__label { margin: 8pt 0 2pt; font-weight: 600; }
  .record p { margin: 0 0 6pt; }
  .record__table { width: 100%; border-collapse: collapse; margin: 6pt 0 8pt; page-break-inside: auto; }
  .record__table th, .record__table td {
    border: 0.75pt solid #999;
    padding: 3pt 5pt;
    text-align: left;
    vertical-align: top;
    font-size: 9.5pt;
  }
  .record__table th { background: #eee; font-weight: 600; }
  .record__table tr { page-break-inside: avoid; }
  .record__table--pairs th { width: 32%; }
  .record__list { margin: 0 0 6pt 14pt; padding: 0; list-style: disc; }
  .record__list li { margin: 0 0 3pt; }
  .record__foot { margin-top: 18pt; padding-top: 6pt; border-top: 0.75pt solid #999; font-size: 8.5pt; color: #333; }
}

/* --- 18. Contact --------------------------------------------------------- */

.contact { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(40px, 6vw, 80px); }
.contact__aside { border-left: 1px solid var(--vp-line); padding-left: clamp(24px, 3vw, 40px); }
.contact__aside .label { margin: 30px 0 10px; }
.contact__aside .label:first-child { margin-top: 0; }
.contact__line { font-size: 15px; color: var(--vp-muted); }
.contact__line--muted { font-size: 14px; line-height: 1.65; color: var(--vp-steel); }
.contact__line--muted strong { color: var(--vp-muted); font-weight: 400; }
/* list-style: none — the 01/02/03 come from the counter below. Without it the
   browser's own "1." was drawn beside them as well. */
.contact__steps { counter-reset: cstep; list-style: none; margin: 22px 0 0; padding: 0; }
.contact__steps li {
  counter-increment: cstep;
  position: relative;
  padding: 16px 0 0 34px;
  margin-top: 16px;
  border-top: 1px solid var(--vp-line);
}
.contact__steps li::before {
  content: "0" counter(cstep);
  position: absolute;
  left: 0;
  top: 17px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--vp-red);
}
.contact__step-h { display: block; font-size: 15px; font-weight: 500; color: var(--vp-text); }
.contact__step-p { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--vp-muted); }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; }
  .contact__aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--vp-line); padding-top: 32px; }
  .steps { grid-template-columns: 1fr; }
}


/* --- Bio portrait (about page) -------------------------------------------
   The principal photograph on /about/. Two columns on wide screens, stacked
   below. The image is a real JPEG served from our own origin: linking the
   LinkedIn CDN copy would breach img-src 'self' and hand a third party the IP
   address of every visitor who loads the page. It is resized and re-encoded at
   build-prep time from design/, and saved without EXIF - a camera original can
   carry GPS coordinates and a device serial. */

/* Stacked, not two-column. This block lives inside .prose, whose content box
   is the 74ch reading measure less the .wrap gutters - about 538px at desktop.
   A 300px portrait beside that leaves a 190px ribbon of text, which is why the
   obvious two-column version was wrong. The portrait sits above the copy and
   the copy keeps its measure. */
.bio { margin: 40px 0 36px; }

/* A byline, not a stacked photo. The portrait and the name sit on one optical
   line, which gives the block a single centre of gravity instead of three
   stacked ones - the reason the first version's spacing read badly was that
   image, caption and prose were each separated by a similar gap, so nothing
   grouped. Now the name binds to the photo, and one larger gap separates that
   whole unit from the prose. */
.bio__figure {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0 0 40px;
}

/* Circular. The source is cropped square at build-prep time (600x600), so the
   radius does not fight a portrait aspect; object-fit is belt and braces in
   case the file is ever replaced with a non-square one. The ring is the accent
   at low alpha - a full-strength red circle competes with the buttons. */
.bio__portrait {
  width: 176px;
  height: 176px;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--vp-line-2);
  box-shadow: 0 0 0 5px var(--vp-black), 0 0 0 6px rgba(193, 18, 31, 0.45);
  filter: saturate(0.88) contrast(1.02);
}

.bio__cap {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.bio__name {
  color: var(--vp-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.bio__role {
  color: var(--vp-steel);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.bio__link {
  margin-top: 4px;
  color: var(--vp-muted);
  font-size: 13px;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--vp-red-deep);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.bio__link:hover { color: var(--vp-text); border-bottom-color: var(--vp-red); }

@media (max-width: 520px) {
  .bio__figure { gap: 22px; }
  .bio__portrait { width: 124px; height: 124px; }
}


/* --- 15b. Long-form article (insights) ------------------------------------
   Markdown posts emit bare tags (h2, ul, ol, table, blockquote), which the rest
   of the stylesheet deliberately leaves unstyled. Everything here is scoped to
   .prose--article so the hand-built pages that share .prose are untouched.

   Reading measure: paragraphs and lists stop at 68ch; tables and the sources
   box may use the full 860px column. The column is left-aligned with the page
   header, so the title and the text start on the same edge.

   Contrast: body text is --vp-text-2 (#dfe2e4 on #0c0c0c, above 14:1). Table
   header labels use --vp-steel (5.9:1), the floor for text. The red is a rule
   and a marker only, never text. */

.section--article { padding-top: clamp(40px, 6vw, 72px); }

.prose.prose--article { max-width: 860px; }

.prose--article > p,
.prose--article > ul,
.prose--article > ol,
.prose--article > h3,
.prose--article > blockquote { max-width: 68ch; }

.prose--article > p {
  margin-top: 22px;
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--vp-text-2);
}
/* The opening paragraph is the answer. It is set larger so it reads as one. */
.prose--article > p:first-child {
  margin-top: 0;
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.6;
  color: var(--vp-text);
}
.prose--article strong { color: var(--vp-text); font-weight: 600; }

.prose--article a {
  color: var(--vp-text);
  text-decoration: none;
  border-bottom: 1px solid var(--vp-red);
  padding-bottom: 1px;
  transition: border-color 0.18s ease;
}
.prose--article a:hover { border-bottom-color: var(--vp-text); }

.prose--article > h2 {
  /* Same face, weight and tracking as .section__h, the site's own heading. */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--vp-text);
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: 28px;
  border-top: 1px solid var(--vp-line);
}
.prose--article > h2 + p,
.prose--article > h2 + ul,
.prose--article > h2 + ol,
.prose--article > h2 + .table-wrap { margin-top: 20px; }

.prose--article > h3 {
  /* Matches .prose__h3. */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--vp-text);
  margin-top: 40px;
}

/* Lists: a hairline dash for bullets, ringed numerals for steps. */
.prose--article > ul,
.prose--article > ol { margin-top: 22px; padding: 0; list-style: none; }
.prose--article li {
  position: relative;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--vp-text-2);
}
.prose--article li > p { margin: 0; font: inherit; color: inherit; }
.prose--article > ul > li { padding-left: 28px; }
.prose--article > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 11px;
  height: 1px;
  background: var(--vp-red);
}
.prose--article > ol { counter-reset: step; }
.prose--article > ol > li { padding-left: 50px; counter-increment: step; min-height: 32px; }
.prose--article > ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--vp-line-2);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 30px;
  text-align: center;
  color: var(--vp-text);
}

/* Quoted statute: the display face, a red rule. */
.prose--article > blockquote {
  margin: 32px 0 0;
  padding: 2px 0 2px 26px;
  border-left: 2px solid var(--vp-red);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--vp-text);
}
.prose--article > blockquote p { margin: 0; font: inherit; color: inherit; }

/* "In short": the answer box at the top of a post. */
.prose--article .keypoints {
  margin-top: 34px;
  max-width: 68ch;
  padding: 26px 30px 28px;
  background: var(--vp-surface);
  border: 1px solid var(--vp-line-2);
  border-left: 3px solid var(--vp-red);
}
.prose--article .keypoints > p:first-child {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
}
.prose--article .keypoints > p:first-child strong {
  font-weight: 500;
  color: var(--vp-steel);
}
.prose--article .keypoints > ul { margin-top: 4px; padding: 0; list-style: none; }
.prose--article .keypoints li { padding-left: 28px; font-size: 16.5px; }
.prose--article .keypoints li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 11px;
  height: 1px;
  background: var(--vp-red);
}

/* Tables: ruled on every side, a tinted header, a faint band on alternate rows.
   The wrapper scrolls sideways inside the column on a narrow screen. */
.prose--article .table-wrap {
  margin-top: 30px;
  overflow-x: auto;
  border: 1px solid var(--vp-line-2);
  background: var(--vp-surface);
}
.prose--article .table-wrap:focus-visible { outline: 2px solid var(--vp-steel); outline-offset: 2px; }
.prose--article table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.55;
}
.prose--article th {
  text-align: left;
  vertical-align: bottom;
  padding: 15px 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--vp-steel);
  background: var(--vp-surface-2);
  border-bottom: 1px solid var(--vp-line-2);
  border-right: 1px solid var(--vp-line);
}
.prose--article td {
  padding: 17px 20px;
  vertical-align: top;
  color: var(--vp-text-2);
  border-top: 1px solid var(--vp-line);
  border-right: 1px solid var(--vp-line);
}
.prose--article th:last-child,
.prose--article td:last-child { border-right: 0; }
.prose--article tbody tr:first-child td { border-top: 0; }
.prose--article tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.prose--article td:first-child { color: var(--vp-text); font-weight: 500; }
.prose--article td a { white-space: normal; }

/* Sources box at the foot of a post. */
.prose--article .factbox { margin-top: clamp(48px, 7vw, 72px); max-width: 860px; }
.prose--article .factbox .sources li { font-size: 14.5px; line-height: 1.6; color: var(--vp-muted); }

@media (max-width: 640px) {
  .prose--article > p { font-size: 17px; }
  .prose--article li { font-size: 16.5px; }
  .prose--article .keypoints { padding: 22px 20px 24px; }
  .prose--article th, .prose--article td { padding: 13px 14px; }
  .prose--article table { font-size: 15px; }
}

/* A wide table scrolls sideways on a phone. The edge shadows appear only on the
   side that still has content to scroll to, so the reader can tell. */
@media (max-width: 760px) {
  .prose--article .table-wrap {
    background:
      linear-gradient(to right, var(--vp-surface) 30%, rgba(21, 21, 21, 0)) left center / 40px 100% no-repeat local,
      linear-gradient(to left, var(--vp-surface) 30%, rgba(21, 21, 21, 0)) right center / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll,
      var(--vp-surface);
  }
}