/* ==========================================================================
   Vexorao — main.css
   One file. No preprocessor, no framework. Order per design-system §26.2:
   fonts, tokens, normalize, base, layout, header/nav, components, forms,
   footer, utilities, prefers-contrast, forced-colors, reduced-motion, print.
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-var-latin.woff2") format("woff2-variations"),
      url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight:400 700;
  font-stretch:75% 100%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-italic-400-latin.woff2") format("woff2");
  font-weight:400;
  font-stretch:100%;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Archivo Fallback";
  src:local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("Roboto");
  size-adjust:102%;
  ascent-override:98.5%;
  descent-override:25.5%;
  line-gap-override:0%;
}

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

:root{
  color-scheme: light;

  --font: "Archivo", "Archivo Fallback", Arial, Helvetica, sans-serif;

  --sheet:#FFFFFF;  --field:#E4E9EB;
  --ink:#14181A;    --ink-hover:#2A3134; --ink-active:#0A0D0E;
  --ink-2:#4A5457;  --ink-3:#677276;
  --rule:#D5DBDD;   --rule-strong:#879295; --border-strong:#6E797C;
  --accent:#0D5551; --accent-hover:#073F3C; --tint-accent:#E4EEED;
  --error:#A31A17;  --tint-error:#FBEDEC;
  --on-ink:#F2F5F6;
  --focus:#0D5551;  --focus-on-ink:#F2F5F6;

  --fs-xs:0.8125rem; --fs-eyebrow:0.75rem;
  --fs-sm:clamp(0.875rem,0.85rem + 0.15vw,0.9375rem);
  --fs-body:clamp(1rem,0.96rem + 0.22vw,1.0625rem);
  --fs-h4:clamp(1.0625rem,1rem + 0.30vw,1.1875rem);
  --fs-lead:clamp(1.125rem,1.05rem + 0.35vw,1.25rem);
  --fs-h3:clamp(1.25rem,1.15rem + 0.45vw,1.5rem);
  --fs-h2:clamp(1.5rem,1.30rem + 0.90vw,2.125rem);
  --fs-h1:clamp(1.875rem,1.55rem + 1.50vw,2.75rem);
  --fs-display:clamp(2.125rem,1.60rem + 2.60vw,3.5rem);

  --space-3xs:0.25rem; --space-2xs:0.5rem; --space-xs:0.75rem; --space-sm:1.25rem;
  --space-md:2rem; --space-lg:3.25rem; --space-xl:5.25rem;
  --space-2xl:clamp(5.25rem,8vw,8.5rem);

  --container:77.5rem; --gutter:clamp(1rem,4vw,2.5rem);
  --rail:0; --rail-gap:clamp(1.25rem,2.5vw,2.5rem);
  --measure:68ch; --measure-tight:58ch; --measure-lead:60ch;
  --measure-display:20ch; --measure-h1:24ch; --measure-h2:26ch;

  --header-h:3.5rem; --tap:2.75rem; --control-h:3rem; --control-h-compact:2.5rem;
  --section-pad: clamp(2.75rem, 6vw, 5.25rem);
}
@media (min-width:55rem){ :root{ --header-h:4rem; } }
@media (min-width:64rem){ :root{ --rail:6.5rem; } }
@media (min-width:75rem){ :root{ --rail:9rem; } }

/* 3. Normalize -------------------------------------------------------------- */

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-block-start: calc(var(--header-h) + 1rem); }
body{ margin:0; }
img, svg{ display:block; max-inline-size:100%; }
button, input, select, textarea{ font:inherit; color:inherit; }
html, body{ overflow-x: clip; }

/* 4. Base elements ------------------------------------------------------------ */

body{
  background: var(--sheet); color: var(--ink);
  font-family: var(--font); font-stretch:100%;
  font-size: var(--fs-body); line-height:1.6;
  font-variant-ligatures: common-ligatures;
}
h1,h2,h3,h4{ margin:0; color: var(--ink); font-family: var(--font); }
h1{ font-size: var(--fs-h1); font-stretch:87%; font-weight:700; line-height:1.08; letter-spacing:-0.018em; max-width: var(--measure-h1); text-wrap:balance; overflow-wrap:break-word; hyphens:none; }
h2{ font-size: var(--fs-h2); font-stretch:87%; font-weight:700; line-height:1.15; letter-spacing:-0.012em; max-width: var(--measure-h2); text-wrap:balance; overflow-wrap:break-word; hyphens:none; }
h3{ font-size: var(--fs-h3); font-stretch:92%; font-weight:600; line-height:1.25; letter-spacing:-0.008em; }
h4{ font-size: var(--fs-h4); font-stretch:92%; font-weight:600; line-height:1.30; letter-spacing:-0.004em; }
h1.display{ font-size: var(--fs-display); font-stretch:82%; font-weight:700; line-height:1.05; letter-spacing:-0.020em; max-width: var(--measure-display); }
h1,h2{ margin-block-end: var(--space-sm); }
h3{ margin-block-end: var(--space-xs); }
h4{ margin-block-end: var(--space-3xs); }
* + h2{ margin-block-start: var(--space-md); }
* + h3{ margin-block-start: var(--space-sm); }
p{ margin:0; max-width: var(--measure); text-wrap:pretty; }
p + p, p + ul, p + ol{ margin-block-start: var(--space-xs); }
.lead{ font-size: var(--fs-lead); font-weight:400; color: var(--ink-2); max-width: var(--measure-lead); margin-block-start: var(--space-xs); }
ul, ol{ margin:0; padding:0; }
li + li{ margin-block-start: var(--space-3xs); }
address{ font-style:normal; overflow-wrap:anywhere; }
hr{ border:0; border-block-start:1px solid var(--rule); margin:0; }
strong{ font-weight:600; }
em, cite{ font-style:italic; font-weight:400; }
abbr{ text-decoration:underline dotted 1px; text-underline-offset:0.2em; cursor:help; }
table{ font-variant-numeric: tabular-nums lining-nums; }
.figure, .tier, .fee-row, .timeline, time, .terms{ font-variant-numeric: tabular-nums lining-nums; }
.eyebrow{ display:block; font-size: var(--fs-eyebrow); font-stretch:78%; font-weight:600; line-height:1.2; letter-spacing:0.090em; text-transform:uppercase; color: var(--ink-2); }
.prose a, .prose p, address{ overflow-wrap:anywhere; }
@media (max-width: 30rem){ .prose p{ hyphens:auto; } }

/* 5. Links & buttons ------------------------------------------------------- */

a{
  color: var(--ink);
  text-decoration:underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:0.18em;
  padding-block:0.15em;
  transition: color 120ms linear, text-decoration-color 120ms linear;
}
a:hover{ color: var(--accent); text-decoration-thickness:2px; }
a:visited{ color: var(--ink); }
.link-list{ list-style:none; }
.link-list li{ margin:0; }
.link-list a{ text-decoration:none; }
.link-list a:hover, .link-list a:focus-visible{ text-decoration:underline; }

:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
:focus:not(:focus-visible){ outline:none; }

.skip-link{
  position:absolute; inset-block-start:-100%; inset-inline-start:0;
  background: var(--ink); color: var(--on-ink);
  padding: var(--space-xs) var(--space-sm);
  z-index:200; text-decoration:none;
}
.skip-link:focus{
  inset-block-start:0; left: var(--gutter);
  outline:2px solid var(--accent); outline-offset:2px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size: var(--control-h);
  padding-inline: var(--space-sm);
  font:600 var(--fs-body)/1.2 var(--font);
  font-stretch:100%; letter-spacing:0; text-transform:none; text-decoration:none;
  border:1px solid transparent; border-radius:0; cursor:pointer;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.btn--primary{ background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn--primary:hover{ background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-ink); }
.btn--primary:active{ background: var(--ink-active); border-color: var(--ink-active); }
.btn--secondary{ background:transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--secondary:hover{ background: var(--field); border-color: var(--ink); color: var(--ink); }
.btn--secondary:active{ background: var(--field); border-color: var(--ink-active); }
.btn--compact{ min-block-size: var(--control-h-compact); font-size: var(--fs-sm); padding-inline: var(--space-sm); }
.btn--block{ inline-size:100%; }
.btn[aria-disabled="true"], .btn:disabled{ background: var(--field); color: var(--ink-2); border-color: var(--border-strong); cursor:not-allowed; }

/* 6. Layout ----------------------------------------------------------------- */

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

main section{ padding-block: var(--section-pad); }
main section + section{ border-block-start:1px solid var(--rule); }
main section.closing{ border-block-start:2px solid var(--ink); padding-block: clamp(3.25rem, 7vw, 6.5rem); }

/* Per-section rail grid ("clause") — see build-notes "BUILDER A HANDOFF" for
   why this is implemented per-section rather than as one page-spanning grid:
   it keeps the literal `section + section` divider rule working while still
   producing one continuous vertical rail line, because adjoining
   .clause__content borders touch and read as a single line. */
.clause{ padding-block:0; }
.clause__rail{ margin-block-end: var(--space-xs); }
.clause__content{ padding-block: var(--section-pad); }
.ordinal{ font-size: var(--fs-h3); font-stretch:78%; font-weight:700; color: var(--ink-3); line-height:1; letter-spacing:0.02em; }
.rail-label{ font-size: var(--fs-eyebrow); font-stretch:78%; font-weight:600; text-transform:uppercase; color: var(--ink-2); letter-spacing:0.09em; }
.clause__rail-inline{ display:flex; align-items:baseline; gap: var(--space-2xs); margin-block-end: var(--space-2xs); }
.clause__rail-inline .ordinal{ font-size: var(--fs-eyebrow); }

@media (min-width:64rem){
  .clause__grid{ display:grid; grid-template-columns: var(--rail) minmax(0,1fr); column-gap: var(--rail-gap); }
  .clause__rail{ padding-block: var(--section-pad); margin-block-end:0; }
  .clause__rail-inline{ display:none; }
  .clause__content{ border-inline-start:1px solid var(--rule); padding-inline-start: var(--rail-gap); }
  .rail-contents{ position:sticky; top: calc(var(--header-h) + var(--space-md)); }
  .rail-contents ul{ list-style:none; }
  .rail-contents a{ display:block; font-size: var(--fs-eyebrow); font-stretch:78%; text-transform:uppercase; color: var(--ink-2); text-decoration:none; line-height:1.9; }
  .rail-contents a:hover, .rail-contents a:focus-visible{ color: var(--accent); }
}
@media (max-width:63.99rem){
  .clause__rail{ display:none; }
}

/* 7. Header & navigation ----------------------------------------------------- */

header{
  position:sticky; top:0; z-index:100;
  background: var(--sheet);
  border-block-end:1px solid var(--rule-strong);
  block-size: var(--header-h);
}
.header__inner{ display:flex; align-items:center; gap: var(--space-sm); block-size:100%; }

.wordmark{ display:inline-flex; align-items:center; gap:0.625rem; text-decoration:none; }
.wordmark .mark{ margin-block-start:-1px; }
.wordmark__text{ font-family: var(--font); font-weight:700; font-stretch:80%; font-size:1.25rem; letter-spacing:-0.01em; color: var(--ink); }
.wordmark:hover .wordmark__text, .wordmark:hover .mark{ color: var(--accent); }
.wordmark--footer .wordmark__text{ font-size:1.375rem; }

.nav{ display:none; }
.nav__list{ display:flex; align-items:center; gap: var(--space-sm); list-style:none; }
.nav__item--services{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; min-block-size: var(--tap);
  padding-inline: var(--space-2xs); font-size: var(--fs-sm); font-weight:500;
  color: var(--ink); text-decoration:none;
}
.nav__link:hover, .nav__link:focus-visible{ color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.nav__link[aria-current="page"]{ color: var(--accent); font-weight:600; box-shadow: inset 0 -2px 0 var(--accent); }

.svc-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  min-inline-size: var(--tap); min-block-size: var(--tap);
  background:none; border:0; padding:0; margin-inline-start:-0.4em; cursor:pointer; color: var(--ink);
}
.caret{
  display:inline-block; inline-size:8px; block-size:8px;
  border-inline-end:1.5px solid currentColor; border-block-end:1.5px solid currentColor;
  transform: rotate(45deg); transition:none;
}
.svc-toggle[aria-expanded="true"] .caret{ transform: rotate(-135deg); }

.svc-panel{
  position:absolute; inset-block-start: var(--header-h); inset-inline-start:0;
  inline-size:22rem; max-inline-size: calc(100vw - var(--gutter) * 2);
  background: var(--sheet); border:1px solid var(--rule-strong); border-block-start:2px solid var(--ink);
  list-style:none; padding:0; margin:0; z-index:150;
}
.svc-panel[hidden]{ display:none; }
.svc-panel li{ margin:0; }
.svc-panel li + li{ border-block-start:1px solid var(--rule); }
.svc-panel a{ display:block; padding: var(--space-xs) var(--space-sm); min-block-size:3.5rem; text-decoration:none; }
.svc-panel a:hover, .svc-panel a:focus-visible{ background: var(--field); }
.svc-panel__name{ display:block; font-size: var(--fs-body); font-weight:600; color: var(--ink); }
.svc-panel a:hover .svc-panel__name, .svc-panel a:focus-visible .svc-panel__name{ color: var(--accent); }
.svc-panel__desc{ display:block; font-size: var(--fs-sm); color: var(--ink-2); margin-block-start:0.15em; }
.svc-panel__all{ font-size: var(--fs-sm); font-weight:600; }

.header__utility{ display:flex; align-items:center; gap: var(--space-sm); margin-inline-start:auto; }
.header__phone{ display:none; font-size: var(--fs-sm); color: var(--ink-2); text-decoration:none; min-block-size: var(--tap); align-items:center; }
.header__phone:hover{ color: var(--accent); text-decoration:underline; }
.header__cta{ display:none; }
.nav-toggle{
  display:inline-flex; align-items:center; gap:0.35em;
  background:none; border:0; min-block-size: var(--tap); padding-inline:0.25em;
  font-size: var(--fs-sm); font-weight:600; color: var(--ink); cursor:pointer;
}
.nav-toggle .caret{ margin-block-start:0.15em; }
.nav-toggle[aria-expanded="true"] .caret{ transform: rotate(-135deg); }

.mobile-nav{
  background: var(--sheet); border-block-start:1px solid var(--rule-strong);
  max-block-size: calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain;
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav__list{ list-style:none; }
.mobile-nav__item{ position:relative; }
.mobile-nav__link{
  display:flex; align-items:center; min-block-size:3.25rem;
  padding-inline: var(--gutter); font-size: var(--fs-lead); font-weight:500; text-decoration:none;
  border-block-end:1px solid var(--rule);
}
.mobile-nav__link:hover, .mobile-nav__link:focus-visible{ background: var(--field); }
.mobile-svc-toggle{
  position:absolute; inset-inline-end: var(--gutter); inset-block-start:0;
  block-size:3.25rem; inline-size:3.25rem; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; color: var(--ink); cursor:pointer;
}
.mobile-svc-panel{ list-style:none; border-block-end:1px solid var(--rule); }
.mobile-svc-panel[hidden]{ display:none; }
.mobile-svc-panel li{ margin:0; border-inline-start:2px solid var(--ink); margin-inline-start: var(--space-sm); }
.mobile-svc-panel a{ display:flex; align-items:center; min-block-size:3rem; padding-inline-start: var(--space-sm); font-size: var(--fs-body); text-decoration:none; }
.mobile-svc-panel a:hover, .mobile-svc-panel a:focus-visible{ background: var(--field); }
.mobile-nav__contact{ padding: var(--space-sm) var(--gutter); border-block-end:2px solid var(--ink); }
.mobile-nav__label{ font-size: var(--fs-eyebrow); font-stretch:78%; text-transform:uppercase; color: var(--ink-2); margin-block-start: var(--space-xs); }
.mobile-nav__label:first-child{ margin-block-start:0; }
.mobile-nav__contact a{ display:block; font-size: var(--fs-body); color: var(--ink); text-decoration:none; min-block-size: var(--tap); align-items:center; }
.mobile-nav__cta{ display:flex; margin: var(--space-sm) var(--gutter); }

html.nav-open{ overflow:hidden; }

@media (min-width:25rem){ /* 400px */
  .header__cta{ display:inline-flex; }
}
@media (min-width:55rem){ /* 880px */
  .nav{ display:block; }
  .header__phone{ display:inline-flex; }
  .nav-toggle, .mobile-nav{ display:none; }
}

/* 8. Components --------------------------------------------------------------- */

/* 8.1 Breadcrumb */
.breadcrumb{ list-style:none; display:flex; flex-wrap:wrap; gap:0; margin-block-end: var(--space-xs); }
.breadcrumb li{ font-size: var(--fs-eyebrow); font-stretch:78%; text-transform:uppercase; color: var(--ink-2); margin:0; }
.breadcrumb li + li::before{ content:"/"; margin-inline:0.5em; color: var(--rule-strong); }
.breadcrumb a{ color: var(--ink-2); text-decoration:none; }
.breadcrumb a:hover{ color: var(--accent); }
.breadcrumb [aria-current="page"]{ color: var(--ink); }

/* 8.2 Figure / price */
.figure{ font-variant-numeric: tabular-nums lining-nums; font-weight:700; color: var(--accent); letter-spacing:-0.01em; white-space:nowrap; }
.figure__unit{ font-weight:400; font-size: var(--fs-sm); color: var(--ink); white-space:nowrap; }
.figure__qual{ display:block; font-size: var(--fs-sm); color: var(--ink); font-weight:400; }

/* 8.3 Terms panel (homepage opening) */
.terms{ border-inline-start:1px solid var(--rule-strong); padding-inline-start: var(--space-sm); align-self:start; }
.terms__eyebrow{ margin-block-end: var(--space-xs); }
.terms__row{ padding-block: var(--space-xs); }
.terms__row + .terms__row{ border-block-start:1px solid var(--rule); }
.terms__row .figure{ font-size: var(--fs-h3); }
.terms__row p{ max-width:34ch; font-size: var(--fs-sm); color: var(--ink); line-height:1.5; }
@media (max-width:63.99rem){
  .terms{ border-inline-start:0; border-block-start:2px solid var(--ink); padding-inline-start:0; padding-block-start: var(--space-sm); max-width: var(--measure); }
}

/* 8.4 Index list (homepage §1) */
.index-list{ list-style:none; counter-reset:idx; }
.index-list li{ counter-increment:idx; padding-block: var(--space-sm); border-block-start:1px solid var(--rule); margin:0; }
.index-list li:last-child{ border-block-end:1px solid var(--rule); }
.index-list__row{ display:grid; grid-template-columns:1fr; gap: var(--space-2xs); }
.index-list__num{ font-size: var(--fs-sm); font-weight:700; font-stretch:78%; color: var(--ink-3); }
.index-list__num::before{ content: counter(idx, decimal-leading-zero) "  "; }
.index-list__label{ font-size: var(--fs-eyebrow); font-stretch:78%; text-transform:uppercase; font-weight:600; color: var(--ink); letter-spacing:0.09em; }
.index-list__text{ font-size: var(--fs-body); color: var(--ink); max-width: var(--measure-tight); }
@media (min-width:48rem){
  .index-list__row{ display:grid; grid-template-columns:2.5rem 11rem minmax(0,1fr); column-gap: var(--space-sm); align-items:start; }
}

/* 8.5 Symptoms definition list */
.symptoms{ }
.symptoms > div{ padding-block: var(--space-sm); border-block-start:1px solid var(--rule); }
.symptoms dt{ font-size: var(--fs-lead); font-weight:600; font-stretch:92%; color: var(--ink); margin:0; }
.symptoms dd{ margin:0; font-size: var(--fs-sm); color: var(--ink-2); margin-block-start: var(--space-3xs); }
.symptoms dd + dd{ margin-block-start: var(--space-2xs); }
.symptom-link{ display:inline-flex; align-items:center; min-block-size: var(--tap); font-size: var(--fs-body); font-weight:600; color: var(--ink); text-decoration:underline; text-decoration-color: var(--accent); }
.symptom-link::before{ content:"→"; color: var(--accent); margin-inline-end:0.4em; }
@media (min-width:48rem){
  .symptoms > div{ display:grid; grid-template-columns:5fr 7fr; column-gap: var(--rail-gap); }
}

/* 8.6 Service ledger */
.ledger{ list-style:none; }
.ledger li{ padding-block: var(--space-md); border-block-start:1px solid var(--rule); margin:0; }
.ledger li:last-child{ border-block-end:1px solid var(--rule); }
.ledger__name{ font-size: var(--fs-h3); font-stretch:92%; font-weight:600; color: var(--ink); }
.ledger__def{ font-size: var(--fs-body); color: var(--ink); max-width: var(--measure-tight); margin-block-start: var(--space-3xs); }
.ledger__streams{ font-size: var(--fs-sm); color: var(--ink-2); margin-block-start: var(--space-2xs); }
.ledger__price{ text-align:end; }
.ledger__price .figure{ font-size: var(--fs-h3); }
.ledger__link{ display:inline-flex; justify-content:flex-end; min-block-size: var(--tap); align-items:center; font-size: var(--fs-sm); font-weight:600; margin-block-start: var(--space-2xs); }
@media (min-width:48rem){
  .ledger__row{ display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); column-gap: var(--rail-gap); }
}

/* 8.7 Timeline */
.timeline{ list-style:none; }
@media (min-width:56.25rem){
  .timeline{ display:grid; grid-template-columns:repeat(3,1fr); column-gap: var(--space-lg); border-block-start:1px solid var(--border-strong); padding-block-start: var(--space-md); position:relative; }
  .timeline__stage{ position:relative; }
  .timeline__stage::before{ content:""; position:absolute; inset-block-start: calc(var(--space-md) * -1 - 5px); inset-inline-start:0; inline-size:10px; block-size:10px; background: var(--accent); }
}
@media (max-width:56.24rem){
  .timeline{ border-inline-start:1px solid var(--border-strong); padding-inline-start: var(--space-sm); }
  .timeline__stage{ padding-block: var(--space-sm); position:relative; }
  .timeline__stage::before{ content:""; position:absolute; inset-block-start: calc(var(--space-sm) + 0.35em); inset-inline-start: calc(var(--space-sm) * -1 - 5px); inline-size:10px; block-size:10px; background: var(--accent); }
}
.timeline__label{ font-size: var(--fs-eyebrow); font-stretch:78%; text-transform:uppercase; color: var(--accent); font-weight:600; }
.timeline__does{ list-style:none; font-size: var(--fs-sm); color: var(--ink); margin-block-start: var(--space-2xs); }
.timeline__does li{ padding-block: var(--space-3xs); }
.timeline__does li + li{ border-block-start:1px solid var(--rule); }
.timeline__obs{ border-block-start:1px solid var(--rule); padding-block-start: var(--space-2xs); margin-block-start: var(--space-2xs); }
.timeline__obs-label{ display:block; font-size: var(--fs-eyebrow); font-stretch:78%; text-transform:uppercase; color: var(--ink-2); }
.timeline__obs p{ font-size: var(--fs-sm); color: var(--ink-2); margin-block-start:0.2em; max-width:none; }

/* 8.8 Split (two/three column) */
.split{ display:grid; grid-template-columns:1fr; row-gap: var(--space-md); }
.split__col > .eyebrow{ margin-block-end: var(--space-xs); }
.split__col ul{ list-style:none; }
.split__col li{ padding-block: var(--space-xs); border-block-start:1px solid var(--rule); font-size: var(--fs-body); color: var(--ink); }
.split__col li:first-child{ border-block-start:0; }
@media (min-width:48rem){
  .split{ grid-template-columns:1fr 1fr; column-gap: var(--space-lg); row-gap:0; }
  .split > .split__col + .split__col{ border-inline-start:1px solid var(--rule-strong); padding-inline-start: var(--space-lg); }
}
@media (max-width:47.99rem){
  .split > .split__col + .split__col{ border-block-start:2px solid var(--ink); padding-block-start: var(--space-sm); margin-block-start: var(--space-md); }
}
@media (min-width:56.25rem){
  .split--three{ grid-template-columns:1fr 1fr 1fr; }
}

/* 8.9 Refusals */
.refusals p, .refusals li{ font-size: var(--fs-lead); font-weight:400; color: var(--ink); max-width:46ch; margin-block-start: var(--space-sm); text-indent:-1.1em; padding-inline-start:1.1em; list-style:none; }
.refusals p:first-child, .refusals li:first-child{ margin-block-start:0; }

/* 8.10 Static Q&A / FAQ */
.qa__block, .faq__item{ border-block-start:1px solid var(--rule); padding-block: var(--space-md); }
.qa__block:first-child, .faq__item:first-child{ border-block-start:0; }
.qa__block h3, .faq__item h3{ max-width:34ch; }
.faq__item h3{ max-width:40ch; }
.qa__block p, .faq__item p{ margin-block-start: var(--space-2xs); }

/* 8.11 Notice */
.notice{ border-inline-start:3px solid var(--ink); padding: var(--space-sm) 0 var(--space-sm) var(--space-sm); font-size: var(--fs-body); color: var(--ink); max-width: var(--measure); }
.notice--accent{ border-inline-start-color: var(--accent); background: var(--tint-accent); padding-inline-end: var(--space-sm); }
.notice--error{ border-inline-start-color: var(--error); background: var(--tint-error); padding-inline-end: var(--space-sm); }

/* 8.12 Pricing matrix (used by /pricing, built by Builder B/C) */
.tiers{ }
.tier__label{ font-size: var(--fs-eyebrow); font-stretch:78%; text-transform:uppercase; color: var(--ink-2); }
.tier__row--excl{ border-inline-start:2px solid var(--ink); padding-inline-start: var(--space-sm); }
.tier__row--excl .tier__label{ color: var(--ink); }
.tier ul{ list-style:none; }
.tier li{ padding-block: var(--space-2xs); border-block-start:1px solid var(--rule); font-size: var(--fs-body); color: var(--ink); }
.tier li:first-child{ border-block-start:0; }
@media (min-width:70rem){
  .tiers{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(7,auto); border-block-start:2px solid var(--ink); border-block-end:1px solid var(--rule-strong); }
  .tier{ display:grid; grid-row:1 / -1; grid-template-rows:subgrid; row-gap:0; border-inline-end:1px solid var(--rule-strong); }
  .tier:first-child{ border-inline-start:1px solid var(--rule-strong); }
  .tier__row{ padding: var(--space-sm); border-block-start:1px solid var(--rule); }
  .tier__row--name{ border-block-start:0; }
  .tier--recommended{ border-block-start:2px solid var(--accent); }
}
@supports not (grid-template-rows: subgrid){
  @media (min-width:70rem){ .tiers{ display:block; } }
}
@media (min-width:77.5rem){
  .tiers{ margin-inline-start: calc((var(--rail) + var(--rail-gap)) * -1); }
}
@media (max-width:69.99rem){
  .tier{ border-block-start:2px solid var(--ink); padding-block: var(--space-sm); }
  .tier + .tier{ margin-block-start: var(--space-md); }
  .tier--recommended{ border-inline-start:3px solid var(--accent); padding-inline-start: var(--space-sm); }
}
@media (min-width:35rem) and (max-width:69.99rem){
  .tier__row{ display:grid; grid-template-columns:9rem minmax(0,1fr); column-gap: var(--space-sm); padding-block: var(--space-sm); border-block-start:1px solid var(--rule); }
  .tier__row--name{ display:block; border-block-start:0; }
}
@media (max-width:34.99rem){
  .tier__row{ display:block; padding-block: var(--space-sm); border-block-start:1px solid var(--rule); }
  .tier__label{ margin-block-end: var(--space-3xs); }
  .tier__row--name{ border-block-start:0; }
}

/* 8.13 Workstream spec list */
.spec{ }
.spec > div{ padding-block: var(--space-sm); border-block-start:1px solid var(--rule); }
.spec dt{ font-size: var(--fs-h4); font-stretch:92%; font-weight:600; color: var(--ink); }
.spec dd{ margin:0; font-size: var(--fs-body); color: var(--ink); max-width: var(--measure); }
@media (min-width:64rem){
  .spec--split > div{ display:grid; grid-template-columns:14rem minmax(0,1fr); column-gap: var(--space-sm); }
}

/* 8.14 Not-included list */
.excluded{ border-inline-start:2px solid var(--ink); padding-inline-start: var(--space-sm); }
.excluded__head{ font-size: var(--fs-eyebrow); text-transform:uppercase; font-stretch:78%; font-weight:600; color: var(--ink); letter-spacing:.09em; }
.excluded ul{ list-style:none; }
.excluded li{ font-size: var(--fs-body); color: var(--ink); padding-block: var(--space-xs); border-block-start:1px solid var(--rule); }
.excluded li:first-child{ border-block-start:0; }
.excluded li::before{ content:"—"; color: var(--ink-2); margin-inline-end:.6em; }

/* 8.15 Fee-model rows */
.fee-rows{ }
.fee-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap: var(--space-md); padding-block: var(--space-sm); border-block-start:1px solid var(--rule); align-items:start; }
.fee-rows .fee-row:first-child{ border-block-start:0; }
.fee-rows .fee-row:last-child{ border-block-end:1px solid var(--rule); }
.fee-row__label{ font-size: var(--fs-eyebrow); text-transform:uppercase; color: var(--ink-2); }
.fee-row__note{ font-size: var(--fs-sm); color: var(--ink); margin-block-start:0.2em; }
.fee-row__value{ text-align:end; }
.fee-row__value .figure{ font-size: var(--fs-h3); }
.fee-row--full{ grid-template-columns:1fr; border-block-start:2px solid var(--ink); font-size: var(--fs-sm); color: var(--ink); }
@media (max-width:34.99rem){
  .fee-row{ grid-template-columns:1fr; }
  .fee-row__value{ text-align:start; margin-block-start: var(--space-2xs); }
}

/* 8.16 Retrieval comparison diagram */
.retrieval{ display:grid; grid-template-columns:1fr; row-gap: var(--space-md); }
.retrieval__col ol{ list-style:none; counter-reset:step; }
.retrieval__col li{ counter-increment:step; padding-block: var(--space-xs); border-block-start:1px solid var(--rule); font-size: var(--fs-sm); color: var(--ink); padding-inline-start:2rem; position:relative; }
.retrieval__col li:first-child{ border-block-start:0; }
.retrieval__col li::before{ content: counter(step); position:absolute; inset-inline-start:0; color: var(--ink-3); font-size: var(--fs-eyebrow); }
.retrieval__col li.retrieval__divergence{ border-block-start:2px solid var(--accent); }
.retrieval__divergence-label{ display:block; font-size: var(--fs-eyebrow); text-transform:uppercase; color: var(--accent); margin-block-end:0.2em; }
@media (min-width:48rem){
  .retrieval{ grid-template-columns:1fr 1fr; column-gap: var(--space-lg); row-gap:0; }
  .retrieval__col + .retrieval__col{ border-block-start:0; }
}
@media (max-width:47.99rem){
  .retrieval__col + .retrieval__col{ border-block-start:2px solid var(--ink); padding-block-start: var(--space-sm); margin-block-start: var(--space-md); }
}

/* 8.17 Report specification table */
.report-spec{ inline-size:100%; border-collapse:collapse; font-variant-numeric: tabular-nums lining-nums; }
.report-spec caption{ text-align:start; font-size: var(--fs-eyebrow); text-transform:uppercase; font-stretch:78%; color: var(--ink-2); letter-spacing:.09em; padding-block-end: var(--space-2xs); }
.report-spec th, .report-spec td{ padding: var(--space-sm); vertical-align:top; border-block-start:1px solid var(--rule); border-inline-end:1px solid var(--rule-strong); text-align:start; }
.report-spec th:last-child, .report-spec td:last-child{ border-inline-end:0; }
.report-spec thead th{ background: var(--field); color: var(--ink); font-size: var(--fs-eyebrow); text-transform:uppercase; font-stretch:78%; letter-spacing:.09em; border-block-start:2px solid var(--ink); }
.report-spec tbody th[scope=row]{ font-weight:600; font-stretch:92%; font-size: var(--fs-body); }
.report-spec td{ font-size: var(--fs-sm); color: var(--ink); line-height:1.5; }
.table-scroll{ overflow-x:auto; border-inline-end:1px solid var(--border-strong); }
.table-scroll-hint{ display:block; font-size: var(--fs-eyebrow); text-transform:uppercase; color: var(--ink-2); margin-block-end: var(--space-2xs); }
@media (min-width:48rem){ .table-scroll-hint{ display:none; } }

/* 8.18 Captioned image */
.figure-img{ margin:0; }
.figure-img img{ display:block; inline-size:100%; block-size:auto; border:1px solid var(--rule-strong); }
.figure-img figcaption{ font-size: var(--fs-eyebrow); text-transform:uppercase; font-stretch:78%; letter-spacing:.09em; color: var(--ink-2); padding-block-start: var(--space-2xs); }

/* 8.19 Homepage opening artwork (rail, ≥1024px only) */
.opening__art-wrap{ display:none; }
.opening__art{ border:1px solid var(--rule-strong); aspect-ratio:2 / 5; background-image:url("/assets/images/home-opening-art.png"); background-size:contain; background-position:top left; background-repeat:no-repeat; background-color: var(--sheet); }
@media (min-width:64rem){
  .opening__art-wrap{ display:block; }
}
@media (min-width:80rem){
  .opening__art{ margin-inline-start: calc(var(--gutter) * -1); inline-size: calc(var(--rail) + var(--gutter)); }
}
.opening__art-caption{ font-size: var(--fs-eyebrow); text-transform:uppercase; font-stretch:78%; color: var(--ink-2); margin-block-start: var(--space-2xs); }

/* 8.20 Homepage opening layout */
.opening{ padding-block: var(--space-md) var(--section-pad); }
.opening__grid{ display:block; }
.opening__main h1{ margin-block-end:0; }
.opening__main .lead{ margin-block-start: var(--space-sm); }
.opening .terms{ margin-block-start: var(--space-lg); }
@media (min-width:64rem){
  .opening__grid{ display:grid; grid-template-columns: var(--rail) minmax(0,1fr); column-gap: var(--rail-gap); align-items:start; }
  .opening__inner{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap: var(--rail-gap); }
  .opening__main{ grid-column:1 / 8; }
  .opening .terms{ grid-column:8 / 13; margin-block-start:0; }
}

/* 8.21 Inline price emphasis within running prose (terms panel row 1) */
.num{ font-variant-numeric: tabular-nums lining-nums; font-weight:700; color: var(--accent); white-space:nowrap; }

/* 8.22 Lateral / forward text-link emphasis (T3) */
.link-cta{ font-weight:600; }

/* 8.23 Closing CTA clause modifier — terminal rule + larger padding */
.clause--closing{ border-block-start:2px solid var(--ink); }
.clause--closing .clause__content{ padding-block: clamp(3.25rem, 7vw, 6.5rem); }
@media (min-width:64rem){
  .clause--closing .clause__rail{ padding-block: clamp(3.25rem, 7vw, 6.5rem); }
}

/* 9. Forms -------------------------------------------------------------------- */

.form{ max-inline-size:34rem; display:flex; flex-direction:column; gap: var(--space-sm); }
.field label{ display:block; font-size: var(--fs-sm); font-weight:600; color: var(--ink); margin-block-end: var(--space-3xs); }
.field__hint{ display:block; font-size: var(--fs-sm); color: var(--ink-2); margin-block-end: var(--space-3xs); }
.field__marker{ display:inline; font-weight:400; color: var(--ink-2); }
.field input, .field textarea, .field select{
  inline-size:100%; min-block-size: var(--control-h); padding:0.7rem 0.75rem;
  font:400 1rem/1.5 var(--font); font-stretch:100%; color: var(--ink); background: var(--sheet);
  border:1px solid var(--border-strong); border-radius:0;
  transition: border-color 120ms linear, background-color 120ms linear;
}
.field textarea{ min-block-size:8rem; resize:vertical; }
.field input:hover, .field textarea:hover, .field select:hover{ border-color: var(--ink-2); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{ border-color: var(--ink); outline:2px solid var(--focus); outline-offset:2px; }

.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; padding-inline-end:2.5rem; }
.select-wrap::after{
  content:""; position:absolute; inset-inline-end:1rem; inset-block-start: calc(50% - 5px);
  inline-size:8px; block-size:8px; border-inline-end:1.5px solid var(--ink); border-block-end:1.5px solid var(--ink);
  transform:rotate(45deg); pointer-events:none;
}

.field--error input, .field--error textarea, .field--error select{ border:2px solid var(--error); background: var(--tint-error); }
.field__error{ display:block; font-size: var(--fs-sm); font-weight:600; color: var(--error); margin-block-start: var(--space-3xs); }
.field__error::before{ content:"Error: "; }

.error-summary{ border-inline-start:3px solid var(--error); background: var(--tint-error); padding: var(--space-sm); margin-block-end: var(--space-md); max-inline-size:34rem; }
.error-summary h2{ font-size: var(--fs-h4); font-stretch:92%; margin-block-end: var(--space-2xs); }
.error-summary ul{ list-style:none; }
.error-summary a{ font-size: var(--fs-body); color: var(--error); text-decoration-color: var(--error); }

.hp{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path: inset(50%); white-space:nowrap; }

/* 10. Footer -------------------------------------------------------------------- */

footer{ background: var(--field); border-block-start:2px solid var(--ink); padding-block: var(--space-lg) var(--space-md); }
.footer__grid{ display:grid; grid-template-columns:1fr; column-gap: var(--space-lg); row-gap: var(--space-md); }
.footer__col{ min-width:0; }
.footer__col + .footer__col{ border-block-start:1px solid var(--border-strong); padding-block-start: var(--space-md); }
.footer__label{ font-size: var(--fs-eyebrow); font-stretch:78%; text-transform:uppercase; color: var(--ink); letter-spacing:.09em; margin-block-end: var(--space-xs); }
.footer__col--brand .footer__label{ margin-block-start: var(--space-sm); }
.footer__blurb{ font-size: var(--fs-sm); color: var(--ink-2); max-width:34ch; margin-block-start: var(--space-xs); }
.footer__col address{ font-size: var(--fs-sm); color: var(--ink); line-height:1.6; max-width:26ch; }
.footer__contact-row{ margin-block-start: var(--space-2xs); }
.footer__contact-row a{ display:inline-flex; align-items:center; min-block-size: var(--tap); font-size: var(--fs-sm); color: var(--ink); text-decoration:none; }
.footer__contact-row a:hover{ color: var(--accent); text-decoration:underline; }
.footer__social{ margin-block-start: var(--space-xs); list-style:none; display:flex; gap: var(--space-sm); flex-wrap:wrap; }
.footer__social a{ font-size: var(--fs-sm); color: var(--ink); }
.footer__col .link-list{ list-style:none; }
.footer__col .link-list li{ margin:0; min-block-size: var(--tap); display:flex; align-items:center; }
.footer__col .link-list a{ color: var(--ink); font-size: var(--fs-sm); }
.footer__col .link-list a:hover{ color: var(--accent); }
.footer__bottom{ border-block-start:1px solid var(--border-strong); margin-block-start: var(--space-md); padding-block-start: var(--space-sm); font-size: var(--fs-xs); color: var(--ink-2); }
.footer__bottom p + p{ margin-block-start: var(--space-3xs); }
.footer__bottom a{ color: var(--ink-2); }

@media (min-width:35rem){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__col--brand{ grid-column:1 / -1; border-block-start:0; padding-block-start:0; }
}
@media (min-width:56.25rem){
  .footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
  .footer__col--brand{ grid-column:auto; }
  .footer__col + .footer__col{ border-block-start:0; padding-block-start:0; }
}

/* 11. Utilities ------------------------------------------------------------------ */

.visually-hidden{
  position:absolute !important; inline-size:1px; block-size:1px; overflow:hidden;
  clip-path: inset(50%); white-space:nowrap;
}
.stack{ display:flex; flex-direction:column; gap: var(--space-sm); }
.dest-list{ list-style:none; margin-block-start: var(--space-sm); }
.dest-list li{ padding-block: var(--space-sm); border-block-start:1px solid var(--rule); margin:0; font-size: var(--fs-body); color: var(--ink); }
.dest-list li:last-child{ border-block-end:1px solid var(--rule); }
.dest-list a{ font-weight:600; }
.cta-row{ display:flex; align-items:center; gap: var(--space-sm); flex-wrap:wrap; margin-block-start: var(--space-md); }
.channels{ display:flex; gap: var(--space-sm); flex-wrap:wrap; font-size: var(--fs-sm); color: var(--ink-2); margin-block-start: var(--space-sm); }
.channels a{ color: var(--ink-2); }

/* 12. prefers-contrast -------------------------------------------------------- */

@media (prefers-contrast: more){
  :root{
    --ink-2:#33393B; --ink-3:#33393B;
    --rule:#879295; --rule-strong:#4A5457; --border-strong:#14181A;
    --field:#DDE3E5;
  }
  :focus-visible{ outline-width:3px; }
  a{ text-decoration-thickness:2px; }
  .btn--secondary{ border-width:2px; }
}

/* 13. forced-colors ------------------------------------------------------------ */

@media (forced-colors: active){
  :root{ --accent: LinkText; }
  .btn--primary{ background: ButtonFace; color: ButtonText; border:1px solid ButtonText; }
  .btn--secondary{ background: ButtonFace; color: ButtonText; border:1px solid ButtonText; }
  .rule, hr, section + section, table, th, td{ border-color: CanvasText !important; }
  .select-wrap select{ appearance:auto !important; }
  .select-wrap::after{ display:none !important; }
  .tier--recommended{ border-block-start-color: Highlight !important; }
  .timeline__stage::before{ forced-color-adjust:none; background: CanvasText; }
  :focus-visible{ outline:3px solid Highlight; outline-offset:2px; }
  .field--error input, .field--error textarea, .field--error select{ border:2px solid CanvasText; }
}

/* 14. prefers-reduced-motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration:0s !important; transition-delay:0s !important;
    animation-duration:0s !important; animation-delay:0s !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important;
  }
}

/* 15. Print ----------------------------------------------------------------------- */

@media print{
  header, footer, .btn, .mobile-nav, .skip-link{ display:none; }
  .wordmark .mark path{ stroke: var(--ink) !important; }
}

/* 16. Builder B additions ----------------------------------------------------
   Appended only — nothing above this line was edited or reordered. Each rule
   follows the existing token/naming conventions and fills a genuine gap left
   by the shared component library (design-system §15 inventory did not
   define these). Logged in .ai/build-notes.md. */

/* 16.1 .included — plain counterpart to .excluded, used on /pricing so the
   "Included" list next to a .fee-rows group reads as equal-weight body copy
   without borrowing the 2px ink emphasis rail that is reserved for the
   exclusions credibility device (design-system §7.2, §13.4). */
.included__head{ font-size: var(--fs-eyebrow); text-transform:uppercase; font-stretch:78%; font-weight:600; color: var(--ink-2); letter-spacing:.09em; }
.included ul{ list-style:none; }
.included li{ font-size: var(--fs-body); color: var(--ink); padding-block: var(--space-xs); border-block-start:1px solid var(--rule); }
.included li:first-child{ border-block-start:0; }

/* 16.2 .fee-rows--feature — the page's-only-2px-accent-rule treatment for
   the Google Ads fee-model block, per design-system §24 page-specific notes
   ("the fee-model block gets the page's only 2px accent rule"). */
.fee-rows--feature{ border-block-start:2px solid var(--accent); padding-block-start: var(--space-2xs); }

/* 16.3 .tier__reco-label — the scope-reason eyebrow above the recommended
   tier's name, per design-system §15.4 ("an optional --fs-eyebrow uppercase
   --accent line above the tier name"). Teal is permitted here: figures and
   the recommended-tier rule are both listed as approved uses (§7.2 rule 6). */
.tier__reco-label{ font-size: var(--fs-eyebrow); font-stretch:78%; font-weight:600; text-transform:uppercase; color: var(--accent); letter-spacing:.09em; margin-block-end: var(--space-3xs); }

/* 16.4 .prose — narrow reading measure for /about, per design-system §24
   ("Narrow measure throughout (--measure-lead, 60ch)"), overriding the
   sitewide 68ch default on p/dd only inside this wrapper. */
.prose p, .prose dd, .prose li{ max-width: var(--measure-lead); }

/* ==========================================================================
   Builder C addition — legal-page prose data table (Cookie Policy)
   No base <table> styling existed outside the page-specific .report-spec
   component (/services/analytics-and-reporting). This is a plain, reusable
   data-table treatment scoped to .prose (the five legal pages), paired with
   the existing .table-scroll / .table-scroll-hint wrapper above (§8.17) for
   the scoped-scroll fallback required by design-system §20.5 and
   legal-checklist §16.4 #27. Does not touch or reorder any existing rule.
   ========================================================================== */

.prose table{
  inline-size:100%;
  min-inline-size:34rem;
  border-collapse:collapse;
  margin-block-start: var(--space-sm);
  font-size: var(--fs-sm);
}
.prose th, .prose td{
  padding: var(--space-xs) var(--space-sm);
  text-align:start;
  vertical-align:top;
  border-block-end:1px solid var(--rule);
  border-inline-end:1px solid var(--rule);
}
.prose th:last-child, .prose td:last-child{ border-inline-end:0; }
.prose thead th{ background: var(--field); color: var(--ink); font-weight:600; font-stretch:92%; }
.prose .table-scroll{ margin-block-start: var(--space-sm); }

/* 16. No-JS navigation fallback (progressive enhancement) --------------------- */
/* Only rendered by the browser when scripting is disabled, per <noscript>
   semantics — no JS-based hide/show needed. Hidden again above the 880px
   breakpoint, where .nav already becomes visible through CSS alone. */
.noscript-nav{ background: var(--sheet); border-block-end:1px solid var(--rule-strong); }
.noscript-nav__list{ list-style:none; margin:0; padding:0; }
.noscript-nav__list li{ margin:0; border-block-end:1px solid var(--rule); }
.noscript-nav__list a{
  display:flex; align-items:center; min-block-size:3.25rem;
  padding-inline: var(--gutter); font-size: var(--fs-body); font-weight:500;
  color: var(--ink); text-decoration:none;
}
.noscript-nav__list a:hover, .noscript-nav__list a:focus-visible{ background: var(--field); }
@media (min-width:55rem){ /* 880px */
  .noscript-nav{ display:none; }
}
.prose .table-scroll table{ margin-block-start:0; }