/* ============================================================
   THE SCAM HOTLINE — design system
   Calm civic trust · WCAG 2.2 AA · audience 45–85 + families
   Palette: navy #152438 · blue #21567E · sky #BFE0F2 · cream #FAF7F1
   green #1E6B47 (reassure) · amber #8A6A0B (warn) · red #A63A28 (urgent)
   Fonts: Fraunces (display) · Atkinson Hyperlegible (body)
   ============================================================ */

:root{
  --navy:#152438;
  --navy-2:#1F3A5F;
  --blue:#21567E;          /* 7.2:1 on cream — safe for text */
  --blue-bright:#2E6E9E;
  --sky:#BFE0F2;
  --sky-soft:#E8F2FA;
  --cream:#FAF7F1;
  --paper:#FFFFFF;
  --ink:#1F2A37;
  --muted:#4A5A6A;         /* 7:1 on cream */
  --line:#D9DFE6;
  --green:#1E6B47;
  --green-soft:#E7F2EC;
  --amber:#8A6A0B;
  --amber-soft:#FBF3DC;
  --red:#A63A28;
  --red-soft:#FBEDEA;
  --focus:#0B63C5;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 2px 10px rgba(21,36,56,.07), 0 12px 32px rgba(21,36,56,.06);
  --maxw:1080px;
  --maxw-text:720px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  font-family:'Atkinson Hyperlegible', 'Libre Franklin', Georgia, sans-serif;
  font-size:18px; line-height:1.65; color:var(--ink);
  background:var(--cream);
}
@media(max-width:640px){ body{font-size:17px} }

h1,h2,h3,.serif{font-family:'Fraunces', Georgia, serif; color:var(--navy); line-height:1.18; letter-spacing:-.01em}
h1{font-size:clamp(2rem, 4.6vw, 3.1rem); font-weight:700}
h2{font-size:clamp(1.55rem, 3.2vw, 2.15rem); font-weight:700}
h3{font-size:1.25rem; font-weight:600}
p{max-width:66ch}

a{color:var(--blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.wrap-text{max-width:var(--maxw-text); margin:0 auto; padding:0 22px}

/* ---------- header ---------- */
.site-header{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100}
.nav-row{max-width:var(--maxw); margin:0 auto; padding:10px 22px; display:flex; align-items:center; gap:18px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.logo .mark{width:40px;height:40px;flex:none}
.logo b{font-family:'Fraunces',serif; font-size:1.15rem; color:var(--navy); line-height:1.1; display:block}
.logo small{display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); font-family:'Atkinson Hyperlegible',sans-serif}
.nav-links{display:flex; gap:2px; margin-left:auto; align-items:center; flex-wrap:wrap}
.nav-links a{font-size:.93rem; text-decoration:none; color:var(--ink); padding:10px 9px; border-radius:8px; min-height:44px; display:inline-flex; align-items:center}
.nav-links a:hover{background:var(--sky-soft); color:var(--navy)}
.nav-links a[aria-current="page"]{font-weight:700; color:var(--navy); box-shadow:inset 0 -3px 0 var(--blue-bright)}
.nav-cta{margin-left:6px}
.nav-links a.nav-cta{background:var(--navy); color:#fff; padding:10px 18px; min-height:46px}
.nav-links a.nav-cta:hover{background:var(--navy-2); color:#fff}
.menu-btn{display:none; margin-left:auto; background:var(--paper); border:2px solid var(--navy); color:var(--navy); font:inherit; font-weight:700; padding:9px 14px; border-radius:10px; cursor:pointer; min-height:44px}
@media(max-width:980px){
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; padding:10px 16px 18px; box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{font-size:1.05rem; padding:14px 12px; border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:none}
  .menu-btn{display:inline-flex; align-items:center}
  .nav-cta{margin:10px 0 0}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:700; text-decoration:none; cursor:pointer;
  border-radius:12px; padding:14px 26px; min-height:52px; border:2px solid transparent;
  transition:background .15s, color .15s, border-color .15s}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-2); color:#fff}
.btn-secondary{background:var(--paper); color:var(--navy); border-color:var(--navy)}
.btn-secondary:hover{background:var(--sky-soft)}
.btn-green{background:var(--green); color:#fff}
.btn-green:hover{background:#17573a; color:#fff}
.btn-lg{font-size:1.12rem; padding:17px 32px; min-height:58px}
.btn-block{width:100%}

/* ---------- sections ---------- */
section{padding:64px 0}
@media(max-width:640px){ section{padding:46px 0} }
.section-alt{background:var(--paper)}
.section-navy{background:var(--navy); color:var(--sky-soft)}
.section-navy h2, .section-navy h3{color:#fff}
.section-navy p{color:var(--sky-soft)}
.kicker{font-size:.82rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); margin-bottom:12px}
.section-navy .kicker{color:var(--sky)}
.lede{font-size:1.15rem; color:var(--muted); max-width:62ch}
.section-navy .lede{color:var(--sky-soft)}

/* ---------- cards ---------- */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

/* ---------- alert / callout panels ---------- */
.panel{border-radius:var(--radius); padding:26px 28px; border:1px solid var(--line)}
.panel-urgent{background:var(--red-soft); border:2px solid var(--red)}
.panel-warn{background:var(--amber-soft); border-left:6px solid var(--amber)}
.panel-safe{background:var(--green-soft); border-left:6px solid var(--green)}
.panel-info{background:var(--sky-soft); border-left:6px solid var(--blue-bright)}
.panel h2,.panel h3{margin-bottom:10px}

/* do-not list */
.stop-list{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px; margin:18px 0}
@media(max-width:680px){ .stop-list{grid-template-columns:1fr} }
.stop-list li{display:flex; gap:12px; align-items:flex-start; font-size:1.06rem; font-weight:700; color:var(--navy)}
.stop-list .x{flex:none; width:28px; height:28px; border-radius:50%; background:var(--red); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; margin-top:2px}
.stop-list .ok{background:var(--green)}

/* checklists */
.check-list{list-style:none; margin:14px 0}
.check-list li{display:flex; gap:12px; margin-bottom:10px; align-items:flex-start}
.check-list .tick{flex:none; width:26px; height:26px; border-radius:50%; background:var(--green-soft); color:var(--green); border:1.5px solid var(--green); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; margin-top:3px}

/* numbered steps */
.steps{list-style:none; counter-reset:step; margin:18px 0}
.steps>li{counter-increment:step; display:flex; gap:16px; margin-bottom:16px; align-items:flex-start}
.steps>li::before{content:counter(step); flex:none; width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; font-family:'Fraunces',serif; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:2px}

/* ---------- accordions (scam cards) ---------- */
details.acc{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:14px; box-shadow:var(--shadow); overflow:hidden}
details.acc summary{list-style:none; cursor:pointer; padding:20px 24px; display:flex; align-items:center; gap:14px; min-height:64px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary h3{flex:1}
details.acc summary .chev{flex:none; width:30px; height:30px; border-radius:50%; border:2px solid var(--blue); color:var(--blue); display:inline-flex; align-items:center; justify-content:center; font-weight:700; transition:transform .18s}
details.acc[open] summary .chev{transform:rotate(90deg)}
details.acc summary:hover{background:var(--sky-soft)}
.acc-body{padding:4px 24px 24px; border-top:1px solid var(--line)}
.acc-body h4{font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin:18px 0 6px}
.acc-body h4:first-child{margin-top:14px}
.acc-badge{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:99px; background:var(--sky-soft); color:var(--blue); flex:none}

/* ---------- trust strip ---------- */
.trust-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px}
@media(max-width:820px){ .trust-strip{grid-template-columns:repeat(2,1fr)} }
.trust-strip div{display:flex; gap:10px; align-items:center; font-weight:700; color:var(--navy); font-size:.98rem}
.trust-strip .dot{flex:none; width:12px; height:12px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-soft)}

/* ---------- testimonials ---------- */
.quote-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px}
.quote-card .tag{align-self:flex-start; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--sky-soft); color:var(--blue); padding:5px 12px; border-radius:99px}
.quote-card blockquote{font-size:1.05rem; color:var(--ink)}
.quote-card cite{font-style:normal; font-weight:700; color:var(--muted); font-size:.95rem}

/* ---------- footer ---------- */
footer{background:var(--navy); color:var(--sky-soft); padding:52px 0 34px; margin-top:0}
footer a{color:var(--sky-soft)}
footer a:hover{color:#fff}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:34px}
@media(max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .foot-grid{grid-template-columns:1fr} }
.foot-grid h3{color:#fff; font-size:1rem; margin-bottom:12px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:9px}
.foot-note{border-top:1px solid rgba(255,255,255,.18); margin-top:36px; padding-top:22px; font-size:.92rem; color:#B9CFE0}
.foot-warning{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-sm); padding:14px 18px; font-size:.95rem; margin-top:22px}

/* ---------- disclaimer ---------- */
.disclaimer-box{background:var(--paper); border:1.5px dashed var(--blue-bright); border-radius:var(--radius-sm); padding:18px 22px; font-size:.98rem; color:var(--muted)}

/* ---------- quiz / checker chrome ---------- */
.tool-shell{max-width:640px; margin:0 auto}
.tool-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:34px}
@media(max-width:560px){ .tool-card{padding:24px 18px} }
.tool-progress{height:10px; background:var(--sky-soft); border-radius:99px; overflow:hidden; margin-bottom:26px}
.tool-progress i{display:block; height:100%; background:var(--blue-bright); border-radius:99px; transition:width .3s}
.opt-btn{display:block; width:100%; text-align:left; font:inherit; font-size:1.08rem; font-weight:600; color:var(--navy);
  background:var(--cream); border:2px solid var(--line); border-radius:12px; padding:16px 20px; margin-bottom:12px; cursor:pointer; min-height:58px}
.opt-btn:hover{border-color:var(--blue-bright); background:var(--sky-soft)}
.back-link{background:none; border:none; font:inherit; color:var(--blue); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:10px 0; min-height:44px}

/* result blocks */
.result-flag{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; font-size:1.02rem}
.result-flag .icon{flex:none; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; margin-top:2px}
.icon-warn{background:var(--amber-soft); color:var(--amber); border:1.5px solid var(--amber)}
.icon-urgent{background:var(--red-soft); color:var(--red); border:1.5px solid var(--red)}
.icon-safe{background:var(--green-soft); color:var(--green); border:1.5px solid var(--green)}

/* score meter */
.score-big{font-family:'Fraunces',serif; font-size:3.4rem; font-weight:700; color:var(--navy); line-height:1}
.score-big small{font-size:1.4rem; color:var(--muted)}

/* utility */
.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:34px}
.mb-1{margin-bottom:10px}.mb-2{margin-bottom:20px}.mb-3{margin-bottom:34px}
.center{text-align:center}
.small{font-size:.95rem; color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.last-reviewed{font-size:.9rem; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; margin-top:40px}

@media print{
  .site-header, footer, .btn, .no-print{display:none!important}
  body{background:#fff; font-size:12pt}
  .card,.panel{box-shadow:none; break-inside:avoid}
}

/* ---------- offer blocks (conversion layer) ---------- */
.offer{background:var(--navy); color:var(--sky-soft); border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.offer::after{content:""; position:absolute; top:-40px; right:-40px; width:180px; height:180px; border-radius:50%; background:rgba(191,224,242,.08); pointer-events:none}
.offer .kicker{color:var(--sky)}
.offer h2,.offer h3{color:#fff}
.offer p{color:var(--sky-soft)}
.offer .price{font-family:'Fraunces',serif; font-size:2rem; font-weight:700; color:#fff}
.offer .price small{font-size:1rem; color:var(--sky); font-weight:400}
.offer .stack{list-style:none; margin:16px 0}
.offer .stack li{display:flex; gap:10px; margin-bottom:9px; align-items:flex-start; font-size:1.02rem}
.offer .stack .tick{flex:none; width:24px; height:24px; border-radius:50%; background:rgba(191,224,242,.15); color:var(--sky); border:1.5px solid var(--sky); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; margin-top:3px}
.offer .guarantee{background:rgba(255,255,255,.07); border:1px solid rgba(191,224,242,.3); border-radius:var(--radius-sm); padding:12px 16px; font-size:.95rem; margin-top:14px}
.btn-gold{background:var(--sky); color:var(--navy); font-weight:700}
.btn-gold:hover{background:#A9D5EC; color:var(--navy)}
.hook{font-family:'Fraunces',serif; font-size:clamp(1.35rem,2.6vw,1.7rem); font-weight:600; color:var(--navy); line-height:1.3}
.offer .hook{color:#fff}