/* ==========================================================================
   VeriPrep public site - THE MARKETING SYSTEM (one source, every public page)
   Extracted verbatim from index.html on 2026-09-09: the design tokens, the base
   reset, the shared type classes (.stamp / .h2 / .deck), the button family, the
   arrow link, the nav, the footer, the FAQ component and their responsive
   overrides. index.html links this file and keeps only the homepage's own
   sections; the secondary pages link it and add page-specific layout below it
   in their own <style>. Product replicas (.gx / .qq / .pp) are NOT here: they
   are Libre Franklin at the product's own sizes and live with the homepage.
   ========================================================================== */
:root{
  /* ---- palette ---- */
  --white:        #FFFFFF;
  --system:       #EEF2EF;   /* pale green-grey, the secondary system surface */
  --system-soft:  #F5F8F6;   /* the same hue two steps back - staff section */
  --system-deep:  #E4EAE6;
  --ink:          #0F172A;   /* navy */
  --ink-2:        #37455C;   /* body on white */
  --ink-3:        #566476;   /* muted    - 6.03 on white / 5.34 on system */
  --ink-4:        #5F6E85;   /* faintest - 5.18 on white / 4.58 on system */
  --rule:         #E3E8E4;
  --rule-2:       #CFD8D2;
  --edge:         #D9DFDB;   /* the ARTIFACT hairline - one step darker than
                                --rule, which is a RULE colour and disappears
                                when it has to define an object's own edge on
                                white. Objects use --edge; dividers use --rule. */
  --green:        #119B73;   /* fills, display */
  --green-text:   #0E8160;   /* brand text green, 4.85 on white */
  --green-cta:    #0C7355;   /* one step darker. White ON it is 5.83, and as
                                text it also clears 5.16 on the tinted surface,
                                which #0E8160 does not. Fills + green-on-tint. */
  --green-deep:   #006048;   /* the product's own Done green */
  --amber:        #A85400;
  --red:          #841818;

  /* on ink */
  --on-ink:       #F4F7F5;
  --on-ink-2:     #A7B4C6;
  --on-ink-3:     #7B8AA1;   /* 5.09 on ink */
  --rule-ink:     #22304A;

  /* ---- elevation: ONE RECIPE, THREE STOPS ----------------------------------
     Every artifact on a white ground is lifted the same way and differs only
     in HOW FAR. The recipe is two shadows and never more: a 1px CONTACT
     shadow that gives the object a defined bottom edge at any size, and one
     AMBIENT with a negative spread, so what reads is air under the object
     rather than a halo around it. Only the ambient's offset/blur/alpha moves
     between stops - so three objects sit at three heights in one system
     instead of carrying three shadow styles.
       --lift-0  the message object   - softer and tighter; its tinted fill is
                                        already doing the separating
       --lift-1  the enrolment form   - a replica, and the quietest artifact
       --lift-2  the captured product - the guide step and the queue plate,
                                        the primary objects on the page       */
  --lift-0: 0 1px 2px rgba(15,23,42,.06);
  --lift-1: 0 1px 2px rgba(15,23,42,.05),  0 6px 16px -10px rgba(15,23,42,.18);
  --lift-2: 0 1px 2px rgba(15,23,42,.06),  0 16px 36px -16px rgba(15,23,42,.26);
  --lift-3: 0 0 0 1px rgba(15,23,42,.18),  0 46px 84px -34px rgba(15,23,42,.42);
  /* FINAL POLISH: four stops and nothing bespoke. 0 = the message bubble and
     subtle rows; 1 = the enrolment form, pricing, founding; 2 = the step card,
     the queue, the patient panel, the builder capture; 3 = the anatomy phone
     shell only. Every alpha is navy (#0F172A) so lift reads as air, not grey. */

  /* ---- type ---- */
  --font: 'DM Sans','DM Sans Local',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  /* +5% on all three terms (was 38/3.9vw/50). The hero's left half was the
     lighter of the two objects on the first screen; the headline is the only
     thing in it that can carry weight without adding words. */
  /* FINAL POLISH - ONE MARKETING SCALE, EIGHT STEPS, FOUR WEIGHTS. Every
     marketing size on the page reads one of these; the product replicas
     (`.gx`, `.qq`, `.pp`, the enrol form) keep their own product-owned sizes
     in Libre Franklin and are deliberately NOT on this scale. */
  --fs-d1:  clamp(40px, 4.2vw, 60px);   /* hero display, 600, -.03em */
  --fs-d2:  clamp(30px, 2.8vw, 40px);   /* section heading, 600 */
  --fs-d3:  22px;                       /* subhead / card title, 600 */
  --fs-deck:clamp(17px, 1.3vw, 19px);   /* deck, 400 */
  --fs-body:16.5px;
  --fs-sm:  14.5px;
  --fs-ui:  13.5px;                     /* UI label, 600 */
  --fs-eye: 11.5px;                     /* eyebrow, 600, tracked caps */
  /* figure numerals - a separate, controlled scale */
  --fs-fig-1: clamp(56px, 5vw, 72px);   /* the finding's two rates */
  --fs-fig-2: 48px;                     /* supports, tier prices */
  --fs-fig-3: 32px;                     /* founding prices */

  /* ---- spacing: sections ---- */
  --sec-y:      96px;   /* white and tint sections */
  --sec-y-ink:  112px;  /* the two ink sections */
  --sec-y-foot: 48px;

  /* ---- geometry ---- */
  --wrap: 1200px;
  --pad: 40px;
  --r: 12px;      /* artifacts: cards, plates, captures */
  --r-btn: 8px;   /* buttons */
  --r-sm: 6px;    /* small controls */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,picture{ max-width:100%; }
img{ display:block; height:auto; }
a{ color:inherit; }

::selection{ background:#C9E7DC; color:var(--ink); }

:focus-visible{ outline:2px solid var(--green-cta); outline-offset:3px; border-radius:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }


/* --------------------------------------------------------------- shared type */
.stamp{
  margin:0 0 24px; font-size:var(--fs-eye); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:12px;
}
.stamp i{ font-style:normal; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.stamp::after{ content:""; flex:0 0 40px; height:1px; background:var(--rule-2); }
.stamp-green{ color:var(--green-text); }
.stamp-green::after{ background:#B9DACD; }

.h2{
  margin:0; font-size:var(--fs-d2); font-weight:600; line-height:1.1;
  letter-spacing:-.022em; color:var(--ink);
}
.deck{
  margin:24px 0 0; max-width:56ch; font-size:var(--fs-deck);
  line-height:1.55; color:var(--ink-2);
}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font); font-size:var(--fs-body); font-weight:600; letter-spacing:-.005em;
  text-decoration:none; border-radius:var(--r-btn); padding:15px 26px; white-space:nowrap;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.btn-fill{ background:var(--green-cta); color:#fff; }
.btn-fill:hover{ background:#0A6248; }
.btn-line{ border:1px solid var(--rule-2); color:var(--ink); background:transparent; }
.btn-line:hover{ border-color:var(--ink); }
.btn-sm{ padding:10px 18px; font-size:var(--fs-sm); border-radius:var(--r-btn); }
.btn-lg{ padding:18px 34px; font-size:var(--fs-deck); }

.link-arrow{
  font-weight:600; font-size:var(--fs-body); color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule-2); padding-bottom:3px;
  transition:border-color .16s ease;
}
.link-arrow:hover{ border-bottom-color:var(--ink); }
.link-arrow::after{ content:" \2192"; }


/* ---------------------------------------------------------------------- nav */
/* SOLID WHITE, NO TRANSLUCENCY AND NO BACKDROP FILTER. It was
   rgba(255,255,255,.94) over a saturate+blur backdrop, and over the two INK
   sections that produced a visible pale plate carrying whatever was sliding
   under it - the logo, which until this pass was `logo-on-white.svg` and drew
   its OWN white rect, then read as a second box inside the first. An opaque
   bar has one edge, and that edge is the hairline .is-stuck already draws.
   The blur was also the only compositing layer on the page and it cost more on
   a scroll than a fully opaque bar does. */
.nav{
  position:sticky; top:0; z-index:50; background:var(--white);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.nav.is-stuck{ border-bottom-color:var(--rule); }
/* 9.5px, NOT 11 and NOT 16. The bar was 78.2px against a 43px control (35px of
   air around a header that is sticky for the whole page), then 66.2, and is
   63.2 now - the refinement pass's 62-64 band. Nothing inside it has shrunk at
   any point: the logo is still 26px, the links are still 15px, the button is
   still .btn-sm. Only the band around them. */
.nav-in{
  max-width:var(--wrap); margin:0 auto; padding:9.5px var(--pad);
  display:flex; align-items:center; gap:36px;
}
.nav-logo{ display:flex; flex:0 0 auto; }
.nav-logo img{ height:26px; width:auto; }
.nav-links{ display:flex; gap:30px; margin-left:auto; }
.nav-links a{
  font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); text-decoration:none;
  transition:color .16s ease;
}
.nav-links a:hover{ color:var(--ink); }


/* ---------------------------------------------------------------- FAQ (.qa) */
.qa{ margin:48px 0 0; border-top:1px solid var(--rule); }
.qa div{
  display:grid; grid-template-columns:360px 1fr; gap:48px;
  padding:24px 0; border-bottom:1px solid var(--rule);
}
.qa dt{ font-size:var(--fs-body); font-weight:600; letter-spacing:-.015em; line-height:1.4; }
/* THE QUESTION IS A BUTTON (final polish), drawn as the plain text it was: no
   border, no fill, the page's type, a chevron only where it toggles. It is a
   real control at every width so the desktop can collapse an answer too, but
   only the phone starts closed. */
.qa-q{
  all:unset; display:grid; grid-template-columns:minmax(0,1fr) 16px; column-gap:12px;
  align-items:start; width:100%; cursor:pointer; font:inherit; color:inherit;
  text-align:left;
}
.qa-q::after{
  content:""; width:16px; height:16px; margin-top:.2em; justify-self:end;
  background:no-repeat center / 16px 16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23566476' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m3.5 6 4.5 4.5L12.5 6'/></svg>");
  transition:transform .18s ease;
}
.qa div.is-closed .qa-q::after{ transform:rotate(-90deg); }
.qa-q:focus-visible{ outline:2px solid var(--green-cta); outline-offset:4px; border-radius:3px; }
.qa dd{ margin:0; font-size:var(--fs-body); line-height:1.6; color:var(--ink-2); max-width:64ch; }
.qa div.is-closed dd{ display:none; }
@media (prefers-reduced-motion: reduce){ .qa-q::after{ transition:none; } }

/* ------------------------------------------------------------------- footer */
.foot{ margin-top:var(--sec-y-ink); border-top:1px solid var(--rule-ink); padding:var(--sec-y-foot) 0 0; }
.foot-in{ display:grid; grid-template-columns:280px 1fr; gap:48px; }
.foot-brand img{ height:24px; width:auto; }
.foot-brand p{ margin:16px 0 0; font-size:var(--fs-ui); color:var(--on-ink-3); }
.foot-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.foot-cols .stamp{ color:var(--on-ink-3); margin-bottom:16px; }
.foot-cols .stamp::after{ display:none; }
.foot-cols a,.foot-cols span{
  display:block; margin-bottom:8px; font-size:var(--fs-sm); color:var(--on-ink-2);
  text-decoration:none;
}
.foot-cols a:hover{ color:var(--on-ink); }
.foot-cols span{ color:var(--on-ink-3); }
.foot-legal{
  /* GROUP A: `padding:24px 0 36px` overrode .wrap's horizontal padding (same
     specificity, later in the file), putting the legal text 40px left of every
     other footer element at 1440 and flush to both edges at 390. */
  position:relative; margin-top:48px; padding:24px var(--pad) var(--sec-y-foot);
  display:grid; grid-template-columns:280px 1fr; gap:48px;
}
.foot-legal::before{
  content:""; position:absolute; top:0; left:var(--pad); right:var(--pad);
  height:1px; background:var(--rule-ink);
}
.foot-legal p{ margin:0; font-size:var(--fs-ui); line-height:1.55; color:var(--on-ink-3); max-width:76ch; }


/* ------------------------------------------------ secondary-page chrome ----
   The homepage draws its footer inside the ink CTA section; every other page
   ends on a standalone footer, so the ink ground and the top rule come here. A
   page hero is the ink band a secondary page opens on: eyebrow, D1 title,
   deck. `.sec` is a plain section on the page rhythm; `.h3` is D3. */
.foot-standalone{ margin-top:0; border-top:0; background:var(--ink); color:var(--on-ink); }
.page-hero{ background:var(--ink); color:var(--on-ink); padding:var(--sec-y-ink) 0; }
.page-hero .stamp{ color:var(--on-ink-2); }
.page-hero .stamp i{ color:var(--on-ink-3); }
.page-hero .stamp::after{ background:var(--rule-ink); }
.page-hero h1{
  margin:0; max-width:22ch; font-size:var(--fs-d1); font-weight:600;
  line-height:1.04; letter-spacing:-.03em; color:var(--on-ink);
}
.page-hero .deck{ color:var(--on-ink-2); }
.page-hero .hero-actions{ margin:40px 0 0; display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.page-hero .link-arrow{ color:var(--on-ink); border-bottom-color:var(--rule-ink); }
.page-hero .link-arrow:hover{ border-bottom-color:var(--on-ink); }
.sec{ padding:var(--sec-y) 0; }
.sec-soft{ background:var(--system-soft); }
.sec-ink{ background:var(--ink); color:var(--on-ink); padding:var(--sec-y-ink) 0; }
.sec-ink .h2{ color:var(--on-ink); }
.sec-ink .deck{ color:var(--on-ink-2); }
.sec-ink .link-arrow{ color:var(--on-ink); border-bottom-color:var(--rule-ink); }
.sec-ink .link-arrow:hover{ border-bottom-color:var(--on-ink); }
.h3{ margin:0; font-size:var(--fs-d3); font-weight:600; line-height:1.25; letter-spacing:-.018em; color:var(--ink); }
/* a card on the page ground: the one edge, the page radius, stop-1 lift */
.card{ background:var(--white); border:1px solid var(--edge); border-radius:var(--r); box-shadow:var(--lift-1); }
/* an inline link in running text (research, legal): green, underlined at rest
   so it is never colour-only inside a block of prose */
.prose a{ color:var(--green-text); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--green-cta); }

/* ------------------------------------------------------------- responsive */
@media (max-width:1279px){
  :root{ --pad:32px; }
  .qa div{ grid-template-columns:300px 1fr; gap:36px; }
}
@media (max-width:1023px){
  :root{ --pad:28px; --fs-body:16px; --sec-y:64px; --sec-y-ink:80px; }
  .nav-links{ display:none; }
  .nav-in{ justify-content:space-between; gap:16px; }
  .nav-in .btn{ margin-left:auto; }
  .qa div,.foot-in,.foot-legal{ grid-template-columns:1fr; gap:8px; }
  .foot-in{ gap:44px; }
  .foot-legal{ gap:16px; }
  .foot-cols{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .qa div{ gap:12px; padding:20px 0; }
  .page-hero h1 br{ display:none; }
  .page-hero .hero-actions{ margin-top:32px; gap:24px; }
}
@media (max-width:479px){
  :root{ --pad:20px; }
}