@layer reset, base, catalogue, product, responsive;
@layer catalogue {
/* Correctness only. Palette, type and spacing come from the site.
   Every interactive element here takes its height from the box rather than from
   inline padding: padding on a short nav link makes it paint past its <nav>,
   measured on the live site. */
.skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 20;
  padding: .65rem .9rem;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  width: min(100% - 2rem, 88rem);
  min-block-size: 5.5rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }

/* 44px minimum, from the box. WCAG 2.5.8 exempts an inline anchor inside a <p>
   or <li> and nothing else. */
.site-header nav a, .site-header .brand, footer a, footer .brand {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

footer {
  width: min(100% - 2rem, 88rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
}
.footer-links { display: flex; flex-wrap: wrap; align-items: start; gap: 1.4rem; }
.copyright { grid-column: 1 / -1; }

@media (max-width: 38rem) {
  .site-header { min-block-size: 4.5rem; }
  footer { grid-template-columns: 1fr; }
}

/* The art is sized against its own grid column, never the viewport. `47vw` is
   unrelated to the track it sits in; at 834px and 1280px it grew past the column
   and the hero's overflow clipped it. Firefox reported it, the other two engines
   hid it behind the same clip. */
.hero {
  width: min(100% - 2rem, 88rem);
  min-block-size: min(49rem, calc(100vh - 5.5rem));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr);
  align-items: center;
  gap: 2rem;
  overflow: hidden;
}
.hero-art { width: min(100%, 38rem); justify-self: center; }
.hero-art svg { overflow: visible; }

@media (max-width: 60rem) {
  .hero {
    grid-template-columns: 1fr;
    min-block-size: 0;
    padding-block-end: 2rem;
    text-align: start;
  }
  /* Copy first, art after. Caught by looking at the frame: with the art in row
     one it took the whole first screen of an iPhone and pushed the headline,
     the lead and the call to action below the fold -- the exact anti-pattern
     this block exists to prevent, in the block itself. It is decoration; it
     goes last and it shrinks first. */
  .hero-art { grid-row: 2; width: min(70vw, 26rem); justify-self: start; }
}
@media (max-width: 38rem) {
  /* Measured: a 3rem headline wrapped to three lines at 390px and pushed the
     whole page down with it. */
  .hero h1 { font-size: 2.5rem; }
  .hero-art { width: min(56vw, 15rem); }
}

.shield-rule { margin-block: clamp(1.5rem, 4vw, 2.5rem) 0; }
/* A thin ruled row rather than a strip of coloured pills: pills read as a
   free-plugin directory and undo the professionalism this row exists to carry.
   There is no hue in here at all. */
.shield-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}
@media (min-width: 48rem) {
  .shield-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
}
/* Every shield is a link, so every shield is a control: 44px is the floor and
   60px is what two lines of label and proof actually need. */
.shield {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 0 .55rem;
  min-block-size: 60px;
  block-size: 100%;
  padding-block: .6rem;
  text-decoration: none;
}
.shield-mark { grid-row: 1 / 3; align-self: center; color: var(--ink-muted); }
.shield-label { line-height: 1.25; }
/* The single accent in the row is typographic: the one number the page measured
   about itself is the only thing set in full ink. */
.shield-label strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.shield-proof { color: var(--ink-muted); line-height: 1.3; }
.shield:hover .shield-label, .shield:focus-visible .shield-label { text-decoration: underline; text-underline-offset: .2em; }

/* The label IS the target, so it carries the size and the focus ring. */
.file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-block-size: 11rem;
  padding: 2rem 1.25rem;
  border: 2px dashed var(--line);
  border-radius: 1rem;
  text-align: center;
  cursor: pointer;
}
/* Visually hidden, never `display: none`: a hidden input is not focusable and
   the keyboard path disappears with it. */
.file-drop input[type="file"] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.file-drop:focus-within { border-color: var(--accent); outline: 3px solid var(--accent); outline-offset: 3px; }
.file-drop-mark svg { inline-size: 2rem; block-size: 2rem; }
.file-drop-hint { color: var(--ink-muted); font-size: .88rem; }
/* Set by script while a drag is over the zone. Pointer-based, so it simply
   never fires on touch -- which is why it can only ever be an enhancement. */
.file-drop.is-dragging { border-color: var(--accent); border-style: solid; }

.file-drop-list { margin-block-start: 1rem; padding: 0; list-style: none; }
.file-drop-list li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; border-block-end: 1px solid var(--line); }
.file-drop-list .size { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* The form is the layout. `form-heading` spans every column so the title reads
   as the form's own header rather than a separate section above it. */
.tool-section {
  position: relative;
  isolation: isolate;
  padding: clamp(5rem, 10vw, 9rem) max(1rem, calc((100vw - 88rem) / 2));
  overflow: hidden;
}
.tool-form {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.4rem;
}
.form-heading { grid-column: 1 / -1; max-width: 49rem; margin-block-end: 2.1rem; }
.form-action { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; margin-block-start: 1.2rem; }
/* Reserve the message line so showing it never moves the button. */
.form-error { min-block-size: 1.5rem; }

fieldset { min-inline-size: 0; }

@media (max-width: 52rem) {
  .tool-form { grid-template-columns: 1fr; }
}

.progress-track {
  position: relative;
  block-size: .6rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.progress-fill {
  block-size: 100%;
  inline-size: var(--progress, 0%);
  border-radius: inherit;
  background: var(--accent);
  transition: inline-size .3s ease;
}
/* Indeterminate: set when the work cannot report a percentage.

   THIS SELECTOR USED TO BE THE VALUE SLOT ITSELF, and that was this block's own
   defect. Driving the sweep from a string in `aria-valuenow` means a meter that
   looks like it is working announces a value no assistive technology can read,
   and it contradicts the block's own min/max contract in the same breath. A
   visual state belongs in a data attribute; `aria-valuenow` stays a number for
   the whole life of the job. */
.progress-track[data-indeterminate="true"] .progress-fill {
  inline-size: 40%;
  animation: progress-sweep 1.2s ease-in-out infinite;
}
@keyframes progress-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}
.progress-status { min-block-size: 1.5rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Motion is the decoration, the number is the information. */
@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; animation: none; }
  .progress-track[data-indeterminate="true"] .progress-fill { inline-size: 100%; opacity: .4; }
}

.table-wrap { max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
table { inline-size: 100%; border-collapse: collapse; }
caption { text-align: start; color: var(--ink-muted); padding-block-end: .5rem; }
/* Cells WRAP. `white-space: nowrap` used to be set on every cell here, which is
   right for a figure and wrong for a sentence: it clipped a prose column behind
   the wrapper's own scrollbar at 390px AND at 1280px, so widening the window did
   not reveal it. A prose column generally does not belong in a table at all --
   but when one is there, the table must not hide it. */
th, td { padding: .7rem .9rem; text-align: start; border-block-end: 1px solid var(--line); }
/* Figures must not dance as they change, and columns must not resize per row, so
   `nowrap` belongs here: scoped to the cells that carry a measurement. */
td.figure, th.figure, .table-wrap .figure { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The card grid uses six tracks so five cards break 3 + 2 rather than leaving a
   hole in the second row. The border rules assume exactly five; adding or
   removing a card means revisiting them. */
.result { overflow: hidden; }
.result-intro { padding: clamp(1.5rem, 5vw, 3.5rem); }
.result-subject { margin-block: 1.4rem 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.score-wrap { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2rem; }

.result-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.result-grid article { grid-column: span 2; min-block-size: 15rem; padding: 2rem; }
.result-grid article:nth-child(4), .result-grid article:nth-child(5) { grid-column: span 3; }

.result-actions { padding: 1.2rem 2rem; display: flex; justify-content: space-between; gap: 1rem; }

@media (max-width: 48rem) {
  /* Stacked, the 3 + 2 spans stop meaning anything, and `span 2` against a
     single track would invent columns. Undo both at the same specificity. */
  .result-grid { grid-template-columns: 1fr; }
  .result-grid article,
  .result-grid article:nth-child(4),
  .result-grid article:nth-child(5) { grid-column: auto; min-block-size: auto; }
  .score-wrap { grid-template-columns: 1fr; }
  /* Long subjects wrap: two long names plus a mark between them do not fit a
     phone, and the type is already at its floor. */
  .result-subject { flex-direction: column; align-items: stretch; gap: .5rem; }
  .result-actions { flex-direction: column; }
}

/* Always open, always in flow. It borrows the page's own tokens rather than
   bringing colour of its own, because a panel that looks like a warning banner
   gets dismissed as one. */
.sf-limits {
  margin-block-start: 2.5rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--rule, #ddd);
  border-radius: 0.25rem;
  background: var(--paper-deep, #f2efe9);
}
.sf-limits__heading { margin-block-start: 0; font-size: 1.15rem; }
.sf-limits__list { margin: 0; padding-inline-start: 1.05rem; color: var(--ink-soft, #4a4a4a); }
.sf-limits__list > li { margin-block-end: 0.55rem; }

.download-shelf { display: grid; gap: .5rem; }
.download-link { inline-size: 100%; min-block-size: 44px; }
/* The file name lives here, not in the button's label. */
.download-meta { margin: 0; color: var(--ink-muted); text-align: center; overflow-wrap: anywhere; }
.download-heading { margin: 0; color: var(--ink-muted); }
/* Forty outputs must not own the page: the list scrolls inside its own box, the
   same answer `data-table` gives a wide table. */
.download-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-block-size: 16rem;
  overflow-y: auto;
}
.download-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-block-end: 1px solid var(--line); }
.download-list li:last-child { border-block-end: 0; }
.download-file { display: inline-flex; align-items: center; min-block-size: 44px; overflow-wrap: anywhere; }
.download-size { color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.download-empty { margin: 0; color: var(--ink-muted); }
.download-empty[hidden] { display: none; }

.row-list-panel { display: grid; gap: .4rem; }
.row-list-heading { margin: 0; }
/* Forty rows must not own the page. */
.row-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-block-size: 22rem; overflow-y: auto; }
.row-list li {
  display: flex;
  /* Measured at 320px: a name and a measurement that cannot share a line pushed
     the document 2px wider than the viewport. The measurement takes the next
     line instead. Never `flex: none` on the value -- that is the construction
     that spilled. */
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .1rem .75rem;
  padding-block: .45rem;
  border-block-end: 1px solid var(--line);
}
.row-list li:last-child { border-block-end: 0; }
/* The name is the part allowed to shrink and to break: file names have no
   spaces in them and a `1fr` track keeps a min-content floor unless told
   otherwise. */
.row-list li > :first-child { min-inline-size: 0; overflow-wrap: anywhere; }
.row-value {
  margin-inline-start: auto;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* `[hidden]` LOSES TO AN AUTHOR `display` AT EQUAL SPECIFICITY.
 *
 * The user-agent rule is `[hidden] { display: none }`. An author rule such as
 * `.card { display: grid }` has the SAME specificity (0,1,0) and comes from a
 * later origin, so the element stays on screen with the attribute set. The DOM
 * inspector shows `hidden`. Every unit test that reads the markup passes. It is
 * visible in the browser and nowhere else.
 *
 * That cost one site three separate defects in one build:
 *
 *   1. a page-range field with `display: grid` stayed on screen in "every page"
 *      mode, in all three engines, with `hidden` set;
 *   2. a featured card with `display: grid` stayed on screen in every filtered
 *      view that excluded it -- caught in the first phone screenshot, not by any
 *      test;
 *   3. a group heading with `display: block` re-declared inside
 *      `@media (min-width: 64rem)` stayed on screen under a filter, because the
 *      site-wide guard had EQUAL specificity and appeared EARLIER in the file.
 *
 * Number 3 is the one that makes this a stylesheet rather than a habit: writing
 * the guard once at the top does not survive a media query.
 *
 * This declaration is the whole fix, and `!important` is the point of it -- it
 * is the one place in a stylesheet where a blanket win is the correct answer,
 * because there is no legitimate reading of `hidden` other than "not rendered".
 * A site that prefers per-class guards may do that instead; the block's
 * invariants accept either, and require the LIST OF HIDEABLE CLASSES TO BE
 * ASSERTED BY NAME, because remembering it is what failed three times. */
[hidden] { display: none !important; }

/* The zero minimum is structural. Without it, a long token in an answer gives
   the grid item an intrinsic minimum wider than its column and the page grows
   beyond a phone viewport. */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-card, 1.25rem);
}
.faq-item { min-inline-size: 0; }
.faq-item p { overflow-wrap: anywhere; }

@media (max-width: 44rem) {
  .faq-list { grid-template-columns: minmax(0, 1fr); }
}

/* Legal pages are long prose; the only rule that keeps them correct is measure.
   Anything past ~70 characters a line becomes unreadable, and these are the
   pages a reviewer actually reads. */
.legal-page { max-inline-size: 44rem; }
.legal-page h2 { margin-block-start: 2.5rem; }
.legal-page p + p { margin-block-start: 1rem; }

/* 44px is the documented minimum. Inline anchors inside a <p> or <li> are
   exempt (WCAG 2.5.8) because padding them wrecks the surrounding line height. */
.text-button, nav a, footer a {
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}

/* Font pairings that survive 320px and need no web font to look deliberate.
   System stacks on purpose: a webfont on a tool page costs the first paint the
   visitor came for, and every one of these renders on iOS and Android already.

   Pick one set. `--display` carries the personality, `--ui` carries the work. */

/* editorial -- esoteric, psychometrics: an old-style serif against a neutral UI */
.type-editorial {
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-tracking: -.04em;
}
/* technical -- converters, upscalers: one family, tight, no ornament */
.type-technical {
  --display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display-tracking: -.02em;
}
/* ledger -- finance, documents: figures must align, so the numeric face matters */
.type-ledger {
  --display: ui-serif, Georgia, "Times New Roman", serif;
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --numeric: ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-tracking: -.01em;
}
/* Figures in tables and results must not dance as they change. */
.type-ledger .figure, .figure { font-variant-numeric: tabular-nums; }

/* Per-vertical schemes. Divergence is the product: a fleet that shares one look
   reads as spam, to people and to reviewers. Pick one set, then let the site
   diverge further.

   Every set defines the same names, so blocks never learn a site's colours. */

/* esoteric -- atmospheric, dark, warm accent against violet */
.palette-esoteric {
  --ink: #f8f0e7; --ink-muted: #bcb1c5;
  --surface: #17131f; --surface-deep: #0e0b14; --panel: #211a2b;
  --line: rgba(248, 240, 231, .14);
  --accent: #ff806a; --accent-bright: #ff9b86; --highlight: #f2d89c;
  --bg-a: rgba(255,128,106,.17); --bg-b: rgba(155,134,255,.16); --bg-c: rgba(242,216,156,.11);
  --bg-line: rgba(255,255,255,.025);
}
/* utilitarian -- converters, upscalers: light, fast, no atmosphere */
.palette-utility {
  --ink: #101418; --ink-muted: #5b6673;
  --surface: #ffffff; --surface-deep: #f4f6f8; --panel: #ffffff;
  --line: rgba(16, 20, 24, .12);
  --accent: #1f6feb; --accent-bright: #3b82f6; --highlight: #0ea5e9;
  --bg-a: rgba(31,111,235,.06); --bg-b: rgba(14,165,233,.05); --bg-c: transparent;
  --bg-line: rgba(16,20,24,.035);
}
/* data-dense -- finance: high contrast, restrained, numbers first */
.palette-data {
  --ink: #0b0f14; --ink-muted: #59636e;
  --surface: #f7f9fb; --surface-deep: #eef2f6; --panel: #ffffff;
  --line: rgba(11, 15, 20, .14);
  --accent: #0f766e; --accent-bright: #14b8a6; --highlight: #b45309;
  --bg-a: rgba(15,118,110,.05); --bg-b: transparent; --bg-c: transparent;
  --bg-line: rgba(11,15,20,.04);
}
/* documents -- invoices, quotes: clean, printable, trustworthy */
.palette-document {
  --ink: #1a1a1a; --ink-muted: #6b6b6b;
  --surface: #fbfaf7; --surface-deep: #f3f1ec; --panel: #ffffff;
  --line: rgba(26, 26, 26, .13);
  --accent: #1d4ed8; --accent-bright: #2563eb; --highlight: #92400e;
  --bg-a: rgba(29,78,216,.04); --bg-b: transparent; --bg-c: transparent;
  --bg-line: rgba(26,26,26,.03);
}

}
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; }
  img, svg { display: block; max-inline-size: 100%; }
  button, input, select { font: inherit; }
  [hidden] { display: none !important; }
}

@layer base {
  .palette-meterproof {
    --ink: #0b1720;
    --ink-soft: #334b55;
    --ink-muted: #50666e;
    --surface: #f7f8f3;
    --paper: #ffffff;
    --line: #c7d3d0;
    --accent: #007f6e;
    --accent-deep: #005f53;
    --signal: #16b896;
    --warning: #8a5600;
    --danger: #a62f35;
    --good: #176b48;
  }
  .type-meterproof { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  body { background: var(--surface); color: var(--ink); font-size: 1rem; line-height: 1.6; }
  h1, h2, h3, p { margin-block-start: 0; }
  h1, h2, h3 { letter-spacing: -.025em; line-height: 1.06; }
  h1 { max-inline-size: 17ch; font-size: clamp(2.45rem, 7vw, 5.1rem); }
  h2 { font-size: clamp(1.8rem, 4vw, 3.1rem); }
  h3 { font-size: 1.2rem; }
  a { color: var(--accent-deep); text-underline-offset: .18em; }
  code, .receipt-line, .receipt-total b, .verdict-card strong, .metric-grid strong, .finding-card dd, td:nth-child(n+3) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; }
  table, .eyebrow, .receipt-kicker { font-variant-numeric: tabular-nums; }
  code { overflow-wrap: anywhere; }
}

@layer product {
  .site-header, main, footer { inline-size: min(100% - 1rem, 1180px); margin-inline: auto; }
  .site-header { min-block-size: 4.75rem; padding-block: .8rem; border-block-end: 1px solid var(--line); gap: .35rem; }
  .site-header nav { min-inline-size: 0; display: flex; gap: .1rem; overflow-x: auto; scrollbar-width: none; }
  .site-header nav a { min-block-size: 44px; padding: .55rem .55rem; display: inline-flex; align-items: center; white-space: nowrap; color: var(--ink-soft); text-decoration: none; font-size: .875rem; }
  .brand { gap: .65rem; font-weight: 760; letter-spacing: -.03em; text-decoration: none; color: var(--ink); }
  .brand-mark { position: relative; inline-size: 2rem; block-size: 2rem; border-radius: .55rem; background: var(--ink); display: grid; align-content: center; gap: .2rem; padding: .4rem; }
  .brand-mark i { block-size: .12rem; border-radius: 1rem; background: #d5f6ed; }
  .brand-mark i:nth-child(2) { inline-size: 70%; }
  .brand-mark b { position: absolute; inline-size: .38rem; block-size: .38rem; inset: 50% .32rem auto auto; translate: 0 -50%; border-radius: 50%; background: var(--signal); }
  .button { min-block-size: 46px; border-radius: .55rem; border: 1px solid transparent; padding: .68rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 720; text-decoration: none; cursor: pointer; }
  .button-primary { color: #fff; background: var(--ink); box-shadow: 0 .45rem 1rem rgb(11 23 32 / .14), inset 0 1px 0 rgb(255 255 255 / .16); }
  .button-primary:hover { background: #17323f; }
  .button-secondary { color: var(--ink); background: var(--paper); border-color: var(--line); }
  .button-quiet { color: var(--ink-soft); background: transparent; border-color: var(--line); }
  .button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
  .button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
  .eyebrow { margin-block-end: .7rem; color: var(--accent-deep); font-size: .72rem; font-weight: 850; letter-spacing: .16em; }
  .lead, .hero-lead, .legal-lead { color: var(--ink-soft); font-size: clamp(1.08rem, 2.2vw, 1.35rem); max-inline-size: 66ch; }

  .hero { position: relative; padding-block: clamp(2rem, 5vw, 4.4rem); display: grid; gap: 2rem; align-items: center; }
  .hero::before { content: ""; position: absolute; inset: 1rem 0; pointer-events: none; opacity: .28; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 2.5rem 2.5rem; -webkit-mask-image: linear-gradient(to right, #000, transparent 74%); mask-image: linear-gradient(to right, #000, transparent 74%); }
  .hero > * { position: relative; }
  .hero-copy { min-inline-size: 0; }
  .hero-lead { max-inline-size: 60ch; }
  .hero-actions, .action-row, .downloads { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
  .proof-row { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
  .proof-row li { padding: .38rem .65rem; border: 1px solid var(--line); border-radius: 100px; background: color-mix(in srgb, var(--paper) 75%, transparent); color: var(--ink-soft); font-size: .83rem; }
  .proof-row li::before { content: "✓"; color: var(--accent); margin-inline-end: .35rem; font-weight: 900; }
  .hero-receipt { position: relative; padding: 1.15rem; background: var(--ink); color: #e9f8f4; border-radius: 1rem; box-shadow: .55rem .55rem 0 #c9e8df; overflow: hidden; }
  .hero-receipt::after { content: ""; position: absolute; inset: auto -4rem -5rem auto; inline-size: 10rem; block-size: 10rem; border: 1rem solid color-mix(in srgb, var(--signal) 28%, transparent); border-radius: 50%; }
  .hero-receipt > div { position: relative; z-index: 1; }
  .receipt-head, .receipt-line, .receipt-columns, .receipt-total { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, .9fr)); gap: .5rem; align-items: center; }
  .receipt-line > *, .receipt-columns > * { min-inline-size: 0; overflow-wrap: anywhere; }
  .receipt-head { display: flex; justify-content: space-between; gap: .5rem; color: #9ec0b9; font-size: .72rem; }
  .receipt-columns { margin-block-start: .75rem; padding-block: .45rem; border-block: 1px solid #34505a; color: #86a69f; font-size: .62rem; text-transform: uppercase; }
  .receipt-line { padding-block: .65rem; border-block-end: 1px solid #263f49; font-size: .75rem; }
  .receipt-line b { font-size: .78rem; }
  .receipt-line strong { color: #ffd591; text-align: end; }
  .receipt-total { grid-template-columns: 1fr auto; padding-block-start: .9rem; }
  .receipt-total b { color: #d5f6ed; font-size: 1.05rem; }
  .hero-receipt span { color: #a9c6c0; }
  .hero-receipt p { margin: .8rem 0 0; color: #c8e1dc; }
  .receipt-kicker { display: block; margin-block-end: .7rem; color: var(--signal) !important; font-size: .7rem; letter-spacing: .13em; }

  .workspace { margin-block: 1rem 4rem; padding: clamp(1.1rem, 3vw, 2.2rem); border: 1px solid #9db0ad; border-radius: 1rem; background: var(--paper); box-shadow: 0 1rem 3rem rgb(11 23 32 / .07); }
  .workspace > header { display: grid; gap: .2rem; margin-block-end: 1.4rem; }
  .workspace > header h2 { max-inline-size: 18ch; margin-block-end: .2rem; }
  .workspace > header p:last-child { color: var(--ink-soft); max-inline-size: 65ch; }
  .file-grid { display: grid; gap: .8rem; }
  .starter-kit { margin-block-end: 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: #f7faf7; display: grid; gap: 1rem; }
  .starter-kit p, .starter-kit strong { margin-block: .25rem 0; display: block; }
  .feature-tag { color: var(--accent-deep); font-size: .7rem; font-weight: 850; letter-spacing: .1em; }
  .starter-links { display: grid; gap: .5rem; }
  .starter-links a { min-block-size: 56px; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--paper); display: grid; grid-template-columns: auto 1fr; gap: 0 .65rem; align-items: center; text-decoration: none; }
  .starter-links a > span { grid-row: 1 / 3; color: var(--accent); font-weight: 800; }
  .starter-links small { color: var(--ink-muted); }
  .file-card { position: relative; min-block-size: 10rem; padding: 1rem; border: 1px solid #a5b8b4; border-radius: .75rem; background: #f1f6f2; display: flex; flex-direction: column; cursor: pointer; }
  .file-card:has(input:focus-visible) { outline: 3px solid var(--signal); outline-offset: 3px; }
  .file-card input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; clip-path: inset(50%); }
  .file-card strong { margin-block-start: auto; font-size: 1.05rem; }
  .file-card > span:not(.file-number) { color: var(--ink-soft); font-size: .84rem; }
  .file-card em { min-block-size: 44px; margin-block-start: .65rem; border-block-start: 1px solid var(--line); padding-block-start: .65rem; color: var(--accent-deep); font-style: normal; font-weight: 700; overflow-wrap: anywhere; }
  .file-number { color: #4d6963; font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
  .action-row { margin-block-start: 1.25rem; }
  .form-error { min-block-size: 1.6rem; margin: .75rem 0 0; color: var(--danger); font-weight: 650; }

  .mapping { margin-block-start: 1.5rem; border-block-start: 1px solid var(--line); padding-block-start: 1.5rem; }
  .mapping-head { display: grid; gap: .5rem; margin-block-end: 1rem; }
  .mapping-files { display: grid; gap: .65rem; }
  .mapping-file { border: 1px solid var(--line); border-radius: .7rem; background: #fbfcfa; overflow: hidden; }
  .mapping-file > summary { min-block-size: 64px; padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; }
  .mapping-file > summary span { min-inline-size: 0; display: grid; }
  .mapping-file > summary small { color: var(--ink-muted); overflow-wrap: anywhere; }
  .mapping-file > summary b { color: var(--accent-deep); font-size: .8rem; }
  .mapping-file[open] > summary { border-block-end: 1px solid var(--line); }
  .mapping-grid { display: grid; gap: .7rem; }
  .mapping-file .mapping-grid { padding: 1rem; }
  .mapping-grid label { display: grid; gap: .25rem; font-size: .8rem; color: var(--ink-soft); }
  .mapping-grid select { min-block-size: 46px; inline-size: 100%; border: 1px solid #91a7a3; border-radius: .4rem; padding: .55rem 2rem .55rem .6rem; appearance: none; background: var(--paper) linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 15px) 50% / 5px 5px no-repeat; color: var(--ink); }
  .source-preview { margin: 0 1rem 1rem; padding: .8rem; background: #eef3ef; border-radius: .5rem; }
  .preview-row { padding-block: .45rem; border-block-start: 1px solid var(--line); display: grid; gap: .15rem; }
  .preview-row span { color: var(--ink-muted); font-size: .72rem; }
  .preview-row code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; }

  .working { margin-block-start: 1.3rem; padding: 1.2rem; background: #eef8f5; border-radius: .7rem; }
  .progress-track { block-size: .65rem; overflow: hidden; border-radius: 2rem; background: #c9d9d5; }
  .progress-track span { display: block; inline-size: 42%; block-size: 100%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite alternate; }
  @keyframes pulse { to { inline-size: 82%; } }
  .result { margin-block-start: 1.5rem; border-block-start: 2px solid var(--ink); padding-block-start: 1.5rem; }
  .result-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; justify-content: space-between; }
  .result-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
  .verdict-grid { margin-block: 1rem; display: grid; gap: .65rem; }
  .verdict-card { padding: clamp(1rem, 2.5vw, 1.5rem); border-radius: .75rem; background: var(--ink); color: #e9f8f4; }
  .verdict-card > span { color: #9ec0b9; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
  .verdict-card strong { display: block; margin-block: .25rem .6rem; font-size: clamp(1.8rem, 4vw, 3rem); }
  .verdict-card p { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; color: #c8e1dc; }
  .metric-grid { margin-block: 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .metric-grid > div { min-inline-size: 0; padding: .8rem; background: #eef3ef; border-radius: .55rem; }
  .metric-grid span { display: block; color: var(--ink-muted); font-size: .75rem; }
  .metric-grid strong { display: block; overflow-wrap: anywhere; font-size: 1.25rem; }
  .table-wrap { max-inline-size: 100%; overflow: auto; border: 1px solid var(--line); border-radius: .6rem; background: var(--paper); }
  table { inline-size: 100%; min-inline-size: 850px; border-collapse: collapse; font-size: .87rem; }
  caption { padding: .8rem; text-align: start; color: var(--ink-soft); }
  th, td { padding: .7rem; border-block-start: 1px solid #dbe3e0; text-align: start; vertical-align: top; }
  th { background: #edf2ef; color: var(--ink-soft); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
  td small { display: block; color: var(--ink-muted); }
  .status { display: inline-flex; padding: .2rem .45rem; border-radius: 100px; font-size: .74rem; font-weight: 800; }
  .status-match { color: var(--good); background: #dcf4e7; }
  .status-difference { color: var(--warning); background: #fff0ce; }
  .status-blocked { color: var(--danger); background: #fde4e4; }
  .status-review { color: #6c4e00; background: #fff2bb; }
  details { margin-block-start: .4rem; }
  summary { min-block-size: 44px; display: flex; align-items: center; color: var(--accent-deep); cursor: pointer; }
  .downloads { margin-block-start: 1rem; }
  .limits { margin-block-start: 1rem; padding: 1rem; border-inline-start: .25rem solid var(--warning); background: #fff8e8; }
  .limits p { margin-block-end: 0; }

  .triage-desk { margin-block-start: 1.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
  .triage-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; align-items: end; }
  .triage-head h3 { margin: .25rem 0 0; font-size: 1.45rem; }
  .triage-head p { margin: 0; color: var(--ink-muted); }
  .status-filters { margin-block: 1rem; display: flex; gap: .35rem; overflow-x: auto; padding-block-end: .2rem; }
  .status-filters button { min-block-size: 44px; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 100px; background: var(--paper); color: var(--ink-soft); white-space: nowrap; cursor: pointer; }
  .status-filters button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
  .triage-fields { display: grid; gap: .65rem; margin-block-end: 1rem; }
  .triage-fields label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: .8rem; }
  .triage-fields input, .triage-fields select { inline-size: 100%; min-block-size: 46px; padding: .6rem .7rem; border: 1px solid #91a7a3; border-radius: .45rem; background: var(--paper); color: var(--ink); }
  .pagination { margin-block-start: .75rem; display: flex; justify-content: space-between; gap: .5rem; }
  .finding-cards { display: none; }
  .finding-card { padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--paper); }
  .finding-card + .finding-card { margin-block-start: .65rem; }
  .finding-card header { display: flex; justify-content: space-between; gap: .65rem; }
  .finding-card header div { min-inline-size: 0; display: grid; }
  .finding-card small { color: var(--ink-muted); overflow-wrap: anywhere; }
  .finding-card dl { margin: 1rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
  .finding-card dl div { min-inline-size: 0; padding: .55rem; background: #eef3ef; border-radius: .4rem; }
  .finding-card dt { color: var(--ink-muted); font-size: .68rem; }
  .finding-card dd { margin: .15rem 0 0; overflow-wrap: anywhere; font-size: .78rem; }
  .trace summary { min-block-size: 44px; font-weight: 700; }
  .trace > div { padding: .7rem; border-radius: .45rem; background: #f0f5f2; }
  .trace p { margin-block-end: 0; overflow-wrap: anywhere; }
  .trace-segment { margin-block-start: .75rem; padding-block-start: .75rem; border-block-start: 1px solid var(--line); }
  .trace-segment dl { margin: .4rem 0 0; display: grid; grid-template-columns: 1fr; gap: .45rem; }
  .trace-segment dl div { min-inline-size: 0; padding: 0; background: transparent; border-radius: 0; }
  .trace-segment dt { color: var(--ink-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
  .trace-segment dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
  .empty-findings { padding: 1rem; border: 1px dashed var(--line); border-radius: .6rem; text-align: center; }
  .visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

  .method-strip { margin-block: 4rem; padding-block: 2.2rem; border-block: 1px solid var(--line); display: grid; gap: 1.25rem; }
  .method-strip > header h2 { margin: 0; }
  .method-strip > div { display: grid; gap: .8rem; }
  .method-strip article { padding: 1.1rem; border-block-start: 2px solid var(--ink); }
  .method-strip span { color: var(--accent); font-weight: 850; }
  .method-strip h3 { margin-block: .75rem .5rem; font-size: 1.55rem; }
  .method-strip p { color: var(--ink-soft); }
  .local-proof { margin-block: 4rem; padding: clamp(1.2rem, 4vw, 2.5rem); border-radius: 1rem; background: #dff1eb; display: grid; gap: 1rem; }
  .local-proof h2 { max-inline-size: 19ch; }
  .local-proof p { max-inline-size: 60ch; }
  .local-proof > div:last-child { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
  .local-proof > div:last-child a { min-block-size: 44px; display: inline-flex; align-items: center; }
  .limits-band { margin-block: 4rem; max-inline-size: 900px; }
  .limits-band h2 { max-inline-size: 18ch; }
  .limits-band > p:last-child { max-inline-size: 72ch; color: var(--ink-soft); }
  .prose, .schema-block, .support-block { margin-block: 3rem; max-inline-size: 820px; }
  .prose p, .prose li, .schema-block > p, .support-block p { color: var(--ink-soft); }
  .page-intro { padding-block: clamp(2.5rem, 8vw, 6rem) 1rem; border-block-end: 1px solid var(--line); }
  .page-intro h1 { max-inline-size: 19ch; }
  .schema-block table { min-inline-size: 620px; }
  .schema-starter { margin-block: 3rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 1rem; background: #e6f3ee; }
  .schema-starter h2 { max-inline-size: 20ch; }
  .schema-cards { display: none; }
  .steps { padding-inline-start: 1.4rem; }
  .steps li { margin-block: .7rem; padding-inline-start: .45rem; }
  .code-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
  .code-grid code { padding: .35rem .55rem; border: 1px solid var(--line); background: var(--paper); border-radius: .35rem; }
  .legal-page { max-inline-size: 800px; padding-block: clamp(2.5rem, 8vw, 6rem); }
  .legal-page h1 { font-size: clamp(2.5rem, 7vw, 5rem); }
  .legal-updated { margin-block-start: 3rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); font-size: .85rem; color: var(--ink-muted); }
  footer { margin-block-start: 5rem; padding-block: 2rem 4rem; border-block-start: 1px solid var(--line); display: grid; gap: 1.2rem; }
  footer p { color: var(--ink-muted); }
  .footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
  .footer-links a { min-block-size: 44px; display: inline-flex; align-items: center; }
  .copyright { font-size: .8rem; }
}

@layer responsive {
  @media (max-width: 30rem) {
    .site-header nav a { padding-inline: .35rem; font-size: .875rem; }
  }
  @media (max-width: 22.5rem) {
    .site-header .brand > span:last-child { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .site-header { gap: .1rem; }
    .site-header nav { flex: 0 1 auto; }
    .hero-lead { font-size: 1rem; line-height: 1.5; }
    .hero-receipt { padding: .85rem; }
    .receipt-head { align-items: start; }
    .receipt-kicker { margin-block-end: 0; white-space: nowrap; font-size: .62rem; letter-spacing: .06em; }
    .receipt-columns, .receipt-line { grid-template-columns: minmax(0, 1.1fr) repeat(3, max-content); gap: .28rem; }
    .receipt-line b, .receipt-line strong { white-space: nowrap; font-size: .67rem; }
    .receipt-line code { font-size: .67rem; }
  }
  @media (max-width: 47.99rem) {
    .hero { padding-block-start: 1.7rem; }
    .hero-actions .button { inline-size: 100%; }
    .proof-row { margin-block-start: 1rem; }
    .receipt-columns, .receipt-line { font-size: .67rem; }
    .starter-kit { margin-inline: -.25rem; }
    .mapping-head > p { margin: 0; }
    .source-preview { display: none; }
    .finding-table { display: none; }
    .finding-cards { display: block; }
    .schema-table { display: none; }
    .schema-cards { display: grid; gap: .55rem; }
    .schema-cards article { padding: .9rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--paper); }
    .schema-cards header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
    .schema-cards header span { color: var(--accent-deep); font-size: .75rem; font-weight: 750; }
    .schema-cards p { margin: .45rem 0 0; color: var(--ink-soft); }
  }
  @media (min-width: 48rem) {
    .site-header { display: flex; justify-content: space-between; }
    .hero { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, .75fr); }
    .file-grid, .method-strip > div, .starter-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mapping-head { grid-template-columns: 1fr auto; }
    .mapping-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .triage-fields { grid-template-columns: minmax(0, 1.4fr) minmax(14rem, .6fr); }
    .local-proof { grid-template-columns: 1fr 1fr; }
    footer { grid-template-columns: 1fr 1.5fr; }
    footer .copyright { grid-column: 1 / -1; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }
}