/*
 * OurRoots Journal — Shared Site Stylesheet
 * site.css  |  ourrootsafrica.com
 *
 * Architecture:
 *  1  Design tokens (colours, type scale, spacing scale)
 *  2  Reset
 *  3  Typography helpers
 *  4  Layout (.wrap, .section, section variants)
 *  5  Buttons
 *  6  Navigation (hamburger, mobile drawer, site header)
 *  7  Site footer
 *  8  Announcement banner
 *  9  Hero (base)
 * 10  Article typography
 * 11  Callout / source blocks
 * 12  Cards (story-card)
 * 13  Fact tables (.fact-table, .comparison-table)
 * 14  Social share bar
 * 15  Vaccination checklist tool
 * 16  Walk-tool specifics
 * 17  Security / print protection
 * 18  Utility classes
 * 19  Responsive breakpoints (mobile → tablet → desktop)
 * 20  Print
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1 — DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --green:           #0B3E2E;
  --green-deep:      #082A20;
  --green-mid:       #1F5C42;
  --gold:            #C9A961;
  --gold-soft:       #D9BF82;
  --gold-bright:     #E4C97A;
  --terracotta:      #B85C38;
  --terracotta-soft: #D88467;
  --cream:           #F8F4ED;
  --cream-warm:      #F1EADC;
  --ink:             #1A1A1A;
  --muted:           #5A5A5A;
  --rule:            rgba(11,62,46,.12);

  /* Type scale */
  --fs-xs:   .72rem;   /*  ~11.5px */
  --fs-sm:   .82rem;   /*  ~13px   */
  --fs-base: 1rem;     /*   16px   */
  --fs-md:   1.06rem;  /*  ~17px   */
  --fs-lg:   1.15rem;  /*  ~18.4px */
  --fs-xl:   1.35rem;  /*  ~21.6px */

  /* Spacing scale (8-point grid) */
  --sp-1:  .25rem;   /*  4px  */
  --sp-2:  .5rem;    /*  8px  */
  --sp-3:  .75rem;   /* 12px  */
  --sp-4:  1rem;     /* 16px  */
  --sp-5:  1.25rem;  /* 20px  */
  --sp-6:  1.5rem;   /* 24px  */
  --sp-8:  2rem;     /* 32px  */
  --sp-10: 2.5rem;   /* 40px  */
  --sp-12: 3rem;     /* 48px  */
  --sp-16: 4rem;     /* 64px  */
  --sp-20: 5rem;     /* 80px  */
  --sp-24: 6rem;     /* 96px  */

  /* Global transition */
  --ease: all .25s cubic-bezier(.25,.46,.45,.94);

  /* ── Abbreviated aliases (used by contribute, budget-tool, the-research, research-report-premium) ── */
  --g:  #0B3E2E;          /* = --green       */
  --gd: #082A20;          /* = --green-deep  */
  --gm: #1F5C42;          /* = --green-mid   */
  --go: #C9A961;          /* = --gold        */
  --gs: #D9BF82;          /* = --gold-soft   */
  --t:  #B85C38;          /* = --terracotta  */
  --c:  #F8F4ED;          /* = --cream       */
  --cw: #F1EADC;          /* = --cream-warm  */
  --m:  #5A5A5A;          /* = --muted       */
  --r:  rgba(11,62,46,.12); /* = --rule      */
}

/* ─────────────────────────────────────────────────────────────────────────────
   2 — RESET
   ───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100vw;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Lora', Georgia, serif;
  font-size: var(--fs-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Images and media never overflow their container */
img, video, iframe, embed, object, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Long strings break instead of overflowing */
p, li, td, th, blockquote, figcaption {
  overflow-wrap: break-word;
  word-break: break-word;
}
pre, code {
  white-space: pre-wrap;
  overflow-x: auto;
  max-width: 100%;
}

a { color: var(--green); text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Form elements: min-height for touch targets, prevent iOS zoom */
input, select, textarea {
  min-height: 44px;
  font-size: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3 — TYPOGRAPHY HELPERS
   ───────────────────────────────────────────────────────────────────────────── */
.fnt-display {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  letter-spacing: -.01em;
  font-weight: 400;
}

/* Eyebrow: italic small-caps label with gold rule prefix */
.eyebrow {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta);
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 2px;
  background: var(--gold);
  flex-shrink: 0;
}
.eyebrow-gold        { color: var(--gold); }
.eyebrow-gold::before{ background: var(--gold); }

/* ─────────────────────────────────────────────────────────────────────────────
   4 — LAYOUT
   ───────────────────────────────────────────────────────────────────────────── */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}
@media (min-width: 640px)  { .wrap { padding: 0 var(--sp-6); } }
@media (min-width: 1024px) { .wrap { padding: 0 var(--sp-8); } }

.section { padding: var(--sp-16) 0; }

.section-cream-warm { background: var(--cream-warm); }

.section-green {
  background: linear-gradient(160deg, var(--green-deep) 0%, var(--green) 100%);
  color: var(--cream);
}
.section-green a { color: var(--gold); }

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--sp-10);
}
.section-head h2 {
  font-family: 'Fraunces', serif;
  color: var(--green);
  font-size: clamp(1.45rem, 3.2vw, 2.3rem);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -.01em;
  margin: var(--sp-2) 0 var(--sp-3);
}
.section-green .section-head h2 { color: var(--cream); }
.section-head p {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
}
.section-green .section-head p { color: rgba(248,244,237,.75); }

/* Platform bridge 2-col inner grid → 1-col on mobile */
.platform-bridge-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr 1fr;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5 — BUTTONS
   ───────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: .88rem;
  padding: .82rem var(--sp-6);
  border-radius: 999px;
  cursor: pointer;
  border: 0;
  transition: var(--ease);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  min-height: 44px;
}
.btn-gold    { background: var(--gold); color: var(--green-deep); }
.btn-gold:hover { background: var(--green); color: var(--gold); }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(248,244,237,.6);
}
.btn-ghost:hover { background: var(--cream); color: var(--green-deep); }

.btn-outline {
  background: transparent;
  color: var(--green);
  border: 1.5px solid var(--green);
}
.btn-outline:hover { background: var(--green); color: var(--cream); }

.btn-sm {
  padding: .52rem var(--sp-4);
  font-size: .8rem;
  min-height: 44px;
}

/* Touch targets — all interactive elements at least 44px */
a.btn, button, .btn,
.share-btn-social, .pdf-btn,
.nav a, .footer-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* Exceptions: inline text links */
article a, .footer-base a, p a {
  min-height: unset;
  display: inline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6 — NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  cursor: pointer;
  border: 0;
  background: transparent;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transition: transform .28s ease, opacity .28s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 880px) { .hamburger { display: none; } }

/* Mobile overlay */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(8,42,32,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}
.mob-overlay.open { display: block; }

/* Mobile drawer */
.mob-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(310px, 88vw);
  background: var(--cream);
  z-index: 99;
  padding: 0 0 var(--sp-8);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(8,42,32,.18);
}
.mob-drawer.open { transform: translateX(0); }

.mob-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule);
  height: 66px;
}
.mob-drawer-brand {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--green);
  font-weight: 500;
}
.mob-close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--green); font-size: 1.4rem; line-height: 1;
  border-radius: 4px;
}
.mob-close:hover { background: var(--cream-warm); }

.mob-links { flex: 1; padding: var(--sp-2) 0; }
.mob-links a {
  display: flex;
  align-items: center;
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--green);
  padding: .85rem var(--sp-6);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background .18s, color .18s;
  min-height: 44px;
}
.mob-links a:hover  { background: var(--cream-warm); color: var(--terracotta); }
.mob-links a:last-child { border-bottom: 0; }

.mob-drawer-cta { padding: var(--sp-5) var(--sp-6) 0; }
.mob-drawer-cta .btn { width: 100%; justify-content: center; }

/* Site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248,244,237,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  gap: var(--sp-4);
  /* padding/centering handled by parent .wrap */
}

/* Brand logo group */
.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--green);
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}
.brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: contain;
}
.brand-name {
  font-family: 'Fraunces', serif;
  font-size: clamp(.97rem, 3vw, 1.1rem);
  line-height: 1.1;
  color: var(--green);
  font-weight: 500;
  white-space: nowrap;
}
.brand-tag {
  font-style: italic;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-top: 2px;
}

/* Desktop nav */
.nav {
  display: none;
  align-items: center;
  gap: var(--sp-6);
  font-size: .88rem;
}
@media (min-width: 880px) { .nav { display: flex; } }
.nav a        { color: var(--ink); transition: color .2s; }
.nav a:hover  { color: var(--terracotta); }
.nav .active  { color: var(--terracotta); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────────
   7 — SITE FOOTER
   ───────────────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--green-deep);
  color: rgba(248,244,237,.88);
  padding: var(--sp-10) 0 var(--sp-6);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.footer-brand          { display: flex; align-items: center; gap: .7rem; }
.footer-brand-mark     { width: 34px; height: 34px; }
.footer-brand-name     { font-family: 'Fraunces', serif; color: var(--cream); font-size: .98rem; }
.footer-brand-tag      {
  font-style: italic;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2px;
}
.footer-nav {
  display: flex;
  gap: var(--sp-5);
  font-size: .85rem;
  flex-wrap: wrap;
  align-items: center;
}
.footer-nav a       { color: rgba(248,244,237,.88); }
.footer-nav a:hover { color: var(--gold); }

.footer-base {
  border-top: 1px solid rgba(248,244,237,.12);
  padding-top: var(--sp-5);
  font-size: .73rem;
  color: rgba(248,244,237,.80);
}
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .65rem 1.8rem;
  margin-bottom: 1rem;
}
.footer-socials a {
  color: rgba(248,244,237,.90);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  transition: color .2s;
  white-space: nowrap;
}
.footer-socials a:hover { color: var(--gold); }

.footer-sisters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1rem;
  margin-bottom: .8rem;
  font-size: .68rem;
  letter-spacing: .04em;
}
.footer-sisters a       { color: rgba(248,244,237,.82); }
.footer-sisters a:hover { color: var(--cream); }

.footer-legal { text-align: center; line-height: 1.65; }

/* ─────────────────────────────────────────────────────────────────────────────
   8 — ANNOUNCEMENT BANNER
   ───────────────────────────────────────────────────────────────────────────── */
.prelaunch {
  background: var(--terracotta);
  color: var(--cream);
  text-align: center;
  padding: .55rem var(--sp-4);
  font-size: .82rem;
  font-style: italic;
  line-height: 1.5;
}
.prelaunch strong { font-style: normal; font-weight: 600; letter-spacing: .03em; }
.prelaunch a      { color: var(--cream); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ─────────────────────────────────────────────────────────────────────────────
   9 — HERO (base — pages add their own hero bg/sizing)
   ───────────────────────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, var(--green-deep) 0%, var(--green) 100%);
  color: var(--cream);
  padding: var(--sp-12) 0 var(--sp-20);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(201,169,97,.13) 0%, transparent 70%);
  pointer-events: none;
}
.hero h1 {
  font-family: 'Fraunces', serif;
  color: var(--cream);
  font-size: clamp(1.75rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-5);
}
.hero h1 em {
  color: var(--gold);
  font-style: italic;
  font-weight: 300;
  display: block;
}
.hero-lede {
  color: rgba(248,244,237,.85);
  font-size: .98rem;
  line-height: 1.72;
  max-width: 540px;
  margin-bottom: var(--sp-6);
}
.hero-lede strong { color: var(--gold); font-weight: 600; }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: var(--sp-8);
}
.hero-trust {
  font-size: .76rem;
  color: rgba(248,244,237,.55);
  letter-spacing: .04em;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10 — ARTICLE TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */
article {
  padding: var(--sp-12) 0;
  font-size: 1.08rem;        /* Standardised — matches page-level overrides */
  line-height: 1.78;
  color: var(--ink);         /* Token-compliant — was hardcoded #1F2421 */
}
article h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  color: var(--green);
  margin: 2.5em 0 .75em;
  line-height: 1.2;
  letter-spacing: -.01em;
}
article h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.25rem;        /* Was 1.08rem — same as body, no visual hierarchy */
  color: var(--green);
  margin: 2em 0 .55em;
}
article blockquote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);  /* Standardised — was too small */
  line-height: 1.4;
  color: var(--green);
  border-left: 3px solid var(--gold);
  padding: 0 0 0 1.4rem;
  margin: 2em 0;
}
article blockquote cite {
  display: block;
  margin-top: .5rem;
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--muted);
  font-family: 'Lora', serif;
}
article p       { margin: 0 0 1.4em; }  /* Standardised — was 1.15em, pages overrode to 1.4em */
article ul, article ol { padding-left: var(--sp-6); margin: 0 0 1.2em; }
article li      { margin-bottom: .5em; }
article strong  { color: var(--green); font-weight: 600; }
article em      { color: var(--terracotta); }
article a       { color: var(--green); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
article a:hover { color: var(--terracotta); }
article img     { max-width: 100%; height: auto; border-radius: 4px; }
article svg     { max-width: 100%; }

/* Drop capital on lead paragraph */
article p.lead::first-letter {
  font-family: 'Fraunces', serif;
  font-size: 4rem;
  font-weight: 600;
  line-height: .9;
  float: left;
  margin: .1rem .6rem 0 0;
  color: var(--terracotta);
}

/* ── Dispatch sections (location-marked sections within articles) ── */
.dispatch {
  border-top: 1px solid var(--rule);
  padding-top: 1.75rem;
  margin-top: 2.5rem;
}
.location-mark {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracotta);
  display: block;
  margin-bottom: .35rem;
}

/* ── Voice / testimonial blocks ── */
.voice-block {
  background: var(--cream-warm);
  border-left: 3px solid var(--terracotta);
  padding: 1.25rem 1.5rem;
  margin: 2em 0;
  border-radius: 0 4px 4px 0;
}
.voice-block .speaker {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .5rem;
}
.voice-block p {
  margin: 0;
  font-size: .97rem;
  line-height: 1.7;
  color: var(--ink);
}

/* ── Ornament divider ── */
.ornament {
  text-align: center;
  color: var(--gold);
  opacity: .55;
  margin: 2.5em 0;
  font-size: 1.1rem;
  letter-spacing: .3em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11 — CALLOUT / SOURCE BLOCKS
   ───────────────────────────────────────────────────────────────────────────── */
.callout {
  background: var(--cream-warm);
  border-left: 3px solid var(--gold);
  padding: var(--sp-5) var(--sp-5);
  margin: 1.5em 0;
  border-radius: 4px;
  font-size: .96rem;
}
.callout strong {
  color: var(--green);
  display: block;
  margin-bottom: .3rem;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .76rem;
}
.callout-warn {
  background: #FFF8E7;
  border-left: 3px solid var(--terracotta);
  padding: var(--sp-5) var(--sp-5);
  margin: 1.5em 0;
  border-radius: 4px;
  font-size: .96rem;
}
.callout-warn strong {
  color: var(--terracotta);
  display: block;
  margin-bottom: .3rem;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .76rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12 — CARDS
   ───────────────────────────────────────────────────────────────────────────── */
.story-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--ease);
  text-decoration: none;
  color: inherit;
}
.story-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(11,62,46,.22);
  border-color: var(--gold);
}
.story-body {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.story-cat {
  font-style: italic;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: .45rem;
}
.story-card h3 {
  font-family: 'Fraunces', serif;
  color: var(--green);
  font-size: 1.15rem;
  line-height: 1.22;
  margin: .25rem 0 .55rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.story-card p {
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
  margin: 0 0 .9rem;
  flex: 1;
}
.story-read {
  font-family: 'Lora', serif;
  font-weight: 600;
  color: var(--green);
  font-size: .85rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13 — TABLES
   ───────────────────────────────────────────────────────────────────────────── */

/* Scroll wrapper */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-soft) transparent;
  margin: 2em 0;
  border-radius: 8px;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 12px rgba(11,62,46,.06);
}
.table-wrap::-webkit-scrollbar       { height: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 2px; }

/* Fact table (articles, data pages) */
table.fact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  line-height: 1.5;
  background: #fff;
}
table.fact-table thead tr   { background: var(--green); }
table.fact-table th {
  text-align: left;
  padding: .85rem var(--sp-5);
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
  border-bottom: 2px solid rgba(201,169,97,.35);
}
table.fact-table td {
  padding: .82rem var(--sp-5);
  vertical-align: top;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  font-size: .9rem;
  line-height: 1.55;
}
table.fact-table tbody tr:last-child td { border-bottom: none; }

/* Alternating rows */
table.fact-table tbody tr:nth-child(odd)  td { background: rgba(248,244,237,.55); }
table.fact-table tbody tr:nth-child(even) td { background: #fff; }
table.fact-table tbody tr:hover td           { background: rgba(201,169,97,.09); transition: background .15s; }

/* Totals / summary row */
table.fact-table tbody tr:last-child td {
  font-weight: 600;
  color: var(--green-deep);
  background: rgba(11,62,46,.04);
  border-top: 1.5px solid var(--rule);
}

/* Row label column */
table.fact-table td:first-child { font-weight: 500; }

/* Source column (last in 3-col tables) */
table.fact-table td:last-child:not(:first-child) {
  color: var(--muted);
  font-size: .82rem;
  font-style: italic;
}

/* Budget-tier column colouring */
table.fact-table td[data-tier="budget"]  { color: var(--green-mid); }
table.fact-table td[data-tier="mid"]     { color: var(--ink); }
table.fact-table td[data-tier="premium"] { color: var(--terracotta); }

/* Comparison table (pricing pages) */
table.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  background: #fff;
}
table.comparison-table th {
  padding: var(--sp-4) var(--sp-5);
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: .88rem;
  font-weight: 500;
  background: var(--green);
  color: var(--cream);
  border-bottom: 2px solid rgba(201,169,97,.3);
}
table.comparison-table th:first-child {
  text-align: left;
  background: var(--green-deep);
}
table.comparison-table td {
  padding: .75rem var(--sp-5);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  font-size: .88rem;
  line-height: 1.45;
}
table.comparison-table td:first-child         { font-weight: 500; color: var(--ink); }
table.comparison-table td:not(:first-child)   { text-align: center; }
table.comparison-table tbody tr:nth-child(odd) td { background: rgba(248,244,237,.4); }
table.comparison-table tbody tr:hover td      { background: rgba(201,169,97,.08); transition: background .15s; }
table.comparison-table .tick                  { color: var(--green); font-size: 1.1rem; }
table.comparison-table .cross                 { color: var(--muted); font-size: 1rem; }
table.comparison-table .highlight-col         { background: rgba(201,169,97,.1) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   14 — SOCIAL SHARE BAR
   ───────────────────────────────────────────────────────────────────────────── */
.share-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: var(--sp-8) auto;
  max-width: 480px;
}
.share-bar-label {
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
  margin-right: .25rem;
  white-space: nowrap;
}
.share-btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem .85rem;
  border-radius: 40px;
  font-family: 'Lora', serif;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: opacity .18s, transform .15s;
  white-space: nowrap;
  min-height: 44px;
  letter-spacing: .02em;
}
.share-btn-social:hover { opacity: .85; transform: translateY(-1px); }
.share-btn-social svg, .share-btn-social .share-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* Platform colours */
.share-wa  { background: #25D366; color: #fff; }
.share-wa:hover { color: #fff; }
.share-x   { background: #000; color: #fff; }
.share-x:hover { color: #fff; }
.share-fb  { background: #1877F2; color: #fff; }
.share-fb:hover { color: #fff; }
.share-li  { background: #0A66C2; color: #fff; }
.share-li:hover { color: #fff; }
.share-tt  { background: #010101; color: #fff; border-color: #333; }
.share-tt:hover { color: #fff; }
.share-ig  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.share-ig:hover { color: #fff; }
.share-copy { background: transparent; color: var(--green); border-color: var(--rule); cursor: pointer; }
.share-copy:hover { background: var(--cream-warm); }

/* ─────────────────────────────────────────────────────────────────────────────
   15 — VACCINATION CHECKLIST TOOL
   ───────────────────────────────────────────────────────────────────────────── */
.vacc-intro {
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  line-height: 1.6;
}
.vacc-progress-wrap {
  background: var(--rule);
  border-radius: 99px;
  height: 8px;
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.vacc-progress-bar {
  height: 100%;
  background: var(--green);
  border-radius: 99px;
  transition: width .4s ease;
  width: 0%;
}
.vacc-progress-label {
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vacc-section-title {
  font-family: 'Lora', serif;
  font-size: var(--fs-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .4rem;
  margin: var(--sp-5) 0 var(--sp-3);
}
.vacc-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .7rem .5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid var(--rule);
}
.vacc-item:last-child          { border-bottom: none; }
.vacc-item:hover               { background: rgba(201,169,97,.07); }
.vacc-item.done                { opacity: .6; }
.vacc-item.done .vacc-name     { text-decoration: line-through; }

.vacc-checkbox {
  width: 22px; height: 22px; min-width: 22px;
  border-radius: 4px;
  border: 2px solid var(--rule);
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: var(--ease);
  margin-top: .05rem;
  flex-shrink: 0;
}
.vacc-item.done .vacc-checkbox     { background: var(--green); border-color: var(--green); color: #fff; }
.vacc-item.required .vacc-checkbox { border-color: var(--terracotta); }
.vacc-item.required.done .vacc-checkbox { background: var(--green); border-color: var(--green); }

.vacc-info { flex: 1; min-width: 0; }
.vacc-name { font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.vacc-meta { font-size: .75rem; color: var(--muted); margin-top: .2rem; line-height: 1.4; }

.vacc-badge {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .45rem;
  border-radius: 3px;
  display: inline-block;
  margin-top: .25rem;
}
.vacc-badge.req { background: rgba(184,92,56,.12); color: #8B3A1F; }
.vacc-badge.rec { background: rgba(201,169,97,.15); color: #7a6200; }
.vacc-badge.opt { background: var(--rule); color: var(--muted); }

.vacc-source {
  font-size: .65rem;
  color: var(--muted);
  margin-top: var(--sp-4);
  padding-top: .75rem;
  border-top: 1px solid var(--rule);
  line-height: 1.5;
}
.vacc-source a { color: var(--green); }

.vacc-reset-btn {
  font-size: .75rem;
  background: none;
  border: 1px solid var(--rule);
  color: var(--muted);
  padding: .35rem .75rem;
  border-radius: 4px;
  cursor: pointer;
  margin-top: .75rem;
  transition: border-color .15s, color .15s;
}
.vacc-reset-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }

.vacc-complete-msg {
  display: none;
  background: rgba(11,62,46,.06);
  border: 1px solid var(--green);
  border-radius: 6px;
  padding: .85rem var(--sp-4);
  font-size: .85rem;
  color: var(--green-deep);
  margin-top: var(--sp-4);
  text-align: center;
  line-height: 1.5;
}
.vacc-complete-msg.visible { display: block; }

/* ─────────────────────────────────────────────────────────────────────────────
   16 — THE WALK: tool card specifics
   ───────────────────────────────────────────────────────────────────────────── */
.walk-tool                   { position: relative; }
.walk-tool .tool-header      { padding-right: 2.8rem; }
.tool-lock {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  flex-shrink: 0;
  font-size: .75rem;
}

/* Pricing / founding member summary typography */
.founding-summary-price { font-size: clamp(1.1rem, 5.5vw, 1.35rem); line-height: 1.2; }
.founding-summary-sub   { font-size: clamp(.82rem, 3.5vw, .95rem); }
.founding-summary-note  { font-size: clamp(.72rem, 3vw, .78rem); }

/* Step cards (welcome.html) */
.steps-grid { display: grid; gap: var(--sp-6); }

/* ─────────────────────────────────────────────────────────────────────────────
   17 — SECURITY / PRINT PROTECTION
   ───────────────────────────────────────────────────────────────────────────── */

/* Prevent text selection on protected content */
[data-protected],
.walk-tool .tool-content,
.result {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* Always allow selection in form elements */
[data-protected] input,
[data-protected] textarea,
[data-protected] select {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* ── Float contribute button ── */
@keyframes pulse-ring {
  0%   { transform: scale(.95); box-shadow: 0 0 0 0 rgba(184,92,56,.5); }
  70%  { transform: scale(1);   box-shadow: 0 0 0 10px rgba(184,92,56,0); }
  100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(184,92,56,0); }
}
.float-contribute {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--terracotta);
  color: var(--cream);
  padding: .65rem 1.2rem;
  border-radius: 99px;
  font-family: 'Lora', serif;
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(184,92,56,.5);
  animation: pulse-ring 2.5s ease-out infinite;
  transition: background .2s;
  max-width: calc(100vw - 2rem);
}
.float-contribute:hover {
  background: var(--green-deep);
  animation: none;
}
@media (max-width: 400px) {
  .float-contribute {
    bottom: 1rem;
    right: 1rem;
    font-size: .78rem;
    padding: .55rem 1rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   18 — UTILITY
   ───────────────────────────────────────────────────────────────────────────── */
.hidden          { display: none !important; }
.text-gold       { color: var(--gold); }
.text-terracotta { color: var(--terracotta); }
.text-green      { color: var(--green); }
.text-muted      { color: var(--muted); }
.text-center     { text-align: center; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────────
   19 — RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Mobile (≤ 640px) ── */
@media (max-width: 640px) {

  /* Layout */
  .section         { padding: var(--sp-10) 0; }
  .header-row      { height: 58px; }

  /* Brand */
  .brand-tag       { display: none; }
  .brand-mark      { width: 30px; height: 30px; }

  /* Hero */
  .hero            { padding: var(--sp-10) 0 var(--sp-16); }
  .hero h1         { font-size: clamp(1.5rem, 7vw, 1.9rem); line-height: 1.12; }
  .hero-lede       { font-size: .88rem; }
  .hero-ctas       { flex-direction: column; align-items: flex-start; }
  .hero-ctas .btn  { width: 100%; justify-content: center; }
  .hero-trust      { font-size: .72rem; }

  /* Section headings */
  .section-head h2 { font-size: clamp(1.2rem, 5.5vw, 1.55rem); }

  /* Article */
  article          { padding: var(--sp-8) 0; font-size: .88rem; line-height: 1.7; }
  article h2       { font-size: clamp(1.1rem, 5vw, 1.3rem); margin-top: 1.75em; }
  article h3       { font-size: 1rem; }
  article blockquote { font-size: .95rem; line-height: 1.45; padding-left: var(--sp-4); }
  article p.lead::first-letter { font-size: 2.3rem; }

  /* Tables */
  .table-wrap {
    margin: 1.5em -1.25rem;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }
  table.fact-table th { font-size: .72rem; padding: .65rem .75rem; letter-spacing: .04em; }
  table.fact-table td { font-size: .82rem; padding: .65rem .75rem; line-height: 1.45; }
  table.fact-table td:last-child:not(:first-child) { font-size: .75rem; }
  table.comparison-table th,
  table.comparison-table td { padding: .6rem .65rem; font-size: .78rem; }

  /* Cards */
  .story-body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }

  /* Walk tools */
  .tools-grid     { grid-template-columns: 1fr; }
  .walk-tool      { padding: var(--sp-6) var(--sp-5); }

  /* Platform bridge */
  .platform-bridge-grid { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing-grid,
  .tier-grid      { grid-template-columns: 1fr; }

  /* Comparison scroll */
  .comparison-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparison-table { min-width: 520px; }

  /* Checkout */
  .plan-toggle    { grid-template-columns: 1fr 1fr; gap: .6rem; }

  /* Step cards */
  .steps-grid     { grid-template-columns: 1fr; gap: var(--sp-4); }
  .step-card      { padding: var(--sp-5) var(--sp-4); }
  .step-card a    { display: block; width: 100%; text-align: center; box-sizing: border-box; }

  /* Founding member summary */
  .founding-seats-box .founding-summary-price { font-size: clamp(1.05rem, 5vw, 1.2rem); }
  .founding-seats-box .founding-summary-sub   { font-size: clamp(.82rem, 3.5vw, .92rem); }
  .founding-seats-box .founding-summary-note  { font-size: clamp(.72rem, 3vw, .78rem); }

  /* Share bar */
  .share-btn-social { padding: .45rem .7rem; font-size: .73rem; }
  .share-bar        { gap: .4rem; }

  /* Vaccination */
  .vacc-name { font-size: .86rem; }
  .vacc-meta { font-size: .72rem; }

  /* Journal tabs */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .25rem;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
    padding: .5rem var(--sp-4);
    font-size: .8rem;
  }

  /* Footer */
  .footer-row     { flex-direction: column; }
  .footer-nav     { gap: .8rem; font-size: .82rem; }
  .footer-socials { gap: .6rem 1.4rem; }
  .footer-sisters { gap: .35rem .8rem; font-size: .65rem; }

  /* Hero stats */
  .hero-stats .stat-n { font-size: 1.4rem; }
  .hero-stats .stat-l { font-size: .68rem; }

  /* Sankofa card */
  .sankofa-card   { max-width: 280px; }

  /* Marquee */
  .marquee-track  { font-size: 1rem; }

  /* Byline */
  .byline         { flex-wrap: wrap; gap: .6rem; }
}

/* ── Extra-small phones (≤ 400px) ── */
@media (max-width: 400px) {
  .hero h1, h1    { font-size: 1.45rem; line-height: 1.1; }
  h2              { font-size: 1.2rem; }
  h3              { font-size: 1.05rem; }
  article         { font-size: .9rem; }
  .brand-tag      { display: none; }
  table.fact-table th,
  table.fact-table td { padding: .55rem .6rem; font-size: .76rem; }
  /* Headings break on very narrow screens */
  h1, h2, h3     { overflow-wrap: break-word; hyphens: auto; }
  /* Share bar: icon-only circles */
  .share-btn-social .share-label { display: none; }
  .share-btn-social { padding: .5rem; border-radius: 50%; width: 44px; height: 44px; }
}

/* ── Tablet (541–879px) ── */
@media (min-width: 541px) and (max-width: 879px) {
  .hero h1        { font-size: clamp(1.9rem, 5.5vw, 3rem); }
  .section-head h2{ font-size: clamp(1.55rem, 4vw, 2.2rem); }
  .tools-grid     { grid-template-columns: 1fr 1fr; }
  .hero           { padding: var(--sp-12) 0 var(--sp-16); }
  .pricing-grid   { grid-template-columns: 1fr 1fr; }
}

/* ── Journal react/share buttons ── */
.react-btn {
  min-height: 44px;
  min-width: 44px;
  padding: .5rem .65rem;
}
.share-btn {
  min-height: 44px;
  padding: .5rem .75rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   20 — PRINT
   ───────────────────────────────────────────────────────────────────────────── */
@media print {
  /* Hide chrome and interactive elements */
  .site-header, .site-footer, .btn, .hero-ctas,
  .share-bar, .float-contribute, .related,
  .prelaunch, .pdf-download-bar,
  #paywall-zone, .paywall-gate, .paywall-blur-wrap,
  .cta-block, nav, footer { display: none !important; }

  /* Protected content: blank on print */
  [data-protected], .walk-tool, .tool-content, .result { display: none !important; }
  body::before {
    content: "This content is protected by OurRoots Journal. Unauthorised reproduction is prohibited.";
    display: block !important;
    font-size: 1rem;
    color: #000;
    padding: 2rem;
    text-align: center;
  }

  /* Clean page breaks */
  h2, h3                         { page-break-after: avoid; }
  blockquote, .callout, table    { page-break-inside: avoid; }

  /* Readable body */
  body {
    font-size: 11pt;
    line-height: 1.7;
    color: #1A1A1A;
    background: #fff;
  }
  a { color: #0B3E2E; text-decoration: none; }

  /* Strip animations */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}