/* pages.css — shared page-component library for engine views (about, badges,
   pricing, apply, contact, verify). Base tokens + header/footer/burger live in
   home.css; this is loaded after it. Design language ported 1:1 from the
   approved mockups so every page reads as one system. */

.narrow{max-width:900px}
:root{--green-d:#1f8f43;--silver:#9aa3ad;--silver-d:#6b7480}

/* page hero */
.phero{background:radial-gradient(1000px 460px at 72% -20%,#23252b,var(--char));color:#fff;text-align:center;padding:66px 0 62px}
.phero .eyebrow{color:var(--gold)}
.phero h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:900;margin:14px 0 16px}
.phero h1 .g{background:linear-gradient(120deg,var(--gold),#f2ddba);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phero p{color:#c9cace;font-size:1.12rem;max-width:640px;margin:0 auto 26px}
.phero p:last-child{margin-bottom:0}
.phero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.crumb{color:var(--muted);font-size:.82rem;font-weight:600;margin-bottom:6px}
.crumb a{color:#c9cace}.crumb a:hover{color:var(--gold)}

/* sections */
.section{padding:76px 0}
.section.alt{background:var(--bg2)}
.head-c{text-align:center;max-width:700px;margin:0 auto 48px}
.head-c h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:12px 0 14px}
.head-c p{color:var(--muted);font-size:1.06rem}
.lead{max-width:780px;margin:0 auto;text-align:center;color:var(--ink-soft);font-size:1.14rem;line-height:1.7}

/* badge cards (3-tier: Basic / Verified / Vetted & Verified) */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:0 auto;align-items:stretch}
.bcard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px 28px;text-align:center;position:relative;transition:.25s;display:flex;flex-direction:column}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bcard.featured{border:2px solid var(--gold);box-shadow:0 16px 50px rgba(220,184,129,.28)}
.bcard .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#2a2113;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:999px}
.bcard img.bimg{width:132px;height:132px;object-fit:contain;margin:6px auto 16px;filter:drop-shadow(0 10px 24px rgba(20,20,25,.16))}
.bcard img.bimg.silver{filter:grayscale(1) brightness(1.22) contrast(.95) drop-shadow(0 10px 24px rgba(20,20,25,.14))}
.bcard img.bimg.basic{filter:grayscale(1) brightness(1.02) opacity(.72)}
.bcard h3{font-size:1.3rem;margin-bottom:6px}
.bcard .role{font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px}
.bcard.basic .role{color:var(--muted)}.bcard.silver .role{color:var(--silver-d)}.bcard.gold .role{color:var(--green-d)}
.bcard ul{list-style:none;text-align:left;margin:14px auto 24px;max-width:300px;width:100%}
.bcard li{padding:9px 0 9px 30px;position:relative;color:var(--ink-soft);font-size:.93rem;border-bottom:1px solid var(--line)}
.bcard li:last-child{border-bottom:0}
.bcard li::before{content:"";position:absolute;left:0;top:12px;width:18px;height:18px;border-radius:50%;background:var(--bg2)}
.bcard li.on::before{background:var(--green)}
.bcard li.on::after{content:"✓";position:absolute;left:4px;top:8px;font-size:.72rem;font-weight:900;color:#fff}
.bcard li.off{color:var(--muted)}.bcard li.off::after{content:"–";position:absolute;left:6px;top:8px;color:var(--muted);font-weight:900}
.bcard .btn{margin-top:auto}

/* the checks */
.checks{max-width:820px;margin:0 auto;display:grid;gap:14px}
.chk{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-s)}
.chk .tick{flex:none;width:30px;height:30px;border-radius:9px;background:var(--green);display:grid;place-items:center}
.chk b{font-size:1.02rem;display:block;margin-bottom:3px}
.chk p{color:var(--muted);font-size:.93rem}

/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.q{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.q h3{font-size:1.02rem;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start}
.q h3 span{color:var(--gold-deep);flex:none}
.q p{color:var(--ink-soft);font-size:.95rem}

/* feature cards */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px;box-shadow:var(--shadow-s);transition:.25s}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.fcard .ic{width:54px;height:54px;border-radius:15px;background:rgba(220,184,129,.16);display:grid;place-items:center;margin-bottom:18px;color:var(--gold-deep)}
.fcard h3{font-size:1.18rem;margin-bottom:8px}
.fcard p{color:var(--muted);font-size:.96rem}

/* pricing */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1040px;margin:0 auto;align-items:stretch}
.pricing.two{grid-template-columns:repeat(2,1fr);max-width:760px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 26px;display:flex;flex-direction:column;position:relative;transition:.25s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pcard.hot{border:2px solid var(--gold);box-shadow:0 16px 50px rgba(220,184,129,.28)}
.pcard .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#2a2113;font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:999px}
.pcard .pname{font-weight:800;font-size:1.15rem}
.pcard .price{font-size:2.4rem;font-weight:900;letter-spacing:-.03em;margin:10px 0 2px}
.pcard .price small{font-size:.95rem;font-weight:600;color:var(--muted);letter-spacing:0}
.pcard .desc{color:var(--muted);font-size:.9rem;margin-bottom:18px;min-height:2.6em}
.pcard ul{list-style:none;display:grid;gap:11px;margin:6px 0 24px}
.pcard li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--ink-soft)}
.pcard li svg{flex:none;margin-top:3px;color:var(--green-d)}
.pcard li.off{color:var(--muted)}
.pcard .btn{width:100%;margin-top:auto}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.steps.three{grid-template-columns:repeat(3,1fr)}
.step{text-align:center;padding:12px}
.step .n{width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--gold);font-weight:800;font-size:1.3rem;display:grid;place-items:center;margin:0 auto 18px}
.step h3{font-size:1.12rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.94rem}

/* testimonial */
.quote{max-width:820px;margin:0 auto;text-align:center}
.quote p{font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:700;letter-spacing:-.01em;line-height:1.4}
.quote .who{margin-top:20px;color:var(--muted);font-weight:600;font-size:.95rem}
.quote .stars{color:#F5B301;font-size:1.1rem;letter-spacing:2px;margin-bottom:18px}

/* story split + stat band */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.split img{border-radius:22px;box-shadow:var(--shadow);width:100%;object-fit:cover;aspect-ratio:4/3}
.split h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:12px 0 16px}
.split p{color:var(--ink-soft);font-size:1.02rem;margin-bottom:14px}
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.statband .s b{display:block;font-size:2.5rem;font-weight:900;color:var(--ink);letter-spacing:-.03em;line-height:1}
.statband .s span{color:var(--muted);font-weight:600;font-size:.9rem;display:block;margin-top:8px}

/* CTA band */
.cta{background:radial-gradient(900px 400px at 80% 0%,#24262c,var(--char));color:#fff;border-radius:28px;padding:56px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.5rem,3vw,2.2rem);max-width:560px}
.cta p{color:#c9cace;margin-top:10px;max-width:520px}
.cta .actions{display:flex;gap:14px;flex-wrap:wrap}

/* contact */
.clayout{display:grid;grid-template-columns:1fr .85fr;gap:44px;align-items:start}
.formcard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.formcard h2{font-size:1.4rem;margin-bottom:6px}
.formcard .sub{color:var(--muted);font-size:.92rem;margin-bottom:22px}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.fld label{font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.fld input,.fld select,.fld textarea{border:1px solid var(--line);border-radius:12px;padding:14px;font-size:1rem;font-family:inherit;color:var(--ink);background:#fff;outline:0;transition:.15s;width:100%}
.fld textarea{resize:vertical;min-height:120px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold-d);box-shadow:0 0 0 3px rgba(220,184,129,.18)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formcard .btn{width:100%;padding:15px;margin-top:4px}
.sent{display:none;text-align:center;padding:30px 10px}
.sent .ok{width:64px;height:64px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:0 auto 16px}
.sent h3{font-size:1.3rem;margin-bottom:6px}
.sent p{color:var(--muted)}
.cinfo{display:grid;gap:14px}
.irow{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-s)}
.irow .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--bg2);display:grid;place-items:center;color:var(--ink)}
.irow small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:3px}
.irow b{font-size:.98rem;display:block}
.irow p{color:var(--ink-soft);font-size:.9rem}
.dept{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow-s);text-align:center}
.dcard .ic{width:52px;height:52px;border-radius:14px;background:rgba(220,184,129,.16);display:grid;place-items:center;margin:0 auto 16px;color:var(--gold-deep)}
.dcard h3{font-size:1.12rem;margin-bottom:6px}
.dcard p{color:var(--muted);font-size:.92rem;margin-bottom:12px}
.dcard a{color:var(--blue);font-weight:700;font-size:.92rem}

/* verify / DOT lookup tool */
.vtool{max-width:680px;margin:-40px auto 0;position:relative;z-index:3;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.vtool form{display:flex;gap:10px;flex-wrap:wrap}
.vtool .fin{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:4px 4px 4px 16px;background:var(--bg2)}
.vtool .fin input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:1.05rem;padding:14px 4px;font-family:inherit;color:var(--ink)}
.vtool .btn{padding:15px 26px}
.vtool .hint{color:var(--muted);font-size:.84rem;margin-top:12px;text-align:center}
.vresult{max-width:680px;margin:26px auto 0}
.vcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow-s)}
.vcard.hit{border-left:5px solid var(--green)}
.vcard.miss{border-left:5px solid var(--silver)}
.vcard .vtop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.vcard h3{font-size:1.35rem}
.vcard .vloc{color:var(--muted);font-size:.95rem;margin-top:2px}
.vcard .vmeta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:18px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vcard .vmeta div{font-size:.9rem;color:var(--muted)}
.vcard .vmeta b{display:block;color:var(--ink);font-size:1.02rem;font-weight:700}
.tier{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.78rem;letter-spacing:.03em;padding:7px 14px;border-radius:999px;white-space:nowrap}
.tier.t-basic{background:var(--bg2);color:var(--silver-d)}
.tier.t-silver{background:rgba(154,163,173,.16);color:var(--silver-d)}
.tier.t-gold{background:rgba(220,184,129,.2);color:var(--gold-deep)}

@media(max-width:900px){
  .badges,.pricing,.feat,.dept{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:30px}.split .art{order:-1}
  .statband{grid-template-columns:1fr 1fr;gap:30px 24px}
  .steps{grid-template-columns:1fr 1fr}.steps.three{grid-template-columns:1fr}
  .clayout{grid-template-columns:1fr;gap:28px}
  .pcard.hot{order:-1}
  .cta{padding:38px 26px;text-align:center;justify-content:center}.cta .actions{justify-content:center;width:100%}
}
@media(max-width:620px){
  .section{padding:52px 0}
  .pricing.two{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .formcard{padding:26px 20px}.frow{grid-template-columns:1fr}
  .cta{padding:34px 22px;border-radius:22px}.cta .actions .btn{width:100%}
  .phero .actions .btn{width:100%}
}

/* ---- Phase 3: provisional tier + verification apply form ---- */
.tier.t-prov{background:rgba(37,99,168,.14);color:#1a5fa8}
.dpill.t-prov{background:rgba(37,99,168,.14);color:#1a5fa8}
.formerr{background:#fdecec;border:1px solid #f4caca;color:#a12;border-radius:10px;padding:12px 14px;margin:0 0 16px;font-size:.92rem}
.formerr ul{margin:6px 0 0;padding-left:18px}
.filefld input[type=file]{width:100%;padding:9px;border:1px dashed var(--line,#d9d9de);border-radius:8px;background:#fbfaf6;font:inherit}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;line-height:1.45;cursor:pointer}
.chk input{margin-top:3px;flex:none}

/* ---- Phase 4: suspended-listing stub + recommendations ---- */
.susp-card{border-left:4px solid #c98a2f}
.susp-badge{display:inline-block;background:rgba(201,138,47,.14);color:#a86f1c;font-weight:800;font-size:.72rem;letter-spacing:.03em;padding:5px 11px;border-radius:999px;text-transform:uppercase}
.susp-lead{color:var(--ink-soft,#3a3f47);line-height:1.6;margin:8px 0 0}
.recgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media(max-width:720px){.recgrid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.recgrid{grid-template-columns:1fr}}
.reccard{display:block;border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;transition:border-color .15s}
.reccard:hover{border-color:var(--gold,#c8992e);text-decoration:none}
.recname{font-weight:800;color:var(--ink,#14161a)}
.recmeta{color:var(--muted);font-size:.85rem;margin-top:2px}
/* Phase 6 — footer social + article share */
.fsocial{display:flex;gap:10px;margin-top:16px}
.fsocial a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);color:#d8c9a6;transition:.15s}
.fsocial a:hover{background:var(--gold,#C4A66B);color:#16171A}
.pgshare{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.pgshare span{font-weight:800;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.pgshare a{font-weight:700;font-size:.9rem;color:var(--ink);padding:7px 14px;border:1px solid var(--line);border-radius:999px;transition:.15s}
.pgshare a:hover{background:var(--char,#16171A);color:#fff;border-color:var(--char,#16171A)}