/* ---- shared/css/fonts.css ---- */
/* Generated by scripts/fonts.mjs. Do not edit by hand. IBM Plex, SIL OFL 1.1. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexSans-Italic-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexSerif-Regular-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Serif";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexSerif-Italic-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/IBMPlexSerif-Medium-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/IBMPlexSerif-SemiBold-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexSansCondensed-Regular-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/IBMPlexSansCondensed-SemiBold-Latin1.woff2") format("woff2");unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02}

/* ---- shared/css/tokens.css ---- */
/* Design tokens. Brand guide v1.3 §6. The ONLY file allowed to hold raw colours,
   sizes on the type scale, and geometry. Everything else uses var(--token).
   Light only at launch (decided 8 Oct); the guide's dark values are kept below,
   commented, for when dark mode is added. */

:root {
  /* Colour: fog neutrals, green-biased (§6.2) */
  --ground:  #F4F6F4;
  --surface: #FFFFFF;
  --raised:  #E9EDE9;
  --rule:    #D5DBD5;
  --rule-2:  #B0B9B0;
  --ink-3:   #66716A;  /* 4.68:1 on ground, 5.08:1 on surface: AA. Never on --raised (4.29:1) */
  --ink-2:   #4F5A52;  /* 6.63:1 on ground, 7.20:1 on surface */
  --ink:     #131815;  /* 16.54:1 on ground, 17.96:1 on surface */
  --accent:  #22402F;  /* canopy, both brands; 10.49:1 on ground, 11.40:1 on surface */
  --on-accent: #FFFFFF;

  /* On dark bands (Option A, chosen 13 Oct). The band field is set per site:
     EDR --ink, consulting --accent. Light canopy is the guide's dark-mode accent. */
  --on-dark:      #FFFFFF;
  --on-dark-2:    #C9D6CD;  /* secondary text: 7.59:1 on accent, 13.3:1 on ink */
  --accent-light: #7FB496;  /* labels and rules on dark: 4.82:1 on accent, 7.59:1 on ink */
  /* Redwood bark (returned 13 Oct): consulting's secondary accent, for structural
     markers only (section rules, table heads, step numbers, note edges).
     Never for links, buttons, the wordmark or the band. */
  --bark: #7E4632;  /* 6.88:1 on ground, 7.48:1 on surface */

  /* Marker roles: structural rules and step numbers. Green by default; a theme may override. */
  --marker:      var(--accent);
  --marker-text: var(--ink-3);
  --label-text:  var(--ink-3);  /* section labels */

  /* Band roles. Defaults suit the near-black band; a theme may override. */
  --band-text-2: var(--on-dark-2);
  --band-label:  var(--accent-light);
  --band-rule:   var(--accent-light);  /* 2px rules on bands: 7.59:1 on ink, 4.82:1 on canopy */

  --rule-on-dark: rgba(255, 255, 255, 0.18);
  --rule-on-dark-2: rgba(255, 255, 255, 0.4);

  /* Dark (not active):
     --ground #0D110F; --surface #141917; --raised #1B211E; --rule #242B27; --rule-2 #39423C;
     --ink-3 #8A968E; --ink-2 #9AA79F; --ink #E7EBE8; --accent #7FB496; */

  /* Type: IBM Plex (§6.1) */
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --cond:  "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;

  /* Type scale: ratio 1.22, base 16. Nine steps, no others (§6.1).
     In rem so a reader's browser font-size setting is respected. */
  --fs-44: 2.75rem;
  --fs-34: 2.125rem;
  --fs-27: 1.6875rem;
  --fs-22: 1.375rem;
  --fs-18: 1.125rem;
  --fs-16: 1rem;
  --fs-14: 0.875rem;
  --fs-12: 0.78125rem; /* 12.5px */
  --fs-11: 0.6875rem;

  --lh-tight: 1.15;
  --lh-head:  1.25;
  --lh-text:  1.55;

  /* Tracking */
  --track-label: 0.09em;     /* condensed caps labels */
  --track-descriptor: 0.14em; /* consulting wordmark descriptor */

  /* Space: 4px base (§6.3) */
  --sp-4:  0.25rem;
  --sp-8:  0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-96: 6rem;

  /* Geometry (§6.3): square, two line weights, no shadows */
  --radius: 0;
  --hair: 1px;
  --rule-accent: 2px;
  --focus: 2px;

  /* Portrait slot, for later (§6.4) */
  --portrait-ratio: 4 / 5;

  /* Motion: steady, eased to rest; nothing decorative */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur: 120ms;
}

/* Print (§6.1, §6.2): white paper, accent resolves to black, fixed print sizes. */
@media print {
  :root {
    --ground: #FFFFFF; --surface: #FFFFFF; --raised: #FFFFFF;
    --ink: #000000; --ink-2: #000000; --ink-3: #000000; --accent: #000000;
    --rule: #000000; --rule-2: #000000; --bark: #000000;
    --print-text: 10.5pt;
    --print-lh: 1.43;      /* 15pt leading on 10.5pt */
    --print-small: 9pt;
    --print-rule: 0.5pt;
  }
}

/* ---- shared/css/base.css ---- */
/* Base: reset, page frame, typography. Shared by both sites.
   Density and measure come from the theme layer (sites/<site>/css/theme.css):
     --measure        reading line length
     --text           body text size
     --h1, --h2, --h3 heading sizes (must be scale tokens); --h1-sm, --h2-sm on phones
     --lede           size of the opening paragraph
     --section        vertical rhythm between sections (desktop)
     --page           maximum page width */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

html { background: var(--ground); }
body {
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text);
  line-height: var(--lh-text);
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
}

/* ---- Page frame ---- */
.page { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--sp-16); }
@media (min-width: 48em) { .page { padding-inline: var(--sp-32); } }

.section { padding-block: var(--sp-48); }
@media (min-width: 48em) { .section { padding-block: var(--section); } }
/* No hairline between sections: each section head carries its own 2px accent rule. */

.flow > * + * { margin-top: var(--sp-16); }
.flow-lg > * + * { margin-top: var(--sp-24); }
.measure { max-width: var(--measure); }

/* ---- Typography ---- */
h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }
/* Headings step down one size on phones (--h1-sm, --h2-sm from the theme). */
h1, .h1 { font: 500 var(--h1-sm) / var(--lh-tight) var(--serif); letter-spacing: -0.01em; }
h2, .h2 { font: 600 var(--h2-sm) / var(--lh-head) var(--sans); }
@media (min-width: 48em) {
  h1, .h1 { font-size: var(--h1); }
  h2, .h2 { font-size: var(--h2); }
}
h3, .h3 { font: 600 var(--h3) / var(--lh-head) var(--sans); }
h4, .h4 { font: 600 var(--fs-16) / var(--lh-head) var(--sans); }

p, li, dd { max-width: var(--measure); text-wrap: pretty; }
.lede { font-size: var(--lede); color: var(--ink-2); line-height: 1.5; }
small, .small { font-size: var(--fs-14); color: var(--ink-2); }
.fine { font-size: var(--fs-12); color: var(--ink-3); }

/* Labels: Plex Sans Condensed 600 caps, letter-spaced. The guide's stand-in for
   small caps; never font-variant small-caps (§6.1). */
.label {
  font: 600 var(--fs-11) / 1.3 var(--cond);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--label-text);
}

strong, b { font-weight: 600; }
em, i, cite { font-style: italic; }
dfn { font-style: normal; font-weight: 600; }
code, kbd, samp, .mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums lining-nums; }

ul:not([class]), ol:not([class]) { padding-left: 1.25em; }
ul:not([class]) > li + li, ol:not([class]) > li + li { margin-top: var(--sp-8); }
ul:not([class]) > li::marker { color: var(--ink-3); }

/* ---- Links and focus ---- */
a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: var(--hair);
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: var(--rule-accent); }
:focus-visible { outline: var(--focus) solid var(--ink); outline-offset: var(--focus); }

.skip {
  position: absolute; left: var(--sp-16); top: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  background: var(--surface); color: var(--ink);
  border: var(--hair) solid var(--ink);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* The hidden attribute always wins over component display rules (e.g. .form fieldset { display: grid }) */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- shared/css/components.css ---- */
/* Components. One markup set for both sites; the theme layer only changes
   wordmark, CTA intensity and density (guide §1.2).
   Geometry: radius 0, 1px hairlines, 2px accent rules, no shadows (§6.3).
   Colour never carries meaning alone (§6.2): every state also changes text,
   weight, position or a rule. */

/* ===== Wordmarks (spec: docs/wordmark-spec.md) ===== */
.wordmark {
  display: inline-flex;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: var(--sp-8);
  border-bottom: var(--rule-accent) solid var(--accent);
  line-height: 1;
}
.wordmark:hover { text-decoration: none; }

/* EDR: one line, Plex Sans Condensed; "BeGood" 600, "EDR" 400 */
.wordmark--edr { display: inline-block; font-family: var(--cond); font-size: var(--wm-size); white-space: nowrap; } /* a real word space separates the two words */
.wordmark--edr .wm-name { font-weight: 600; }
.wordmark--edr .wm-desc { font-weight: 400; }

/* Consulting: stacked. "BeGood" Plex Serif 500; descriptor Plex Sans Condensed 600 caps */
.wordmark--legal { flex-direction: column; gap: var(--sp-4); }
.wordmark--legal .wm-name { font: 500 var(--wm-size) / 1 var(--serif); letter-spacing: -0.005em; }
.wordmark--legal .wm-desc {
  font: 600 var(--fs-11) / 1 var(--cond);
  letter-spacing: var(--track-descriptor);
  text-transform: uppercase;
  margin-right: calc(-1 * var(--track-descriptor)); /* trailing tracking does not widen the rule */
}

/* ===== Site header and nav ===== */
.site-header { border-bottom: var(--hair) solid var(--rule); background: var(--ground); }
.site-header .page {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-16) var(--sp-32);
  padding-block: var(--sp-24) var(--sp-16);
}
.nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-24); padding: 0; margin: 0; list-style: none; }
.nav a {
  display: inline-block;
  padding-block: var(--sp-8) calc(var(--sp-8) - var(--rule-accent));
  font: 500 var(--fs-14) / 1.3 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: var(--rule-accent) solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-2); }
/* Current page: darker text AND an accent rule (not colour alone) */
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ===== Footer ===== */
.site-footer { border-top: var(--hair) solid var(--rule); margin-top: var(--sp-48); }
.site-footer .page { padding-block: var(--sp-24) var(--sp-32); display: grid; gap: var(--sp-8); }
.site-footer p { font-size: var(--fs-12); color: var(--ink-3); max-width: none; }

/* ===== Section head: label over heading, 2px accent rule above ===== */
.section-head { border-top: var(--rule-accent) solid var(--marker); padding-top: var(--sp-12); display: grid; gap: var(--sp-4); margin-bottom: var(--sp-24); }

/* ===== Hero (first block on a page) ===== */
.hero { padding-block: var(--sp-48) var(--sp-32); display: grid; gap: var(--sp-16); }
@media (min-width: 48em) { .hero { padding-block: var(--hero-top) var(--sp-48); } }

/* ===== Buttons =====
   EDR: outlined, low intensity. Consulting: one filled primary per page (guide §7.2). */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  min-height: 2.75rem;
  padding: var(--sp-8) var(--sp-24);
  font: 500 var(--fs-16) / 1.2 var(--sans);
  text-decoration: none;
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.button--outline { background: transparent; color: var(--accent); }
.button--outline:hover { background: var(--raised); text-decoration: none; }
.button--filled { background: var(--accent); color: var(--on-accent); }
.button--filled:hover { background: var(--ink); border-color: var(--ink); text-decoration: none; }
.button[disabled] { cursor: progress; background: var(--raised); color: var(--ink-2); border-color: var(--rule-2); }

/* ===== Tables (fee table, data) ===== */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-16); }
.table caption { text-align: left; padding-bottom: var(--sp-8); }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--sp-12) var(--sp-16) var(--sp-12) 0; border-bottom: var(--hair) solid var(--rule); }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table thead th {
  font: 600 var(--fs-11) / 1.3 var(--cond); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-3); border-bottom: var(--rule-accent) solid var(--marker); padding-top: 0;
}
.table .amount { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Spec list: key / value rows ===== */
.spec { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; border-top: var(--hair) solid var(--rule); }
.spec dt, .spec dd { padding-block: var(--sp-12); border-bottom: var(--hair) solid var(--rule); }
.spec dt { font: 600 var(--fs-11) / 1.6 var(--cond); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); padding-right: var(--sp-24); padding-top: calc(var(--sp-12) + 0.2em); }
.spec dd { max-width: none; }
@media (max-width: 30em) {
  .spec { grid-template-columns: 1fr; }
  .spec dt { border-bottom: 0; padding-bottom: 0; }
}

/* ===== Steps: numbered sequence ===== */
.steps { counter-reset: step; display: grid; gap: 0; }
.steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-4) var(--sp-16);
  padding-block: var(--sp-16);
  border-top: var(--hair) solid var(--rule);
  max-width: calc(var(--measure) + 4rem);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: span 2;
  font: 500 var(--fs-14) / 1.6 var(--mono);
  color: var(--marker-text);
}
.steps h3 { font-size: var(--fs-16); }
.steps p { color: var(--ink-2); }

/* ===== Note: drawn limits, scope statements (Principle 2) ===== */
.note { border-top: var(--rule-accent) solid var(--marker); background: var(--surface); padding: var(--sp-16) var(--sp-24) var(--sp-24); display: grid; gap: var(--sp-8); max-width: calc(var(--measure) + 3rem); }
.note p { color: var(--ink); }

/* Plain statement: hairline frame, no accent. For the non-legal-services line. */
.statement { border: var(--hair) solid var(--rule-2); background: var(--surface); padding: var(--sp-16) var(--sp-24); display: grid; gap: var(--sp-4); max-width: calc(var(--measure) + 3rem); }

/* ===== Readout: instrument-style data block (EDR imagery is data, §6.4) ===== */
.readout {
  font-family: var(--mono); font-size: var(--fs-14); line-height: 1.6;
  background: var(--surface); border: var(--hair) solid var(--rule-2);
  display: grid; grid-template-columns: max-content 1fr; max-width: 34rem;
}
.readout dt, .readout dd { padding: var(--sp-8) var(--sp-16); border-bottom: var(--hair) solid var(--rule); }
.readout dt { color: var(--ink-3); }
.readout dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.readout dt:nth-last-of-type(1), .readout dd:last-child { border-bottom: 0; }

/* Price: the figure itself, large, with its terms beside it */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8) var(--sp-16); }
.price .figure-amount { font: 500 var(--fs-44) / 1 var(--serif); font-variant-numeric: lining-nums; color: var(--ink); }
.price .terms { color: var(--ink-2); font-size: var(--fs-16); }

/* ===== Thesis / quotation (consulting) ===== */
.thesis { font: 500 var(--fs-22) / 1.4 var(--serif); padding-block: var(--sp-16); border-block: var(--hair) solid var(--rule-2); max-width: calc(var(--measure) + 6rem); }
.thesis cite { display: block; margin-top: var(--sp-8); font: 400 var(--fs-14) / 1.4 var(--sans); font-style: normal; color: var(--ink-2); }

/* ===== Figures and the portrait slot ===== */
.figure { display: grid; gap: var(--sp-8); }
.figure img { width: 100%; border: var(--hair) solid var(--rule); background: var(--raised); }
.figure figcaption { font-size: var(--fs-12); color: var(--ink-3); max-width: var(--measure); }
.portrait { aspect-ratio: var(--portrait-ratio); width: 100%; max-width: 20rem; object-fit: cover; }
/* Layout that is ready for a portrait: text column + optional 4:5 image column.
   With no figure inside, it collapses to the text column alone. */
.with-portrait { display: grid; gap: var(--sp-32); }
@media (min-width: 48em) { .with-portrait:has(> .figure) { grid-template-columns: 1fr minmax(12rem, 18rem); align-items: start; } }

/* ===== Forms ===== */
.form { display: grid; gap: var(--sp-24); max-width: 36rem; }
.form fieldset { border: 0; padding: 0; display: grid; gap: var(--sp-16); }
.form legend { font: 600 var(--fs-11) / 1.3 var(--cond); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); padding: 0; margin-bottom: var(--sp-8); border-top: var(--rule-accent) solid var(--marker); padding-top: var(--sp-12); width: 100%; }
.field { display: grid; gap: var(--sp-4); }
.field-row { display: grid; gap: var(--sp-16); }
@media (min-width: 36em) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font: 600 var(--fs-14) / 1.4 var(--sans); color: var(--ink); }
.field .optional { font-weight: 400; color: var(--ink-2); }
.field .hint { font-size: var(--fs-14); color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 2.75rem;
  padding: var(--sp-8) var(--sp-12);
  background: var(--surface); color: var(--ink);
  border: var(--hair) solid var(--ink-3); border-radius: var(--radius); /* 5.08:1, meets 3:1 for field edges */
  font-size: var(--fs-16); /* 16px stops phone browsers zooming on focus */
}
.field textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-text); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--ink); outline: var(--focus) solid var(--ink); outline-offset: 0; }
/* Error: thicker border AND a written message beginning "Error:" (not colour alone) */
.field [aria-invalid="true"] { border: var(--rule-accent) solid var(--ink); }
.field .error { font: 600 var(--fs-14) / 1.4 var(--sans); color: var(--ink); }
.field .error::before { content: "Error: "; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 36em) { .field-row--3 { grid-template-columns: 7rem 1fr 1fr; } }
@media (min-width: 36em) { .field-row--address { grid-template-columns: 1fr 5rem 8rem; } }
.vehicle-address { display: grid; gap: var(--sp-16); }

/* Vehicle check result: a written sentence, with a 2px rule (solid = on the list, dashed = not) so colour never carries it */
.vehicle { display: grid; gap: var(--sp-16); }
.vehicle-result { padding: var(--sp-12) var(--sp-16); background: var(--surface); border: var(--hair) solid var(--rule-2); border-left: var(--rule-accent) solid var(--ink-3); }
.vehicle-result[data-state="listed"] { border-left: var(--rule-accent) solid var(--accent); }
.vehicle-result[data-state="other"] { border-left-style: dashed; }
.vehicle-result p { max-width: none; }
.vehicle--check [data-vehicle-text] { display: none; } /* the check page only answers; typing a vehicle belongs on the request form */
.vehicle-result .fine { font-size: var(--fs-12); color: var(--ink-2); margin-top: var(--sp-8); }

/* Required confirmation: checkbox beside a statement the box acknowledges */
.field--check label { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-12); align-items: start; font-weight: 400; }
.field--check input[type="checkbox"] { width: 1.25rem; min-height: 1.25rem; height: 1.25rem; margin: var(--sp-4) 0 0; padding: 0; accent-color: var(--accent); }
.field--check .terms { display: grid; gap: var(--sp-8); }
.field--check .terms strong { font-weight: 600; }

/* Form result messages */
.form-status { padding: var(--sp-16) var(--sp-24); background: var(--surface); border: var(--hair) solid var(--rule-2); border-top: var(--rule-accent) solid var(--marker); }
.form-status[hidden] { display: none; }

/* ===== Band: header + opening block on a solid field (chosen 13 Oct, Option A) =====
   Field colour comes from the theme (--band): EDR ink, consulting canopy green. Everything inside switches to the
   on-dark tokens. Prints as white paper with black type (print.css). */
.band { background: var(--band); color: var(--on-dark); }
.band .site-header { background: transparent; border-bottom-color: var(--rule-on-dark); }
.band .wordmark { color: var(--on-dark); border-bottom-color: var(--band-rule); }
.band .nav a { color: var(--band-text-2); }
.band .nav a:hover { color: var(--on-dark); border-bottom-color: var(--rule-on-dark-2); }
.band .nav a[aria-current="page"] { color: var(--on-dark); border-bottom-color: var(--band-rule); }
.band h1, .band h2, .band h3 { color: var(--on-dark); }
.band .lede, .band p { color: var(--band-text-2); }
.band .label { color: var(--band-label); }
.band a:not(.button):not(.wordmark) { color: var(--on-dark); }
.band :focus-visible { outline-color: var(--on-dark); }
.band .hero { padding-bottom: var(--sp-48); }
@media (min-width: 48em) { .band .hero { padding-bottom: var(--sp-64); } }
.band .readout { background: transparent; border-color: var(--rule-on-dark-2); }
.band .readout dt { color: var(--band-label); }
.band .readout dd { color: var(--on-dark); }
.band .readout dt, .band .readout dd { border-bottom-color: var(--rule-on-dark); }
.band .statement { background: transparent; border-color: var(--rule-on-dark-2); }
.band .statement p:not(.label) { color: var(--on-dark); }
.band .button--filled { background: var(--on-dark); color: var(--band); border-color: var(--on-dark); }
.band .button--filled:hover { background: var(--raised); border-color: var(--raised); }
.band .button--outline { color: var(--on-dark); border-color: var(--on-dark); }
.band .button--outline:hover { background: var(--rule-on-dark); }

/* ===== Panel: white sheet on the fog ground, for body sections ===== */
.panel, .section.panel { background: var(--surface); border: var(--hair) solid var(--rule); padding: var(--sp-24) var(--sp-16); margin-block: var(--sp-24); }
@media (min-width: 48em) { .panel, .section.panel { padding: var(--sp-48); margin-block: var(--sp-32); } }
main > .panel:first-child { margin-top: var(--sp-48); }

/* ===== Holding card: one screen, band fills most of the viewport ===== */
.holding .band { min-height: 82vh; min-height: 82svh; display: flex; flex-direction: column; }
.holding .band main { flex: 1; display: flex; align-items: center; }
.holding .band main .page { width: 100%; }
.holding .site-footer { margin-top: 0; }
.holding .hero p a:not(.button) { color: var(--on-dark); }

/* ---- shared/css/print.css ---- */
/* Print (§6.1, §6.2): accent resolves to black, white paper, nothing interactive.
   Report print sizes are separate and fixed; web pages print at the screen scale
   reduced to document proportions. */
@media print {
  @page { margin: 18mm 16mm; }
  html, body { background: var(--surface); }
  body { font-size: var(--print-text); line-height: var(--print-lh); }
  .page { max-width: none; padding-inline: 0; }
  .section, .hero { padding-block: 12pt; }


  /* Interactive things do not print; a sentence tells the reader where they are. */
  .nav, .skip, .no-print, form, .form, .button { display: none !important; }
  .print-only { display: block !important; }

  a { color: var(--ink); text-decoration: none; }
  /* Show where in-text links go */
  main a[href^="http"]::after, main a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: var(--print-small); }

  h1, h2, h3, h4, .section-head { break-after: avoid; }
  p, li, dd, tr, .note, .statement, .readout, .figure, .steps > li { break-inside: avoid; }
  .table thead { display: table-header-group; }
}
.print-only { display: none; }

/* Bands and panels flatten to plain paper. */
@media print {
  .band { background: none; color: var(--ink); }
  .band *, .band .lede, .band p, .band .label, .band .readout dt, .band .readout dd { color: var(--ink) !important; }
  .band .wordmark, .band .readout, .band .readout dt, .band .readout dd, .band .statement, .band .site-header { border-color: var(--ink) !important; }
  .panel, .section.panel { border: 0; padding: 0; margin-block: 12pt; }
}

/* ---- sites/legal/css/theme.css ---- */
/* BeGood Legal Tech Consulting theme: the three differentiating levers only (guide §1.2).
   1. Wordmark size      2. CTA intensity (one filled primary per page; set in markup)      3. Density: longer lines, more air */
:root {
  --band: var(--accent);    /* header and opening block: canopy green (main colour) */
  --marker: var(--bark);    /* secondary accent: section rules, table heads, note edges (13 Oct) */
  --marker-text: var(--bark); /* step numbers */
  --label-text: var(--bark);  /* section labels: 7.48:1 on panels, 6.88:1 on ground */
  --wm-size: var(--fs-27);
  --measure: 68ch;
  --text: var(--fs-18);
  --h1: var(--fs-44);
  --h1-sm: var(--fs-34);
  --h2: var(--fs-27);
  --h2-sm: var(--fs-22);
  --lede: var(--fs-22);
  --h3: var(--fs-22);
  --section: var(--sp-96);
  --hero-top: var(--sp-96);
  --page: 72rem;
}