/* Widen CPD — shared design system (Phase: site-wide reskin).
   Loaded AFTER each page's inline <style>, so it re-skins pages to match the homepage
   without rewriting their markup: it remaps the shared CSS variables to the new palette,
   swaps the type system (Newsreader headings / IBM Plex Sans body / IBM Plex Mono labels),
   and flattens the surface (no shadows, small radii). Functionality/markup unchanged. */

:root{
  /* new palette, mapped onto the existing variable vocabulary used across the site */
  --paper:#f4f2ee; --card:#fff; --subtle:#f9f7f4;
  --ink:#2c2a26; --ink-soft:#5d5952; --ink-3:#6d6961; --muted:#6d6961;
  --line:#dedad3; --line-light:#e6e3dd;
  --brand:#2f7a5c; --brand-deep:#22624a; --teal:#2f7a5c; --deep:#22624a;
  --gold:#a35c33; --warm:#a35c33; --warm-500:#8e5230;
  --pass:#2f7a5c; --shadow:none; --radius:4px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* type system */
body{font-family:var(--sans)!important;background:var(--paper);color:var(--ink);}
h1,h2,h3,h4,h5{font-family:var(--serif)!important;font-weight:500;color:var(--ink);letter-spacing:-0.01em;}
a{color:var(--brand);}
a:hover{color:var(--brand-deep);}

/* wordmark — match the homepage masthead across every page */
.masthead .logo,.logo{font-family:var(--serif)!important;font-weight:500!important;text-transform:none!important;letter-spacing:-0.01em!important;font-size:20px!important;color:var(--ink)!important;}

/* flat surfaces — depth comes from borders + tint, never shadow */
*{box-shadow:none!important;}
.card,.hero,.mod,a.mod,.step,.trust,.promo,.wknd,.returning,.pricebox,.price,.cpd-key{border-radius:var(--radius)!important;}

/* buttons/pills — the new flat, tight-radius treatment */
.btn,button.btn,.btn.primary,.btn.gold,.btn.light,.btn.ghost,.btn.sm{border-radius:3px!important;}
.btn,button.btn{font-family:var(--sans)!important;}
.badge,.pill,.tag{font-family:var(--mono)!important;}

/* small labels / eyebrows / meta pick up the mono voice where pages use these hooks */
.eyebrow,.masthead .nav,.note,.muted{font-family:var(--sans);}