/* VPNUncovered — PROVISIONAL skin (design option A "Signal", 2026-08-26).
   The design pick is Patrick's: three gated options live in
   factory/designs/vpnuncovered-option-{a,b,c}-*.json. This file applies
   option A only so the staged build is reviewable; regenerate from the
   chosen design.json at design-pick time. Webfonts (Archivo/Inter .woff2)
   are NOT downloaded yet — the stack below falls back to system fonts
   until /fonts/ is populated at build-out. */

:root{
  --c-bg:#f6f3f0; --c-bg-alt:#efe9e4; --c-surface:#ffffff; --c-surface-alt:#faf7f4;
  --c-ink:#211a1d; --c-ink-soft:#5a4e53; --c-ink-faint:#84767c;
  --c-brand:#8c1f3a; --c-brand-ink:#6d1027; --c-brand-soft:#f3dde3;
  --c-accent:#17646e; --c-accent-soft:#dcebec; --c-accent-ink:#0f434b;
  --c-line:#e3dbd6; --c-line-strong:#c9bdb6;
  --c-on-brand:#ffffff; --c-on-accent:#ffffff;
  --ff-heading:"Archivo","Segoe UI",system-ui,sans-serif;
  --ff-body:"Inter","Segoe UI",system-ui,sans-serif;
  --fs-0:.82rem; --fs-1:1rem; --fs-2:1.22rem; --fs-3:1.49rem; --fs-4:1.82rem; --fs-5:2.22rem;
  --sp-1:.375rem; --sp-2:.75rem; --sp-3:1.25rem; --sp-4:2rem; --sp-5:3.25rem;
  --radius:2px; --radius-lg:3px;
  --border-width:3px; --border-style:double;
  --shadow:4px 4px 0 rgba(33,26,29,.12); --shadow-lg:7px 7px 0 rgba(33,26,29,.14);
  --maxw:42rem; --maxw-wide:70rem; --gutter:1.25rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ff-body);background:var(--c-bg);color:var(--c-ink);line-height:1.65;font-size:17px}
h1,h2,h3,h4{font-family:var(--ff-heading);font-weight:700;line-height:1.18;letter-spacing:-.015em}
h1{font-size:var(--fs-5);margin:0 0 var(--sp-3)}
h2{font-size:var(--fs-4);margin:var(--sp-5) 0 var(--sp-3)}
h3{font-size:var(--fs-3);margin:var(--sp-4) 0 var(--sp-2)}
p{margin:0 0 var(--sp-3)}
a{color:var(--c-brand)}
a:hover{color:var(--c-brand-ink)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--gutter)}

.disclosure-bar{font-size:var(--fs-0);color:var(--c-ink-soft);background:var(--c-bg-alt);padding:var(--sp-2) var(--gutter);text-align:center;border-bottom:1px solid var(--c-line)}
.disclosure-bar a{color:inherit}

.site-head{background:var(--c-surface);border-bottom:var(--border-width) var(--border-style) var(--c-brand)}
.site-head .inner{max-width:var(--maxw-wide);margin:0 auto;padding:var(--sp-3) var(--gutter);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:baseline;justify-content:space-between}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font-family:var(--ff-heading);font-weight:700;font-size:var(--fs-3);color:var(--c-ink);text-decoration:none;letter-spacing:-.02em}
.wordmark b{color:var(--c-brand)}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-0);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--c-ink-soft);text-decoration:none;margin-left:var(--sp-3)}
.site-nav a:hover{color:var(--c-brand)}

.hero{padding:var(--sp-5) 0 var(--sp-4)}
.hero .sub{font-size:var(--fs-2);color:var(--c-ink-soft);max-width:38rem}

/* One visible focus ring for every interactive thing on the site. Teal on the
   offset (page/panel) surface clears 3:1 against every background we paint. */
a:focus-visible,.btn:focus-visible,.btn-quiet:focus-visible,.q button:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
.q:focus,.result:focus{outline:none}

.panel{background:var(--c-surface);border:var(--border-width) var(--border-style) var(--c-line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-4)}
.q{display:none}
.q.active{display:block}
.result{display:none}
.result.active{display:block}
.q h2{font-size:var(--fs-2);margin:0 0 var(--sp-3)}
.q button{display:block;width:100%;text-align:left;background:var(--c-surface-alt);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-1);font-family:var(--ff-body);margin-bottom:var(--sp-2);cursor:pointer;min-height:44px;color:var(--c-ink)}
.q button:hover{border-color:var(--c-accent);background:var(--c-accent-soft)}
.progress{font-size:var(--fs-0);color:var(--c-ink-faint);margin:0 0 var(--sp-2);text-transform:uppercase;letter-spacing:.08em}

.result h2{margin:0 0 var(--sp-2)}
.result .profile-sub{color:var(--c-ink-soft);margin-bottom:var(--sp-3)}
.pick{border:1px solid var(--c-line);border-left:4px solid var(--c-accent);border-radius:var(--radius);padding:var(--sp-3);margin:0 0 var(--sp-3);background:var(--c-surface)}
.pick.best{border-left-color:var(--c-brand);box-shadow:var(--shadow)}
.pick .tag{font-size:var(--fs-0);font-weight:700;color:var(--c-accent-ink);text-transform:uppercase;letter-spacing:.08em}
.pick.best .tag{color:var(--c-brand)}
.pick h3{margin:var(--sp-1) 0 var(--sp-1);font-size:var(--fs-2)}
.pick p{font-size:var(--fs-1);color:var(--c-ink-soft);margin-bottom:var(--sp-2)}
.pick .why-not{font-size:var(--fs-0);color:var(--c-brand-ink);font-style:italic}
.pick .checked{font-size:var(--fs-0);color:var(--c-ink-faint)}
.restart{display:inline-block;font-size:var(--fs-0);font-weight:600;padding:var(--sp-2) 0;min-height:44px}
.btn{display:inline-block;background:var(--c-brand);color:var(--c-on-brand);text-decoration:none;font-weight:700;font-size:var(--fs-1);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius)}
.btn:hover{background:var(--c-brand-ink);color:var(--c-on-brand)}
.btn-quiet{display:inline-block;background:var(--c-accent-soft);color:var(--c-accent-ink);text-decoration:none;font-weight:600;font-size:var(--fs-0);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius)}

/* Secondary link-bait card: the ownership investigation. Deliberately NOT the
   page lead (Patrick ruling 2026-08-26 — the hero's job is VPN selection).
   Uses the declared brand-soft/brand-ink pair so contrast is not a judgement
   call, and the house double-rule + hard-offset shadow so it reads as a peer
   of the quiz panel rather than a new surface invented for one card. */
.feature-card{background:var(--c-brand-soft);color:var(--c-brand-ink);border:var(--border-width) var(--border-style) var(--c-brand);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:var(--sp-4)}
.feature-card h2{margin:0 0 var(--sp-2);font-size:var(--fs-3);color:var(--c-brand-ink)}
.feature-card p{color:var(--c-brand-ink);margin-bottom:var(--sp-3)}
.feature-card .meta{font-size:var(--fs-0)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--sp-3)}
.tile{background:var(--c-surface);border:1px solid var(--c-line);border-top:4px solid var(--c-accent);border-radius:var(--radius);padding:var(--sp-3);box-shadow:var(--shadow)}
.tile h3{font-size:var(--fs-1);margin:0 0 var(--sp-1)}
.tile p{font-size:var(--fs-0);color:var(--c-ink-soft);margin:0 0 var(--sp-2)}
.tile a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;font-size:var(--fs-0)}

article.page{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-lg);padding:var(--sp-4);margin:var(--sp-4) auto;box-shadow:var(--shadow)}
article.page .dateline{font-size:var(--fs-0);color:var(--c-ink-faint);margin-bottom:var(--sp-3)}
article.page ul,article.page ol{margin:0 0 var(--sp-3) 1.25rem}
article.page li{margin-bottom:var(--sp-1)}
article.page table{width:100%;border-collapse:collapse;margin:0 0 var(--sp-3);font-size:var(--fs-0)}
article.page th,article.page td{border:1px solid var(--c-line);padding:var(--sp-1) var(--sp-2);text-align:left;vertical-align:top}
article.page th{background:var(--c-bg-alt);font-family:var(--ff-heading)}
.verdict{background:var(--c-brand-soft);border-left:4px solid var(--c-brand);padding:var(--sp-3);border-radius:var(--radius);margin:0 0 var(--sp-3)}
.note{background:var(--c-accent-soft);border-left:4px solid var(--c-accent);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);margin:0 0 var(--sp-3);font-size:var(--fs-0);color:var(--c-accent-ink)}
.sources{font-size:var(--fs-0);color:var(--c-ink-soft);border-top:1px solid var(--c-line);margin-top:var(--sp-4);padding-top:var(--sp-3)}
.sources li{overflow-wrap:anywhere}

.site-foot{border-top:var(--border-width) var(--border-style) var(--c-line-strong);margin-top:var(--sp-5);padding:var(--sp-4) 0;font-size:var(--fs-0);color:var(--c-ink-soft);background:var(--c-bg-alt)}
.site-foot .inner{max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--gutter)}
.site-foot a{color:inherit}
.site-foot .legal{margin-top:var(--sp-2);line-height:2.4}
.site-foot .legal a{display:inline-block;padding:var(--sp-1) 0}

@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:var(--fs-4)}
  .site-nav a{margin-left:0;margin-right:var(--sp-3)}
  .panel{padding:var(--sp-3)}
  /* Pull the quiz up: on a phone the promise and the first answer have to
     share the fold, or the page reads as a headline with nothing under it.
     Chrome above the hero costs ~300px on a 375x812 screen, so the header
     and the standfirst both give some back. */
  .site-head .inner{padding:var(--sp-2) var(--gutter);gap:var(--sp-2)}
  .hero{padding:var(--sp-4) 0 var(--sp-3)}
  .hero .sub{font-size:var(--fs-1)}
  .feature-card{padding:var(--sp-3)}
}