/* ============================================
   Vitable Compliance Hub — production design system
   Roobert + Reckless (licensed webfonts, self-hosted)
   evergreen #003C32 · cream #F9F4ED · mint #BFF4C8
   ============================================ */
@font-face{font-family:"Roobert";src:url("fonts/Roobert-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roobert";src:url("fonts/Roobert-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Roobert";src:url("fonts/Roobert-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Roobert";src:url("fonts/Roobert-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Roobert";src:url("fonts/Roobert-Heavy.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Reckless";src:url("fonts/Reckless-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Reckless";src:url("fonts/Reckless-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Reckless";src:url("fonts/Reckless-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --green:#003C32; --green-soft:#0d5344; --mint:#BFF4C8; --mint-soft:#e2fae7;
  --cream:#F9F4ED; --warm-white:#FFFBF6; --sand:#F4EADB; --sand-dark:#e7d9c4;
  --ink:#262626; --muted:#6f6a62; --plum:#682C46;
  --radius:16px; --pill:100px;
  --sans:"Roobert",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --serif:"Reckless",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);line-height:1.65;font-size:16px}
a{color:var(--green);text-decoration-color:rgba(0,60,50,.3);text-underline-offset:3px}
a:hover{text-decoration-color:var(--green)}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}

#progress{position:fixed;top:0;left:0;height:3px;background:var(--mint);width:0;z-index:99}

/* header */
.site-head{background:var(--cream);padding:18px 0;border-bottom:1px solid var(--sand-dark)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:13px;color:var(--green);text-decoration:none}
.brand img{height:26px;width:auto;display:block}
.brand span{background:var(--mint);border-radius:6px;padding:2px 9px;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.site-nav{font-size:14px;display:flex;gap:24px;align-items:center}
.site-nav a{color:var(--green);text-decoration:none;font-weight:600}
.site-nav a:hover{opacity:.7}
.site-nav a:last-child{background:var(--green);color:var(--warm-white);border-radius:var(--pill);padding:9px 20px}
.site-nav a:last-child:hover{opacity:1;background:var(--green-soft)}

.breadcrumbs{font-size:13.5px;color:var(--muted);padding:22px 0 0}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--green);text-decoration:underline}

main{padding:8px 0 72px}

/* hero (editorial) */
.hero{position:relative;overflow:hidden;padding:40px 0 36px;border-bottom:1px solid var(--sand-dark)}
.hero.green{background:var(--green);border-bottom:none;color:var(--cream)}
.hero .glyph{position:absolute;right:-30px;top:-70px;font-family:var(--serif);font-size:380px;line-height:1;color:var(--sand);z-index:0;user-select:none;font-weight:600}
.hero.green .glyph{color:rgba(191,244,200,.10)}
.hero .wrap{position:relative;z-index:1}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);margin-bottom:14px}
.kicker::before{content:"";width:26px;height:2px;background:var(--plum);display:inline-block}
.hero.green .kicker{color:var(--mint)}
.hero.green .kicker::before{background:var(--mint)}
h1{font-family:var(--serif);font-size:clamp(30px,4.8vw,50px);font-weight:500;color:var(--green);letter-spacing:-.015em;line-height:1.1;max-width:800px;margin-bottom:14px}
.hero.green h1{color:#fff}
.hero .sub{font-size:17px;color:var(--muted);max-width:640px}
.hero.green .sub{color:#c5d6cd}
.trustline{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13.5px;color:var(--muted);margin-top:18px}
.trustline b{color:var(--green)}
.hero.green .trustline{color:#a9c2b8}
.hero.green .trustline b{color:var(--mint)}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:30px 0 4px}
.stat{background:var(--warm-white);border:1px solid var(--sand);border-radius:18px;padding:20px 22px 16px}
.stat .big{font-family:var(--serif);font-size:clamp(18px,2vw,26px);font-weight:600;color:var(--green);line-height:1.2}
.stat .lbl{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:7px}

/* answer box */
.answer{background:var(--green);color:var(--cream);border-radius:22px;padding:28px 32px;margin:26px 0 14px;font-size:17px;line-height:1.62;position:relative;overflow:hidden}
.answer::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:var(--mint);opacity:.15}
.answer .lede{font-family:var(--serif);font-size:21px;font-weight:500;color:#fff;display:block;margin-bottom:8px;line-height:1.35}
.answer a{color:var(--mint)}
.answer b{color:#fff}

h2{font-family:var(--serif);font-size:27px;font-weight:500;color:var(--green);letter-spacing:-.01em;margin:40px 0 12px}
h3{font-size:17px;font-weight:700;color:var(--green);margin:22px 0 8px}
p{margin:0 0 15px;font-size:16px}
.lede-sub{color:var(--muted);font-size:15.5px;margin-bottom:20px}

cite.reg{font-style:normal;background:var(--mint-soft);border-radius:6px;padding:2px 8px;font-size:14px;white-space:nowrap}
cite.reg a{text-decoration:none;font-weight:700;color:var(--green)}
cite.reg a:hover{text-decoration:underline}

/* facts */
.factcard{background:var(--warm-white);border:1px solid var(--sand);border-radius:var(--radius);padding:6px 26px;margin:16px 0}
.fact{padding:16px 0;border-top:1px solid var(--sand);font-size:15.5px}
.fact:first-child{border-top:none}
.fact b{color:var(--green)}
.fact .src{font-size:13px;margin-left:8px;white-space:nowrap;font-weight:700}
.fed-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#eef1f7;color:#4a5a7a;border-radius:5px;padding:3px 9px;margin-bottom:4px}
.state-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--mint-soft);color:var(--green);border-radius:5px;padding:3px 9px;margin-bottom:4px}

/* tables */
.tablewrap{overflow-x:auto;margin:16px 0 8px}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--warm-white);border:1px solid var(--sand);border-radius:var(--radius);overflow:hidden;font-size:14px}
th{background:var(--green);color:var(--cream);text-align:left;padding:12px 14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;position:sticky;top:0}
td{padding:12px 14px;border-top:1px solid var(--sand);vertical-align:top}
tr:nth-child(even) td{background:var(--cream)}
td a{font-weight:700}

/* cards & grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:20px 0}
.cardlink{display:block;background:var(--warm-white);border:1px solid var(--sand);border-radius:var(--radius);padding:22px 24px;text-decoration:none;color:var(--ink);transition:transform .16s,box-shadow .16s,border-color .16s}
.cardlink:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 10px 26px rgba(0,60,50,.10)}
.cardlink b{display:block;color:var(--green);font-size:16px;margin-bottom:6px;font-weight:800}
.cardlink span{font-size:14px;color:var(--muted);line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:11.5px;font-weight:700;background:var(--mint-soft);color:var(--green);border-radius:5px;padding:2px 8px}

/* map */
.tilemap{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;max-width:660px;margin:24px 0 32px}
.tile{aspect-ratio:1/1;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;background:var(--green);color:var(--mint);text-decoration:none;border:2px solid transparent;transition:transform .14s,box-shadow .14s}
a.tile:hover{transform:scale(1.14);box-shadow:0 6px 16px rgba(0,60,50,.25);border-color:var(--mint)}
.map-note{font-size:14px;color:var(--muted)}
.map-note b{color:var(--green)}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:13.5px;color:var(--muted);margin:22px 0 6px;padding:14px 20px;background:var(--warm-white);border:1px solid var(--sand);border-radius:var(--radius)}
.trust b{color:var(--green)}

/* sources */
.sources{font-size:14px;color:var(--muted);background:var(--warm-white);border:1px solid var(--sand);border-radius:var(--radius);padding:18px 22px;margin-top:28px}
.sources b{color:var(--green);font-size:15px}
.sources ol{margin:8px 0 0 18px}
.sources li{margin-bottom:6px}

.next{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.next a{background:var(--green);color:var(--warm-white);text-decoration:none;font-weight:700;font-size:14.5px;padding:12px 26px;border-radius:var(--pill);transition:background .15s}
.next a:hover{background:var(--green-soft)}
.next a.ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.next a.ghost:hover{background:var(--mint-soft)}

/* sibling links */
.siblings{margin-top:34px;padding-top:18px;border-top:1px solid var(--sand-dark)}
.siblings .t{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.siblings ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.siblings a{display:inline-block;background:var(--warm-white);border:1px solid var(--sand);border-radius:var(--pill);padding:7px 16px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--green)}
.siblings a:hover{border-color:var(--green)}

footer{background:var(--green);color:#a9c2b8;font-size:13px;padding:30px 0;line-height:1.7}
footer b{color:var(--cream)}
footer a{color:var(--mint)}
footer img.footlogo{height:22px;width:auto;display:block;margin-bottom:14px;opacity:.9}

.bookmark{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--mint);background:rgba(191,244,200,.12);border:1px solid rgba(191,244,200,.35);border-radius:var(--pill);padding:7px 16px}
.eyebrow{display:inline-block;background:rgba(191,244,200,.15);color:var(--mint);font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--pill);padding:6px 16px;margin-bottom:16px}

/* CTA: footer band (full-width, content constrained to .wrap) */
.cta-band{background:linear-gradient(90deg,var(--green),var(--green-soft));padding:22px 0}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cta-band .t{color:#fff;font-weight:700;font-size:15.5px}
.cta-band .t small{display:block;color:#a9c2b8;font-weight:400;font-size:13px}
.cta-band a{background:#fff;color:var(--green);font-weight:800;font-size:13.5px;text-decoration:none;padding:11px 22px;border-radius:var(--pill);white-space:nowrap}

/* CTA: inline ACA calculator panel */
.cta-inline{background:var(--green);color:var(--cream);border-radius:20px;padding:26px 30px;margin:22px 0;position:relative;overflow:hidden;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.cta-inline::before{content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px;border-radius:50%;background:var(--mint);opacity:.16}
.cta-inline .txt{flex:1;min-width:260px;position:relative}
.cta-inline .kick{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-bottom:6px}
.cta-inline .head{font-family:var(--serif);font-size:21px;font-weight:500;color:#fff;line-height:1.3;margin-bottom:6px}
.cta-inline .sub{font-size:14.5px;color:#c5d6cd}
.cta-inline .btn{position:relative;background:var(--mint);color:var(--green);font-weight:800;font-size:14.5px;text-decoration:none;padding:13px 26px;border-radius:var(--pill);white-space:nowrap}

/* CTA: email capture strip */
.cta-email{background:var(--mint-soft);border:1.5px solid var(--mint);border-radius:18px;padding:22px 26px;margin:22px 0}
.cta-email .head{font-weight:800;color:var(--green);font-size:16px;margin-bottom:3px}
.cta-email .sub{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.cta-email form{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.cta-email input[type=email]{flex:1;min-width:200px;border:1px solid var(--sand-dark);border-radius:var(--pill);padding:12px 18px;font-size:14px;font-family:var(--sans);background:#fff}
.cta-email button{background:var(--green);color:#fff;border:none;font-family:var(--sans);font-weight:800;font-size:14px;padding:12px 24px;border-radius:var(--pill);cursor:pointer}
.cta-email button:disabled{opacity:.6;cursor:default}
.cta-email .fine{font-size:11.5px;color:var(--muted);margin-top:8px}
.cta-email .err{color:#8a3030}

@media(max-width:680px){.site-nav{display:none}.answer{padding:22px}.hero .glyph{font-size:240px}}