/* ProviderQMS public site — tokens, type, spacing and components per docs/DESIGN-SPEC-LANDING-v2.md §3.
   One theme by choice: white ground, evergreen ink, one primary doing the talking, the emerald on dark only. */
:root{
  --ground:#FFFFFF;--surface:#FFFFFF;--surface-2:#E8F0EC;
  --ink:#0C2B24;--ink-2:#123A31;--text:#1E2B27;--muted:#4F625A;--line:#D6E2DC;
  --primary:#0A7D5B;--primary-text:#08674B;--primary-hover:#08674B;
  --emerald:#12B886;--mint:#7BEFC6;--gold:#F2B84B;--gold-ink:#A16207;--gold-tint:#FBF1DF;
  --good:#18A566;--warn:#E8A13C;--serious:#E2554A;--critical:#C7362B;
  /* legacy aliases — one release, so nothing un-audited breaks */
  --em:var(--emerald);--emd:var(--primary);--paper:var(--ground);--card:var(--surface);--tx:var(--text);--mut:var(--muted);
  --ink2:var(--ink-2);--goldd:var(--gold-ink);--ser:#B93A30;--sert:#FCE9E7;--warnt:var(--gold-tint);--goodt:#E3F6EC
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--text);font:17px/1.6 "Public Sans",system-ui,-apple-system,sans-serif}
[hidden]{display:none!important}
a{color:var(--primary-text)}
img{max-width:100%;height:auto}
b,strong{font-weight:700}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
[data-p],[data-kp],[data-kcount],[data-pf],[data-kprice],[data-kc],.price,.bigprice,.bigmath,.proofstrip b,.docgroup .n,.kit .pr{font-variant-numeric:tabular-nums}

/* ---------- type scale (7 steps) ---------- */
h1{font-size:clamp(34px,4.6vw,52px);line-height:1.05;font-weight:700;letter-spacing:-.02em;color:var(--ink);max-width:24ch;text-wrap:balance}
h2{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--ink);max-width:26ch;text-wrap:balance}
h3{font-size:22px;line-height:1.25;font-weight:600;color:var(--ink)}
.lead{font-size:20px;line-height:1.5;color:var(--text);max-width:58ch}
.eyebrow{font-size:13px;line-height:1.2;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-text)}
.meta,.trust,.proofline,figcaption,footer,.blocks-cap,.sub{font-size:15px;line-height:1.5;color:var(--muted)}
.trust b,.proofline b{color:var(--ink)}
@media (max-width:700px){.lead{font-size:17.5px}}

/* ---------- spacing (8-pt grid) ---------- */
.sec{padding:64px 0}
.hero{padding:48px 0}
.hero .eyebrow+h1{margin-top:8px}
.hero h1+.lead{margin-top:16px}
.sec>.wrap>h2+.lead,.hero h2+.lead{margin-top:16px}
.sec h2+.grid2,.sec h2+.grid3,.sec h2+.steps,.sec h2+.plan,.sec h2+.plans{margin-top:24px}
footer{margin-top:48px;padding:32px 0 48px;border-top:1px solid var(--line)}
@media (max-width:700px){.sec{padding:40px 0}.hero{padding:24px 0 40px}.cta-row{margin-top:16px}
  /* phones: the product stage comes straight after the ask; chips and the proof strip follow it */
  .hero .wrap{display:flex;flex-direction:column;align-items:stretch}.hero .stage{order:1;margin-top:16px}.hero .chips{order:2}.hero .proofstrip{order:3}
  .hero .cta-row{margin-top:16px}.hero .stage figcaption{margin-bottom:8px}}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:24px;min-height:64px}
.nav .brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}
.nav .brand svg{width:30px;height:30px;color:var(--emerald);flex:none}
.nav .brand b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.nav .brand small{display:block;font-size:13px;color:var(--muted);letter-spacing:.02em;line-height:1.2;white-space:nowrap}
.nav .links{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:15px;font-weight:600}
.nav .links a{color:var(--ink);text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;padding:0 8px;border-radius:8px}
.nav .links a:hover{color:var(--primary-text)}
.nav .links a.btn{margin-left:8px}
.nav .links a.btn:hover{color:var(--ink)}
@media (max-width:700px){.nav{gap:12px}.nav .links{gap:0}.nav .links .hide{display:none}.nav .links a{padding:0 6px}.nav .links a.btn{margin-left:4px;padding:0 12px}}
@media (max-width:480px){.nav .brand small{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0;white-space:nowrap;min-height:52px;padding:0 24px;border-radius:10px;
  font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;background:var(--primary);color:#fff;border:1px solid var(--primary);box-shadow:none;cursor:pointer;
  font-family:inherit;transition:background-color .15s ease,border-color .15s ease}
.btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--primary)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.btn.sm{min-height:44px;padding:0 16px;font-size:15px}
.btn.dark{background:var(--ink);border-color:var(--ink)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;align-items:stretch}
.cta-row .btn:not(.ghost){min-width:240px}
.cta-row+.trust,.cta-row+.proofline,.cta-row+.chips,.chips+.trust{margin-top:16px}
@media (max-width:700px){.cta-row{flex-direction:column}.cta-row .btn{width:100%;min-width:0;white-space:normal;text-align:center}}

/* ---------- hero pieces ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:600;line-height:1.2}
.proofstrip{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-top:24px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:15px;line-height:1.5;color:var(--muted)}
.proofstrip b{color:var(--ink);font-size:20px;font-weight:700;margin-right:4px;line-height:1.2}
.proofstrip .dot{font-style:normal;color:var(--gold-ink);margin-right:4px}
@media (max-width:700px){.proofstrip{gap:4px 16px;padding:8px 12px}.proofstrip b{font-size:17px}}

/* ---------- stage (the product, full content width) ---------- */
.stage{margin:24px 0 0;display:block}
.stage figcaption{display:block;position:relative;padding-left:16px;margin-bottom:16px}
.stage figcaption::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--emerald)}
.stage figcaption b{color:var(--ink)}
.stage .frame{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink-2);aspect-ratio:16/10;box-shadow:none}
.stage.still .frame{aspect-ratio:auto}
.stage video,.stage img{display:block;width:100%;height:100%;object-fit:cover}
.feature{margin-top:48px}
.feature:first-child{margin-top:0}
.feature .eyebrow+h3{margin-top:8px}
.feature h3+p{margin-top:8px;max-width:60ch}
.feature .stage{margin-top:24px}
.steps+.stage{margin-top:24px}
.proofstrip+.stage,.stage+.proofstrip{margin-top:24px}
@media (max-width:700px){.stage{margin-top:24px}.stage .frame{border-radius:12px}}

/* ---------- steps (horizontal above the clip) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
.steps .step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.steps .n{width:32px;height:32px;border-radius:50%;background:var(--surface-2);color:var(--ink);font-weight:700;font-size:15px;display:grid;place-items:center;flex:none}
.steps h3{font-size:22px}
.steps p{color:var(--text)}
@media (max-width:767px){.steps{grid-template-columns:1fr}}

/* ---------- cards, grids, bands ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:none}
.card h3+p{margin-top:8px}
.card p{color:var(--text)}
.band{background:var(--surface-2)}
.sec.alt{background:var(--surface-2)}
.kitcard .kp{display:block;margin-top:8px;color:var(--text)}
.kitcard .kp b{color:var(--ink);font-size:20px}
.kitcard .btn{margin-top:16px}
.step{display:flex;gap:16px;align-items:flex-start}
.step .n{width:32px;height:32px;border-radius:50%;background:var(--surface-2);color:var(--ink);font-weight:700;display:grid;place-items:center;flex:none}
.pill{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:5px 11px}
.p-good{background:var(--goodt);color:#12824F}.p-warn{background:var(--warnt);color:#8A6112}.p-ser{background:var(--sert);color:var(--ser)}
.note{background:var(--surface-2);border-left:4px solid var(--line);border-radius:0 12px 12px 0;padding:16px 24px;font-size:15px;line-height:1.5;color:var(--text)}
.note b{color:var(--ink)}
.note.good{border-color:var(--primary)}
aside.note{border-radius:0;border-left:0;padding:24px 0}
aside.note p{max-width:70ch;font-size:17px;line-height:1.6}

/* ---------- plan card / offer ---------- */
.plans{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.plan{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:32px 24px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:none}
.plan.hero{border-color:var(--line);box-shadow:none;padding-top:32px}
.plan .tag{position:absolute;top:-14px;left:24px;background:var(--gold);color:var(--ink);font-size:13px;font-weight:800;border-radius:999px;padding:6px 12px;letter-spacing:.04em;text-transform:uppercase;line-height:1.2}
.plan .name{font-size:20px;font-weight:700;color:var(--ink)}
.plan .price{font-size:40px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.plan .price small{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan .price .or{font-size:20px;font-weight:600;color:var(--text);letter-spacing:0;white-space:nowrap}
.plan .sub{font-size:15px;color:var(--muted)}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:17px;margin:8px 0;color:var(--text)}
.plan ul li{padding-left:26px;position:relative}
.plan ul li::before{content:"\2713";position:absolute;left:0;color:var(--primary-text);font-weight:800}
.plan ul li.soon::before{content:"\25F7";color:var(--gold-ink)}
.plan ul li.soon{color:var(--muted)}
.plan .btn{margin-top:auto;justify-content:center}
.plan .cta-row{margin-top:16px}
.offer .plan{max-width:760px}
.blocks{display:flex;gap:8px;margin:8px 0 4px;max-width:560px}
.blocks i{flex:1;height:32px;border-radius:6px;background:var(--primary)}
.blocks i.free{background:var(--surface-2);border:2px dashed var(--primary)}
.blocks-cap{margin-bottom:8px}
.bigmath{font-size:clamp(22px,3.4vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.015em;text-wrap:balance}
.bigprice{font-size:40px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.bigprice small{font-size:17px;font-weight:600;color:var(--muted);letter-spacing:0}
.priceline{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
.priceline b{font-size:40px;color:var(--ink);letter-spacing:-.02em}
.priceline span{color:var(--muted)}

/* ---------- kits list (annual, kits page) ---------- */
.kits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.kit{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.kit b{color:var(--ink)}
.kit .pr{font-size:20px;font-weight:800;color:var(--ink)}
.kit .btn{align-self:flex-start}

/* ---------- document groups (kit pages) ---------- */
.doclist{margin-top:24px}
.doclist{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.docgroup{border-top:1px solid var(--line);background:var(--surface)}
.docgroup:first-child{border-top:0}
.docgroup summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:0 16px;min-height:44px;font-weight:700;color:var(--ink);font-size:17px;line-height:1.3}
.docgroup summary::-webkit-details-marker{display:none}
.docgroup summary::before{content:"+";color:var(--primary-text);font-weight:800;width:16px;flex:none}
.docgroup[open] summary::before{content:"\2212"}
.docgroup .n{margin-left:auto;font-size:15px;font-weight:600;color:var(--muted)}
.docgroup ul{list-style:none;columns:2;column-gap:24px;padding:0 16px 8px 16px;font-size:15px;line-height:1.5;color:var(--text)}
.docgroup li{break-inside:avoid;padding:8px 0 8px 24px;position:relative;border-top:1px solid var(--line)}
.docgroup li::before{content:"\2713";position:absolute;left:0;color:var(--primary-text);font-weight:800}
#docmore{margin-top:16px}
@media (max-width:700px){.docgroup ul{columns:1}}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:8px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:17px;list-style:none;padding:8px 0;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--primary-text);font-weight:800;width:20px;flex:none}
.faq details[open] summary::before{content:"\2212"}
.faq p{color:var(--text);font-size:17px;margin:8px 0 8px 20px;max-width:70ch}
.faq h2+details{margin-top:16px}

/* ---------- close band (the one dark surface) ---------- */
.close{background:var(--ink);color:#fff;padding:64px 0}
.close h2{color:#fff;max-width:26ch}
.close p,.close .sub{color:var(--mint);font-size:17px;margin-top:16px}
.close .bigprice{color:#fff}
.close .bigprice small{color:var(--mint)}
.close .bigprice+.sub{margin-top:8px}
.close .btn{background:var(--emerald);color:var(--ink);border-color:var(--emerald)}
.close .btn:hover{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.close .btn:focus-visible{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--mint)}
.close .btn.ghost{background:transparent;color:#fff;border:1px solid var(--mint)}
.close .btn.ghost:hover{background:rgba(123,239,198,.12);color:#fff}
@media (max-width:700px){.close{padding:40px 0}}

/* ---------- footer ---------- */
footer .cols{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--muted)}
footer p{margin-top:16px;max-width:90ch}

/* ---------- sticky buy bar (phones only) ---------- */
.sticky-cta{display:none}
@media (max-width:700px){
  .sticky-cta{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:60;min-height:64px;
    padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--surface);box-shadow:0 -1px 0 var(--line)}
  .sticky-cta .txt{font-size:15px;line-height:1.3;color:var(--muted)}
  .sticky-cta .txt b{color:var(--ink)}
  .sticky-cta .btn{min-height:48px;min-width:0;width:auto;padding:0 20px;white-space:nowrap;margin:0}
  body.has-sticky{padding-bottom:80px}
}

/* ---------- legal pages ---------- */
.legal{max-width:780px}
.legal h1{font-size:clamp(26px,4vw,38px)}
.legal h2{font-size:22px;margin-top:32px}
.legal p,.legal li{font-size:17px;color:var(--text);margin:8px 0}
.legal ul{padding-left:24px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* ---------- responsive grids (last, so they win over the definitions above) ---------- */
@media (max-width:900px){.grid3,.grid2,.plans,.kits{grid-template-columns:1fr}.plans .plan{align-self:auto}}

@media (max-width:700px){body:not(.has-sticky) .proof-toast{bottom:16px!important}}
.plan .tag{white-space:nowrap;font-size:12px}