/* =========================================================================
   Instructed — styles.css
   Static, hand-written CSS. No framework, no build step.
   Edit the tokens in :root to change colours, type or spacing site-wide.
   ========================================================================= */

/* ---- Design tokens (from the brand guidelines) ------------------------- */
:root {
  /* Colour */
  --board-green: #1E3D31;   /* headers, panels, reversed surfaces */
  --paper:       #F5F1E8;   /* default background */
  --brick:       #A8481F;   /* accents, key numbers, one CTA per screen */
  --brick-soft:  #D98B5F;   /* brick, but on green only */
  --ink:         #131F1A;   /* body text */
  --stone:       #55645B;   /* secondary text, captions */
  --sage:        #E7ECE3;   /* quiet panels, table stripes */

  /* Hairlines */
  --rule:        rgba(19, 31, 26, 0.18);   /* on paper */
  --rule-soft:   rgba(19, 31, 26, 0.10);   /* fainter, on paper */
  --rule-green:  rgba(245, 241, 232, 0.22);/* on green */

  /* Type */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Shape */
  --radius: 6px;

  /* Layout */
  --container: 1120px;
  --measure: 60ch;

  /* Rhythm */
  --section-y: clamp(3.5rem, 8vw, 6rem);
}

/* ---- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;               /* 16px */
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: pretty; }

p { margin: 0; }

a { color: var(--board-green); text-underline-offset: 3px; text-decoration-color: var(--brick); }
a:hover { color: var(--brick); }

strong { font-weight: 700; }

/* Scroll offset so anchored sections clear the sticky header */
section[id], [id].anchor { scroll-margin-top: 84px; }

/* ---- Accessibility helpers -------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  background: var(--board-green);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; color: var(--paper); }

:focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-green :focus-visible { outline-color: var(--brick-soft); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Layout primitives ------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: var(--section-y); }

.panel-green {
  background: var(--board-green);
  color: var(--paper);
}
.panel-sage { background: var(--sage); }

/* ---- Type utilities --------------------------------------------------- */
.overline {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.6875rem;          /* 11px */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
}
.on-green .overline { color: rgba(245, 241, 232, 0.72); }

.display {
  font-size: clamp(2.5rem, 6vw + 1rem, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.h2 { font-size: clamp(1.6rem, 3.5vw, 2rem); line-height: 1.18; letter-spacing: -0.01em; }
.h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }

.lead { font-size: 1.0625rem; line-height: 1.6; }
.measure { max-width: var(--measure); }
.stone { color: var(--stone); }
.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 600; }

/* ---- Wordmark --------------------------------------------------------- */
.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}
.wordmark .stop { color: var(--brick); }
.wordmark:hover { color: var(--ink); }

.on-green .wordmark, .wordmark.reversed { color: var(--paper); }
.on-green .wordmark:hover, .wordmark.reversed:hover { color: var(--paper); }
.on-green .wordmark .stop, .wordmark.reversed .stop { color: var(--brick-soft); }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* The one brick call-to-action per screen */
.btn-brick { background: var(--brick); color: var(--paper); }
.btn-brick:hover { background: #903d18; color: var(--paper); }

/* CTA on a Board Green surface uses soft brick */
.btn-on-green { background: var(--brick-soft); color: var(--ink); }
.btn-on-green:hover { background: #cf7c4d; color: var(--ink); }

/* Quiet secondary button (paper) */
.btn-ghost { background: transparent; color: var(--board-green); border-color: var(--rule); }
.btn-ghost:hover { background: var(--board-green); color: var(--paper); border-color: var(--board-green); }

/* ---- Header / nav ----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 241, 232, 0.92);
  backdrop-filter: none;                 /* no glass; solid-ish paper bar */
  border-bottom: 1px solid var(--rule);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.site-header .wordmark { font-size: 1.4rem; }

.nav-links {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
}
.nav-links a:hover { color: var(--brick); }

.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-right .btn { min-height: 44px; padding: 9px 18px; font-size: 0.9375rem; }

.nav-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile drop panel */
.nav-panel {
  display: none;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.nav-panel.open { display: block; }
.nav-panel ul { list-style: none; margin: 0; padding: 8px 20px 20px; }
.nav-panel li { border-top: 1px solid var(--rule-soft); }
.nav-panel li:first-child { border-top: 0; }
.nav-panel a {
  display: block;
  padding: 14px 4px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.nav-panel a:hover { color: var(--brick); }

/* ---- Hero ------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5rem); }
.hero .overline { margin-bottom: 20px; }
.hero .display { margin: 0 0 22px; }
/* Each promise in the hero H1 sits on its own line so the triad reads as written */
.hero .display .line { display: block; }
.hero .sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--brick);
  margin: 0 0 26px;
}
.hero .support { max-width: 52ch; color: var(--ink); margin: 0 0 34px; font-size: 1.0625rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero .cta-note { font-size: 0.9rem; color: var(--stone); }

/* Hero page-load reveal (the one permitted motion).
   Pure CSS: the animation is gated behind the .js class, which an inline head
   script adds before paint. Without JavaScript the class is never added, so the
   hero is simply visible — no class toggle, no rAF, nothing for a script error
   to break. Content is enhanced by script, never created by it. */
.js .reveal { opacity: 0; transform: translateY(12px); animation: reveal-in 0.6s ease both; }
.js .reveal.d1 { animation-delay: 0.05s; }
.js .reveal.d2 { animation-delay: 0.12s; }
.js .reveal.d3 { animation-delay: 0.19s; }
.js .reveal.d4 { animation-delay: 0.26s; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { animation: none; opacity: 1; transform: none; }
}

/* ---- Section header (shared) ------------------------------------------ */
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .overline { margin-bottom: 12px; }
.section-head .h2 { max-width: 22ch; }
.on-green .section-head .h2 { color: var(--paper); }

/* ---- The monthly report (signature) ----------------------------------- */
.report .report-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.report .intro .h2 { max-width: 18ch; margin-bottom: 20px; }
.report .intro .body { color: rgba(245, 241, 232, 0.86); max-width: 46ch; }
.report .intro .caption { margin-top: 18px; font-size: 0.9rem; color: rgba(245, 241, 232, 0.62); max-width: 44ch; }

/* The paper "sheet" sitting on the green board */
.sheet {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  border: 1px solid rgba(19, 31, 26, 0.10);
  box-shadow: 0 1px 0 rgba(0,0,0,0.10), 0 18px 40px -24px rgba(0,0,0,0.55);
  padding: clamp(22px, 4vw, 34px);
}
.sheet-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
/* The sheet is a paper surface even though it sits inside a green section,
   so its wordmark stays ink-on-paper (override the .on-green reversed rule). */
.sheet .wordmark { color: var(--ink); }
.sheet .wordmark .stop { color: var(--brick); }
.sheet-top .wordmark { font-size: 1.15rem; }
.sheet-top .month { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }

.sheet .report-overline { margin: 16px 0 18px; }

.headline-stat { display: flex; align-items: baseline; gap: 14px; }
.headline-stat .big {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--brick);
  font-size: clamp(3.25rem, 9vw, 4.25rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.headline-stat .label { font-size: 0.95rem; line-height: 1.4; }
.headline-stat .label .up { color: var(--stone); }

.stat-rows { margin-top: 22px; border-top: 1px solid var(--rule); }
.stat-rows .row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.stat-rows .row .n {
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em;
  color: var(--ink); white-space: nowrap;
}
.stat-rows .row .k { font-size: 0.95rem; color: var(--stone); text-align: right; }

.sheet-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.sheet-foot .wordmark { font-size: 1rem; }
.sheet-foot .example { font-size: 0.75rem; color: var(--stone); letter-spacing: 0.02em; }

/* ---- Problem ---------------------------------------------------------- */
.problem .items { display: grid; gap: 0; margin-top: 8px; }
.problem .item { padding: 24px 0; border-top: 1px solid var(--rule); }
.problem .item:last-child { border-bottom: 1px solid var(--rule); }
.problem .item h3 { font-size: 1.2rem; margin-bottom: 8px; }
.problem .item p { color: var(--stone); max-width: 54ch; }

/* ---- Pricing ---------------------------------------------------------- */
.pricing .intro { max-width: 60ch; color: var(--stone); margin-top: 14px; }

.tiers { display: grid; gap: 20px; margin-top: clamp(2rem, 4vw, 2.75rem); }
.tier {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 24px;
  background: var(--paper);
  display: flex; flex-direction: column;
}
.tier.featured { background: var(--board-green); color: var(--paper); border-color: var(--board-green); }
.tier .tier-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tier .tier-name h3 { font-size: 1.3rem; }
.tier.featured .tier-name h3 { color: var(--paper); }
.tag {
  font-family: var(--sans);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  background: var(--brick-soft);
  padding: 4px 8px; border-radius: 4px;
}
.price { margin: 16px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.price .amount { font-family: var(--serif); font-weight: 600; font-size: 2.25rem; letter-spacing: -0.015em; line-height: 1; }
.price .per { font-size: 0.9rem; color: var(--stone); }
.tier.featured .price .per { color: rgba(245, 241, 232, 0.72); }
.tier .terms {
  font-size: 0.8125rem; color: var(--stone);
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.tier.featured .terms { color: rgba(245, 241, 232, 0.72); border-color: var(--rule-green); }
.tier .desc { font-size: 0.9375rem; line-height: 1.6; }
.tier.featured .desc { color: rgba(245, 241, 232, 0.90); }
.tier .desc strong { color: inherit; }

.roi {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 30ch;
}

.pricing .cta-row { margin-top: clamp(1.75rem, 3vw, 2.25rem); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Diagnostic strip */
.diagnostic {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--sage);
  border-radius: var(--radius);
  padding: 24px;
  display: grid; gap: 8px;
}
.diagnostic .d-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.diagnostic .d-head h3 { font-size: 1.15rem; }
.diagnostic .d-head .amount { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.diagnostic p { font-size: 0.9375rem; color: var(--stone); max-width: 62ch; }

/* ---- Founding partners ------------------------------------------------ */
.founding-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brick);
  border-radius: var(--radius);
  padding: clamp(26px, 5vw, 44px);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.founding-head .overline { color: var(--brick); margin-bottom: 12px; }
.founding-head .h2 { max-width: 18ch; }
.founding-body { display: grid; gap: 16px; }
.founding-body p { max-width: 58ch; }
.founding-terms {
  list-style: none; margin: 6px 0 4px; padding: 0;
  border-top: 1px solid var(--rule);
}
.founding-terms li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule-soft);
}
.founding-terms .ft-n {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -0.01em; color: var(--ink);
  min-width: 4.5ch;
}
.founding-terms .ft-k { color: var(--stone); font-size: 0.95rem; }
.founding-body .cta-row { margin-top: 8px; }

/* ---- FAQ / straight answers ------------------------------------------- */
.faq-items { display: grid; gap: 0; margin-top: 8px; }
.faq-item { padding: 22px 0; border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item h3 { font-size: 1.2rem; margin-bottom: 8px; }
.faq-item p { color: var(--stone); max-width: 66ch; }

@media (min-width: 860px) {
  .founding-card { grid-template-columns: 1fr 1.15fr; align-items: start; }
  .faq-item { display: grid; grid-template-columns: 24ch 1fr; gap: 32px; align-items: start; }
  .faq-item h3 { margin-bottom: 0; }
}

/* ---- How it works ----------------------------------------------------- */
.how .steps { display: grid; gap: 0; margin-top: 8px; counter-reset: step; }
.how .step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.how .step:last-of-type { border-bottom: 1px solid var(--rule); }
.how .step .num {
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem;
  color: var(--paper); background: var(--board-green);
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.how .step .day { font-family: var(--sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); display: block; margin-bottom: 4px; }
.how .step h3 { font-size: 1.15rem; margin-bottom: 4px; }
.how .step p { color: var(--stone); font-size: 0.9375rem; max-width: 56ch; }
.how .notes { margin-top: 24px; display: grid; gap: 10px; }
.how .notes p { font-weight: 500; }
.how .notes .k { color: var(--stone); }

/* ---- About ------------------------------------------------------------ */
.about .about-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.headshot-frame {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--sage);
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--stone);
  font-size: 0.85rem;
}
.about .about-body p { margin-bottom: 18px; max-width: 60ch; }
.about .about-body p:last-child { margin-bottom: 0; }
.about .about-body .lede { font-size: 1.0625rem; }
.about .new-line { color: var(--stone); font-size: 0.95rem; }

/* ---- Book a call ------------------------------------------------------ */
.book .book-inner { max-width: 46ch; }
.book .h2 { color: var(--paper); margin-bottom: 16px; }
.book p.body { color: rgba(245, 241, 232, 0.88); margin-bottom: 26px; }
.book .cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.book .contact { margin-top: 24px; display: grid; gap: 6px; }
.book .contact a { color: var(--paper); font-weight: 500; }
.book .contact a:hover { color: var(--brick-soft); }
.book .contact .k { color: rgba(245, 241, 232, 0.62); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* ---- Footer ----------------------------------------------------------- */
.site-footer { background: var(--board-green); color: rgba(245, 241, 232, 0.82); }
.site-footer .container { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.site-footer .wordmark { font-size: 1.35rem; margin-bottom: 18px; }
.site-footer .legal { font-size: 0.85rem; line-height: 1.7; max-width: 70ch; }
.site-footer .tagline { margin-top: 14px; font-size: 0.9rem; color: rgba(245, 241, 232, 0.62); }
.site-footer .foot-links {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule-green);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  font-size: 0.875rem;
}
.site-footer .foot-links a { color: rgba(245, 241, 232, 0.82); text-decoration-color: var(--brick-soft); }
.site-footer .foot-links a:hover { color: var(--paper); }
.site-footer .copyright { margin-top: 20px; font-size: 0.8rem; color: rgba(245, 241, 232, 0.62); }

/* ---- Legal pages (privacy / cookies) ---------------------------------- */
.doc { padding-block: clamp(2.5rem, 6vw, 4rem); }
.doc .container { max-width: 760px; }
.doc .review-note {
  background: var(--sage);
  border-left: 3px solid var(--brick);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 0.9rem;
  margin-bottom: 32px;
}
.doc h1 { font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -0.015em; margin-bottom: 10px; }
.doc .updated { color: var(--stone); font-size: 0.85rem; margin-bottom: 28px; }
.doc h2 { font-size: 1.4rem; margin: 34px 0 10px; }
.doc h3 { font-size: 1.1rem; margin: 22px 0 8px; }
.doc p, .doc li { max-width: 68ch; }
.doc p { margin-bottom: 14px; }
.doc ul { margin: 0 0 16px; padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.doc .back { display: inline-block; margin-top: 8px; font-weight: 600; }

/* =========================================================================
   Responsive — mobile-first above; wider layouts below.
   ========================================================================= */
@media (min-width: 700px) {
  .report .report-grid { grid-template-columns: 1fr 1fr; align-items: center; }
  .how .notes { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 860px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-panel { display: none !important; }

  /* Three-up problem cards only once there's room — avoids the cramped mid-range */
  .problem .items { grid-template-columns: 1fr 1fr 1fr; gap: 0 32px; }
  .problem .item { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

  .tiers { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .tier.featured { transform: translateY(-8px); }

  .about .about-grid { grid-template-columns: 320px 1fr; align-items: start; }
}

@media (min-width: 1000px) {
  .container { padding-inline: 40px; }
}

/* =========================================================================
   Print — the brand belongs on a contract. Print clean, ink-on-paper.
   ========================================================================= */
@media print {
  :root { --board-green: #1E3D31; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-header, .nav-toggle, .nav-panel, .skip-link, .book .cta-row, .hero .cta-row { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.4; }
  .section { padding-block: 18pt; }
  .panel-green, .tier.featured, .book, .site-footer {
    background: #fff !important; color: #000 !important;
  }
  .panel-green .overline, .on-green .overline,
  .panel-green .section-head .h2, .book .h2,
  .tier.featured .tier-name h3, .tier.featured .desc, .tier.featured .price .per, .tier.featured .terms {
    color: #000 !important;
  }
  .wordmark, .on-green .wordmark { color: #000 !important; }
  .wordmark .stop { color: var(--brick) !important; }
  .sheet { box-shadow: none; border: 1px solid #000; }
  .tier { border: 1px solid #000; }
  a { color: #000; text-decoration: underline; }
  .hero .display, .headline-stat .big, .price .amount { color: #000 !important; }
  .headline-stat .big { color: var(--brick) !important; }
  section[id] { scroll-margin-top: 0; }
  @page { margin: 16mm; }
}