/* ════════════════════════════════════════════════════════════════════
   vitalhealthfinder.com v1 — shared stylesheet
   Ported verbatim from the designer reference (designer-vtlhlth, rev 2,
   brand guidelines-v2 "Graphite & Sun, Annotated").
   Single sheet referenced by index.html, privacy.html, terms.html — keeps
   the home + legal CSS in lockstep per design handoff §10 (avoids rev-1 drift).
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens (DESIGN.md §1) ─────────────────────────────────── */
:root{
  --paper:#FCFCFA; --paper-warm:#F8F7F3;
  --g1:#F2F2EF; --g2:#E4E4E0; --g3:#C8C8C2; --g4:#72726B; --g5:#56564F;
  --ink:#26261F;
  --sol:#FFD23F;            /* once per composition: torn-strip highlight */
  --butter:#FFE89C;         /* highlight wash edges only */
  --vh-blue:#4A6FF5;        /* logo ring + focus rings only on this surface */
  --max:1180px; --margin:48px;
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:26px; --s6:34px; --s7:56px; --s8:88px; --s9:120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px} /* sticky masthead offset */
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif; font-weight:300;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--margin)}
@media (max-width:640px){ :root{--margin:22px} }

/* skip link (WCAG 2.4.1) */
.skip{position:absolute; left:-9999px; top:0; background:var(--ink);
  color:var(--paper); padding:12px 24px; border-radius:999px; z-index:20;
  font-weight:500; font-size:13.5px; text-decoration:none}
.skip:focus{left:var(--s4); top:var(--s3)}

/* instrument voice: labels, figures, captions (Plex 500, tracked, caps) */
.iv{font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:11px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--g5)}
.iv-muted{color:var(--g4)}

a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--g3);
  text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--sol); text-decoration-thickness:2px}
/* hover sol underline is a transient interaction state (DESIGN.md §6 Links);
   it does not spend the composition's static Sol budget. */
:focus-visible{outline:2px solid var(--vh-blue); outline-offset:2px}

.ring{width:26px; height:26px; flex:none}
.ring circle{stroke:var(--vh-blue)}

/* ── 2 · Masthead ──────────────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--g2); background:var(--paper);
  position:sticky; top:0; z-index:10}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between;
  height:72px}
.lockup{display:flex; align-items:center; gap:12px; text-decoration:none}
.lockup:hover{text-decoration:none}
.wordmark{font-family:'Outfit',sans-serif; font-weight:500; font-size:14px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink)}
nav.primary{display:flex; gap:var(--s5)}
nav.primary a{position:relative; text-decoration:none; padding:14px 2px; /* ≥44px target */
  font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--g5);
  touch-action:manipulation}
nav.primary a:hover{color:var(--ink)}
/* .active is used on legal pages only (true page state). There it carries
   that page's single Sol tick. Home has no active item — see Sol budget. */
nav.primary a.active{color:var(--ink)}
nav.primary a.active::after{content:""; position:absolute; left:2px; bottom:10px;
  width:22px; height:3px; background:var(--sol)}
@media (max-width:640px){ nav.primary{gap:var(--s4)} }
@media (max-width:420px){ .masthead .wordmark{display:none} } /* ring stays; lockup keeps aria-label */

/* ── 3 · Buttons (pill 999, Plex 500 13.5px, padding 10×24;
       ≥44px floor is absolute on consumer surfaces) ───────────── */
.btn{display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 24px; border-radius:999px;
  font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:13.5px;
  letter-spacing:.02em; text-decoration:none; cursor:pointer; border:0;
  transition:background-color 160ms ease-out; touch-action:manipulation}
@media (prefers-reduced-motion: reduce){ .btn{transition:none} }
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--g5)}
.btn:disabled{background:transparent; border:1px solid var(--g2);
  color:var(--g3); cursor:default}

/* ── 4 · Hero ──────────────────────────────────────────────────── */
.hero{padding:var(--s9) 0 var(--s8)}
.hero .eyebrow{margin-bottom:var(--s5)}
h1{font-family:'Newsreader',serif; font-weight:340; font-optical-sizing:auto;
  font-size:clamp(44px,7vw,84px); line-height:1.05; letter-spacing:-.01em;
  max-width:13ch}
/* clamp floor 44px is a deliberate mobile adaptation of §3's 56–84 range */
.standfirst{font-family:'Newsreader',serif; font-weight:400; font-size:21px;
  line-height:1.3; color:var(--g5); max-width:54ch; margin-top:var(--s5)}
.hero .btn{margin-top:var(--s6)}
@media (max-width:640px){ .hero{padding:var(--s7) 0 var(--s7)} }

/* ── 5 · Sections ─────────────────────────────────────────────── */
section{padding:var(--s8) 0; border-top:1px solid var(--g2);
  scroll-margin-top:88px}
h2{font-family:'Newsreader',serif; font-weight:400; font-size:34px;
  line-height:1.14; letter-spacing:-.005em}
.section-grid{display:grid; grid-template-columns:4fr 7fr; gap:var(--s7);
  align-items:start}
.section-grid p{max-width:58ch; color:var(--g5)}
@media (max-width:840px){ .section-grid{grid-template-columns:1fr; gap:var(--s4)} section{padding:var(--s7) 0} }

/* ── 6 · Mission pull quote ───────────────────────────────────── */
.mission .eyebrow{margin-bottom:var(--s5)}
blockquote{font-family:'Newsreader',serif; font-style:italic; font-weight:340;
  font-size:clamp(24px,3vw,32px); line-height:1.3; max-width:32ch; color:var(--ink)}

/* ── 7 · Photo feature (the page's ONE saturated photo) ──────── */
.photo-feature{padding:var(--s8) 0; border-top:1px solid var(--g2)}
.photo-frame{position:relative}
.photo-frame img{display:block; width:100%; height:auto; aspect-ratio:3/2;
  object-fit:cover; filter:saturate(1.06) contrast(1.03)}  /* the one grade */
/* Torn strip: paper strip, torn ends, soft shadow, −1.2°, Newsreader Italic,
   ≤40 chars. The <mark> inside is THE page's single Sol mark (DESIGN.md §5):
   Sol body with butter wash edges, never a field or fill elsewhere. */
.torn-strip{position:absolute; right:var(--s5); bottom:var(--s5);
  transform:rotate(-1.2deg); background:var(--paper); padding:8px 18px;
  box-shadow:0 2px 8px rgba(38,38,31,.18);
  font-family:'Newsreader',serif; font-style:italic; font-size:17px; color:var(--ink);
  clip-path:polygon(1% 8%,3% 0,97% 2%,100% 12%,99% 90%,96% 100%,4% 98%,0 88%)}
.torn-strip mark{background:linear-gradient(90deg,var(--butter),var(--sol) 14%,var(--sol) 86%,var(--butter));
  color:inherit; padding:1px 3px}
.photo-caption{margin-top:var(--s3)}
@media (max-width:640px){ .torn-strip{right:var(--s3); bottom:var(--s3); font-size:15px} }

/* ── 8 · How we work (three blocks, instrument numerals) ─────── */
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4);
  margin-top:var(--s7)}
.how-card{background:#fff; border:1px solid var(--g2); border-radius:2px;
  padding:var(--s5)}
.how-card .num{display:block; padding-bottom:var(--s3);
  border-bottom:1px solid var(--g2); margin-bottom:var(--s4)}
.how-card h3{font-family:'IBM Plex Sans',sans-serif; font-weight:500;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  margin-bottom:var(--s3)}
.how-card p{font-size:15px; color:var(--g5)}
@media (max-width:840px){ .how-grid{grid-template-columns:1fr} }

/* ── 9 · The letter + opt-in form (#join · A2P consent surface) ─
   Forms are product UI (DESIGN.md §6): VH Blue focus rings.
   Error state ships in INK (brick #C25E4C is proposed, not approved —
   upgrade to brick only on Kevin sign-off; see handoff §9). ─────── */
.letter{background:var(--paper-warm)}
.letter-grid{display:grid; grid-template-columns:5fr 6fr; gap:var(--s7);
  align-items:start}
@media (max-width:840px){ .letter-grid{grid-template-columns:1fr} }
.letter p.lead{color:var(--g5); max-width:48ch; margin-top:var(--s4)}
form{background:#fff; border:1px solid var(--g2); border-radius:2px;
  padding:var(--s6)}
.form-intro{font-size:12px; line-height:1.5; color:var(--g4);
  margin-bottom:var(--s5)}
.field{margin-bottom:var(--s5)}
.field label.lbl{display:block; margin-bottom:var(--s2)}
input[type=email], input[type=tel]{width:100%; min-height:46px;
  border:1px solid var(--g3); border-radius:2px; background:#fff;
  padding:11px 14px; font-family:'IBM Plex Sans',sans-serif; font-weight:300;
  font-size:16px; color:var(--ink)}  /* 16px: prevents iOS focus zoom */
input::placeholder{color:var(--g4)}
input:focus-visible{outline:2px solid var(--vh-blue); outline-offset:2px;
  border-color:var(--g3)}
.helper{font-size:12px; line-height:1.5; color:var(--g4); margin-top:var(--s2)}
/* error state: ink border + note text; aria-invalid + the note copy carry
   the signal (never color alone). Note text (locked copy):
   "That email needs another look · check the format and try again." */
.field.error input{border-color:var(--ink)}
.field .error-note{font-size:12px; line-height:1.5; color:var(--ink);
  font-weight:500; margin-top:var(--s2)}

/* honeypot: visually + a11y hidden, off-screen, not announced, not tab-stoppable */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* SMS consent: UNCHECKED native checkbox; the label row is the target (≥44px) */
.consent{display:grid; grid-template-columns:20px 1fr; gap:var(--s3);
  align-items:start; padding:var(--s4) 0; margin-bottom:var(--s2);
  cursor:pointer; touch-action:manipulation}
.consent input[type=checkbox]{width:20px; height:20px; margin-top:2px;
  accent-color:var(--ink); cursor:pointer}
.consent .consent-text{font-size:13px; line-height:1.5; color:var(--g5)}
.consent-sub{font-size:12px; line-height:1.5; color:var(--g4);
  margin-bottom:var(--s5)}
form .btn{width:100%}
/* success live region: PRESENT in the DOM from load (empty), text injected
   on submit so screen readers reliably announce it. Locked success copy:
   "You're in. The first letter is on its way." (Newsreader 21px) */
.success{font-family:'Newsreader',serif; font-size:21px; line-height:1.3;
  padding-top:var(--s4)}
.success:empty{padding:0}

/* ── 10 · Footer ──────────────────────────────────────────────── */
footer{border-top:1px solid var(--g2); padding:var(--s6) 0 var(--s7)}
.foot-row{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s5);
  align-items:center; justify-content:space-between}
.foot-row .ring{width:16px; height:16px}
.foot-row .wordmark{font-size:12px}
footer nav{display:flex; gap:var(--s5)}
footer nav a{text-decoration:none; padding:12px 0; min-height:44px;
  display:inline-flex; align-items:center; touch-action:manipulation}
footer nav a:hover{color:var(--ink)}
.foot-legal{margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s2)}

/* ── 11 · Legal pages (privacy.html, terms.html) ──────────────── */
/* Legal measure: narrow column for sustained reading */
.legal{max-width:720px; margin:0 auto; padding:var(--s8) var(--margin) var(--s9)}
.legal .eyebrow{margin-bottom:var(--s4)}
.legal h1{font-family:'Newsreader',serif; font-weight:400; font-size:42px;
  line-height:1.14; letter-spacing:-.005em; margin-bottom:var(--s3); max-width:none}
/* compliance-relevant line: body register, not instrument voice */
.legal .meta{font-size:13px; color:var(--g4); margin-bottom:var(--s7);
  padding-bottom:var(--s4); border-bottom:1px solid var(--g2)}
.legal h2{font-family:'Newsreader',serif; font-weight:400; font-size:24px;
  line-height:1.2; margin:var(--s7) 0 var(--s3)}
.legal p{color:var(--g5); margin-bottom:var(--s4)}
.legal ul{margin:0 0 var(--s4) 22px; color:var(--g5)}
.legal li{margin-bottom:var(--s2)}
/* data-retention table (Privacy): plain, legible, no decorative styling */
.legal table{width:100%; border-collapse:collapse; margin:0 0 var(--s4);
  font-size:15px; color:var(--g5)}
.legal th, .legal td{text-align:left; padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--g2); vertical-align:top}
.legal th{font-family:'IBM Plex Sans',sans-serif; font-weight:500; color:var(--ink)}