/* ==========================================================================
   Netesis — styles.css
   Editorial-technical "ledger" layout wearing the Netesis brand: ruled
   hairlines, right-aligned mono figures, a receipt card as the hero, on the
   deep-slate canvas with the sapphire/neon accent. One stylesheet, every page.

   Contents
     1. Tokens (brand palette: dark default, light opt-in)
     2. Reset & base, ambient backdrop
     3. Typography
     4. Layout: container, section, split
     5. Skip link, header, nav, theme toggle
     6. Footer
     7. Buttons & link-arrow
     8. Hero & ledger
     9. Steps
    10. Cards
    11. Callouts & notice
    12. Tables
    13. Definition lists
    14. Forms
    15. Calculator layout & results
    16. Formulas (details)
    17. Diagram
    18. Reveal
    19. Error page
    20. CTA band
    21. Stat row
    22. Page additions (merged per-page <style data-css-additions> blocks)
    23. Pill & utilities
    24. Money semantics (last, so .is-pos / .is-neg always win)
    25. Reduced motion
    26. Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
/* Brand: netesis.com "AI Strategy & Insights".
   Canonical palette from the Netesis brand spec (Net_Style.md):
     canvas-main #0A0C10  canvas-surface #12161F
     accent-primary #0052CC (Sapphire)  accent-glow #2684FF (Cyber Neon)
     text-primary #FFFFFF  text-muted #9AA0A6 (Titanium Silver)
     text-light-bg #1A1A1A (white-canvas / print only)
   The brand is dark-first, so DARK is the default here and light is the
   opt-in theme. Only tokens are redefined for light; nothing else moves. */
:root {
  color-scheme: dark;
  /* ground */
  --c-bg: #0A0C10;              /* canvas-main */
  --c-surface: #12161F;         /* canvas-surface */
  --c-surface-2: #171C27;
  --c-border: #283040;
  --c-hairline: #1E2430;
  --c-control-border: #606A7A;  /* 3.31:1 on surface, 3.58:1 on canvas (WCAG 1.4.11) */
  /* ink */
  --c-text: #FFFFFF;            /* text-primary */
  --c-text-2: #C7CDD6;
  --c-text-3: #9AA0A6;          /* text-muted, Titanium Silver */
  /* accent: neon carries every foreground use, sapphire is a fill only
     (#0052CC on the canvas is 2.87:1 — never set it as text) */
  --c-accent: #2684FF;          /* accent-glow */
  --c-accent-hover: #6FADFF;
  --c-accent-fill: #0052CC;     /* accent-primary: solid button/chip backgrounds */
  --c-accent-fill-hover: #0047B2;
  --c-accent-ink: #FFFFFF;      /* text on the sapphire fill: 6.82:1 */
  --c-accent-soft: #101B2E;
  --c-accent-soft-ink: #A9CBFF;
  /* money semantics */
  --c-pos: #3FD98A;
  --c-pos-soft: #0C2A1B;
  --c-neg: #FF8A73;
  --c-neg-soft: #351510;
  --c-warn: #E8B24A;
  --c-warn-soft: #302408;
  /* misc */
  --c-focus: #2684FF;
  --c-selection: #123A6E;
  --c-scroll-edge: rgba(0, 0, 0, .55);
  --glow-ambient: rgba(38, 132, 255, .15);
  --glow-intense: rgba(38, 132, 255, .40);
  /* ambient backdrop, carried over from the Under-Construction page */
  --bg-grid-dot: rgba(154, 160, 166, .07);
  /* the source page uses .22; toned to .14 because this site puts small
     accent-coloured links under the orb, and .22 pushed them to 4.28:1 */
  --orb-core: rgba(0, 82, 204, .14);
  --orb-mid: rgba(38, 132, 255, .06);
  --spotlight-tint: rgba(38, 132, 255, .08);
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 8px 24px -12px rgba(0,0,0,.7);

  /* type */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --t-xs: .75rem;  --t-sm: .875rem;  --t-base: 1rem;  --t-md: 1.125rem;  --t-lg: 1.375rem;
  --t-xl: 1.75rem;  --t-2xl: clamp(2rem, 1.45rem + 2.2vw, 2.75rem);  --t-3xl: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);
  --lh-tight: 1.1;  --lh-snug: 1.25;  --lh-base: 1.6;
  --track-caps: .08em;

  /* space & shape */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; --sp-12: 6rem;
  --max-w: 1100px;
  --max-w-prose: 68ch;
  --radius-1: 4px; --radius-2: 8px; --radius-3: 14px;

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-1: 160ms;
  --dur-2: 320ms;
}

/* Light theme: a cool, brand-aligned counterpart. Sapphire becomes the
   foreground accent (6.82:1 on white) because the neon is too light to read
   on paper-coloured ground. Body ink is the brand's own white-canvas token. */
:root[data-theme="light"] {
  color-scheme: light;
  --c-bg: #F6F8FB;
  --c-surface: #FFFFFF;
  --c-surface-2: #EAEFF6;
  --c-border: #D3DBE6;
  --c-hairline: #E4EAF2;
  --c-control-border: #7C838D;
  --c-text: #1A1A1A;            /* text-light-bg */
  --c-text-2: #454B54;
  --c-text-3: #545A64;         /* darkened for headroom under the ambient orb */
  --c-accent: #0052CC;          /* accent-primary reads as the link colour here */
  --c-accent-hover: #003D99;
  --c-accent-fill: #0052CC;
  --c-accent-fill-hover: #003D99;
  --c-accent-ink: #FFFFFF;
  --c-accent-soft: #E3ECFB;
  --c-accent-soft-ink: #00337F;
  --c-pos: #12703E;
  --c-pos-soft: #E1F2E8;
  --c-neg: #B3301A;
  --c-neg-soft: #FBE5E0;
  --c-warn: #7A4E00;
  --c-warn-soft: #FBF0D4;
  --c-focus: #0052CC;
  --c-selection: #CFE0FB;
  --c-scroll-edge: rgba(20, 22, 28, .16);
  --glow-ambient: rgba(0, 82, 204, .10);
  --glow-intense: rgba(0, 82, 204, .22);
  --bg-grid-dot: rgba(26, 26, 26, .07);
  --orb-core: rgba(0, 82, 204, .08);
  --orb-mid: rgba(38, 132, 255, .06);
  --spotlight-tint: rgba(0, 82, 204, .05);
  --shadow-1: 0 1px 2px rgba(16, 20, 28, .06), 0 1px 1px rgba(16,20,28,.04);
  --shadow-2: 0 10px 28px -14px rgba(16, 20, 28, .22);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-6);
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Ambient backdrop ------------------------------------------------------
   Ported from the Under-Construction page at netesis.com: a fine dot lattice,
   a sapphire orb bloomed behind the masthead, and a spotlight that follows the
   pointer. All three are fixed to the viewport, inert to input, and painted
   below the content, which is lifted into its own stacking level. The grid and
   orb are pseudo-elements on <html> so no page needs extra markup; the
   spotlight is created by site.js, so it simply does not exist without JS or
   when the visitor asks for reduced motion. */
html::before, html::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}
/* dot lattice */
html::before {
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--bg-grid-dot) 1px, transparent 0);
  background-size: 40px 40px;
}
/* sapphire orb behind the masthead */
html::after {
  top: -20%;
  left: 50%;
  width: min(800px, 150vw);
  height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--orb-core) 0%, var(--orb-mid) 45%, transparent 70%);
  filter: blur(60px);
}
/* pointer-following spotlight (added by site.js) */
.spotlight {
  position: fixed;
  top: 0; left: 0;
  width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(circle at center, var(--spotlight-tint) 0%, transparent 70%);
  transition: transform .15s ease-out, opacity .25s ease;
}
.spotlight.is-live { opacity: 1; }
/* content rides above the backdrop */
.site-header, main, .site-footer { position: relative; z-index: 1; }

main { flex: 1 0 auto; }
/* target of the skip link: keep a ring so keyboard users see where focus landed,
   but tuck it inside the box so it does not frame the whole viewport */
main:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }

img, svg { display: block; max-width: 100%; }
svg { fill: none; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
a { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--c-accent-hover); }
hr { border: 0; border-top: 1px solid var(--c-hairline); margin-block: var(--sp-6); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }

::selection { background: var(--c-selection); }

/* Focus: one intentional ring everywhere. Components that set their own radius
   later in the cascade keep it; plain inline elements get a 2px radius. */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--c-text);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); letter-spacing: -.015em; }
h2 { font-size: var(--t-2xl); letter-spacing: -.015em; }
h3 { font-size: var(--t-lg); line-height: var(--lh-snug); letter-spacing: 0; }
h4 { font-size: var(--t-md); line-height: var(--lh-snug); }
p { margin: 0; }

.num, dd, table, .results {
  font-variant-numeric: tabular-nums;
}
.num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-style: normal; /* no italic mono face is loaded; figures inside <em> stay upright */
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-text-3);
  line-height: 1.4;
}

.lede {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--c-text-2);
  max-width: var(--max-w-prose);
  text-wrap: pretty;
}

/* A single sentence set large — the line that closes an argument. */
.statement {
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -.01em;
  color: var(--c-text);
}

.prose { max-width: var(--max-w-prose); text-wrap: pretty; }
.prose > * + * { margin-top: var(--sp-4); }
.prose > h3 { margin-top: var(--sp-6); }
.prose > h3 + * { margin-top: var(--sp-3); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--c-text-3); }
.prose ol { list-style: none; counter-reset: prose-ol; padding-left: 2.25rem; }
.prose ol > li { counter-increment: prose-ol; position: relative; }
.prose ol > li::before {
  content: counter(prose-ol, decimal-leading-zero);
  position: absolute; left: -2.25rem; top: .15em;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  color: var(--c-accent);
}
.prose strong { font-weight: 600; }
.prose code { background: var(--c-surface-2); padding: .1em .35em; border-radius: var(--radius-1); }

.muted { color: var(--c-text-3); }
.small { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * clamp(1rem, 4vw, 2rem), var(--max-w));
  margin-inline: auto;
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--hairline { border-top: 1px solid var(--c-hairline); }
.section--tint {
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
}
.section--tint + .section--hairline { border-top: 0; }

.section__head { max-width: var(--max-w-prose); margin-bottom: var(--sp-8); }
.section__head .eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
/* the ruled line: an eyebrow on ledger paper */
.section__head .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--c-hairline); }
.section__head h1, .section__head h2 { margin: 0; }
.section__head .lede { margin-top: var(--sp-4); }

/* two-column text: label column / body column */
.split {
  display: grid;
  gap: var(--sp-5) var(--sp-8);
  align-items: start;
}
.split__label { padding-top: .35rem; }
.split__label h3, .split__label .eyebrow { margin: 0; }
.split__label h3 { font-size: var(--t-md); }
.split__label .eyebrow + h3 { margin-top: var(--sp-2); }
@media (min-width: 720px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .split__label { border-top: 1px solid var(--c-hairline); padding-top: var(--sp-3); }
}
.split + .split { margin-top: var(--sp-8); }

/* --------------------------------------------------------------------------
   5. Skip link, header, nav, theme toggle
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -999px; top: 0;
  z-index: 100;
  padding: .6rem .9rem;
  background: var(--c-accent-fill);
  color: var(--c-accent-ink);
  font-size: var(--t-sm); font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 var(--radius-2) 0;
}
.skip-link:focus, .skip-link:focus-visible {
  left: 0;
  position: fixed;
  outline-offset: 0;
  outline-color: var(--c-accent-ink);
}

.site-header { border-bottom: 1px solid var(--c-hairline); }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  min-height: 4.25rem;
  padding-block: var(--sp-4);
}

/* The lockup is the real brand artwork, cropped to the wordmark from the
   master logo. Two files rather than one, because the artwork is white and
   silver and would disappear on the light theme; the ink variant keeps the
   blue chevron and turns the metal to charcoal. They are background images,
   so a browser only ever fetches the one its theme asks for. The link's
   accessible name comes from visually hidden text next to it. */
.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.wordmark__logo {
  display: block;
  width: 142px;
  height: 26px;
  background: url("../img/netesis-wordmark.png") left center / contain no-repeat;
}
:root[data-theme="light"] .wordmark__logo {
  background-image: url("../img/netesis-wordmark-ink.png");
}
.wordmark--small .wordmark__logo { width: 120px; height: 22px; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); list-style: none; margin: 0; padding: 0; } /* sp-4: all five links fit one row at 375px */
.site-nav a {
  display: inline-block;
  padding-block: .3rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-text-2);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.site-nav a:hover { color: var(--c-text); }
.site-nav a[aria-current="page"] {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-2);
  background: var(--c-surface);
  color: var(--c-text-2);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.theme-toggle:hover { color: var(--c-text); border-color: var(--c-border); }
.theme-toggle[hidden] { display: none; }
/* Dark is the default, so the button offers the sun (switch to light);
   in the light theme it offers the moon. */
.theme-toggle__icon { display: block; }
.theme-toggle__icon--moon { display: none; }
:root[data-theme="light"] .theme-toggle__icon--sun { display: none; }
:root[data-theme="light"] .theme-toggle__icon--moon { display: block; }

/* A quiet pointer to llms.txt, the machine-readable description of the site.
   Set like a label rather than a nav item, so it reads as metadata. */
.agents-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .55rem;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.agents-link:hover { color: var(--c-text); border-color: var(--c-border); }
.agents-link svg { width: 13px; height: 13px; flex: none; }

/* < 720: wordmark + agents link + toggle on row one, nav wraps onto row two */
.agents-link { order: 1; margin-left: auto; }
.theme-toggle { margin-left: var(--sp-2); order: 2; }
.site-nav { order: 3; flex-basis: 100%; }
@media (min-width: 720px) {
  .site-nav { order: 0; flex-basis: auto; margin-left: auto; }
  .agents-link { order: 0; margin-left: var(--sp-5); }
  .theme-toggle { margin-left: var(--sp-2); order: 0; }
  .site-nav ul { gap: var(--sp-1) var(--sp-6); }
}
/* The label is the first thing to go when the row gets tight. It is hidden the
   visually-hidden way rather than with display:none, so the link keeps its
   accessible name and never becomes a nameless icon. */
@media (max-width: 430px) {
  .agents-link__text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .agents-link { padding: .35rem .45rem; gap: 0; }
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--c-hairline);
  padding-block: var(--sp-8) var(--sp-8);
  font-size: var(--t-sm);
  color: var(--c-text-2);
}
.site-footer__inner {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}
.site-footer__brand { display: grid; gap: var(--sp-3); justify-items: start; }
.site-footer__tagline { margin: 0; color: var(--c-text-3); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.site-footer__nav a { color: var(--c-text-2); text-decoration: none; font-weight: 500; }
.site-footer__nav a:hover { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); color: var(--c-text-3); }
.site-footer__meta a { color: var(--c-text-2); text-decoration: none; }
.site-footer__meta a:hover { color: var(--c-text); text-decoration: underline; }
.site-footer__sep { color: var(--c-border); }
@media (min-width: 720px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: var(--sp-8); }
  .site-footer__nav ul { flex-direction: column; gap: var(--sp-2); }
  .site-footer__meta { flex-direction: column; align-items: flex-end; text-align: right; gap: var(--sp-2); }
  .site-footer__sep { display: none; }
}

/* --------------------------------------------------------------------------
   7. Buttons & link-arrow
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .7rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { color: var(--c-text); }

/* Filled surfaces take the sapphire, never the neon: white on #2684FF is
   only 3.6:1, while on #0052CC it is 6.82:1. The neon returns as the glow. */
.btn--primary {
  background: var(--c-accent-fill);
  border-color: var(--c-accent-fill);
  color: var(--c-accent-ink);
  box-shadow: 0 0 0 0 var(--glow-ambient), 0 6px 18px -10px var(--glow-intense);
}
.btn--primary:hover {
  background: var(--c-accent-fill-hover);
  border-color: var(--c-accent-fill-hover);
  color: var(--c-accent-ink);
  box-shadow: 0 0 0 3px var(--glow-ambient), 0 8px 22px -10px var(--glow-intense);
}
.btn--primary:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 2px var(--c-bg); }

.btn--secondary { border-color: var(--c-border); color: var(--c-text); background: transparent; }
.btn--secondary:hover { background: var(--c-surface-2); }

.btn--ghost { color: var(--c-accent); padding-inline: .6rem; }
.btn--ghost:hover { color: var(--c-accent-hover); background: var(--c-accent-soft); }

.btn--small { min-height: 36px; padding: .45rem .8rem; font-size: var(--t-xs); }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 500;
  color: var(--c-accent);
  text-decoration: none;
}
.link-arrow svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur-1) var(--ease); }
.link-arrow:hover { color: var(--c-accent-hover); text-decoration: underline; text-underline-offset: .2em; }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   8. Hero & ledger
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}
/* The hero no longer paints its own texture: the ambient backdrop in
   section 2 is fixed to the viewport and sits behind every page. */
.hero__inner {
  display: grid;
  gap: var(--sp-10) var(--sp-8);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-10); }
}
.hero__copy .eyebrow { margin-bottom: var(--sp-5); }
.hero__title {
  font-size: var(--t-3xl);
  letter-spacing: -.025em;
  line-height: var(--lh-tight);
  max-width: 14ch;
}
.hero__lede { margin-top: var(--sp-5); max-width: 50ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__figure { margin: 0; min-width: 0; }

/* the receipt */
.ledger {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
  padding: var(--sp-6);
  font-variant-numeric: tabular-nums;
}
.ledger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
}
.ledger__head .eyebrow { margin: 0; }
.ledger__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: .6rem;
  border-bottom: 1px solid var(--c-hairline);
}
.ledger__row:last-of-type { border-bottom: 0; }
.ledger__label, .ledger__row > :first-child {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--c-text-2);
  min-width: 0;
}
.ledger__value, .ledger__row > :last-child {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  font-weight: 500;
  /* no explicit colour: inherits --c-text, and .is-pos / .is-neg (§23) can take over */
  text-align: right;
  white-space: nowrap;
  flex: none;
}
.ledger__row--total {
  margin-top: var(--sp-2);
  padding-block: var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-hairline);
}
.ledger__row--total > :first-child, .ledger__row--total .ledger__label {
  font-weight: 500;
  color: var(--c-text);
}
.ledger__row--total > :last-child, .ledger__row--total .ledger__value {
  font-size: var(--t-xl);
  letter-spacing: -.01em;
  line-height: 1.1;
}
.ledger__caption {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-border);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-text-3);
}
@media (max-width: 420px) {
  .ledger { padding: var(--sp-5) var(--sp-4); }
  .ledger__row > :last-child, .ledger__value { font-size: var(--t-base); }
  .ledger__row--total > :last-child, .ledger__row--total .ledger__value { font-size: var(--t-lg); }
}

/* --------------------------------------------------------------------------
   9. Steps
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6) var(--sp-6);
  counter-reset: steps;
}
@media (min-width: 560px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-6); } }

.step {
  border-top: 1px solid var(--c-hairline);
  padding-top: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}
.step__num {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1;
  color: var(--c-accent);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.step__title { font-size: var(--t-md); font-weight: 600; margin: 0; }
.step__body { margin: 0; color: var(--c-text-2); font-size: var(--t-sm); line-height: 1.55; }
.steps + p, .steps + .link-arrow { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-1);
  padding: var(--sp-6);
  min-width: 0;
}
.card > .eyebrow { margin-bottom: var(--sp-1); }
/* person card: portrait beside the name, rounded to match the card itself.
   The source photograph carried a black rounded border; those corners were
   cut to transparency in the asset at the same radius this rule clips to, so
   nothing dark peeks out and the file needs no background behind it. */
.card__person { display: flex; align-items: center; gap: var(--sp-4); }
.card__avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-3);
  object-fit: cover;
}
.card__person .card__meta { margin-top: var(--sp-2); }

.card__title { font-size: var(--t-lg); margin: 0; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--c-accent); }
.card__body { margin: 0; color: var(--c-text-2); font-size: var(--t-base); }
.card__meta {
  list-style: none;
  margin: var(--sp-1) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
}
.card__meta :where(.num) { font-weight: 500; color: var(--c-text-2); }
.card__footer {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.card__footer:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   11. Callouts & notice
   -------------------------------------------------------------------------- */
.callout {
  --callout-rule: var(--c-border);
  position: relative;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-hairline);
  border-left: 3px solid var(--callout-rule);
  border-radius: var(--radius-2);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--t-base);
  max-width: var(--max-w-prose);
}
.callout > * + * { margin-top: var(--sp-2); }
.callout__title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.callout p { margin: 0; }
.callout p + p { margin-top: var(--sp-2); }

/* tinted variants drop the hairline on three sides and keep the 3px semantic rule on the left */
.callout--info { --callout-rule: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-soft-ink); border-color: transparent transparent transparent var(--callout-rule); }
.callout--info a { color: inherit; }
.callout--info .muted, .callout--info .callout__title { color: var(--c-accent-soft-ink); }
.callout--warn { --callout-rule: var(--c-warn); background: var(--c-warn-soft); border-color: transparent transparent transparent var(--callout-rule); }
.callout--warn .callout__title { color: var(--c-warn); }
.callout--neg  { --callout-rule: var(--c-neg); background: var(--c-neg-soft); border-color: transparent transparent transparent var(--callout-rule); }
.callout--neg .callout__title { color: var(--c-neg); }
.callout--pos  { --callout-rule: var(--c-pos); background: var(--c-pos-soft); border-color: transparent transparent transparent var(--callout-rule); }
.callout--pos .callout__title { color: var(--c-pos); }
.callout--wide { max-width: none; }
.callout + .callout { margin-top: var(--sp-4); }

/* the module-failed / no-JS box: warn styling, bigger, always full width */
.notice {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid transparent;
  border-left: 3px solid var(--c-warn);
  border-radius: var(--radius-2);
  background: var(--c-warn-soft);
  color: var(--c-text);
  font-size: var(--t-base);
  line-height: 1.55;
  margin-block: var(--sp-5);
}
.notice strong { font-weight: 600; }
.notice code { background: rgba(128,128,128,.18); padding: .05em .3em; border-radius: var(--radius-1); }
.notice a { color: inherit; }
.notice[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-2);
  background: var(--c-surface);
  -webkit-overflow-scrolling: touch;
  container-type: inline-size; /* lets the caption size itself to the visible width */

  /* Scroll affordance. Two opaque covers scroll WITH the content (local) and two
     shadows stay pinned to the box (scroll), so a shadow shows only on the side
     that still has columns off-screen — and neither shows when nothing is clipped.
     Pure CSS, no script, and it costs nothing on a table that fits. */
  background-image:
    linear-gradient(to right, var(--c-surface) 60%, rgba(255,255,255,0)),
    linear-gradient(to left,  var(--c-surface) 60%, rgba(255,255,255,0)),
    linear-gradient(to right, var(--c-scroll-edge), rgba(255,255,255,0)),
    linear-gradient(to left,  var(--c-scroll-edge), rgba(255,255,255,0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table-wrap:focus-visible { outline-offset: 0; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.table caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  font-size: var(--t-sm);
  color: var(--c-text-3);
  text-wrap: pretty;
  /* when the table overflows sideways the caption stays readable and in place */
  max-width: 100cqi;
  position: sticky;
  left: 0;
}
.table th, .table td {
  padding: .7rem var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-hairline);
}
.table thead th {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-text-3);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody th { font-weight: 500; color: var(--c-text); }
/* cell ink is declared through :where() (one class of specificity) so .is-pos / .is-neg in §23 win in any cell */
.table :where(td) { color: var(--c-text-2); }
.table td.num, .table th.num { text-align: right; }
.table td.num { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.table :where(td.num) { color: var(--c-text); }
.table tfoot td, .table tfoot th { border-top: 1px solid var(--c-border); border-bottom: 0; font-weight: 500; }
.table :where(tfoot td, tfoot th) { color: var(--c-text); }
.table--zebra tbody tr:nth-child(even) { background: var(--c-surface-2); }
.table--compact th, .table--compact td { padding: .5rem var(--sp-3); }

/* --------------------------------------------------------------------------
   13. Definition lists
   -------------------------------------------------------------------------- */
.dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--sp-4);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.dl > dt, .dl > dd {
  margin: 0;
  padding-block: .55rem;
  border-bottom: 1px solid var(--c-hairline);
}
.dl > dt {
  font-size: var(--t-sm);
  color: var(--c-text-2);
  align-self: baseline;
}
.dl > dd {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  text-align: right;
  align-self: baseline;
  overflow-wrap: anywhere;
}
.dl > dt:nth-last-child(2), .dl > dd:last-child { border-bottom: 0; }
.dl--start > dd { text-align: left; }
.dl--start { grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); }
.dl > dd .pill { vertical-align: middle; }
.dl > dd small, .dl__note { display: block; font-family: var(--font-sans); font-weight: 400; font-size: var(--t-xs); color: var(--c-text-3); margin-top: .1rem; }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: .45rem; min-width: 0; align-content: start; }
.field__label { font-size: var(--t-sm); font-weight: 500; color: var(--c-text); }
.field__label .muted { font-weight: 400; }
.field__help { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--c-text-3); }
.field--wide { grid-column: 1 / -1; }

.input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: .6rem .75rem;
  border: 1px solid var(--c-control-border);
  border-radius: var(--radius-2);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease);
}
.input::placeholder { color: var(--c-text-3); opacity: 1; }
.input:hover { border-color: var(--c-text-3); }
.input:focus-visible { outline-offset: 2px; border-color: var(--c-accent); }
/* invalid only once the user has touched the field (or when a placeholder makes the empty state visible) */
.input:user-invalid,
.input[placeholder]:invalid:not(:placeholder-shown) { border-color: var(--c-neg); }
.input:disabled { opacity: .55; cursor: not-allowed; background: var(--c-surface-2); }
textarea.input { min-height: 7.5rem; resize: vertical; }

/* numbers are the motif: mono, right-aligned, no native spinner (arrow keys still work) */
input[type="number"].input {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"].input::-webkit-outer-spin-button,
input[type="number"].input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%238f8d87' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 14px 14px;
}

/* unit suffix inside the border: the wrapper carries the border, the input goes bare */
.input--suffix {
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--c-control-border);
  border-radius: var(--radius-2);
  background: var(--c-surface);
  transition: border-color var(--dur-1) var(--ease);
}
.input--suffix:hover { border-color: var(--c-text-3); }
.input--suffix:focus-within { border-color: var(--c-accent); outline: 2px solid var(--c-focus); outline-offset: 2px; }
.input--suffix .input { border: 0; background: transparent; min-height: 42px; flex: 1 1 auto; min-width: 0; }
.input--suffix .input:focus-visible { outline: none; } /* the wrapper draws the ring (focus-within) */
.input--suffix .input:hover { border-color: transparent; }
.input--suffix:has(.input:user-invalid),
.input--suffix:has(.input[placeholder]:invalid:not(:placeholder-shown)) { border-color: var(--c-neg); }
.input__suffix {
  flex: none;
  padding-right: .75rem;
  padding-left: .25rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-text-3);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.fieldset {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  margin: 0 0 var(--sp-5);
  min-width: 0;
}
.fieldset > legend {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--c-text-3);
  padding-inline: var(--sp-2);
  margin-left: calc(-1 * var(--sp-2));
}
.fieldset > .fieldset__note { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.form-grid { display: grid; gap: var(--sp-4) var(--sp-5); }
@media (min-width: 600px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-grid + .form-grid { margin-top: var(--sp-4); }
/* Side-by-side fields share rows for label / control / help, so a label that wraps
   to two lines does not push its control out of line with its neighbour. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 600px) {
    .form-grid > .field { grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
    .form-grid > .field > .field__label { align-self: end; }
  }
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: var(--t-sm);
  color: var(--c-text);
  cursor: pointer;
}
.checkbox input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: .15rem;
  accent-color: var(--c-accent);
  cursor: pointer;
}
.checkbox input[type="checkbox"]:focus-visible { outline-offset: 2px; border-radius: 3px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   15. Calculator layout & results
   -------------------------------------------------------------------------- */
.calc { display: grid; gap: var(--sp-8); align-items: start; }
.calc__form { min-width: 0; }
.calc__results { min-width: 0; }
@media (min-width: 1000px) {
  .calc { grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); }
  .calc__results { position: sticky; top: 1.5rem; }
}

.results {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
  padding: var(--sp-6);
  font-variant-numeric: tabular-nums;
}
.results > .eyebrow { margin-bottom: var(--sp-3); }
.results__hero {
  display: grid;
  gap: var(--sp-1);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.results__hero-label { font-size: var(--t-sm); color: var(--c-text-2); }
.results__hero-value, .results__hero .num {
  font-family: var(--font-mono);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.015em;
}
.results__verdict {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-2);
  background: var(--c-accent-soft);
  color: var(--c-accent-soft-ink);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}
.results__verdict .num { font-weight: 500; }
.results__group { margin-top: var(--sp-5); }
.results__group > .eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.results__group > .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--c-hairline); }
.results__group .dl > dt, .results__group .dl > dd { padding-block: .45rem; }
.results__group .dl > dd { font-size: var(--t-sm); }

.results .table-wrap { margin-top: var(--sp-5); }
.sensitivity { font-size: var(--t-sm); }
.sensitivity caption { padding: var(--sp-3) var(--sp-3) var(--sp-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 500; }
.sensitivity th, .sensitivity td { padding: .5rem var(--sp-3); }
.sensitivity thead th { font-size: .6875rem; }
.sensitivity tbody th { font-weight: 400; color: var(--c-text-2); white-space: nowrap; }
.sensitivity td.num { font-size: var(--t-sm); }
/* a row class colours every figure in the row; cell classes come after at equal
   specificity so the "vs base" delta keeps its own sign inside a coloured row */
.sensitivity tr.is-neg td.num { color: var(--c-neg); }
.sensitivity tr.is-pos td.num { color: var(--c-pos); }
.sensitivity tr td.num.is-neg { color: var(--c-neg); }
.sensitivity tr td.num.is-pos { color: var(--c-pos); }
.sensitivity tbody tr.is-base th { color: var(--c-text); font-weight: 500; }
/* narrow results column (roughly 1000-1130px viewports, and every phone width):
   let the row labels wrap and tighten the cells so all three columns fit
   without the "vs base" delta being clipped by the scroll container */
@container (max-width: 380px) {
  .sensitivity th, .sensitivity td { padding: .45rem .4375rem; }
  .sensitivity tbody th { white-space: normal; }
}

.results__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-hairline);
}
.status {
  font-size: var(--t-sm);
  color: var(--c-text-3);
  min-height: 1.4em;
}

/* --------------------------------------------------------------------------
   16. Formulas
   -------------------------------------------------------------------------- */
.formulas {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-2);
  background: var(--c-surface);
}
.formulas > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: .95rem var(--sp-5);
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  color: var(--c-text);
  border-radius: var(--radius-2);
  user-select: none;
  transition: background-color var(--dur-1) var(--ease);
}
.formulas > summary::-webkit-details-marker { display: none; }
.formulas > summary:hover { background: var(--c-surface-2); }
.formulas > summary:focus-visible { outline-offset: -2px; }
.formulas[open] > summary { border-bottom: 1px solid var(--c-hairline); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.formulas__chevron { width: 16px; height: 16px; flex: none; color: var(--c-text-3); transition: transform var(--dur-1) var(--ease); }
.formulas[open] .formulas__chevron { transform: rotate(180deg); }
.formulas > summary .muted { margin-left: auto; font-size: var(--t-xs); font-family: var(--font-mono); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; }
.formulas__body { padding: var(--sp-5); max-width: none; }
.formulas__body dl { margin: 0; }
.formulas__body dt { font-size: var(--t-sm); font-weight: 500; color: var(--c-text); margin-top: var(--sp-4); }
.formulas__body dt:first-child { margin-top: 0; }
.formulas__body dd { margin: var(--sp-2) 0 0; }
.formulas__body dd + dd { margin-top: var(--sp-2); }
.formulas__body dd p { font-size: var(--t-sm); color: var(--c-text-2); margin-top: var(--sp-2); }
.formula {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-surface-2);
  border-radius: var(--radius-2);
  padding: .7rem var(--sp-4);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.formula .op { color: var(--c-text-3); }

/* --------------------------------------------------------------------------
   17. Diagram
   -------------------------------------------------------------------------- */
.diagram { margin: 0; }
.diagram svg { width: 100%; height: auto; }
.diagram--wide { display: none; }
.diagram--tall { display: block; max-width: 28rem; margin-inline: auto; }
@media (min-width: 720px) {
  .diagram--wide { display: block; }
  .diagram--tall { display: none; }
}
.diagram figcaption {
  margin-top: var(--sp-4);
  font-size: var(--t-sm);
  color: var(--c-text-3);
  text-align: center;
  text-wrap: pretty;
}
.diagram__frame {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-3);
  background: var(--c-surface);
  padding: var(--sp-5);
}

/* --------------------------------------------------------------------------
   18. Reveal
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   19. Error page
   -------------------------------------------------------------------------- */
.error-page {
  padding-block: clamp(4rem, 12vw, 9rem);
  max-width: var(--max-w-prose);
}
.error-page__code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-3xl);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--c-text-3);
  margin-bottom: var(--sp-5);
}
.error-page .eyebrow { margin-bottom: var(--sp-4); }
.error-page h1 { font-size: var(--t-2xl); }
.error-page p { margin-top: var(--sp-4); color: var(--c-text-2); font-size: var(--t-md); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.error-page--inline { padding-block: 0; }

/* --------------------------------------------------------------------------
   20. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.cta-band__inner {
  display: grid;
  gap: var(--sp-5) var(--sp-8);
  align-items: center;
}
.cta-band h2 { font-size: var(--t-xl); letter-spacing: -.015em; max-width: 24ch; }
.cta-band p { margin-top: var(--sp-3); color: var(--c-text-2); max-width: 52ch; text-wrap: pretty; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 800px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .cta-band__actions { justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   21. Stat row
   -------------------------------------------------------------------------- */
.stat-row { margin: 0; }
.stat-row__grid {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) { .stat-row__grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.stat {
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.stat__value {
  font-family: var(--font-mono);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--t-sm); color: var(--c-text-2); }
.stat-row__caption, .stat-row figcaption {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-text-3);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   22. Page additions
   Rules that began as a per-page <style data-css-additions> block and were
   merged here at consolidation. Every selector is page-prefixed and purely
   additive — nothing below restyles a shared component. The section sits
   ahead of [hidden], the money semantics and the reduced-motion block so
   those still win, which is what sections 23 and 24 assume.
   -------------------------------------------------------------------------- */

/* index.html — the services summary lists four engagements, and the shared
   .cards grid tops out at three columns, which would leave the fourth card
   alone in its own row on wide screens. This is a per-instance modifier on
   that one list: two columns from 900px up, so the four cards read as 2x2.
   The .cards component itself is untouched. */
@media (min-width: 900px) {
  .home-services-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* services.html — one .split per engagement, with the engagement name as an
   h2 in the label column. */
.services-engagement__num { color: var(--c-accent); }
.services-engagement__title {
  margin-top: var(--sp-2);
  font-size: var(--t-xl);
  letter-spacing: -.015em;
  line-height: var(--lh-tight);
}
.services-engagement__when { margin-top: var(--sp-3); max-width: 30ch; text-wrap: pretty; }
.services-engagement__facts { margin-top: var(--sp-5); }
.services-engagement__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-5);
}

/* calculator.html
   1. Results rows carry an explanatory note under the LABEL, not the value, so
      the auto-width value column stays narrow. The value cell then has to fill
      its row or its hairline stops short of the label's — .dl aligns cells on
      the baseline.
   2. The headline figure tweens; keep its digits tabular so it does not jitter.
   3. The copy-failure escape hatch (a selectable textarea) needs its own
      spacing. It sets no display, so [hidden] still hides it.
   4. The scenario block inside the formulas needs a little air above it. */
.calc-dl > dd { align-self: stretch; }
.calc-hero__value { font-variant-numeric: tabular-nums; }
.calc-copyout { margin-top: var(--sp-4); }
.calc-copyout .field__help { margin-bottom: .45rem; }
.calc-formulas__scenarios { margin-top: var(--sp-3); }

/* contact.html — the two columns of .split each open with an eyebrow plus a
   column-sized h2, the form column carries the same top rule as .split__label,
   and a short aside sits under the routes list. */
.contact-col__head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.contact-col__title { margin: 0; font-size: var(--t-lg); line-height: var(--lh-snug); letter-spacing: -.01em; }
.contact-col__note { margin: 0; font-size: var(--t-sm); color: var(--c-text-2); text-wrap: pretty; }
.contact-form { border-top: 1px solid var(--c-hairline); padding-top: var(--sp-3); min-width: 0; }
.contact-aside { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); font-size: var(--t-sm); color: var(--c-text-2); text-wrap: pretty; }
.contact-aside p { margin: 0; }

/* The routes list lives in the narrow .split__label column. Between 720px (where
   .split turns two-column) and 900px the value cell is barely wider than the email
   address: .dl's `overflow-wrap: anywhere` then breaks it mid-word, the row grows a
   line, and the label hairline and the value hairline stop at different heights.
   Keep the address whole and let the label column give up its 6rem floor instead. */
.contact-routes > dd { overflow-wrap: normal; word-break: keep-all; }
@media (min-width: 720px) and (max-width: 899.98px) {
  .contact-routes { grid-template-columns: auto minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   23. Pill & utilities
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--c-text-3);
  background: var(--c-surface);
  vertical-align: middle;
  white-space: nowrap;
}
.pill--accent { color: var(--c-accent-soft-ink); background: var(--c-accent-soft); border-color: transparent; }
.pill--warn { color: var(--c-warn); background: var(--c-warn-soft); border-color: transparent; }

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

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.stack > * + * { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.max-w-sm { max-width: 26rem; }
.max-w-prose { max-width: var(--max-w-prose); }
.nowrap { white-space: nowrap; }

/* [hidden] has to beat every component `display` above without !important:
   one attribute of specificity, declared after all of them. */
[hidden] { display: none; }

/* --------------------------------------------------------------------------
   24. Money semantics
   Declared last so .is-pos / .is-neg win over every component ink. The
   contract the rest of this file keeps: no component sets `color` on a value
   element at more than one class of specificity — values inherit, or the
   colour is declared through :where(). Keep it that way and any future
   component (or a css-additions file) gets the semantic colour for free.
   -------------------------------------------------------------------------- */
.is-pos { color: var(--c-pos); }
.is-neg { color: var(--c-neg); }

/* --------------------------------------------------------------------------
   25. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .link-arrow:hover svg { transform: none; }
}

/* --------------------------------------------------------------------------
   26. Print
   -------------------------------------------------------------------------- */
@media print {
  /* One token reset instead of per-component overrides. The site is dark by
     default, so paper needs every theme state forced to black on white; the
     [data-theme] selectors are listed explicitly because they outrank a bare
     :root and would otherwise repaint the page in colour. This is also where
     the brand's own white-canvas ink (#1A1A1A -> #000) applies. */
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    color-scheme: light;
    --c-bg: #fff; --c-surface: #fff; --c-surface-2: #fff;
    --c-border: #888; --c-hairline: #bbb; --c-control-border: #888;
    --c-text: #000; --c-text-2: #000; --c-text-3: #333;
    --c-accent: #000; --c-accent-hover: #000; --c-accent-ink: #fff;
    --c-accent-fill: #000; --c-accent-fill-hover: #000;
    --c-accent-soft: #fff; --c-accent-soft-ink: #000;
    --c-pos: #000; --c-neg: #000; --c-warn: #000;
    --c-pos-soft: #fff; --c-neg-soft: #fff; --c-warn-soft: #fff;
    --c-focus: #000; --c-selection: #fff;
    --c-scroll-edge: transparent;
    --glow-ambient: transparent; --glow-intense: transparent;
    --shadow-1: none; --shadow-2: none;
  }
  /* paper is white, so force the ink lockup and ask the browser to actually
     paint it: background images are dropped from print by default */
  /* same specificity as the light-theme rule, and later in the file, so no
     !important is needed to win */
  :root .wordmark__logo, :root[data-theme="light"] .wordmark__logo {
    background-image: url("../img/netesis-wordmark-ink.png");
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* paper has no scroll, so drop the edge hints and let tables print in full */
  .table-wrap { background-image: none; overflow-x: visible; }
  .site-nav, .theme-toggle, .site-footer__nav, .skip-link, .cta-band { display: none; }
  /* the ambient backdrop is screen-only */
  html::before, html::after, .spotlight { display: none; }
  .section { padding-block: 1.5rem; }
  .ledger, .card, .results, .table-wrap, .callout, .formulas, .fieldset { break-inside: avoid; }
  .js .reveal { opacity: 1; transform: none; }
  .calc { grid-template-columns: 1fr; }
  .calc__results { position: static; }
  .formulas__chevron { display: none; }
  a[href^="http"]::after, a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #444; }
}