/* ==================================================================================================
   Second Pencil — the whole design system.
   ==================================================================================================

   WHERE THE LOOK COMES FROM. The subject is a desk at nine at night: a printed worksheet under
   fluorescent light, blue-black ballpoint, and the second pencil. So the ground is paper rather
   than white, the text colour is ink rather than grey, and the one accent is the canary of the
   second copy in an NCR set — which is what "Second Pencil" is actually named after.

   WHAT IS DELIBERATELY NOT HERE. No warm cream and terracotta, no purple gradient hero, no acid
   pop on near-black, no Inter. Those are the house style of every generated page this year, and a
   dealer principal who has been pitched forty times can smell a template even when he cannot name
   what he is smelling.

   MOTION BUDGET, and it is a budget. Three techniques, no more: one clip reveal on the hero
   headline, an observer-driven rise on content blocks, and exactly one pinned scroll moment spent
   on the gross-split figure, where pinning does explanatory work instead of decoration. Parallax
   runs on background layers only, capped under 15% of scroll delta, and never on type — parallax
   on type is the 2014 tell. Everything animates transform and opacity and nothing else.

   THE RULE BEHIND ALL OF IT. The finished state is the default in CSS. Scroll effects are applied
   on top by script, and only after the script has confirmed it can run. A reader on Firefox, on a
   locked-down work laptop, with reduced motion on, or with JS blocked by whatever the dealership's
   IT installed, gets the complete page — never a page waiting on an event that will not fire.
   ================================================================================================ */

/* --------------------------------------------------------------------------------------------
   Tokens. Every colour is declared here in the light set first, so a token can never exist only
   inside a media query — the classic unreadable-page bug where one theme's text lands on the
   other theme's ground.
   -------------------------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Paper. Cool and faintly green rather than cream: this is a form, not a wedding invitation. */
  --paper:      #EDEDE6;
  --surface:    #FAFAF6;
  --surface-2:  #E4E4DB;

  /* Ink. Blue-black, the colour a ballpoint actually leaves, not a neutral grey. */
  --ink:        #14171C;
  --ink-2:      #4E555E;
  --ink-3:      #767D86;

  --rule:       #CDCDC3;
  --rule-firm:  #A9A99E;

  /* The second copy. Used for the second pass in the mark, for figures that carry the argument,
     and for nothing else. A highlight that appears everywhere highlights nothing. */
  --canary:     #F2C230;
  --canary-ink: #6B4E00;

  /* Reserved, absolutely, for a compliance flag. It means "this ad breaks a rule". If it ever
     appears as decoration, the Ad File specimen stops being readable at a glance. */
  --flag:       #B5392B;

  /* The dark bands. The same ink, taken down to where a printed sheet goes under a desk lamp. */
  --deep:       #101319;
  --deep-2:     #1A1F27;
  --on-deep:    #F2F2EC;
  --on-deep-2:  #9AA1AB;
  --deep-rule:  #2B313B;

  --mark-accent: var(--canary);

  /* Type. Archivo carries a width axis, so the expanded display cut costs no extra font file.
     Plex Mono does the document work: labels, figures, anything that should read as printed. */
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* A modular scale, clamped. Nothing on this site sets a font-size outside it. */
  /*
   * 4.6rem, not 6.4. Measured: at 6.4rem the four-line hero headline was 389px tall — 43% of a
   * 1440x900 laptop screen and 52% of a 1280x720 one — which pushed the positioning line, the
   * price band and both buttons below the fold. The first thing a dealer principal saw was an
   * eyebrow and a wall of type with no way in. A hero is sized to what it holds.
   */
  --t-hero:  clamp(2.2rem, 1rem + 4.2vw, 4.6rem);
  --t-xxl:   clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem);
  --t-xl:    clamp(1.6rem, 1.1rem + 2.0vw, 2.5rem);
  --t-lg:    clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --t-body:  clamp(1rem, 0.97rem + 0.18vw, 1.09rem);
  --t-sm:    0.9rem;
  --t-xs:    0.78rem;

  --gutter: clamp(1rem, 0.3rem + 3vw, 4rem);
  --measure: 34rem;
  --shell: 78rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Dark. Redefines tokens only — never a component rule — so every component follows
   automatically. Guarded against an explicit light choice so a reader who has picked light beats
   a dark operating system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #0D1014;
    --surface:   #14181E;
    --surface-2: #1C222A;
    --ink:       #EFEFE9;
    --ink-2:     #A7AEB8;
    --ink-3:     #7B828C;
    --rule:      #262C35;
    --rule-firm: #3A424D;
    --canary:    #F5CB4A;
    --canary-ink:#F5CB4A;
    --flag:      #E06A5B;
    --deep:      #05070A;
    --deep-2:    #0F1319;
    --on-deep:   #F2F2EC;
    --on-deep-2: #949BA5;
    --deep-rule: #1E242C;
  }
}
:root[data-theme="dark"] {
  --paper:     #0D1014;
  --surface:   #14181E;
  --surface-2: #1C222A;
  --ink:       #EFEFE9;
  --ink-2:     #A7AEB8;
  --ink-3:     #7B828C;
  --rule:      #262C35;
  --rule-firm: #3A424D;
  --canary:    #F5CB4A;
  --canary-ink:#F5CB4A;
  --flag:      #E06A5B;
  --deep:      #05070A;
  --deep-2:    #0F1319;
  --on-deep:   #F2F2EC;
  --on-deep-2: #949BA5;
  --deep-rule: #1E242C;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; line-height: 1.04; text-wrap: balance; letter-spacing: -0.025em; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--canary);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--canary); color: #12151B; }

/* --------------------------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: 92rem; }

/* Section spacing is set with padding-block so it can never zero out the side gutter. */
.band { padding-block: clamp(4rem, 2rem + 8vw, 9rem); }
.band--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* The dark bands. Each paints its own ground so it never borrows the page's. */
.band--deep { background: var(--deep); color: var(--on-deep); }
.band--deep .eyebrow { color: var(--on-deep-2); }
.band--deep .lede { color: var(--on-deep-2); }
.band--deep .prose { color: var(--on-deep-2); }
.band--deep .prose strong { color: var(--on-deep); }

.measure { max-width: var(--measure); }

/* --------------------------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--canary);
  flex: none;
}

.display {
  font-size: var(--t-hero);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.h2 { font-size: var(--t-xxl); font-stretch: 106%; }
.h3 { font-size: var(--t-xl); }
.h4 { font-size: var(--t-lg); }

.lede { font-size: var(--t-lg); line-height: 1.45; color: var(--ink-2); max-width: 32rem; }

.prose { max-width: var(--measure); color: var(--ink-2); }
.prose p + p { margin-top: 1.1em; }
.prose strong { color: var(--ink); font-weight: 600; }

.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* A source line. Present under every figure on this site, because the entire pitch is that the
   numbers are real, and an unsourced number on a page about honesty is self-refuting. */
.cite {
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--ink-3);
}
.band--deep .cite { color: var(--on-deep-2); opacity: 0.8; }
.cite a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* --------------------------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  min-height: 48px;
  font: 600 0.95rem/1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 140ms var(--ease), background-color 140ms var(--ease), color 140ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--canary); color: #12151B; }
.band--deep .btn--primary, .ftr .btn--primary { background: var(--canary); color: #12151B; }
.band--deep .btn--primary:hover, .ftr .btn--primary:hover { background: var(--on-deep); }

.btn--ghost { border-color: var(--rule-firm); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.band--deep .btn--ghost { border-color: var(--deep-rule); color: var(--on-deep); }
.band--deep .btn--ghost:hover { border-color: var(--on-deep); }

.btn .arw { transition: transform 160ms var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* --------------------------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------------------------- */
.hdr {
  position: sticky;
  /* Not 0. On a phone the host pads the document by the safe-area inset, and a sticky header
     pinned to 0 sits under the status bar. */
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.hdr[data-stuck="true"] { border-bottom-color: var(--rule); }
.hdr__in { display: flex; align-items: center; gap: 1.4rem; min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.brand svg { width: 30px; height: 30px; color: var(--ink); flex: none; }
.brand__wm {
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.03em;
  font-size: 1.05rem;
  line-height: 1;
}
.brand__wm span { color: var(--ink-3); font-weight: 500; }

.nav { display: none; gap: 1.6rem; align-items: center; }
@media (min-width: 64rem) { .nav { display: flex; } }
.nav a {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: 0.4rem;
  transition: color 140ms var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--canary); }

.hdr .btn { padding: 0.65rem 1.1rem; min-height: 42px; font-size: 0.87rem; }

/* --------------------------------------------------------------------------------------------
   Hero. Static text is the LCP element on purpose — no video, no image sequence, no WebGL.
   -------------------------------------------------------------------------------------------- */
/*
 * Padding trimmed with the type, for the same reason: 248px of vertical padding at 1440 on top of
 * a 389px headline is how a hero ends up 1,092px tall on a 900px screen.
 */
.hero { position: relative; overflow: clip; padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem) clamp(2rem, 1rem + 4vw, 4rem); }

/* The parallax layer, and the only one on the site. It sits behind everything, it is decoration,
   and it carries no information — so when the transform never runs, nothing is lost. */
.hero__bg {
  position: absolute;
  inset: -14% -5% -20%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  will-change: transform;
}
.hero__bg::before {
  /* Ruled paper: the lines of a worksheet, faint enough to register as texture, not as a grid. */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 39px, color-mix(in srgb, var(--rule) 75%, transparent) 39px 40px
  );
  -webkit-mask-image: radial-gradient(125% 85% at 72% 12%, #000 0%, transparent 74%);
  mask-image: radial-gradient(125% 85% at 72% 12%, #000 0%, transparent 74%);
}
/*
 * The hero's shell is a query container so the headline can be sized against IT rather than
 * against the viewport. See .hero__h1 for why that distinction is the whole bug.
 */
.hero > .shell { position: relative; z-index: 1; container-type: inline-size; container-name: hero; }

/*
 * THE HEADLINE IS SIZED FROM ITS CONTAINER, NOT THE VIEWPORT, and that is a bug fix rather than a
 * preference.
 *
 * The lines here are hard-broken in the markup so each one can be clip-revealed separately, and
 * .reveal-line therefore carries overflow:hidden. That combination has a failure mode: if a line
 * is ever wider than its box, the text is not merely awkward, it is silently cut off.
 *
 * The old rule sized it with clamp(..., 6.2vw, 6.4rem) and capped the width at 17ch. Both halves
 * were wrong in the same way. The font ceiling is in REM, so it grows with the reader's default
 * font size, while the shell's ceiling is 78rem and its gutter grows with vw — so the type and
 * the space it has to live in are governed by different things and drift apart. On a browser set
 * to a larger default size, or at narrow widths where the 2.6rem floor stops the type shrinking,
 * the longest line outgrows the shell and gets clipped. A 17ch max-width cannot help: ch scales
 * with the font, so it grows at exactly the moment the space is running out.
 *
 * 9.2cqi ties the type to the box. The longest line measures 9.16x the font size in Archivo at
 * this weight and width, and the shell's content box is about 90% of its border box once the
 * gutter is taken out — so 9.2cqi keeps the longest line inside the content box with room to
 * spare at every width, whatever the reader's font settings. The min() keeps the old ceiling so
 * it never gets bigger than it was on a wide screen.
 *
 * And it is allowed to wrap. If that coefficient is ever wrong, a wrapped line is ugly and
 * readable; a clipped one is neither. Never put white-space: nowrap on these.
 */
.hero__h1 { font-size: min(var(--t-hero), 9.2cqi); }
.hero__h1 em { font-style: normal; color: var(--canary-ink); }

.hero__lede { margin-top: 1.5rem; font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-width: 41rem; }
.hero__lede b { color: var(--ink); font-weight: 600; }

.hero__band {
  margin-top: 1.7rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.2rem;
  align-items: baseline;
}
.hero__price { font-family: var(--mono); font-size: 0.95rem; color: var(--ink); }
.hero__price b { font-weight: 600; }
.hero__terms { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }

.hero__cta { margin-top: 1.7rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }

/*
 * SHORT SCREENS. The 1280x720 and 1440x800 laptops, which are extremely common and are where
 * this hero was worst: the button sat 116px below the fold, so the first thing a dealer principal
 * saw was an eyebrow and a wall of type with no way in and no price.
 *
 * Width was never the constraint on those machines — height was, and none of the sizing above
 * knows anything about height. So the headline additionally answers to the viewport's height
 * here, and the vertical rhythm tightens with it. Above 820px tall nothing in this block applies
 * and the hero is unchanged.
 */
@media (max-height: 820px) {
  .hero { padding-block: clamp(1.75rem, 0.5rem + 3vw, 3rem) clamp(1.5rem, 0.5rem + 2.5vw, 2.5rem); }
  .hero .eyebrow { margin-bottom: 0.9rem; }
  /* 8vh keeps four lines of headline to under a third of a short screen. Measured: at 8.5vh a
     1280x720 laptop still put the button 19px under the fold. */
  .hero__h1 { font-size: min(var(--t-hero), 9.2cqi, 8vh); }
  .hero__lede { margin-top: 0.9rem; }
  .hero__band { margin-top: 0.9rem; padding-top: 0.75rem; }
  .hero__cta { margin-top: 1rem; }
}

/* The clip reveal. One headline, once, on load. The finished state is the default written above;
   the animation only replays it, so a browser that ignores it shows finished type. */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; }

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .reveal-line > span {
    animation: riseIn 880ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 85ms);
  }
}
@keyframes riseIn {
  from { transform: translateY(106%); }
  to   { transform: translateY(0); }
}

/* --------------------------------------------------------------------------------------------
   Observer rise. Content blocks arrive. The default state is visible; the script adds the class
   that starts them low, and only when it is certain it can take that class away again.
   -------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .rise {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  }
  html[data-motion="on"] .rise.is-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------------------------
   The gross-split figure. The one pinned moment on the site.

   The bars are authored at their true width in CSS. The pin only controls how much of that width
   has swept in, through --grow, which the script moves between 0 and 1 while the section is held.
   Where the script never runs, --grow stays at its declared 1 and the chart is simply correct and
   complete — the only acceptable fallback for a chart that IS the argument.
   -------------------------------------------------------------------------------------------- */
.pin { position: relative; }
.pin__sticky { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; padding-block: 3rem; }
/* Only the pinned variant gets extra scroll length to consume, and only once it can use it. */
html[data-motion="on"] .pin[data-pinned="true"] { height: 250svh; }

.split { --grow: 1; display: grid; gap: clamp(1.8rem, 1rem + 2vw, 2.6rem); }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); align-items: start; } }

/*
 * The headline in here runs at its own size, smaller than a section head elsewhere on the site.
 * It shares a pinned screen with two bars, three deltas and a citation, all of which have to be
 * legible at once for the comparison to work — and at the page's normal --t-xxl it set five
 * characters to a line in a column this narrow and pushed the figure off the bottom of the pin.
 */
.split .h2 { font-size: clamp(1.7rem, 1rem + 1.9vw, 2.6rem); line-height: 1.06; }

.bars { display: grid; gap: 1.6rem; }
.bar__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.55rem; }
.bar__name { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-deep-2); }
.bar__val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; }
.bar__track { height: clamp(34px, 5vw, 54px); background: var(--deep-2); border: 1px solid var(--deep-rule); position: relative; overflow: hidden; }
.bar__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * var(--grow)); }
.bar--front .bar__fill { background: repeating-linear-gradient(135deg, #39414C 0 7px, #2E353F 7px 14px); }
.bar--back  .bar__fill { background: var(--canary); }
.bar--back  .bar__val { color: var(--canary); }
.bar__share {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: 0.9rem;
  font-family: var(--mono); font-size: var(--t-sm); font-weight: 600;
  color: #12151B;
  opacity: clamp(0, calc((var(--grow) - 0.55) * 4), 1);
}
.bar--front .bar__share { color: var(--on-deep-2); }

.delta { margin-top: 2.4rem; display: grid; gap: 0.9rem; border-top: 1px solid var(--deep-rule); padding-top: 1.6rem; }
.delta__row { display: flex; gap: 1rem; align-items: baseline; font-family: var(--mono); font-size: var(--t-sm); }
.delta__fig { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 5.5rem; flex: none; }
.delta__fig--down { color: var(--flag); }
.delta__fig--up { color: var(--canary); }
.delta__txt { color: var(--on-deep-2); line-height: 1.5; }

/* --------------------------------------------------------------------------------------------
   Cards, lists, tables
   -------------------------------------------------------------------------------------------- */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 46rem) { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.cell { background: var(--surface); padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); display: flex; flex-direction: column; gap: 0.85rem; }
.cell__n { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: 0.1em; }
.cell h3 { font-size: 1.15rem; letter-spacing: -0.02em; }
.cell p { color: var(--ink-2); font-size: 0.94rem; line-height: 1.55; }
.cell__foot { margin-top: auto; padding-top: 0.9rem; border-top: 1px dashed var(--rule-firm); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6; }
.cell__foot b { color: var(--ink-2); font-weight: 500; }

/* The refusals. Crossed off, because that is what they are. */
.nots { display: grid; gap: 0; border-top: 1px solid var(--deep-rule); }
.nots li {
  display: flex; gap: 1rem; align-items: baseline;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--deep-rule);
  font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.nots li::before {
  content: "\00d7";
  font-family: var(--mono);
  color: var(--flag);
  font-size: 1.1em;
  line-height: 1;
  flex: none;
}
.nots li span {
  color: var(--on-deep-2); font-weight: 400; font-size: 0.85rem; font-family: var(--mono);
  margin-left: auto; text-align: right; flex: none; max-width: 15rem; line-height: 1.5;
}
/*
 * At phone width the note drops onto its own line under the refusal.
 *
 * It has to be given a flex-basis to do that, and the indent has to be padding rather than
 * margin. The first version kept `flex: none` from the rule above and only cleared max-width, so
 * each note sized to its own content — 380 to 630px inside a 375px viewport — and every one of
 * them was silently cut off at the right edge. The page did not scroll sideways, so nothing
 * looked broken; the sentences just ended early.
 */
@media (max-width: 44rem) {
  .nots li { flex-wrap: wrap; }
  .nots li span {
    flex: 1 1 100%;
    min-width: 0;
    margin-left: 0;
    padding-left: 2rem;
    text-align: left;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------------------------- */
.tiers { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 66rem) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier { background: var(--surface); padding: clamp(1.5rem, 1rem + 1.6vw, 2.3rem); display: flex; flex-direction: column; gap: 1.05rem; }
.tier--mid { background: var(--surface-2); }
.tier__name { font-size: 1.4rem; font-stretch: 108%; }
.tier__who { font-size: 0.9rem; color: var(--ink-2); line-height: 1.5; }
.tier__price { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; font-family: var(--mono); padding-top: 0.3rem; }
.tier__price b { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.5rem); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tier__price span { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.3; }
.tier__terms { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: 0.7rem; line-height: 1.6; }
.tier ul { display: grid; gap: 0.7rem; }
.tier li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.6rem; font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }
.tier li::before { content: "\2014"; font-family: var(--mono); color: var(--canary-ink); }
.tier li b { color: var(--ink); font-weight: 600; }
.tier__first { margin-top: auto; padding-top: 1.1rem; border-top: 1px dashed var(--rule-firm); }
.tier__first strong { display: block; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.5rem; }
.tier__first p { font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); }

/* A margin note on a document, not an alert in an app. */
.note { border-left: 3px solid var(--canary); padding: 0.85rem 0 0.85rem 1.2rem; font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); max-width: 46rem; }
.note strong { color: var(--ink); font-weight: 600; }
.band--deep .note { color: var(--on-deep-2); }
.band--deep .note strong { color: var(--on-deep); }

/* --------------------------------------------------------------------------------------------
   Timeline (the first 30 days)
   -------------------------------------------------------------------------------------------- */
.days { display: grid; gap: 0; }
.day { display: grid; gap: 0.4rem 1.6rem; padding-block: 1.45rem; border-top: 1px solid var(--rule); }
@media (min-width: 54rem) { .day { grid-template-columns: 7.5rem 11rem 1fr; align-items: baseline; } }
.day__when { font-family: var(--mono); font-size: var(--t-sm); color: var(--canary-ink); font-weight: 500; }
.day__tier { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.day__what { color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.day__what b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------------------------- */
.field { display: grid; gap: 0.45rem; }
.field label { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-firm);
  border-radius: 2px;
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  width: 100%;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field small { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }

/* --------------------------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------------------------- */
.ftr { background: var(--deep); color: var(--on-deep); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem; }
.ftr a { color: var(--on-deep-2); text-decoration: none; }
.ftr a:hover { color: var(--on-deep); }
.ftr__grid { display: grid; gap: 2.5rem; }
@media (min-width: 54rem) { .ftr__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.ftr h4 { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-deep-2); font-weight: 400; margin-bottom: 1rem; }
.ftr ul { display: grid; gap: 0.6rem; font-size: 0.92rem; }
.ftr__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--deep-rule); font-family: var(--mono); font-size: var(--t-xs); color: var(--on-deep-2); line-height: 1.7; display: grid; gap: 0.6rem; max-width: 62rem; }
.ftr .brand svg { color: var(--on-deep); }
.ftr .brand__wm { color: var(--on-deep); }
.ftr .brand__wm span { color: var(--on-deep-2); }

/* A placeholder the operator must fill before launch. Visible on purpose: an empty phone number
   that looks finished is exactly how a site ships with an empty phone number. */
.todo {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--flag) 18%, transparent) 0 8px, transparent 8px 16px);
  outline: 1px dashed var(--flag);
  padding: 0 0.3rem;
  font-family: var(--mono);
  font-size: 0.85em;
  white-space: nowrap;
}

/* Below the fold, skip the work until it is needed. */
.defer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--paper); padding: 0.8rem 1.2rem; z-index: 100; }
.skip:focus { left: var(--gutter); top: 0.6rem; }

/* --------------------------------------------------------------------------------------------
   THE SPECIMEN DOCUMENT

   The Ad File is the product, so the specimen has to read as a document that was printed and
   handed across a desk — not as a web page describing one. That means a hard border rather than
   a shadow, a masthead with a meta block, numbered findings, a severity rail in the margin, and
   a real table with a caption. Mono everywhere a form would be monospaced and nowhere else.

   The severity rail is the only place on the site besides a compliance flag where --flag is
   allowed to appear, which is what keeps it meaning something.
   -------------------------------------------------------------------------------------------- */
.spec {
  background: var(--surface);
  border: 1px solid var(--rule-firm);
  max-width: 62rem;
}

.spec__head {
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  border-bottom: 2px solid var(--ink);
}
@media (min-width: 50rem) { .spec__head { grid-template-columns: 1fr auto; align-items: end; } }

.spec__kicker {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}
.spec__title { font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.35rem); letter-spacing: -0.02em; }

.spec__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; margin: 0; }
.spec__meta div { display: grid; gap: 0.15rem; }
.spec__meta dt { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.spec__meta dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.95rem; }

.spec__body { padding: clamp(1.3rem, 1rem + 1.2vw, 2rem); }

.spec__section {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink);
  margin: 2.4rem 0 1.4rem;
}
.spec__section:first-child { margin-top: 0; }

/* A finding. The rail carries the severity; the colour is never used anywhere decorative. */
.find {
  border-left: 3px solid var(--rule-firm);
  padding: 0 0 0 1.1rem;
  margin-bottom: 1.6rem;
}
.find--high { border-left-color: var(--flag); }
.find--med  { border-left-color: var(--canary); }
.find--map  { border-left-color: var(--ink-2); }

.find__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  margin-bottom: 0.55rem;
}
.find__id { font-weight: 600; color: var(--ink); }
.find__rule { color: var(--ink-2); }
.find__sev { margin-left: auto; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.find--high .find__sev { color: var(--flag); }

.find__h { font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 0.6rem; }
.find p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); }
.find p + p { margin-top: 0.5rem; }
.find p b { color: var(--ink); font-weight: 600; }
.find__fix { border-top: 1px dashed var(--rule-firm); padding-top: 0.55rem; margin-top: 0.7rem !important; }

/* The table scrolls in its own container, never the page. */
.spec__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; display: block; overflow-x: auto; }
.spec__caption { caption-side: bottom; text-align: left; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); padding-top: 0.7rem; }
.spec__table th, .spec__table td { text-align: left; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec__table thead th { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.spec__table tbody th { font-weight: 500; color: var(--ink); }
.spec__table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.spec__table tfoot th, .spec__table tfoot td { border-bottom: none; border-top: 2px solid var(--ink); font-weight: 700; color: var(--ink); padding-top: 0.8rem; }

.spec__list { display: grid; gap: 0.6rem; font-size: 0.92rem; color: var(--ink-2); line-height: 1.6; }
.spec__list li { padding-left: 1.1rem; position: relative; }
.spec__list li::before { content: "\2014"; position: absolute; left: 0; font-family: var(--mono); color: var(--ink-3); }
.spec__list b { color: var(--ink); font-weight: 600; }

.spec__foot {
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.4rem) clamp(1.3rem, 1rem + 1.2vw, 2rem);
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}
.spec__foot p { font-family: var(--mono); font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3); }