/* Written by Kone Tshivhinda & Claude.
   Editorial ledger: warm paper, ink, one deep blue. Serif headlines, system sans for the work.
   The dot grid behind the hero adapts Magic UI's Dot Pattern and the marquee adapts Magic UI's
   Marquee (both MIT, magicui.design): the CSS here is ours, the ideas and credit are theirs. */
:root {
  color-scheme: light;
  --paper: #f7f3ea;
  --paper-deep: #efe9dc;
  --surface: #fffdf8;
  --ink: #17191a;
  --ink-soft: #3c4147;
  --muted: #6a6f74;
  --rule: #e0d8c8;
  --rule-strong: #cdc3ae;
  --accent: #1c3f8f;
  --accent-deep: #142e69;
  --accent-soft: #e7ecf8;
  --accent-ink: #ffffff;
  --done: #1c6444;
  --done-bg: #e4f0e8;
  --work: #1c3f8f;
  --work-bg: #e7ecf8;
  --warn: #7d5300;
  --warn-bg: #f8ecd2;
  --wait: #6a6f74;
  --wait-bg: #ede8dd;
  --bad: #8f2a2a;
  --bad-bg: #f8e7e6;
  --shadow: 0 1px 2px rgba(23, 25, 26, 0.05), 0 12px 32px -18px rgba(23, 25, 26, 0.28);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --radius: 12px;
  --wrap: 1120px;
  --wrap-app: 1000px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #14161a;
    --paper-deep: #101215;
    --surface: #1b1e23;
    --ink: #ece8df;
    --ink-soft: #c3c0b8;
    --muted: #9ba0a6;
    --rule: #2c3138;
    --rule-strong: #3b414a;
    --accent: #93b0ee;
    --accent-deep: #b6c9f4;
    --accent-soft: #1e2942;
    --accent-ink: #0f1420;
    --done: #86d3a6;
    --done-bg: #173327;
    --work: #9ab6ef;
    --work-bg: #1b2a45;
    --warn: #e5b85a;
    --warn-bg: #3a2f14;
    --wait: #9ba0a6;
    --wait-bg: #262b31;
    --bad: #f09a9a;
    --bad-bg: #3a1f1f;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); text-underline-offset: 3px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--surface); color: var(--ink); padding: 10px 16px; border: 1px solid var(--rule-strong);
}
.skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Above the bar on every screen, so the alpha state is never hidden by the app shell. */
.alpha {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  padding: 8px 20px; text-align: center;
  background: var(--accent-soft); color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
}
.alpha strong {
  color: var(--accent); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
@media (max-width: 560px) {
  .alpha { padding: 7px 14px; font-size: 12.5px; flex-wrap: wrap; gap: 2px 8px; }
}

/* ---------------------------------------------------------------- chrome ----
   A thin paper bar that stays put; the wordmark is set in the serif so the product
   reads as a document tool, not a dashboard. */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.mark rect { fill: var(--accent); stroke: none; opacity: 0.16; }
.wordmark { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.bar-space { flex: 1; }
.nav { color: var(--ink-soft); text-decoration: none; font-size: 15px; }
.nav:hover { color: var(--accent); }
.foot {
  border-top: 1px solid var(--rule);
  padding: 28px;
  color: var(--muted);
  font-size: 13.5px;
}
.foot-inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 40px; justify-content: space-between; }
.foot p { margin: 0; max-width: 62ch; }
.foot-meta { display: flex; gap: 16px; flex-wrap: wrap; }

main { width: 100%; flex: 1; }

/* ---------------------------------------------------------------- type ---- */
h1, h2, h3, .display { font-family: var(--serif); font-weight: 600; color: var(--ink); }
h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 8px; overflow-wrap: anywhere; }
h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.01em; margin: 36px 0 14px; }
h3 { font-size: 15px; margin: 22px 0 8px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--sans); }
p { margin: 0 0 14px; }
.eyebrow {
  margin: 0 0 14px; font: 600 12px/1.4 var(--sans); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 56ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.error { color: var(--bad); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }

/* ---------------------------------------------------------------- home ---- */
.home { display: block; }
.hero {
  position: relative; overflow: clip;
  padding: clamp(48px, 7vw, 96px) 28px clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--rule);
}
/* Dot Pattern (Magic UI, MIT), rebuilt as a masked CSS grid so it adds no request. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--rule-strong) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 80% at 70% 20%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 20%, #000 20%, transparent 72%);
  opacity: 0.75;
}
.hero-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { font-size: clamp(17px, 1.6vw, 20px); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 22px; padding: 5px 12px 5px 10px;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft);
  font: 600 12px/1.4 var(--sans); letter-spacing: 0.04em;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* Animated Shiny Text (Magic UI, MIT): one slow glint on the alpha line, nothing more. */
.shine {
  background: linear-gradient(100deg, var(--muted) 35%, var(--ink) 50%, var(--muted) 65%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shine 7s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.cta-note { color: var(--muted); font-size: 14px; }

.signin { position: relative; }
.signin .card {
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}
.signin h2 { margin: 0 0 4px; font-size: 24px; }
.signin .muted { margin-bottom: 18px; }
.field-help { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.trust-line { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; color: var(--muted); font-size: 13px; }
.trust-line span { display: inline-flex; align-items: center; gap: 6px; }
.trust-line span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rule-strong); }

/* Marquee (Magic UI, MIT): calm by default, pauses on hover and under reduced motion. */
.marquee { overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--paper-deep); }
.marquee-track {
  display: flex; width: max-content; gap: 0;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: 0; padding: 14px 0; }
.marquee-group span {
  display: inline-flex; align-items: center; gap: 28px; padding: 0 28px;
  font: 600 12.5px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap;
}
.marquee-group span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--rule-strong); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 6vw, 84px) 28px; }
.section-head { max-width: 62ch; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 12px; }
.section-head p { color: var(--ink-soft); font-size: 17px; margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-strong); }
.step { padding: 26px 28px 8px 0; border-right: 1px solid var(--rule); }
.step:last-child { border-right: 0; }
.step + .step { padding-left: 28px; }
.step-num { font: italic 600 34px/1 var(--serif); color: var(--accent); }
.step h3 { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: 21px; color: var(--ink); margin: 16px 0 8px; font-weight: 600; }
.step p { color: var(--muted); margin: 0; }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fact {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 22px 22px 18px;
}
.fact-value { font-family: var(--serif); font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: lining-nums; }
.fact-value small { font-size: 0.55em; color: var(--muted); margin-left: 2px; }
.fact-label { margin: 12px 0 0; color: var(--muted); font-size: 14px; }

/* One ink panel breaks the paper, for the machine-facing part of the product. */
.panel-ink {
  margin: 0 28px; padding: clamp(32px, 4vw, 56px);
  background: var(--ink); color: var(--paper);
  border-radius: 18px;
}
.panel-ink .inner { max-width: 1000px; margin: 0 auto; }
.panel-ink h2 { color: var(--paper); margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); }
.panel-ink p { color: #c9c6be; max-width: 58ch; }
.panel-ink .eyebrow { color: #a9bdf0; }
.panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.panel-grid li { border-top: 1px solid #3a3d40; padding-top: 16px; }
.panel-grid strong { display: block; font-family: var(--serif); font-size: 19px; color: var(--paper); margin-bottom: 6px; }
.panel-grid span { color: #b7b4ac; font-size: 14.5px; }
.code {
  margin: 28px 0 0; padding: 18px 20px; overflow-x: auto;
  background: #0f1113; border: 1px solid #2c2f32; border-radius: 10px;
  font: 13px/1.7 var(--mono); color: #d8d5cd;
}
.code b { color: #9fb7f2; font-weight: 500; }

.open { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 40px; align-items: center; }
.open h2 { margin-top: 0; }
.license-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.license-list li { display: flex; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 12px; color: var(--ink-soft); }
.license-list b { font-family: var(--mono); font-size: 13px; color: var(--accent); min-width: 88px; }

/* ---------------------------------------------------------------- app ---- */
.page { max-width: var(--wrap-app); margin: 0 auto; padding: 40px 20px 64px; }
.page-head { margin-bottom: 24px; }
.page-head h1 { font-size: clamp(26px, 3vw, 34px); }
.page-head .lede { font-size: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 24px; box-shadow: 0 1px 0 rgba(23, 25, 26, 0.02);
}
.narrow { max-width: 440px; margin: 48px auto; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 15px; }
input[type="password"], input[type="text"], input[type="number"] {
  width: 100%; padding: 11px 13px; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: 8px;
}
input::placeholder { color: var(--muted); }
select {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: 8px;
}
input:focus, select:focus { border-color: var(--accent); }
button, .button {
  font: 600 15px/1 var(--sans); cursor: pointer; padding: 12px 20px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  text-decoration: none; display: inline-block; transition: background 120ms ease, border-color 120ms ease;
}
button:hover, .button:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
button.secondary, .button.secondary { background: transparent; color: var(--accent); }
button.secondary:hover, .button.secondary:hover { background: var(--accent-soft); }
button.secondary.danger { color: var(--bad); border-color: var(--bad); }
button.secondary.danger:hover { background: var(--bad-bg); }
button.link {
  background: none; border: none; color: var(--accent); padding: 4px 0; text-decoration: underline; font-weight: 500;
}
button.link:hover { background: none; color: var(--accent-deep); }
button:disabled { opacity: 0.55; cursor: default; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.drop {
  display: block; text-align: center; padding: 40px 20px;
  border: 1.5px dashed var(--rule-strong); border-radius: var(--radius);
  cursor: pointer; margin: 0; font-weight: 400; background: var(--paper);
  transition: border-color 120ms ease, background 120ms ease;
}
.drop::before {
  content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 12px;
  border: 1.5px solid var(--accent); border-radius: 8px;
  background: linear-gradient(135deg, transparent 46%, var(--accent) 46%, var(--accent) 54%, transparent 54%);
  opacity: 0.9;
}
.drop strong { color: var(--accent); font-weight: 600; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; background: var(--paper-deep); }
tr:last-child td { border-bottom: none; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: var(--paper); }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.done { color: var(--done); background: var(--done-bg); }
.badge.processing { color: var(--work); background: var(--work-bg); }
.badge.needs_review { color: var(--warn); background: var(--warn-bg); }
.badge.received { color: var(--wait); background: var(--wait-bg); }
.banner { border: 1px solid var(--warn); border-left-width: 4px; background: var(--warn-bg); color: var(--ink); border-radius: 8px; padding: 14px 16px; margin: 16px 0; }
.banner strong { color: var(--warn); }
.banner.ok { border-color: var(--done); background: var(--done-bg); }
.banner.ok strong { color: var(--done); }
progress { width: 100%; height: 8px; accent-color: var(--accent); border-radius: 999px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.tabs button { background: none; color: var(--muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 16px; font-weight: 600; }
.tabs button:hover { background: none; color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.report ul { margin: 0 0 8px; padding-left: 20px; }
.report li { margin-bottom: 6px; }
.cite { color: var(--muted); font-size: 12px; margin-left: 6px; }
tr.warning td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.error td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.states { padding: 32px 16px; text-align: center; color: var(--muted); }
.review { margin: 16px 0; }
.review h3:first-child { margin-top: 0; }
.field { margin-bottom: 4px; }
.field label { margin-bottom: 4px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; margin: 12px 0; }
.review td input, .review td select { min-width: 90px; }
.review td:first-child input { min-width: 180px; }
.actions { margin-top: 18px; }

/* ---------------------------------------------------------------- demo ----
   The demo is prepared data and local state: it shares these tokens and nothing else. */
.cta-glow {
  position: relative;
  animation: glow 4.5s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
                0 6px 22px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent),
                0 12px 34px -6px color-mix(in srgb, var(--accent) 66%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-glow { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
}
.demo-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 22px;
  background: var(--accent-soft); border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.demo-chip {
  font: 700 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 6px 10px;
}
.demo-strip-text { color: var(--ink-soft); font-size: 14px; }
.demo-actions { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.sample-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 26px 0 30px; }
.sample-card {
  display: grid; gap: 6px; justify-items: start;
  padding: 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
  transition: border-color 120ms ease, transform 120ms ease;
}
.sample-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.sample-card strong { font-family: var(--serif); font-size: 21px; }
.sample-file { font: 12.5px/1 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.timeline { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.timeline li { padding-left: 26px; position: relative; color: var(--ink-soft); }
.timeline li::before {
  content: ""; position: absolute; left: 4px; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.demo-progress { max-width: 520px; accent-color: var(--accent); }
.checks { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.check { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 14px; padding: 13px 16px; background: var(--surface); }
.check-verdict { font: 700 12px/1.5 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.check.pass .check-verdict { color: var(--done); }
.check.fail .check-verdict { color: var(--warn); }
.check strong { font-size: 15px; }
.check .small { grid-column: 2; }
.demo-output {
  margin: 14px 0 0; padding: 16px; max-height: 320px; overflow: auto;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  font: 12.5px/1.6 var(--mono); color: var(--ink-soft); white-space: pre;
}
.demo-end { margin-top: 30px; }
.review-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 22px; align-items: start; }
.invoice-sheet {
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow); font-size: 14px;
}
.invoice-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.invoice-head strong { font-family: var(--serif); font-size: 20px; display: block; }
.invoice-head span { display: block; }
.invoice-meta { text-align: right; }
.invoice-sheet th, .invoice-sheet td { padding: 9px 10px; }
.invoice-totals { margin-top: 14px; margin-left: auto; width: min(260px, 100%); display: grid; gap: 6px; }
.invoice-totals div { display: flex; justify-content: space-between; gap: 12px; }
.invoice-totals .due { border-top: 1px solid var(--rule-strong); padding-top: 8px; font-size: 17px; }
.invoice-sheet mark { background: var(--warn-bg); color: var(--warn); padding: 0 4px; border-radius: 4px; }
.reading { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0 0 16px; }
.reading dt { color: var(--muted); }
.reading dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- small ---- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .step { border-right: 0; border-top: 1px solid var(--rule); padding: 24px 0; }
  .step + .step { padding-left: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-grid { grid-template-columns: 1fr; }
  .open { grid-template-columns: 1fr; gap: 24px; }
  .sample-grid { grid-template-columns: 1fr; }
  .review-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bar { padding: 12px 16px; gap: 14px; }
  .section, .hero { padding-left: 16px; padding-right: 16px; }
  .panel-ink { margin: 0 16px; padding: 28px 20px; }
  .facts { grid-template-columns: 1fr; }
  th, td { padding: 10px 12px; }
  .foot { padding: 24px 16px; }
}