/* ==========================================================================
   aVAssist design tokens and base styles
   Single source of truth. No hardcoded hex anywhere outside this :root block.
   Contrast ratios verified by scripts/palette-check.mjs, recorded inline.
   ========================================================================== */

:root {
  /* --- brand colour ----------------------------------------------------- */
  --ink:      #1A1014;  /* 18.61 on white, AAA. Body text, panda black       */
  --deep:     #40162E;  /* 15.30 with white, AAA. Dark bands, header, footer */
  --primary:  #8C2B57;  /* 8.08 on white, AAA. Buttons, links, one accent    */
  --accent:   #E58BB2;  /* 7.68 on ink, AAA. DARK GROUNDS ONLY, 2.42 on white */
  --neutral:  #FAF2F6;  /* 16.93 with ink, AAA. Page ground                  */
  --white:    #FFFFFF;
  --cream:    #F5EDE3;  /* 13.19 on deep, AAA. The artwork colour on dark
                           grounds, from the approved render. Warmer than
                           --neutral, which stays the page ground. */

  /* --- surfaces and lines, derived ------------------------------------- */
  --surface:      #FFFFFF;
  --surface-2:    #F5E9EF;
  --line:         #EBD9E2;
  --line-strong:  #D9BECC;

  /* --- text tones. Body copy sits at --text-2, never full ink ----------- */
  --text:    #1A1014;
  --text-2:  #5C4450;   /* 8.76 on white, 7.96 on neutral, AAA. Reading tone */
  --text-3:  #805E6F;   /* 5.60 on white, 5.09 on neutral, 4.74 on surface-2 */
                        /* All AA. Was #8C6B78, which failed at 4.25 on      */
                        /* neutral. Captions and labels are body size here.  */
  --on-dark:   #FFFFFF;
  --on-dark-2: #E7C8D6;

  /* --- semantic, separate from the brand accent ------------------------ */
  --good:    #0A6340;
  --warn:    #8A5A10;
  --bad:     #96112F;

  /* --- type ------------------------------------------------------------- */
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  clamp(1.5rem, 3vw, 2rem);
  --t-3xl:  clamp(1.875rem, 4vw, 2.75rem);
  --t-4xl:  clamp(2.25rem, 5.5vw, 3.75rem);

  /* --- space ------------------------------------------------------------ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;

  --radius:    10px;
  --radius-lg: 14px;
  --wrap:      1080px;
}

/* --- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  overflow-x: hidden;
  background: var(--neutral);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--deep); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--deep); color: var(--on-dark);
  padding: var(--s-3) var(--s-4); border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- layout ------------------------------------------------------------ */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.band { padding-block: clamp(3rem, 7vw, 5rem); }
.band + .band { border-top: 1px solid var(--line); }
.band--deep { background: var(--deep); color: var(--on-dark); border-top: 0; }
.band--deep h2, .band--deep h3 { color: var(--on-dark); }
.band--deep p { color: var(--on-dark-2); }
.band--surface { background: var(--surface); }
.band--tint { background: var(--surface-2); }

/* --- type -------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--t-4xl); font-weight: 300; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h1 strong, h2 strong { font-weight: 500; color: var(--primary); }
.band--deep h1 strong, .band--deep h2 strong { color: var(--accent); }

.eyebrow {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text-3);
}
.band--deep .eyebrow { color: var(--accent); }

.lede { font-size: var(--t-md); color: var(--text-2); max-width: 62ch; }
.band--deep .lede { color: var(--on-dark-2); }
.prose p { color: var(--text-2); max-width: 65ch; }
.prose p + p { margin-top: var(--s-4); }
.muted { color: var(--text-3); font-size: var(--t-sm); }
.mono { font-family: var(--mono); font-size: 0.9em; }
.num { font-variant-numeric: tabular-nums; }

/* --- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--sans); font-size: var(--t-base); font-weight: 500;
  padding: 0.8rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--primary); color: var(--white); }
.btn--primary:hover { background: var(--deep); color: var(--white); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.band--deep .btn--ghost { border-color: rgba(229,139,178,.45); color: var(--on-dark); }
.band--deep .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--lg { font-size: var(--t-md); padding: 0.95rem 1.9rem; }

/* --- header ------------------------------------------------------------ */
.site-header {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding-block: var(--s-4);
}
/* The header lockup. Mark then wordmark, at the proportions of the approved
   artwork, which has no divider rule between them. The wordmark is outlines,
   not type, so it never waits on a webfont and never reflows. */
.brand { display: flex; align-items: center; gap: 5px; text-decoration: none; flex: none; color: var(--deep); }
.brand__mark { height: 34px; width: auto; flex: none; }
.brand__word { height: 15px; width: auto; flex: none; }
/* The PH tag, for avassistph.com. Always exactly the height of the wordmark
   beside it, so it reads as part of the name and never as a badge stuck on.
   Its letters are knocked out, so the ground shows through in any colour. */
.brand__ph { height: 15px; width: auto; flex: none; margin-left: 3px; }
@media (max-width: 520px) {
  .brand__mark { height: 28px; }
  .brand__word, .brand__ph { height: 12px; }
}
.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav a { color: var(--text-2); text-decoration: none; font-size: var(--t-sm); white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--primary); }
.nav a.btn--primary { color: var(--white); }
.nav a.btn--primary:hover { color: var(--white); }
.nav a.btn--ghost { color: var(--text); }
.nav .btn { padding: 0.6rem 1.15rem; font-size: var(--t-sm); }

/* Below 820px the nav drops to its own full-width row and scrolls sideways
   inside itself, so it can never widen the page. */
@media (max-width: 900px) {
  .site-header .wrap { flex-wrap: wrap; gap: var(--s-3); }
  .nav {
    width: 100%; gap: var(--s-4); justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-x: contain;
    padding-bottom: var(--s-1);
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a:not(.btn) { font-size: var(--t-sm); }
  /* The main call to action must never scroll out of sight with the links.
     It lifts out of the nav row and sits on the logo row, top right. */
  .site-header .wrap { position: relative; }
  .nav .btn {
    position: absolute; right: var(--s-5);
    top: calc(var(--s-4) + 17px); transform: translateY(-50%);
  }
  /* A soft fade over the right end of the link row says "there is more,
     swipe". Drawn on the header, not as a mask on the nav, because a mask
     would also erase the button lifted out of it above. */
  .nav { padding-right: var(--s-7); }
  .site-header .wrap::after {
    content: ""; position: absolute; right: 0; bottom: 0;
    width: var(--s-8); height: 2.6rem; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface) 75%);
  }
}
@media (max-width: 520px) {
  .nav .btn { top: calc(var(--s-4) + 14px); padding: 0.5rem 0.95rem; }
}

/* --- hero -------------------------------------------------------------- */
.hero { background: var(--neutral); color: var(--text); }
.hero .wrap { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero h1 { max-width: 20ch; margin-block: var(--s-4) var(--s-5); }
.hero .lede { max-width: 56ch; }
.hero .eyebrow { color: var(--primary); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* The price sits above the fold. This is the direction's signature. */
.price-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; margin-top: var(--s-7);
}
.price-strip > div { background: var(--surface); padding: var(--s-5); }
.price-strip > div > .k {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-2);
}
.price-strip > div > .v { font-size: var(--t-xl); font-weight: 400; color: var(--primary); line-height: 1.2; }
.price-strip > div > .n { font-size: var(--t-xs); color: var(--text-3); margin-top: var(--s-1); line-height: 1.5; }

/* --- the ledger, this site's primary layout device --------------------- */
.ledger {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
}
.ledger table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.ledger th {
  text-align: left; font-family: var(--mono); font-size: var(--t-xs); font-weight: 400;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.ledger th.right, .ledger td.right { text-align: right; }
.ledger td {
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.ledger tr:last-child td { border-bottom: 0; }
.ledger td.name { color: var(--text); font-weight: 500; }
.ledger td.price { font-weight: 500; color: var(--primary); white-space: nowrap; }
.ledger td.name { hyphens: auto; }
.ledger tr.is-premium td { background: var(--surface-2); }
.ledger-scroll { overflow-x: auto; max-width: 100%; }
.ledger-scroll table { min-width: 560px; }

/* --- cards ------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-5);
}
.card h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.card p { color: var(--text-2); font-size: var(--t-sm); }
.card--deep { background: var(--deep); border-color: transparent; color: var(--on-dark); }
.card--deep p { color: var(--on-dark-2); }
.card__k {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-3);
}
.card--deep .card__k { color: var(--accent); }

/* --- steps ------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-4); }
.step { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-4); align-items: start; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--mono); font-size: var(--t-sm); color: var(--primary);
  padding-top: 0.3rem;
}
.band--deep .step::before { color: var(--accent); }
.step h3 { margin-bottom: var(--s-2); }

/* --- lists ------------------------------------------------------------- */
.ticks { list-style: none; display: grid; gap: var(--s-3); }
.ticks li { position: relative; padding-left: 1.6rem; color: var(--text-2); font-size: var(--t-sm); }
.ticks li::before {
  content: "+"; position: absolute; left: 0; top: -1px;
  font-family: var(--mono); color: var(--primary);
}
.band--deep .ticks li { color: var(--on-dark-2); }
.band--deep .ticks li::before { color: var(--accent); }

/* --- callout ----------------------------------------------------------- */
.callout {
  background: var(--deep); color: var(--on-dark);
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.5rem);
}
.callout .card__k { color: var(--accent); }
.callout .btn--ghost { border-color: rgba(229,139,178,.5); color: var(--white); }
.callout .btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.callout a:not(.btn) { color: var(--accent); }
.callout h3 { font-size: var(--t-2xl); font-weight: 400; margin-bottom: var(--s-3); }
.callout p { color: var(--on-dark-2); max-width: 72ch; }
.callout strong { color: var(--white); font-weight: 500; }

/* --- faq --------------------------------------------------------------- */
.faq { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  padding: var(--s-4) var(--s-5); cursor: pointer; font-weight: 500;
  list-style: none; display: flex; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--primary); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 var(--s-5) var(--s-5); color: var(--text-2); font-size: var(--t-sm); max-width: 72ch; }

/* --- footer ------------------------------------------------------------ */
.site-footer { background: var(--deep); color: var(--on-dark-2); }
.site-footer .wrap { padding-block: var(--s-7); }
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--s-6); }
.site-footer h4 {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3); font-weight: 400;
}
.site-footer ul { list-style: none; display: grid; gap: var(--s-2); }
.site-footer a { color: var(--on-dark-2); text-decoration: none; font-size: var(--t-sm); }
.site-footer a:hover { color: var(--white); }
.site-footer .base {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(229,139,178,.25);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between;
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
}
.site-footer .base a { text-decoration: underline; color: var(--white); }

/* --- utilities --------------------------------------------------------- */
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* --- forms ------------------------------------------------------------- */
/* Shared by the start.html forms and the admin. The admin keeps these exact
   values; the public forms get more room below, because they are the page a
   lead arrives on and most of those leads are on a phone. */
.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-base);
}
.field textarea { resize: vertical; line-height: 1.55; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.field--check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.field--check input { width: auto; }
.field--check label { margin: 0; font-weight: 400; }
.hint {
  margin-top: var(--s-1);
  color: var(--text-3);
  font-size: var(--t-xs);
  line-height: 1.5;
}

/* The start.html layout: the form, and a sidebar that answers "what next". */
.formwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--s-7);
  align-items: start;
}
.form { max-width: 40rem; }
.form h2 { margin: var(--s-2) 0 var(--s-5); }
.form .field { margin-bottom: var(--s-5); }
.form .field label { color: var(--text); font-size: var(--t-base); }
.form .field input,
.form .field select,
.form .field textarea {
  padding: 0.75rem 0.9rem;
  font-size: var(--t-md);          /* 16px or more stops iOS zooming on focus */
  transition: border-color .15s;
}
.form .field input:hover,
.form .field select:hover,
.form .field textarea:hover { border-color: var(--primary); }
.form .hint { font-size: var(--t-sm); }
.form > .btn { margin-top: var(--s-2); }
.form > .btn + .hint { margin-top: var(--s-3); }

.sidebar { display: grid; gap: var(--s-4); position: sticky; top: 6rem; }
.sidebar .card p + p { margin-top: var(--s-3); }
.numlist { padding-left: 1.2rem; display: grid; gap: var(--s-2); }
.numlist li { color: var(--text-2); font-size: var(--t-sm); padding-left: var(--s-1); }
.numlist li::marker { color: var(--primary); font-family: var(--mono); font-size: var(--t-xs); }

@media (max-width: 900px) {
  .formwrap { grid-template-columns: 1fr; gap: var(--s-6); }
  .sidebar { position: static; }
  .form > .btn { width: 100%; }
}

/* A field only bots fill in. Off-screen, not display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: var(--s-2) 0 var(--s-4); min-height: 65px; }

/* --- form status ------------------------------------------------------- */
/* The three things a submit can do: land, be refused, or hit a form that is
   not switched on. Each one says so in a different colour, and the last two
   carry a mailto link so a lead is never silently lost. */
.formnote {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.formnote a { color: var(--primary); }
.formnote.is-good  { border-left-color: var(--good); }
.formnote.is-warn  { border-left-color: var(--warn); }
.formnote.is-error { border-left-color: var(--bad); }

/* --- the 3D lockup on the hero --------------------------------------------
   The approved 3D artwork is cream, made for a dark ground. It is genuinely
   invisible on the white header, which is why the nav carries the flat
   mulberry vector instead. Here the band is mulberry and the artwork is large,
   which is the one place on the site the render belongs. */
.hero--dark { background: var(--deep); color: var(--on-dark); }
.hero--dark .eyebrow { color: var(--accent); }
.hero--dark h1 { color: var(--on-dark); }
.hero--dark h1 strong { color: var(--accent); }
.hero--dark .lede { color: var(--on-dark-2); }
/* The strip draws its hairlines with a background colour showing through a
   1px grid gap, so the container needs flipping too, not just the cells. */
.hero--dark .price-strip { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.hero--dark .price-strip > div { background: var(--deep); }
.hero--dark .price-strip .k,
.hero--dark .price-strip .n { color: var(--on-dark-2); }
.hero--dark .price-strip .v { color: var(--on-dark); }
.hero--dark .btn--ghost { border-color: rgba(255,255,255,.38); color: var(--on-dark); }
.hero--dark .btn--ghost:hover { background: rgba(255,255,255,.1); color: var(--on-dark); }
.hero-lockup {
  margin-bottom: var(--s-5);
}
.hero-3d {
  display: block; width: auto; height: clamp(72px, 9vw, 116px); min-width: 0;
}
/* --- the time audit -------------------------------------------------------
   Questions on the left, a result panel that updates as you drag on the right.
   The panel sticks while the questions scroll, so the number is always in
   view: the whole argument of this page is that you can watch it move. */
.audit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--s-6);
  align-items: start;
}
.audit__intro { margin-bottom: var(--s-5); }
.audit__intro h2 { font-size: var(--t-xl); }
.audit__intro p { color: var(--text-2); margin-top: var(--s-2); }

.q { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.q:first-child { padding-top: 0; }
.q label { display: block; font-weight: 400; color: var(--text); }
.q__hint { color: var(--text-3); font-size: var(--t-sm); margin-top: 2px; line-height: 1.5; }
.q__row { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.q__row input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--primary); }
.q__val {
  flex: 0 0 4.5rem; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--primary);
}
.q--rate { border-bottom: 0; }
.q--rate input { width: 8rem; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong);
  border-radius: var(--radius); font-family: inherit; font-size: var(--t-base); }
.q__prefix, .q__suffix { color: var(--text-3); }

.audit__out { position: sticky; top: var(--s-5); min-width: 0; }
.res {
  background: var(--deep); color: var(--on-dark);
  border-radius: var(--radius-lg); padding: var(--s-5);
}
.res__k { color: var(--on-dark-2); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; }
.res__big { font-size: clamp(2.4rem, 7vw, 3.2rem); line-height: 1.05; margin: var(--s-1) 0 var(--s-2);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.res__big span { font-size: var(--t-lg); color: var(--on-dark-2); }
.res__mid { font-size: var(--t-xl); font-variant-numeric: tabular-nums; margin-top: 2px; }
.res__mid span { font-size: var(--t-sm); color: var(--on-dark-2); }
.res__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-4); }
.res__note { color: var(--on-dark-2); font-size: var(--t-sm); line-height: 1.55; margin-top: var(--s-2); }
.res__note--warn { color: var(--accent); }
.res__rule { height: 1px; background: rgba(255,255,255,.18); margin: var(--s-5) 0; }
.res__table { width: 100%; border-collapse: collapse; margin-top: var(--s-2); }
.res__table td { padding: var(--s-1) 0; font-size: var(--t-sm); color: var(--on-dark); }
.res__table .right { text-align: right; font-variant-numeric: tabular-nums; color: var(--on-dark-2); }
.res__role { font-size: var(--t-lg); margin-top: var(--s-1); }
.res__price { font-size: var(--t-2xl); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.res__price span { font-size: var(--t-sm); color: var(--on-dark-2); }
.res__weigh { color: var(--on-dark); font-size: var(--t-md); line-height: 1.5; margin-top: var(--s-3); }
.res__weigh strong { color: var(--accent); }
.res__cta { width: 100%; justify-content: center; margin-top: var(--s-5); }
.res__fine { color: var(--on-dark-2); font-size: var(--t-xs); line-height: 1.5; margin-top: var(--s-3); }
.res__fine a, .res__note a { color: var(--accent); }

.audit-hero .lede { color: var(--on-dark-2); }
.audit-facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-5);
  margin-top: var(--s-5); color: var(--on-dark-2); font-size: var(--t-sm); }
.audit-facts li::before { content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent); margin-right: var(--s-2); vertical-align: middle; }

@media (max-width: 900px) {
  .audit { grid-template-columns: 1fr; }
  .audit__out { position: static; order: -1; }
}