/* SafeRoute — the one place the design system lives.
   
   WHY THIS FILE EXISTS
   Every surface used to carry its own copy of the tokens and primitives, and
   they drifted exactly as duplication guarantees: four different h1 scales,
   four different link colours (inherit / #3FD9C0 / #1E9E8C / plain white),
   and two different logo geometries — none of which matched the app icon.
   Tokens and primitives are defined here once; pages add only what is
   genuinely theirs.
   
   Linked by: /, /check/, /tonight/, /transparency/ and every generated
   /safety/ page. */

:root{
  /* Surfaces (semantic names kept from the cream era; values are dark). */
  --cream:#0A0D12; --cream-deep:#1B2531; --paper:#141B24;
  --bg:#0A0D12; --surface:#141B24; --surface-2:#1B2531;
  --ink:#F3F7FA; --ink-2:#A8B6C4; --ink-3:#6E7E90;
  --text:#F3F7FA; --text-2:#A8B6C4; --text-3:#6E7E90;
  /* --teal is the bright accent; --teal-deep is a distinct deeper teal used
     for body links and for the Freshness segment of the transparency chart,
     which must not collapse into --teal. */
  --teal:#3FD9C0; --teal-2:#2AB9A2; --teal-deep:#1E9E8C;
  --ember:#FF5A4D; --cam:#4AABB5;
  --green:#43C46A; --amber:#E8A33D; --coral:#E8763D; --red:#FF5A4D;
  --line:#212C39; --line-2:#2C3947;
  --bg-2:#0E131A; --elevated:#E8763D; --r:16px;
  /* Content width + gutter. /safety/ and /transparency/ are reading
     pages and stay narrow; the wide surfaces override --maxw. */
  --gutter:clamp(18px,4vw,40px);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Inter,system-ui,sans-serif;
  --maxw:880px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;
     line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}

/* ── Links ────────────────────────────────────────────────────────────────
   One rule for body links everywhere. Navigation, buttons and cards opt out
   with .lnk/.btn/their own class rather than each page redefining `a`. */
a{color:var(--teal-deep);text-decoration:none;transition:color .15s}
a:hover{color:var(--teal)}
/* Underline only inside prose, where a link has to be tellable from the text
   around it. Underlining every <a> and then opting out class by class meant a
   maintained list that buttons and nav items kept falling off. */
p a,li a,.lead a,.lede a,dd a,figcaption a,.scoremeta a{
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
  text-decoration-color:rgba(63,217,192,.45)}
p a:hover,li a:hover,.lead a:hover,.lede a:hover{text-decoration-color:var(--teal)}

/* ── Type scale ───────────────────────────────────────────────────────────
   One ramp for the whole site. Pages previously ran four different h1 sizes
   and line-heights; a page that wants a bigger hero adds .h1-hero. */
h1,h2,h3{letter-spacing:-.025em;line-height:1.12;font-weight:680}
h1{font-size:clamp(30px,4.4vw,44px);line-height:1.1;margin:8px 0 14px}
h1.h1-hero{font-size:clamp(38px,5vw,58px);line-height:1.08}
h2{font-size:clamp(24px,2.8vw,30px);margin:38px 0 12px}
h3{font-size:20px;line-height:1.3;letter-spacing:-.015em;font-weight:640}
p.lead,.lede{font-size:clamp(17px,1.55vw,18.5px);color:var(--text-2);max-width:62ch}

/* ── Wordmark ─────────────────────────────────────────────────────────────
   The site used a shield-and-check that appears nowhere in the product. The
   app icon is a compass needle in a ring, so that is the mark now. It is
   drawn here as a background image so the five surfaces (including 1,233
   already-built pages carrying the old inline shield markup) all show the
   right logo without their HTML being rewritten — the legacy <svg> children
   are simply hidden. */
.wordmark,.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-weight:600;font-size:16px;letter-spacing:.16em;color:var(--ink);text-decoration:none}
.wordmark .shield,.brand .shield,.brand svg{
  width:22px;height:22px;flex:none;
  background:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='10.2' fill='none' stroke='%233FD9C0' stroke-width='1.7'/>\
<path d='M12 3.9 L16 13.1 L12 12.2 Z' fill='%233FD9C0'/>\
<path d='M12 3.9 L8 13.1 L12 12.2 Z' fill='%232AB9A2'/>\
<path d='M12 20.1 L8.6 11.6 L12 12.4 Z' fill='%233FD9C0' fill-opacity='.42'/>\
<path d='M12 20.1 L15.4 11.6 L12 12.4 Z' fill='%233FD9C0' fill-opacity='.28'/>\
<circle cx='12' cy='12' r='1.6' fill='%230A0D12'/>\
</svg>") center/contain no-repeat;
}
.wordmark .shield>*,.brand .shield>*,.brand svg>*{display:none}

/* ── Buttons ──────────────────────────────────────────────────────────────*/
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;
     border-radius:10px;transition:.16s;white-space:nowrap;cursor:pointer;text-decoration:none}
.btn-sm{font-size:14.5px;padding:8px 15px}
.btn-lg{font-size:16px;padding:14px 26px}
.btn-ghost{border:1px solid var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-fill{background:var(--teal);color:#04231E;font-weight:680}
.btn-fill:hover{background:#5CE8D2;transform:translateY(-1px)}

.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
         text-transform:uppercase;color:var(--teal)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}