/* Ingot — PAPER. The shared design system for every page.
 *
 * Replaces Cleanroom Instrument (dark graphite, hairline rules everywhere, radius 0,
 * no surfaces). That system was internally consistent and it read as dense and airless:
 * every section fenced by a 1px line, no spacing scale, gaps chosen by hand one at a time.
 *
 * Three rules carry this one:
 *
 *   1. SPACE SEPARATES, NOT LINES. There is almost no border in this file. Sections are
 *      told apart by the room between them. A rule is a last resort, not a default.
 *   2. ONE SPACING SCALE. Every margin and padding is a step on --s1..--s8. Nothing is
 *      hand-picked. This is the thing the old site never had.
 *   3. SURFACES, NOT FENCES. Where content needs to be set apart it sits on white with a
 *      soft shadow, not inside a box drawn with a line.
 *
 * Unchanged from the old system because they were never aesthetic: zero external network
 * requests (this file is same-origin, the faces are same-origin), no framework, no build
 * step, and colour still means something — one accent, used for evidence and action only.
 */

/* ── faces ─────────────────────────────────────────────────────────────────────────── */
@font-face { font-family:"Archivo"; font-style:normal; font-weight:600;
             font-display:swap; src:url("fonts/archivo-latin-600.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:400;
             font-display:swap; src:url("fonts/public-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:500;
             font-display:swap; src:url("fonts/public-sans-latin-500.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400;
             font-display:swap; src:url("fonts/jetbrains-mono-400.woff2") format("woff2"); }

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

:root {
  color-scheme: light;
  --paper:#FBFAF8;      /* the ground */
  --white:#FFFFFF;      /* surfaces */
  --ink:#12100E;
  --dim:#6F6A63;
  --line:#E7E3DC;       /* rare, and never structural */
  --wash:#F3F0EA;       /* a tint, for bands that need to recede */
  --accent:#D4541E;     /* evidence and action. Nothing else. */
  /* The same accent, darkened until it is legible as text.
     #D4541E is 3.96:1 on paper and 4.13:1 on white — it clears WCAG AA for LARGE type and
     fails it for everything else, and it was being used at .7rem on the ILLUSTRATION tag,
     on "32 words, verbatim", on the numbered refusals and on white-on-accent badges. This
     one is 5.20:1 on paper, 5.42:1 on white and 4.81:1 on --accent-soft.
     Rule: --accent for fills, borders, rings and display-size numerals; --accent-ink for
     any accent-coloured TEXT below 24px, and for any surface with small text on it. */
  --accent-ink:#B84413;
  --accent-soft:#FCEFE8;
  --accent-wash:#FBD9C7;
  --ok:#1F6B3E;
  --bad:#B3261E;

  --display:"Archivo", ui-sans-serif, system-ui, sans-serif;
  --sans:"Public Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* the scale */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem;
  --s5:3.5rem; --s6:5rem; --s7:6.5rem; --s8:8rem;

  /* Aliases for the retired Cleanroom vocabulary, so any rule still naming a v1 token
     resolves to its PAPER equivalent rather than to nothing. */
  --gold:#6F6A63;       /* was the steel accent; now simply secondary ink */
  --ember:#B3261E;      /* was refusal red */
  --card:#FFFFFF;       /* was the panel surface */
  --hot:#D4541E;        /* was signal amber; PAPER has one accent */

  --r:16px;             /* one radius */
  --r-pill:999px;
  --shadow:0 1px 2px rgba(18,16,14,.04), 0 14px 44px -14px rgba(18,16,14,.13);
  --shadow-sm:0 1px 2px rgba(18,16,14,.04), 0 6px 18px -8px rgba(18,16,14,.10);
}
/* Light only, deliberately.
   A dark inverse was written and removed: the complaint that produced PAPER was that the
   site read as unchanged, and the thing it had been was dark. Showing a dark page to
   anyone whose OS prefers dark would reproduce exactly that impression on the audience
   most likely to form it. The palette below is warm enough to read comfortably at night;
   if a dark mode is wanted later it needs to be designed and looked at, not inferred. */

html { -webkit-text-size-adjust:100%; scrollbar-color: var(--line) transparent; }
body { margin:0; background:var(--paper); color:var(--ink);
       font:400 18px/1.65 var(--sans); letter-spacing:-.005em; overflow-x:hidden; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* hidden has to mean hidden. `.linklike` and `.btn` set display, and a class selector
   beats the user-agent's `[hidden] { display:none }` — so the scanner's cancel link was
   on screen at all times, next to a progress bar that was not running. */
[hidden] { display:none !important; }

/* Screen-reader-only. The file input is operated through its <label class="btn">; leaving
   the native control visible put "Choose File / No file chosen" — unstyled Windows chrome
   — in the middle of the page's most important panel. */
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
      overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* ── shell ─────────────────────────────────────────────────────────────────────────── */
/* One measure for the whole site. 1180 was set when a 20rem rail lived beside the text;
   without it, prose ran to 1180px and read like a terms-of-service page. */
/* .wrap centres; .page does not. A band that changes the ground has to reach both edges of
   the window, and while .page carried the shell width every band stopped short of it and
   read as a grey rectangle sitting in the page rather than a change of ground. */
.wrap { width:min(72rem, 100% - 3rem); margin-inline:auto; }
@media (max-width: 40rem) { .wrap { width:min(72rem, 100% - 1.75rem); } }

/* ── nav ───────────────────────────────────────────────────────────────────────────── */
/* Sticky, because the page is long and the one action lives at the top. It has no border:
   the shadow appears only once you have scrolled past the opening, so at rest the bar is
   invisible and the page still starts with paper. */
nav { position:sticky; top:0; z-index:40; padding:var(--s2) 0;
      background:color-mix(in srgb, var(--paper) 86%, transparent);
      -webkit-backdrop-filter:blur(14px) saturate(1.6);
      backdrop-filter:blur(14px) saturate(1.6);
      transition:box-shadow .3s ease; }
nav.stuck { box-shadow:0 1px 0 rgba(18,16,14,.05), 0 18px 40px -34px rgba(18,16,14,.9); }
nav .wrap { display:flex; align-items:center; gap:var(--s2) var(--s4); flex-wrap:wrap; }
/* The wordmark carries the product's own gesture: the name is marked the way a match is
   marked. It is the one place the identity is stated, so it is stated at size. */
.brand { display:inline-flex; align-items:center; font-family:var(--display); font-weight:600;
         font-size:1.5rem; line-height:1; letter-spacing:-.035em; color:var(--ink);
         text-decoration:none; margin-right:auto; padding:.3rem 0; }
.brand span { background-image:linear-gradient(var(--accent-wash), var(--accent-wash));
              background-repeat:no-repeat; background-position:0 100%;
              background-size:100% .34em; padding:0 .12em .04em; }
nav a:not(.brand):not(.cta) { font-size:.92rem; color:var(--dim); text-decoration:none;
        padding:.4rem 0; transition:color .15s; white-space:nowrap; }
nav a:not(.brand):not(.cta):hover, nav a[aria-current] { color:var(--ink); }
/* The action follows you down the page. It hides only while the nav is still over the
   opening, where the same button is already on screen at full size — so the default is
   visible, and a page with no script (every page but the front one) shows it correctly
   without needing one. */
nav .cta { font-size:.9rem; padding:.62rem 1.15rem; min-height:0;
           transition:opacity .3s ease, transform .3s ease, background .15s ease; }
nav.at-top .cta { opacity:0; transform:translateY(-6px); pointer-events:none; }
@media (max-width: 61rem) { nav .cta { display:none; } }

/* ── type ──────────────────────────────────────────────────────────────────────────── */
h1 { font-family:var(--display); font-weight:600; margin:0;
     font-size:clamp(2.6rem, 6.4vw, 5.2rem); line-height:.98; letter-spacing:-.042em;
     max-width:16ch; }
h2 { font-family:var(--display); font-weight:600; margin:0;
     font-size:clamp(1.9rem, 3.6vw, 2.7rem); line-height:1.1; letter-spacing:-.03em;
     max-width:22ch; }
h3 { font-family:var(--display); font-weight:600; margin:0;
     font-size:1.18rem; line-height:1.3; letter-spacing:-.018em; }
p { margin:0 0 var(--s2); }
p:last-child { margin-bottom:0; }

.kicker, .eyebrow { font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
                    text-transform:uppercase; color:var(--dim); margin:0 0 var(--s2);
                    display:block; }
.kicker::before { content:none; }        /* the old rule-dash is gone with the rules */
.sub, .lede, .says, .says-what {
  color:var(--dim); max-width:52ch; margin:var(--s2) 0 0;
  font-size:clamp(1.02rem, 1.4vw, 1.15rem); line-height:1.6;
}
.says-what, .says { color:var(--ink); font-size:clamp(1.12rem,1.7vw,1.35rem); max-width:48ch; }
strong, b { font-weight:500; }
code, .mono { font-family:var(--mono); font-size:.86em; }

/* ── section rhythm — the whole point ──────────────────────────────────────────────── */
section { padding:var(--s4) 0; border:0; }
section.band { background:var(--wash); }
header.hero, .hero { padding:var(--s5) 0 var(--s4); }

/* ── actions ───────────────────────────────────────────────────────────────────────── */
.cta, .btn.primary {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--ink); color:var(--paper); font-family:var(--display); font-weight:600;
  font-size:1.02rem; letter-spacing:-.01em; padding:1.05rem 1.8rem;
  border:0; border-radius:var(--r-pill); text-decoration:none; cursor:pointer;
  min-height:52px; transition:transform .15s ease, background .15s ease;
}
.cta:hover, .btn.primary:hover { transform:translateY(-2px); background:var(--accent); }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--ink); font-family:var(--sans); font-weight:500;
  font-size:.98rem; padding:.9rem 1.5rem; border:0; border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm); text-decoration:none; cursor:pointer; min-height:48px;
  transition:transform .15s ease;
}
.btn:hover { transform:translateY(-2px); }
.linklike { background:none; border:0; padding:0; font:inherit; color:var(--dim);
            text-decoration:underline; text-underline-offset:3px; cursor:pointer;
            min-height:44px; display:inline-flex; align-items:center; }
.linklike:hover { color:var(--ink); }
.ghost { color:var(--dim); text-decoration:underline; text-underline-offset:4px;
         text-decoration-color:var(--line); }
.ghost:hover { color:var(--ink); text-decoration-color:var(--ink); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s3); }

/* ── form controls ─────────────────────────────────────────────────────────────────── */
/* Everything the operating system draws for us is drawn here instead. A raw <select> and
   a raw file input in the middle of the instrument were the two loudest pieces of
   somebody else's design on the page. */
.field { display:inline-flex; position:relative; }
.field select {
  appearance:none; -webkit-appearance:none;
  font:500 .95rem/1 var(--sans); letter-spacing:-.01em; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.85rem 2.9rem .85rem 1.2rem; min-height:48px; cursor:pointer; width:100%;
  box-shadow:var(--shadow-sm); transition:border-color .15s ease;
}
.field select:hover { border-color:var(--dim); }
/* The chevron, drawn rather than fetched: two borders on a rotated square, so it inherits
   the ink colour and costs no request. */
.field::after { content:""; position:absolute; right:1.15rem; top:calc(50% - .28rem);
                width:.42rem; height:.42rem; pointer-events:none;
                border-right:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim);
                transform:rotate(45deg); }

progress { appearance:none; -webkit-appearance:none; display:block; width:100%; height:5px;
           border:0; border-radius:var(--r-pill); background:var(--wash);
           margin:var(--s3) 0 0; overflow:hidden; }
progress::-webkit-progress-bar { background:var(--wash); }
progress::-webkit-progress-value { background:var(--accent); transition:width .15s linear; }
progress::-moz-progress-bar { background:var(--accent); }

/* ── surfaces ──────────────────────────────────────────────────────────────────────── */
.card, .chart-card, .guide-film, .tool {
  background:var(--white); border:0; border-radius:var(--r); box-shadow:var(--shadow);
}
.card { padding:clamp(1.75rem, 4vw, var(--s5)); }
/* The panel had a background and a shadow and no padding at all, so every line of the
   scanner — and the entire report it renders — ran edge to edge and out the right side.
   That single missing declaration is most of what read as "clustered". */
.tool { padding:clamp(1.25rem, 3vw, var(--s4)); }

/* The dropzone is the one element on the site that earns a border: a drop target has to
   look like it has an edge you can drop something inside. Dashed, tinted, and it fills
   with the accent the instant a file is over it. */
.drop { background:var(--wash); border-radius:var(--r);
        border:2px dashed color-mix(in srgb, var(--accent) 30%, var(--line));
        padding:clamp(1.5rem, 4vw, var(--s5)) var(--s3); text-align:center;
        transition:border-color .2s ease, background .2s ease; }
.drop.over { border-color:var(--accent); background:var(--accent-soft); }
.drop:focus-within { border-color:var(--accent); }
.drop strong { display:block; font-family:var(--display); font-weight:600;
               font-size:1.15rem; letter-spacing:-.02em; }
.drop p { margin:var(--s1) auto 0; max-width:44ch; font-size:.92rem; color:var(--dim); }
.drop .btns { display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center;
              margin-top:var(--s3); }
.drop .samplelink { margin-top:var(--s2); font-size:.9rem; }

/* ── evidence ──────────────────────────────────────────────────────────────────────── */
.tag, .illus { display:inline-block; font-family:var(--mono); font-size:.7rem;
               letter-spacing:.15em; text-transform:uppercase; color:var(--accent-ink);
               background:var(--accent-soft); padding:.4rem .75rem;
               border:0; border-radius:var(--r-pill); }
.specimen, .quote { font-size:clamp(1.15rem, 2vw, 1.5rem); line-height:1.55; max-width:56ch;
                    letter-spacing:-.012em; margin:var(--s3) 0 0; }
/* The one highlight, and the site's only real gesture: the matched words are struck the
   way a reader strikes them, not filled the way a form field is. box-decoration-break
   keeps it intact when a match wraps — without it the span is painted once across the
   whole run and the second line gets a stray tail. */
mark, .specimen mark, .quote em {
  font-style:normal; background:linear-gradient(transparent 60%, var(--accent-wash) 60%);
  background-repeat:no-repeat; background-size:100% 100%;
  color:inherit; border:0; padding-bottom:.05em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.found, .meta { margin-top:var(--s3); font-family:var(--mono); font-size:.78rem;
                color:var(--dim); border:0; padding:0;
                display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); }
.found b, .meta b { color:var(--accent-ink); font-weight:400; }

/* ── the assurance line ────────────────────────────────────────────────────────────── */
.assurance, .promise, .stamp {
  display:inline-flex; align-items:center; gap:.55rem; margin-top:var(--s3);
  font-size:.92rem; color:var(--dim); font-family:var(--sans);
  background:none; border:0; padding:0;
}
.dot, .pip { width:.5rem; height:.5rem; border-radius:var(--r-pill);
             background:var(--ok); flex:none; }

/* ── grids: separated by space, never by rules ─────────────────────────────────────── */
/* 18rem, not 15: at 15 a 72rem shell fits four tracks, and four tracks of a hundred and
   fifty words each is a column of single words. Three is the most this measure holds.
   align-items:start is the important one. A grid row stretches every cell to the tallest,
   so a five-line card beside a fifteen-line card was a surface with four hundred and fifty
   pixels of nothing inside it — the biggest single hole on the site, and on the page whose
   whole job is to be read carefully. Height follows content now. A ragged bottom edge of a
   line or two reads as text; a hole never reads as anything but a mistake. */
.steps, .flow, .facts, .grid, .statgrid {
  display:grid; gap:var(--s3); margin-top:var(--s3);
  grid-template-columns:repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  align-items:start;
  border:0;
}
.statgrid { grid-template-columns:repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.step, .fact { padding:0; border:0; }
.step + .step, .fact + .fact { border:0; padding-left:0; }
/* The step numeral is the only .num that is coloured. Every figure in every table also
   carries this class, so the accent — which is supposed to mean "this is evidence" — was
   painting every digit on the site and meaning nothing. */
.step .n { font-family:var(--mono); font-size:.72rem; color:var(--dim);
           margin-bottom:var(--s2); letter-spacing:.14em; text-transform:uppercase; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.step h3 { margin:0 0 var(--s1); }
.step p { margin:0; color:var(--dim); font-size:1rem; }
.fact b, .stat b { display:block; font-family:var(--display); font-weight:600;
                   font-size:clamp(2rem, 4vw, 2.9rem); letter-spacing:-.035em; line-height:1; }
.fact span, .stat span { display:block; margin-top:var(--s1); font-size:.92rem; color:var(--dim); }

/* ── the film ──────────────────────────────────────────────────────────────────────── */
/* The intro is a dark film on a paper page, and pasted flat it read as a black rectangle
   somebody forgot to style. It is now mounted: a deep plate with the film inset in it, so
   the darkness is the screen rather than a hole in the page. */
.guide-film { overflow:hidden; margin:var(--s3) auto 0; max-width:54rem; background:var(--ink);
              padding:clamp(.5rem, 1.4vw, .85rem); border-radius:calc(var(--r) + 6px);
              box-shadow:0 2px 4px rgba(18,16,14,.06), 0 40px 80px -40px rgba(18,16,14,.55); }
.guide-film video { display:block; width:100%; height:auto; background:#000;
                    border-radius:calc(var(--r) - 4px); }
.guide-film figcaption { margin:var(--s2) .25rem 0; font-family:var(--mono); font-size:.7rem;
                         letter-spacing:.14em; text-transform:uppercase;
                         color:color-mix(in srgb, var(--paper) 55%, transparent); }

/* ── motion ────────────────────────────────────────────────────────────────────────── */
/* Two gestures, both borrowed from what the tool does. Content SETTLES — it arrives from
   below and stops, the way a reading settles — and the highlight STRIKES: every marked
   run sweeps left to right, which is the single thing this product does, performed on
   every page that shows a match.
   All of it is keyed on `.js`, so a page whose script never ran shows the finished state
   instead of blank paper, and all of it is inside prefers-reduced-motion: no-preference.
   screen-scoped as well: print never scrolls, and a print reveal prints empty pages. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity:0; transform:translateY(18px);
                transition:opacity .7s cubic-bezier(.2,.7,.3,1),
                           transform .7s cubic-bezier(.2,.7,.3,1); }
  .js .reveal.in { opacity:1; transform:none; }
  /* Children stagger behind their parent so a section arrives as a sequence, not a slab. */
  .js .reveal > * { opacity:0; transform:translateY(10px);
                    transition:opacity .55s ease-out, transform .55s ease-out; }
  .js .reveal.in > * { opacity:1; transform:none; }
  .js .reveal.in > :nth-child(1) { transition-delay:.02s; }
  .js .reveal.in > :nth-child(2) { transition-delay:.09s; }
  .js .reveal.in > :nth-child(3) { transition-delay:.16s; }
  .js .reveal.in > :nth-child(4) { transition-delay:.23s; }
  .js .reveal.in > :nth-child(n+5) { transition-delay:.3s; }

  /* The strike. Drawn as a background image so its width can animate; it ends on exactly
     the state a reduced-motion reader gets from the first frame. Opt-in per container —
     a `mark` outside one keeps the static highlight, so no highlight can be left at zero
     width by a container that never gets its class. */
  .js .reveal mark, .js .strike mark {
    background-image:linear-gradient(transparent 60%, var(--accent-wash) 60%);
    background-repeat:no-repeat; background-size:0 100%;
    transition:background-size .6s cubic-bezier(.3,.8,.3,1) .25s; }
  .js .reveal.in mark, .js .strike.struck mark { background-size:100% 100%; }
  .js .brand span { background-size:0 .34em;
                    transition:background-size .7s cubic-bezier(.3,.8,.3,1) .35s; }
  .js.ready .brand span { background-size:100% .34em; }

  .cta:active, .btn:active { transform:translateY(0) scale(.985); }
}

/* ── tables (registry) ─────────────────────────────────────────────────────────────── */
.scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.92rem; }
th, td { text-align:left; padding:.85rem 1rem .85rem 0; vertical-align:top; }
thead th { font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
           text-transform:uppercase; color:var(--dim); font-weight:400; white-space:nowrap; }
tbody tr + tr td { border-top:1px solid var(--line); }   /* the one place a rule earns it */
td.num, td .mono { font-family:var(--mono); }

/* ── code and receipts ─────────────────────────────────────────────────────────────── */
pre { font-family:var(--mono); font-size:.8rem; line-height:1.6; background:var(--wash);
      border:0; border-radius:var(--r); padding:var(--s3); overflow-x:auto;
      white-space:pre-wrap; word-break:break-word; }

/* ── the pull quote ────────────────────────────────────────────────────────────────── */
.punch, .landmark {
  margin:var(--s4) 0; padding:0; border:0;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem, 3.2vw, 2.2rem); line-height:1.25; letter-spacing:-.028em;
  max-width:26ch; color:var(--ink);
}

/* The footer was `display:flex` over a run of inline prose. Every text node between the
   tags became its own flex item and took a 2.5rem gap, so a sentence about where the
   numbers come from was dealt out across the page in pieces, out of reading order. It is
   a block of text; it is laid out as one. */
footer { padding:var(--s5) 0 var(--s4); color:var(--dim); font-size:.9rem; border:0;
         background:var(--wash); margin-top:var(--s5); }
footer .wrap { display:grid; gap:var(--s4) var(--s5); align-items:start;
               grid-template-columns:minmax(0,1fr); }
@media (min-width: 52rem) { footer .wrap { grid-template-columns:1.2fr 1fr 1fr; } }
footer h2 { font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; font-weight:400;
            text-transform:uppercase; color:var(--dim); margin:0 0 var(--s2); }
footer p { margin:0 0 var(--s1); line-height:1.6; }
footer a { color:var(--dim); text-decoration:underline; text-underline-offset:3px;
           text-decoration-color:var(--line); transition:color .15s; }
footer a:hover { color:var(--ink); text-decoration-color:var(--ink); }
footer .foot-brand { font-family:var(--display); font-weight:600; font-size:1.3rem;
                     letter-spacing:-.03em; color:var(--ink); margin:0 0 var(--s2); }
footer code, footer .mono { font-family:var(--mono); font-size:.78rem; color:var(--ink);
                            overflow-wrap:anywhere; }
footer ul { list-style:none; margin:0; padding:0; }
footer li { margin-bottom:.35rem; }

@media (pointer: coarse) { nav a { padding:.7rem 0; } }

/* ── the phone ─────────────────────────────────────────────────────────────────────────
   Not a shrink of the desktop page. The spacing scale is a physical measure, so a step
   that reads as generous across 1440px of paper reads as an empty screen across 390 —
   --s5 above and below every section is 112px of nothing on a device where the whole
   viewport is 844. Every step below is one notch down, the type is one notch down, and
   the touch targets are one notch UP, which is the part a pure shrink gets backwards. */
@media (max-width: 48rem) {
  body { font-size:17px; }
  section { padding:var(--s3) 0; }
  header.hero, .hero { padding:var(--s4) 0 var(--s3); }
  .steps, .flow, .facts, .grid, .statgrid { gap:var(--s2); margin-top:var(--s3); }
  .card { padding:var(--s3); }
  .tool { padding:var(--s3); }
  .drop { padding:var(--s4) var(--s2); }
  .guide-film { padding:.35rem; margin-top:var(--s3); }
  .punch, .landmark { margin:var(--s3) 0; font-size:clamp(1.35rem, 6vw, 1.9rem); }
  footer { padding:var(--s4) 0 var(--s3); margin-top:var(--s4); }
  footer .wrap { gap:var(--s3); }
  pre { font-size:.72rem; padding:var(--s2); }
  th, td { padding:.6rem .7rem .6rem 0; }
  /* A record that scrolls sideways needs to look like it does. */
  .scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Seven links wrapped to three lines on a 390px phone, pushing the headline most of a
   screen down. Tighter type and gap fits them without hiding anything: a nav that drops
   links on mobile is a nav that decides for the visitor which pages matter. */
@media (max-width: 34rem) {
  nav { padding:var(--s2) 0 .6rem; }
  nav .wrap { gap:.25rem var(--s3); }
  nav a:not(.brand) { font-size:.84rem; padding:.3rem 0; }
  .brand { width:100%; margin-bottom:.15rem; font-size:1.35rem; }
  /* One thumb, one column. Two pill buttons side by side at 342px leaves each of them
     narrower than the words inside it. */
  .btns, .actions { flex-direction:column; align-items:stretch; gap:var(--s2); }
  .btns .btn, .btns .cta, .actions .btn, .actions .cta { width:100%; }
  .cta, .btn.primary { padding:1rem 1.4rem; font-size:.98rem; }
  .wrap { width:min(72rem, 100% - 1.5rem); }
  .specimen, .quote { font-size:1.05rem; }
  .assurance, .promise, .stamp { align-items:flex-start; }
  .dot, .pip { margin-top:.42rem; }
}
@media print {
  :root { --paper:#fff; --white:#fff; --ink:#000; --dim:#444; --wash:#f4f4f4; }
  .card, .tool, .drop, .guide-film, .chart-card { box-shadow:none; border:1px solid #ddd; }
  nav, .cta, .btn { display:none; }
}