/* ============================================================
   Seniors Aging Forward — Hearth Theme
   Warm, senior-first design system
   Original styles preserved as styles.original.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  /* Surfaces */
  --cream:        #fbf6ee;   /* page */
  --linen:        #f3eadb;   /* section break / soft surface */
  --paper:        #ffffff;   /* cards on cream */
  --honey-soft:   #f1e3c4;
  --peach-soft:   #f8d9c8;
  --mint-soft:    #d9e3d6;

  /* Ink */
  --cocoa:        #2a2622;   /* primary text & dark surface */
  --cocoa-deep:   #1f1c19;   /* deepest surface (footer / dark sections) */
  --ink-2:        #4d453d;   /* body text */
  --ink-mute:     #665b55;   /* secondary text — #665b55 gives 5.5:1 on linen, 6.6:1 on white (WCAG AA+) */

  /* Brand */
  --terracotta:   #b65a3c;   /* primary action */
  --terracotta-d: #8a3f26;
  --sage:         #5e7d63;   /* reassurance / success */
  --sage-d:       #46604a;
  --honey:        #b5862a;   /* highlights */

  /* Lines */
  --line:         #e3d8c4;
  --line-soft:    #ece2cf;

  /* Legacy names (kept so existing class chains still resolve) */
  --navy:         var(--cocoa);
  --navy-dark:    var(--cocoa-deep);
  --blue-mid:     var(--terracotta-d);
  --blue-bright:  var(--terracotta);
  --blue-light:   var(--peach-soft);
  --blue-pale:    var(--linen);
  --accent:       var(--sage);
  --accent-light: var(--mint-soft);
  --white:        var(--paper);
  --off-white:    var(--linen);
  --text-dark:    var(--cocoa);
  --text-mid:     var(--ink-2);
  --text-muted:   var(--ink-mute);
  --border:       var(--line);

  /* Type */
  --serif:  'Newsreader', Georgia, serif;
  --sans:   'Nunito', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--cocoa);
  background: var(--cream);
  font-size: 20px;            /* SENIOR BASELINE — never below 20px */
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Strong global focus state — visible to anyone, anywhere */
*:focus-visible {
  outline: 4px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — hidden off-screen until keyboard focus, then revealed in Hearth palette */
.skip-to-main {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  background: var(--cocoa);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 22px;
  border-radius: 0 0 14px 0;
  text-decoration: none;
}

.skip-to-main:focus,
.skip-to-main:focus-visible {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  outline: 4px solid var(--terracotta);
  outline-offset: 2px;
}

/* ── NAV ─────────────────────────────────────────────────── */
nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0 3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  font-family: var(--serif);
  color: var(--cocoa);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-logo .nav-geo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1em;
  color: var(--terracotta);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 8px;
}

.nav-logo .nav-geo::before {
  content: "|";
  padding-right: 8px;
  opacity: 0.35;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}

.nav-links li {
  white-space: nowrap;
}

.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 600;
  padding: 8px 0;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--terracotta-d);
  border-bottom-color: var(--terracotta);
}

.nav-cta {
  background: var(--terracotta);
  color: var(--paper) !important;
  padding: 10px 18px !important;
  border-radius: 999px;
  font-weight: 700 !important;
  font-size: 0.93rem !important;
  border-bottom: none !important;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--terracotta-d) !important;
  border-bottom-color: transparent !important;
  color: var(--paper) !important;
}

/* ── LANGUAGE SWITCHER ───────────────────────────────────── */
.lang-switch-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 1.4rem;
  border-left: 1px solid var(--line);
  line-height: 1;
  list-style: none;
}

.lang-switch-item a,
.lang-switch-item .lang-active {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-decoration: none;
  border-bottom: none !important;
  padding: 0 !important;
  line-height: 1;
}

.lang-switch-item a {
  color: var(--text-muted);
  transition: color 0.15s;
}

.lang-switch-item a:hover {
  color: var(--terracotta-d);
  border-bottom: none !important;
}

.lang-switch-item .lang-active {
  color: var(--cocoa);
  cursor: default;
}

.lang-switch-item .lang-sep {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 0.8rem;
  line-height: 1;
}

/* In open mobile nav panel */
.nav-links.nav-open .lang-switch-item {
  border-left: none;
  border-top: 1px solid var(--line-soft);
  padding: 18px 5%;
  justify-content: center;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary {
  background: var(--terracotta);
  color: var(--paper);
  padding: 16px 30px;
  min-height: 56px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  transition: background 0.15s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  line-height: 1.2;
}

.btn-primary:hover { background: var(--terracotta-d); transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  color: var(--paper);
  padding: 16px 30px;
  min-height: 56px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  transition: border-color 0.15s, background 0.15s;
}

.btn-secondary:hover { border-color: var(--paper); background: rgba(255,255,255,0.1); }

.btn-accent {
  background: var(--sage);
  color: var(--paper);
  padding: 16px 30px;
  min-height: 56px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  transition: background 0.15s, transform 0.15s;
}

.btn-accent:hover { background: var(--sage-d); transform: translateY(-1px); }

.btn-outline-dark {
  background: transparent;
  color: var(--cocoa);
  padding: 14px 28px;
  min-height: 54px;
  border-radius: 999px;
  border: 2px solid var(--cocoa);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  transition: background 0.15s, color 0.15s;
}

.btn-outline-dark:hover { background: var(--cocoa); color: var(--paper); }

.btn-lg { padding: 18px 36px; font-size: 1.1rem; min-height: 60px; }
.btn-full { width: 100%; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.section-inner { max-width: 1180px; margin: 0 auto; }
section { padding: 96px 5%; }
.section-sm { padding: 56px 5%; }

.section-label {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--cocoa);
  line-height: 1.15;
  margin-bottom: 18px;
  letter-spacing: -0.015em;
}

.section-sub {
  font-size: 1.2rem;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 640px;
  line-height: 1.65;
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  background: var(--linen);
  padding: 96px 5% 96px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: var(--peach-soft);
  opacity: 0.6;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -100px; left: 5%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--honey-soft);
  opacity: 0.55;
}

.hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--terracotta-d);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
  white-space: nowrap;
}

.hero h1 {
  font-family: var(--serif);
  font-size: 3.6rem;
  font-weight: 600;
  color: var(--cocoa);
  line-height: 1.08;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.hero p {
  color: var(--ink-2);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 36px;
  line-height: 1.65;
  max-width: 38ch;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 26px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  box-shadow: 0 6px 24px rgba(42, 38, 34, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
}

.hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(42, 38, 34, 0.1);
}

.hero-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--peach-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--terracotta-d);
}

.hero-card h3 {
  font-family: var(--serif);
  color: var(--cocoa);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.hero-card p {
  color: var(--ink-mute);
  font-size: 0.98rem;
  margin: 0;
  line-height: 1.55;
  font-weight: 400;
}

/* Featured hero tile (free calculator) - stands out from the white cards */
.hero-card-feature {
  border: 2px solid var(--terracotta);
  background: linear-gradient(135deg, var(--peach-soft) 0%, var(--paper) 65%);
  box-shadow: 0 10px 30px rgba(176, 90, 60, 0.18);
}
.hero-card-feature:hover {
  box-shadow: 0 16px 40px rgba(176, 90, 60, 0.24);
}
.hero-card-feature .hero-card-icon {
  background: var(--terracotta);
  color: #fff;
}
.hero-card-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--terracotta);
  border-radius: 20px;
  padding: 3px 11px;
  margin-bottom: 8px;
}

/* ── PAGE HERO (inner pages) ─────────────────────────────── */
.page-hero {
  background: var(--linen);
  padding: 72px 5%;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--peach-soft);
  opacity: 0.5;
}

.page-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.page-hero .section-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: none;
}
.page-hero .section-label a { color: var(--text-muted); text-decoration: none; }
.page-hero .section-label a:hover { color: var(--text-mid); text-decoration: none; }

.page-hero h1 {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--cocoa);
  line-height: 1.15;
  margin: 12px 0 18px;
  letter-spacing: -0.015em;
}

.page-hero h1 em { font-style: italic; font-weight: 500; color: var(--terracotta); }

.page-hero p {
  color: var(--ink-2);
  font-size: 1.2rem;
  font-weight: 400;
  max-width: 640px;
  line-height: 1.65;
}

/* ── TRUST BAR ───────────────────────────────────────────── */
.trust-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 24px 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: var(--ink-2);
  font-weight: 500;
}

.trust-item strong { color: var(--terracotta-d); font-weight: 700; }

/* ── FREE DOWNLOAD CARDS ─────────────────────────────────── */
.downloads-section {
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.downloads-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 24px;
}

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.download-card {
  background: var(--linen);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.download-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(42,38,34,0.1);
}

.download-card-tag {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--sage);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
  display: inline-block;
  white-space: nowrap;
}

.download-card h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 10px;
  line-height: 1.3;
}

.download-card p {
  font-size: 1rem;
  color: var(--ink-2);
  margin-bottom: 22px;
  line-height: 1.6;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--terracotta);
  text-decoration: none;
  border: 2px solid var(--terracotta);
  border-radius: 999px;
  padding: 12px 22px;
  min-height: 48px;
  transition: background 0.15s, color 0.15s;
}

.download-btn:hover { background: var(--terracotta); color: var(--paper); }

/* ── EMAIL CAPTURE ───────────────────────────────────────── */
.email-capture {
  background: var(--cocoa);
  border-radius: 28px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.email-capture h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 6px;
}

.email-capture p {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

.email-form { display: flex; gap: 12px; flex-wrap: wrap; }

.email-form input {
  padding: 14px 20px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: var(--paper);
  font-size: 1rem;
  font-family: var(--sans);
  width: 280px;
  min-height: 52px;
}

.email-form input::placeholder { color: rgba(255,255,255,0.5); }
.email-form input:focus { outline: 4px solid var(--terracotta); outline-offset: 2px; border-color: var(--terracotta); background: rgba(255,255,255,0.12); }

.email-form button {
  padding: 14px 28px;
  background: var(--terracotta);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.15s;
  min-height: 52px;
}

.email-form button:hover { background: var(--terracotta-d); }

/* ── EBOOK CARDS ─────────────────────────────────────────── */
.ebooks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 56px;
}

.ebook-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.ebook-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(42,38,34,0.1);
}

.ebook-card.featured {
  border: 2px solid var(--terracotta);
  box-shadow: 0 8px 28px rgba(182, 90, 60, 0.15);
}

.ebook-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--terracotta);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  z-index: 2;
}

.ebook-cover {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Hearth gradient covers — warm, paper-feel */
.cover-1 { background: linear-gradient(135deg, var(--terracotta) 0%, #8a3f26 100%); }
.cover-2 { background: linear-gradient(135deg, #c8794d 0%, var(--terracotta) 100%); }
.cover-3 { background: linear-gradient(135deg, var(--sage) 0%, #46604a 100%); }
.cover-4 { background: linear-gradient(135deg, var(--honey) 0%, var(--terracotta) 100%); }
.cover-5 { background: linear-gradient(135deg, var(--cocoa) 0%, var(--terracotta) 100%); }
.cover-6 { background: linear-gradient(135deg, var(--sage) 0%, var(--honey) 100%); }
.cover-7 { background: linear-gradient(135deg, var(--honey) 0%, var(--cocoa) 100%); }
.cover-8 { background: linear-gradient(135deg, var(--cocoa) 0%, #46604a 100%); }
.cover-emergency { background: linear-gradient(135deg, #b65a3c 0%, #2a2622 100%); }
.cover-bundle-2 { background: linear-gradient(135deg, var(--honey) 0%, var(--sage) 100%); }

/* High-visibility Emergency Kit nav link */
.nav-links a.nav-emergency {
  background: var(--peach-soft);
  color: var(--terracotta-d);
  font-weight: 800;
  border-radius: 999px;
  padding: 8px 16px;
}
.nav-links a.nav-emergency:hover { background: var(--terracotta); color: #fff; }

.ebook-cover-text { text-align: center; padding: 0 24px; }

.ebook-cover-text p {
  font-family: var(--serif);
  color: rgba(255,255,255,0.95);
  font-size: 1.15rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.35;
  margin-bottom: 6px;
}

.ebook-cover-text span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-family: var(--sans);
}

.ebook-body { padding: 28px 30px; }

.ebook-body h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 10px;
  line-height: 1.3;
}

.ebook-body p {
  font-size: 1rem;
  color: var(--ink-2);
  margin-bottom: 20px;
  line-height: 1.6;
}

.ebook-includes { list-style: none; margin-bottom: 24px; }

.ebook-includes li {
  font-size: 0.98rem;
  color: var(--ink-2);
  padding: 5px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
}

.ebook-includes li::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--sage);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 9px;
}

.ebook-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  gap: 12px;
}

.ebook-price {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--cocoa);
  font-family: var(--serif);
}

.ebook-price span {
  font-size: 0.95rem;
  color: var(--ink-mute);
  font-family: var(--sans);
  font-weight: 400;
}

.ebook-buy {
  background: var(--cocoa);
  color: var(--paper);
  padding: 12px 22px;
  min-height: 48px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s;
  white-space: nowrap;
}

.ebook-buy:hover { background: var(--terracotta); }

/* ── BUNDLE BOX ──────────────────────────────────────────── */
.bundle-box {
  margin-top: 48px;
  background: var(--cocoa);
  border-radius: 28px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}

.bundle-left h3 {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--paper);
  margin-bottom: 10px;
  font-weight: 600;
}

.bundle-left p {
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
  max-width: 540px;
  line-height: 1.6;
}

.bundle-right { text-align: center; flex-shrink: 0; }

.bundle-price {
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--paper);
  font-weight: 700;
  line-height: 1;
}

.bundle-was {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  text-decoration: line-through;
  margin-bottom: 6px;
}

.bundle-save {
  font-size: 0.85rem;
  color: var(--peach-soft);
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── SITUATIONS ──────────────────────────────────────────── */
.situations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));  /* flows 2-4 cols for 8 cards */
  gap: 16px;
  margin-top: 40px;
}

.situation-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.situation-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(42,38,34,0.08);
}

.situation-icon {
  width: 48px;
  height: 48px;
  background: var(--peach-soft);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 1.3rem;
  color: var(--terracotta-d);
}

.situation-card h3 {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 8px;
  line-height: 1.3;
}

.situation-card p {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin-bottom: 16px;
  line-height: 1.55;
}

.situation-link {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--terracotta);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.situation-link:hover { color: var(--terracotta-d); border-bottom-color: var(--terracotta-d); }

/* ── ABOUT SECTION ───────────────────────────────────────── */
.about-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
}

.stat-box {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
}

.stat-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--peach-soft);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

.about-content .section-label { color: var(--peach-soft); }
.about-content .section-title { color: var(--paper); }

.about-content p {
  color: rgba(255,255,255,0.78);
  font-size: 1.1rem;
  line-height: 1.75;
  margin-bottom: 18px;
  font-weight: 400;
}

.about-features { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }

.about-feature { display: flex; align-items: flex-start; gap: 16px; }

.about-feature-icon {
  width: 48px; height: 48px;
  background: rgba(248,217,200,0.18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  color: var(--peach-soft);
}

.about-feature h4 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 4px;
}

.about-feature p {
  font-size: 0.98rem;
  color: rgba(255,255,255,0.65);
  margin: 0;
  line-height: 1.55;
}

/* ── SHOP PAGE ───────────────────────────────────────────── */
.shop-section { background: var(--paper); }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 56px;
}

.bundle-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 48px;
}

.bundle-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.bundle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(42,38,34,0.1);
}

.bundle-card.featured-bundle {
  border: 2px solid var(--sage);
  box-shadow: 0 8px 28px rgba(94, 125, 99, 0.15);
}

.bundle-card-header {
  padding: 32px 32px 24px;
  background: var(--cocoa);
  position: relative;
}

.bundle-card-badge {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--sage);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.bundle-card-header h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--paper);
  margin-bottom: 8px;
  font-weight: 600;
}

.bundle-card-header p {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.55;
}

.bundle-card-body { padding: 28px 32px; }

.bundle-includes { list-style: none; margin-bottom: 28px; }

.bundle-includes li {
  font-size: 1rem;
  color: var(--ink-2);
  padding: 8px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.5;
}

.bundle-includes li:last-child { border-bottom: none; }

.bundle-includes li::before {
  content: '✓';
  color: var(--sage);
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.bundle-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  gap: 14px;
  flex-wrap: wrap;
}

.bundle-card-pricing { line-height: 1.3; }

.bundle-card-was {
  font-size: 0.95rem;
  color: var(--ink-mute);
  text-decoration: line-through;
}

.bundle-card-price {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--cocoa);
}

.bundle-card-save {
  font-size: 0.82rem;
  color: var(--terracotta);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── PRODUCT DETAIL PAGE ─────────────────────────────────── */
.product-detail {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 72px;
  align-items: start;
}

.product-sidebar { position: sticky; top: 104px; }

.product-cover-lg {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  box-shadow: 0 18px 56px rgba(42,38,34,0.18);
}

.product-cover-lg .ebook-cover-text p { font-size: 1.5rem; }
.product-cover-lg .ebook-cover-text span { font-size: 0.95rem; }

.product-buy-box {
  background: var(--linen);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px;
}

.product-buy-box .price {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--cocoa);
  margin-bottom: 4px;
}

.product-buy-box .price-note {
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin-bottom: 22px;
}

.product-guarantees { list-style: none; margin: 18px 0 0; }

.product-guarantees li {
  font-size: 0.95rem;
  color: var(--ink-2);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
}
.product-guarantees a { color: var(--terracotta); text-decoration: underline; }
.product-guarantees a:hover { color: var(--cocoa); }

.product-guarantees li span { color: var(--sage); font-size: 1.05rem; }

.product-main h2 {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--cocoa);
  margin: 44px 0 16px;
  font-weight: 600;
  line-height: 1.2;
}

.product-main h2:first-child { margin-top: 0; }

.product-main p {
  font-size: 1.1rem;
  color: var(--ink-2);
  line-height: 1.75;
  margin-bottom: 18px;
}

.product-chapters { list-style: none; margin: 0 0 28px; }

.product-chapters li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
}

.chapter-num {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--terracotta);
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 70px;
  font-style: italic;
}

.chapter-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 4px;
  line-height: 1.3;
}

.chapter-desc {
  font-size: 0.98rem;
  color: var(--ink-2);
  line-height: 1.55;
}

.bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.bonus-item {
  background: var(--mint-soft);
  border: 1px solid rgba(94, 125, 99, 0.25);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 0.98rem;
  color: var(--cocoa);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}

.bonus-item::before {
  content: '✓';
  color: var(--sage-d);
  font-weight: 700;
  font-size: 1.1rem;
}

.related-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.related-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  display: block;
}

.related-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(42,38,34,0.1); }

.related-cover {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-cover p {
  font-family: var(--serif);
  color: rgba(255,255,255,0.95);
  font-size: 0.92rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.4;
  padding: 0 14px;
  text-align: center;
}

.related-body {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.related-body span { font-size: 0.95rem; color: var(--ink-mute); }
.related-body strong { font-size: 1.15rem; font-weight: 700; color: var(--cocoa); font-family: var(--serif); }

/* ── BUNDLE DETAIL PAGE ──────────────────────────────────── */
.bundle-detail {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 72px;
  align-items: start;
}

.bundle-what-inside { margin-bottom: 48px; }

.bundle-product-row {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  margin-bottom: 14px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.bundle-product-row:hover {
  box-shadow: 0 8px 24px rgba(42,38,34,0.08);
  transform: translateY(-2px);
}

.bundle-mini-cover {
  width: 72px;
  height: 92px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bundle-mini-cover span {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.95);
  font-family: var(--serif);
  text-align: center;
  padding: 5px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
}

.bundle-product-info h4 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 6px;
}

.bundle-product-info p { font-size: 0.98rem; color: var(--ink-2); margin: 0; line-height: 1.55; }

.bundle-value-table { width: 100%; border-collapse: collapse; margin-top: 18px; }

.bundle-value-table tr { border-bottom: 1px solid var(--line); }

.bundle-value-table td {
  padding: 12px 4px;
  font-size: 1rem;
  color: var(--ink-2);
}

.bundle-value-table td:last-child { text-align: right; font-weight: 700; color: var(--cocoa); }

.bundle-value-table tr.total td {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cocoa);
  border-bottom: none;
  font-family: var(--serif);
}

.bundle-value-table tr.savings td { color: var(--terracotta); font-weight: 800; border-bottom: none; }

.bundle-buy-box {
  background: var(--cocoa);
  border-radius: 28px;
  padding: 32px;
  position: sticky;
  top: 104px;
  text-align: center;
}

.bundle-buy-box h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--paper);
  margin-bottom: 10px;
  font-weight: 600;
}

.bundle-buy-box .bundle-was {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  text-decoration: line-through;
  margin-bottom: 4px;
}

.bundle-buy-box .bundle-price { margin-bottom: 8px; }
.bundle-buy-box .bundle-save { margin-bottom: 28px; }

.bundle-buy-box p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.6);
  margin-top: 16px;
  line-height: 1.6;
}

/* ── CONTACT PAGE ────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 72px;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.contact-info h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--cocoa);
  margin-bottom: 14px;
  font-weight: 600;
}

.contact-info p {
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 28px;
}

.contact-items { display: flex; flex-direction: column; gap: 16px; }

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--linen);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.contact-item-icon {
  width: 48px; height: 48px;
  background: var(--peach-soft);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  color: var(--terracotta-d);
}

.contact-item h4 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 4px;
}

.contact-item p { font-size: 0.98rem; color: var(--ink-2); margin: 0; line-height: 1.5; }

.contact-form-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group { margin-bottom: 22px; }

.form-group label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cocoa);
  margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--line);
  border-radius: 14px;
  font-size: 1.05rem;
  font-family: var(--sans);
  color: var(--cocoa);
  background: var(--paper);
  transition: border-color 0.15s;
  min-height: 52px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 4px solid var(--peach-soft);
  outline-offset: 0;
  border-color: var(--terracotta);
}

.form-group textarea { height: 150px; resize: vertical; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { max-width: 800px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 14px; }

.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.faq-q {
  padding: 22px 28px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--cocoa);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  line-height: 1.35;
  user-select: none;
}

.faq-q .faq-caret {
  flex-shrink: 0;
  color: var(--terracotta);
  transition: transform 0.2s ease;
}

.faq-item.open .faq-q .faq-caret {
  transform: rotate(180deg);
}

.faq-a {
  padding: 0 28px 22px;
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.7;
  display: none;
}

.faq-item.open .faq-a {
  display: block;
}

/* FAQ accordion (native details/summary - no JS required) */
.faq-block { max-width: 820px; margin-top: 8px; }
.faq-block details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-block summary {
  padding: 18px 22px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--cocoa);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.faq-block summary::-webkit-details-marker { display: none; }
.faq-block summary::after { content: "+"; color: var(--terracotta); font-weight: 700; font-size: 1.3rem; flex-shrink: 0; }
.faq-block details[open] summary::after { content: "-"; }
.faq-block .faq-ans { padding: 0 22px 20px; color: var(--ink-2); line-height: 1.7; font-size: 1.02rem; }

/* ── SOURCES NOTE ────────────────────────────────────────── */
.sources-note { max-width: 820px; margin: 0 auto; padding: 16px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.65; }
.sources-note strong { color: var(--cocoa); font-family: var(--serif); }

/* ── TESTIMONIALS ────────────────────────────────────────── */
.testimonials-note { color: var(--ink-2); font-size: 0.92rem; margin: 6px 0 26px; font-style: italic; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.testimonial-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; margin: 0; }
.testimonial-quote { font-family: var(--serif); font-size: 1.1rem; line-height: 1.6; color: var(--cocoa); margin: 0 0 16px; }
.testimonial-author { font-size: 0.92rem; color: var(--cocoa); font-weight: 700; font-style: normal; }
.testimonial-author span { display: block; font-weight: 400; color: var(--ink-2); margin-top: 2px; }
.testimonial-sample { display: inline-block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta); border: 1px solid var(--terracotta); border-radius: 999px; padding: 2px 10px; margin-bottom: 14px; font-weight: 700; }

/* ── THANK YOU PAGE ──────────────────────────────────────── */
.thank-you-box {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.thank-you-icon {
  width: 96px; height: 96px;
  background: var(--mint-soft);
  border: 2px solid rgba(94,125,99,0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: var(--sage-d);
  margin: 0 auto 32px;
}

.download-links { display: flex; flex-direction: column; gap: 14px; margin: 32px 0; }

.download-link-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.download-link-btn:hover {
  border-color: var(--terracotta);
  box-shadow: 0 6px 18px rgba(42,38,34,0.08);
}

.download-link-btn .dlb-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--cocoa);
  text-align: left;
}

.download-link-btn .dlb-meta { font-size: 0.92rem; color: var(--ink-mute); text-align: left; }
.download-link-btn .dlb-icon { font-size: 1.5rem; flex-shrink: 0; color: var(--terracotta); display: flex; align-items: center; }
.thank-you-icon svg.ph { display: block; }

/* ── ABOUT FULL PAGE ─────────────────────────────────────── */
.about-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 48px;
}

.value-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}

.value-card .icon {
  font-size: 1.7rem;
  margin-bottom: 12px;
  color: var(--terracotta);
}

.value-card h4 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 8px;
}

.value-card p {
  font-size: 0.98rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

/* ── CTA BANNER ──────────────────────────────────────────── */
.cta-banner {
  background: var(--cocoa);
  padding: 80px 5%;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(182,90,60,0.18);
}

.cta-banner::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -50px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(94,125,99,0.18);
}

.cta-banner h2 {
  font-family: var(--serif);
  font-size: 2.6rem;
  color: var(--paper);
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.15;
  position: relative;
}

.cta-banner p {
  color: rgba(255,255,255,0.78);
  font-size: 1.2rem;
  margin-bottom: 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  position: relative;
}

.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background: var(--cocoa-deep);
  color: rgba(255,255,255,0.7);
  padding: 72px 5% 36px;
}

.footer-inner { max-width: 1180px; margin: 0 auto; }

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 36px;
}

.footer-brand h2 {
  font-family: var(--serif);
  color: var(--paper);
  font-size: 1.5rem;
  margin-bottom: 14px;
  font-weight: 600;
}

.footer-brand p { font-size: 0.98rem; line-height: 1.65; max-width: 320px; }

.footer-col h4 {
  color: var(--peach-soft);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: var(--sans);
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.98rem;
  transition: color 0.15s;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.footer-col ul li a:hover { color: var(--paper); border-bottom-color: var(--peach-soft); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-bottom p { font-size: 0.9rem; }
.footer-bottom a {
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-left: 20px;
  font-size: 0.9rem;
}
.footer-bottom a:hover { color: var(--paper); }

.disclaimer {
  background: rgba(248,217,200,0.08);
  border: 1px solid rgba(248,217,200,0.18);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 32px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.7);
}

.disclaimer strong { color: var(--peach-soft) !important; }

/* ── PHOSPHOR ICONS — inline SVG system ─────────────────────
   All icons use fill="currentColor" so they inherit from CSS.
   Size is set explicitly per-element via width/height attrs.
   Minimum 24px per brief (senior readability requirement).
   ─────────────────────────────────────────────────────────── */
svg.ph {
  display: inline-block;
  flex-shrink: 0;
  fill: currentColor;
  overflow: visible;
}

/* Icons inside coloured box containers */
.hero-card-icon  svg.ph,
.situation-icon  svg.ph,
.about-feature-icon svg.ph,
.contact-item-icon  svg.ph { display: block; }

/* Value card icons */
.value-card .icon svg.ph { display: block; color: var(--terracotta); }

/* Trust bar icons */
.trust-item svg.ph {
  flex-shrink: 0;
  color: var(--terracotta);
}

/* Download card header icons */
.download-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

/* ── UTILITY ─────────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.section-bg-light { background: var(--linen); }
.section-bg-pale { background: var(--peach-soft); }
.section-bg-dark { background: var(--cocoa); color: var(--paper); }

/* ── FREE DOWNLOAD PRODUCT PAGES ─────────────────────────── */
.free-cover {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  box-shadow: 0 18px 56px rgba(42,38,34,0.18);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}

.free-cover::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}

.free-cover-icon {
  font-size: 3.2rem;
  margin-bottom: 18px;
  color: rgba(255,255,255,0.95);
}

.free-cover-title {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--paper);
  text-align: center;
  line-height: 1.3;
  margin-bottom: 12px;
  font-style: italic;
  position: relative;
}

.free-cover-meta {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  font-weight: 700;
  position: relative;
}

.free-badge-cover {
  position: absolute;
  top: 18px; left: 18px;
  background: var(--paper);
  color: var(--terracotta-d);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

/* Hearth-themed free covers */
.fc-teal    { background: linear-gradient(135deg, var(--sage) 0%, var(--terracotta) 100%); }
.fc-blue    { background: linear-gradient(135deg, var(--terracotta) 0%, var(--cocoa) 100%); }
.fc-green   { background: linear-gradient(135deg, var(--sage-d) 0%, var(--sage) 100%); }
.fc-navy    { background: linear-gradient(135deg, var(--cocoa) 0%, var(--terracotta) 100%); }
.fc-mid     { background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-d) 100%); }
.fc-warm    { background: linear-gradient(135deg, var(--honey) 0%, var(--terracotta) 100%); }

.download-box {
  background: var(--mint-soft);
  border: 1.5px solid rgba(94,125,99,0.3);
  border-radius: 24px;
  padding: 28px;
}

.download-box .free-price {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--sage-d);
  margin-bottom: 4px;
}

.download-box .price-note { font-size: 0.95rem; color: var(--ink-2); margin-bottom: 22px; }

.download-box .email-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid rgba(94,125,99,0.4);
  border-radius: 14px;
  font-size: 1.05rem;
  font-family: var(--sans);
  color: var(--cocoa);
  background: var(--paper);
  margin-bottom: 12px;
  min-height: 52px;
}

.download-box .email-input:focus {
  outline: 4px solid var(--mint-soft);
  outline-offset: 0;
  border-color: var(--sage);
}

.btn-accent-download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 16px;
  min-height: 56px;
  background: var(--sage);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.15s;
  text-decoration: none;
}

.btn-accent-download:hover { background: var(--sage-d); }

.btn-accent-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 14px;
  min-height: 52px;
  background: transparent;
  color: var(--sage-d);
  border: 2px solid var(--sage);
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}

.btn-accent-outline:hover { background: var(--sage); color: var(--paper); }

.or-divider {
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-mute);
  margin: 14px 0;
  position: relative;
  font-weight: 600;
}

.or-divider::before, .or-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--line);
}

.or-divider::before { left: 0; }
.or-divider::after { right: 0; }

.inside-section {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.inside-section:last-child { border-bottom: none; }

.inside-section h4 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.inside-section ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.inside-section ul li {
  font-size: 1rem;
  color: var(--ink-2);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.55;
}

.inside-section ul li::before {
  content: '☐';
  color: var(--sage);
  flex-shrink: 0;
  font-size: 1.05rem;
}

.upsell-box {
  background: var(--linen);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.upsell-mini-cover {
  height: 116px;
  width: 92px;
  min-width: 92px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.upsell-mini-cover p {
  font-family: var(--serif);
  color: rgba(255,255,255,0.95);
  font-size: 0.75rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  text-align: center;
  margin: 0;
}

.upsell-content .label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 6px;
}

.upsell-content h4 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cocoa);
  margin-bottom: 8px;
}

.upsell-content p {
  font-size: 0.98rem;
  color: var(--ink-2);
  margin-bottom: 14px;
  line-height: 1.55;
}

/* ── INLINE-STYLE OVERRIDES ──────────────────────────────────
   New source files use inline font-family: 'Playfair Display' / 'Source Sans 3'.
   Hearth re-maps both to its type pair without touching the markup. */
[style*="Playfair Display"] { font-family: 'Newsreader', Georgia, serif !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
[style*="Source Sans"]      { font-family: 'Nunito', system-ui, sans-serif !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-cards { display: none; }
  .hero h1 { font-size: 2.6rem; }
  .about-inner { grid-template-columns: 1fr; }
  .about-stats { margin-top: 0; }
  .product-detail { grid-template-columns: 1fr; }
  .product-sidebar { position: static; }
  .bundle-detail { grid-template-columns: 1fr; }
  .bundle-buy-box { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .about-page-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .section-title { font-size: 2.1rem; }
}

@media (max-width: 640px) {
  body { font-size: 19px; }
  nav { padding: 0 4%; height: 72px; }
  .nav-logo { font-size: 1.25rem; }
  .nav-links { display: none; }
  section { padding: 64px 4%; }
  .section-title { font-size: 1.85rem; }
  .hero { padding: 64px 4%; }
  .hero h1 { font-size: 2.1rem; }
  .hero p { font-size: 1.1rem; }
  .email-capture { flex-direction: column; text-align: center; padding: 28px; }
  .email-form { flex-direction: column; width: 100%; }
  .email-form input { width: 100%; }
  .bundle-box { flex-direction: column; text-align: center; padding: 32px; }
  .footer-top { grid-template-columns: 1fr; }
  .about-values { grid-template-columns: 1fr; }
  .situations-grid { grid-template-columns: 1fr; }  /* stack on phone */
  .cta-banner h2 { font-size: 2rem; }
  .page-hero h1 { font-size: 2.1rem; }
}

/* ── MOBILE HAMBURGER NAV (button + panel injected by nav-mobile.js) ── */
/*
   nav-mobile.js creates:
     <button class="nav-hamburger" aria-expanded="false" aria-controls="main-nav-list">
       <span aria-hidden="true"></span> × 3
     </button>
   and toggles .nav-open on .nav-links + .nav-menu-open on body.
*/

.nav-hamburger {
  display: none;               /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  min-width: 48px;             /* WCAG 2.5.8 touch target */
  border: 2px solid var(--line);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.nav-hamburger:hover {
  border-color: var(--terracotta);
  background: var(--linen);
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cocoa);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

/* Animate 3 bars → X when expanded */
.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Full-viewport mobile nav panel */
.nav-links.nav-open {
  display: flex !important;
  position: fixed;
  top: 84px;          /* default nav height (desktop); overridden at ≤640px and ≤480px */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px 0 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 99;
  box-shadow: 0 8px 32px rgba(42, 38, 34, 0.15);
}

.nav-links.nav-open li {
  border-bottom: 1px solid var(--line-soft);
}

.nav-links.nav-open li:last-child {
  border-bottom: none;
}

.nav-links.nav-open a {
  display: block;
  padding: 20px 5%;
  font-size: 1.15rem;
  font-weight: 600;
  border-bottom: none !important;
  color: var(--cocoa);
  min-height: 60px;   /* generous touch target for older users */
  display: flex;
  align-items: center;
}

.nav-links.nav-open .nav-cta {
  margin: 20px 5% 8px;
  border-radius: 999px !important;
  text-align: center;
  justify-content: center;
  padding: 18px 24px !important;
  font-size: 1.05rem !important;
  min-height: 60px;
}

/* Prevent body scroll when mobile menu is open */
body.nav-menu-open { overflow: hidden; }

/* Shrink logo at mid-desktop to give nav links more room */
@media (max-width: 1300px) {
  .nav-logo { font-size: 1.25rem; }
}

/* Show hamburger at 1100px — covers all tablets and cramped French nav */
@media (max-width: 1100px) {
  .nav-hamburger { display: flex; }
  .nav-links.nav-open { top: 84px; } /* explicit for this range */
}

/* Correct panel top-offset per nav height */
@media (max-width: 640px) {
  .nav-links.nav-open { top: 72px; }
}

@media (max-width: 480px) {
  .nav-links.nav-open { top: 66px; }
}

/* ── REDUCED MOTION (vestibular / motion-sensitivity support) ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep focus rings instant — they must never be animated away */
  *:focus-visible {
    transition: none !important;
  }
}

/* ── HIGH CONTRAST MODE (Windows / macOS high-contrast OS setting) ── */
@media (prefers-contrast: high) {
  :root {
    --terracotta:   #8a3f26;   /* darken for ≥7:1 on white */
    --sage:         #3a5c3e;   /* darken for ≥7:1 on white */
    --ink-mute:     #3a3330;   /* nearly-black muted text */
    --line:         #8a7e76;
    --line-soft:    #8a7e76;
  }

  .download-card,
  .situation-card,
  .ebook-card,
  .hero-card,
  .value-card,
  .contact-item,
  .faq-item {
    border-width: 2px;
  }

  .nav-links a {
    border-bottom-width: 3px;
  }

  .btn-secondary {
    border-color: var(--paper);
  }
}

/* ── PRINT STYLES ──────────────────────────────────────────── */
@media print {
  nav,
  footer,
  .cta-banner,
  .email-capture,
  .upsell-box,
  .nav-hamburger,
  .skip-to-main,
  .trust-bar {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
    line-height: 1.5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  h1, h2, h3, h4 {
    color: #000;
    page-break-after: avoid;
    font-family: Georgia, serif;
  }

  p, li { page-break-inside: avoid; }

  a { color: #000; text-decoration: underline; }
  /* Print destination URLs, but skip anchors and JS pseudo-links */
  a[href]::after  { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; }
  a[href^="#"]::after,
  a[href^="javascript"]::after,
  a[href^="mailto"]::after { content: ''; }

  .section-inner { max-width: 100%; }
  section        { padding: 24pt 0; }

  .ebook-card,
  .download-card,
  .situation-card { break-inside: avoid; border: 1px solid #ccc; }

  .ebook-cover,
  .free-cover { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE OVERHAUL — Senior-first, tablet-first design
   Breakpoints:
     900px  nav collapses to hamburger
     960px  existing tablet overrides (hero, product, etc.)
     768px  standard iPad portrait + large Android tablets
     640px  phones — existing + new additions
     480px  small phones (iPhone SE, budget Android)
   ════════════════════════════════════════════════════════════ */

/* ── 1100px: hide nav links (hamburger handles it) ──────────── */
@media (max-width: 1100px) {
  .nav-links { display: none; }
}

/* ── 960px: tablet additions (supplement existing block) ───── */
@media (max-width: 960px) {
  /* Reduce generous desktop vertical spacing on tablets */
  section     { padding: 72px 5%; }
  .section-sm { padding: 44px 5%; }
  .hero       { padding: 72px 5%; }
  .cta-banner { padding: 68px 5%; }

  /* Email capture — stack vertically */
  .email-capture {
    flex-direction: column;
    padding: 32px 36px;
    gap: 24px;
  }
  .email-form       { width: 100%; }
  .email-form input { width: 100%; min-width: 0; }

  /* Ebook / shop / bundle grids — allow 2-up on tablets */
  .ebooks-grid,
  .shop-grid,
  .bundle-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
  }

  /* Bundle promo box — stack on tablet */
  .bundle-box {
    flex-direction: column;
    text-align: center;
    padding: 36px;
  }

  /* Trust bar — allow wrapping */
  .trust-bar { gap: 28px; }
}

/* ── 768px: iPad portrait, standard Android tablets ─────────── */
@media (max-width: 768px) {
  /* Typography */
  .section-title  { font-size: 2rem; }
  .hero h1        { font-size: 2.2rem; }
  .page-hero h1   { font-size: 2.2rem; }
  .cta-banner h2  { font-size: 2.1rem; }

  /* Layouts */
  .situations-grid          { gap: 18px; }
  .footer-top               { grid-template-columns: 1fr 1fr; gap: 28px; }
  .product-buy-box          { padding: 22px; }

  /* Ebook / shop grids — 2-column max on mid tablets */
  .ebooks-grid,
  .shop-grid,
  .bundle-cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Downloads — 2-up on tablet is comfortable */
  .downloads-grid { gap: 18px; }

  /* Slightly tighten sections */
  section     { padding: 64px 5%; }
  .section-sm { padding: 38px 5%; }
}

/* ── 640px: phone additions (supplement existing block) ─────── */
@media (max-width: 640px) {
  /* ─ CTA buttons: full-width, easy to tap ─ */
  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .cta-buttons .btn-primary,
  .cta-buttons .btn-secondary,
  .cta-buttons .btn-accent {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* ─ Hero buttons: stack ─ */
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary,
  .hero-buttons .btn-accent {
    width: 100%;
    justify-content: center;
  }

  /* ─ Grids: collapse to single column ─ */
  .downloads-grid,
  .ebooks-grid,
  .shop-grid,
  .bundle-cards-grid { grid-template-columns: 1fr; gap: 16px; }

  /* ─ Product page ─ */
  .product-cover-lg {
    max-height: 260px;
    aspect-ratio: auto;
  }
  .product-buy-box  { padding: 20px; }
  .product-main h2  { font-size: 1.6rem; margin: 32px 0 14px; }

  /* ─ Contact form ─ */
  .contact-form-box { padding: 24px 20px; }
  .contact-item     { padding: 16px; }

  /* ─ Email capture ─ */
  .email-capture      { padding: 24px 20px; }
  .email-form button  { width: 100%; }

  /* ─ Download & situation cards ─ */
  .download-card   { padding: 24px 22px; }
  .situation-card  { padding: 26px 22px; }

  /* ─ Trust bar: 2-column grid ─ */
  .trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    text-align: center;
  }
  .trust-item { flex-direction: column; gap: 4px; text-align: center; }

  /* ─ Bundle detail buy box ─ */
  .bundle-buy-box { padding: 24px 20px; }

  /* ─ Footer ─ */
  .footer-col ul li a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ─ FAQs ─ */
  .faq-q { padding: 18px 20px; font-size: 1.1rem; }
  .faq-a { padding: 0 20px 18px; }

  /* ─ Section typography ─ */
  .section-sub { font-size: 1.05rem; }
}

/* ── 480px: small phones (iPhone SE, budget Android) ────────── */
@media (max-width: 480px) {
  body { font-size: 18px; }

  nav        { height: 66px; padding: 0 4%; }
  .nav-links.nav-open { top: 66px; }
  .nav-logo  { font-size: 1.1rem; }
  /* Scale down Canada label on small phones rather than hiding it */
  .nav-logo .nav-geo { font-size: 0.85em; }

  section     { padding: 48px 4%; }
  .section-sm { padding: 32px 4%; }
  .hero       { padding: 48px 4%; }
  .cta-banner { padding: 52px 4%; }

  .hero h1       { font-size: 1.9rem; }
  .section-title { font-size: 1.65rem; }
  .page-hero h1  { font-size: 1.75rem; }
  .cta-banner h2 { font-size: 1.75rem; }

  /* Fully collapse all grids */
  .footer-top,
  .about-values,
  .about-stats   { grid-template-columns: 1fr; gap: 14px; }

  /* Product sidebar */
  .product-cover-lg { max-height: 220px; }

  /* Cards: tighter padding on tiny screens */
  .ebook-body      { padding: 20px 18px; }
  .ebook-body h3   { font-size: 1.15rem; }
  .ebook-price     { font-size: 1.45rem; }

  .download-card   { padding: 20px 18px; }
  .download-card h3 { font-size: 1.15rem; }

  /* Email form */
  .email-capture h3 { font-size: 1.25rem; }
  .email-form input { font-size: 1rem; padding: 13px 16px; }
  .email-form button { font-size: 1rem; padding: 13px 20px; }

  /* Bundle */
  .bundle-left h3  { font-size: 1.4rem; }
  .bundle-price    { font-size: 2.5rem; }

  /* Downloads page grid: single column guaranteed */
  .downloads-grid  { grid-template-columns: 1fr; }

  /* Situation cards */
  .situations-grid { gap: 12px; }
  .situation-card  { padding: 22px 18px; }
  .situation-icon  { width: 52px; height: 52px; font-size: 1.4rem; }
}