/* MendAccess — "evidence-grade": paper, ink, one accent. Numbers are monospace
   because a number you can check should look like a number you can check. */
:root {
  --paper:#FAFAF8; --ink:#16160F; --ink-soft:#4A4A42; --rule:#DEDED6;
  --accent:#0B5D4E; --accent-soft:#E7F0ED; --exhibit:#F2F2EC;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* One spacing scale for the top of every page. Before this, home carried 64px
     and every other page carried none, so no two pages agreed. */
  --page-top:1.75rem;
  --header-pad:.9rem;
}
@media (min-width:48em) { :root { --page-top:3rem; --header-pad:1.1rem; } }
@media (prefers-color-scheme: dark) {
  :root { --paper:#0E0E0D; --ink:#F0EFE8; --ink-soft:#A8A79E; --rule:#2C2C28;
          --accent:#6FD3B8; --accent-soft:#14251F; --exhibit:#171714; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink);
  font:17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }

/* The signature detail. Tab through this site on purpose. */
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:20; background:var(--accent);
  color:var(--paper); padding:.75rem 1.25rem; font-weight:600; text-decoration:none; }
.skip-link:focus { left:.5rem; top:.5rem; }

a { color:var(--accent); text-underline-offset:.18em; }
h1,h2,h3 { line-height:1.2; letter-spacing:-.012em; }
h1 { font-size:clamp(1.9rem,4.4vw,2.9rem); margin:0 0 1rem; }
h2 { font-size:clamp(1.3rem,2.6vw,1.65rem); margin:3.5rem 0 1rem; }
h3 { font-size:1.05rem; margin:2rem 0 .5rem; }
p { margin:0 0 1rem; }
main { max-width:52rem; margin:0 auto; padding:var(--page-top) 1.25rem 5rem; }
hr { border:0; border-top:1px solid var(--rule); margin:3rem 0; }

/* Legal-exhibit labels */
.label { font:600 .7rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); display:block; margin-bottom:.6rem; }
.mono { font-family:var(--mono); }

header.site { border-bottom:1px solid var(--rule); }
header.site .in { max-width:52rem; margin:0 auto; padding:var(--header-pad) 1.25rem;
  display:flex; align-items:baseline; gap:.6rem 1.5rem; flex-wrap:wrap; }
header.site .brand { font-weight:700; font-size:1.05rem; text-decoration:none; color:var(--ink); }
header.site nav { display:flex; gap:1.25rem; margin-left:auto; font-size:.92rem; flex-wrap:wrap; }
/* Narrow screens: the nav wrapped to its own row and right-aligned, leaving the
   brand stranded left and the header 112px tall. Give it the row, aligned with
   the brand and with the content below. */
@media (max-width:34em) {
  header.site nav { margin-left:0; width:100%; gap:1rem; }
}

.hero { padding:0 0 1rem; }
.hero .sub { font-size:1.15rem; color:var(--ink-soft); max-width:40rem; }
.cta-row { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-top:2rem; }
.btn { display:inline-block; background:var(--accent); color:var(--paper);
  padding:.85rem 1.4rem; font-weight:600; text-decoration:none; border-radius:3px; border:0;
  font:600 1rem var(--sans); cursor:pointer; }
.btn:hover { filter:brightness(1.08); }

.receipts { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.25rem;
  margin:2.5rem 0; padding:0; list-style:none; }
.receipts li { border:1px solid var(--rule); border-top:3px solid var(--accent);
  padding:1.1rem 1.15rem; background:var(--exhibit); }
.receipts .stat { font:700 1.5rem/1.15 var(--mono); display:block; margin-bottom:.5rem;
  letter-spacing:-.02em; }
.receipts .cap { font-size:.86rem; color:var(--ink-soft); margin:0; }

.exhibit { border:1px solid var(--rule); background:var(--exhibit); padding:1.25rem 1.35rem;
  margin:1.5rem 0; }
.exhibit .said { font:1.05rem/1.6 var(--mono); margin:0 0 .75rem; }
.exhibit .cap { font-size:.88rem; color:var(--ink-soft); margin:0; }

table { width:100%; border-collapse:collapse; font-size:.92rem; margin:1rem 0 2rem; }
th,td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--rule);
  vertical-align:top; }
th { font:600 .72rem/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); }
td.num, th.num { text-align:right; font-family:var(--mono); }
.scroll { overflow-x:auto; }

ol.steps { counter-reset:s; list-style:none; padding:0; }
ol.steps li { counter-increment:s; position:relative; padding-left:3rem; margin-bottom:1.5rem; }
ol.steps li::before { content:counter(s); position:absolute; left:0; top:0;
  font:700 .85rem/1.9 var(--mono); width:1.9rem; height:1.9rem; text-align:center;
  border:1px solid var(--accent); color:var(--accent); border-radius:50%; }

.price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.25rem; }
.price-card { border:1px solid var(--rule); padding:1.25rem; }
.price-card .amt { font:700 1.6rem var(--mono); display:block; margin:.3rem 0 .75rem; }

.scan { border:1px solid var(--rule); padding:1.5rem; background:var(--exhibit); }
.scan p:first-child { margin-top:0; }
.scan p:last-child { margin-bottom:0; }
.scan label { display:block; font:600 .78rem var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); margin:1.1rem 0 .3rem; }
.scan label:first-of-type { margin-top:0; }
.scan .opt { text-transform:none; letter-spacing:0; font-weight:400; }
.scan input[type=text], .scan input[type=email], .scan input[type=url], .scan textarea {
  width:100%; padding:.7rem .75rem; font:1rem var(--sans); color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:3px; }
.scan textarea { resize:vertical; min-height:4.5rem; }
.scan .check { display:flex; gap:.6rem; align-items:flex-start; margin:1.25rem 0 0; }
.scan .check input { margin:.15rem 0 0; width:1.05rem; height:1.05rem; flex:none; accent-color:var(--accent); }
.scan .check label { margin:0; font:400 .92rem/1.45 var(--sans); text-transform:none;
  letter-spacing:0; color:var(--ink); }
/* Honeypot. Off-canvas rather than display:none so a bot that reads CSS still
   finds a fillable field; aria-hidden and tabindex=-1 keep it away from anyone
   using a keyboard or a screen reader. */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

footer.site { border-top:1px solid var(--rule); margin-top:4rem; }
footer.site .in { max-width:52rem; margin:0 auto; padding:2rem 1.25rem 3rem;
  font-size:.88rem; color:var(--ink-soft); }
footer.site a { color:var(--ink-soft); }
footer.site .disc { margin-bottom:.75rem; }

@media (prefers-reduced-motion: no-preference) {
  a, .btn { transition:opacity .18s ease, filter .18s ease; }
}

.crumb { font-size:.88rem; margin:0 0 .75rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.crumb [aria-hidden] { color:var(--ink-soft); }