@layer 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 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; }
}

/* Correctness only; the site owns colour, radius and typography. The label is
   the complete target and its 44px minimum comes from its box, not from a small
   radio padded beyond the layout. */
.choice-set {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.choice-set-options {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .5rem;
}
.choice-option {
  min-inline-size: 0;
  min-block-size: 44px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  cursor: pointer;
}
.choice-option input[type="radio"] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  accent-color: var(--accent);
}
.choice-option > :not(input) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.choice-option:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* WebKit will not give a <select> the height you ask for while it still owns
   the rendering. Measured on the catalogue proof page: `min-block-size: 3.4rem`
   was honoured in Chromium and Firefox and ignored in WebKit, which kept the
   native control under 44px on all eight phone descriptors -- the same class of
   defect as the date field, on the plainest control there is.
   `appearance: none` hands sizing back to CSS, and then the chevron has to be
   drawn, because removing the appearance removes the native one too. */
.select-field { position: relative; min-inline-size: 0; }
.select-field select {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
  min-block-size: 3.4rem;
  padding-inline: .85rem 2.1rem;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23888888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1rem;
  text-overflow: ellipsis;
  font: inherit;
}
/* The open list is drawn by the OS in the system palette; naming both keeps it
   readable on a dark page. */
.select-field option { background: var(--panel); color: var(--ink); }

/* Reserve the message line so showing it never moves the button. */
.form-error { min-block-size: 1.5rem; }

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb-list li { display: inline-flex; min-inline-size: 0; align-items: center; }
.breadcrumb-list li + li::before { content: "/"; margin-inline-end: .45rem; }
.breadcrumb-list a { display: inline-flex; min-block-size: 44px; align-items: center; }
.breadcrumb-list span { overflow-wrap: anywhere; }

/* 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); }
}

.sitemap-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-section, 2rem);
}
.sitemap-group { min-inline-size: 0; }
.sitemap-group ul { margin: 0; padding: 0; list-style: none; }
.sitemap-group li { min-inline-size: 0; }
.sitemap-group a {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  overflow-wrap: anywhere;
}
.sitemap-group p { overflow-wrap: anywhere; }

/* 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;
}

/* `[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; }

/* Atmosphere, and the one place a phone gets hurt.
   CSS gradients on a pseudo-element, never a canvas or WebGL: this sits behind
   the section a tool-site converts on, and a canvas there costs battery, adds a
   paint layer that behaves differently in every engine, and runs into Safari's
   memory ceiling on a phone. Layered radial gradients composite on the GPU and
   render identically in Chromium, WebKit and Firefox -- verified.

   Pick ONE variant per site; the palette comes from palette-set. */
.bg-host { position: relative; isolation: isolate; overflow: hidden; }
.bg-host::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
}

/* aurora -- esoteric, atmospheric */
.bg-aurora::before {
  background:
    radial-gradient(38rem 26rem at 22% 28%, var(--bg-a), transparent 62%),
    radial-gradient(34rem 30rem at 78% 24%, var(--bg-b), transparent 62%),
    radial-gradient(30rem 24rem at 62% 82%, var(--bg-c), transparent 60%);
  filter: blur(28px);
  animation: bg-drift 42s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bg-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1.02); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); }
}

/* grid -- utilitarian, converters and calculators */
.bg-grid::before {
  inset: 0;
  background:
    linear-gradient(var(--bg-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-line) 1px, transparent 1px);
  background-size: 4rem 4rem;
}

/* paper -- documents, invoices */
.bg-paper::before {
  inset: 0;
  background: radial-gradient(60rem 40rem at 50% 0%, var(--bg-a), transparent 70%);
}

/* Motion is decoration; a still backdrop is the same design. */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora::before { animation: none; }
}

/* 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; }

.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; }

}
/* Clauseworthy — "Ink & Seal". The product layer over the catalogue's
   correctness rules. Layers are declared by build.mjs: base, catalogue,
   product, responsive. The four files in src/styles/ are concatenated in
   order: base (tokens, type, shell), controls, pages, responsive.

   The tokens and the [hidden] guard sit OUTSIDE every layer on purpose: the
   stylesheet contract reads custom properties from a top-level :root block, and
   the blanket guard has to be the one rule no layer can outrank.

   No text on this site is set below 12px (0.75rem): labels, chips and fine
   print included. */

:root {
  --vellum: #F6F4EE;
  --paper: #FFFDF8;
  --ink: #121722;
  --ink-2: #1A2030;
  --ink-3: #242B3A;
  --muted: #5C6370;
  --hair: #E2DDD3;
  --hair-2: #D5CFC3;
  --brass: #A98A5B;
  --brass-2: #CBAB72;
  --brass-3: #EBDDBF;
  --brass-4: #F3EBDA;
  /* Brass for TEXT on paper and vellum: --brass itself is 3:1 there, so it
     stays on strokes, rules, icons and dark grounds. */
  --brass-ink: #7A5F35;
  --cleared: #2C7A5B;
  --cleared-3: #E6EFEA;
  --wax: #7C2F2F;
  --wax-3: #F2E3E1;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", "SF Mono", Menlo, monospace;
  --measure: 44rem;
  --wrap: min(100% - 2.5rem, 80rem);
  --radius: 6px;
  /* The catalogue's own names for the same tokens. */
  --line: var(--hair-2);
  --accent: var(--brass);
  --ink-muted: var(--muted);
  --panel: var(--paper);
  color-scheme: light;
}

/* The [hidden] guard. An author `display` at equal specificity beats the
   user-agent rule; this makes the attribute mean what it says everywhere. */
[hidden] { display: none !important; }
.tool-form[hidden], .result[hidden], .form-error[hidden], .field__error[hidden] { display: none; }

@layer base {
  @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("/assets/fonts/newsreader-300-400.woff2") format("woff2"); }
  @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300; font-display: swap; src: url("/assets/fonts/newsreader-italic-300.woff2") format("woff2"); }
  @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/instrument-sans-400-600.woff2") format("woff2"); }
  @font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-sans-italic-400.woff2") format("woff2"); }
  @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/dm-mono-400.woff2") format("woff2"); }
  @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/dm-mono-500.woff2") format("woff2"); }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--vellum);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    overflow-x: clip;
  }
  h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; }
  p { margin: 0; }
  a { color: var(--ink); text-decoration: none; }
  a:hover { color: var(--brass-ink); }
  ul, ol, dl, dd { margin: 0; padding: 0; }
  button { font: inherit; cursor: pointer; }
  code { font-family: var(--mono); font-size: 0.88em; overflow-wrap: anywhere; }
  em { font-style: italic; }
  :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--brass-3); }
}

@layer product {
  /* ---- shell ---------------------------------------------------------- */
  .skip-link { background: var(--ink); color: var(--vellum); border-radius: 4px; }
  .site-header { width: var(--wrap); min-block-size: 5.25rem; gap: 1.5rem; }
  .site-header .brand { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--serif); font-size: 1.6rem; letter-spacing: -0.02em; color: var(--ink); }
  .site-header .brand .mark { flex: 0 0 auto; }
  .site-header nav { gap: 1.5rem; font-size: 0.9375rem; }
  .site-header nav a { color: var(--ink-3); }
  .site-header nav a:hover { color: var(--brass-ink); }
  .site-header nav a.button { color: var(--vellum); min-block-size: 44px; padding: 0 1.1rem; font-size: 0.875rem; }
  .site-header nav a.button:hover { color: var(--vellum); }
  main { display: block; }

  footer { width: var(--wrap); margin-block-start: 6rem; padding-block: 3rem 2.5rem; border-block-start: 1px solid var(--hair-2); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem 3rem; color: var(--muted); font-size: 0.875rem; }
  footer .footer-brand { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); }
  footer > div:first-child p { max-width: 26rem; margin-block-start: 0.5rem; }
  footer .footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  .footer-group { display: flex; flex-direction: column; gap: 0; }
  .footer-group b { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-block-end: 0.25rem; }
  .footer-group a { color: var(--ink-3); }
  footer .copyright { padding-block-start: 1.5rem; border-block-start: 1px solid var(--hair); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; }

  /* ---- type helpers --------------------------------------------------- */
  .eyebrow { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .muted { color: var(--muted); }
  h1 em, h2 em { font-style: italic; font-weight: 300; }
  .sec { width: var(--wrap); margin-inline: auto; padding-block-start: 6rem; }
  .sec-kicker { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding-block-end: 1rem; margin-block-end: 1.5rem; border-block-end: 1px solid var(--hair-2); }

  /* ---- buttons -------------------------------------------------------- */
  .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-block-size: 48px; padding: 0 1.3rem; border-radius: 4px; border: 1px solid var(--ink); background: var(--ink); color: var(--vellum); font-weight: 500; font-size: 0.9375rem; line-height: 1.2; text-align: center; }
  .button:hover { background: var(--ink-3); color: var(--vellum); }
  .button:disabled { opacity: 0.45; cursor: not-allowed; }
  .button .arrow { width: 16px; height: 16px; flex: 0 0 16px; }
  .button--ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
  .button--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
  .button--small { min-block-size: 44px; padding: 0 0.95rem; font-size: 0.875rem; }
  .button--wax { background: var(--wax); border-color: var(--wax); }
  .button--wax:hover { background: #5f2323; }
  .link-button { display: inline; min-block-size: 44px; padding: 0; border: 0; background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brass); font: inherit; }
}

@layer product {
  /* ---- the intake card ------------------------------------------------- */
  .tool-form { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; padding: 1.75rem; box-shadow: 0 30px 60px -50px rgba(18, 23, 34, 0.5); min-inline-size: 0; }
  .form-heading { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; max-width: none; }
  .form-heading h2 { font-size: 1.75rem; line-height: 1.1; }
  .form-heading > p:not(.eyebrow) { color: var(--muted); font-size: 0.9375rem; }
  .field-group { border: 0; margin: 0; padding: 1.25rem 0 0; border-block-start: 1px solid var(--hair); display: flex; flex-direction: column; gap: 1rem; min-inline-size: 0; }
  .field-group > legend { float: left; width: 100%; padding: 0 0 0.25rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-ink); font-weight: 500; }
  .field-group > legend + * { clear: both; }
  .field { display: flex; flex-direction: column; gap: 0.4rem; min-inline-size: 0; }
  .field > label, .field-label, .choice-set legend { font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
  .field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .field-hint { color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
  .text-input, .text-field, .select-field select { inline-size: 100%; min-block-size: 48px; border: 1px solid var(--hair-2); border-radius: 4px; background: #fff; padding: 0 0.85rem; font: inherit; font-size: 1rem; color: var(--ink); }
  .text-field { padding: 0.8rem 0.9rem; resize: vertical; line-height: 1.5; min-block-size: 6rem; }
  .text-input:focus, .text-field:focus, .select-field select:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass); }
  .text-input:disabled { background: var(--vellum); }
  .select-field select { background-image: none; padding-inline-end: 2.4rem; }
  .select-field::after { content: ""; position: absolute; inset-inline-end: 1rem; inset-block-start: 50%; width: 8px; height: 8px; border-inline-end: 1.5px solid var(--muted); border-block-end: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
  [aria-invalid="true"] { border-color: var(--wax) !important; }

  /* Choice sets: the hint sits directly under its legend, then the options. */
  .choice-set { display: flex; flex-direction: column; gap: 0.45rem; }
  .choice-set legend { float: left; width: 100%; padding: 0; }
  .choice-hint { clear: both; margin-block-start: -0.1rem; }
  .choice-set-options { display: flex; flex-wrap: wrap; gap: 0.5rem; clear: both; }
  .choice-option { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; padding: 0 1rem; border-radius: 4px; border: 1px solid var(--hair-2); background: #fff; font-size: 0.9375rem; cursor: pointer; }
  .choice-option input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .choice-option:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--vellum); }
  .choice-option:focus-within { outline: 2px solid var(--brass); outline-offset: 2px; }

  .check-option { display: inline-flex; align-items: center; gap: 0.6rem; min-block-size: 44px; font-size: 0.9375rem; cursor: pointer; }
  .check-option input { inline-size: 1.15rem; block-size: 1.15rem; margin: 0; accent-color: var(--ink); flex: 0 0 auto; }
  .check-option--block { display: flex; align-items: flex-start; padding-block: 0.6rem; border-block-end: 1px solid var(--hair); }
  .check-option--block input { margin-block-start: 0.15rem; }
  .check-option--block span { display: flex; flex-direction: column; gap: 0.15rem; }
  .check-option--block b { font-weight: 500; }
  .check-option--block small { color: var(--muted); font-size: 0.8125rem; }
  .toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
  .toggle input { accent-color: var(--brass); inline-size: 1rem; block-size: 1rem; margin: 0; }

  .form-action { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin: 0; }
  .form-action > .button { width: 100%; }
  .form-error { color: var(--wax); font-size: 0.875rem; }

  /* Repeated rows (cap table, SAFEs, founders). */
  .rows { display: flex; flex-direction: column; gap: 0.75rem; }
  .row-card { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.75rem; padding: 0.9rem; border: 1px solid var(--hair); border-radius: 6px; background: var(--vellum); }
  .row-card[data-row="cap"] > .field:first-child { grid-column: 1 / -1; }
  .row-card--two { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; }
  .row-card .field-label { font-size: 0.8125rem; color: var(--muted); font-weight: 400; }
  .row-remove { justify-self: start; align-self: end; min-block-size: 44px; padding: 0 0.25rem; border: 0; background: none; color: var(--muted); font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 3px; }
  .row-remove:hover { color: var(--wax); }
  .row-card .field > label { display: flex; flex-direction: column; gap: 0.4rem; font-weight: 400; min-inline-size: 0; }
  .row-card .select-field { display: block; }
  /* Under 360px two inputs side by side truncate a seven-digit number. */
  @media (max-width: 22.5rem) {
    .rows .row-card, .rows .row-card--two { grid-template-columns: minmax(0, 1fr); }
    .rows .row-card .row-remove { grid-column: 1; }
  }

  /* Inline validation and the one live line of a result. */
  .field__error { display: block; color: var(--wax); font-size: 0.8125rem; line-height: 1.4; }
  .result-status { min-block-size: 1.25rem; font-size: 0.875rem; color: var(--muted); }
  .summary-out[data-state="stale"] :is(.kpis, .benchmark-line, .summary-body) { opacity: 0.45; }

  /* File intake: the label is the target. */
  .file-drop { min-block-size: 9rem; padding: 1.5rem 1rem; border: 1.5px dashed var(--hair-2); border-radius: 8px; background: var(--vellum); gap: 0.4rem; color: var(--ink-3); }
  .file-drop:hover { border-color: var(--brass); }
  .file-drop-mark svg { width: 1.75rem; height: 1.75rem; color: var(--brass); }
  .file-drop-label { font-weight: 500; }
  .file-drop-hint { font-size: 0.8125rem; }
  .file-drop-name { font-size: 0.875rem; color: var(--cleared); }
  .file-drop-name:empty { display: none; }
  .or-rule { display: flex; align-items: center; gap: 1rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

  /* ---- result side ------------------------------------------------------ */
  .action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
  .action-bar .button { flex: 0 1 auto; }
  .action-status { flex: 1 0 100%; min-block-size: 1.25rem; font-size: 0.875rem; color: var(--cleared); }
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 6px; overflow: hidden; }
  .kpis:empty { display: none; }
  .kpi { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem; background: var(--paper); }
  .kpi-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .kpi-value { font-family: var(--serif); font-size: 1.85rem; line-height: 1.05; font-weight: 300; font-variant-numeric: tabular-nums; }
  .kpi-note { font-size: 0.8125rem; color: var(--muted); }
  .status-chip { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 999px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; white-space: nowrap; border: 1px solid currentColor; }
  [data-status="market"] .status-chip, .status-chip[data-status="market"] { color: #1F5E45; background: var(--cleared-3); }
  [data-status="unusual"] .status-chip, .status-chip[data-status="unusual"] { color: var(--wax); background: var(--wax-3); }
  [data-status="ask_lawyer"] .status-chip, .status-chip[data-status="ask_lawyer"] { color: #6E5530; background: var(--brass-4); }
  [data-status="missing"] .status-chip, .status-chip[data-status="missing"] { color: var(--wax); background: transparent; }
  [data-status="not_found"] .status-chip, .status-chip[data-status="not_found"] { color: var(--muted); background: transparent; }

  /* ---- tables ----------------------------------------------------------- */
  .table-wrap { border: 1px solid var(--hair); border-radius: 6px; background: var(--paper); }
  table { font-size: 0.875rem; }
  caption { padding: 0.8rem 0.9rem 0.4rem; font-size: 0.8125rem; text-align: start; }
  th { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--vellum); }
  th, td { border-color: var(--hair); padding: 0.5rem 0.8rem; vertical-align: middle; }
  tbody tr:last-child td { border-block-end: 0; }
  td a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2); display: inline-flex; min-block-size: 44px; align-items: center; }
}

@layer product {
  /* ---- home ------------------------------------------------------------- */
  .hero { width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem 1.25rem; padding-block: 3rem 1rem; position: relative; overflow: clip; }
  .bg-host { position: relative; }
  /* The grain is a file on this origin: the fleet CSP refuses data: images. */
  .bg-paper::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.4; mix-blend-mode: multiply; background-image: url("/assets/grain.svg"); -webkit-mask-image: radial-gradient(ellipse 60% 55% at 22% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 22% 45%, #000 20%, transparent 75%); }
  .hero-copy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem 1.25rem; align-items: end; }
  .hero-copy .eyebrow { grid-column: 1 / -1; }
  .hero h1 { grid-column: span 7; font-size: clamp(2.6rem, 6.4vw, 5.75rem); line-height: 0.97; font-weight: 300; letter-spacing: -0.03em; }
  .lede { grid-column: 9 / span 4; font-size: 1.125rem; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
  .lede-fine { display: block; margin-block-start: 0.6rem; font-size: 0.875rem; color: var(--muted); }
  .tool-trio { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .tool-card { position: relative; display: flex; flex-direction: column; gap: 0.7rem; padding: 1.6rem 1.6rem 1.25rem; background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; color: var(--ink); transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; }
  .tool-card:first-child { background: var(--ink); color: var(--vellum); border-color: var(--ink); }
  .tool-card:first-child .tool-card-text { color: rgba(246, 244, 238, 0.72); }
  .tool-card:first-child .tool-card-k { color: var(--brass-2); }
  .tool-card:first-child .open { color: var(--brass-2); }
  .tool-card:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -30px rgba(18, 23, 34, 0.5); color: inherit; border-color: var(--ink); }
  .tool-card:first-child:hover { color: var(--vellum); }
  .tool-card-k { display: flex; gap: 0.6rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-ink); }
  .tool-card-k span { color: inherit; opacity: 0.7; }
  .tool-card-title { font-family: var(--serif); font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.1; letter-spacing: -0.015em; }
  .tool-card-text { color: var(--muted); font-size: 0.9375rem; text-wrap: pretty; }
  .card-art { display: block; width: 100%; max-width: 15rem; height: auto; margin-block: 0.4rem 0.2rem; }
  .tool-card .open { margin-block-start: auto; display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 44px; font-size: 0.9375rem; font-weight: 500; }

  .more-sec { padding-block-start: 3.5rem; }
  .more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.25rem; }
  .more-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9rem; align-items: start; padding-block: 1rem; border-block-end: 1px solid var(--hair-2); min-block-size: 44px; color: var(--ink); }
  .more-card > span { display: flex; flex-direction: column; gap: 0.15rem; }
  .more-card b { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
  .more-card span span { color: var(--muted); font-size: 0.875rem; }
  .more-card .glyph { color: var(--brass); margin-block-start: 0.2rem; }
  .more-card .arrow { color: var(--muted); margin-block-start: 0.4rem; }
  .guide-links .more-card { grid-template-columns: minmax(0, 1fr) auto; }
  .guide-links { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }

  .story-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-block-end: 2rem; }
  .story-head h2, .explain-side h2, .faq > h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.04; font-weight: 300; letter-spacing: -0.02em; }
  .story-head p { color: var(--muted); max-width: 22rem; font-size: 0.9375rem; }
  .story-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .story-steps li { display: flex; flex-direction: column; gap: 0.8rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--ink); }
  .story-time { font-family: var(--mono); font-size: 0.875rem; color: var(--brass-ink); letter-spacing: 0.06em; }
  .story-steps h3 { font-size: 1.45rem; line-height: 1.15; margin-block-end: 0.4rem; }
  .story-steps p { color: var(--muted); font-size: 0.9375rem; text-wrap: pretty; }

  .candor { width: var(--wrap); margin: 6rem auto 0; background: var(--ink); color: var(--vellum); border-radius: 8px; padding: 4.5rem 4rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; position: relative; overflow: hidden; }
  .candor::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 70% at 100% 0%, rgba(203, 171, 114, 0.14), transparent 60%), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 9px); }
  .candor > * { position: relative; }
  .candor .q { grid-column: span 7; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.12; font-weight: 300; letter-spacing: -0.015em; }
  .candor .q em { color: var(--brass-2); }
  .candor .facts { grid-column: span 5; display: flex; flex-direction: column; gap: 1.1rem; font-size: 0.9375rem; color: rgba(246, 244, 238, 0.8); }
  .candor .facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-block-start: 0.9rem; border-block-start: 1px solid rgba(255, 255, 255, 0.14); }
  .candor .facts a { color: var(--vellum); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brass-2); }
  .candor .facts b { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-2); font-weight: 500; padding-block-start: 0.2rem; }
  .candor-seal { position: absolute; inset-inline-start: 4rem; inset-block-end: 3rem; width: 96px; height: 96px; opacity: 0.85; }

  .faq-sec .faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
  .faq > h2 { grid-column: span 4; }
  .faq .faq-list { grid-column: span 8; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .faq-item { padding-block: 1.3rem; border-block-start: 1px solid var(--hair-2); }
  .faq-item:last-child { border-block-end: 1px solid var(--hair-2); }
  .faq-item h3 { font-size: 1.3rem; }
  .faq-item p { margin-block-start: 0.5rem; color: var(--muted); font-size: 0.9375rem; max-width: 38rem; text-wrap: pretty; }

  /* ---- tool pages -------------------------------------------------------- */
  .breadcrumbs { width: var(--wrap); margin-inline: auto; padding-block: 1rem 0.5rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .breadcrumb-list li + li::before { color: var(--hair-2); }
  .breadcrumb-list a { color: var(--muted); }
  .breadcrumb-list [aria-current] span { color: var(--ink); display: inline-flex; align-items: center; min-block-size: 44px; }
  .tool-head { width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; padding-block: 0.5rem 2.25rem; }
  .tool-head > * { grid-column: 1 / -1; }
  .tool-head h1 { grid-column: span 8; font-size: clamp(2.3rem, 4.8vw, 4.25rem); line-height: 1; letter-spacing: -0.028em; font-weight: 300; }
  .tool-lead { grid-column: span 8; font-size: 1.125rem; color: var(--ink-3); max-width: 46rem; text-wrap: pretty; }
  .tool-lead a, .attribution a, .prose a, .legal-page a, .point a, .source-note a, .cite-line a, .benchmark-line a, .yc-callout p a, .federal-note a, .market-facts a, .check-item a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brass); }
  .facts-strip { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--hair-2); margin-block-start: 0.5rem; }
  .facts-strip li { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1.25rem 0.9rem 0; font-size: 0.875rem; color: var(--ink-3); }
  .facts-strip li + li { padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--hair-2); }
  .facts-strip b { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-ink); font-weight: 500; }

  .workspace { width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
  .workspace > .tool-form { grid-column: span 5; }
  .workspace > .preview-col, .workspace > .report-col { grid-column: span 7; position: sticky; top: 1rem; min-inline-size: 0; }
  .workspace--check > .tool-form { grid-column: span 5; }
  .workspace > noscript { grid-column: 1 / -1; }
  .notice { color: var(--muted); font-size: 0.9375rem; padding: 1rem; border: 1px solid var(--hair-2); border-radius: 6px; }

  /* ---- the ink panel and the sheet -------------------------------------- */
  .preview-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block-end: 0.5rem; }
  .preview-status { font-size: 0.8125rem; color: var(--muted); }
  .panel { position: relative; background: var(--ink); border-radius: 8px; padding: 1.5rem; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(18, 23, 34, 0.45); }
  .panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 10% 0%, rgba(203, 171, 114, 0.18), transparent 55%), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 9px); }
  .panel > * { position: relative; }
  .sheet { background: var(--paper); border-radius: 3px; color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 30px 50px -30px rgba(0, 0, 0, 0.8); }
  .sheet--doc { max-block-size: calc(100vh - 8rem); overflow-y: auto; padding: 2.5rem 2.75rem; overscroll-behavior: contain; }
  .cw-doc { font-family: var(--serif); color: var(--ink-3); }
  .cw-title { font-size: 1.35rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-align: center; padding-block: 0.75rem; margin-block: 1rem 0.75rem; border-block: 1px solid var(--hair); }
  .cw-doc > .cw-title:first-child { margin-block-start: 0; }
  .cw-heading { font-size: 1.05rem; font-weight: 400; color: var(--ink); margin-block: 1.25rem 0.35rem; }
  .cw-heading strong { font-weight: 500; }
  .cw-paragraph { font-size: 0.975rem; line-height: 1.62; margin-block-end: 0.6rem; text-wrap: pretty; }
  .cw-slot { background: var(--brass-4); border-radius: 2px; padding: 0 0.15em; color: var(--ink); }
  .cw-slot--missing { background: transparent; color: var(--brass-ink); font-family: var(--mono); font-size: 0.85em; border-block-end: 1px dashed var(--brass); }
  .cw-note { margin: 0.4rem 0 1rem; padding: 0.7rem 0.9rem; border-inline-start: 2px solid var(--brass); background: var(--vellum); font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); display: flex; flex-direction: column; gap: 0.4rem; }
  .cw-note-text::before { content: "Note — "; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-ink); }
  .cw-benchmark { color: var(--muted); }
  .cw-benchmark::before { content: "Market — "; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cleared); }
  .cw-benchmark a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hair-2); }
  [data-notes="off"] .cw-note { display: none; }
  .cw-signature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-block: 1.5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--hair); font-family: var(--sans); font-size: 0.8125rem; }
  .cw-signature-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--brass-ink); margin-block-end: 0.4rem; }
  .cw-signature-line { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.4rem; padding-block: 0.35rem; border-block-end: 1px solid var(--hair); }
  .cw-signature-field { color: var(--muted); }
  .cw-signature-value { color: var(--ink); overflow-wrap: anywhere; }
  [data-section-id="attribution"] .cw-paragraph { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin-block-start: 0.5rem; }
  [data-section-id="attribution"] a { text-decoration: underline; text-underline-offset: 2px; }

  .pdf-warning { padding: 1rem; border: 1px solid var(--brass); border-radius: 6px; background: var(--brass-4); display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; }
  .pdf-warning-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .jump-link { display: none; align-items: center; gap: 0.4rem; min-block-size: 44px; font-size: 0.875rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brass); }
  .report-art { width: min(100%, 18rem); height: auto; margin-block-start: 1rem; opacity: 0.9; }
  .sample-row { font-size: 0.875rem; color: var(--muted); }
  .sample-row .link-button { display: inline-flex; align-items: center; min-block-size: 44px; text-align: start; }

  /* ---- non-compete: the bottom line, enacted changes, sources, confidence -- */
  .nc-bottom { font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; color: var(--ink); padding: 0.9rem 1rem; background: var(--paper); border-inline-start: 3px solid var(--ink); text-wrap: pretty; }
  .nc-scheduled { display: flex; flex-direction: column; gap: 0.6rem; }
  .nc-change { padding: 0.8rem 1rem; background: var(--brass-4); border: 1px solid var(--brass-3); border-radius: 6px; font-size: 0.9375rem; color: var(--ink-3); }
  .nc-change-head { font-weight: 600; color: var(--ink); margin-block-end: 0.25rem; }
  .nc-change a, .source-kind a, .nc-sources a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brass); }
  .nc-details-head { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-block-start: 0.5rem; }
  .nc-sources { display: flex; flex-direction: column; gap: 0.3rem; }
  .nc-sources-head { font-weight: 600; font-size: 0.9375rem; }
  .source-kind { font-size: 0.8125rem; color: var(--muted); }
  .citations--secondary h2, .citations--secondary h3 { color: var(--muted); }
  .federal-title { font-size: 1.35rem; }
  .federal-note h3 { font-size: 1rem; margin-block-start: 0.4rem; }
  .confidence { white-space: normal; }
  .confidence[data-confidence="low"] { color: var(--wax); font-weight: 600; }
  .confidence-note { font-weight: 400; font-size: 0.8125rem; }
  .state-head .nc-scheduled { margin-block-start: 0.5rem; }

  /* ---- pricing: the waitlist before it opens ------------------------------ */
  .waitlist-soon { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem; border: 1px solid var(--brass-3); background: var(--brass-4); border-radius: 6px; }
  .waitlist-soon b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--ink); }
  .waitlist-soon p { font-size: 0.9375rem; color: var(--ink-3); }
  .notify-form[data-available="false"] .notify-fields { display: none; }
}

@layer product {
  /* ---- result panels (check, SAFE, planners) ----------------------------- */
  .result { background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; padding: 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; box-shadow: 0 30px 60px -50px rgba(18, 23, 34, 0.5); min-inline-size: 0; }
  .result > h2, .report-title { font-size: 1.75rem; line-height: 1.1; }
  .report { min-block-size: 22rem; }
  .report-empty { display: flex; flex-direction: column; gap: 0.6rem; color: var(--muted); }
  .report-empty h2 { color: var(--ink); font-size: 1.75rem; }
  .report-empty .status-chip { margin-inline: 0.1rem; }
  .report[data-state="working"] .report-empty h2::after { content: " …"; }
  .report-body { display: flex; flex-direction: column; gap: 1.25rem; }
  .report-summary { display: flex; flex-direction: column; gap: 0.5rem; }
  .report-title:focus { outline: none; }
  .report-meta { font-size: 0.9375rem; color: var(--ink-3); }
  .report-verdict { font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
  /* Counts are jump links to their group, styled as links, not as buttons. */
  .count-row { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin-block-start: 0.2rem; }
  .count { display: inline-flex; align-items: baseline; gap: 0.35rem; min-block-size: 44px; font-size: 0.875rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2); }
  .count:hover { text-decoration-color: currentColor; }
  .count b { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }
  .count[data-status="unusual"], .count[data-status="missing"] { color: var(--wax); }
  .count[data-status="ask_lawyer"] { color: #6E5530; }
  .count[data-status="market"] { color: var(--cleared); }
  .report-actions { background: var(--paper); padding-block: 0.6rem; border-block-end: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
  /* Sticky only where it costs one short row, not a third of a phone screen. */
  @media (min-width: 48rem) { .report-actions { position: sticky; top: 0; z-index: 1; } }
  .report-actions .action-status:empty { display: none; }
  .action-note { font-size: 0.875rem; color: var(--muted); }
  details.finding-group > summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; list-style-position: inside; }
  details.finding-group > summary::marker { color: var(--muted); }
  .finding-group { scroll-margin-block-start: 4.5rem; }
  .status-chip[data-status="not_applicable"], .finding[data-status="not_applicable"] .status-chip { color: var(--muted); background: transparent; border: 1px dashed var(--hair-2); }

  /* ---- /check/ intake: the busy line sits beside the button ------------- */
  .check-form .field__error { color: var(--wax); font-size: 0.875rem; }
  .check-action { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
  .check-action > .button { width: auto; flex: 0 1 auto; }
  .check-action > .form-error { flex-basis: 100%; }
  .check-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--ink-3); min-inline-size: 0; overflow-wrap: anywhere; }
  .check-status:empty, .check-status:has(.check-status-text:empty) { display: none; }
  .spinner { inline-size: 1rem; block-size: 1rem; flex: none; border-radius: 50%; border: 2px solid var(--hair-2); border-block-start-color: var(--ink); animation: check-spin 0.8s linear infinite; }
  .spinner[hidden] { display: none; }
  .check-form[aria-busy="true"] .button-primary { opacity: 0.7; cursor: progress; }
  @keyframes check-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
  @media (max-width: 34rem) { .check-action > .button { flex: 1 1 100%; } }
  .group-title { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding-block-end: 0.5rem; border-block-end: 1px solid var(--hair); margin-block-end: 0.75rem; }
  .finding-group { display: flex; flex-direction: column; gap: 0.75rem; }
  .finding { padding: 1rem 1.1rem; border: 1px solid var(--hair); border-inline-start: 3px solid var(--hair-2); border-radius: 4px; background: #fff; display: flex; flex-direction: column; gap: 0.5rem; }
  .finding[data-status="unusual"], .finding[data-status="missing"] { border-inline-start-color: var(--wax); }
  .finding[data-status="ask_lawyer"] { border-inline-start-color: var(--brass); }
  .finding[data-status="market"] { border-inline-start-color: var(--cleared); }
  .finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
  .finding-head h4 { font-size: 1.15rem; }
  .finding-text { font-size: 0.9375rem; color: var(--ink-3); }
  .finding-quote { margin: 0; padding: 0.6rem 0.85rem; background: var(--vellum); border-radius: 3px; font-family: var(--serif); font-size: 0.9375rem; color: var(--ink-3); display: flex; flex-direction: column; gap: 0.25rem; overflow-wrap: anywhere; }
  .finding-quote cite { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-style: normal; }
  .finding-ref { font-size: 0.8125rem; color: var(--muted); }
  .report-disclaimer { font-size: 0.8125rem; color: var(--muted); padding-block-start: 0.75rem; border-block-start: 1px solid var(--hair); }

  .summary-body { display: flex; flex-direction: column; gap: 0.85rem; }
  .summary-body .table-wrap { max-block-size: 24rem; overflow: auto; }
  .summary-heading { font-size: 1.3rem; margin-block-start: 0.5rem; }
  .summary-p { font-size: 0.9375rem; color: var(--ink-3); text-wrap: pretty; }
  .summary-note { font-size: 0.8125rem; color: var(--muted); padding: 0.75rem 0.9rem; background: var(--vellum); border-radius: 4px; overflow-wrap: anywhere; }
  .benchmark-line { font-size: 0.875rem; color: var(--muted); padding-inline-start: 0.85rem; border-inline-start: 2px solid var(--cleared); }
  .benchmark-line:empty { display: none; }
  .round-fields { display: flex; flex-direction: column; gap: 1rem; }

  .yc-callout { width: var(--wrap); margin: 0 auto 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--hair-2); border-radius: 8px; background: var(--paper); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; font-size: 0.9375rem; }
  .yc-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  .checklist { display: flex; flex-direction: column; gap: 0.85rem; }
  .check-item { padding: 1rem 1.1rem; border: 1px solid var(--hair); border-radius: 4px; background: #fff; display: flex; flex-direction: column; gap: 0.45rem; }
  .check-item-head { display: flex; gap: 0.75rem; align-items: baseline; }
  .check-item-n { font-family: var(--mono); font-size: 0.75rem; color: var(--brass-ink); }
  .check-item h3 { font-size: 1.15rem; }
  .check-item-why { font-size: 0.875rem; color: var(--ink-3); }
  .check-item-because { font-size: 0.8125rem; color: var(--cleared); }
  .check-item-threshold, .check-item-source { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }

  /* ---- explainers ------------------------------------------------------- */
  .explain { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
  .explain-side { grid-column: span 4; align-self: start; position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
  .explain-side p { color: var(--muted); font-size: 0.9375rem; }
  .explain-body { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 2rem; min-inline-size: 0; }
  .point { display: flex; flex-direction: column; gap: 0.5rem; }
  .point h3, .point h2 { font-size: 1.5rem; }
  .point p { color: var(--ink-3); line-height: 1.6; max-width: 40rem; text-wrap: pretty; }
  .rule-list, .plain-list, .source-list { padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; color: var(--ink-3); font-size: 0.9375rem; }
  .rule-list { columns: 2; display: block; }
  .rule-list li { break-inside: avoid; padding-block-end: 0.3rem; }
  .source-list a { display: inline-flex; min-block-size: 44px; align-items: center; }
  .market-facts { list-style: none; display: flex; flex-direction: column; }
  .market-facts li { display: flex; flex-direction: column; gap: 0.2rem; padding-block: 1rem; border-block-start: 1px solid var(--hair-2); }
  .market-facts b { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }
  .market-facts li > p { font-size: 0.8125rem; color: var(--muted); }
  .source-note { font-size: 0.8125rem; color: var(--muted); margin-block-start: 0.75rem; }
  .sf-limits { background: var(--ink); color: var(--vellum); border-radius: 8px; padding: 1.6rem 1.9rem; }
  .sf-limits__heading { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-2); font-weight: 500; }
  .sf-limits__list { list-style: none; margin-block-start: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.9375rem; color: rgba(246, 244, 238, 0.84); }
  .sf-limits__list > li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.75rem; }
  .sf-limits__list > li::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); margin-block-start: 0.55rem; }
  .attribution { font-size: 0.875rem; color: var(--muted); }

  /* ---- non-compete -------------------------------------------------------- */
  .nc-layout { width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
  .nc-checker { grid-column: span 7; display: flex; flex-direction: column; gap: 1rem; }
  .federal-note { grid-column: span 5; padding: 1.4rem 1.5rem; border: 1px solid var(--hair-2); border-radius: 8px; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.9375rem; color: var(--ink-3); }
  .cite-line { font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
  .nc-answer-title { font-size: 1.6rem; }
  .nc-answer-title:focus { outline: none; }
  .nc-lines { display: flex; flex-direction: column; }
  .nc-line { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding-block: 0.8rem; border-block-start: 1px solid var(--hair); font-size: 0.9375rem; }
  .nc-line dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-block-start: 0.2rem; }
  .nc-line dd { color: var(--ink-3); }
  .nc-line[data-tone="below"] dd { color: var(--wax); }
  .nc-line[data-tone="above"] dd { color: var(--cleared); }
  .nc-line[data-tone="scheduled"] dt { color: var(--brass-ink); }
  .nc-fine { font-size: 0.8125rem; color: var(--muted); }
  .low-confidence { font-size: 0.875rem; color: #6E5530; background: var(--brass-4); border-inline-start: 2px solid var(--brass); padding: 0.6rem 0.85rem; }
  .regime-chip { justify-self: start; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--ink); }
  .regime-chip[data-regime="ban"] { background: var(--ink); color: var(--vellum); }
  .verified { font-size: 0.875rem; color: var(--muted); }
  .state-body { width: var(--wrap); margin: 0 auto 4rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; }
  .fact-grid { grid-column: span 5; align-self: start; position: sticky; top: 1rem; display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 8px; background: var(--paper); }
  .fact-grid > div { padding: 0.9rem 1.1rem; border-block-end: 1px solid var(--hair); }
  .fact-grid > div:last-child { border-block-end: 0; }
  .fact-grid dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-ink); }
  .fact-grid dd { font-size: 0.9375rem; color: var(--ink-3); margin-block-start: 0.25rem; }
  .state-body .explain-body { grid-column: 7 / span 6; }
  .state-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .state-links a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 1rem; border: 1px solid var(--hair-2); border-radius: 4px; background: var(--paper); }
}

@layer product {
  /* ---- prose, legal, pricing, desk ---------------------------------------- */
  .prose, .legal-page { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; padding-block-start: 1rem; }
  .prose h1, .legal-page h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.02; letter-spacing: -0.025em; font-weight: 300; }
  .prose h2, .legal-page h2 { font-size: 1.55rem; margin-block-start: 1.25rem; }
  .prose p, .legal-page p, .legal-page li { color: var(--ink-3); font-size: 1.0625rem; line-height: 1.62; text-wrap: pretty; }
  .legal-page ul { padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
  .prose .lead, .legal-lead { font-size: 1.2rem; }
  .legal-updated { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); margin-block-start: 1.5rem; }
  .license-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; color: var(--ink-3); }
  .license-list b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; }
  .support-block { display: flex; flex-direction: column; gap: 0.6rem; }
  .support-block h2 { font-size: 1.3rem; margin-block-start: 1rem; }
  .support-block a { font-family: var(--mono); font-size: 1rem; display: inline-flex; min-block-size: 44px; align-items: center; }
  .html-sitemap { width: var(--wrap); margin-inline: auto; padding-block-start: 1rem; }
  .html-sitemap h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300; letter-spacing: -0.025em; }
  .html-sitemap header p { color: var(--muted); margin-block-start: 0.75rem; max-width: 40rem; }
  .sitemap-groups { margin-block-start: 2.5rem; gap: 2rem; }
  .sitemap-group h2 { font-size: 1.4rem; }
  .sitemap-group ul { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; margin-block-start: 0.9rem; }
  .sitemap-group a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 500; }
  .sitemap-group p { color: var(--muted); font-size: 0.875rem; }
  .not-found .door-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 1rem; }
  .not-found .door-links a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 1rem; border: 1px solid var(--hair-2); border-radius: 4px; }

  .plans { width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
  .plan { background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; min-inline-size: 0; }
  .plan--current { border-color: var(--ink); }
  .plan--future { background: var(--vellum); border-style: dashed; border-color: var(--hair-2); }
  .plan h2 { font-size: 1.8rem; }
  .plan-price { font-family: var(--serif); font-size: 3.25rem; line-height: 1; letter-spacing: -0.02em; font-weight: 300; }
  .plan-price--none { font-size: 1.3rem; color: var(--muted); font-style: italic; }
  .plan ul { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9375rem; color: var(--ink-3); }
  .plan li { display: flex; gap: 0.6rem; align-items: center; min-block-size: 44px; }
  .plan li svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--brass); }
  .plan li a { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2); }
  .plan--future > p:not(.eyebrow):not(.plan-price) { color: var(--ink-3); font-size: 0.9375rem; }
  .notify-form { display: flex; flex-direction: column; gap: 0.75rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--hair-2); }
  .notify-form h3 { font-size: 1.25rem; }
  .notify-status { font-size: 0.875rem; color: var(--muted); min-block-size: 1.25rem; }
  .notify-fine { font-size: 0.8125rem; color: var(--muted); }
  .notify-fine a { text-decoration: underline; text-underline-offset: 3px; }
  .notify-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

  .desk-head { padding-block-start: 2rem; }
  .desk-panel { width: var(--wrap); margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; }
  .desk-status { font-size: 0.875rem; color: var(--muted); min-block-size: 1.25rem; }
  .desk-list { list-style: none; display: flex; flex-direction: column; border-block-start: 1px solid var(--hair-2); }
  .desk-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1rem; border-block-end: 1px solid var(--hair-2); }
  .desk-item-text { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; }
  .desk-item-text b { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; overflow-wrap: anywhere; }
  .desk-kind { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-ink); }
  .desk-when { font-size: 0.8125rem; color: var(--muted); }
  .desk-item-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .desk-empty { display: flex; flex-direction: column; gap: 1rem; color: var(--muted); }
  .desk-start { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .desk-danger { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; margin-block-start: 1rem; }
  .confirm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 1rem; border: 1px solid var(--wax); border-radius: 6px; background: var(--wax-3); }
  .confirm-row p { flex: 1 0 100%; font-size: 0.9375rem; }
}

@layer responsive {
  @media (prefers-reduced-motion: reduce) {
    .tool-card, .skip-link { transition: none; }
    .tool-card:hover { transform: none; }
    .bg-paper::before { animation: none; }
  }
  @media (max-width: 64rem) {
    .site-header nav { gap: 1rem; }
    .hero, .hero-copy, .tool-head, .workspace, .explain, .candor, .faq-sec .faq, .nc-layout, .state-body { grid-template-columns: minmax(0, 1fr); }
    .hero-copy > *, .tool-head > *, .workspace > *, .explain > *, .candor > *, .faq > *, .nc-layout > *, .state-body > * { grid-column: 1 / -1; }
    .explain, .state-body { gap: 1.75rem; }
    .hero h1 { grid-column: 1 / -1; }
    .lede { grid-column: 1 / -1; max-width: 40rem; }
    .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jump-link { display: inline-flex; }
    .workspace > .tool-form, .workspace > .preview-col, .workspace > .report-col, .workspace--check > .tool-form { grid-column: 1 / -1; position: static; }
    .tool-head h1, .tool-lead { grid-column: 1 / -1; }
    .candor { padding: 3.5rem 2.5rem 7rem; }
    .candor .q, .candor .facts { grid-column: 1 / -1; }
    .candor-seal { inset-inline-start: auto; inset-inline-end: 2.5rem; inset-block-end: 2rem; width: 72px; height: 72px; }
    .faq > h2, .faq .faq-list { grid-column: 1 / -1; }
    .explain-side { grid-column: 1 / -1; position: static; }
    .explain-body, .state-body .explain-body { grid-column: 1 / -1; }
    .nc-checker, .federal-note, .fact-grid { grid-column: 1 / -1; position: static; }
    .yc-callout { grid-template-columns: 1fr; }
    footer { grid-template-columns: 1fr; }
  }
  @media (max-width: 52rem) {
    .tool-trio { grid-template-columns: 1fr; gap: 0.75rem; }
    .tool-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "title arrow" "text arrow"; gap: 0.3rem 1rem; padding: 1.1rem 1.2rem; }
    .tool-card .tool-card-k { grid-area: k; }
    .tool-card .tool-card-title { grid-area: title; font-size: 1.35rem; }
    .tool-card .tool-card-text { grid-area: text; font-size: 0.875rem; }
    .tool-card .card-art { display: none; }
    .tool-card .open { grid-area: arrow; align-self: center; margin: 0; gap: 0; }
    .tool-card .open-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .tool-card .open .arrow { width: 20px; height: 20px; }
    .story-steps { grid-template-columns: 1fr; }
    .story-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .facts-strip { grid-template-columns: 1fr; }
    .facts-strip li { flex-direction: row; gap: 0.75rem; padding: 0.6rem 0; align-items: baseline; }
    .facts-strip li + li { padding-inline-start: 0; border-inline-start: 0; border-block-start: 1px solid var(--hair); }
    .facts-strip b { flex: 0 0 6.5rem; }
    .plans { grid-template-columns: 1fr; }
    .rule-list { columns: 1; }
  }
  @media (max-width: 40rem) {
    :root { --wrap: min(100% - 2rem, 80rem); }
    /* The grain SVG makes the whole hero the LCP element on phones. The
       solid vellum already carries the intended mobile surface. */
    .bg-paper::before { background-image: none; }
    /* Phones: the wordmark on its own row, all four destinations on the next. */
    .site-header { min-block-size: 0; flex-wrap: wrap; row-gap: 0; column-gap: 0.75rem; padding-block: 0.4rem 0.5rem; }
    .site-header .brand { font-size: 1.3rem; gap: 0.5rem; }
    .site-header .brand .mark { width: 28px; height: 28px; }
    .site-header nav { flex: 1 0 100%; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; border-block-start: 1px solid var(--hair); }
    .site-header nav a.button { padding: 0 0.85rem; }
    .hero { padding-block: 1.25rem 0; gap: 1.25rem; }
    .hero-copy { gap: 0.6rem; }
    .hero h1 { font-size: 2.6rem; }
    .lede { font-size: 1rem; }
    .lede-fine { font-size: 0.8125rem; margin-block-start: 0.35rem; }
    .sec { padding-block-start: 4rem; }
    .more-sec { padding-block-start: 2.5rem; }
    .more-grid, .guide-links { grid-template-columns: 1fr; }
    .candor { margin-block-start: 4rem; padding: 2.25rem 1.4rem 6.5rem; border-radius: 6px; }
    .candor .facts > div { grid-template-columns: 1fr; gap: 0.35rem; }
    .tool-head { padding-block-end: 1.5rem; }
    .tool-lead { font-size: 1rem; }
    .tool-form, .result { padding: 1.25rem; }
    .field-pair { gap: 0.75rem; }
    .panel { padding: 0.75rem; border-radius: 6px; }
    .sheet--doc { padding: 1.4rem 1.2rem; max-block-size: 75vh; }
    .cw-title { font-size: 1.05rem; }
    .cw-signature { grid-template-columns: 1fr; }
    .preview-bar { flex-wrap: wrap; gap: 0 1rem; }
    .nc-line { grid-template-columns: 1fr; gap: 0.25rem; }
    .plan { padding: 1.4rem; }
    .yc-callout { padding: 1.1rem; }
    .yc-links .button { width: 100%; }
    .faq-item h3 { font-size: 1.15rem; }
    footer { margin-block-start: 4rem; }
    footer .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Phones above 360px: name and amount side by side, Remove under them. Under
     360px controls.css stacks every row card in one column; this layer would
     override it there, so the range stops where that rule starts. */
  @media (min-width: 22.5625rem) and (max-width: 40rem) {
    .row-card--two { grid-template-columns: minmax(0, 1fr) 6.5rem; }
    .row-card--two .row-remove { grid-column: 1 / -1; }
  }
  @media (max-width: 22.5rem) {
    .field-pair { grid-template-columns: 1fr; }
    .site-header nav { font-size: 0.8125rem; gap: 0.35rem; }
    .site-header nav a.button { padding: 0 0.6rem; }
    .site-header .brand { font-size: 1.15rem; }
    .hero h1 { font-size: 2.25rem; }
  }
}