:root{
  --navy:#0E2A3D; --navy-deep:#081A26; --cloud:#EEF3F6; --surface:#FFFFFF;
  --ink:#0E2A3D; --ink-soft:#4C6478; --ink-faint:#597282;
  --gold:#966418; --gold-soft:#FBEBD2;
  --mint:#1A7A5F; --mint-soft:#E1F3EC;
  --amber:#B4451F; --amber-soft:#FBE7DF;
  --line:#DCE5EB; --focus:#966418;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#DCE9F2; --navy-deep:#F3F8FB; --cloud:#0A1721; --surface:#102232;
    --ink:#E7EEF3; --ink-soft:#A9BECD; --ink-faint:#748A9C;
    --gold:#E3A94C; --gold-soft:#2A2013;
    --mint:#4CC29D; --mint-soft:#122A22;
    --amber:#E08260; --amber-soft:#2B1912;
    --line:#223546; --focus:#E3A94C;
  }
}
:root[data-theme="dark"]{
  --navy:#DCE9F2; --navy-deep:#F3F8FB; --cloud:#0A1721; --surface:#102232;
  --ink:#E7EEF3; --ink-soft:#A9BECD; --ink-faint:#748A9C;
  --gold:#E3A94C; --gold-soft:#2A2013;
  --mint:#4CC29D; --mint-soft:#122A22;
  --amber:#E08260; --amber-soft:#2B1912;
  --line:#223546; --focus:#E3A94C;
}

*{box-sizing:border-box;}
body{margin:0; background:var(--cloud); color:var(--ink); font-family:"Source Sans 3",-apple-system,Segoe UI,sans-serif; font-size:16px; line-height:1.56;}
a{color:inherit;}
a:focus-visible, button:focus-visible{outline:2.5px solid var(--focus); outline-offset:2px;}
h1,h2,h3{font-family:"Libre Franklin",Arial,sans-serif; text-wrap:balance; margin:0;}
.num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;}
.wrap{max-width:1160px; margin:0 auto; padding-inline:20px;}

.seo-check{background:#fff; border-bottom:1px solid var(--line); font-family:"IBM Plex Mono",monospace;}
.seo-check .wrap{padding-block:14px;}
.seo-check .flag{font-size:11px; letter-spacing:.04em; color:var(--amber); margin-bottom:10px;}
.serp{max-width:560px;}
.serp .url{font-size:12.5px; color:#1a5c37;}
.serp .title{font-family:"Source Sans 3",sans-serif; color:#1a0dab; font-size:17px; margin:2px 0; line-height:1.3;}
.serp .desc{font-family:"Source Sans 3",sans-serif; color:#4d5156; font-size:13px; line-height:1.4;}
.serp .counts{margin-top:8px; display:flex; gap:16px; font-size:11px; color:var(--ink-faint);}
.serp .counts b{color:var(--mint);}

/* light header — same treatment as the homepage, everywhere on the site */
.topbar{background:var(--surface); border-bottom:1px solid var(--line); color:var(--ink);}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding-block:16px; max-width:1440px;}
/* two colorways of the same logo: the normal dark-navy wordmark for light surfaces,
   and a white version (prefics-logo-light.png) for dark ones — same rule works for the
   topbar AND the footer now that the footer uses --surface too (no more inverted bg) */
.brand-logo, .brand-logo-light{height:32px; width:auto;}
.brand-logo{display:block;}
.brand-logo-light{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand-logo{display:none;}
  :root:not([data-theme="light"]) .brand-logo-light{display:block;}
}
:root[data-theme="dark"] .brand-logo{display:none;}
:root[data-theme="dark"] .brand-logo-light{display:block;}
.crumb{font-size:12.5px; color:var(--ink-faint); margin-top:2px;}
.crumb a{color:var(--ink-soft); text-decoration:none;}
.crumb a:hover{color:var(--navy);}

.nav-cta{
  font-size:13px; font-weight:700; text-decoration:none; color:#F4FBF8;
  background:var(--mint); padding:9px 16px; border-radius:999px; white-space:nowrap;
}
.nav-cta:hover{filter:brightness(1.06);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-cta{color:#0E2A0F;} }
:root[data-theme="dark"] .nav-cta{color:#0E2A0F;}
/* on very narrow phones, logo + this pill + the menu button no longer fit in one row —
   drop the pill and rely on the hamburger, same as nav.primary already does at 780px */
@media (max-width:399px){ .topbar .nav-cta{display:none;} }

nav.primary{display:none; gap:26px; font-size:14px; font-weight:600;}
nav.primary a{text-decoration:none; color:var(--ink-soft);}
nav.primary a:hover{color:var(--navy);}
.menu-btn{
  background:none; border:1px solid var(--line); color:var(--ink); border-radius:8px;
  padding:8px 14px; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer;
}
@media (min-width:780px){ nav.primary{display:flex; align-items:center;} .menu-btn{display:none;} }

/* mobile dropdown — toggled by the tiny script that flips .nav-open on #home-topbar */
.topbar{position:relative;}
@media (max-width:779px){
  .topbar.nav-open nav.primary{
    display:flex; flex-direction:column; gap:0;
    position:absolute; inset-inline:0; top:100%;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:4px 20px 12px;
  }
  .topbar.nav-open nav.primary a{padding-block:12px; border-top:1px solid var(--line);}
  .topbar.nav-open nav.primary a:first-child{border-top:none;}
}

.disclaimer{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; margin-block:22px; font-size:13.5px; color:var(--ink-soft);
  display:flex; gap:10px;
}
.disclaimer strong{color:var(--ink);}
.disclaimer .mark{color:var(--gold); font-weight:700; flex:none;}

.hero{padding-block:6px 8px;}
.hero-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.logo-mark{
  width:56px; height:56px; border-radius:14px; background:var(--surface); color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-family:"Libre Franklin",sans-serif;
  font-weight:800; font-size:18px; flex:none; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 2px 6px -3px rgba(8,26,38,.25);
}
.logo-mark img{width:100%; height:100%; object-fit:contain; padding:6px; box-sizing:border-box;}
.hero h1{font-size:clamp(24px,5.5vw,32px); max-width:24ch;}
.hero .sub{font-size:14px; color:var(--ink-soft); margin-top:4px;}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.badge{
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px;
  background:var(--mint-soft); color:var(--mint); display:inline-flex; align-items:center; gap:5px;
}
.badge.warn{background:var(--amber-soft); color:var(--amber);}

.fact-strip{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:22px;
}
.fact{background:var(--surface); padding:14px 16px;}
.fact dt{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:4px;}
.fact dd{margin:0; font-weight:700; font-size:16px;}
@media (min-width:600px){ .fact-strip{grid-template-columns:repeat(4,1fr);} }

section{padding-block:30px; border-top:1px solid var(--line);}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--mint); display:block; margin-bottom:6px;}
section h2{font-size:clamp(20px,4vw,25px); margin-bottom:18px; max-width:26ch;}
section > p{color:var(--ink-soft); font-size:15px; max-width:66ch;}

.steps{display:flex; flex-direction:column; gap:0;}
.step{display:flex; gap:14px; padding-block:14px; border-top:1px solid var(--line);}
.step:first-child{border-top:none;}
.step .n{
  font-family:"Libre Franklin",sans-serif; font-weight:800; font-size:14px; color:var(--gold);
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.step h3{font-size:15px; font-weight:700; margin-bottom:3px;}
.step p{margin:0; font-size:13.5px; color:var(--ink-soft); max-width:56ch;}

table.price{width:100%; border-collapse:collapse; font-size:14.5px; background:var(--surface); border-radius:10px; overflow:hidden; border:1px solid var(--line);}
table.price th, table.price td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);}
table.price th{background:var(--cloud); font-family:"Libre Franklin",sans-serif; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); font-weight:700;}
table.price td.p{font-family:"IBM Plex Mono",monospace; font-weight:600;}
table.price tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto;}
.price-note{font-size:12px; color:var(--ink-faint); margin-top:8px;}

.trust-grid{display:grid; grid-template-columns:1fr; gap:14px;}
.trust-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px;}
.trust-card h3{font-size:14.5px; font-weight:700; margin-bottom:5px;}
.trust-card p{margin:0; font-size:13.5px; color:var(--ink-soft);}
@media (min-width:640px){ .trust-grid{grid-template-columns:1fr 1fr;} }

.pc-grid{display:grid; grid-template-columns:1fr; gap:14px;}
.pc{border-radius:12px; padding:16px; border:1px solid var(--line);}
.pc.good{background:var(--mint-soft);}
.pc.watch{background:var(--amber-soft);}
.pc h3{font-size:13px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px;}
.pc.good h3{color:var(--mint);}
.pc.watch h3{color:var(--amber);}
.pc ul{margin:0; padding-left:18px; font-size:14px; color:var(--ink);}
.pc li{margin-bottom:6px;}
@media (min-width:640px){ .pc-grid{grid-template-columns:1fr 1fr;} }

.quote{
  border-left:3px solid var(--amber); background:var(--amber-soft); border-radius:0 10px 10px 0;
  padding:14px 16px; font-size:14.5px; color:var(--ink); margin-top:16px;
}
.quote cite{display:block; margin-top:8px; font-size:12.5px; color:var(--ink-faint); font-style:normal;}

details.faq{border-top:1px solid var(--line); padding-block:14px;}
details.faq:last-child{border-bottom:1px solid var(--line);}
details.faq summary{font-weight:600; font-size:15px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:10px;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+"; color:var(--gold); font-size:18px; flex:none;}
details.faq[open] summary::after{content:"–";}
details.faq p{margin:10px 0 0; font-size:14px; color:var(--ink-soft); max-width:62ch;}

.sources{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px;}
.sources ol{margin:0; padding-left:20px; font-size:13px; color:var(--ink-soft);}
.sources li{margin-bottom:8px;}
.sources a{color:var(--navy); text-decoration:underline;}
.relnote{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-faint);}

/* footer — light surface like every other panel on the site, identical markup everywhere.
   Uses --surface/--ink family tokens (same direction as the topbar), so it needs no
   theme-inversion tricks at all: it just follows the page like any other section. */
footer{background:var(--surface); border-top:1px solid var(--line);}

.foot-top{display:grid; grid-template-columns:1fr; gap:32px; padding-block:44px 28px;}
@media (min-width:760px){ .foot-top{grid-template-columns:1.6fr 1fr 1fr;} }

.foot-brand .brand-logo, .foot-brand .brand-logo-light{height:30px; margin-bottom:12px;}
.foot-desc{font-size:13.5px; color:var(--ink-soft); max-width:36ch;}

.foot-col h4{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:14px;}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.foot-col a{color:var(--ink-soft); text-decoration:none; font-size:13.5px;}
.foot-col a:hover{color:var(--navy);}

.foot-bottom-wrap{border-top:1px solid var(--line); padding-block:20px 28px;}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; font-size:12.5px; color:var(--ink-faint); margin-bottom:16px;}
.foot-bottom-links{display:flex; flex-wrap:wrap; gap:18px;}
.foot-bottom-links a{color:var(--ink-faint); text-decoration:none;}
.foot-bottom-links a:hover{color:var(--navy);}

.foot-disclaimer{font-size:11.5px; color:var(--ink-faint); max-width:none;}
.foot-disclaimer strong{color:var(--ink-soft);}
.foot-disclaimer a{color:var(--ink-faint); text-decoration:underline;}