/* ==========================================================================
   VerifyPro landing — postal inspection direction (the one the user kept),
   with the emerald green from the house version carried into the pricing and
   the results section. Loads after tokens.css.
   ========================================================================== */

:root{--shell:1240px;--pad:32px;--go:var(--m-ok);--go-ink:#FBFAF7}
:root[data-theme="dark"],:root:not([data-theme="light"]){--go-ink:#04140D}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--go-ink:#04140D}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);max-width:100%;overflow-x:hidden;
  font-family:var(--f-disp);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.06}
h1{font-size:clamp(40px,6.2vw,76px);font-weight:900;letter-spacing:-.035em}
h2{font-size:clamp(29px,3.8vw,46px);font-weight:800;letter-spacing:-.03em}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
:focus-visible{outline:2.5px solid var(--air-blue);outline-offset:3px}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}

.eyebrow{font-family:var(--f-stamp);font-weight:700;font-size:15px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--air-red);display:flex;align-items:center;gap:12px;margin:0 0 22px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;gap:34px;height:70px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.mark-badge{width:34px;height:34px;flex:0 0 34px}
.mark-name{font-weight:800;letter-spacing:-.02em;font-size:19px}
.nav-links{display:flex;gap:30px}
.nav-links a{text-decoration:none;color:var(--ink-2);font-size:15px;font-weight:500;
  padding:4px 0;border-bottom:1.5px solid transparent;transition:.15s}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:16px}
.link-quiet{text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2)}
.link-quiet:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-disp);font-weight:700;font-size:15px;
  padding:12px 22px;border:1.5px solid var(--ink);background:var(--ink);color:var(--btn-ink);
  text-decoration:none;cursor:pointer;transition:.15s;border-radius:2px}
.btn:hover{background:var(--air-blue);border-color:var(--air-blue);color:var(--btn-ink)}
/* green is reserved for the pricing section — the user asked for it there
   and nowhere else; every other action uses the login.html treatment */
.btn-go{background:var(--go);border-color:var(--go);color:var(--go-ink)}
.btn-go:hover{filter:brightness(1.07);background:var(--go);border-color:var(--go);color:var(--go-ink)}
/* same as .alt in auth.css so the two pages agree */
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-ghost:hover{background:var(--ink);color:var(--btn-ink);border-color:var(--ink)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-block{width:100%}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{padding:74px 0 84px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:start}
.hero-grid > *{min-width:0}
.hero-lede{font-size:19px;color:var(--ink-2);max-width:34ch;margin:24px 0 32px;line-height:1.62}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.1em;height:.13em;
  background:var(--air-red);z-index:-1}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.facts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.fact{background:var(--paper);padding:16px 18px;display:flex;align-items:baseline;gap:14px}
.fact-n{font-family:var(--f-mono);font-weight:600;font-size:19px;letter-spacing:-.02em;min-width:104px}
.fact-l{font-size:14px;color:var(--ink-2);line-height:1.4}

/* ── the inspection slip ─────────────────────────────────────────────── */
.slip{background:var(--card);border:1px solid var(--rule-2);box-shadow:var(--shadow);min-width:0}
.slip-head{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 20px;border-bottom:1px solid var(--rule);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.slip-body{padding:26px 26px 22px;min-width:0}
.field-label{font-family:var(--f-stamp);font-weight:700;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:9px}
.field-row{display:flex;gap:10px;min-width:0}
.field{flex:1;min-width:0;font-family:var(--f-mono);font-size:15px;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--ink);background:var(--paper);border-radius:2px}
.field::placeholder{color:var(--ink-3)}
.field:focus{outline:2.5px solid var(--air-blue);outline-offset:2px}

/* The postmark waits at scale(2.1) before it is struck. It is invisible, but a
   transform still counts toward scrollable width, so it pushed the page ~46px
   wide until something clipped it. */
.stage{margin-top:24px;border-top:1px dashed var(--rule-2);padding-top:20px;position:relative;
  min-height:236px;min-width:0;overflow:hidden}
.stage-label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.tape{font-family:var(--f-mono);font-size:12.5px;line-height:2;color:var(--ink-2);min-height:150px;min-width:0}
.tape-line{opacity:0;transform:translateY(3px);animation:tin .22s ease forwards;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tape-line .c{color:var(--ink);font-weight:600}
.tape-line .s{color:var(--ink-3)}
.tape-line.hit .s{color:var(--t-ok);font-weight:600}
.tape-line.miss .s{color:var(--t-bad);font-weight:600}
@keyframes tin{to{opacity:1;transform:none}}
.tape-idle{color:var(--ink-3);font-family:var(--f-mono);font-size:12.5px;line-height:1.9}
.tape-idle a{color:var(--t-ok)}

.postmark{position:absolute;right:6px;bottom:2px;width:172px;height:172px;display:grid;
  place-items:center;pointer-events:none;transform:rotate(-13deg) scale(2.1);opacity:0}
.postmark.struck{animation:strike .34s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes strike{0%{opacity:0;transform:rotate(-13deg) scale(2.1)}
  60%{opacity:.95;transform:rotate(-13deg) scale(.95)}
  100%{opacity:.9;transform:rotate(-13deg) scale(1)}}
.pm-ring{position:absolute;inset:0;border:3px solid currentColor;border-radius:50%;opacity:.85}
.pm-ring::after{content:"";position:absolute;inset:7px;border:1.5px solid currentColor;border-radius:50%}
.pm-in{text-align:center;padding:0 12px}
.pm-verdict{font-family:var(--f-stamp);font-weight:800;font-size:27px;line-height:.94;
  text-transform:uppercase}
.pm-sub{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  margin-top:7px;opacity:.85}
.pm-rule{height:1.5px;background:currentColor;margin:7px auto;width:52px;opacity:.6}
.pm-ok{color:var(--t-ok)}.pm-bad{color:var(--t-bad)}.pm-warn{color:var(--t-warn)}.pm-unk{color:var(--t-unk)}

/* ── sections ────────────────────────────────────────────────────────── */
.section{padding:88px 0;border-top:1px solid var(--rule)}
.sec-head{max-width:62ch;margin-bottom:46px}
.sec-lede{font-size:18px;color:var(--ink-2);margin-top:18px;line-height:1.62}

/* ── results: each outcome wears its colour ──────────────────────────── */
.verdicts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.verdict{padding:30px 24px 28px;display:flex;flex-direction:column;position:relative}
.verdict::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:currentColor}
.vc-ok{color:var(--m-ok);background:var(--w-ok)}
.vc-bad{color:var(--m-bad);background:var(--w-bad)}
.vc-warn{color:var(--m-warn);background:var(--w-warn)}
.vc-unk{color:var(--m-unk);background:var(--w-unk)}
/* headings take the darker TEXT ink — mark colours sit far too low on their wash */
.vc-ok h3{color:var(--t-ok)}.vc-bad h3{color:var(--t-bad)}
.vc-warn h3{color:var(--t-warn)}.vc-unk h3{color:var(--t-unk)}
.v-chip{font-family:var(--f-stamp);font-weight:800;font-size:16px;letter-spacing:.13em;
  text-transform:uppercase;border:2px solid currentColor;display:inline-block;
  padding:3px 10px 2px;margin-bottom:18px;align-self:flex-start;transform:rotate(-1.2deg)}
.v-ok{color:var(--t-ok)}.v-bad{color:var(--t-bad)}.v-warn{color:var(--t-warn)}.v-unk{color:var(--t-unk)}
.verdict h3{margin-bottom:9px}
.verdict p{font-size:14.5px;color:var(--ink-2);line-height:1.58}
.v-code{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);margin-top:auto;padding-top:18px}

/* ── the five checks ─────────────────────────────────────────────────── */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.step{background:var(--paper);padding:24px 22px 28px}
.step-n{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--air-red);
  font-weight:600;margin-bottom:14px}
.step-art{width:100%;height:auto;max-width:118px;display:block;margin:0 0 16px;
  color:var(--ink);opacity:.92}
.step h3{font-size:17px;margin-bottom:9px}
.step p{font-size:14px;color:var(--ink-2);line-height:1.56}

/* ── pricing, in green ───────────────────────────────────────────────── */
.buy-switch{display:flex;border:1.5px solid var(--ink);border-radius:2px;align-self:flex-start;
  margin-bottom:34px;overflow:hidden;width:max-content}
.buy-switch button{font-family:var(--f-stamp);font-weight:700;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;padding:11px 22px;border:0;background:transparent;color:var(--ink-2);
  cursor:pointer;transition:.14s}
.buy-switch button:hover{color:var(--ink)}
.buy-switch button[aria-pressed="true"]{background:var(--go);color:var(--go-ink)}

.prices{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.price{background:var(--card);padding:26px 20px 28px;display:flex;flex-direction:column;position:relative}
.price::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--rule-2)}
.price.feature{background:var(--w-ok)}
.price.feature::before{background:var(--go)}
.price-tag{position:absolute;top:10px;right:14px;background:var(--go);color:var(--go-ink);
  font-family:var(--f-stamp);font-weight:800;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px}
.p-tier{font-family:var(--f-stamp);font-weight:700;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.price.feature .p-tier{color:var(--t-ok)}
.p-amt{font-size:34px;font-weight:900;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.p-credits{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-2);margin-top:10px}
.p-each{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);margin-top:4px;
  padding-bottom:20px;border-bottom:1px solid var(--rule);margin-bottom:18px}
.p-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px}
.p-list li{font-size:13.5px;color:var(--ink-2);padding-left:21px;position:relative;line-height:1.5}
.p-list li::before{content:"";position:absolute;left:0;top:.34em;width:13px;height:13px;
  border:1.5px solid var(--go);border-radius:2px;opacity:.5}
.p-list li::after{content:"";position:absolute;left:3.5px;top:.62em;width:5px;height:2.5px;
  border-left:1.7px solid var(--go);border-bottom:1.7px solid var(--go);transform:rotate(-45deg)}
.price .btn{margin-top:auto;padding:11px 14px;font-size:14px}
.p-note{margin-top:24px;font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3)}

.standing{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.standing-pick{background:var(--paper);padding:30px}
.standing-out{background:var(--w-ok);padding:30px;display:flex;flex-direction:column;
  border-left:4px solid var(--go)}
/* billing period — same treatment as the credits/standing switch above it,
   so the pricing block reads as one control set rather than two designs */
.cycle{display:inline-flex;border:1.5px solid var(--rule-2);background:var(--card);
  border-radius:2px;overflow:hidden;margin-bottom:22px}
.cyc{font-family:var(--f-stamp);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;padding:10px 18px;border:0;background:transparent;color:var(--ink-2);
  cursor:pointer;transition:.14s;display:inline-flex;align-items:center;gap:8px}
.cyc:hover{color:var(--ink)}
.cyc[aria-pressed="true"]{background:var(--go);color:var(--go-ink)}
.cyc-tag{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;
  text-transform:none;padding:2px 6px;border-radius:2px;
  background:var(--w-ok);color:var(--t-ok);white-space:nowrap}
/* on the active (green) side the tag must not sit green-on-green */
.cyc[aria-pressed="true"] .cyc-tag{background:var(--go-ink);color:var(--go)}

/* the real charge, under the monthly-equivalent headline */
.so-bill{font-family:var(--f-mono);font-size:13px;color:var(--t-ok);margin-top:10px;font-weight:600}

@media(max-width:520px){
  .cycle{display:flex;width:100%}
  .cyc{flex:1;justify-content:center;padding:10px 10px;font-size:11.5px;letter-spacing:.08em}
  .cyc-tag{font-size:9.5px;padding:2px 4px}
}

.vol-label{font-family:var(--f-stamp);font-weight:700;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.vols{display:flex;flex-wrap:wrap;gap:9px}
.vol{font-family:var(--f-mono);font-size:14px;padding:10px 15px;border:1.5px solid var(--rule-2);
  background:var(--card);color:var(--ink-2);cursor:pointer;border-radius:2px;transition:.13s}
.vol:hover{border-color:var(--ink-3);color:var(--ink)}
.vol[aria-pressed="true"]{background:var(--go);border-color:var(--go);color:var(--go-ink);font-weight:600}
.standing-note{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin-top:24px;max-width:46ch}
.so-tier{font-family:var(--f-stamp);font-weight:700;font-size:15px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-ok);margin-bottom:14px}
.so-amt{font-size:56px;font-weight:900;letter-spacing:-.04em;line-height:1}
.so-amt sub{font-family:var(--f-mono);font-size:15px;font-weight:500;color:var(--ink-3);
  vertical-align:baseline;margin-left:6px}
.so-vol{font-family:var(--f-mono);font-size:13.5px;color:var(--ink-2);margin-top:12px}
.so-each{font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3);margin-top:5px;
  padding-bottom:22px;border-bottom:1px solid var(--rule);margin-bottom:20px}
.so-save{display:inline-block;font-family:var(--f-stamp);font-weight:800;font-size:13.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--t-ok);border:1.5px solid currentColor;
  padding:3px 9px 2px;margin-bottom:20px;align-self:flex-start}

/* ── handling ────────────────────────────────────────────────────────── */
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px}
.trust h3{margin-bottom:11px}
.trust p{font-size:15px;color:var(--ink-2);line-height:1.6}
.trust-tag{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--air-red);margin-bottom:14px}

/* ── closing band ────────────────────────────────────────────────────── */
.cta{background:var(--band);color:var(--band-ink)}
.cta-in{padding:78px var(--pad) 84px;display:grid;grid-template-columns:1.15fr 1fr;gap:56px;
  align-items:center}
.cta h2{color:var(--band-ink)}
.cta p{color:var(--band-mute);font-size:18px;margin-top:18px;max-width:44ch;line-height:1.6}
.cta-actions{display:flex;justify-content:flex-end}
.cta-btn{background:var(--band-ink);border-color:var(--band-ink);color:var(--band)}
.cta-btn:hover{background:var(--air-red);border-color:var(--air-red);color:#fff}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule);padding:52px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.foot h4{font-family:var(--f-stamp);font-weight:700;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none;font-size:14.5px;color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot-blurb{font-size:14.5px;color:var(--ink-2);max-width:36ch;margin-top:14px;line-height:1.6}
.foot-base{border-top:1px solid var(--rule);padding-top:24px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.foot-theme{display:none}

[hidden]{display:none!important}

/* ── responsive ──────────────────────────────────────────────────────── */
@media(max-width:1180px){.prices{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1080px){
  .verdicts{grid-template-columns:1fr 1fr}
  .pipe{grid-template-columns:1fr 1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .standing{grid-template-columns:1fr}
}
@media(max-width:900px){
  :root{--pad:22px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero{padding:50px 0 60px}
  .nav-links{display:none}
  .nav-cta{gap:12px}
  .nav-cta .theme-toggle{display:none}   /* signing in matters more than the switch */
  .foot-theme{display:inline-flex}
  .link-quiet{font-size:14px}
  .trust-grid{grid-template-columns:1fr;gap:34px}
  .cta-in{grid-template-columns:1fr;gap:30px;padding:56px var(--pad) 60px}
  .cta-actions{justify-content:flex-start}
  .section{padding:64px 0}
}
@media(max-width:640px){
  body{font-size:16px}
  .verdicts,.prices,.pipe,.foot-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .fact{flex-direction:column;gap:4px}
  .fact-n{min-width:0}
  .postmark{width:132px;height:132px;right:0}
  .pm-verdict{font-size:21px}
  .stage{min-height:210px}
  .field-row{flex-direction:column}
  .field,.btn{font-size:16px}
  .slip-body{padding:20px 18px 18px}
  .standing-pick,.standing-out{padding:24px 20px}
  .so-amt{font-size:44px}
  .foot-base{flex-direction:column;gap:10px}
}
@media(max-width:420px){
  .mark-name{display:none}
  .nav{position:static}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .hero h1{font-size:35px}
  .postmark{width:112px;height:112px}
  .pm-verdict{font-size:18px}
  .stage{min-height:180px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}