/* >>> BEGIN synced from Apps/Tools/tokens.css -- do not edit by hand >>> */
/* The canonical platform tokens, for pages built on the shared
   vocabulary. Regenerate with: python scripts/sync_design_tokens.py --sync
   Values are the LIGHT (Porcelain) theme: this stack is light-only. */
:root{
  --green-2:#0b6349;
  --green-bright:#12a37a;
  --purple:#6d43c8;
  --teal:#0f766e;
  --accent:#0e7c5a;
  --edited:#2563eb;
  --black:#000000;
  --bg:#eae8e3;
  --surface-2:#f6f5f1;
  --surface-3:#efede8;
  --border:rgba(30,28,22,.13);
  --border-2:rgba(30,28,22,.22);
  --text-2:#55524b;
  --text-3:#7b786f;
  --ok:#0e7c5a;
  --ok-tint:rgba(14,124,90,.12);
  --warn:#b45309;
  --warn-tint:rgba(180,83,9,.12);
  --bad:#be123c;
  --bad-tint:rgba(190,18,60,.12);
  --info:#2563eb;
  --info-tint:rgba(37,99,235,.12);
  --ec-qualified:#58a822;
  --ec-ffe:#d67e12;
  --ec-none:#5e6b89;
  --cat-1:#0e7c5a;
  --cat-2:#2563eb;
  --cat-3:#b45309;
  --cat-4:#6d43c8;
  --cat-5:#0f766e;
  --cat-6:#be123c;
  --green-tint:color-mix(in srgb,#0e7c5a 8%,transparent);
  --green-soft:color-mix(in srgb,#0e7c5a 18%,transparent);
  --blue-tint:color-mix(in srgb,#2563eb 8%,transparent);
  --blue-soft:color-mix(in srgb,#2563eb 18%,transparent);
  --amber-tint:color-mix(in srgb,#b45309 8%,transparent);
  --amber-soft:color-mix(in srgb,#b45309 18%,transparent);
  --red-tint:color-mix(in srgb,#be123c 8%,transparent);
  --red-soft:color-mix(in srgb,#be123c 18%,transparent);
  --purple-tint:color-mix(in srgb,#6d43c8 8%,transparent);
  --purple-soft:color-mix(in srgb,#6d43c8 18%,transparent);
  --teal-tint:color-mix(in srgb,#0f766e 8%,transparent);
  --teal-soft:color-mix(in srgb,#0f766e 18%,transparent);
  --green-ink:color-mix(in srgb,#0e7c5a 88%,#000000);
  --blue-ink:color-mix(in srgb,#2563eb 88%,#000000);
  --amber-ink:color-mix(in srgb,#b45309 88%,#000000);
  --red-ink:color-mix(in srgb,#be123c 88%,#000000);
  --purple-ink:color-mix(in srgb,#6d43c8 88%,#000000);
  --teal-ink:color-mix(in srgb,#0f766e 88%,#000000);
  --ramp-1:rgba(30,28,24,.05);
  --ramp-2:rgba(30,28,24,.14);
  --ramp-3:rgba(30,28,24,.24);
  --ramp-4:rgba(30,28,24,.35);
  --ramp-5:rgba(30,28,24,.47);
  --ramp-6:rgba(30,28,24,.59);
  --ramp-7:rgba(30,28,24,.72);
  --ramp-0:rgba(30,28,24,.035);
  --ramp-ink-lo:#55524b;
  --ramp-ink-hi:#fdfdfb;
  --act-green:#0e7c5a;
  --act-green-tint:rgba(14,124,90,.12);
  --act-blue:#2563eb;
  --act-blue-tint:rgba(37,99,235,.12);
  --fs-micro:10.5px;
  --fs-xs:11.5px;
  --fs-sm:13px;
  --fs-body:14.5px;
  --fs-h3:15.5px;
  --fs-kpi:26px;
  --fs-h2:clamp(20px,2.4vw,23px);
  --fs-h1:clamp(24px,3.2vw,32px);
  --fs-display:clamp(40px,6vw,76px);
  --space-0:6px;
  --gap:18px;
  --pad:24px;
  --sect:48px;
  --r:13px;
  --r-xs:6px;
  --r-pill:999px;
  --shadow-2:0 3px 6px rgba(17,19,23,.09),0 16px 34px rgba(17,19,23,.13),
             0 50px 96px rgba(17,19,23,.22);
  --ring:0 0 0 1px rgba(30,28,22,.22);
  --glow:rgba(14,124,90,.15);
  --glow-soft:rgba(14,124,90,.06);
  --grad-brand:linear-gradient(92deg,#0e7c5a,#1a6aa8);
  --grad-surface:linear-gradient(180deg,#fefefd,#f8f7f4);
  --bar-h:159;
  --bar-s:64%;
  --bar-l:29%;
  --bar-ink:#ffffff;
  --fill-hi:#3ed49b;
  --fill-mid:#14b87f;
  --fill-lo:#0e7c5a;
  --rail-lo:#e5484d;
  --rail-mid:#f5a623;
  --rail-hi:#14b87f;
  --sparkle:0 0 9px rgba(20,184,127,.32);
  --glow-ok:0 0 8px rgba(18,163,122,.22);
  --dur-fast:.12s;
  --dur:.22s;
  --ease:cubic-bezier(.4,0,.2,1);
}
/* <<< END synced from Apps/Tools/tokens.css <<< */

/* ============================================================
   CONVERGENCE OPT-IN: how a page adopts the platform values
   ------------------------------------------------------------
   Thirteen token NAMES exist in both this stylesheet and the platform's
   Tools/tokens.css holding different values. The sync deliberately does not
   overwrite them: doing so in one push would restyle every live training page
   at once. But a page also must not converge by redeclaring them in its own
   <style> block, because a page-local palette is the exact thing the design
   system forbids (see _meta/Project Files/DESIGN-SYSTEM.md, "The three rules").

   So the canonical values live HERE, behind an attribute. A page converges by
   adding ONE attribute and declaring nothing:

       <html lang="en" data-tokens="platform">

   Everything else about the page is unchanged. Pages without the attribute keep
   the values above and render exactly as they always have.

   NOTE THIS IS NOT A PURE RECOLOUR. The spacing steps roughly double
   (--space-3 16px to 24px, --space-4 22px to 48px), so a converged page gets
   visibly looser: measured across the 12 pages that link it, page
   height grew between 3.3% and 25.4%, median about 14%. That is the platform
   rhythm and it is correct, but it is a LAYOUT change. Adopt it when a page is
   rebuilt to the slide-deck standard (TRAINING-AUTHORING-STANDARD.md), never as
   a drop-in on a page you are not otherwise touching.

   RETIREMENT PATH: when every page carries the attribute, move these values up
   into :root, delete this block, and drop the attribute from the pages. The
   collision list in DESIGN-SYSTEM.md then goes to zero and the two stacks share
   one palette outright.

   Maintained by hand, NOT by sync_design_tokens.py: that script only writes
   between the sentinels above, and its :root matcher does not see this selector.
   ============================================================ */
:root[data-tokens="platform"]{
  /* colour: jewel emerald replaces the brighter field green; gold and crimson
     deepen so they hold contrast on paper */
  --green:#0e7c5a; --blue:#1a6aa8; --amber:#a97400; --red:#be123c;
  --surface:#fdfdfb; --text:#1e1c18;
  /* rhythm: the platform's four steps. --space-5 has no canonical partner and
     stays put; a rebuilt page should not be reaching for a fifth step anyway. */
  --space-1:12px; --space-2:18px; --space-3:24px; --space-4:48px;
  /* shape + elevation */
  --r-sm:9px;
  --shadow:0 2px 4px rgba(17,19,23,.08),0 8px 18px rgba(17,19,23,.10),
           0 26px 54px rgba(17,19,23,.15);
}

/* ============================================================
   TRAINING SYSTEM  --  shared stylesheet for ct-resource-page trainings
   The single source of truth for design tokens + every component class in
   TRAINING-AUTHORING-STANDARD.md (slide model, Presenter Mode, recall checks).

   A training page is pure semantic HTML that links this sheet:
     <link rel="stylesheet" href="/training-system.css">
   Theme swap = edit the tokens here only. Never inline a style; never fork a
   component class into a page. Page-specific one-offs are the rare exception and
   belong in a small page <style> block, never as style="..." attributes.

   Extracted from sales-fundamentals/finance/titlework.html (the reference).
   Pair with the Manrope + Fraunces font link and /auth-gate.css in each page head.
   ============================================================ */

/* ---- DESIGN TOKENS (theme swap = edit here only) ---- */
:root {
  --green:#5FA520; --blue:#1E8BBC; --amber:#DC9B3C; --deep-blue:#1E508C;
  --red:#E84040; --ink:#0F2038; --ink-deep:#08142A; --ink-soft:#1A2942;
  --text:#1A1F2E; --muted:#5B6576; --surface:#F7F8F4; --warm:#FAFBF7;
  --white:#FFFFFF; --line:#DFE2DA; --line-soft:#E8EBE3;
  --space-1:6px; --space-2:10px; --space-3:16px; --space-4:22px; --space-5:32px;
  --r-sm:4px; --r-md:8px; --r-lg:12px;
  --shadow:0 1px 2px rgba(15,32,56,.06);
  --serif:'Fraunces',Georgia,serif; --sans:'Manrope',-apple-system,'Segoe UI',sans-serif;
  --maxw:1320px; --header-h:86px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light;scroll-behavior:smooth;scroll-snap-type:y proximity}
section[id]{scroll-snap-align:start;scroll-margin-top:var(--header-h)}
body{font-family:var(--sans);font-size:18px;line-height:1.45;color:var(--text);background:var(--surface);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--ink);line-height:1.1}
h1{font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:400}
h2{font-size:clamp(1.7rem,2.8vw,2.5rem);margin-bottom:var(--space-2)}
h3{font-size:1.2rem;font-weight:600;margin-bottom:var(--space-1)}
p{margin-bottom:var(--space-2)}
ul,ol{padding-left:20px;margin-bottom:var(--space-2)}
li{margin-bottom:var(--space-1)}
strong{font-weight:700;color:var(--ink)}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:var(--space-2)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-5);width:100%}

/* ---- HEADER + TOC ---- */
.site-header{position:sticky;top:0;z-index:200}
.page-header{background:var(--ink);color:#fff;padding:12px 0;border-bottom:3px solid var(--amber)}
.page-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
/* leave room at the top-right for the floating site nav (site-nav.js) so the
   Presenter Mode button never sits under it */
@media(min-width:561px){.page-header .wrap{padding-right:272px}}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif)}
.brand .logo{font-size:1.05rem;font-weight:600;color:#fff}
.brand .team{font-size:.9rem;color:rgba(255,255,255,.7)}
.present-toggle{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 14px;cursor:pointer}
.present-toggle:hover{background:var(--amber);border-color:var(--amber)}
.toc-nav{background:var(--warm);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.toc-nav::-webkit-scrollbar{display:none}
.toc-nav .wrap{display:flex;gap:0}
.toc-nav a{font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:none;padding:11px 14px;border-bottom:3px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:6px}
.toc-nav a .num{font-size:.64rem;font-weight:800;background:var(--line);color:var(--muted);border-radius:999px;padding:1px 6px}
.toc-nav a:hover,.toc-nav a.active{color:var(--ink);border-bottom-color:var(--amber)}

/* ---- HERO (slide) ---- */
.hero{background:linear-gradient(135deg,var(--ink-deep),var(--ink));color:#fff;min-height:calc(100vh - var(--header-h));display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-margin-top:var(--header-h)}
.hero h1{color:#fff;max-width:20ch;margin-bottom:var(--space-3)}
.hero h1 em{font-style:italic;color:var(--amber)}
.hero .lede{font-size:1.3rem;line-height:1.5;color:rgba(255,255,255,.85);max-width:60ch}
.hero .lede strong{color:#fff}

/* ---- MODULE = SLIDE ---- */
.training-page{display:block}
.module{min-height:calc(100vh - var(--header-h));display:flex;flex-direction:column;justify-content:center;padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.module:nth-child(even){background:var(--warm)}
.module .intro{color:var(--muted);font-size:1.15rem;max-width:80ch;margin-bottom:var(--space-4)}

/* ---- GRIDS (fill width) ---- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-3)}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3);list-style:none;padding:0}
.list-cols{columns:3;column-gap:var(--space-5)}
.list-cols li{break-inside:avoid}

/* ---- TRAINING CARD ---- */
.training-card{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--deep-blue);border-radius:var(--radius-card, 0);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow)}
.training-card--amber{border-left-color:var(--amber)}
.training-card--green{border-left-color:var(--green)}
.training-card--ink{border-left-color:var(--ink)}
.training-card--red{border-left-color:var(--red)}
.training-card ul{margin-bottom:0}
.training-card li{font-size:1rem}

/* ---- STEP ---- */
.step{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--deep-blue);border-radius:var(--radius-card, 0);padding:var(--space-3);box-shadow:var(--shadow)}
.step .src{display:inline-block;font-family:var(--sans);font-size:.82rem;font-weight:700;background:rgba(30,80,140,.08);color:var(--deep-blue);padding:2px 8px;border-radius:var(--r-sm);margin-top:var(--space-2)}

/* ---- SCRIPT EXAMPLE ---- */
.script-example{background:rgba(30,80,140,.05);border-left:3px solid var(--deep-blue);border-radius:var(--radius-card, 0);padding:var(--space-2) var(--space-3);font-style:italic;color:var(--ink-soft);margin:var(--space-2) 0 0}
.script-example .who{display:block;font-style:normal;font-weight:800;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}

/* ---- OBJECTION HANDLING ---- */
.objection-handling{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--radius-card, 0);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow)}
.objection-handling .objection{font-style:italic;color:var(--ink-soft);margin-bottom:var(--space-1)}

/* ---- METRIC CALLOUT ---- */
.metric-callout{display:inline-flex;flex-direction:column;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--radius-card, 0);padding:var(--space-2) var(--space-3);box-shadow:var(--shadow)}
.metric-callout .figure{font-family:var(--serif);font-size:2.4rem;font-weight:500;color:var(--ink);line-height:1}
.metric-callout .caption{font-size:.82rem;color:var(--muted);margin-top:4px}

/* ---- DO / DONT ---- */
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.do-dont .do,.do-dont .dont{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card, 0);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow)}
.do-dont .do{border-left:3px solid var(--green)}
.do-dont .dont{border-left:3px solid var(--red)}
.do-dont .do::before{content:"DO";display:block;font-size:.66rem;font-weight:800;letter-spacing:.1em;color:#3f7a12;margin-bottom:4px}
.do-dont .dont::before{content:"DON'T";display:block;font-size:.66rem;font-weight:800;letter-spacing:.1em;color:#c42b2b;margin-bottom:4px}

/* ---- DOC TABLE ---- */
.doc-table{width:100%;border-collapse:collapse;font-size:1rem;background:var(--white);box-shadow:var(--shadow);border-radius:var(--radius-card, 0);overflow:hidden}
.doc-table th{background:var(--ink);color:#fff;text-align:left;padding:10px 16px;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.doc-table td{padding:11px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.doc-table td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.doc-table tr:last-child td{border-bottom:none}
.doc-table tr:nth-child(even) td{background:rgba(30,80,140,.02)}

/* ---- CHECKLIST ---- */
.checklist{list-style:none;padding:var(--space-3) var(--space-4);background:var(--white);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--radius-card, 0);box-shadow:var(--shadow);margin-bottom:0}
.checklist li{position:relative;padding-left:26px;font-size:1rem}
.checklist li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800}

/* ---- CALLOUT ---- */
.callout{border:1px solid rgba(220,155,60,.3);background:rgba(220,155,60,.08);border-radius:var(--radius-card, 0);padding:var(--space-2) var(--space-3);font-size:1rem;margin-top:var(--space-3)}
.callout strong{color:#8a5a12} /* amber on this tint was 2.3:1 */
.callout--compliance{border-color:rgba(30,80,140,.3);background:rgba(30,80,140,.06)}
.callout--compliance strong{color:var(--deep-blue)}

/* ---- RECALL CHECK ---- */
.recall-check{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--radius-card, 0);padding:var(--space-2) var(--space-3);margin-top:var(--space-3);box-shadow:var(--shadow)}
.recall-check summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;font-size:1rem}
.recall-check summary::-webkit-details-marker{display:none}
.recall-check summary::before{content:"\25B6";font-size:.7rem;color:var(--amber);margin-right:8px}
.recall-check[open] summary::before{content:"\25BC"}
.recall-check .answer{margin-top:var(--space-2);color:var(--text);font-size:1rem}
.recall-check .label{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:6px}

/* ---- MANAGER PROMPT (Presenter only) ---- */
.manager-prompt{display:none}

/* ---- KEY TAKEAWAYS (slide) ---- */
.key-takeaways{background:var(--ink-deep);color:#fff;min-height:calc(100vh - var(--header-h));display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start}
.key-takeaways .eyebrow{color:var(--amber)}
.key-takeaways h2{color:#fff;margin-bottom:var(--space-4)}
.key-takeaways ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.key-takeaways li{background:rgba(255,255,255,.04);border-left:3px solid var(--amber);border-radius:var(--radius-card, 0);padding:12px 20px;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:rgba(255,255,255,.92)}
.checklist-head{margin-top:var(--space-4)}

.foot{padding:var(--space-4) 0;text-align:center;font-size:.85rem;color:var(--muted);background:var(--warm)}

/* ---- DECK NAV (prev / next slide) ---- */
.deck-nav{position:fixed;right:16px;bottom:16px;z-index:300;display:flex;gap:8px}
.deck-nav button{width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(11,17,32,.18);display:flex;align-items:center;justify-content:center}
.deck-nav button:hover{background:var(--amber);border-color:var(--amber);color:#fff}
.deck-nav button:disabled{opacity:.35;cursor:default}
body.presenter .deck-nav button{width:60px;height:60px;font-size:28px}
@media print{.deck-nav{display:none}}

/* ============================================================
   PRESENTER MODE  (manager-led wide screen)
   ============================================================ */
body.presenter{font-size:22px}
body.presenter .toc-nav,body.presenter .recall-check{display:none}
body.presenter #site-back-btn{display:none}
body.presenter h1{font-size:4rem}
body.presenter h2{font-size:3rem}
body.presenter .module .intro{font-size:1.4rem}
body.presenter .manager-prompt{display:block;background:rgba(220,155,60,.12);border:1px dashed var(--amber);border-radius:var(--radius-card, 0);padding:var(--space-3) var(--space-4);margin-top:var(--space-3);font-size:1.2rem;color:var(--ink)}
body.presenter .manager-prompt::before{content:"ASK THE ROOM";display:block;font-family:var(--sans);font-size:.7rem;font-weight:800;letter-spacing:.12em;color:var(--amber);margin-bottom:6px}
body.presenter .module .intro{font-size:1.25rem;margin-bottom:var(--space-3)}
/* Long-table slides tighten further so a full bill fits one screen in Presenter.
   Scoped via :has() so only modules built around a data table compact down;
   verified live (Eversource + UI bills fit a ~700px laptop slide). */
body.presenter .module:has(.doc-table) h2{font-size:2rem}
body.presenter .module:has(.doc-table) .intro{font-size:1.05rem;margin-bottom:10px}
body.presenter .module:has(.doc-table) .doc-table{font-size:.78rem}
body.presenter .module:has(.doc-table) .doc-table th{padding:3px 12px}
body.presenter .module:has(.doc-table) .doc-table td{padding:1px 12px}
body.presenter .module:has(.doc-table) .doc-table tr.indent td:first-child{padding-left:22px}
body.presenter .module:has(.doc-table) .callout{font-size:.95rem;padding:8px 14px;margin-top:10px}
/* Chart/canvas slides: in Presenter, drop the title chrome and top-align so the
   visualization fills the screen instead of being pushed below a big heading. */
body.presenter .module:has(canvas){justify-content:flex-start;min-height:auto;padding-top:var(--space-3)}
body.presenter .module:has(canvas) .eyebrow,
body.presenter .module:has(canvas) .intro{display:none}
body.presenter .module:has(canvas) h2{font-size:1.4rem;margin-bottom:var(--space-2)}

/* ============================================================
   MOBILE  (close-up; relax the deck to normal scroll)
   ============================================================ */
@media(max-width:820px){
  html{scroll-snap-type:none}
  body{font-size:16px}
  .hero,.module,.key-takeaways{min-height:auto;display:block;padding:var(--space-5) 0}
  .compare-grid,.do-dont{grid-template-columns:1fr}
  .list-cols{columns:1}
  .key-takeaways ul{grid-template-columns:1fr}
  .doc-table td:first-child{white-space:normal}
}

/* ============================================================
   ACCESSIBILITY AND PRINT
   ============================================================ */
:focus-visible{outline:3px solid var(--deep-blue);outline-offset:2px}
.page-header :focus-visible,.hero :focus-visible,.key-takeaways :focus-visible{outline-color:#fff}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  *{transition:none!important;animation:none!important}
}
/* Wrap a wide table in <div class="table-wrap"> so it scrolls inside its slide on a phone. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media print{
  .site-header,.toc-nav,.deck-nav,.present-toggle{display:none}
  html{scroll-snap-type:none}
  .hero,.module,.key-takeaways{min-height:auto;display:block;padding:var(--space-4) 0;background:#fff;color:var(--text)}
  .hero h1,.hero .lede,.key-takeaways h2,.key-takeaways li{color:var(--ink)}
  .training-card,.step,.callout,.recall-check,.do-dont>*{break-inside:avoid}
}