/* Uthold — shared styles for the site and the field test.
   Tokens follow the measured palette in the root CLAUDE.md. Two values that
   vo2test.html shipped were below the floor and are corrected here:
     dark  ink-3 #7C6F87 -> #8A7F94   (was 4.01:1, text needs 4.5)
     dark  rule-2 #453B50 -> #736C7C  (was 1.65:1, control borders need 3.0)
     light ink-3 #8C7F96 -> #6E6178   (was 3.56:1)
     light rule-2 #D3C8D8 -> #8C7F96  (was 1.61:1)
     dark  sunk  #241E2D -> #1B1622   (put ink-3 at 4.27:1; also now properly
                                       recessed, as sunk already is in light)
   Run web/brand/contrast.mjs before changing any of them. */

:root{
  --ground:#FBF8FA; --surface:#FFFFFF; --sunk:#F3EEF3;
  --ink:#191320; --ink-2:#5D5167; --ink-3:#6E6178;
  --rule:#E5DDE8; --rule-2:#8C7F96;
  --arterial:#C01F35; --venous:#3A2F6E; --band:rgba(192,31,53,.07); --on-accent:#FFFFFF;
  --good:#15705A; --warn:#8A5210;
  --mark-bars:#565060; --mark-ceiling:#8A7F94; --mark-hero:#C42846;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,5vw,48px);
  --maxw:1080px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#141019; --surface:#1D1825; --sunk:#1B1622;
  --ink:#F3EEF5; --ink-2:#A79AB1; --ink-3:#8A7F94;
  --rule:#3A3343; --rule-2:#736C7C;
  --arterial:#FF6376; --venous:#9A8BE8; --band:rgba(255,99,118,.10); --on-accent:#141019;
  --good:#4CC79F; --warn:#E0A356;
  --mark-bars:#A79AB1; --mark-ceiling:#6A6471; --mark-hero:#FF6376;
}}
:root[data-theme="dark"]{
  --ground:#141019; --surface:#1D1825; --sunk:#1B1622;
  --ink:#F3EEF5; --ink-2:#A79AB1; --ink-3:#8A7F94;
  --rule:#3A3343; --rule-2:#736C7C;
  --arterial:#FF6376; --venous:#9A8BE8; --band:rgba(255,99,118,.10); --on-accent:#141019;
  --good:#4CC79F; --warn:#E0A356;
  --mark-bars:#A79AB1; --mark-ceiling:#6A6471; --mark-hero:#FF6376;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0;line-height:1.1;text-wrap:balance}
p{margin:0 0 1em}
a{color:var(--arterial)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--arterial);outline-offset:3px;border-radius:3px}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);
  padding:12px 18px;z-index:10;border:2px solid var(--arterial);border-radius:0 0 6px 0}
.skip:focus{left:0}

/* ---- header ---- */
.site-head{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:5;
  background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(8px)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.brand svg{width:26px;height:26px;flex:none}
.site-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.site-nav a{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink-2);
  text-decoration:none;padding:10px 12px;border-radius:6px;min-height:44px;display:flex;align-items:center}
.site-nav a:hover{color:var(--ink);background:var(--sunk)}

/* ---- buttons: min 44x44 touch targets ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 24px;border-radius:7px;border:1px solid transparent;
  font-family:var(--display);font-weight:700;font-size:17px;text-decoration:none;cursor:pointer}
/* white on the dark-theme accent is 2.88:1 — the label must flip with the theme */
.btn-primary{background:var(--arterial);color:var(--on-accent);border-color:var(--arterial)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{background:var(--sunk)}

/* ---- hero ---- */
/* vertical only: .hero is itself a .wrap, whose horizontal padding is the page gutter */
.hero{padding-top:clamp(48px,9vw,104px);padding-bottom:clamp(36px,6vw,64px)}
.hero h1{font-size:clamp(38px,6.6vw,68px);font-weight:800;margin:14px 0 0;max-width:16ch}
.hero .deck{font-size:clamp(18px,2.1vw,22px);color:var(--ink-2);margin:20px 0 0;max-width:54ch}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;align-items:center}
.cta-note{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.04em}

/* ---- generic section ---- */
section{padding:clamp(40px,7vw,80px) 0;border-top:1px solid var(--rule)}
section h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;max-width:20ch}
section .lede{color:var(--ink-2);margin-top:14px;max-width:58ch;font-size:18px}

/* ---- the contrast: two columns ---- */
.versus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}
.vcard{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:24px}
.vcard.ours{border-color:var(--arterial)}
.vcard h3{font-size:19px;font-weight:700;margin-bottom:10px}
.vcard p{color:var(--ink-2);font-size:15.5px;margin:0}
.vtag{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:12px}
.vcard.ours .vtag{color:var(--arterial)}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:38px;
  counter-reset:step}
.step{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:24px}
.step h3{font-size:18px;font-weight:700;margin:14px 0 8px}
.step p{color:var(--ink-2);font-size:15.5px;margin:0}
.step .n{counter-increment:step;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.1em;color:var(--arterial)}
.step .n::before{content:"STEP " counter(step)}

/* ---- screenshots ---- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:38px}
.shot figcaption{font-size:15px;color:var(--ink-2);margin-top:14px}
.shot b{color:var(--ink);font-family:var(--display)}
.shot img{border-radius:14px;border:1px solid var(--rule);display:block;width:100%}

/* ---- evidence ---- */
.ev{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--arterial);
  border-radius:8px;padding:22px 24px;margin-top:30px;max-width:64ch}
.ev p:last-child{margin-bottom:0}
.ev cite{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  font-style:normal;margin-top:14px;line-height:1.7}

/* ---- waitlist ---- */
.signup{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  padding:clamp(24px,4vw,38px);margin-top:30px;max-width:620px}
.signup label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
/* 16px floor — below it, iOS Safari zooms on focus. */
.signup input[type=email]{width:100%;padding:13px 14px;min-height:48px;font-family:var(--mono);
  font-size:16px;color:var(--ink);background:var(--ground);border:1px solid var(--rule-2);border-radius:6px}
.signup .btn{width:100%;margin-top:14px}
.signup .small{font-size:14px;color:var(--ink-2);margin:16px 0 0}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--rule);padding:38px 0 56px;margin-top:20px}
.foot-grid{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.site-foot a{color:var(--ink-2);text-decoration:none;display:block;padding:7px 0;min-height:24px}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.fine{font-family:var(--mono);font-size:11.5px;line-height:1.85;color:var(--ink-3);
  margin-top:26px;max-width:80ch}

@media (max-width:860px){
  .versus,.steps,.shots{grid-template-columns:1fr}
  .shots{max-width:420px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---- single-screenshot showcase ---- */
.showcase{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(28px,5vw,64px);
  margin-top:38px;align-items:center}
.showcase img{border-radius:16px;border:1px solid var(--rule);display:block;width:100%}
.showcase dl{margin:0}
.showcase dt{font-family:var(--display);font-weight:700;font-size:18px;margin-top:24px}
.showcase dt:first-of-type{margin-top:0}
.showcase dd{margin:7px 0 0;color:var(--ink-2);font-size:15.5px}
@media (max-width:860px){.showcase{grid-template-columns:1fr}.showcase img{max-width:340px}}

/* sticky header would otherwise cover anchored section headings */
html{scroll-padding-top:84px}
section[id]{scroll-margin-top:84px}

/* narrow: brand on its own row so the nav wraps left-aligned instead of
   straddling the logo */
@media (max-width:620px){
  .site-head{position:static}
  .site-head .wrap{flex-direction:column;align-items:flex-start;gap:2px;padding-bottom:6px}
  .site-nav{margin-left:-12px}
  .site-nav a{font-size:14.5px;padding:9px 12px}
  html{scroll-padding-top:16px}
  section[id]{scroll-margin-top:16px}
}

/* mirrored showcase: image on the right, so consecutive blocks alternate */
.showcase.flip{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.showcase.flip img{order:2}
@media (max-width:860px){
  .showcase.flip{grid-template-columns:1fr}
  .showcase.flip img{order:-1}
}

/* the watch capture is near-square, unlike the phone renders — keep it small so
   it reads as a watch rather than a cropped phone */
.showcase.watch{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.showcase.watch img{order:2;border-radius:12px;max-width:300px}
.showcase.watch .real{font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--good);margin:0 0 14px}
@media (max-width:860px){
  .showcase.watch{grid-template-columns:1fr}
  .showcase.watch img{order:-1}
}

/* two screenshots side by side with one line each, for proof that does not need
   a full essay beside it */
.shots-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,44px);
  margin-top:clamp(32px,5vw,56px);max-width:760px}
.shots-compact img{width:100%;border-radius:14px;border:1px solid var(--rule);display:block}
.shots-compact figure{margin:0}
.shots-compact figcaption{font-size:15px;color:var(--ink-2);margin-top:14px}
.shots-compact b{color:var(--ink);font-family:var(--display)}
@media (max-width:620px){.shots-compact{grid-template-columns:1fr;max-width:340px}}

/* Price. Two figures, stated plainly and never as a strikethrough against an
   invented "usual" price. The monthly equivalent of the annual is spelled out
   because working it out is the reader's job otherwise. */
.price-row{display:flex;flex-wrap:wrap;gap:14px 40px;margin:18px 0 22px}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price .amt{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,46px);
  letter-spacing:-0.02em;color:var(--ink);line-height:1.05}
.price .per{font-size:16px;color:var(--ink-2)}