/* ============================================================================
   Glyphwatch — "the ledger grid"
   One centred 12-column well. Section titles become side labels; exactly two
   full-bleed bands. Layout per design/README.md.
   ========================================================================= */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- Tokens (source of truth: OKLCH) ------------------------------------- */

:root {
  --paper:      oklch(0.973 0.009 84);
  --paper-sunk: oklch(0.947 0.013 82);
  --paper-edge: oklch(0.906 0.016 80);
  --ink:        oklch(0.243 0.019 62);
  --ink-soft:   oklch(0.455 0.021 64);
  --ink-faint:  oklch(0.615 0.018 70);
  --rule:       oklch(0.868 0.014 78);

  --alarm:      oklch(0.523 0.176 31);
  --amber:      oklch(0.628 0.115 74);
  --safe:       oklch(0.485 0.081 152);
  --cool:       oklch(0.505 0.065 232);

  /* The monitoring band carries its own scale — a deeper ink than --ink. */
  --band-bg:    oklch(0.198 0.014 62);
  --band-ink:   oklch(0.937 0.011 80);
  --band-soft:  oklch(0.775 0.016 76);
  --band-faint: oklch(0.622 0.018 72);
  --band-rule:  oklch(0.338 0.017 64);
  --band-red:   oklch(0.702 0.158 34);

  --pad: 40px;
  --well: 1200px;
  --gap: 32px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light only, deliberately.
   The approved design specifies one palette and calls it final, and the page's
   whole argument is typographic craft — a machine-inverted variant undercuts it.
   The previous stylesheet carried a prefers-color-scheme block; it is removed
   rather than left to render a comp nobody approved. `color-scheme: light`
   keeps form controls and scrollbars in the same world. If a dark treatment is
   wanted, it should be designed, not derived. */
:root { color-scheme: light; }

/* --- Base ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', ui-sans-serif, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--alarm); }

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

button, input { font: inherit; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; z-index: 20;
}
.skip:focus { left: 16px; top: 16px; }

/* --- The well ------------------------------------------------------------ */

.container {
  /* The well is the CONTENT measure: 1200px of columns, with the 40px gutters
     outside it. The spec's container is content-box, so a plain
     `max-width: 1200px` under our global border-box would shrink every column
     by 80px — enough to cost the section headings a line and to wrap the
     specimen caption. */
  max-width: calc(var(--well) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

.kicker {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
}

.tech {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--paper-sunk);
  padding: 0.08em 0.34em;
  border-radius: 2px;
}

/* --- Header -------------------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--rule); }

.site-header__inner {
  height: 84px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.brand__mark {
  width: 30px; height: 30px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-size: 25px;
  line-height: 1;
}

.site-nav { display: flex; gap: 34px; }
.site-nav a {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 120ms ease;
}
.site-nav a:hover { color: var(--ink); }

.site-header__cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 8px 16px;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.site-header__cta:hover { background: var(--ink); color: var(--paper); }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: 104px 88px; }

.hero__kicker { grid-column: 1 / -1; margin-bottom: 8px; }

.hero__title {
  grid-column: 1 / span 7;
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  /* Not `balance`: the comp fills the measure and breaks only at the authored
     <br>. Balancing evens the ragged edge and costs an extra line. */
  text-wrap: normal;
}
.hero__title em { font-style: normal; color: var(--alarm); }

.hero__deck {
  grid-column: 9 / span 4;
  align-self: end;
  padding-bottom: 8px;
  display: grid;
  gap: 18px;
  font-size: 17px;
  color: var(--ink-soft);
}

/* --- Bands (full bleed background, contained content) -------------------- */

.band--scan {
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: 72px;
}
.band--scan > .grid { align-items: start; }

.band--monitoring {
  background: var(--band-bg);
  color: var(--band-ink);
  padding-block: 88px;
}
.band--monitoring > .grid { align-items: start; }

/* --- Scanner ------------------------------------------------------------- */

.scan { grid-column: 1 / span 6; }

.scan__label { display: block; margin-bottom: 16px; }

.scan__row { display: flex; gap: 12px; align-items: stretch; }

.scan__input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 22px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: 10px 2px;
}
.scan__input::placeholder { color: var(--ink-faint); }
.scan__input:focus { outline: none; border-bottom-color: var(--alarm); }
.scan__input:focus-visible { outline: none; }

.scan__submit {
  font-weight: 500;
  font-size: 16px;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  padding: 12px 26px;
  border-radius: 2px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease;
}
.scan__submit:hover { background: var(--alarm); }
.scan__submit[disabled] { opacity: 0.55; cursor: progress; }

.scan__hint { margin-top: 16px; font-size: 14px; color: var(--ink-faint); }

/* Verdict key */

.verdict-key {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}
.verdict-key__term {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.verdict-key__term--exposed { color: var(--alarm); }
.verdict-key__term--check   { color: var(--amber); }
.verdict-key__term--review  { color: var(--ink-faint); }
.verdict-key__term--clear   { color: var(--safe); }
.verdict-key dd { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }

/* --- Specimen panel (and the shape every finding takes) ------------------ */

.scan__output { grid-column: 8 / span 5; }

.specimen {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  margin: 0;
  container-type: inline-size;
}
.specimen__caption {
  padding: 14px 22px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.specimen__count { color: var(--alarm); }
/* The caption is one line by design. Below the panel width the full label no
   longer fits beside the count, so it drops to "Specimen" alone — which is what
   the mobile comp shows. Keyed to the panel, not the viewport, because the panel
   is 5 columns on desktop and full width on tablet. */
@container (max-width: 470px) {
  .specimen__label-rest { display: none; }
}

.specimen__body {
  padding: 26px 22px;
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 0 20px;
}
.specimen__mark { background: var(--alarm); border-radius: 3px; }

.specimen__family {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.specimen__verdict {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alarm);
  margin-bottom: 16px;
}
.specimen__detail { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; }

.evidence {
  background: var(--paper-sunk);
  padding: 16px 18px;
  border-radius: 3px;
  margin: 0;
  display: grid;
  gap: 10px;
}
.evidence > div { display: grid; grid-template-columns: 116px 1fr; gap: 14px; }
.evidence dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 3px;
}
.evidence dd {
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  word-break: break-word;
}

/* --- Report (rendered by app.js into the specimen slot) ------------------ */

.report:empty { display: none; }

.report__head { margin-bottom: 20px; }
.report__url {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-faint);
  word-break: break-all;
  margin-bottom: 10px;
}
.report__headline {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.report__headline--exposed { color: var(--alarm); }
.report__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.findings { display: grid; gap: 16px; }

/* Findings wear the specimen card treatment, tinted by verdict. */
.finding {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  padding: 22px;
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 0 20px;
  animation: rise 420ms var(--ease) backwards;
}
.finding__mark { background: var(--ink-faint); border-radius: 3px; }
.finding--exposed .finding__mark { background: var(--alarm); }
.finding--check   .finding__mark { background: var(--amber); }
.finding--review  .finding__mark { background: var(--cool); }
.finding--ok      .finding__mark { background: var(--safe); }

.finding__family {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.finding__title {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.finding--exposed .finding__title { color: var(--alarm); }
.finding--check   .finding__title { color: var(--amber); }
.finding--review  .finding__title { color: var(--cool); }
.finding--ok      .finding__title { color: var(--safe); }

.finding__detail { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; }
.finding__action {
  font-size: 15px;
  padding-left: 16px;
  border-left: 2px solid var(--paper-edge);
  margin-bottom: 14px;
}
.finding__url {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-faint);
  word-break: break-all;
  margin-bottom: 14px;
}

.finding--ok { padding: 14px 22px; }
.finding--ok .finding__family { font-size: 17px; color: var(--ink-soft); }
.finding--ok .finding__title { margin-bottom: 0; }

.cleared { margin-top: 16px; }
.cleared__summary {
  cursor: pointer;
  padding: 14px 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--rule);
}
.cleared__summary::-webkit-details-marker { display: none; }
.cleared__summary::before { content: '+'; color: var(--safe); font-size: 14px; }
.cleared[open] .cleared__summary::before { content: '–'; }
.cleared__summary:hover { color: var(--ink); }

.report__notes {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-faint);
}
.report__notes li { padding-left: 14px; position: relative; }
.report__notes li::before { content: '·'; position: absolute; left: 4px; }

.report__error {
  border-left: 3px solid var(--alarm);
  background: var(--paper);
  border-radius: 3px;
  padding: 18px 20px;
  font-size: 15px;
}

/* --- Sections ------------------------------------------------------------ */

.section--method   { padding-top: 104px; }
.section--position { padding-top: 96px; }
.section--limits   { padding-block: 96px 104px; }

.section__label { grid-column: 1 / span 3; }
.section__label .kicker { margin-bottom: 20px; }
.section__label h2 {
  font-size: 38px;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.section__body { grid-column: 5 / span 8; }

.divider {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.divider--position { margin-top: 104px; }
.divider--limits   { margin-top: 96px; }

/* Method */

.section__intro {
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: 34px;
}

.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid;
  grid-template-columns: 72px 148px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.ledger li:last-child { border-bottom: 1px solid var(--rule); }
.ledger__id {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink-faint);
}
.ledger__name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 20px;
}
.ledger__why { font-size: 15px; color: var(--ink-soft); }
.ledger__row--key .ledger__id,
.ledger__row--key .ledger__name { color: var(--alarm); }

.aside {
  margin-top: 28px;
  padding-left: 20px;
  border-left: 2px solid var(--paper-edge);
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* Position */

.lede {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 34ch;
  margin-bottom: 34px;
}
.position__cols {
  border-top: 3px double var(--rule);
  padding-top: 26px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  font-size: 16px;
  color: var(--ink-soft);
}
.position__cols strong { font-weight: 600; color: var(--ink); }

/* Limits */

.limits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 32px;
}
.limits li {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink-soft);
}
.limits strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 4px;
}

/* --- Monitoring ---------------------------------------------------------- */

.monitoring__pitch { grid-column: 1 / span 6; display: grid; gap: 18px; }
.monitoring__kicker { color: var(--band-red); margin-bottom: -4px; }
.monitoring__pitch h2 {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.monitoring__pitch p { color: var(--band-soft); max-width: 52ch; }

.monitoring__offer { grid-column: 8 / span 5; }

.price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--band-rule);
  margin-bottom: 26px;
}
.price__amount {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.03em;
}
.price__unit { font-size: 15px; color: var(--band-soft); }

.waitlist__label { display: block; color: var(--band-faint); margin-bottom: 12px; }
.waitlist__row { display: flex; gap: 12px; }
.waitlist__input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  background: transparent;
  color: var(--band-ink);
  border: 1px solid var(--band-rule);
  border-radius: 2px;
  padding: 13px 14px;
}
.waitlist__input::placeholder { color: var(--band-faint); }
.waitlist__input:focus { outline: none; border-color: var(--band-red); }
.waitlist__submit {
  background: var(--band-ink);
  color: var(--band-bg);
  border: 0;
  padding: 13px 22px;
  border-radius: 2px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.waitlist__submit:hover { background: var(--band-red); color: var(--band-ink); }
.waitlist__submit[disabled] { opacity: 0.55; cursor: progress; }
.waitlist__hint { margin-top: 14px; font-size: 14px; color: var(--band-faint); }
.waitlist__hint--ok { color: var(--band-ink); }
.waitlist__hint--bad { color: var(--band-red); }

/* --- Footer -------------------------------------------------------------- */

.site-footer__upper { padding-top: 72px; }

.site-footer__brand { grid-column: 1 / span 3; }
.site-footer__brand p {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-faint);
  max-width: 26ch;
}

.site-footer__group--colophon { grid-column: 5 / span 3; }
.site-footer__group--sections { grid-column: 8 / span 2; display: grid; align-content: start; gap: 8px; }
.site-footer__group--dare     { grid-column: 11 / span 2; }

.site-footer__heading {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.site-footer__group--sections .site-footer__heading { margin-bottom: 6px; }
.site-footer__group p,
.site-footer__group a {
  font-size: 14px;
  color: var(--ink-soft);
}
.site-footer__group a { text-decoration: none; }
.site-footer__group a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__group strong { color: var(--ink); font-weight: 600; }

.linkish {
  font-size: 14px;
  color: var(--alarm);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.site-footer__meta {
  margin-top: 56px;
  border-top: 1px solid var(--rule);
  padding: 22px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  font-size: 13px;
  color: var(--ink-faint);
}
.site-footer__version {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  white-space: nowrap;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 14px 0 40px;
  font-size: 13px;
  color: var(--ink-faint);
}
.site-footer__legal a { color: var(--ink-faint); text-decoration: none; }
.site-footer__legal a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__spacer { flex: 1 1 auto; }
.site-footer__parent { color: var(--ink-soft); }
.site-footer__parent a { color: var(--ink); text-decoration: underline; }
.site-footer__parent a:hover { color: var(--alarm); }

/* --- Legal pages --------------------------------------------------------- */

.legal {
  max-width: 42rem;
  padding-block: 56px 88px;
}
.legal h1 { font-size: 46px; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 8px; }
.legal h2 { font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; margin: 40px 0 10px; }
.legal h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; margin: 28px 0 8px; }
.legal hr { margin: 56px 0 0; }
.legal p, .legal li { color: var(--ink-soft); }
.legal p { margin-bottom: 1.05em; }
.legal ul { padding-left: 18px; margin: 0 0 1.05em; }
.legal li { margin-bottom: 8px; }
.legal .sub { color: var(--ink-faint); font-size: 15px; margin-bottom: 36px; }
.legal .back {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 14px;
  color: var(--ink-faint);
  text-decoration: none;
}
.legal .back:hover { color: var(--alarm); }
.legal strong { color: var(--ink); font-weight: 600; }
.legal code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--paper-sunk);
  padding: 0.08em 0.34em;
  border-radius: 2px;
}

/* --- Motion -------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ========================================================================= */
/* Responsive                                                                */
/* ========================================================================= */

@media (max-width: 1279px) {
  .hero__title { font-size: 60px; }
  .section__label h2 { font-size: 34px; }
  .monitoring__pitch h2 { font-size: 38px; }
}

/* Label/body split collapses; the label stacks above the body at full width. */
@media (max-width: 1023px) {
  .hero__title { grid-column: 1 / -1; font-size: 52px; }
  .hero__deck { grid-column: 1 / -1; align-self: auto; padding-bottom: 0; margin-top: 28px; }

  .scan { grid-column: 1 / -1; }
  .scan__output { grid-column: 1 / -1; margin-top: 40px; }

  .section__label,
  .section__body,
  .monitoring__pitch,
  .monitoring__offer { grid-column: 1 / -1; }
  .section__body { margin-top: 28px; }
  .monitoring__offer { margin-top: 36px; }

  .site-footer__brand { grid-column: 1 / span 6; }
  .site-footer__group--colophon { grid-column: 7 / span 6; }
  .site-footer__group--sections { grid-column: 1 / span 6; margin-top: 32px; }
  .site-footer__group--dare { grid-column: 7 / span 6; margin-top: 32px; }
}

/* --- Mobile (390px reference) -------------------------------------------- */

@media (max-width: 767px) {
  :root { --pad: 20px; --gap: 20px; }

  body { font-size: 16px; line-height: 1.6; }

  .grid { grid-template-columns: 1fr; }
  .grid > * { grid-column: 1 / -1 !important; }

  /* Header: brand + CTA on one row, nav on a hairline row beneath. */
  .site-header__inner {
    height: auto;
    flex-wrap: wrap;
    gap: 0;
    padding-block: 0;
  }
  .brand { min-height: 64px; }
  .site-header__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .site-nav {
    order: 3;
    width: 100%;
    gap: 20px;
    border-top: 1px solid var(--rule);
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    overflow-x: auto;
  }
  .site-nav a { padding-block: 14px; white-space: nowrap; }

  .hero { padding-block: 48px 44px; }
  .hero__title {
    font-size: 42px;
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: pretty;
  }
  .hero__deck { gap: 16px; margin-top: 24px; }

  .band--scan { padding-block: 40px; }
  .scan__row { display: grid; gap: 14px; }
  .scan__input { font-size: 20px; }
  .scan__submit { min-height: 48px; }
  .scan__output { margin-top: 32px; }

  .verdict-key { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .verdict-key__item {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--rule);
    align-items: baseline;
  }
  .verdict-key__item:first-child { border-top: 0; }
  .verdict-key dd { margin: 0; }

  .specimen__family { font-size: 25px; }
  .specimen__body { padding: 20px 14px; gap: 0 14px; }
  .specimen__caption { padding: 12px 14px; gap: 10px; }
  .evidence { padding: 14px; }
  .evidence > div { grid-template-columns: 1fr; gap: 0; }
  .evidence dt { margin-bottom: 4px; padding-top: 0; }

  .finding { padding: 18px 14px; gap: 0 14px; }
  .finding__family { font-size: 21px; }
  .finding--ok { padding: 12px 14px; }

  .section--method   { padding-top: 48px; }
  .section--position { padding-top: 44px; }
  .section--limits   { padding-block: 44px 48px; }
  .divider--position { margin-top: 48px; }
  .divider--limits   { margin-top: 44px; }

  .section__label h2 { font-size: 32px; line-height: 1.07; }
  .section__label .kicker { margin-bottom: 14px; }
  .section__body { margin-top: 20px; }

  /* Name-ID rows become stacked blocks. */
  .ledger li {
    grid-template-columns: auto 1fr;
    gap: 0 12px;
    padding: 16px 0;
    align-items: baseline;
  }
  .ledger__id { font-size: 12px; }
  .ledger__name { font-size: 19px; }
  .ledger__why { grid-column: 1 / -1; margin-top: 6px; }

  .lede { font-size: 23px; max-width: none; }
  .position__cols { grid-template-columns: 1fr; gap: 18px; }

  .limits { grid-template-columns: 1fr; gap: 20px; }

  .band--monitoring { padding-block: 48px; }
  .monitoring__pitch h2 { font-size: 34px; }
  .waitlist__row { display: grid; gap: 12px; }
  .waitlist__submit { min-height: 48px; }

  .site-footer__upper { padding-top: 40px; }
  .site-footer__group--colophon,
  .site-footer__group--sections,
  .site-footer__group--dare {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
  }
  .site-footer__meta {
    margin-top: 32px;
    flex-direction: column;
    gap: 10px;
  }
  .site-footer__version { white-space: normal; }
  .site-footer__legal { padding-bottom: 32px; }
  .site-footer__spacer { display: none; }

  .legal { padding-block: 36px 56px; }
  .legal h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}