/* ============================================================
   teachrealprinciples.com — Main Stylesheet
   Design system: CSS custom properties + utility classes
   Mobile-first, semantic, accessible
   ============================================================ */

/* ── 1. Custom Properties (Design Tokens) ───────────────── */
:root {
  /* Brand Colors — Red, White & Blue (patriotic) */
  --color-primary:        #1b3a6b;   /* Deep navy blue — trust, authority */
  --color-primary-dark:   #122850;
  --color-primary-light:  #2a5298;
  --color-accent:         #c0392b;   /* Bold patriotic red — energy, action */
  --color-accent-dark:    #a33125;
  --color-accent-light:   #e04a3a;

  /* Neutrals */
  --color-bg:             #faf9f6;   /* Off-white warm */
  --color-bg-alt:         #f0ede6;
  --color-surface:        #ffffff;
  --color-border:         #e2ddd6;
  --color-text:           #1c1917;   /* Near-black warm */
  --color-text-muted:     #6b6560;
  --color-text-light:     #9c948c;

  /* Semantic */
  --color-success:        #166534;
  --color-info:           #1e40af;
  --color-disclosure-bg:  #fef9c3;   /* Soft yellow for disclosure bars */
  --color-disclosure-border: #ca8a04;

  /* Typography */
  --font-sans:   'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif:  'Georgia', 'Times New Roman', serif;
  --font-mono:   'Fira Code', 'Consolas', monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  2;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold:   700;
  --font-extrabold: 800;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --max-width:       1200px;
  --max-width-prose: 680px;
  --max-width-wide:  1400px;

  /* Borders & Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full:9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-xl:  0 20px 50px rgba(0,0,0,.15);
  --shadow-card:0 2px 8px rgba(27,58,107,.08), 0 1px 3px rgba(27,58,107,.05);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Nav */
  --nav-height: 72px;
}

/* ── 2. Reset & Base ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-dark); }

ul, ol { list-style: none; }

button, input, textarea, select {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

p { max-width: 70ch; }

/* ── 3. Layout Utilities ─────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 640px)  { .container { padding-inline: var(--space-8);  } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-12); } }

.container--prose { max-width: var(--max-width-prose); }
.container--wide  { max-width: var(--max-width-wide);  }

.section {
  padding-block: var(--space-16);
}
@media (min-width: 768px) {
  .section { padding-block: var(--space-24); }
}

.section--sm  { padding-block: var(--space-12); }
.section--alt { background-color: var(--color-bg-alt); }
.section--dark {
  background-color: var(--color-primary-dark);
  color: var(--color-surface);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 { color: var(--color-surface); }

/* Grid helpers */
.grid-auto {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid-2 {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

.grid-3 {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Flex helpers */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── 4. Typography ───────────────────────────────────────── */
.text-xs     { font-size: var(--text-xs);  }
.text-sm     { font-size: var(--text-sm);  }
.text-base   { font-size: var(--text-base);}
.text-lg     { font-size: var(--text-lg);  }
.text-xl     { font-size: var(--text-xl);  }
.text-2xl    { font-size: var(--text-2xl); }
.text-3xl    { font-size: var(--text-3xl); }
.text-4xl    { font-size: var(--text-4xl); }
.text-5xl    { font-size: var(--text-5xl); }

.text-muted  { color: var(--color-text-muted); }
.text-light  { color: var(--color-text-light); }
.text-center { text-align: center; }
.text-left   { text-align: left;   }

.font-medium   { font-weight: var(--font-medium);   }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold);     }
.font-extrabold{ font-weight: var(--font-extrabold);}

.serif { font-family: var(--font-serif); }

.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.section--dark .section-label { color: var(--color-accent-light); }

.section-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
  .section-title { font-size: var(--text-4xl); }
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: var(--leading-relaxed);
}
.section--dark .section-subtitle { color: rgba(255,255,255,.75); }

.section-header {
  margin-bottom: var(--space-12);
}
.section-header--center {
  text-align: center;
}
.section-header--center p,
.section-header--center .section-subtitle {
  margin-inline: auto;
}

/* ── 5. Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  border: 2px solid transparent;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}
.btn--accent:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-surface);
}

.btn--outline-white {
  background: transparent;
  color: var(--color-surface);
  border-color: rgba(255,255,255,.6);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,.15);
  color: var(--color-surface);
  border-color: var(--color-surface);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
  padding-inline: var(--space-3);
}
.btn--ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary-dark);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
}

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn--full { width: 100%; }

/* ── 6. Cards ────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--color-bg-alt);
}

.card__body {
  padding: var(--space-6);
}

.card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── 7. Affiliate Disclosure Banner ──────────────────────── */
.disclosure-banner {
  background: var(--color-disclosure-bg);
  border-bottom: 1px solid var(--color-disclosure-border);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  color: #713f12;
}

.disclosure-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.disclosure-banner__icon {
  flex-shrink: 0;
  font-size: var(--text-lg);
}

/* ── 8. Navigation ───────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  padding-top: 10px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--font-extrabold);
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.nav__logo-mark {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  flex-shrink: 0;
}

.nav__logo-text span {
  color: var(--color-primary);
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .nav__links { display: flex; }
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav__link:hover {
  color: var(--color-text);
  background: var(--color-bg-alt);
}
.nav__link--active {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.nav__cta {
  display: none;
}
@media (min-width: 640px) {
  .nav__cta { display: inline-flex; }
}

.nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
@media (min-width: 768px) {
  .nav__hamburger { display: none; }
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Mobile nav drawer */
.nav__mobile {
  display: none;
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-6);
  z-index: 99;
  flex-direction: column;
  gap: var(--space-2);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile .nav__link {
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
}

/* ── 9. Hero Section ─────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg,
    #0e1f3d 0%,
    #1b3a6b 40%,
    #1e4578 70%,
    #0e1f3d 100%
  );
  color: var(--color-surface);
  padding-block: var(--space-20);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgba(255,255,255,.9);
  margin-bottom: var(--space-6);
}
.hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  background: var(--color-accent-light);
  border-radius: 50%;
}

.hero h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-surface);
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .hero h1 { font-size: var(--text-5xl); }
}
@media (min-width: 1024px) {
  .hero h1 { font-size: var(--text-6xl); }
}

.hero h1 em {
  font-style: normal;
  color: var(--color-accent-light);
}

.hero__lead {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.82);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
  max-width: 52ch;
}
@media (min-width: 768px) {
  .hero__lead { font-size: var(--text-xl); }
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.hero__social-proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.65);
}

.hero__stars {
  color: var(--color-accent-light);
  letter-spacing: -1px;
}

/* Hero visual panel */
.hero__visual {
  position: relative;
}

.hero__book-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__feature-card {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  color: var(--color-surface);
}

.hero__feature-card + .hero__feature-card {
  margin-left: var(--space-8);
}

.hero__feature-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
}

.hero__feature-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-surface);
  margin-bottom: var(--space-2);
}

.hero__feature-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.75);
  line-height: var(--leading-relaxed);
  max-width: none;
}

/* ── 10. Stats Bar ───────────────────────────────────────── */
.stats-bar {
  background: var(--color-primary-dark);
  color: var(--color-surface);
  padding-block: var(--space-8);
}

.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
  text-align: center;
}
@media (min-width: 640px) {
  .stats-bar__grid { grid-template-columns: repeat(4, 1fr); }
}

.stats-bar__number {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--color-accent-light);
  line-height: 1;
  margin-bottom: var(--space-1);
}
@media (min-width: 768px) {
  .stats-bar__number { font-size: var(--text-4xl); }
}

.stats-bar__label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.7);
}

/* ── 11. Product Cards ───────────────────────────────────── */
.product-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.product-card--featured {
  border: 2px solid var(--color-accent);
  position: relative;
}

.product-card__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--color-accent);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.product-card__image-wrap {
  background: var(--color-bg-alt);
  padding: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

/* Placeholder book cover */
.book-cover-placeholder {
  width: 140px;
  height: 180px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  box-shadow: 4px 4px 16px rgba(0,0,0,.25), -2px -2px 0 rgba(255,255,255,.3) inset;
  position: relative;
}
.book-cover-placeholder::after {
  content: '';
  position: absolute;
  left: 8px;
  inset-block: 0;
  width: 4px;
  background: rgba(0,0,0,.15);
  border-radius: 0 2px 2px 0;
}

.product-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card__category {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.product-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.product-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  flex: 1;
  margin-bottom: var(--space-5);
}

.product-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.product-card__stars { color: #f59e0b; }

.product-card__rating-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.product-card__cta {
  margin-top: auto;
}

/* ── 12. Feature List Items ──────────────────────────────── */
.feature-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.feature-item__icon {
  width: 48px;
  height: 48px;
  background: rgba(26,92,56,.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  flex-shrink: 0;
}
.section--dark .feature-item__icon { background: rgba(255,255,255,.1); }

.feature-item__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.feature-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}
.section--dark .feature-item__desc { color: rgba(255,255,255,.65); }

/* ── 13. Testimonials ────────────────────────────────────── */
.testimonial {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
  position: relative;
}

.testimonial__quote-mark {
  font-size: 5rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: .12;
  font-family: var(--font-serif);
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  pointer-events: none;
}

.testimonial__stars {
  color: #f59e0b;
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}

.testimonial__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.testimonial__name {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  margin-bottom: 2px;
}

.testimonial__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── 14. Topic Pills / Tags ──────────────────────────────── */
.tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(26,92,56,.1);
  color: var(--color-primary);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.tag:hover {
  background: rgba(26,92,56,.18);
  color: var(--color-primary-dark);
}

/* ── 15. Email Capture / CTA Block ──────────────────────── */
.cta-block {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
}

.email-form {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.email-form__input {
  flex: 1;
  min-width: 240px;
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}
.email-form__input:focus {
  border-color: var(--color-primary);
  outline: 3px solid rgba(26,92,56,.2);
  outline-offset: 2px;
}
.email-form__input::placeholder { color: var(--color-text-light); }

/* ── 16. Breadcrumb ──────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__sep { color: var(--color-text-light); }

/* ── 17. Footer ──────────────────────────────────────────── */
.footer {
  background: #0e1a2e;
  color: rgba(255,255,255,.75);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.footer__grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-12);
}
@media (min-width: 640px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.footer__brand-name {
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: white;
  margin-bottom: var(--space-3);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.6);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
  max-width: 28ch;
}

.footer__heading {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: var(--space-4);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer__link:hover { color: white; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: rgba(255,255,255,.45);
}

.footer__bottom a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
}
.footer__bottom a:hover { color: white; }

/* ── 18. Topic Cards (for article grid) ─────────────────── */
.topic-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
  color: inherit;
}

.topic-card__icon {
  font-size: 2rem;
  width: 56px;
  height: 56px;
  background: rgba(26,92,56,.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.topic-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

.topic-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.topic-card__arrow {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
  margin-top: auto;
}

/* ── 19. Product Images (replacing placeholders) ─────────── */

/* Hero section — Mega Bundle image */
.hero__product-image-wrap {
  position: relative;
  display: inline-block;
}

.hero__product-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
  /* No lazy loading — above the fold */
}

.hero__product-badge {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* Featured product section — Mega Bundle image */
.featured-product-card {
  background: linear-gradient(135deg, #f0ede6, #faf9f6);
  border: 1px solid var(--color-border);
  border-radius: 1.5rem;
  padding: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px) {
  .featured-product-card {
    grid-template-columns: 1fr 1.2fr;
  }
}

.featured-product-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Product cards — real book cover images */
.product-card__img {
  display: block;
  width: 140px;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 16px rgba(0,0,0,.25);
  /* Spine illusion via left-edge shadow */
  position: relative;
}

/* Mission section — Family Starter Pack image */
.mission-product-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
a:hover .mission-product-img {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}

/* ── 19. Trust Badges / Icons Row ───────────────────────── */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding-block: var(--space-8);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
}

.trust-item__icon {
  font-size: var(--text-xl);
  color: var(--color-primary);
}

/* ── 20. Scroll-to-top & Skip Link ──────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  z-index: 9999;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ── 21. Utilities ───────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.mt-auto { margin-top: auto; }
.mb-4    { margin-bottom: var(--space-4); }
.mb-6    { margin-bottom: var(--space-6); }
.mb-8    { margin-bottom: var(--space-8); }

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-8);
}

.highlight {
  background: linear-gradient(120deg, rgba(212,135,10,.25) 0%, rgba(212,135,10,.08) 100%);
  border-radius: 3px;
  padding: 0 3px;
}

/* ── 22. Responsive helpers ──────────────────────────────── */
.hide-mobile { display: none; }
@media (min-width: 768px) {
  .hide-mobile { display: revert; }
  .hide-desktop { display: none; }
}

/* ── 23. Focus Styles (Accessibility) ───────────────────── */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── 24. Print ───────────────────────────────────────────── */
@media print {
  .nav, .hero__ctas, .email-form, .footer { display: none; }
  body { font-size: 11pt; color: black; }
  a { color: black; text-decoration: underline; }
}

/* ── 25. Review Page — Tuttle Twins Review ───────────────── */

/* Review hero — navy gradient (matches main hero palette) */
.review-hero {
  background: linear-gradient(135deg,
    #0e1f3d 0%,
    #1b3a6b 40%,
    #1e4578 70%,
    #0e1f3d 100%
  );
  color: var(--color-surface);
  padding-block: var(--space-16);
  position: relative;
  overflow: hidden;
}
.review-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.review-hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

.review-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 960px) {
  .review-hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
  }
}

.review-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.review-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgba(255,255,255,.9);
}
.review-hero__rating-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: white;
}

.review-hero h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-surface);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .review-hero h1 { font-size: var(--text-5xl); }
}
.review-hero h1 em {
  font-style: normal;
  color: var(--color-accent-light);
}

.review-hero__lead {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.82);
  line-height: var(--leading-relaxed);
  max-width: 54ch;
  margin-bottom: var(--space-8);
}

.review-hero__social-proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.65);
  margin-top: var(--space-6);
}
.review-hero__stars { color: #f59e0b; letter-spacing: -1px; }

/* Review hero image panel */
.review-hero__image-wrap {
  display: flex;
  justify-content: center;
}
.review-hero__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* ── Star Rating Display ──────────────────────────────────── */
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.star-rating__stars {
  color: #f59e0b;
  font-size: 1.375rem;
  letter-spacing: -1px;
  line-height: 1;
}
.star-rating__score {
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: var(--color-text);
}
.star-rating__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Review Score Box ────────────────────────────────────── */
.review-score-box {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.review-score-box__number {
  font-size: 4rem;
  font-weight: var(--font-extrabold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.review-score-box__stars {
  font-size: 1.75rem;
  color: #f59e0b;
  letter-spacing: -2px;
  margin-bottom: var(--space-3);
}
.review-score-box__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.review-score-box__verdict {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-success);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ── Inline Affiliate Disclosure Note ───────────────────── */
.inline-disclosure {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: var(--space-2);
}
.inline-disclosure a {
  color: var(--color-text-muted);
  font-size: inherit;
}
.inline-disclosure a:hover { color: var(--color-primary); }

/* ── Book Highlight Cards ─────────────────────────────────── */
/* Used in the individual book highlights grid */
.book-highlight {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.book-highlight:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.book-highlight__image-col {
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  flex-shrink: 0;
}
.book-highlight__img {
  display: block;
  width: 88px;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 3px 3px 12px rgba(0,0,0,.22);
}

.book-highlight__body {
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.book-highlight__age {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.book-highlight__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.book-highlight__concept {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.book-highlight__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  flex: 1;
}

/* Bundle card variant — wider image, portrait layout at narrow widths */
.book-highlight--bundle {
  grid-template-columns: 1fr;
}
@media (min-width: 500px) {
  .book-highlight--bundle {
    grid-template-columns: 140px 1fr;
  }
}
.book-highlight--bundle .book-highlight__image-col {
  min-height: 160px;
}
.book-highlight--bundle .book-highlight__img {
  width: 110px;
}

/* ── Pros / Cons Table ───────────────────────────────────── */
.pros-cons {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .pros-cons { grid-template-columns: 1fr 1fr; }
}

.pros-cons__col {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.pros-cons__header {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.pros-cons__header--pros {
  background: #dcfce7;
  color: #15803d;
}
.pros-cons__header--cons {
  background: #fee2e2;
  color: #b91c1c;
}

.pros-cons__list {
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pros-cons__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.pros-cons__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: var(--font-bold);
  margin-top: 1px;
}
.pros-cons__icon--pro {
  background: #dcfce7;
  color: #15803d;
}
.pros-cons__icon--con {
  background: #fee2e2;
  color: #b91c1c;
}

/* ── FAQ Accordion ───────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  list-style: none;
  padding: var(--space-5) var(--space-6);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: background var(--transition-fast);
  color: var(--color-text);
}
.faq-item summary:hover { background: var(--color-bg-alt); }
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: var(--font-normal);
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item[open] summary {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.faq-item__body {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.faq-item__body p + p { margin-top: var(--space-4); }
.faq-item__body a { color: var(--color-primary); }

/* ── Getting Started / Pricing Table ─────────────────────── */
.pricing-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.pricing-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.pricing-card--featured {
  border-color: var(--color-accent);
}

.pricing-card__header {
  background: var(--color-bg-alt);
  padding: var(--space-6);
  text-align: center;
}
.pricing-card--featured .pricing-card__header {
  background: var(--color-primary);
  color: white;
}
.pricing-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.pricing-card--featured .pricing-card__label { color: rgba(255,255,255,.7); }
.pricing-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
}
.pricing-card--featured .pricing-card__title { color: white; }
.pricing-card__best-badge {
  display: inline-block;
  background: var(--color-accent);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
}

.pricing-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.pricing-card__check {
  color: var(--color-success);
  font-weight: var(--font-bold);
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-card__footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* ── Review Page — Article Body Prose ────────────────────── */
/* Used inside .review-prose wrapper for flowing content text */
.review-prose {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.review-prose h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
  line-height: var(--leading-tight);
}
@media (min-width: 768px) {
  .review-prose h2 { font-size: var(--text-4xl); }
}
.review-prose h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}
.review-prose p {
  margin-bottom: var(--space-5);
  max-width: 70ch;
}
.review-prose ul,
.review-prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.review-prose ul { list-style: disc; }
.review-prose ol { list-style: decimal; }
.review-prose li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.review-prose strong { font-weight: var(--font-bold); color: var(--color-text); }
.review-prose em { font-style: italic; }
.review-prose a { color: var(--color-primary); }
.review-prose a.btn { color: inherit; }
.review-prose a.btn--outline-white { color: var(--color-surface); }
.review-prose a.btn--outline:hover { color: var(--color-surface); }
.review-prose a.btn--primary { color: var(--color-surface); }
.review-prose a.btn--accent { color: var(--color-surface); }

/* ── Mid-page CTA Strip ──────────────────────────────────── */
.review-cta-strip {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-10);
  color: white;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  .review-cta-strip { flex-wrap: nowrap; }
}
.review-cta-strip__text h2,
.review-cta-strip__text h3,
.guide-prose .review-cta-strip__text h2,
.guide-prose .review-cta-strip__text h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: white;
  margin-bottom: var(--space-1);
}
.review-cta-strip__text p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.75);
  max-width: 44ch;
}
.review-cta-strip__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
  flex-shrink: 0;
}

/* ── Table of Contents (sticky sidebar on desktop) ───────── */
.review-layout {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1100px) {
  .review-layout {
    grid-template-columns: 1fr 260px;
  }
}

.toc-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
@media (min-width: 1100px) {
  .toc-box {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }
}
.toc-box__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.toc-list a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
  line-height: var(--leading-snug);
}
.toc-list a:hover {
  color: var(--color-primary);
  background: var(--color-bg-alt);
  border-left-color: var(--color-primary);
}

/* ── Final Verdict Box ────────────────────────────────────── */
.verdict-box {
  background: linear-gradient(135deg, #f0ede6, #faf9f6);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.verdict-box__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.verdict-box__stars {
  font-size: 2.5rem;
  color: #f59e0b;
  letter-spacing: -2px;
  margin-bottom: var(--space-4);
  display: block;
}
.verdict-box__summary {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  line-height: var(--leading-relaxed);
}
.verdict-box__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* ── Review page page-hero breadcrumb bar ────────────────── */
.page-header-bar {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

/* ── Responsive adjustments for book-highlight grid ─────── */
.book-highlights-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .book-highlights-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Age Range Indicator Pills ───────────────────────────── */
.age-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(27,58,107,.1);
  color: var(--color-primary);
}

/* ── Who It's For Target Audience Cards ──────────────────── */
.audience-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 500px) {
  .audience-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .audience-grid { grid-template-columns: repeat(4, 1fr); }
}

.audience-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.audience-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.audience-card__icon {
  font-size: 2.25rem;
  margin-bottom: var(--space-3);
}
.audience-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}
.audience-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── 26. Topic Pages (economics, freedom, entrepreneurship, etc.) ── */

/* Topic hero — navy gradient, same palette as .hero / .review-hero */
.topic-hero {
  background: linear-gradient(135deg,
    #0e1f3d 0%,
    #1b3a6b 40%,
    #1e4578 70%,
    #0e1f3d 100%
  );
  color: var(--color-surface);
  padding-block: var(--space-16);
  position: relative;
  overflow: hidden;
}
.topic-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/G%3E%3C/svg%3E");
  pointer-events: none;
}
.topic-hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

.topic-hero__inner {
  position: relative;
  z-index: 1;
}

.topic-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgba(255,255,255,.9);
  margin-bottom: var(--space-5);
}
.topic-hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  background: var(--color-accent-light);
  border-radius: 50%;
  flex-shrink: 0;
}

.topic-hero h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-surface);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  max-width: 20ch;
}
@media (min-width: 768px) {
  .topic-hero h1 { font-size: var(--text-5xl); }
}
.topic-hero h1 em {
  font-style: normal;
  color: var(--color-accent-light);
}

.topic-hero__lead {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.82);
  line-height: var(--leading-relaxed);
  max-width: 58ch;
  margin-bottom: var(--space-8);
}

.topic-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Concept cards — key concepts grid */
.concept-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 540px) {
  .concept-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .concept-grid { grid-template-columns: repeat(3, 1fr); }
}

.concept-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.concept-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.concept-card__icon {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  background: rgba(27,58,107,.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.concept-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
}
.concept-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Age-band teaching tips */
.age-band-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .age-band-grid { grid-template-columns: repeat(3, 1fr); }
}

.age-band-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.age-band-card__header {
  background: var(--color-primary);
  color: white;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.age-band-card--red .age-band-card__header  { background: var(--color-accent); }
.age-band-card--dark .age-band-card__header { background: var(--color-primary-dark); }

.age-band-card__age {
  font-size: var(--text-sm);
  font-weight: var(--font-extrabold);
  letter-spacing: 0.04em;
}
.age-band-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  opacity: .8;
}
.age-band-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.age-band-card__tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.age-band-card__tip-dot {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.age-band-card--red  .age-band-card__tip-dot { background: var(--color-accent); }
.age-band-card--dark .age-band-card__tip-dot { background: var(--color-primary-dark); }

/* Topic page — featured book pair (2-col card) */
.topic-book-pair {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .topic-book-pair { grid-template-columns: 1fr 1fr; }
}

/* Topic page — big CTA strip at bottom */
.topic-cta-strip {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  text-align: center;
  color: white;
  box-shadow: var(--shadow-xl);
}
.topic-cta-strip h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  color: white;
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) {
  .topic-cta-strip h2 { font-size: var(--text-4xl); }
}
.topic-cta-strip p {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.8);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.topic-cta-strip__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* Topic page — related topics nav row */
.related-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.related-topics__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Topic page prose body */
.topic-prose {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  max-width: 72ch;
}
.topic-prose p { margin-bottom: var(--space-5); }
.topic-prose h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
  color: var(--color-text);
}
@media (min-width: 768px) {
  .topic-prose h2 { font-size: var(--text-4xl); }
}
.topic-prose h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.topic-prose ul,
.topic-prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.topic-prose ul  { list-style: disc; }
.topic-prose ol  { list-style: decimal; }
.topic-prose li  {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.topic-prose strong { font-weight: var(--font-bold); }
.topic-prose a      { color: var(--color-primary); }

/* ── 27. Subpage Hero (books/index, guides/index, resources) ─ */
.subpage-hero {
  background: linear-gradient(135deg,
    #0e1f3d 0%,
    #1b3a6b 40%,
    #1e4578 70%,
    #0e1f3d 100%
  );
  color: var(--color-surface);
  padding-block: var(--space-16);
  position: relative;
  overflow: hidden;
}
.subpage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.subpage-hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}
.subpage-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}
.subpage-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgba(255,255,255,.9);
  margin-bottom: var(--space-5);
}
.subpage-hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  background: var(--color-accent-light);
  border-radius: 50%;
}
.subpage-hero h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-surface);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .subpage-hero h1 { font-size: var(--text-5xl); }
}
.subpage-hero h1 em {
  font-style: normal;
  color: var(--color-accent-light);
}
.subpage-hero__lead {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.82);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
  max-width: 58ch;
  margin-inline: auto;
}

/* ── 28. Featured Review Card (books/index.html) ──────────── */
.featured-review-card {
  background: linear-gradient(135deg, #f0ede6, #faf9f6);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-12);
}
@media (min-width: 768px) {
  .featured-review-card {
    grid-template-columns: 280px 1fr;
    padding: var(--space-10);
    gap: var(--space-10);
  }
}
.featured-review-card__badge {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  background: var(--color-accent);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}
.featured-review-card__image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.featured-review-card__img {
  display: block;
  max-width: 260px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.featured-review-card__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(27,58,107,.1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.featured-review-card__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
  .featured-review-card__title { font-size: var(--text-4xl); }
}
.featured-review-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.featured-review-card__stars { color: #f59e0b; }
.featured-review-card__desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  max-width: 60ch;
}
.featured-review-card__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ══════════════════════════════════════════════════════════
   29. About Page (about.html)
══════════════════════════════════════════════════════════ */

/* About hero — navy gradient matching homepage hero palette */
.about-hero {
  background: linear-gradient(135deg,
    #0e1f3d 0%,
    #1b3a6b 40%,
    #1e4578 70%,
    #0e1f3d 100%
  );
  color: var(--color-surface);
  padding-block: var(--space-16);
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.about-hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

.about-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 960px) {
  .about-hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
  }
}

.about-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgba(255,255,255,.9);
  margin-bottom: var(--space-5);
}

.about-hero h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-surface);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .about-hero h1 { font-size: var(--text-5xl); }
}
.about-hero h1 em {
  font-style: normal;
  color: var(--color-accent-light);
}

.about-hero__lead {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.82);
  line-height: var(--leading-relaxed);
  max-width: 54ch;
}

.about-hero__image-col {
  display: flex;
  justify-content: center;
}
.about-hero__img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  object-fit: cover;
}

/* About page — two-column content + sidebar layout */
.about-content-layout {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1060px) {
  .about-content-layout {
    grid-template-columns: 1fr 320px;
  }
}

/* About prose — flowing article body */
.about-prose {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.about-prose h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
  line-height: var(--leading-tight);
  color: var(--color-text);
}
.about-prose h2:first-child { margin-top: 0; }
@media (min-width: 768px) {
  .about-prose h2 { font-size: var(--text-4xl); }
}
.about-prose p {
  margin-bottom: var(--space-5);
  max-width: 70ch;
}
.about-prose a { color: var(--color-primary); }

/* Pull quote inside about prose */
.about-pullquote {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-6) var(--space-8);
  margin: var(--space-8) 0;
  box-shadow: var(--shadow-sm);
}
.about-pullquote p {
  font-size: var(--text-xl);
  font-family: var(--font-serif);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin: 0;
  max-width: none;
}

/* About sidebar — values card */
.about-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1060px) {
  .about-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }
}

.about-values-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.about-values-card__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.about-value-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.about-value-item__icon {
  font-size: var(--text-lg);
  flex-shrink: 0;
  margin-top: 2px;
}
.about-value-item__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-1);
  color: var(--color-text);
}
.about-value-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}
.about-value-item__desc a { color: var(--color-primary); font-size: inherit; }

/* About sidebar — CTA box */
.about-cta-box {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  color: white;
  text-align: center;
}
.about-cta-box__heading {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: white;
  margin-bottom: var(--space-3);
}
.about-cta-box__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.8);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
  max-width: none;
}

/* About sidebar — quick links box */
.about-links-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.about-links-box__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.about-quick-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.about-quick-links li { list-style: none; }
.about-quick-links a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
}
.about-quick-links a:hover {
  color: var(--color-primary);
  background: var(--color-bg-alt);
  border-left-color: var(--color-primary);
}

/* About beliefs grid — "What We Believe" section */
.about-belief-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.about-belief-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.about-belief-card__icon {
  font-size: 2rem;
  width: 52px;
  height: 52px;
  background: rgba(27,58,107,.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-belief-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
}
.about-belief-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ══════════════════════════════════════════════════════════
   30. Simple Inner Page Hero (contact, privacy, disclosure)
══════════════════════════════════════════════════════════ */

/* Lightweight hero for inner pages with no full-bleed image */
.simple-page-hero {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-12);
}
.simple-page-hero__inner {
  max-width: 720px;
}
.simple-page-hero .section-label {
  display: inline-block;
  margin-bottom: var(--space-3);
}
.simple-page-hero h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  color: var(--color-text);
}
@media (min-width: 768px) {
  .simple-page-hero h1 { font-size: var(--text-5xl); }
}
.simple-page-hero__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 62ch;
}
.simple-page-hero__lead a { color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════
   31. Contact Page (contact.html)
══════════════════════════════════════════════════════════ */

/* Two-column layout: form + info sidebar */
.contact-layout {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: 1fr 340px;
  }
}

/* Contact form heading */
.contact-form-heading {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  margin-bottom: var(--space-3);
}
@media (min-width: 768px) {
  .contact-form-heading { font-size: var(--text-4xl); }
}

/* Contact form fields */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.contact-form__required {
  color: var(--color-accent);
  margin-left: 2px;
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: var(--color-primary);
  outline: 3px solid rgba(27,58,107,.15);
  outline-offset: 2px;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: var(--color-text-light); }

.contact-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b6560' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
  cursor: pointer;
}
.contact-form__select option[value=""][disabled] { color: var(--color-text-light); }

.contact-form__textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--leading-relaxed);
}

.contact-form__submit {
  align-self: flex-start;
}

/* Contact info sidebar cards */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 960px) {
  .contact-info {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }
}

.contact-info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
}
.contact-info-card__icon {
  font-size: 1.75rem;
  margin-bottom: var(--space-3);
}
.contact-info-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.contact-info-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: none;
}
.contact-info-card__desc a { color: var(--color-primary); font-size: inherit; }

/* Helpful links inside contact sidebar */
.contact-helpful-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.contact-helpful-links li { list-style: none; }
.contact-helpful-links a {
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.contact-helpful-links a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   32. Privacy Policy Page (privacy.html)
══════════════════════════════════════════════════════════ */

/* Last-updated badge */
.privacy-last-updated {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-border);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  margin-top: var(--space-5);
}

/* Two-column layout: policy text + sticky nav */
.policy-layout {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1060px) {
  .policy-layout {
    grid-template-columns: 1fr 260px;
  }
}

/* Policy prose — flowing legal / article text */
.policy-prose {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  max-width: 72ch;
}
.policy-prose h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
  color: var(--color-text);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.policy-prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.policy-prose h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.policy-prose p {
  margin-bottom: var(--space-4);
  max-width: 70ch;
}
.policy-prose ul {
  padding-left: var(--space-6);
  list-style: disc;
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.policy-prose li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.policy-prose strong { font-weight: var(--font-bold); color: var(--color-text); }
.policy-prose a { color: var(--color-primary); }
.policy-prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-text);
}

/* Policy sidebar */
.policy-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1060px) {
  .policy-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }
}

/* Related pages list inside policy sidebar */
.policy-related-links {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.policy-related-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition-fast);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}
.policy-related-link:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}
.policy-related-link__desc {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--color-text-muted);
  display: block;
}

/* ── 29. Coming-Soon Book Cards (books/index.html) ────────── */
.coming-soon-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.coming-soon-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.coming-soon-card__image-wrap {
  background: var(--color-bg-alt);
  padding: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  position: relative;
}
.coming-soon-card__placeholder {
  width: 100px;
  height: 140px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  box-shadow: 4px 4px 16px rgba(0,0,0,.2);
  position: relative;
  overflow: hidden;
}
.coming-soon-card__placeholder::after {
  content: '';
  position: absolute;
  left: 0;
  inset-block: 0;
  width: 6px;
  background: rgba(0,0,0,.15);
}
.coming-soon-card__pill {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  font-size: 0.625rem;
  font-weight: var(--font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.coming-soon-card__body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.coming-soon-card__category {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.coming-soon-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.coming-soon-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  flex: 1;
  margin-bottom: var(--space-5);
}
.coming-soon-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: auto;
}
.coming-soon-card__age {
  font-weight: var(--font-medium);
}
.coming-soon-card__status {
  font-style: italic;
  color: var(--color-text-light);
}

/* ── 30. Guide Cards (guides/index.html) ──────────────────── */
.guide-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.guide-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary);
  color: inherit;
}
.guide-card__icon-wrap {
  width: 60px;
  height: 60px;
  background: rgba(27,58,107,.08);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}
.guide-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.guide-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.guide-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  flex: 1;
}
.guide-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.guide-card__read-time {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}
.guide-card__arrow {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
}

/* ── 31. Resource Page (resources.html) ───────────────────── */
.resource-section {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}
.resource-section:last-of-type { border-bottom: none; }

.resource-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.resource-section__icon {
  width: 52px;
  height: 52px;
  background: rgba(27,58,107,.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.625rem;
  flex-shrink: 0;
}
.resource-section__heading {
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
}
.resource-section__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Resource items list */
.resource-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Resource item row */
.resource-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@media (min-width: 640px) {
  .resource-item {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}
.resource-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.resource-item--featured {
  border: 2px solid var(--color-primary);
  background: linear-gradient(135deg, rgba(27,58,107,.04), var(--color-surface));
}
.resource-item__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.resource-item__icon {
  font-size: 1.75rem;
  width: 48px;
  height: 48px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.resource-item--featured .resource-item__icon {
  background: rgba(27,58,107,.1);
}
.resource-item__body { flex: 1; }
.resource-item__name {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
  line-height: var(--leading-snug);
}
.resource-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-2);
}
.resource-item__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(27,58,107,.1);
  color: var(--color-primary);
}
.resource-item__tag--free {
  background: #dcfce7;
  color: #15803d;
}
.resource-item__tag--featured {
  background: var(--color-accent);
  color: white;
}
.resource-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 72ch;
}
.resource-item__action {
  flex-shrink: 0;
  margin-top: var(--space-3);
}
@media (min-width: 640px) {
  .resource-item__action { margin-top: 0; }
}

/* Resource spotlight — Tuttle Twins banner */
.resource-spotlight {
  background: linear-gradient(135deg, #0e1f3d, #1b3a6b);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  color: white;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  box-shadow: var(--shadow-xl);
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .resource-spotlight {
    grid-template-columns: 1fr 220px;
    gap: var(--space-10);
  }
}
.resource-spotlight__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: var(--space-3);
}
.resource-spotlight h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  color: white;
  margin-bottom: var(--space-3);
}
.resource-spotlight p {
  font-size: var(--text-base);
  color: rgba(255,255,255,.8);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}
.resource-spotlight__image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.resource-spotlight__img {
  display: block;
  max-width: 200px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.resource-spotlight__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ══════════════════════════════════════════════════════════
   34. Guide Article Pages (teach-economics-to-kids.html,
       family-book-club.html, tuttle-twins-homeschool.html)
══════════════════════════════════════════════════════════ */

/* ── Guide Article Hero — navy gradient, two-column at desktop ── */
.guide-article-hero {
  background: linear-gradient(135deg,
    #0e1f3d 0%,
    #1b3a6b 45%,
    #1e4578 75%,
    #0e1f3d 100%
  );
  color: var(--color-surface);
  padding-block: var(--space-16);
  position: relative;
  overflow: hidden;
}
.guide-article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.guide-article-hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

.guide-article-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
@media (min-width: 900px) {
  .guide-article-hero__inner {
    grid-template-columns: 1fr 420px;
    gap: var(--space-16);
  }
}

/* Copy column */
.guide-article-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.guide-article-hero__label {
  display: inline-block;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.guide-article-hero__read-time {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.6);
}

.guide-article-hero h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-surface);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .guide-article-hero h1 { font-size: var(--text-5xl); }
}
.guide-article-hero h1 em {
  font-style: normal;
  color: var(--color-accent-light);
}

.guide-article-hero__lead {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.82);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
  max-width: 58ch;
}

/* Image column */
.guide-article-hero__image-col {
  display: flex;
  justify-content: center;
  align-items: center;
}
.guide-article-hero__img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  object-fit: contain;
}

/* ── Guide Article Layout — prose + sidebar ──────────────── */
.guide-article-layout {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1100px) {
  .guide-article-layout {
    grid-template-columns: 1fr 280px;
  }
}

/* ── Guide Prose — body text ─────────────────────────────── */
.guide-prose {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.guide-prose h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
  line-height: var(--leading-tight);
  color: var(--color-text);
}
.guide-prose h2:first-child { margin-top: 0; }
@media (min-width: 768px) {
  .guide-prose h2 { font-size: var(--text-4xl); }
}
.guide-prose h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
.guide-prose p {
  margin-bottom: var(--space-5);
  max-width: 70ch;
}
.guide-prose ul,
.guide-prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.guide-prose ul { list-style: disc; }
.guide-prose ol { list-style: decimal; }
.guide-prose li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.guide-prose strong { font-weight: var(--font-bold); color: var(--color-text); }
.guide-prose em { font-style: italic; }
.guide-prose a { color: var(--color-primary); }
.guide-prose a.btn { color: inherit; }
.guide-prose a.btn--outline-white { color: var(--color-surface); }
.guide-prose a.btn--outline:hover { color: var(--color-surface); }
.guide-prose a.btn--primary { color: var(--color-surface); }
.guide-prose a.btn--accent { color: var(--color-surface); }

/* ── Sidebar (sticky on desktop) ────────────────────────── */
.guide-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1100px) {
  .guide-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }
}

/* ── Key Takeaway Box ────────────────────────────────────── */
.guide-key-takeaway {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: rgba(27,58,107,.06);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.guide-key-takeaway__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.guide-key-takeaway strong { font-weight: var(--font-bold); }

/* ── Activity / Tip Box ──────────────────────────────────── */
.guide-activity-box {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-8) 0;
  box-shadow: var(--shadow-md);
}
.guide-activity-box__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.guide-activity-box__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}
.guide-activity-box p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  max-width: 68ch;
}
.guide-activity-box p:last-child { margin-bottom: 0; }
.guide-activity-box ul,
.guide-activity-box ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--color-text);
}
.guide-activity-box ul { list-style: disc; }
.guide-activity-box ol { list-style: decimal; }
.guide-activity-box li { line-height: var(--leading-relaxed); }
.guide-activity-box strong { font-weight: var(--font-bold); }

/* ── Numbered Concept Grid ───────────────────────────────── */
.guide-concept-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin: var(--space-6) 0;
}
@media (min-width: 640px) {
  .guide-concept-grid { grid-template-columns: 1fr 1fr; }
}

.guide-concept-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.guide-concept-item__number {
  width: 36px;
  height: 36px;
  background: rgba(27,58,107,.1);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: var(--font-extrabold);
  flex-shrink: 0;
}
.guide-concept-item strong {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.guide-concept-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: none;
}

/* ── Book Recommendation Card ────────────────────────────── */
.guide-book-rec {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  background: linear-gradient(135deg, #f0ede6, #faf9f6);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin: var(--space-8) 0;
  box-shadow: var(--shadow-md);
  align-items: start;
}
@media (min-width: 560px) {
  .guide-book-rec {
    grid-template-columns: 160px 1fr;
    gap: var(--space-8);
  }
}
.guide-book-rec__img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  object-fit: contain;
  margin-inline: auto;
}
.guide-book-rec__label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.guide-book-rec__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}
.guide-book-rec__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
  max-width: 62ch;
}

/* ── Grade-Level Table (homeschool guide) ────────────────── */
.guide-grade-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin: var(--space-6) 0;
}
.guide-grade-row {
  display: grid;
  grid-template-columns: 140px 1fr 2fr;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.guide-grade-row:last-child { border-bottom: none; }
.guide-grade-row > div {
  padding: var(--space-4) var(--space-5);
  line-height: var(--leading-relaxed);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.guide-grade-row > div:last-child { border-right: none; }

/* Header row */
.guide-grade-row--header {
  background: var(--color-primary);
  color: white;
}
.guide-grade-row--header > div {
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-right-color: rgba(255,255,255,.15);
}

/* Alternating body rows */
.guide-grade-row:not(.guide-grade-row--header):nth-child(odd) > div {
  background: var(--color-surface);
}
.guide-grade-row:not(.guide-grade-row--header):nth-child(even) > div {
  background: var(--color-bg-alt);
}
.guide-grade-row > div:first-child {
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

/* Responsive: collapse to stacked cards on mobile */
@media (max-width: 640px) {
  .guide-grade-table { border-radius: var(--radius-lg); }
  .guide-grade-row--header { display: none; }
  .guide-grade-row {
    grid-template-columns: 1fr;
    padding: var(--space-5) var(--space-5) 0;
    border-bottom: 2px solid var(--color-primary);
  }
  .guide-grade-row > div {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
    background: transparent !important;
  }
  .guide-grade-row > div:last-child { border-bottom: none; padding-bottom: var(--space-4); }
}

/* ── 33. Open Library Book Cover Images ───────────────────── */
/* Used on index.html (Amazon cards), books/index.html (coming-soon cards),
   and resources.html (resource-item rows) */

/* Replaces the emoji gradient div inside .card__image on index.html */
.card__image--book-cover {
  background: #f5f3ef;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.card__image--book-cover img {
  max-height: 180px;
  width: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transition: transform var(--transition-base);
}
.card:hover .card__image--book-cover img {
  transform: scale(1.03);
}

/* Replaces the emoji inside .coming-soon-card__placeholder on books/index.html */
.coming-soon-card__cover-img {
  width: 100px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 16px rgba(0,0,0,.2);
  display: block;
  position: relative;
}

/* Small cover thumbnail used inside .resource-item__icon on resources.html */
.resource-item__icon--cover {
  width: 48px;
  height: 68px;
  background: transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.resource-item__icon--cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: 2px 2px 6px rgba(0,0,0,.15);
}

/* ══════════════════════════════════════════════════════════
   35. Guide Detail Pages — Discussion Questions,
       Reading Lists, Critical Thinking Through Stories
══════════════════════════════════════════════════════════ */

/* ── Sidebar book recommendation card ────────────────── */
.guide-sidebar-book {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.guide-sidebar-book .inline-disclosure {
  padding: var(--space-3) var(--space-5);
  padding-bottom: 0;
  display: block;
}
.guide-sidebar-book__img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: var(--color-bg-alt);
  padding: var(--space-5);
}
.guide-sidebar-book__body {
  padding: var(--space-5);
}
.guide-sidebar-book__label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.guide-sidebar-book__title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}
.guide-sidebar-book__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  max-width: none;
}

/* ── Tip / info callout box ───────────────────────────── */
.guide-tip-box {
  background: rgba(27,58,107,.06);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block: var(--space-8);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}
.guide-tip-box__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Theme section header ─────────────────────────────── */
.guide-theme-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.guide-theme-icon {
  font-size: 2rem;
  width: 64px;
  height: 64px;
  background: rgba(27,58,107,.08);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.guide-theme-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.guide-theme-header h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  margin-bottom: var(--space-3);
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
  color: var(--color-text);
}
@media (min-width: 768px) {
  .guide-theme-header h2 { font-size: var(--text-4xl); }
}
.guide-theme-header > div > p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 70ch;
  margin: 0;
}

/* ── Questions grid: main list + book pairing sidebar ─── */
.guide-questions-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .guide-questions-grid {
    grid-template-columns: 1fr 320px;
    align-items: start;
  }
}
.guide-questions-block h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-5);
  color: var(--color-text);
}

/* ── Numbered question list with follow-up prompts ────── */
.guide-question-list {
  list-style: decimal;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.guide-question-list li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.guide-followup {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
}

/* ── Book pairing sidebar column ──────────────────────── */
.guide-book-pairing {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) {
  .guide-book-pairing {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
  }
}
.guide-book-pairing h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-5);
  color: var(--color-text);
}
.guide-pairing-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.guide-pairing-item {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.guide-pairing-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.guide-pairing-item__age {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.guide-pairing-item__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
  color: var(--color-text);
  line-height: var(--leading-snug);
}
.guide-pairing-item__why {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
  max-width: none;
}

/* ── Reading list age-band header ─────────────────────── */
.reading-list-header {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: center;
  margin-bottom: var(--space-8);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-xl);
  color: white;
}
@media (min-width: 640px) {
  .reading-list-header {
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
  }
}
.reading-list-header--blue { background: linear-gradient(135deg, #122850, #1b3a6b); }
.reading-list-header--red  { background: linear-gradient(135deg, #a33125, #c0392b); }
.reading-list-header--dark { background: linear-gradient(135deg, #0e1f3d, #122850); }
.reading-list-header__age {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .reading-list-header__age { font-size: var(--text-5xl); }
}
.reading-list-header h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: white;
  margin-bottom: var(--space-2);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}
.reading-list-header p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.8);
  line-height: var(--leading-relaxed);
  max-width: 66ch;
  margin: 0;
}

/* ── Reading list item grid ───────────────────────────── */
.reading-list-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-8);
}
@media (min-width: 700px) {
  .reading-list-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Individual reading list item card ────────────────── */
.reading-list-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.reading-list-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.reading-list-item--featured {
  border: 2px solid var(--color-primary);
  background: linear-gradient(135deg, rgba(27,58,107,.04), var(--color-surface));
}
.reading-list-item__cover-wrap {
  flex-shrink: 0;
  width: 90px;
}
.reading-list-item__cover {
  display: block;
  width: 90px;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 4px 4px 12px rgba(0,0,0,.15);
  object-fit: cover;
}
.reading-list-item__cover--ol {
  background: #f5f3ef;
  object-fit: contain;
  padding: 2px;
}
.reading-list-item__body { flex: 1; min-width: 0; }
.reading-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}
.reading-list-item__source {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}
.reading-list-item__source--tt {
  background: rgba(27,58,107,.1);
  color: var(--color-primary);
}
.reading-list-item__source--pick {
  background: var(--color-accent);
  color: white;
}
.reading-list-item__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
  color: var(--color-text);
}
.reading-list-item__why {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  max-width: none;
}

/* ── Age-band tip box below each reading list section ─── */
.reading-list-tip {
  background: rgba(27,58,107,.06);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  max-width: 72ch;
}

/* ── Dialogue box (Socratic exchange example) ─────────── */
.guide-dialogue-box {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-block: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.guide-dialogue-line {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.guide-dialogue-line strong {
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

/* ── Book example blocks (critical thinking page) ─────── */
.guide-example-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}
.guide-example-header { margin-bottom: var(--space-3); }
.guide-example-book {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  background: rgba(27,58,107,.08);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.guide-example-block p {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
  max-width: none;
}
.guide-example-block p:last-child { margin-bottom: 0; }

/* ── Logical fallacies 2×2 grid ───────────────────────── */
.guide-fallacy-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-block: var(--space-6);
}
@media (min-width: 640px) {
  .guide-fallacy-grid { grid-template-columns: 1fr 1fr; }
}
.guide-fallacy-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.guide-fallacy-card__name {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.guide-fallacy-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
  max-width: none;
}
.guide-fallacy-card__question {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  font-style: italic;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

/* ── Activity list with large numbers ────────────────── */
.guide-activity-list {
  display: flex;
  flex-direction: column;
  margin-block: var(--space-6);
}
.guide-activity {
  display: flex;
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}
.guide-activity:first-child { padding-top: 0; }
.guide-activity:last-child  { border-bottom: none; }
.guide-activity__number {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  color: var(--color-primary);
  opacity: .15;
  line-height: 1;
  flex-shrink: 0;
  width: 2.5rem;
  text-align: right;
}
.guide-activity__body { flex: 1; }
.guide-activity__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.guide-activity__desc {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  max-width: 66ch;
}
.guide-activity__works-with {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  line-height: var(--leading-relaxed);
}

/* ── Product callout card (horizontal, image + body) ──── */
.guide-product-callout {
  background: linear-gradient(135deg, #f0ede6, #faf9f6);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-block: var(--space-8);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) {
  .guide-product-callout {
    flex-direction: row;
    align-items: flex-start;
  }
}
.guide-product-callout__img-wrap {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.guide-product-callout__img {
  display: block;
  width: 140px;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
  object-fit: contain;
}
.guide-product-callout__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.guide-product-callout__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  margin-bottom: var(--space-3);
  line-height: var(--leading-tight);
  color: var(--color-text);
}
.guide-product-callout__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
  margin-bottom: 0;
}