/* ============================================================
   THE ACCIDENT ADVISORY — site.css (SINGLE SOURCE OF TRUTH)
   Homepage-canonical. Edit here once; rebuild propagates everywhere.
   ============================================================ */

/* ================= GLOBAL TOKENS — change colours & fonts here only ================= */
:root{
  /* CONFIRMED: deep navy structure + yellow accent, Frank Ruhl Libre + Public Sans — all swappable in one place */
  --brand:#101B33; --brand-900:#0A1224; --brand-700:#1C2E52; --brand-soft:#646b7a; --tint:#ECEDF1;
  --paper:#F6F7F9; --surface:#FFFFFF; --ink:#1A1C22; --ink-soft:#565b68; --line:#E4E6EA;
  --accent:#FFC72C; --accent-tint:#FFF7E0; --accent-dark:var(--brand);
  --font-display:'Frank Ruhl Libre',Georgia,serif; --font-body:'Public Sans',system-ui,sans-serif;
  --h-weight:500; --h-tracking:-0.005em;
  --wrap:1140px; --r:14px; --r-sm:8px; --shadow:0 1px 2px rgba(19,41,40,.05),0 10px 30px rgba(19,41,40,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--h-weight);line-height:1.13;letter-spacing:var(--h-tracking);color:var(--brand)}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-soft)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1rem;padding:.85em 1.5em;border-radius:var(--r-sm);border:1.5px solid transparent;cursor:pointer;transition:.15s}
.btn-primary{background:var(--accent);color:var(--brand)}
.btn-primary:hover{filter:brightness(.93)}
.btn-light{background:#fff;color:var(--brand)}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand)}
.announce{background:var(--brand-900);color:#fff}
.announce-in{display:flex;align-items:center;justify-content:center;gap:14px;padding:7px 24px;font-size:.82rem;font-weight:600;text-align:center;position:relative}
.announce-txt a{color:var(--accent);font-weight:700;text-decoration:underline}
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:3px solid var(--accent)}
.hdr-in{display:flex;align-items:center;gap:20px;height:72px;flex-wrap:nowrap}
.brand{display:flex;flex-direction:column;flex:none;font-family:var(--font-display);font-weight:var(--h-weight);font-size:1.15rem;letter-spacing:var(--h-tracking);color:var(--brand);line-height:1}
.brand small{display:block;font-weight:600;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
.nav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:.87rem;flex-wrap:nowrap}
.nav a{color:var(--brand);white-space:nowrap}
.nav a:hover{text-decoration:underline}
.hdr-cta{display:flex;align-items:center;gap:16px}
.btn-hdr{padding:.55em 1.1em;font-size:.85rem}
.tel{font-weight:700;color:var(--brand);font-size:.9rem}
.tel span{display:block;color:var(--ink-soft);font-weight:600;font-size:.68rem}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--brand);border-radius:2px}
.hero{position:relative;overflow:hidden;background:var(--paper)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:url('https://images.pexels.com/photos/7988214/pexels-photo-7988214.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover no-repeat;filter:grayscale(1) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(247,247,245,.92),rgba(247,247,245,.78) 52%,rgba(255,247,224,.55))}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding:64px 0 76px}
.hero h1{font-size:3rem;margin:14px 0 0;color:var(--brand)}
.hero .sub{font-size:1.16rem;color:var(--ink-soft);margin:20px 0 12px;max-width:34ch}
.hero .reassure{color:var(--brand);font-weight:600;margin-bottom:24px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap}
.steps{background:#fff;border-radius:var(--r);box-shadow:0 22px 50px rgba(0,0,0,.28);overflow:hidden;color:var(--ink)}
.steps-h{padding:17px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.steps-h .ttl{font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:var(--brand)}
.steps-h .tag{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);background:var(--tint);padding:5px 9px;border-radius:99px}
.steps ol{list-style:none;counter-reset:s;padding:6px 24px 4px}
.steps li{counter-increment:s;display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.85rem;display:grid;place-items:center}
.steps li b{font-weight:700}
.steps li p{font-size:.9rem;color:var(--ink-soft);margin-top:2px}
.steps-f{padding:14px 24px;background:var(--paper);border-top:1px solid var(--line)}
.steps-f a{color:var(--brand);font-weight:700}
.trust{background:var(--brand-900);color:#fff}
.trust-in{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;padding:18px 0;font-weight:600;font-size:1rem}
.trust-in span{display:flex;align-items:center;gap:10px}
.ti{width:22px;height:22px;flex:none;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sec{padding:66px 0}
.sec.tint{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:64ch;margin-bottom:32px}
.sec-head.ctr{margin-inline:auto;text-align:center}
.sec-head h2{font-size:2.05rem;margin-top:9px}
.sec-head p{color:var(--ink-soft);font-size:1.05rem;margin-top:9px}
.sit{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.sit a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:7px;transition:.16s}
.sit a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sit .lbl{font-family:var(--font-display);font-size:1.04rem;font-weight:700;color:var(--brand);line-height:1.2}
.sit .d{font-size:.85rem;color:var(--ink-soft);flex:1}
.sit .ar{display:inline-flex;align-items:center;gap:5px;color:var(--brand);font-weight:700;font-size:.88rem}
.sit .ar u{text-decoration:underline;text-underline-offset:2px}
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.type{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:.16s;display:flex;flex-direction:column;gap:5px}
.type:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.type .ic{width:52px;height:52px;border-radius:50%;background:var(--brand);display:grid;place-items:center;margin-bottom:8px}
.type .ic svg{width:26px;height:26px}
.type h3{font-size:1.04rem}
.type p{font-size:.85rem;color:var(--ink-soft)}
.type .key{margin-top:auto;padding-top:8px;font-size:.78rem;font-weight:700;color:var(--brand)}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}
.feat{background:var(--brand);color:#fff;border-radius:var(--r);padding:28px 30px;display:flex;flex-direction:column;gap:8px}
.feat h3{color:#fff;font-size:1.3rem}
.feat p{color:rgba(255,255,255,.85);font-size:.95rem}
.feat .go{margin-top:6px;font-weight:700;color:var(--accent)}
.feat .go u{text-decoration:underline;text-underline-offset:2px}
.feat .go:hover{opacity:.85}
.mistakes{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.mis{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;border-top:3px solid var(--accent)}
.mis .n{font-family:var(--font-display);font-weight:800;color:var(--brand);font-size:.98rem;background:var(--accent);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:4px}
.mis h3{font-size:1rem;margin:8px 0 5px}
.mis p{font-size:.85rem;color:var(--ink-soft)}
.approach{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.approach-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.approach-img img{display:block;width:100%;min-height:360px;object-fit:cover}
.approach h2{font-size:1.95rem}
.approach .lead{color:var(--ink-soft);margin:13px 0 16px;font-size:1.03rem}
.approach ul{list-style:none}
.approach li{display:flex;gap:11px;padding:8px 0;font-weight:600}
.approach li::before{content:"✓";flex:none;width:23px;height:23px;border-radius:50%;background:var(--tint);color:var(--brand);font-size:.78rem;display:grid;place-items:center}
.process{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.steps-timeline{counter-reset:p;list-style:none;display:flex;flex-direction:column;gap:6px}
.steps-timeline li{counter-increment:p;display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.steps-timeline li:last-child{border-bottom:0}
.steps-timeline li::before{content:counter(p);flex:none;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:grid;place-items:center;font-family:var(--font-display)}
.steps-timeline b{font-size:1.05rem}
.steps-timeline p{color:var(--ink-soft);font-size:.92rem;margin-top:2px}
.process-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.process-img img{display:block;width:100%;min-height:380px;object-fit:cover}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;transition:.18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .num{font-size:.83rem;color:var(--brand-soft);font-weight:700}
.card h3{font-size:1.3rem;margin:11px 0 9px}
.card>p{color:var(--ink-soft);margin-bottom:13px}
.card ul{list-style:none;margin-top:auto;border-top:1px solid var(--line);padding-top:13px}
.card li{padding:7px 0;font-size:.92rem}
.card li a{display:flex;justify-content:space-between;align-items:center;color:var(--brand);font-weight:600}
.card li a u{text-decoration:underline;text-underline-offset:2px}
.card li a::after{content:"→";color:var(--brand);font-weight:800;margin-left:10px}
.aft{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.aft h3{font-size:1.08rem;margin-bottom:6px}
.aft p{font-size:.88rem;color:var(--ink-soft)}
.aft .bar{width:30px;height:3px;border-radius:3px;background:var(--accent);margin-bottom:12px}
.state{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr .9fr;gap:44px;align-items:center;background:var(--tint);border:1px solid var(--line);border-radius:var(--r);padding:44px}
.state::before{content:"";position:absolute;top:50%;right:-40px;transform:translateY(-50%);width:520px;height:340px;z-index:0;opacity:.07;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 959 593' fill='none' stroke='%23101B33' stroke-width='6' stroke-linejoin='round'%3E%3Cpath d='M55 120 L120 90 L180 95 L230 70 L300 60 L360 75 L420 55 L480 65 L540 50 L610 60 L670 50 L730 70 L790 65 L840 90 L890 130 L905 180 L895 230 L910 270 L895 320 L905 370 L880 410 L890 450 L850 480 L800 505 L740 520 L680 515 L630 535 L570 520 L510 530 L450 515 L400 525 L340 505 L290 515 L240 490 L190 500 L150 470 L100 460 L70 420 L85 380 L60 340 L75 300 L55 260 L70 220 L50 175 Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain}
.state>*{position:relative;z-index:1}
.state h2{font-size:1.85rem}
.state p{color:var(--ink-soft);margin:12px 0 18px}
.state-pick{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.state-pick select{flex:1 1 220px;max-width:280px}
.state-pick .btn{flex:none}
.state select{font-family:var(--font-body);font-size:1rem;padding:.8em 1em;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);min-width:200px}
.band{position:relative;overflow:hidden;border-radius:var(--r);color:#fff;padding:54px 44px;text-align:center;background:linear-gradient(120deg,rgba(18,20,26,.62),rgba(18,20,26,.42)),url('https://images.pexels.com/photos/3183183/pexels-photo-3183183.jpeg?auto=compress&cs=tinysrgb&w=1500') center/cover no-repeat}
.band h2{color:#fff;font-size:1.9rem;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.band p{color:rgba(255,255,255,.88);margin:12px auto 22px;max-width:46ch;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.worth{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.worth ul{list-style:none}
.worth li{display:flex;gap:11px;padding:8px 0;font-weight:600}
.worth li::before{content:"✓";flex:none;width:23px;height:23px;border-radius:50%;background:var(--brand);color:#fff;font-size:.78rem;display:grid;place-items:center}
.worth .lead{color:var(--ink-soft);margin:12px 0 14px}
.worth .panel{background:var(--brand);color:#fff;border-radius:var(--r);padding:30px;text-align:center}
.worth .panel h3{color:#fff;font-size:1.3rem}
.worth .panel p{color:rgba(255,255,255,.85);margin:11px 0 18px}
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-bottom:26px}
.step-h .k{font-family:var(--font-display);font-size:1.15rem;color:var(--brand);font-weight:800;background:var(--accent);width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;margin-bottom:8px}
.step-h h3{font-size:1.18rem;margin:5px 0}
.step-h p{color:var(--ink-soft)}
.connect-note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:18px 22px;color:var(--ink-soft);font-size:.96rem}
.connect-note b{color:var(--brand)}
.faq{max-width:820px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;overflow:hidden}
.faq summary{padding:18px 22px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--brand)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--brand);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 22px 18px;color:var(--ink-soft)}
.eeat{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.eeat h2{font-size:1.9rem}
.eeat>div>p{color:var(--ink-soft);margin-top:13px;font-size:1.02rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.panel-img{display:block;width:100%;height:180px;object-fit:cover;border-radius:var(--r-sm);margin-bottom:16px}
.review-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.review-row:last-child{border-bottom:0}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.review-row .nm{font-weight:700;color:var(--brand)}
.review-row .rl{font-size:.84rem;color:var(--ink-soft)}
.final{background:linear-gradient(120deg,var(--brand-900),var(--brand));color:#fff;border-radius:var(--r);padding:56px;text-align:center}
.final h2{color:#fff;font-size:2.1rem}
.final p{color:rgba(255,255,255,.82);font-size:1.06rem;margin:13px auto 24px;max-width:48ch}
.final .micro{margin-top:14px;font-size:.84rem;color:rgba(255,255,255,.55)}
.ft{background:var(--brand-900);color:rgba(255,255,255,.6);padding:56px 0 30px;font-size:.9rem}
.ft-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft h4{color:#fff;font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.ft ul{list-style:none}
.ft li{margin-bottom:9px}
.ft a:hover{color:#fff}
.ft .brand{color:#fff;margin-bottom:12px}
.ft .disc{font-size:.85rem;max-width:42ch}
.ft-bot{padding-top:20px;font-size:.81rem;color:rgba(255,255,255,.42);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
@media(max-width:980px){
  .nav,.tel{display:none}.burger{display:flex}
  .hero-grid,.approach,.process,.eeat,.worth,.state{grid-template-columns:1fr;gap:30px}
  .hero h1{font-size:2.3rem}.sit,.types,.aft,.mistakes,.feature{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr}
  .sec{padding:46px 0}.band,.final,.state{padding:34px 24px}.ft-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:560px){.sit,.types,.aft,.mistakes,.feature{grid-template-columns:1fr}.wrap{padding:0 18px}}
:root{
  --brand:#101B33; --brand-900:#0A1224; --brand-700:#1C2E52; --brand-soft:#646b7a; --tint:#ECEDF1;
  --paper:#F6F7F9; --surface:#FFFFFF; --ink:#1A1C22; --ink-soft:#565b68; --line:#E4E6EA;
  --accent:#FFC72C; --accent-tint:#FFF7E0; --accent-dark:var(--brand);
  --font-display:'Frank Ruhl Libre',Georgia,serif; --font-body:'Public Sans',system-ui,sans-serif;
  --h-weight:500; --h-tracking:-0.005em;
  --wrap:1180px; --r:14px; --r-sm:8px; --shadow:0 1px 2px rgba(18,41,63,.05),0 10px 30px rgba(18,41,63,.08);
}
a:hover{text-decoration:underline}
.btn-block{display:flex;width:100%;justify-content:center}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:3px solid var(--accent)}
.brand img{display:block}
.hdr .right{margin-left:auto}
.hdr .right a{font-weight:700;color:var(--brand);font-size:.9rem}
/* navy treated header */
.arthead{position:relative;overflow:hidden}
.arthead::before{content:"";position:absolute;inset:0;z-index:0;background:url('https://images.pexels.com/photos/36733315/pexels-photo-36733315.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover no-repeat;filter:grayscale(1) contrast(1.05)}
.arthead::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(247,247,245,.94),rgba(247,247,245,.82) 55%,rgba(255,247,224,.6))}
.arthead .in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:22px 24px 40px}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;color:#b8c8db;margin-bottom:20px}
.crumb a{color:var(--ink-soft)}
.crumb li::after{content:"›";margin-left:6px;color:var(--brand-soft)}
.crumb li:last-child::after{content:""}
.crumb li:last-child{color:var(--brand);font-weight:600}
.arthead .eyebrow{color:var(--brand-soft)}
.arthead h1{font-size:2.6rem;margin:12px 0 0;color:var(--brand);max-width:26ch}
.standfirst{font-size:1.16rem;color:var(--ink-soft);margin-top:16px;line-height:1.6;max-width:58ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:24px;font-size:.84rem;color:var(--ink-soft)}
.byline .who{font-weight:700;color:var(--brand)}
.byline .sep{width:4px;height:4px;border-radius:50%;background:var(--brand-soft)}
.byline a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
/* TWO-COLUMN EDITORIAL LAYOUT */
.layout{max-width:var(--wrap);margin:0 auto;padding:36px 24px 0;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:50px;align-items:start}
.maincol{min-width:0}
.sidecol{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px}
/* sidebar cards */
.sidebox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.sidebox .lab{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-soft);margin-bottom:12px}
.side-toc ol{list-style:none;counter-reset:t}
.side-toc ol li{counter-increment:t;margin-bottom:2px}
.side-toc a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-sm);font-size:.9rem;color:var(--ink);font-weight:600}
.side-toc ol a::before{content:counter(t,decimal-leading-zero);flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.72rem}
.side-toc a:hover{background:var(--tint);text-decoration:none;color:var(--brand)}
.side-cta{background:var(--brand);color:#fff;border:0}
.side-cta .lab{color:#9db4d0}
.side-cta h3{color:#fff;font-size:1.12rem;margin-bottom:6px}
.side-cta p{color:#cfdcec;font-size:.88rem;margin-bottom:14px}
.sidebox .lab.sub{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.side-tools ul{list-style:none}
.side-tools li{padding:0;border-bottom:1px solid var(--line)}
.side-tools li:last-child{border-bottom:0}
.side-tools li a{display:flex;gap:11px;align-items:flex-start;padding:9px 0;text-decoration:none;color:inherit}
.side-tools li a:hover .tt{color:var(--accent-dark)}
.side-tools .ic{flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.72rem;margin-top:1px}
.side-tools .tt{display:block;font-weight:700;font-size:.9rem;color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.side-tools .dd{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px}
/* answer-first steps */
.firststeps{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:26px 28px;margin:0 0 26px;box-shadow:var(--shadow)}
.firststeps .lab{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:4px}
.firststeps h2{font-size:1.5rem;margin-bottom:14px}
.firststeps h2::before{display:none}
.firststeps ol{list-style:none;counter-reset:s}
.firststeps li{counter-increment:s;display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.firststeps li:last-child{border-bottom:0}
.firststeps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.85rem;display:grid;place-items:center;margin-top:2px}
.firststeps b{font-weight:700;color:var(--brand)}
.firststeps p{margin-top:2px;font-size:.96rem;color:var(--ink-soft)}
/* prose */
.body h2{font-size:1.7rem;margin:42px 0 12px;padding-top:6px}
.body h2::before{content:"";display:block;width:38px;height:3px;border-radius:3px;background:var(--accent);margin-bottom:14px}
.body h3{font-size:1.18rem;margin:24px 0 8px;color:var(--brand-700)}
.body p{margin:0 0 16px}
.body ul,.body ol{margin:0 0 18px 22px}
.body li{margin-bottom:8px}
.body strong{color:var(--brand)}
.pull{border-left:4px solid var(--accent);padding:6px 0 6px 22px;margin:28px 0;font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.4;color:var(--brand)}
/* GRAPHIC CROSS-LINK CARD (accent, stands out) */
.nextcard{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:18px 22px;margin:24px 0;transition:.16s}
.nextcard:hover{box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.nextcard .ic{display:none}
.nextcard .ic svg{width:24px;height:24px;stroke:var(--accent-dark);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nextcard .lab{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-soft)}
.nextcard .t{display:block;font-family:var(--font-display);font-weight:700;color:var(--brand);font-size:1.05rem;margin-top:4px;text-decoration:underline;text-underline-offset:2px}
.nextcard .d{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:4px}
.nextcard .arr{margin-left:auto;color:var(--brand);font-weight:800;font-size:1.3rem}
/* checklist box */
.checklist{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin:22px 0}
.checklist .h{font-family:var(--font-display);font-weight:700;color:var(--brand);margin-bottom:10px}
.checklist ul{list-style:none;margin:0}
.checklist li{display:flex;gap:11px;padding:6px 0;font-size:.96rem}
.checklist li::before{content:"";flex:none;width:20px;height:20px;border-radius:5px;border:2px solid var(--accent);margin-top:3px}
/* mistakes grid */
.mistakes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
/* images */
figure{margin:30px 0}
figure img{display:block;width:100%;height:300px;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow)}
figcaption{font-size:.8rem;color:var(--ink-soft);margin-top:8px;font-style:italic}
.imgph{margin:30px 0;border:2px dashed #c2cfdd;border-radius:var(--r);background:repeating-linear-gradient(45deg,#eef2f7,#eef2f7 12px,#e9eef4 12px,#e9eef4 24px);min-height:210px;display:grid;place-items:center;text-align:center;padding:24px}
.imgph .ic{width:42px;height:42px;border-radius:10px;background:var(--brand);color:#fff;display:grid;place-items:center;margin:0 auto 12px;font-weight:800}
.imgph .t{font-family:var(--font-display);font-weight:700;color:var(--brand);font-size:1rem}
.imgph .d{font-size:.85rem;color:var(--ink-soft);margin-top:5px;max-width:42ch;margin-inline:auto}
.imgph .tag{display:inline-block;margin-top:10px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 10px}
/* callouts */
.callout{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:26px 0}
.callout.state{border-left:4px solid var(--brand)}
.callout .h{font-family:var(--font-display);font-weight:700;color:var(--brand);margin-bottom:6px}
.takeaways{background:var(--tint);border:1px solid #d4dfeb;border-radius:var(--r);padding:22px 26px;margin:30px 0}
.takeaways .h{font-family:var(--font-display);font-weight:700;color:var(--brand);margin-bottom:10px}
.takeaways ul{list-style:none;margin:0}
.takeaways li{display:flex;gap:10px;padding:6px 0;font-size:.96rem}
.takeaways li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--brand);font-size:.74rem;font-weight:700;display:grid;place-items:center}
/* special situations / related — graphic grid */
.guidecards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.gcard{display:flex;gap:13px;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;transition:.16s}
.gcard>span:not(.ic){flex:1;min-width:0}
.gcard::after{content:"\2192";flex:none;color:var(--brand);font-weight:800;font-size:1.2rem;margin-left:8px}
.gcard:hover{box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.gcard .ic{display:none}
.gcard .ic svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gcard .t{display:block;font-family:var(--font-display);font-weight:700;color:var(--brand);font-size:1rem;line-height:1.25;text-decoration:underline;text-underline-offset:2px}
.gcard .d{display:block;font-size:.83rem;color:var(--ink-soft);margin-top:5px}
.gcard .badge{display:inline-block;margin-top:8px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dark);background:var(--accent-tint);padding:3px 9px;border-radius:20px}
.related{border-top:1px solid var(--line);margin-top:42px;padding-top:30px}
.related h2{font-size:1.4rem;margin-bottom:16px}
/* FAQ */
.faq{margin-top:42px}
.faq h2{font-size:1.5rem;margin-bottom:14px}
/* sources */
.sources{margin-top:42px;border-top:1px solid var(--line);padding-top:24px}
.sources h2{font-size:1.2rem;margin-bottom:6px}
.sources p.intro{font-size:.88rem;color:var(--ink-soft);margin-bottom:12px}
.sources ol{margin-left:20px;font-size:.86rem;color:var(--ink-soft)}
.sources li{margin-bottom:7px}
.disclaimer{margin-top:24px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);font-size:.82rem;color:var(--ink-soft);line-height:1.6}
/* footer */
.ft{background:var(--brand-900);color:rgba(255,255,255,.6);padding:48px 0 26px;font-size:.9rem;margin-top:54px}
.ft a{color:#9fb2c4}
@media(max-width:900px){
  .nav{display:none}.burger{display:flex}
  .layout{grid-template-columns:1fr;gap:30px}
  .sidecol{position:static;order:2;flex-direction:column}
  .arthead h1{font-size:2.05rem}
  .mistakes,.guidecards{grid-template-columns:1fr}.ft-grid{grid-template-columns:1fr 1fr;gap:26px}
}
/* ===== NEWS / BLOG ===== */
.newshead{position:relative;color:#fff;background:linear-gradient(120deg,var(--brand-900),var(--brand) 65%,var(--brand-700));padding:38px 0 34px}
.newshead .in{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.catpill{display:inline-flex;align-items:center;gap:6px;background:rgba(198,138,67,.22);border:1px solid rgba(198,138,67,.5);color:#f1c98a;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:99px;margin-bottom:16px}
.newshead h1{font-size:2.1rem;line-height:1.2;max-width:24ch;margin-bottom:14px}
.newsmeta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.84rem;color:#b8c8db}
.newsmeta .sep{width:3px;height:3px;border-radius:50%;background:#5e80a6}
.newsbody{max-width:720px}
.newsbody p{margin-bottom:16px;line-height:1.75;color:var(--ink)}
.newsbody h2{font-size:1.4rem;color:var(--brand);margin:32px 0 12px}
.newsbody h3{font-size:1.15rem;color:var(--brand);margin:24px 0 10px}
.newsbody ul,.newsbody ol{margin:0 0 16px 22px;color:var(--ink)}
.newsbody li{margin-bottom:6px;line-height:1.6}
.changecard{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-sm);padding:18px 20px;margin-bottom:16px}
.changecard .st{font-family:var(--font-display);font-weight:800;color:var(--brand);font-size:1.02rem;margin-bottom:4px}
.changecard .wh{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:8px}
.changecard p{margin-bottom:8px;font-size:.94rem}
.changecard a{font-weight:700;color:var(--brand);font-size:.86rem}
.newsindex-head{padding:40px 0 30px;border-bottom:1px solid var(--line)}
.newsindex-head .eyebrow{color:var(--brand-soft)}
.newsindex-head h1{font-family:var(--font-display);font-size:2.1rem;color:var(--brand);margin:10px 0 10px}
.newsindex-head p{color:var(--ink-soft);max-width:60ch}
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:var(--wrap);margin:0 auto;padding:36px 24px 60px}
.newscard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .15s,transform .15s;text-decoration:none;display:flex;flex-direction:column}
.newscard:hover{box-shadow:0 14px 32px rgba(18,41,63,.14);transform:translateY(-2px)}
.newscard .nc-top{padding:20px 20px 0}
.newscard .catpill{background:var(--accent-tint);border-color:#e6cfa3;color:var(--accent-dark);font-size:.66rem;margin-bottom:12px}
.newscard h3{font-family:var(--font-display);color:var(--brand);font-size:1.12rem;line-height:1.3;margin-bottom:8px}
.newscard p{color:var(--ink-soft);font-size:.88rem;line-height:1.55;padding:0 20px;flex:1}
.newscard .nc-date{padding:14px 20px 18px;font-size:.78rem;color:var(--ink-soft);border-top:1px solid var(--line);margin-top:14px}
.newscard.feature{grid-column:span 2}
.newscard.feature h3{font-size:1.5rem}
/* ===== CONTRIBUTOR FORM (Our Reviewers page) ===== */
.signal{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:22px 24px;margin:26px 0}
.signal p{margin-bottom:0}
.formbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:32px;margin:26px 0}
.formbox h3{font-size:1.2rem;margin-bottom:6px;font-family:var(--font-display);color:var(--brand)}
.formbox .formsub{color:var(--ink-soft);font-size:.92rem;margin-bottom:24px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.fgroup{display:flex;flex-direction:column;gap:6px}
.fgroup.full{grid-column:1/-1}
.fgroup label{font-size:.8rem;font-weight:700;color:var(--brand)}
.fgroup .hint{font-size:.76rem;color:var(--ink-soft);font-weight:400;margin-top:-2px}
.fgroup input,.fgroup textarea,.fgroup select{font-family:var(--font-body);font-size:.95rem;padding:.7em .85em;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);width:100%}
.fgroup input:focus,.fgroup textarea:focus,.fgroup select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--brand)}
.fgroup textarea{resize:vertical;min-height:96px}
.phonerow{display:flex;gap:8px}
.phonerow .cc{flex:none;display:flex;align-items:center;gap:6px;padding:.7em .7em;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--paper);font-size:.95rem;color:var(--ink);white-space:nowrap}
.phonerow input{flex:1}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin-top:2px}
.checks label{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--ink)}
.checks input{width:16px;height:16px;flex:none}
.checks .allof{grid-column:1/-1;border-top:1px solid var(--line);margin-top:4px;padding-top:10px}
.formfoot{display:flex;align-items:center;gap:16px;margin-top:8px;flex-wrap:wrap}
.formfoot .note{font-size:.82rem;color:var(--ink-soft)}
@media(max-width:640px){.frow,.checks{grid-template-columns:1fr}}