/* Constraint First: one stylesheet (29 Oct 2026 redesign).
   Every choice here traces to a reference in research/design-references/README.md:
   - Type: Mona Sans (OFL, GitHub), semi-expanded for headlines, as the open stand-in for the
     wide neo-grotesks of Harvey (Diatype) and Stripe (Söhne). Figures and data in Martian Mono
     (OFL, Evil Martians), as Ramp, Harvey and Mercury set numbers in a mono.
   - Colour: a white canvas with graphite product bands (Linear, Harvey), cool grey panels
     (Harvey), and one green signal for "time back" (Granola's green call to action).
   - Layout: split hero with the supporting copy in its own column (Harvey), two-tone headlines
     (Stripe, Linear), product shown working in HTML mock-ups rather than photos (Granola,
     Superhuman, Glean), a tools strip (Fyxer), a bento of services (Stripe, Linear), and a
     savings readout in big mono figures (Ramp, Superhuman).
   - Radii are deliberately mixed: pill buttons (Linear, Ramp), 16px product windows (Granola,
     Superhuman), square hairline tables (Stripe pricing).

   Fonts were subset 29 Oct 2026 with fontTools 4.65 to the same Latin range as before (no em or
   en dash glyphs); Mona Sans keeps wdth 100 to 125 and wght 400 to 700, Martian Mono wght 400 to
   500 at wdth 100. The fallbacks are measured against Arial and Courier New on site copy. */

@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/assets/fonts/mona-sans-latin.woff2?v=f192b4da") format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/martian-mono-latin.woff2?v=8bff7cea") format("woff2");
}
@font-face {
  font-family: "Mona Fallback";
  font-weight: 100 549;
  src: local("Arial"), local("ArialMT");
  size-adjust: 103.7%;
  ascent-override: 105.1%;
  descent-override: 30.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Mona Fallback";
  font-weight: 550 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  size-adjust: 102.6%;
  ascent-override: 106.3%;
  descent-override: 31.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Martian Fallback";
  src: local("Courier New"), local("CourierNewPSMT");
  size-adjust: 116.6%;
  ascent-override: 85.7%;
  descent-override: 17.1%;
  line-gap-override: 0%;
}

:root {
  --bg: #ffffff;
  --panel: #f3f4f2;
  --panel-2: #e9ebe8;
  --ink: #0b0d0c;
  --ink-2: #3f4541;
  --ink-3: #626a65;
  --line: #e1e4e0;
  --line-2: #c9cec9;
  --control: #808882;
  --graphite: #111513;
  --graphite-2: #1a1f1c;
  --graphite-3: #262c28;
  --on-dark: #f1f4f2;
  --on-dark-2: #a3aca6;
  --on-dark-line: #2e3531;
  --green: #0a7a4e;
  --green-ink: #075c3b;
  --green-soft: #e4f3ec;
  --mint: #57e0a4;

  --sans: "Mona Sans", "Mona Fallback", Arial, Helvetica, sans-serif;
  --mono: "Martian Mono", "Martian Fallback", "Courier New", monospace;

  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --measure: 64ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; scroll-padding-bottom: 130px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--green-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--green-soft); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p, ul, ol, dl, figure { margin: 0; }
p + p { margin-top: 0.9em; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type (Harvey and Stripe scale: very large display, tight leading) ---------- */

.display {
  font-family: var(--sans);
  font-stretch: 112.5%;
  font-weight: 560;
  font-size: clamp(2.6rem, 1.2rem + 5vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h2 {
  font-stretch: 112.5%;
  font-weight: 560;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
}
.h3 { font-stretch: 106%; font-weight: 600; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.012em; }
.h4 { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; }
.eyebrow { font-size: 0.9375rem; font-weight: 500; color: var(--ink-3); }
.lede { font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); line-height: 1.45; color: var(--ink-2); max-width: 34em; letter-spacing: -0.005em; }
.prose { max-width: var(--measure); }
.prose p, .prose li { color: var(--ink-2); }
.prose h2 { font-stretch: 112.5%; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.15; margin: 2em 0 0.5em; color: var(--ink); }
.prose ul { padding-left: 1.1em; margin: 1em 0; }
.prose li + li { margin-top: 0.4em; }
.prose strong { color: var(--ink); }
.muted { color: var(--ink-3); }
.small { font-size: 0.9375rem; }

/* ---------- header ---------- */

.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(8px); } }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-stretch: 118%; font-weight: 640; font-size: 1.1rem; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark:hover { color: var(--ink); }
.wordmark-mark { width: 20px; height: 20px; flex: none; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav-links { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--green); }
.menu { display: none; }

/* ---------- buttons (pill: Linear, Ramp) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  background: var(--green); color: #fff; border: 1px solid var(--green);
  font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
.btn-small { min-height: 40px; padding: 8px 18px; font-size: 0.9375rem; }
.site-header .btn-small { background: #fff; color: var(--green-ink); border-color: var(--control); }
.site-header .btn-small:hover { background: var(--green-soft); color: var(--green-ink); border-color: var(--green); }
.link-arrow { font-weight: 600; text-decoration: none; color: var(--ink); }
.link-arrow::after { content: " \2192"; color: var(--green); }
.link-arrow:hover { text-decoration: underline; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.cta-note { font-size: 0.875rem; color: var(--ink-3); margin-top: 8px; }

/* ---------- heroes (split: Harvey) ---------- */

.hero { padding-block: clamp(56px, 9vw, 128px) clamp(40px, 6vw, 80px); }
.hero-top, .page-hero .wrap {
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: end;
}
.hero-top > .eyebrow, .page-hero .eyebrow { grid-column: 1 / -1; margin-bottom: 20px; }
.hero-top > .display, .page-hero .display { grid-column: 1; }
.hero-top > .lede, .page-hero .lede { grid-column: 2; padding-bottom: 0.5em; }
.page-hero .wrap > :not(.eyebrow):not(.display):not(.lede) { grid-column: 1 / -1; }
.page-hero { padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 64px); }
.page-hero .display { font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4.75rem); }

/* home: the fork (two routes) */
.choices { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 16px; margin-top: clamp(40px, 6vw, 72px); }
.choice {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 40px);
  border-radius: 20px; background: var(--panel); color: var(--ink); text-decoration: none; min-height: 100%;
}
.choice:hover { color: var(--ink); background: var(--panel-2); }
.choice .eyebrow { color: var(--ink-3); }
.choice-title { font-stretch: 112.5%; font-weight: 560; font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.3rem); line-height: 1.05; letter-spacing: -0.025em; }
.choice-text { color: var(--ink-2); max-width: 32em; }
.choice .link-arrow { margin-top: auto; padding-top: 12px; }
.choice-here { background: var(--graphite); color: var(--on-dark); }
.choice-here:hover { background: var(--graphite-2); color: var(--on-dark); }
.choice-here .eyebrow, .choice-here .choice-text { color: var(--on-dark-2); }
.choice-here .link-arrow { color: var(--on-dark); }
.choice-here .link-arrow::after { color: var(--mint); }
.offer-list { display: grid; gap: 0; margin: 4px 0 0; border-top: 1px solid var(--line-2); }
.offer-list span { padding: 10px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); font-weight: 500; }
.offer-list span::before { content: "\2192"; color: var(--green); margin-right: 10px; }
.offer-list .free { border-bottom: 0; color: var(--green-ink); }
.choices-foot { margin-top: 20px; color: var(--ink-2); }

/* tools strip (Fyxer) */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 28px; font-size: 0.9375rem; color: var(--ink-3); }
.tools span.chip { border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; color: var(--ink-2); background: #fff; }

/* ---------- product mock-ups (Granola, Superhuman, Glean) ---------- */

.mock { margin-top: 20px; border-radius: 16px; background: var(--graphite-2); border: 1px solid var(--on-dark-line); color: var(--on-dark); font-size: 0.875rem; overflow: hidden; }
.mock-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--on-dark-line); color: var(--on-dark-2); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; }
.mock-bar b { color: var(--on-dark); font-weight: 500; }
.mock-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--on-dark-line); }
.mock-row:last-child { border-bottom: 0; }
.mock-row .what { color: var(--on-dark); }
.mock-row .what small { display: block; color: var(--on-dark-2); font-size: 0.8125rem; margin-top: 2px; }
.mock-tag { flex: none; font-family: var(--mono); font-size: 0.75rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--on-dark-line); color: var(--on-dark-2); white-space: nowrap; }
.mock-tag.go { background: var(--mint); border-color: var(--mint); color: var(--graphite); }
.mock-q { margin: 14px; padding: 10px 14px; border-radius: 12px; background: var(--graphite-3); color: var(--on-dark); }
.mock-a { margin: 0 14px 14px; color: var(--on-dark); }
.mock-a .cite { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 0.75rem; padding: 3px 8px; border-radius: 6px; background: rgba(87, 224, 164, 0.14); color: var(--mint); }
.mock-lines { padding: 6px 14px 12px; }
.mock-lines i { display: block; height: 7px; border-radius: 4px; background: var(--graphite-3); margin-top: 9px; }
.mock-lines i:nth-child(2) { width: 82%; } .mock-lines i:nth-child(3) { width: 64%; } .mock-lines i:nth-child(4) { width: 74%; }
.mock-quote { padding: 6px 14px 4px; font-size: 0.8125rem; }
.mq { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--on-dark-line); }
.mq:last-child { border-bottom: 0; }
.mq span:last-child { font-family: var(--mono); font-size: 0.75rem; color: var(--on-dark-2); white-space: nowrap; }
.mq.head span { font-family: var(--mono); font-size: 0.75rem; color: var(--on-dark-2); }
.mock-note { font-family: var(--mono); font-size: 0.75rem; color: var(--on-dark-2); padding: 0 14px 12px; }

/* ---------- sections (uneven rhythm on purpose) ---------- */

.section { padding-block: clamp(72px, 9vw, 128px); }
.section + .section:not(.section-tint):not(.section-dark) { border-top: 1px solid var(--line); }
.section-tint { background: var(--panel); }
.section-dark { background: var(--graphite); color: var(--on-dark); }
.section-dark .h2 { color: var(--on-dark); }
.section-head { display: block; }
.section-body { min-width: 0; }
.section-body > .lede, .section-body > .prose { margin-top: 20px; }
.section-foot { margin-top: 36px; }
.h2 .soft, .lede .soft { color: var(--ink-3); }
.section-dark .h2 .soft { color: var(--on-dark-2); }

/* steps: a rail with dots (Linear changelog), not numbered eyebrows */
.numbered { list-style: none; padding: 0; margin: clamp(32px, 4vw, 48px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 40px); position: relative; }
.numbered > li { position: relative; padding-top: 28px; }
.numbered > li::before { content: ""; position: absolute; left: 0; right: -40px; top: 6px; height: 1px; background: var(--line-2); }
.numbered > li:last-child::before { right: 0; }
.numbered > li::after { content: ""; position: absolute; left: 0; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); }
.numbered .n { display: none; }
.numbered h3 { margin-bottom: 8px; }
.numbered p { color: var(--ink-2); }
.numbered.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.numbered.two > li::before { right: 0; }

/* specification list: two columns with hairlines (Stripe docs) */
.spec { list-style: none; padding: 0; margin: clamp(28px, 4vw, 44px) 0 0; border-top: 1px solid var(--ink); max-width: 980px; }
.spec > li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.spec .n { display: none; }
.spec .what { font-weight: 600; }
.spec .why { color: var(--ink-2); }

/* facts: a spec readout with mono figures (Ramp, Mercury) */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 5vw, 56px); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.facts > div { padding: 18px 20px; background: #fff; }
.facts > div + div { border-left: 1px solid var(--line); }
.facts dt { font-size: 0.875rem; color: var(--ink-3); font-weight: 500; }
.facts dd { margin: 8px 0 0; font-family: var(--mono); font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }
.facts dd small { display: block; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-3); margin-top: 6px; letter-spacing: 0; }

/* price tables (Stripe pricing) */
.ladder { width: 100%; max-width: 860px; border-collapse: collapse; margin-top: 28px; }
.ladder caption { text-align: left; font-size: 0.875rem; color: var(--ink-3); padding-bottom: 10px; }
.ladder th, .ladder td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ladder thead th { font-size: 0.875rem; color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--ink); }
.ladder td.price { font-family: var(--mono); font-size: 1.15rem; white-space: nowrap; }
.ladder tr.now th::after { content: "Now"; margin-left: 10px; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); }
.vat { display: inline-block; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; font-weight: 400; }
.note-box { margin-top: 24px; max-width: var(--measure); padding: 16px 20px; border-radius: 14px; background: var(--panel); }
.note-box p { color: var(--ink-2); }
.guarantee-slot { margin-top: 24px; max-width: var(--measure); padding: 16px 20px; border-radius: 14px; border: 1px dashed var(--line-2); }
.guarantee-slot code { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); }

/* home: services bento on graphite (Linear, Stripe) */
.services { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 52px); }
.service { grid-column: span 3; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 20px; background: var(--graphite-2); border: 1px solid var(--on-dark-line); }
.service.wide { grid-column: span 4; }
.service.narrow { grid-column: span 2; }
.service .h3 a { color: var(--on-dark); text-decoration: none; }
.service .h3 a:hover { text-decoration: underline; text-decoration-color: var(--mint); }
.service p { color: var(--on-dark-2); }
.service-price { margin-top: auto; padding-top: 14px; font-family: var(--mono); font-size: 0.875rem; color: var(--on-dark) !important; }
.service-price .vat { display: block; margin-top: 4px; white-space: normal; color: var(--on-dark-2); }
.service .mock { margin-top: 8px; background: var(--graphite); }
.choice .mock { display: block; margin: 8px 0 4px; }
.mock.solo { max-width: 560px; margin-top: 36px; background: var(--graphite); }
.choice .mock-q, .choice .mock-a { display: block; }

/* savings readout (Ramp calculator, Superhuman's time figure) */
.exhibit { margin-top: clamp(32px, 4vw, 52px); }
.exhibit-head { display: grid; gap: 6px; margin-bottom: 20px; }
.exhibit-no { display: none; }
.exhibit-title { font-stretch: 106%; font-weight: 600; font-size: 1.25rem; letter-spacing: -0.012em; }
.exhibit-sub { color: var(--ink-3); font-size: 0.9375rem; }
.exhibit-source { margin-top: 16px; font-size: 0.8125rem; color: var(--ink-3); max-width: 80ch; }
.exhibit-source b { color: var(--ink-2); }
.sum { width: 100%; max-width: 860px; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; }
.sum th, .sum td { padding: 14px 20px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: baseline; }
.sum td { text-align: right; font-family: var(--mono); font-size: 1rem; white-space: nowrap; }
.sum th small { display: block; font-size: 0.8125rem; color: var(--ink-3); }
.sum tr.total th, .sum tr.total td { border-bottom: 0; background: var(--graphite); color: var(--on-dark); }
.sum tr.total th small { color: var(--on-dark-2); }
.sum tr.total td { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); color: var(--mint); letter-spacing: -0.04em; }
.bars { display: grid; gap: 12px; max-width: 860px; background: #fff; border-radius: 16px; padding: 20px; }
.bars-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: center; }
.bars-row .label small { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.bars-track { height: 40px; }
.bars-fill { height: 100%; border-radius: 10px; background: var(--panel-2); display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font-family: var(--mono); font-size: 0.9375rem; min-width: 96px; }
.bars-fill.accent { background: var(--graphite); color: var(--mint); }

/* closing band (graphite, split: Harvey) */
.band { background: var(--graphite); color: var(--on-dark); padding-block: clamp(64px, 8vw, 104px); }
.band .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; }
.band .h2 { color: var(--on-dark); grid-row: 1 / span 2; align-self: start; }
.band p { color: var(--on-dark-2); max-width: 34em; }
.band .cta-row { grid-column: 2; margin-top: 0; }
.band .wrap > p { grid-column: 2; grid-row: 1; align-self: end; }
.band .wrap > .cta-row { grid-row: 2; }
.band a:not(.btn) { color: var(--on-dark); }
.band .btn { background: var(--mint); border-color: var(--mint); color: var(--graphite); }
.band .btn:hover { background: #fff; border-color: #fff; }

/* forms */
.form { display: grid; gap: 18px; max-width: 640px; margin-top: 28px; }
.form .row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field .hint { font-weight: 400; font-size: 0.8125rem; color: var(--ink-3); }
.field input, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--control); border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.form-status { min-height: 1.6em; font-size: 0.9375rem; }
.field-error { margin: 2px 0 0; font-size: 0.875rem; font-weight: 600; color: #b3261e; }
.form-status.ok { color: var(--green-ink); font-weight: 600; }
.form-status.err { color: #b3261e; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-small { font-size: 0.8125rem; color: var(--ink-3); }

/* ---------- the Constraint Check ---------- */

.check { max-width: 860px; }
.check-part { margin-top: clamp(48px, 6vw, 72px); }
.check-part > .eyebrow { display: block; margin-bottom: 6px; }
.check-part > h2 { margin-bottom: 6px; }
.q { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 24px 0 20px; min-width: 0; }
.q legend { padding: 0; float: left; width: 100%; margin-bottom: 14px; display: flex; gap: 14px; font-stretch: 106%; font-weight: 600; font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem); line-height: 1.3; letter-spacing: -0.01em; }
.q legend .qn { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; color: var(--ink-3); padding-top: 0.35em; min-width: 26px; }
.q .opts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-left: 40px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt label { display: flex; gap: 12px; align-items: flex-start; height: 100%; padding: 12px 14px; border: 1px solid var(--control); border-radius: 12px; background: #fff; cursor: pointer; font-size: 0.9375rem; line-height: 1.4; }
.opt label::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: #fff; }
.opt label:hover { border-color: var(--ink-3); }
.opt input:checked + label { border-color: var(--green); background: var(--green-soft); }
.opt input:checked + label::before { border: 5px solid var(--green); }
.opt input:focus-visible + label { outline: 2px solid var(--green); outline-offset: 2px; }
.q.missing legend { color: #b3261e; }
.q.missing .opt label { border-color: #d9a29d; }
.check-bar { position: sticky; bottom: 12px; z-index: 10; margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 12px 12px 20px; border-radius: 999px; background: var(--graphite); color: var(--on-dark); }
.progress { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 0.75rem; color: var(--on-dark-2); }
.progress-track { width: 140px; height: 6px; border-radius: 3px; background: var(--graphite-3); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--mint); }
.check-bar .btn { background: var(--mint); border-color: var(--mint); color: var(--graphite); }
.check-bar .btn.is-waiting { background: transparent; border-color: var(--on-dark-2); color: var(--on-dark); font-weight: 500; }
.check-error { width: 100%; color: #ffb4ab; font-weight: 600; font-size: 0.9375rem; padding: 0 8px 4px; }
.check-error:empty { display: none; }
.result { margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--ink); }
.result[hidden] { display: none; }
.result h2:focus { outline: none; }
.scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.score { padding: 20px 22px; border-radius: 16px; background: var(--panel); }
.score .eyebrow { display: block; }
.score-value { font-family: var(--mono); font-size: 2.6rem; line-height: 1.05; margin-top: 8px; letter-spacing: -0.04em; }
.score-value small { font-family: var(--sans); font-size: 0.9375rem; color: var(--ink-3); letter-spacing: 0; }
.score-band { font-weight: 600; }
.meter { height: 6px; border-radius: 3px; background: var(--panel-2); margin-top: 14px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--green); }
.constraint { margin-top: 24px; padding: 26px; border-radius: 20px; background: var(--graphite); color: var(--on-dark); }
.constraint .eyebrow { color: var(--mint); }
.constraint .h3 { margin-top: 6px; font-stretch: 112.5%; font-size: 1.6rem; }
.constraint p { color: var(--on-dark-2); margin-top: 10px; max-width: 62ch; }
.area-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; max-width: 640px; }
.area-list li { display: grid; grid-template-columns: minmax(0, 1fr) 140px 48px; gap: 14px; align-items: center; font-size: 0.9375rem; }
.area-list .meter { margin-top: 0; }
.area-list .v { text-align: right; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }
.next-problem { margin-top: 28px; font-stretch: 106%; font-weight: 600; font-size: 1.25rem; line-height: 1.35; max-width: 40ch; }
.result-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 22px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--green-ink); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* misc */
.empty-state { margin-top: 32px; padding: clamp(24px, 4vw, 40px); border-radius: 20px; background: var(--panel); max-width: 760px; }
.empty-state p { color: var(--ink-2); margin-top: 12px; }
.faq { margin-top: 28px; max-width: 860px; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 1.5rem; line-height: 1; color: var(--green); }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-q { display: inline; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; }
.faq .faq-a { padding: 0 0 20px; color: var(--ink-2); max-width: 66ch; }
.legal { padding-block: clamp(40px, 6vw, 72px); }
.legal .prose h2 { font-size: 1.3rem; }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 56px 36px; font-size: 0.9375rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid p { color: var(--ink-2); max-width: 30ch; margin-top: 12px; }
.footer-grid h2 { font-size: 0.875rem; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.footer-grid a { color: var(--ink-2); text-decoration: none; display: inline-block; padding-block: 6px; }
.footer-grid a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 0.8125rem; color: var(--ink-3); }
.footer-legal a { color: var(--ink-3); }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .nav-links, .nav > .btn { display: none; }
  .menu { display: block; }
  .menu > summary { list-style: none; cursor: pointer; min-height: 40px; padding: 8px 18px; border: 1px solid var(--line-2); border-radius: 999px; font-weight: 600; font-size: 0.9375rem; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { background: var(--ink); color: #fff; border-color: var(--ink); }
  .menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; }
  .menu-panel ul { list-style: none; padding: 0; margin: 0; }
  .menu-panel li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
  .menu-panel .btn { margin-top: 20px; width: 100%; }
}

@media (max-width: 900px) {
  .hero-top, .page-hero .wrap, .band .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-top > .lede, .page-hero .lede { grid-column: 1; margin-top: 20px; padding-bottom: 0; }
  .band .wrap > p, .band .cta-row, .band .h2 { grid-column: 1; grid-row: auto; }
  .choices, .services { grid-template-columns: minmax(0, 1fr); }
  .service, .service.wide, .service.narrow { grid-column: auto; }
  .numbered, .numbered.two { grid-template-columns: minmax(0, 1fr); }
  .numbered > li::before { right: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { border-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .spec > li { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .form .row-2, .scores { grid-template-columns: minmax(0, 1fr); }
  .q .opts { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .area-list li { grid-template-columns: minmax(0, 1fr) 80px 40px; }
  .bars-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  /* One compact row on phones, so the bar stays shorter than the scroll padding (WCAG 2.4.11). */
  html { scroll-padding-bottom: 150px; }
  .check-bar { flex-wrap: nowrap; border-radius: 16px; padding: 8px 8px 8px 14px; bottom: 8px; gap: 10px; }
  .check-bar .btn { min-height: 44px; padding: 8px 14px; font-size: 0.875rem; line-height: 1.2; text-align: center; flex: 0 1 auto; }
  .progress { flex: none; }
  .progress-track { display: none; }
  .check-error { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 8px; padding: 10px 14px; border-radius: 12px; background: var(--graphite); }
  .sum th, .sum td { padding: 12px 14px; }
  .service { padding: 22px; }

  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack, .stack tbody, .stack tr, .stack td, .stack th { display: block; width: 100%; }
  .stack tbody tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .stack td, .stack th { border: 0; padding: 3px 0 !important; text-align: left !important; }
  .ladder td.price { white-space: normal; }
  .stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-family: var(--sans); font-size: 0.8125rem; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .fade { animation: fade 0.45s ease-out both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

@media print {
  .site-header, .site-footer, .band, .skip, .check-intro, #check-form, .result-actions, .result .form { display: none !important; }
  body { font-size: 11pt; }
  .constraint { background: #fff; color: #000; border: 1px solid #000; }
}