/*
Theme Name: Faith Schooling
Theme URI: https://faithschooling.com
Author: Faith Schooling
Description: A warm, faith-anchored educational theme for Faith Schooling — the Christian K-5 homeschool platform housing Faith Readers and Faith Thinkers. Unified Libre Caslon Text typeface (classical English/American printing tradition; headings + body), parchment cream and forest green palette.
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: faith-education
Tags: education, faith, children, homeschool, custom-colors, custom-logo, custom-menu
*/

/* ════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — Faith Schooling Design System
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Core palette */
  --fs-bg:            #F9F5EF;
  --fs-primary:       #2D5016;
  --fs-primary-dark:  #1E3A0E;
  --fs-secondary:     #7B3F00;
  --fs-secondary-dark:#5A2E00;
  --fs-accent:        #C8860A;
  --fs-accent-light:  #E5A830;
  --fs-earth:         #3D1C02;
  --fs-white:         #FFFFFF;

  /* Text */
  --fs-text:          #1A0F00;
  --fs-text-light:    #4A3520;
  --fs-text-muted:    #7A6A55;
  --fs-text-on-green: #F9F5EF;
  --fs-text-on-brown: #F9F5EF;

  /* Card */
  --fs-card-bg:       #FFFFFF;
  --fs-card-shadow:   0 2px 12px rgba(61, 28, 2, 0.08);
  --fs-card-shadow-hover: 0 6px 24px rgba(61, 28, 2, 0.14);
  --fs-card-radius:   12px;

  /* Badges */
  --fs-badge-free:    #4A7C2F;
  --fs-badge-locked:  #C8860A;

  /* Borders & dividers */
  --fs-border:        #3D1C02;
  --fs-border-light:  rgba(61, 28, 2, 0.12);
  --fs-divider:       rgba(61, 28, 2, 0.10);

  /* Spacing */
  --fs-radius-sm:  6px;
  --fs-radius-md:  8px;
  --fs-radius-lg:  12px;
  --fs-radius-xl:  16px;
  --fs-radius-full:9999px;

  /* Shadows */
  --fs-shadow-sm:  0 1px 4px rgba(61, 28, 2, 0.06);
  --fs-shadow-md:  0 4px 16px rgba(61, 28, 2, 0.10);
  --fs-shadow-lg:  0 8px 32px rgba(61, 28, 2, 0.14);
  --fs-shadow-xl:  0 16px 48px rgba(61, 28, 2, 0.18);

  /* Typography */
  --fs-heading-font: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --fs-body-font:    'Libre Caslon Text', Georgia, 'Times New Roman', serif;

  /* Layout */
  --fs-max-width:  1200px;
  --fs-content-width: 800px;
}

/* Dark mode overrides */
[data-theme="dark"] {
  --fs-bg:            #1A1410;
  --fs-primary:       #5A9B3A;
  --fs-primary-dark:  #3D7020;
  --fs-secondary:     #D4940F;
  --fs-secondary-dark:#9A6A08;
  --fs-accent:        #E5A830;
  --fs-accent-light:  #F0C050;
  --fs-earth:         #8B5E3C;
  --fs-white:         #231A12;

  --fs-text:          #E8DDD0;
  --fs-text-light:    #C4B5A0;
  --fs-text-muted:    #9A8B78;
  --fs-text-on-green: #F9F5EF;
  --fs-text-on-brown: #F9F5EF;

  --fs-card-bg:       #2A2018;
  --fs-card-shadow:   0 2px 12px rgba(0, 0, 0, 0.30);
  --fs-card-shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.40);
  --fs-card-radius:   12px;

  --fs-badge-free:    #6BBF4A;
  --fs-badge-locked:  #E5A830;

  --fs-border:        #5A4530;
  --fs-border-light:  rgba(200, 180, 150, 0.12);
  --fs-divider:       rgba(200, 180, 150, 0.08);

  --fs-shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.20);
  --fs-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.25);
  --fs-shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.35);
  --fs-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .site-header    { background: #231A12; }
[data-theme="dark"] .site-footer    { background: #231A12; }
[data-theme="dark"] .section-alt    { background: #231A12; }
[data-theme="dark"] .email-optin    { background: #231A12; }
[data-theme="dark"] .nav-menu       { background: #231A12; }
[data-theme="dark"] .hero-section   { background: linear-gradient(180deg, #1A1410 0%, #231A12 100%); }
[data-theme="dark"] .page-hero      { background: linear-gradient(180deg, #1A1410 0%, #231A12 100%); }
[data-theme="dark"] .scripture-ticker { background: #3D2A10; }
[data-theme="dark"] .game-iframe-wrap,
[data-theme="dark"] .game-iframe-spinner { background: #1A1410; }
[data-theme="dark"] .hero-section::before { opacity: 0.12; }
[data-theme="dark"] .nav-menu li a:hover,
[data-theme="dark"] .nav-menu li.current-menu-item a,
[data-theme="dark"] .nav-menu li.current_page_item a { background: rgba(90, 155, 58, 0.12); }

/* ════════════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 17px;
}

body {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  background: var(--fs-bg);
  color: var(--fs-text);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--fs-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--fs-secondary);
}

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

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

/* ── Skip link (a11y) — hidden until focused, then pinned top-left.
   Targets the #main-content anchor injected after the header. ── */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100px;
  z-index: 2000;
  padding: 0.7rem 1.25rem;
  background: var(--fs-primary);
  color: var(--fs-text-on-green, #fff);
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 0 0 var(--fs-radius-md) var(--fs-radius-md);
  box-shadow: var(--fs-shadow-lg);
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--fs-accent);
  outline-offset: 2px;
}
/* The injected skip target must never grab layout or show an outline ring. */
#main-content { outline: none; }

/* ── Global keyboard focus ring. Mouse clicks don't trigger :focus-visible,
   so this is keyboard-only and won't add rings for pointer users. Covers nav
   links, the dropdown parents, the theme toggle, and content links/controls
   that don't already define their own (.btn handles itself further down). ── */
a:focus-visible,
button:focus-visible,
.nav-menu a:focus-visible,
.mega-menu-parent:focus-visible,
.theme-toggle:focus-visible,
.menu-toggle:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--fs-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Inside the dark dropdown panel, the gold ring needs more contrast offset. */
.sub-menu a:focus-visible {
  outline: 3px solid var(--fs-accent);
  outline-offset: -2px;
}

/* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  color: var(--fs-text);
  line-height: 1.3;
}

/* Libre Caslon Text only ships 400 and 700 — period-correct constraint.
   All headings bold (700); body inherits regular (400). Hierarchy is
   size-driven, the way classical school books and Bibles do it. */
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
h4 { font-size: clamp(1rem, 2vw, 1.25rem); }

p {
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

/* Child-facing / game UI typography */
.game-font {
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;
}

.pixel-font {
  font-family: 'Press Start 2P', monospace;
}

/* ════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════ */
.site-header {
  background: var(--fs-white);
  border-bottom: 1px solid var(--fs-border-light);
  position: relative;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(61, 28, 2, 0.10);
}

/* Logo row — centered above nav, matched to nav width */
.header-logo-row {
  text-align: center;
  padding: 0;
  margin: 0 auto;
}

.site-logo {
  display: block;
}

.site-logo-img {
  height: auto;
  width: 700px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Nav row — centered menu + dark mode toggle */
.header-nav-row {
  max-width: var(--fs-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 1.5rem;
  gap: 0.75rem;
  border-top: 1px solid var(--fs-divider);
}

/* ════════════════════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════════════════════ */
.main-navigation {
  display: flex;
  align-items: center;
}

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

.nav-menu li a {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--fs-text);
  padding: 0.5rem 0.85rem;
  border-radius: var(--fs-radius-md);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.nav-menu li a:hover,
.nav-menu li.current-menu-item a,
.nav-menu li.current_page_item a {
  background: rgba(45, 80, 22, 0.08);
  color: var(--fs-primary);
}

/* Hamburger */
.menu-toggle {
  display: none;
  background: none;
  border: 2px solid var(--fs-border-light);
  border-radius: var(--fs-radius-md);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--fs-text);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger-icon {
  position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.hamburger-icon::before { top: -7px; }
.hamburger-icon::after  { top: 7px; }

/* ════════════════════════════════════════════════════════════════
   SCRIPTURE TICKER BANNER
   ════════════════════════════════════════════════════════════════ */
.scripture-ticker {
  background: var(--fs-accent);
  padding: 0.85rem 1.5rem;
  text-align: center;
  overflow: hidden;
  position: relative;
  z-index: 50;
}

.scripture-ticker-track {
  position: relative;
  width: 100%;
}

.scripture-ticker-slide {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  transition: opacity 1.2s ease;
}

.scripture-ticker-slide.active {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
}

.scripture-ticker .scripture-text {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #3D1C02;
  font-weight: 500;
  line-height: 1.5;
}

.scripture-ticker .scripture-ref {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1A0F00;
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════ */
.btn {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.75rem;
  border-radius: var(--fs-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  line-height: 1.4;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 3px solid var(--fs-accent);
  outline-offset: 2px;
}

/* Primary — forest green */
.btn-primary {
  background: var(--fs-primary);
  color: var(--fs-text-on-green);
  border-color: var(--fs-primary);
}

.btn-primary:hover {
  background: var(--fs-earth);
  border-color: var(--fs-earth);
  color: var(--fs-text-on-green);
}

/* Secondary — warm brown outline */
.btn-secondary {
  background: transparent;
  color: var(--fs-secondary);
  border-color: var(--fs-secondary);
}

.btn-secondary:hover {
  background: var(--fs-secondary);
  color: var(--fs-text-on-brown);
}

/* Gold / accent */
.btn-gold {
  background: var(--fs-accent);
  color: var(--fs-text);
  border-color: var(--fs-accent);
  font-weight: 700;
}

.btn-gold:hover {
  background: var(--fs-accent-light);
  border-color: var(--fs-accent-light);
}

/* Soft-launch placeholder — applied where Buy/Subscribe CTAs are dead
   pending payment processor wire-up. Calm, neutral, NOT interactive.
   Communicates "this is real, just not ready yet" without looking
   broken. Remove .btn-coming-soon usages once Stripe is wired. */
.btn-coming-soon {
  background: var(--fs-bg);
  color: var(--fs-text-light);
  border-color: var(--fs-border-light);
  font-weight: 600;
  cursor: default;
  letter-spacing: 0.02em;
  /* Tiny clock-face accent dot before the text to read as "scheduled" */
  position: relative;
}
.btn-coming-soon::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--fs-accent);
  opacity: 0.65;
  margin-right: 0.5rem;
  vertical-align: 0.05em;
}
.btn-coming-soon:hover {
  /* No-op — the cursor stays default so users get no false-affordance */
  background: var(--fs-bg);
  border-color: var(--fs-border-light);
}

/* Notify Me card — drop-in for any Coming Soon CTA to capture interest.
   Renders inside any container; matches the site's .card aesthetic. */
.fs-notify-card {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-lg);
  padding: 1.5rem 1.75rem;
  max-width: 480px;
  margin: 1.5rem auto;
  text-align: center;
  box-shadow: var(--fs-shadow-sm);
}
.fs-notify-title {
  font-family: var(--fs-heading-font);
  font-size: 1.15rem;
  color: var(--fs-primary-dark);
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.fs-notify-pitch {
  font-size: 0.9rem;
  color: var(--fs-text-light);
  margin: 0 0 1rem;
  line-height: 1.55;
}
.fs-notify-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fs-notify-input {
  flex: 1 1 220px;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  border: 1.5px solid var(--fs-border);
  border-radius: var(--fs-radius-md);
  background: var(--fs-bg);
  color: var(--fs-text);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fs-notify-input:focus {
  outline: none;
  border-color: var(--fs-primary);
  background: var(--fs-card-bg);
  box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.18);
}
.fs-notify-submit {
  flex: 0 0 auto;
  white-space: nowrap;
}
.fs-notify-status {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  min-height: 1.1rem;
  line-height: 1.5;
}
.fs-notify-status--ok    { color: var(--fs-primary-dark); font-weight: 600; }
.fs-notify-status--error { color: #b32a2a; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* /contact/ direct-email card — prominent above the form so visitors
   reach a real inbox while SMTP is being finalized. */
.contact-direct-card {
  background: var(--fs-bg);
  border: 1px solid var(--fs-accent);
  border-left: 4px solid var(--fs-accent);
  border-radius: var(--fs-radius-md);
  padding: 1.1rem 1.4rem;
  margin: 0 0 1.75rem;
}
.contact-direct-lead {
  margin: 0;
  font-size: 1rem;
  color: var(--fs-text);
  line-height: 1.55;
}
.contact-direct-lead a {
  color: var(--fs-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid var(--fs-accent);
}
.contact-direct-lead a:hover {
  color: var(--fs-primary-dark);
}
.contact-direct-sub {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--fs-text-light);
  line-height: 1.5;
}

/* Large variant */
.btn-lg {
  padding: 0.9rem 2.25rem;
  font-size: 1.05rem;
}

/* Small variant */
.btn-sm {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}

/* ════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════ */
.card {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-card-radius);
  padding: 2rem;
  box-shadow: var(--fs-card-shadow);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.card:hover {
  box-shadow: var(--fs-card-shadow-hover);
  transform: translateY(-2px);
}

.card-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fs-text);
  margin-bottom: 0.6rem;
  line-height: 1.4;
}

.card-body {
  font-size: 0.95rem;
  color: var(--fs-text-light);
  line-height: 1.7;
}

.card-featured {
  border-left: 4px solid var(--fs-accent);
}

/* ════════════════════════════════════════════════════════════════
   PRODUCT / APP CARDS
   ════════════════════════════════════════════════════════════════ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: var(--fs-max-width);
  margin: 0 auto;
}

.product-card {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-card-radius);
  padding: 2.5rem 2rem;
  box-shadow: var(--fs-card-shadow);
  text-align: center;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.product-card:hover {
  box-shadow: var(--fs-card-shadow-hover);
  transform: translateY(-3px);
}

.product-card-logo {
  width: 200px;
  max-height: none;
  margin: 0 auto 1.25rem;
}

.product-card-tagline {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--fs-secondary);
  margin-bottom: 0.75rem;
}

.product-card-desc {
  font-size: 0.95rem;
  color: var(--fs-text-light);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════
   BADGES — Free / Locked / Grade
   ════════════════════════════════════════════════════════════════ */
.badge {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--fs-radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.badge-free {
  background: rgba(74, 124, 47, 0.12);
  color: var(--fs-badge-free);
}

.badge-locked {
  background: rgba(200, 134, 10, 0.12);
  color: var(--fs-badge-locked);
}

.badge-coming-soon {
  background: var(--fs-accent);
  color: var(--fs-text);
}

/* Grade badges — earthy tones */
.badge-grade {
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--fs-radius-full);
  font-weight: 700;
}

.badge-grade-k  { background: #E8D5B7; color: #5A3E1B; }
.badge-grade-1  { background: #D5E8D0; color: #2D5016; }
.badge-grade-2  { background: #D0DDE8; color: #1B3A5A; }
.badge-grade-3  { background: #E8D0D5; color: #5A1B2D; }
.badge-grade-4  { background: #DDD0E8; color: #3A1B5A; }
.badge-grade-5  { background: #D5E0D0; color: #2D4516; }

/* Subject badges */
.badge-reading  { background: rgba(45, 80, 22, 0.10); color: var(--fs-primary); }
.badge-math     { background: rgba(123, 63, 0, 0.10); color: var(--fs-secondary); }

/* ════════════════════════════════════════════════════════════════
   LOCKED CONTENT OVERLAY
   ════════════════════════════════════════════════════════════════ */
.locked-overlay {
  position: relative;
}

.locked-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 134, 10, 0.15);
  border-radius: var(--fs-card-radius);
  pointer-events: none;
}

.locked-overlay .lock-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 28px;
  height: 28px;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════
   HERO SECTION
   ════════════════════════════════════════════════════════════════ */
.hero-section {
  background: linear-gradient(180deg, var(--fs-bg) 0%, #F3EDE3 100%);
  padding: 5rem 1.5rem 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" opacity="0.03"><path d="M200 380 C200 380 200 200 200 100 C200 50 170 30 200 10 C230 30 200 50 200 100 M200 200 C180 180 140 190 120 220 M200 200 C220 180 260 190 280 220 M200 250 C175 235 130 250 110 280 M200 250 C225 235 270 250 290 280 M200 300 C170 290 120 310 100 340 M200 300 C230 290 280 310 300 340" stroke="%233D1C02" stroke-width="2" fill="none"/></svg>') center center / 400px no-repeat;
  pointer-events: none;
}

.hero-inner {
  max-width: var(--fs-max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.55rem, 3.2vw, 2.35rem);
  font-weight: 700;
  color: var(--fs-text);
  margin-bottom: 1rem;
  line-height: 1.25;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.hero-subtitle {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--fs-text-light);
  margin-bottom: 2rem;
  line-height: 1.7;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero scroll-telling — word-by-word reveal */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  animation: heroWordReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.4s + var(--word-i) * 0.14s);
}

.hero-word:last-child {
  color: var(--fs-primary);
}

@keyframes heroWordReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hero subtitle + game cards delayed reveal */
.hero-subtitle-reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: heroSubReveal 0.8s ease forwards;
  animation-delay: 0.9s;
}

.hero-buttons-reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: heroSubReveal 0.8s ease forwards;
  animation-delay: 1.1s;
}

@keyframes heroSubReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ════════════════════════════════════════════════════════════════
   SECTION LAYOUT
   ════════════════════════════════════════════════════════════════ */
.section {
  padding: 4rem 1.5rem;
}

.section-alt {
  background: var(--fs-white);
}

.section-inner {
  max-width: var(--fs-max-width);
  margin: 0 auto;
}

.section-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--fs-text);
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--fs-accent);
  margin: 0.75rem auto 0;
  border-radius: 2px;
}

/* Section divider — earth root brown */
.section-divider {
  border: none;
  height: 1px;
  background: var(--fs-divider);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   THREE-COLUMN FEATURES
   ════════════════════════════════════════════════════════════════ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: var(--fs-max-width);
  margin: 0 auto;
}

.feature-item {
  text-align: center;
  padding: 1.5rem;
}

.feature-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fs-radius-full);
  background: rgba(45, 80, 22, 0.08);
  color: var(--fs-primary);
}

.feature-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fs-text);
  margin-bottom: 0.6rem;
}

.feature-text {
  font-size: 0.93rem;
  color: var(--fs-text-light);
  line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════════
   WORKSHEET CARDS
   ════════════════════════════════════════════════════════════════ */
.worksheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.worksheet-card {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-card-radius);
  padding: 1.5rem;
  box-shadow: var(--fs-card-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.worksheet-card:hover {
  box-shadow: var(--fs-card-shadow-hover);
  transform: translateY(-2px);
}

.worksheet-card-header {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.worksheet-card-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fs-text);
  margin-bottom: 0.4rem;
}

.worksheet-card-desc {
  font-size: 0.88rem;
  color: var(--fs-text-muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════
   GAME CARDS
   ════════════════════════════════════════════════════════════════ */
.game-card {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-card-radius);
  overflow: hidden;
  box-shadow: var(--fs-card-shadow);
  transition: box-shadow 0.3s ease;
}

.game-card:hover {
  box-shadow: var(--fs-card-shadow-hover);
}

.game-card-embed {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f0ebe3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-card-body {
  padding: 1.25rem 1.5rem;
}

.game-card-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.game-card-desc {
  font-size: 0.88rem;
  color: var(--fs-text-muted);
  margin-bottom: 1rem;
}

/* ════════════════════════════════════════════════════════════════
   SCRIPTURE CALLOUT / PULL-QUOTE
   ════════════════════════════════════════════════════════════════ */
.scripture-callout,
blockquote.scripture {
  border-left: 4px solid var(--fs-accent);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(200, 134, 10, 0.04);
  border-radius: 0 var(--fs-radius-md) var(--fs-radius-md) 0;
}

.scripture-callout p,
blockquote.scripture p {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fs-text);
  margin-bottom: 0.3rem;
  line-height: 1.6;
}

.scripture-callout cite,
blockquote.scripture cite {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--fs-text-muted);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   EMAIL OPT-IN SECTION
   ════════════════════════════════════════════════════════════════ */
.email-optin {
  background: var(--fs-bg);
  border: 1px solid var(--fs-border-light);
  border-left: 4px solid var(--fs-accent);
  border-radius: var(--fs-card-radius);
  padding: 3rem 2rem;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.email-optin-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fs-text);
  margin-bottom: 0.5rem;
}

.email-optin-subtitle {
  font-size: 0.95rem;
  color: var(--fs-text-light);
  margin-bottom: 1.5rem;
}

.email-optin-form {
  display: flex;
  gap: 0.75rem;
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.email-optin-form input[type="email"] {
  flex: 1;
  min-width: 220px;
}

/* ════════════════════════════════════════════════════════════════
   MEMBERSHIP CTA BANNER
   ════════════════════════════════════════════════════════════════ */
.cta-membership {
  background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-primary-dark) 100%);
  color: var(--fs-text-on-green);
  padding: 3rem 2rem;
  border-radius: var(--fs-card-radius);
  text-align: center;
}

.cta-membership h3 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  color: var(--fs-text-on-green);
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
}

.cta-membership p {
  color: rgba(249, 245, 239, 0.85);
  max-width: 540px;
  margin: 0 auto 1.5rem;
  font-size: 1rem;
}

/* ════════════════════════════════════════════════════════════════
   CONTENT AREA — Pages, Posts
   ════════════════════════════════════════════════════════════════ */
.site-content {
  max-width: var(--fs-max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.content-area {
  max-width: var(--fs-content-width);
  margin: 0 auto;
}

.entry-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--fs-divider);
}

.entry-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  color: var(--fs-text);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.entry-title a {
  color: var(--fs-text);
}

.entry-title a:hover {
  color: var(--fs-primary);
}

.entry-meta {
  font-size: 0.85rem;
  color: var(--fs-text-muted);
}

.entry-meta a {
  color: var(--fs-primary);
}

.entry-content {
  font-size: 1rem;
  color: var(--fs-text);
  line-height: 1.8;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  color: var(--fs-text);
  margin: 2.5rem 0 0.75rem;
}

.entry-content h2 { font-size: 1.6rem; }
.entry-content h3 { font-size: 1.3rem; }
.entry-content h4 { font-size: 1.1rem; }

.entry-content p {
  margin-bottom: 1.25rem;
}

.entry-content blockquote {
  border-left: 4px solid var(--fs-accent);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: rgba(200, 134, 10, 0.04);
  border-radius: 0 var(--fs-radius-md) var(--fs-radius-md) 0;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: var(--fs-text);
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 1.25rem 1.5rem;
}

.entry-content li {
  margin-bottom: 0.4rem;
}

.entry-content img {
  border-radius: var(--fs-radius-md);
  margin: 1.5rem 0;
}

/* Post navigation */
.post-navigation,
.posts-navigation {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fs-divider);
}

.nav-links {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.nav-links a {
  font-weight: 600;
  color: var(--fs-primary);
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR / WIDGETS
   ════════════════════════════════════════════════════════════════ */
.widget {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-card-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--fs-shadow-sm);
}

.widget-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fs-text);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--fs-divider);
}

/* ════════════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  background: var(--fs-white);
  color: var(--fs-text);
  border: 1.5px solid var(--fs-border-light);
  border-radius: var(--fs-radius-md);
  padding: 0.7rem 1rem;
  width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--fs-primary);
  box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.12);
}

/* Search form */
.search-form {
  display: flex;
  gap: 0.5rem;
}

.search-form .search-field {
  flex: 1;
}

.search-form .search-submit {
  background: var(--fs-primary);
  color: var(--fs-text-on-green);
  border: none;
  padding: 0.7rem 1.25rem;
  border-radius: var(--fs-radius-md);
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.search-form .search-submit:hover {
  background: var(--fs-earth);
}

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--fs-white);
  border-top: 1px solid var(--fs-border-light);
  padding: 3rem 1.5rem 1.5rem;
}

.footer-inner {
  max-width: var(--fs-max-width);
  margin: 0 auto;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--fs-divider);
  flex-wrap: wrap;
}

.footer-brand {
  flex-shrink: 0;
}

.footer-logo {
  height: 48px;
  width: auto;
}

.footer-nav-columns {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  flex: 1;
}

.footer-col h4.footer-col-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fs-text);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 0.4rem;
}

.footer-col ul li a {
  font-size: 0.9rem;
  color: var(--fs-text-muted);
  transition: color 0.25s ease;
}

.footer-col ul li a:hover {
  color: var(--fs-primary);
}

/* Footer scripture */
.footer-scripture {
  padding: 1.5rem 0;
}

.footer-scripture blockquote {
  border-left: 4px solid var(--fs-accent);
  padding: 0.75rem 1.25rem;
  margin: 0 auto;
  max-width: 600px;
  text-align: center;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--fs-text-light);
}

.footer-scripture cite {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--fs-text-muted);
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
}

/* Footer bottom */
.footer-bottom {
  text-align: center;
  padding-top: 1.25rem;
}

.footer-bottom p {
  font-size: 0.82rem;
  color: var(--fs-text-muted);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   404 PAGE
   ════════════════════════════════════════════════════════════════ */
.error-404 {
  text-align: center;
  padding: 5rem 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.error-404 .error-code {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 5rem;
  font-weight: 700;
  color: var(--fs-accent);
  line-height: 1;
  margin-bottom: 1rem;
}

.error-404 h1 {
  margin-bottom: 1rem;
}

.error-404 p {
  color: var(--fs-text-light);
  margin-bottom: 2rem;
}

/* ════════════════════════════════════════════════════════════════
   PAGE TEMPLATES — shared styles
   ════════════════════════════════════════════════════════════════ */
.page-hero {
  background: linear-gradient(180deg, var(--fs-bg) 0%, #F3EDE3 100%);
  padding: 3rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid var(--fs-divider);
}

.page-hero-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--fs-text);
  margin-bottom: 0.5rem;
}

.page-hero-subtitle {
  font-size: 1.05rem;
  color: var(--fs-text-light);
  max-width: 600px;
  margin: 0 auto;
}

/* Filter bar (worksheets, games) */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem;
}

.filter-btn {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: var(--fs-radius-full);
  border: 1.5px solid var(--fs-border-light);
  background: var(--fs-white);
  color: var(--fs-text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--fs-primary);
  color: var(--fs-text-on-green);
  border-color: var(--fs-primary);
}

/* Pricing cards (membership) */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.pricing-card {
  background: var(--fs-card-bg);
  border: 2px solid var(--fs-border-light);
  border-radius: var(--fs-card-radius);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--fs-card-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fs-card-shadow-hover);
}

.pricing-card.featured {
  border-color: var(--fs-primary);
  box-shadow: var(--fs-shadow-lg);
}

.pricing-card-price {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--fs-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.pricing-card-period {
  font-size: 0.85rem;
  color: var(--fs-text-muted);
  margin-bottom: 1.5rem;
}

.pricing-card-features {
  list-style: none;
  text-align: left;
  margin-bottom: 2rem;
}

.pricing-card-features li {
  padding: 0.4rem 0;
  font-size: 0.92rem;
  color: var(--fs-text-light);
  border-bottom: 1px solid var(--fs-divider);
  padding-left: 1.5rem;
  position: relative;
}

.pricing-card-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--fs-badge-free);
  font-weight: 700;
}

/* Store product cards */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.store-card {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-card-radius);
  overflow: hidden;
  box-shadow: var(--fs-card-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.store-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--fs-card-shadow-hover);
}

.store-card-img {
  aspect-ratio: 4 / 3;
  background: #f0ebe3;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dark mode: the cover/placeholder area was a hardcoded light parchment that
   stayed bright on the dark page (Phase 9 fix). Flip it to the dark card tone. */
[data-theme="dark"] .store-card-img { background: #211a13; }

.store-card-body {
  padding: 1.25rem;
}

.store-card-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.store-card-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fs-primary);
  margin-bottom: 0.75rem;
}

/* ════════════════════════════════════════════════════════════════
   GAME LAUNCHER CARDS — used in hero section
   ════════════════════════════════════════════════════════════════ */
.game-launcher-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: 1.5rem;
  justify-content: center;
  margin: 0 auto;
}

.game-launcher-card {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-card-radius);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--fs-card-shadow);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  min-height: 140px;
}

.game-launcher-card--readers {
  border-left: 4px solid var(--fs-primary);
}

.game-launcher-card--thinkers {
  border-left: 4px solid var(--fs-accent);
}

.game-launcher-card:hover {
  box-shadow: var(--fs-shadow-lg);
  transform: translateY(-3px);
}

.game-launcher-card:hover .game-logo-float {
  animation-duration: 2s;
}

.game-launcher-card:hover .game-logo-float-delayed {
  animation-duration: 2s;
}

.game-launcher-card .game-logo-img {
  width: 180px;
  min-width: 180px;
  height: auto;
  filter: drop-shadow(2px 3px 6px rgba(61, 28, 2, 0.16));
  flex-shrink: 0;
}

.game-launcher-card .game-card-content {
  flex: 1;
  min-width: 0;
}

.game-launcher-card .game-card-content h3 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fs-text);
  margin: 0 0 0.3rem;
  line-height: 1.3;
}

.game-launcher-card .badge-row {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.game-launcher-card .game-desc {
  font-size: 0.82rem;
  color: var(--fs-text-muted);
  line-height: 1.5;
  margin-bottom: 0.6rem;
}

.game-launcher-card .btn {
  width: 100%;
}

.game-launcher-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.88rem;
  color: var(--fs-text-muted);
  font-style: italic;
}

.game-launcher-footer a {
  color: var(--fs-primary);
  font-weight: 600;
  font-style: normal;
}

/* ════════════════════════════════════════════════════════════════
   GAME PAGE — Picker Hero, Sections, Iframe Embeds
   ════════════════════════════════════════════════════════════════ */

/* Game picker cards in hero */
.game-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 560px));
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem auto 0;
  max-width: 1140px;
}

.game-picker-card {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-card-radius);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--fs-card-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  height: 120px;
}

.game-picker-card--readers { border-left: 4px solid var(--fs-primary); }
.game-picker-card--thinkers { border-left: 4px solid var(--fs-accent); }

.game-picker-card:hover {
  box-shadow: var(--fs-shadow-lg);
  transform: translateY(-2px);
}

.game-picker-card .picker-logo {
  width: 200px;
  min-width: 200px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(1px 2px 4px rgba(61, 28, 2, 0.14));
}

.game-picker-card .picker-info {
  flex: 1;
  min-width: 0;
}

.game-picker-card .picker-info h3 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fs-text);
  margin: 0 0 0.2rem;
  line-height: 1.2;
}

.game-picker-card .picker-info .picker-meta {
  font-size: 0.78rem;
  color: var(--fs-text-muted);
  margin-bottom: 0.35rem;
}

.game-picker-card .picker-info .picker-desc {
  font-size: 0.82rem;
  color: var(--fs-text-light);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.game-picker-card .btn-play {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: var(--fs-radius-md);
  background: var(--fs-primary);
  color: var(--fs-text-on-green);
  text-decoration: none;
  transition: background 0.25s ease;
  border: none;
  cursor: pointer;
}

.game-picker-card .btn-play:hover {
  background: var(--fs-earth);
  color: var(--fs-text-on-green);
}

/* Game section — slim header + full-width iframe */
.game-section {
  padding: 2rem 1.5rem 2.5rem;
}

.game-section-inner {
  max-width: var(--fs-max-width);
  margin: 0 auto;
}

/* Slim inline header: logo 80px + title on same line */
.game-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.game-section-header .game-header-logo {
  width: 160px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(1px 2px 4px rgba(61, 28, 2, 0.14));
}

.game-section-header .game-header-text h2 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fs-text);
  margin: 0;
  line-height: 1.2;
}

.game-section-header .game-header-text p {
  font-size: 0.88rem;
  color: var(--fs-text-muted);
  margin: 0.15rem 0 0;
  font-style: italic;
}

/* Game iframe container */
.game-iframe-wrap {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 500px;
  max-height: 900px;
  background: #f0ebe3;
  border-radius: var(--fs-card-radius);
  overflow: hidden;
  box-shadow: var(--fs-shadow-md);
  border: 1px solid var(--fs-border-light);
}

.game-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.game-iframe-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #f0ebe3;
  z-index: 2;
  transition: opacity 0.5s ease;
}

.game-iframe-spinner.loaded {
  opacity: 0;
  pointer-events: none;
}

.game-iframe-spinner .spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--fs-border-light);
  border-top-color: var(--fs-primary);
  border-radius: 50%;
  animation: spinRing 0.8s linear infinite;
}

@keyframes spinRing {
  to { transform: rotate(360deg); }
}

.game-iframe-spinner span {
  font-size: 0.85rem;
  color: var(--fs-text-muted);
}

/* Below-iframe info strip */
.game-below-iframe {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--fs-text-muted);
}

.game-below-iframe .badge {
  font-size: 0.68rem;
}

/* Locked premium banner below iframe */
.game-locked-banner {
  background: rgba(200, 134, 10, 0.08);
  border: 1px solid var(--fs-accent);
  border-radius: var(--fs-card-radius);
  padding: 1.25rem 2rem;
  text-align: center;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.game-locked-banner .lock-icon-lg {
  width: 32px;
  height: 32px;
  opacity: 0.7;
  flex-shrink: 0;
}

.game-locked-banner p {
  font-size: 0.9rem;
  color: var(--fs-text-light);
  margin: 0;
}

.game-locked-banner .btn {
  flex-shrink: 0;
}

/* Vine divider between game sections */
.vine-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  overflow: hidden;
}

.vine-divider svg {
  width: 100%;
  max-width: 600px;
  height: auto;
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE TOGGLE
   ════════════════════════════════════════════════════════════════ */
.theme-toggle {
  background: none;
  border: 1.5px solid var(--fs-border-light);
  border-radius: var(--fs-radius-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  flex-shrink: 0;
  color: var(--fs-text-muted);
  margin-left: 0.5rem;
}

.theme-toggle:hover {
  border-color: var(--fs-accent);
  color: var(--fs-accent);
  background: rgba(200, 134, 10, 0.06);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon { width: 18px; height: 18px; }

.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ════════════════════════════════════════════════════════════════
   STATS COUNTER SECTION
   ════════════════════════════════════════════════════════════════ */
.stats-section {
  background: var(--fs-primary);
  padding: 3.5rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><path d="M30 0v60M0 30h60" stroke="%23ffffff" stroke-width="0.5" opacity="0.04"/></svg>');
  pointer-events: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: var(--fs-max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--fs-text-on-green);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-label {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fs-text-on-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

.stat-detail {
  font-size: 0.82rem;
  color: rgba(249, 245, 239, 0.65);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   SCRIPTURE FLIP CARDS
   ════════════════════════════════════════════════════════════════ */
.flip-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: var(--fs-max-width);
  margin: 0 auto;
}

.flip-card {
  perspective: 800px;
  cursor: pointer;
  height: 200px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--fs-card-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
}

.flip-card-front {
  background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-primary-dark) 100%);
  color: var(--fs-text-on-green);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--fs-card-shadow);
}

.flip-card-back {
  background: var(--fs-card-bg);
  border: 1px solid var(--fs-border-light);
  box-shadow: var(--fs-card-shadow);
  transform: rotateY(180deg);
}

.flip-card-cross {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.flip-card-ref {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.flip-card-hint {
  font-size: 0.72rem;
  margin-top: 0.75rem;
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.flip-card-verse {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--fs-text);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.flip-card-cite {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--fs-accent);
  font-weight: 700;
}

.flip-card.revealed .flip-card-front {
  background: linear-gradient(135deg, var(--fs-accent) 0%, #A06E08 100%);
}

.flip-card-progress {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--fs-text-muted);
}

.flip-card-progress strong {
  color: var(--fs-primary);
}

/* ════════════════════════════════════════════════════════════════
   STAGGERED ENTRANCE — grid children
   ════════════════════════════════════════════════════════════════ */
.stagger-children > .fade-up:nth-child(1) { transition-delay: 0s; }
.stagger-children > .fade-up:nth-child(2) { transition-delay: 0.1s; }
.stagger-children > .fade-up:nth-child(3) { transition-delay: 0.2s; }
.stagger-children > .fade-up:nth-child(4) { transition-delay: 0.3s; }
.stagger-children > .fade-up:nth-child(5) { transition-delay: 0.4s; }
.stagger-children > .fade-up:nth-child(6) { transition-delay: 0.5s; }

/* ════════════════════════════════════════════════════════════════
   ANIMATIONS — subtle, organic, slow
   ════════════════════════════════════════════════════════════════ */
/* Game logo floating animation */
@keyframes gameLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.game-logo-float {
  animation: gameLogoFloat 3s ease-in-out infinite;
}

.game-logo-float-delayed {
  animation: gameLogoFloat 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-word {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero-subtitle-reveal,
  .hero-buttons-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  .header-logo-row {
    padding: 0;
  }

  .site-logo-img {
    width: 100%;
  }

  .header-nav-row {
    position: relative;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--fs-white);
    border-bottom: 1px solid var(--fs-border-light);
    box-shadow: var(--fs-shadow-md);
    padding: 0.75rem;
    gap: 0.15rem;
    /* Above the embedded game/tool iframes, and scrollable so a long menu
       (with accordions expanded) is always fully reachable even though body
       scroll is locked while the drawer is open. */
    z-index: 1002;
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu li a {
    padding: 0.65rem 1rem;
    display: block;
  }

  .hero-section {
    padding: 3rem 1rem 2.5rem;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-nav-columns {
    justify-content: center;
    text-align: center;
  }

  .section {
    padding: 2.5rem 1rem;
  }

  /* Game launcher cards stack on mobile */
  .game-launcher-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }

  .game-launcher-card {
    min-height: auto;
  }

  /* Game picker cards stack on mobile */
  .game-picker-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .game-picker-card {
    height: auto;
    min-height: 100px;
  }

  .game-picker-card .picker-logo {
    width: 140px;
    min-width: 140px;
  }

  /* Game iframe on mobile */
  .game-iframe-wrap {
    height: 500px;
    min-height: 400px;
  }

  .game-section-header .game-header-logo {
    width: 110px;
  }

  .game-locked-banner {
    flex-direction: column;
    text-align: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .flip-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .flip-card {
    height: 180px;
  }

  /* ════════════════════════════════════════════════════════════════
     TIGHTENED MOBILE HEADER (added 2026-05-31)
     The desktop header is a tall two-row + banner-logo + scripture
     ticker stack. On mobile that ate ~200px of vertical space before
     any content — terrible inside iframes and just cramped in general.
     Mobile now: compact logo row (40px) + nav row (44px) + ticker
     hidden = ~84px total instead of ~200px. Sub-menus collapse and
     accordion-expand when the parent has .sub-menu-open (existing JS
     handles the toggle).
     ════════════════════════════════════════════════════════════════ */

  /* Logo row: small centered logo, tighter padding. */
  .header-logo-row {
    padding: 0.4rem 1rem;
    min-height: 40px;
  }
  .site-logo-img {
    width: 180px;
    max-width: 180px;
    height: auto;
    margin: 0 auto;
  }

  /* Nav row: tighter, no extra border weight. */
  .header-nav-row {
    padding: 0.25rem 0.75rem;
    border-top: 1px solid var(--fs-border-light);
    min-height: 44px;
    gap: 0.5rem;
  }

  /* Scripture ticker is lovely but uses ~50px we don't have on mobile. */
  .scripture-ticker { display: none; }

  /* Mega-menu parents become accordion rows in the drawer. */
  .nav-menu li.menu-item-has-children > .mega-menu-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .nav-menu li.menu-item-has-children > .mega-menu-parent .dropdown-arrow {
    transition: transform 0.25s ease;
    font-size: 0.9rem;
  }
  .nav-menu li.menu-item-has-children.sub-menu-open > .mega-menu-parent .dropdown-arrow {
    transform: rotate(180deg);
  }
  /* Sub-menu collapsed by default on mobile; expanded only when
     .sub-menu-open is on the parent <li>. Existing JS in main.js
     line 415-429 already toggles this class on tap.
     CRITICAL: the desktop .sub-menu rule sets dark-green background +
     cream text + position:absolute + opacity:0 + visibility:hidden +
     pointer-events:none + transform. ALL of those have to be reset
     on mobile or the drawer opens an invisible dropdown with
     cream-on-white text. Fix 2026-05-31 (round 2). */
  .nav-menu li.menu-item-has-children > .sub-menu {
    /* Collapsed-by-default state */
    display: none;
    /* Hard reset of every desktop property that breaks the mobile drawer */
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    border-radius: 0;
    /* Mobile drawer styling */
    list-style: none;
    padding: 0.2rem 0 0.4rem 0.75rem;
    margin: 0 0 0 0.65rem;
    border-left: 2px solid var(--fs-border-light);
  }
  .nav-menu li.menu-item-has-children.sub-menu-open > .sub-menu {
    display: block;
  }
  /* Sub-menu links: dark text on the white drawer background.
     Overrides the desktop cream (#f5f0e8) text color. */
  .nav-menu .sub-menu li a {
    padding: 0.55rem 0.85rem;
    font-size: 0.92rem;
    color: var(--fs-text);
    font-weight: 500;
    white-space: normal;
    background: transparent;
    display: block;
  }
  .nav-menu .sub-menu li a:hover {
    color: var(--fs-primary);
    background: rgba(45, 80, 22, 0.06);
  }
  .nav-menu .sub-menu li.coming-soon-item {
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    color: var(--fs-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav-menu .sub-menu li.coming-soon-item .coming-soon-label {
    font-size: 0.72rem;
    color: var(--fs-text-muted);
    font-style: italic;
  }

  /* Drawer itself: tighter and full-width so submenus don't overflow. */
  .nav-menu {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 0.5rem 0.75rem 1rem;
    border-top: 1px solid var(--fs-border-light);
  }
}

/* ════════════════════════════════════════════════════════════════
   ULTRA-COMPACT HEADER ON FULL-SCREEN IFRAME PAGES (any viewport)
   Targets the 5 fullscreen-iframe templates (3 games + HARVEST app +
   Bible Card Maker). The scripture ticker is hidden so the inner app
   gets every pixel of vertical space. The header stays present and
   working for navigation — just stripped to its essentials.
   Added 2026-05-31 alongside the mobile-nav tighten.
   ════════════════════════════════════════════════════════════════ */
body.tmpl-template-game-readers .scripture-ticker,
body.tmpl-template-game-thinkers .scripture-ticker,
body.tmpl-template-game-grammar .scripture-ticker,
body.tmpl-template-harvest-app .scripture-ticker,
body.tmpl-template-bible-cards .scripture-ticker {
  display: none !important;
}
body.tmpl-template-game-readers .header-logo-row,
body.tmpl-template-game-thinkers .header-logo-row,
body.tmpl-template-game-grammar .header-logo-row,
body.tmpl-template-harvest-app .header-logo-row,
body.tmpl-template-bible-cards .header-logo-row {
  padding: 0.25rem 1rem;
}
body.tmpl-template-game-readers .site-logo-img,
body.tmpl-template-game-thinkers .site-logo-img,
body.tmpl-template-game-grammar .site-logo-img,
body.tmpl-template-harvest-app .site-logo-img,
body.tmpl-template-bible-cards .site-logo-img {
  width: 220px;
  max-width: 220px;
}
body.tmpl-template-game-readers .header-nav-row,
body.tmpl-template-game-thinkers .header-nav-row,
body.tmpl-template-game-grammar .header-nav-row,
body.tmpl-template-harvest-app .header-nav-row,
body.tmpl-template-bible-cards .header-nav-row {
  padding: 0.15rem 1rem;
}

/* ════════════════════════════════════════════════════════════════
   UNIVERSAL MOBILE QUALITY (added 2026-05-31)
   Not gated on a max-width because most of these are touch-first
   defaults that should apply on every touchscreen — phones, iPads,
   touchscreen laptops. None of them hurt the desktop experience.
   ════════════════════════════════════════════════════════════════ */

/* Kill the bright iOS/Android tap-flash on every interactive element.
   Replaces it with a subtle accent flash on links/buttons. */
* { -webkit-tap-highlight-color: rgba(45, 80, 22, 0.12); }
button, a, .btn, [role="button"], summary, label, input, select, textarea {
  -webkit-tap-highlight-color: rgba(45, 80, 22, 0.18);
}

/* Use dynamic viewport height where supported so iOS Safari's URL bar
   doesn't eat the bottom of the screen on fullscreen iframe pages. */
@supports (height: 100dvh) {
  body.tmpl-template-game-readers,
  body.tmpl-template-game-thinkers,
  body.tmpl-template-game-grammar,
  body.tmpl-template-game-readers .game-fullscreen-wrap,
  body.tmpl-template-game-thinkers .game-fullscreen-wrap,
  body.tmpl-template-game-grammar .game-fullscreen-wrap,
  body.tmpl-template-harvest-app,
  body.tmpl-template-harvest-app .game-fullscreen-wrap,
  body.tmpl-template-bible-cards,
  body.tmpl-template-bible-cards .game-fullscreen-wrap {
    min-height: 100dvh;
  }
}

/* Respect notched phones (iPhone X+) — keep header content out of the
   safe area so the logo doesn't sit under the status bar. */
.site-header {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.site-footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Form inputs at exactly 16px on mobile — anything less triggers iOS
   Safari's auto-zoom when the field receives focus. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* Hamburger -> X animation when drawer is open. The button already has
   aria-expanded toggled by JS — use that as the visual cue. */
.menu-toggle[aria-expanded="true"] .hamburger-icon {
  background: transparent;
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Lock body scroll when the mobile drawer is open so the user isn't
   scrolling content behind a fixed overlay. JS adds .menu-open to body
   when the drawer opens. */
body.menu-open {
  overflow: hidden;
  /* Preserve scroll position on iOS — set on body via JS where needed */
}

/* Smooth momentum scrolling inside the mobile drawer (long submenus). */
.nav-menu.active {
  -webkit-overflow-scrolling: touch;
}

/* Tap-target minimum sizes — Apple/Material recommend 44/48px.
   The .menu-toggle is a touch primary; ensure both it and the theme
   toggle hit the target. */
.menu-toggle,
.theme-toggle {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 480px) {
  html {
    font-size: 16px;
  }

  /* Safety net — prevent horizontal overflow on phones */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .hero-section {
    padding: 2.5rem 1rem 2rem;
  }

  .hero-title {
    font-size: 1.75rem;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    max-width: 100%;
    padding: 0 0.25rem;
  }

  .hero-lesson-link {
    font-size: 0.9rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 300px;
  }

  .section {
    padding: 2rem 0.75rem;
  }

  .section-inner {
    max-width: 100%;
    overflow: hidden;
  }

  .section-title {
    font-size: 1.4rem;
  }

  /* Curriculum block */
  .curriculum-primary {
    padding: 24px 16px;
  }

  .curriculum-primary-logo {
    width: 80px;
    height: 80px;
  }

  .curriculum-primary-title {
    font-size: 1.2rem;
  }

  .curriculum-primary-desc {
    font-size: 0.9rem;
  }

  /* Copywork creator card */
  .copywork-creator-card {
    padding: 20px 16px;
  }

  .copywork-creator-inner {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  .copywork-title {
    font-size: 17px;
  }

  .copywork-desc {
    font-size: 13px;
  }

  /* Games strip */
  .games-strip-inner {
    padding: 0 16px;
    gap: 16px;
  }

  .games-strip-items {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }

  .games-strip-item {
    width: 100%;
    justify-content: space-between;
  }

  .games-strip-logo {
    height: 56px;
  }

  /* Features grid */
  .feature-item {
    padding: 0;
  }

  .feature-text {
    font-size: 0.9rem;
  }

  /* Stats grid */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .stat-detail {
    font-size: 0.7rem;
  }

  /* Flip cards */
  .flip-card-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .flip-card {
    height: 150px;
  }

  .flip-card-verse {
    font-size: 0.8rem;
  }

  .flip-card-ref {
    font-size: 0.8rem;
  }

  /* Email opt-in */
  .email-optin-form {
    flex-direction: column;
  }

  /* Scripture ticker */
  .scripture-ticker {
    font-size: 0.8rem;
    padding: 6px 12px;
  }

  .scripture-text {
    font-size: 0.8rem;
  }

  /* Footer */
  .footer-inner {
    padding: 2rem 1rem;
  }

  .footer-nav-columns {
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-logo {
    width: 120px;
  }

  .footer-scripture blockquote {
    font-size: 0.9rem;
    padding: 1rem;
  }
}

@media (max-width: 860px) {
  body.faith-home .hero-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body.faith-home .hero-inner {
    max-width: 100%;
    overflow: hidden;
  }
  body.faith-home .hero-kicker {
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    line-height: 1.45;
  }
  body.faith-home .hero-title {
    max-width: 20rem;
    font-size: clamp(1.55rem, 6.2vw, 2rem);
    line-height: 1.16;
  }
  body.faith-home .hero-word {
    display: inline;
    white-space: normal;
  }
  body.faith-home .hero-subtitle {
    max-width: 21rem;
    overflow-wrap: anywhere;
  }
  body.faith-home .start-here-inner {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  body.tmpl-template-games .games-hub-hero h1 {
    max-width: 21rem;
    font-size: clamp(1.7rem, 6vw, 2.15rem);
    line-height: 1.16;
  }
  body.tmpl-template-games .games-hub-hero p {
    max-width: 21rem;
    overflow-wrap: anywhere;
  }
  body.tmpl-template-games .games-hub-grid {
    box-sizing: border-box;
    grid-template-columns: 1fr;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  body.tmpl-template-games .game-hub-card {
    box-sizing: border-box;
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    width: 100%;
  }
  body.tmpl-template-games .game-hub-card * {
    max-width: 100%;
  }
  body.tmpl-template-games .game-hub-card p,
  body.tmpl-template-games .game-hub-card li {
    overflow-wrap: anywhere;
  }
}

/* ════════════════════════════════════════════════════════════════
   FULL-SCREEN GAME PAGES
   ════════════════════════════════════════════════════════════════ */
body.tmpl-template-game-readers,
body.tmpl-template-game-thinkers,
body.tmpl-template-game-grammar,
body.tmpl-template-harvest-app,
body.tmpl-template-bible-cards {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.game-fullscreen {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.game-fullscreen-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.game-fullscreen-wrap iframe {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
  min-height: 0;
}

.game-fullscreen .game-iframe-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--fs-bg);
  z-index: 2;
  transition: opacity 0.5s ease;
}

.game-fullscreen .game-iframe-spinner.loaded {
  opacity: 0;
  pointer-events: none;
}

[data-theme="dark"] .game-fullscreen .game-iframe-spinner {
  background: #1A1410;
}

/* Guaranteed escape hatch on fullscreen embed pages (games + tools, which have
   no site footer). Fixed, always above the iframe, large tap target, returns
   home. Injected by initFullscreenExit() in main.js for every fullscreen body
   class. Sits below the open mobile nav drawer (z 1002) but above everything
   else, so it never traps the user. */
.fs-exit-btn {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: var(--fs-primary);
  color: var(--fs-text-on-green);
  font-family: var(--fs-heading-font);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--fs-radius-full);
  box-shadow: var(--fs-shadow-lg);
  opacity: 0.92;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fs-exit-btn:hover,
.fs-exit-btn:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  color: var(--fs-text-on-green);
  outline: 3px solid var(--fs-accent);
  outline-offset: 2px;
}
.fs-exit-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════
   COPYWORK CREATOR — FULLSCREEN IFRAME
   ════════════════════════════════════════════════════════════════ */
/* Tabernacle Prayer Guide — reuses the shared .game-fullscreen markup, so only
   the body-level flex + slim-header rules need declaring (mirrors Bible Cards). */
body.tmpl-template-prayer-guide {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.tmpl-template-prayer-guide .scripture-ticker { display: none !important; }
body.tmpl-template-prayer-guide .header-logo-row { padding: 0.25rem 1rem; }
body.tmpl-template-prayer-guide .site-logo-img { width: 220px; max-width: 220px; }
body.tmpl-template-prayer-guide .header-nav-row { padding: 0.15rem 1rem; }
@supports (height: 100dvh) {
  body.tmpl-template-prayer-guide,
  body.tmpl-template-prayer-guide .game-fullscreen-wrap { min-height: 100dvh; }
}
@media (max-width: 768px) {
  body.tmpl-template-prayer-guide .header-logo-row { padding: 0.2rem 0.75rem; }
  body.tmpl-template-prayer-guide .site-logo-img { max-width: 150px; width: 150px; }
  body.tmpl-template-prayer-guide .header-nav-row { min-height: 38px; padding: 0.15rem 0.75rem; }
  body.tmpl-template-prayer-guide .menu-toggle,
  body.tmpl-template-prayer-guide .theme-toggle { min-height: 38px; min-width: 38px; }
  body.tmpl-template-prayer-guide .game-fullscreen-wrap { min-height: calc(100svh - 86px); }
}

body.tmpl-template-copywork-creator {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.copywork-fullscreen {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.copywork-iframe-wrap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.copywork-iframe-wrap iframe {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
  min-height: 0;
}

.copywork-iframe-wrap .copywork-iframe-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--fs-bg);
  z-index: 2;
  transition: opacity 0.5s ease;
}

.copywork-iframe-wrap .copywork-iframe-spinner.loaded {
  opacity: 0;
  pointer-events: none;
}

[data-theme="dark"] .copywork-iframe-wrap .copywork-iframe-spinner {
  background: #1A1410;
}

/* ════════════════════════════════════════════════════════════════
   GAMES HUB PAGE
   ════════════════════════════════════════════════════════════════ */
.games-hub-hero {
  text-align: center;
  padding: 3rem 1.5rem 2rem;
}

.games-hub-hero h1 {
  font-family: var(--fs-heading-font);
  font-size: 2.4rem;
  color: var(--fs-earth);
  margin-bottom: 0.5rem;
}

.games-hub-hero p {
  font-size: 1.1rem;
  color: var(--fs-text-light);
  max-width: 600px;
  margin: 0 auto;
}

.games-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  max-width: var(--fs-max-width);
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

.game-hub-card {
  background: var(--fs-white);
  border-radius: var(--fs-card-radius);
  box-shadow: var(--fs-shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fs-border-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fs-shadow-lg);
}

.game-hub-card-header {
  text-align: center;
  padding: 2rem 1.5rem 1rem;
}

.game-hub-card-header img {
  width: 180px;
  height: auto;
  margin-bottom: 0.75rem;
}

/* Coordinated 3-logo set (2026-05-29): square logos with wordmarks
   built in. Sized larger than the legacy treatment because they ARE
   the wordmark — no need for a separate logo-*-wordmark.png below. */
.game-hub-card-header .game-hub-mark {
  width: 200px;
  height: 200px;
  margin: 0 auto 1rem;
  display: block;
  border-radius: 22px;
  box-shadow: var(--fs-shadow-md);
  background: transparent;
}

.game-hub-card-header h2 {
  font-family: var(--fs-heading-font);
  font-size: 1.6rem;
  color: var(--fs-earth);
  margin: 0 0 0.25rem;
}

.game-hub-card-header .badge-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.game-hub-card-body {
  padding: 0 1.5rem 1.5rem;
  flex: 1;
}

.game-hub-card-body p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--fs-text);
  margin-bottom: 0.75rem;
}

.game-hub-card-body .method-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
}

.game-hub-card-body .method-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--fs-text);
}

.game-hub-card-body .method-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--fs-primary);
  font-weight: 700;
}

.game-hub-card-footer {
  padding: 0 1.5rem 2rem;
  text-align: center;
}

.game-hub-card-footer .btn {
  width: 100%;
  max-width: 280px;
}

/* Why Different section on games hub */
.games-why-section {
  background: var(--fs-primary);
  color: #fff;
  padding: 3rem 1.5rem;
  text-align: center;
}

.games-why-section h2 {
  font-family: var(--fs-heading-font);
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.games-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: var(--fs-max-width);
  margin: 0 auto;
}

.games-why-item h3 {
  font-family: var(--fs-heading-font);
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.games-why-item p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

/* Games hub membership CTA */
.games-membership-cta {
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.games-membership-cta h2 {
  font-family: var(--fs-heading-font);
  font-size: 1.6rem;
  color: var(--fs-earth);
  margin-bottom: 0.75rem;
}

.games-membership-cta p {
  color: var(--fs-text-light);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .games-hub-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .games-why-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    gap: 1.5rem;
  }

  .games-hub-hero h1 {
    font-size: 1.8rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   MEGA MENU DROPDOWNS
   ════════════════════════════════════════════════════════════════ */
.menu-item-has-children {
  position: relative;
}

.mega-menu-parent {
  cursor: pointer;
}

.dropdown-arrow {
  font-size: 0.65em;
  margin-left: 0.15rem;
  display: inline-block;
  transition: transform 0.2s ease;
}

.menu-item-has-children .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 200px;
  background: #2d4a1e;
  border-radius: 0 0 var(--fs-radius-md) var(--fs-radius-md);
  box-shadow: var(--fs-shadow-lg);
  padding: 0.5rem 0;
  z-index: 1001;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.menu-item-has-children:hover > .sub-menu,
/* Keyboard support: reveal when the parent or any sub-menu link is focused. */
.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.sub-menu li a {
  display: block;
  padding: 0.55rem 1.25rem;
  color: #f5f0e8;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
  border-radius: 0;
  background: transparent;
}

.sub-menu li a:hover {
  color: #c9a84c;
  background: rgba(201, 168, 76, 0.1);
}

.coming-soon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.25rem;
  color: #888888;
  font-size: 0.88rem;
  cursor: default;
  pointer-events: none;
  gap: 0.75rem;
}

.coming-soon-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #666666;
  white-space: nowrap;
}

[data-theme="dark"] .menu-item-has-children .sub-menu {
  background: #1a2e10;
}

[data-theme="dark"] .sub-menu li a {
  color: #d0c8b8;
}

[data-theme="dark"] .sub-menu li a:hover {
  color: #c9a84c;
}

/* ════════════════════════════════════════════════════════════════
   HERO LESSON LINK
   ════════════════════════════════════════════════════════════════ */
.hero-lesson-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  color: #c9a84c;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.hero-lesson-link:hover {
  text-decoration: underline;
  color: #c9a84c;
}

/* ════════════════════════════════════════════════════════════════
   CURRICULUM BLOCKS
   ════════════════════════════════════════════════════════════════ */
.curriculum-primary {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
  padding: 40px 32px;
  background: #f0ebe0;
  border-radius: 12px;
}

.curriculum-primary-logo {
  height: 80px;
  width: auto;
  margin: 0 auto 16px;
}

.curriculum-primary-title {
  font-size: 22px;
  color: #2d4a1e;
  margin-bottom: 12px;
}

.curriculum-primary-desc {
  font-size: 15px;
  color: #3a3228;
  line-height: 1.6;
  margin-bottom: 20px;
}

.curriculum-secondary-row {
  display: flex;
  gap: 24px;
  max-width: 780px;
  margin: 0 auto;
}

.curriculum-secondary-block {
  flex: 1;
  text-align: center;
  padding: 28px 24px;
  background: #f0ebe0;
  border-radius: 10px;
}

.curriculum-secondary-logo {
  height: 80px;
  width: auto;
  margin: 0 auto 12px;
}

.curriculum-secondary-block h4 {
  color: #2d4a1e;
  margin-bottom: 4px;
}

.curriculum-secondary-sub {
  font-style: italic;
  color: #c9a84c;
  font-size: 13px;
  margin-bottom: 8px;
}

.curriculum-secondary-desc {
  font-size: 14px;
  color: #3a3228;
  line-height: 1.5;
  margin-bottom: 16px;
}

.curriculum-primary .badge-coming-soon,
.curriculum-secondary-block .badge-coming-soon {
  display: inline-block;
  background: #c9a84c;
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 20px;
}

@media (max-width: 640px) {
  .curriculum-secondary-row { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════
   GAMES STRIP
   ════════════════════════════════════════════════════════════════ */
.games-strip {
  background: #f0ebe0;
  padding: 28px 0;
  border-top: 1px solid #d9d0bf;
  border-bottom: 1px solid #d9d0bf;
}

.games-strip-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 24px;
}

/* Legacy — kept so the previous label markup doesn't break, but the
   new strip uses .games-strip-heading + .games-strip-subheading. */
.games-strip-label {
  display: none;
}

/* Updated 2026-05-29 (2nd revision) — coordinated 3-logo set + readable
   labels. The wordmark inside each logo at 180px is still small from a
   distance, so each tile renders: logo tile + game-name caption +
   program/grade meta + a Play button that names the game. The strip
   container has a proper heading + subheading instead of just a label. */

.games-strip-header {
  text-align: center;
  margin-bottom: 1.5rem;
  width: 100%;
}
.games-strip-heading {
  font-family: var(--fs-heading-font);
  font-size: 1.6rem;
  color: var(--fs-primary-dark);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.games-strip-subheading {
  font-size: 0.95rem;
  color: var(--fs-text-light);
  margin: 0;
  line-height: 1.5;
}

.games-strip-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 240px));
  justify-content: center;
  align-items: stretch;   /* equal-height cells so the buttons bottom-align */
  gap: 28px;
}
.games-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
}
.games-strip-tile {
  display: block;
  border-radius: 22px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 18px rgba(45, 80, 22, 0.12);
  line-height: 0;
}
.games-strip-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(45, 80, 22, 0.22);
}
.games-strip-logo {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: contain;
}
.games-strip-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  margin-top: 2px;
}
.games-strip-name {
  font-family: var(--fs-heading-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fs-primary-dark);
  display: block;
  line-height: 1.25;
}
.games-strip-program {
  font-size: 0.78rem;
  color: var(--fs-text-light);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: block;
}

/* Bigger play button now that it names the game ("Play Phonics Builder"
   etc.) — needs more breathing room than the old generic "Play". */
.btn-play {
  background: var(--fs-primary);
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.1s ease;
  text-align: center;
  display: inline-block;
  margin-top: 6px;
  box-shadow: 0 2px 8px rgba(45, 80, 22, 0.18);
  letter-spacing: 0.01em;
}
/* Strip buttons: identical width, single row ("Play Grammar Garden" no longer
   wraps), and bottom-aligned across all three tiles regardless of how many
   lines the program meta wraps to. Scoped to the strip so other .btn-play
   usages are unaffected. */
.games-strip-item .btn-play {
  display: block;
  width: 100%;
  margin-top: auto;
  white-space: nowrap;
  box-sizing: border-box;
}
.btn-play:hover  { background: var(--fs-accent); color: #1a1a1a; }
.btn-play:active { transform: translateY(1px); }

/* Bump strip vertical padding so the bigger tiles + labels breathe. */
.games-strip { padding: 56px 0 60px; }

[data-theme="dark"] .games-strip            { background: #231A12; border-color: #3D2A10; }
[data-theme="dark"] .games-strip-heading    { color: #E8DDD0; }
[data-theme="dark"] .games-strip-subheading { color: #C4B5A0; }
[data-theme="dark"] .games-strip-name       { color: #E8DDD0; }
[data-theme="dark"] .games-strip-program    { color: #9A8B78; }
[data-theme="dark"] .btn-play               { background: #5A9B3A; color: #1A1410; }
[data-theme="dark"] .btn-play:hover         { background: #E5A830; color: #1A1410; }

/* The desktop 3-col grid above (.games-strip-items, repeat(3, minmax(0,240px)))
   sits LATER in source than the old mobile override at ~2748, so with equal
   specificity the desktop rule won at narrow widths — squeezing 3 columns to
   <100px each while the "Play …" buttons (white-space:nowrap) leaked ~33px past
   a 390px viewport. These rules come AFTER the desktop grid so they take effect:
   2 columns on tablets, 1 column on phones, button may wrap as a safety net.
   (Phase 5 root-cause fix, 2026-06-03 — replaces a dead `flex:1 1 100%` that did
   nothing on a grid container.) */
@media (max-width: 768px) {
  .games-strip-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games-strip-item .btn-play { white-space: normal; }
}
@media (max-width: 600px) {
  .games-strip-items { grid-template-columns: 1fr; gap: 24px; }
  .games-strip-item  { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   COPYWORK CREATOR CARD
   ════════════════════════════════════════════════════════════════ */
.copywork-creator-card {
  position: relative;
  background: #2d4a1e;
  border-radius: 10px;
  padding: 28px 32px;
  max-width: 900px;
  margin: 0 auto 48px;
}

.copywork-creator-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.copywork-icon {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}

.copywork-text {
  flex: 1;
  min-width: 200px;
}

.copywork-title {
  font-size: 20px;
  color: #f5f0e8;
  margin: 0 0 6px;
}

.copywork-desc {
  font-size: 14px;
  color: #c8bfaf;
  margin: 0;
  line-height: 1.5;
}

.btn-copywork {
  background: #c9a84c;
  color: #1a1a1a;
  padding: 10px 22px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease;
}

.btn-copywork:hover {
  background: #f5f0e8;
  color: #2d4a1e;
}

.copywork-tag {
  position: absolute;
  top: -10px;
  right: 20px;
  background: #c9a84c;
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 10px;
  border-radius: 20px;
}

@media (max-width: 600px) {
  .copywork-creator-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-copywork {
    width: 100%;
    text-align: center;
  }
}

/* ════════════════════════════════════════════════════════════════
   ABOUT CTA BLOCK
   ════════════════════════════════════════════════════════════════ */
.about-cta-block {
  text-align: center;
  padding: 48px 24px 24px;
}

.btn-large {
  padding: 16px 40px;
  font-size: 16px;
}

/* ════════════════════════════════════════════════════════════════
   MEMBERSHIP FENCE LINK
   ════════════════════════════════════════════════════════════════ */
.membership-fence-link {
  text-align: center;
  font-style: italic;
  font-size: 14px;
  color: #c9a84c;
  margin: 24px 0;
}

.membership-fence-link a {
  color: #c9a84c;
  text-decoration: underline;
}

.membership-fence-link a:hover {
  color: #f5f0e8;
}

/* ════════════════════════════════════════════════════════════════
   CURRICULUM EXPLORE LINK
   ════════════════════════════════════════════════════════════════ */
.curriculum-explore-link {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: #c9a84c;
  text-decoration: none;
}
.curriculum-explore-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   PROGRAM HEADING LOGO (Games Hub)
   ════════════════════════════════════════════════════════════════ */
.program-heading-logo {
  height: 80px;
  width: auto;
  display: block;
  margin: 0 auto 12px;
}

/* ════════════════════════════════════════════════════════════════
   MEGA MENU — MOBILE RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .menu-item-has-children .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-width: auto;
    width: 100%;
    transition: none;
  }

  .menu-item-has-children.sub-menu-open > .sub-menu {
    display: block;
  }

  .menu-item-has-children.sub-menu-open > .mega-menu-parent .dropdown-arrow {
    transform: rotate(180deg);
  }

  .sub-menu li a {
    padding: 0.55rem 1.5rem;
  }

  .coming-soon-item {
    padding: 0.55rem 1.5rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE FULL-PAGE TWO-COLUMN LAYOUT + WORKSHEETS SIDEBAR
   ════════════════════════════════════════════════════════════════ */
.home-page-outer {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}
.home-main-col {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Sidebar panel ── */
.home-worksheets-sidebar {
  flex: 0 0 270px;
  width: 270px;
  height: 100vh;
  position: sticky;
  top: 0;
  margin-top: 5rem;
  overflow-y: auto;
  border-left: 1px solid #e8e0d0;
  background: #f0ebe0;
}

/* ── Sticky top: header + tabs ── */
.ws-sidebar-top {
  position: sticky;
  top: 0;
  z-index: 10;
}
.home-worksheets-sidebar .ws-sidebar-header {
  background: #2d4a1e;
  color: #faf7f2;
  padding: 14px 18px 12px;
}
.home-worksheets-sidebar .ws-sidebar-header h3 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 16px;
  margin: 0 0 3px;
  color: #faf7f2;
}
.home-worksheets-sidebar .ws-sidebar-header p {
  font-size: 11px;
  color: #c8ddb8;
  margin: 0;
}

/* ── Tab bar ── */
.ws-tab-bar {
  display: flex;
  background: #e8e0d0;
  border-bottom: 1px solid #d9d0bf;
}
.ws-tab {
  flex: 1;
  padding: 9px 6px 7px;
  border: none;
  background: #e2d9ca;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #6a5a48;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: all 0.15s ease;
  border-bottom: 2px solid transparent;
}
.ws-tab small {
  display: block;
  font-size: 9.5px;
  font-weight: 400;
  color: #8a7a68;
  margin-top: 1px;
}
.ws-tab.active {
  background: #f0ebe0;
  color: #2d4a1e;
  border-bottom-color: #b8860b;
}
.ws-tab.active small {
  color: #5a4a38;
}
.ws-tab:not(.active):hover {
  background: #ebe5d8;
  color: #3a2a18;
}

/* ── Tab panels ── */
.ws-tab-panel {
  display: none;
  padding-bottom: 4px;
}
.ws-tab-panel.active {
  display: block;
}

.home-worksheets-sidebar .ws-grade-label {
  min-width: 0;
}

/* ── Grade accordion ── */
.ws-grade-group {
  border-bottom: 1px solid #e2d9ca;
}
.ws-grade-group:last-child {
  border-bottom: none;
}
.ws-grade-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px 10px 16px;
  border: none;
  background: none;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 600;
  color: #2d4a1e;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.ws-grade-toggle:hover {
  background: #ebe5d8;
}
.ws-grade-toggle .ws-count {
  font-weight: 400;
  font-size: 11px;
  color: #8a7a68;
  margin-left: 6px;
}
.ws-grade-toggle .ws-arrow {
  margin-left: auto;
  font-size: 10px;
  color: #8a7a68;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ws-grade-toggle.open {
  background: #ebe5d8;
  color: #1a3d0a;
}
.ws-grade-toggle.open .ws-arrow {
  transform: rotate(90deg);
}

/* ── Grade topic lists (Thinkers flat + Kindergarten flat) ── */
.ws-grade-topics {
  display: none;
  background: #e8e0d0;
}
.ws-grade-topics.open {
  display: block;
}
ul.ws-grade-topics,
.ws-topic-list {
  list-style: none;
  margin: 0;
  padding: 2px 0 4px;
}
.ws-grade-topics li a,
.ws-topic-list li a {
  display: flex;
  align-items: center;
  padding: 5px 14px 5px 26px;
  font-size: 12px;
  color: #5a4a38;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  line-height: 1.35;
}
.ws-grade-topics li a:hover,
.ws-topic-list li a:hover {
  color: #2d4a1e;
  border-left-color: #b8860b;
  background: #f0ebe0;
  padding-left: 30px;
}
.ws-grade-topics li a .ws-count,
.ws-topic-list li a .ws-count,
.ws-subject-topics li a .ws-count {
  font-size: 10px;
  color: #a09080;
  margin-left: auto;
  padding-left: 6px;
  flex-shrink: 0;
}

/* ── Subject sub-accordion (Readers Grades 1-5) ── */
.ws-subject-group {
  border-top: 1px solid #ddd5c5;
}
.ws-subject-group:first-child {
  border-top: none;
}
.ws-subject-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 14px 8px 20px;
  border: none;
  background: #e5ddd0;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #6a5a48;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ws-subject-toggle:hover {
  background: #ddd5c5;
  color: #3a2a18;
}
.ws-subject-toggle .ws-arrow {
  margin-left: auto;
  font-size: 9px;
  color: #8a7a68;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ws-subject-toggle.open {
  color: #2d4a1e;
  background: #ddd5c5;
}
.ws-subject-toggle.open .ws-arrow {
  transform: rotate(90deg);
}
.ws-subject-topics {
  display: none;
  list-style: none;
  margin: 0;
  padding: 2px 0 4px;
  background: #e8e0d0;
}
.ws-subject-topics.open {
  display: block;
}
.ws-subject-topics li a {
  display: flex;
  align-items: center;
  padding: 4px 14px 4px 34px;
  font-size: 11.5px;
  color: #5a4a38;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  line-height: 1.35;
}
.ws-subject-topics li a:hover {
  color: #2d4a1e;
  border-left-color: #b8860b;
  background: #f0ebe0;
  padding-left: 38px;
}

/* ── Footer — sticky at bottom of sidebar ── */
.home-worksheets-sidebar .ws-sidebar-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 12px 16px;
  border-top: 1px solid #d9d0bf;
  background: #f0ebe0;
}
.home-worksheets-sidebar .ws-view-all-btn {
  display: block;
  text-align: center;
  background: #2d4a1e;
  color: #faf7f2;
  padding: 9px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  text-decoration: none;
  transition: background 0.2s ease;
}
.home-worksheets-sidebar .ws-view-all-btn:hover {
  background: #3d1c02;
  color: #faf7f2;
}

/* ── Mobile: stack columns ── */
@media (max-width: 860px) {
  .home-page-outer {
    flex-direction: column;
  }
  .home-worksheets-sidebar {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
    max-height: 70vh;
    min-height: auto;
    position: sticky;
    top: 0;
    overflow-y: auto;
    border-left: none;
    border-top: 1px solid #e8e0d0;
    margin-top: 0;
  }
  .ws-sidebar-top,
  .home-worksheets-sidebar .ws-sidebar-footer {
    position: sticky;
  }
  .ws-sidebar-top {
    top: 0;
  }
  .home-worksheets-sidebar .ws-sidebar-footer {
    bottom: 0;
  }
}

/* ── Dark mode ── */
[data-theme="dark"] .home-worksheets-sidebar {
  background: #2A2018;
  border-left-color: #3D2A10;
}
[data-theme="dark"] .home-worksheets-sidebar .ws-sidebar-header { background: #1E3A0E; }
[data-theme="dark"] .ws-tab-bar { background: #2A2018; border-bottom-color: #3D2A10; }
[data-theme="dark"] .ws-tab { background: #231A12; color: #8A7A68; }
[data-theme="dark"] .ws-tab small { color: #6A5A48; }
[data-theme="dark"] .ws-tab.active { background: #2A2018; color: #5A9B3A; border-bottom-color: #E5A830; }
[data-theme="dark"] .ws-tab.active small { color: #8A7A68; }
[data-theme="dark"] .ws-tab:not(.active):hover { background: #3D2A10; color: #C4B5A0; }
[data-theme="dark"] .ws-grade-group { border-bottom-color: #3D2A10; }
[data-theme="dark"] .ws-grade-toggle { color: #5A9B3A; }
[data-theme="dark"] .ws-grade-toggle:hover { background: #3D2A10; }
[data-theme="dark"] .ws-grade-toggle.open { background: #3D2A10; color: #7ABF5A; }
[data-theme="dark"] .ws-grade-toggle .ws-count { color: #6A5A48; }
[data-theme="dark"] .ws-grade-topics { background: #231A12; }
[data-theme="dark"] .ws-grade-topics li a,
[data-theme="dark"] .ws-topic-list li a { color: #C4B5A0; }
[data-theme="dark"] .ws-grade-topics li a:hover,
[data-theme="dark"] .ws-topic-list li a:hover { color: #5A9B3A; background: #3D2A10; }
[data-theme="dark"] .ws-grade-topics li a .ws-count,
[data-theme="dark"] .ws-topic-list li a .ws-count,
[data-theme="dark"] .ws-subject-topics li a .ws-count { color: #6A5A48; }
[data-theme="dark"] .ws-subject-group { border-top-color: #3D2A10; }
[data-theme="dark"] .ws-subject-toggle { background: #2A2018; color: #8A7A68; }
[data-theme="dark"] .ws-subject-toggle:hover { background: #3D2A10; color: #C4B5A0; }
[data-theme="dark"] .ws-subject-toggle.open { color: #5A9B3A; background: #3D2A10; }
[data-theme="dark"] .ws-subject-topics { background: #231A12; }
[data-theme="dark"] .ws-subject-topics li a { color: #C4B5A0; }
[data-theme="dark"] .ws-subject-topics li a:hover { color: #5A9B3A; background: #3D2A10; }
[data-theme="dark"] .home-worksheets-sidebar .ws-sidebar-footer { background: #231A12; border-top-color: #3D2A10; }
[data-theme="dark"] .home-worksheets-sidebar .ws-view-all-btn { background: #5A9B3A; }
[data-theme="dark"] .home-worksheets-sidebar .ws-view-all-btn:hover { background: #3D7020; }

/* ════════════════════════════════════════════════════════════════
   WORKSHEETS PAGE — Landing Layout + Page Sidebar
   ════════════════════════════════════════════════════════════════ */
.worksheets-layout {
  display: flex;
  gap: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  align-items: flex-start;
}
.worksheets-main { flex: 1; min-width: 0; padding: 0 24px; }

/* Page sidebar reuses home sidebar accordion styles */
.ws-page-sidebar {
  width: 270px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-left: 1px solid #e8e0d0;
  background: #f0ebe0;
  border-radius: 0;
  padding: 0;
  max-height: none;
}
.ws-sidebar-header-page {
  background: #2d4a1e;
  color: #faf7f2;
  padding: 14px 18px 12px;
}
.ws-sidebar-header-page h3 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 16px;
  margin: 0;
  color: #faf7f2;
}

/* Program overview cards */
.ws-program-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 2rem 0;
}
.ws-program-card {
  background: #ffffff;
  border: 1px solid #e8e0d0;
  border-radius: 12px;
  padding: 24px;
  transition: box-shadow 0.2s ease;
}
.ws-program-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.ws-program-name {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 22px;
  color: #2d4a1e;
  margin: 0 0 4px;
}
.ws-program-sub {
  font-size: 13px;
  color: #7a6a58;
  margin: 0 0 16px;
}
.ws-program-grades {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ws-program-grade-row {
  padding: 8px 0;
  border-top: 1px solid #f0ebe0;
}
.ws-program-grade-row:first-child { border-top: none; }
.ws-program-grade-row strong {
  font-size: 13px;
  color: #2d4a1e;
}
.ws-program-grade-row .ws-count {
  font-size: 11px;
  color: #8a7a68;
  margin-left: 4px;
}
.ws-program-topics-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ws-topic-chip {
  display: inline-block;
  padding: 3px 10px;
  background: #f0ebe0;
  border: 1px solid #e2d9ca;
  border-radius: 14px;
  font-size: 11px;
  color: #5a4a38;
  text-decoration: none;
  transition: all 0.15s ease;
}
.ws-topic-chip:hover {
  background: #2d4a1e;
  color: #faf7f2;
  border-color: #2d4a1e;
}
/* Hide overflow chips beyond 4 by default */
.ws-program-topics-preview .ws-topic-chip:nth-child(n+5) {
  display: none;
}
/* During search: show all chips, hide "+N more" badge */
.ws-searching .ws-program-topics-preview .ws-topic-chip:nth-child(n+5) {
  display: inline-block;
}
.ws-searching .ws-topic-more {
  display: none !important;
}
/* Chip hidden by search filter */
.ws-topic-chip.ws-chip-hidden {
  display: none !important;
}

.ws-topic-more {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  color: #8a7a68;
  font-style: italic;
}

@media (max-width: 860px) {
  .worksheets-layout {
    flex-direction: column;
  }
  .ws-page-sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-left: none;
    border-top: 1px solid #e8e0d0;
  }
  .ws-program-cards {
    grid-template-columns: 1fr;
  }
}

[data-theme="dark"] .ws-page-sidebar {
  background: #2A2018;
  border-left-color: #3D2A10;
}
[data-theme="dark"] .ws-sidebar-header-page { background: #1E3A0E; }
[data-theme="dark"] .ws-program-card {
  background: #2A2018;
  border-color: #3D2A10;
}
[data-theme="dark"] .ws-program-name { color: #5A9B3A; }
[data-theme="dark"] .ws-program-sub { color: #8A7A68; }
[data-theme="dark"] .ws-program-grade-row { border-top-color: #3D2A10; }
[data-theme="dark"] .ws-program-grade-row strong { color: #5A9B3A; }
[data-theme="dark"] .ws-topic-chip {
  background: #3D2A10;
  border-color: #4D3A20;
  color: #C4B5A0;
}
[data-theme="dark"] .ws-topic-chip:hover {
  background: #5A9B3A;
  color: #fff;
  border-color: #5A9B3A;
}

/* ════════════════════════════════════════════════════════════════
   WORKSHEETS BROWSE VIEW — Breadcrumbs, PDF Grid, Gating
   ════════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.ws-browse-breadcrumb {
  background: #f0ebe0;
  border-bottom: 1px solid #e2d9ca;
  padding: 10px 0;
}
.ws-crumbs {
  font-size: 13px;
  color: #7a6a58;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.ws-crumbs a {
  color: #2d4a1e;
  text-decoration: none;
}
.ws-crumbs a:hover {
  text-decoration: underline;
}
.ws-crumb-sep {
  margin: 0 6px;
  color: #b0a090;
}
.ws-crumb-current {
  font-weight: 600;
  color: #3a3228;
}

/* Browse header */
.ws-browse-header {
  padding: 32px 0 16px;
  background: #F9F5EF;
}
.ws-browse-header .section-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.ws-browse-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 28px;
  color: #1A0F00;
  margin: 0 0 6px;
}
.ws-browse-meta {
  font-size: 14px;
  color: #7a6a58;
  margin: 0 0 12px;
}
.ws-browse-gate-notice {
  background: #fff8e8;
  border: 1px solid #e5c870;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: #6a5a38;
  margin: 12px 0 0;
}
.ws-browse-gate-notice a {
  color: #2d4a1e;
  font-weight: 600;
  text-decoration: underline;
}

/* Browse body */
.ws-browse-body {
  padding: 24px 0 48px;
}
.ws-browse-body .section-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.ws-browse-empty {
  text-align: center;
  padding: 3rem 2rem;
  color: #8a7a68;
  font-size: 15px;
}

/* Browse summary bar */
.ws-browse-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 18px;
  background: #f4f0e8;
  border: 1px solid #e8e0d0;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fs-text-muted);
}
.ws-summary-free {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2D5016;
  font-weight: 600;
}
.ws-summary-locked {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9A8B78;
}
.ws-summary-locked a {
  color: #C8860A;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ws-summary-locked a:hover { color: #b8860b; }

/* PDF card grid */
.ws-pdf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.ws-pdf-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e8e0d0;
  border-left: 3px solid #2D5016;
  border-radius: 6px;
  padding: 12px 16px;
  position: relative;
  transition: all 0.15s ease;
}
.ws-pdf-card:hover {
  border-color: #c8ddb8;
  border-left-color: #2D5016;
  box-shadow: 0 2px 8px rgba(45,80,22,0.08);
  transform: translateY(-1px);
}

/* Locked card styling */
.ws-pdf-locked {
  background: #faf8f4;
  border-left-color: #C8860A;
  opacity: 0.6;
}
.ws-pdf-locked:hover {
  border-color: #e5c870;
  border-left-color: #C8860A;
  opacity: 0.8;
}

/* Sheet number circle */
.ws-pdf-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf5e8;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #2D5016;
}
.ws-num-locked {
  background: #f5eed8;
  color: #b08a30;
}

/* Card info */
.ws-pdf-info {
  flex: 1;
  min-width: 0;
}
.ws-pdf-name {
  font-size: 14px;
  font-weight: 600;
  color: #1A0F00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-pdf-locked .ws-pdf-name {
  color: #8a7a68;
}

/* Action buttons */
.ws-pdf-action {
  flex-shrink: 0;
}
.ws-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  background: #2D5016;
  color: #faf7f2;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.ws-btn-download:hover {
  background: #1e3a0e;
  color: #fff;
  box-shadow: 0 2px 6px rgba(45,80,22,0.2);
}
.ws-btn-locked {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  background: transparent;
  color: #b08a30;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1.5px solid #d4b860;
  text-decoration: none;
  transition: all 0.15s ease;
}
.ws-btn-locked:hover {
  background: #C8860A;
  color: #fff;
  border-color: #C8860A;
}

/* Gate divider between free and locked */
.ws-gate-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0 10px;
}
.ws-gate-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4b860 20%, #d4b860 80%, transparent);
  opacity: 0.5;
}
.ws-gate-divider-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b08a30;
  white-space: nowrap;
}

/* Badges on cards */
.ws-pdf-badge {
  position: absolute;
  top: -1px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px 3px;
  border-radius: 0 0 4px 4px;
}
.ws-badge-free {
  background: #2D5016;
  color: #faf7f2;
}
.ws-badge-locked {
  background: #C8860A;
  color: #fff;
}

/* Browse CTA block */
.ws-browse-cta {
  margin-top: 32px;
}
.ws-browse-cta-inner {
  background: linear-gradient(135deg, #2d4a1e, #1a3d0a);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  color: #faf7f2;
}
.ws-browse-cta-inner h3 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 22px;
  margin: 0 0 8px;
  color: #faf7f2;
}
.ws-browse-cta-inner p {
  font-size: 14px;
  color: #c8ddb8;
  margin: 0 0 20px;
}
.ws-browse-cta-btn {
  display: inline-block;
  padding: 12px 28px;
  background: #b8860b;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ws-browse-cta-btn:hover {
  background: #d4a012;
  color: #fff;
}

/* Browse responsive */
@media (max-width: 600px) {
  .ws-browse-title { font-size: 22px; }
  .ws-browse-summary { flex-direction: column; gap: 6px; align-items: flex-start; font-size: 12px; padding: 10px 14px; }
  .ws-pdf-card { padding: 10px 12px; gap: 10px; }
  .ws-pdf-num { width: 28px; height: 28px; font-size: 11px; }
  .ws-pdf-num svg { width: 14px; height: 14px; }
  .ws-pdf-name { font-size: 13px; }
  .ws-btn-download, .ws-btn-locked { padding: 6px 12px; font-size: 11px; }
  .ws-browse-cta-inner { padding: 24px 16px; }
}

/* Browse dark mode */
[data-theme="dark"] .ws-browse-breadcrumb { background: #2A2018; border-bottom-color: #3D2A10; }
[data-theme="dark"] .ws-crumbs a { color: #5A9B3A; }
[data-theme="dark"] .ws-crumb-current { color: #E8DDD0; }
[data-theme="dark"] .ws-browse-header { background: #1A1410; }
[data-theme="dark"] .ws-browse-title { color: #E8DDD0; }
[data-theme="dark"] .ws-browse-meta { color: #8A7A68; }
[data-theme="dark"] .ws-browse-gate-notice {
  background: #3D2A10;
  border-color: #5D4A20;
  color: #C4B5A0;
}
[data-theme="dark"] .ws-browse-gate-notice a { color: #5A9B3A; }
[data-theme="dark"] .ws-browse-summary { background: #2A2018; border-color: #3D2A10; }
[data-theme="dark"] .ws-summary-free { color: #5A9B3A; }
[data-theme="dark"] .ws-summary-locked { color: #8A7A68; }
[data-theme="dark"] .ws-summary-locked a { color: #E5A830; }
[data-theme="dark"] .ws-gate-divider-line { background: linear-gradient(90deg, transparent, #5a4a28 20%, #5a4a28 80%, transparent); }
[data-theme="dark"] .ws-gate-divider-text { color: #d4b860; }
[data-theme="dark"] .ws-pdf-card {
  background: #2A2018;
  border-color: #3D2A10;
}
[data-theme="dark"] .ws-pdf-card:hover { border-color: #5A9B3A; }
[data-theme="dark"] .ws-pdf-locked { background: #231A12; }
[data-theme="dark"] .ws-pdf-num { background: #3D2A10; color: #5A9B3A; }
[data-theme="dark"] .ws-num-locked { background: #3D2A10; color: #E5A830; }
[data-theme="dark"] .ws-pdf-name { color: #E8DDD0; }
[data-theme="dark"] .ws-pdf-locked .ws-pdf-name { color: #6A5A48; }
[data-theme="dark"] .ws-btn-locked { background: transparent; color: #d4b860; border-color: #6A5A28; }
[data-theme="dark"] .ws-btn-locked:hover { background: #C8860A; color: #fff; border-color: #C8860A; }
[data-theme="dark"] .ws-btn-download { background: #5A9B3A; color: #fff; }
[data-theme="dark"] .ws-btn-download:hover { background: #3D7020; }
[data-theme="dark"] .ws-badge-free { background: #5A9B3A; }
[data-theme="dark"] .ws-browse-cta-inner { background: linear-gradient(135deg, #1E3A0E, #0E2A04); }
[data-theme="dark"] .ws-browse-cta-inner p { color: #8A7A68; }

/* ════════════════════════════════════════════════════════════════
   WORDPRESS ADMIN BAR FIX
   ════════════════════════════════════════════════════════════════ */
body.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* ════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════════════════════════════ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fs-text);
  margin-bottom: 0.4rem;
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-md);
  background: var(--fs-card-bg);
  color: var(--fs-text);
  transition: border-color 0.2s ease;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--fs-primary);
  box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
}
.contact-field textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-submit {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: var(--fs-primary);
  color: #faf7f2;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  border: none;
  border-radius: var(--fs-radius-md);
  cursor: pointer;
  transition: background 0.2s ease;
  align-self: flex-start;
}
.contact-submit:hover {
  background: var(--fs-primary-dark);
}
.contact-success {
  text-align: center;
  padding: 2rem 0;
}
.contact-success h3 {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  margin: 1rem 0 0.5rem;
  color: var(--fs-primary);
}
.contact-success p {
  color: var(--fs-text-muted);
}
.contact-errors {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--fs-radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.contact-errors p {
  color: #b91c1c;
  font-size: 0.88rem;
  margin: 0.25rem 0;
}
.contact-info {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fs-border-light);
  text-align: center;
  font-size: 0.88rem;
  color: var(--fs-text-muted);
}
.contact-info a {
  color: var(--fs-primary);
  font-weight: 600;
}
[data-theme="dark"] .contact-errors {
  background: #3D1C1C;
  border-color: #8B3030;
}
[data-theme="dark"] .contact-errors p {
  color: #FCA5A5;
}

/* ════════════════════════════════════════════════════════════════
   WORKSHEET SEARCH
   ════════════════════════════════════════════════════════════════ */
.ws-search-bar {
  margin-bottom: 1.5rem;
}
.ws-search-input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 2.5rem;
  font-size: 0.95rem;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-lg);
  background: var(--fs-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A6A55' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 0.8rem center no-repeat;
  color: var(--fs-text);
  transition: border-color 0.2s ease;
}
.ws-search-input:focus {
  outline: none;
  border-color: var(--fs-primary);
  box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.1);
}
.ws-search-input::placeholder {
  color: var(--fs-text-muted);
}
.ws-no-results {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--fs-text-muted);
  font-size: 0.95rem;
  display: none;
}
[data-theme="dark"] .ws-search-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A8B78' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════════
   PDF PREVIEW MODAL
   ════════════════════════════════════════════════════════════════ */

/* Preview button on cards */
.ws-btn-preview {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  background: #2D5016;
  color: #faf7f2;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  transition: all 0.15s ease;
}
.ws-btn-preview:hover {
  background: #1e3a0e;
  box-shadow: 0 2px 6px rgba(45,80,22,0.2);
}
[data-theme="dark"] .ws-btn-preview { background: #5A9B3A; color: #fff; }
[data-theme="dark"] .ws-btn-preview:hover { background: #3D7020; }

/* Previewable card hover hint */
.ws-pdf-previewable { cursor: pointer; }
.ws-pdf-previewable:hover {
  border-color: #2D5016;
  border-left-color: #2D5016;
  box-shadow: 0 3px 12px rgba(45,80,22,0.12);
}

/* Overlay */
.ws-preview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.ws-preview-overlay.active {
  display: flex;
}

/* Modal */
.ws-preview-modal {
  background: var(--fs-card-bg);
  border-radius: 12px;
  width: 100%;
  max-width: 900px;
  height: 85vh;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Header bar */
.ws-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--fs-border-light);
  background: var(--fs-card-bg);
  flex-shrink: 0;
}
.ws-preview-title {
  font-family: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--fs-text);
  margin: 0;
}
.ws-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ws-preview-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: #2D5016;
  color: #faf7f2;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.ws-preview-download:hover {
  background: #1e3a0e;
  color: #fff;
}
.ws-preview-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--fs-text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ws-preview-close:hover {
  background: #f0ebe0;
  color: var(--fs-text);
}

/* Body / iframe */
.ws-preview-body {
  flex: 1;
  position: relative;
  min-height: 0;
}
.ws-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  transition: opacity 0.2s ease;
}
.ws-preview-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  color: var(--fs-text-muted);
  background: var(--fs-card-bg);
}
.ws-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--fs-border-light);
  border-top-color: #2D5016;
  border-radius: 50%;
  animation: wsSpinnerSpin 0.7s linear infinite;
}
@keyframes wsSpinnerSpin {
  to { transform: rotate(360deg); }
}

/* Dark mode */
[data-theme="dark"] .ws-preview-close:hover { background: #3D2A10; }
[data-theme="dark"] .ws-preview-download { background: #5A9B3A; }
[data-theme="dark"] .ws-preview-download:hover { background: #3D7020; }
[data-theme="dark"] .ws-spinner { border-color: #3D2A10; border-top-color: #5A9B3A; }

/* Mobile */
@media (max-width: 600px) {
  .ws-preview-overlay { padding: 10px; }
  .ws-preview-modal { height: 90vh; max-height: 90vh; border-radius: 8px; }
  .ws-preview-header { padding: 10px 14px; }
  .ws-preview-title { font-size: 13px; }
  .ws-preview-download { padding: 6px 12px; font-size: 12px; }
  .ws-btn-preview { padding: 6px 12px; font-size: 11px; }
}

/* Catalog-based worksheet library */
.fs-worksheets-catalog {
  background: var(--fs-bg);
}
.fs-worksheets-catalog [hidden] {
  display: none !important;
}
.ws-catalog-hero {
  text-align: center;
  padding-bottom: 2.5rem;
}
.ws-catalog-kicker {
  margin: 0 0 0.75rem;
  color: var(--fs-secondary);
  font-family: var(--fs-heading-font);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ws-catalog-stats,
.ws-catalog-active-filters,
.ws-grade-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}
.ws-catalog-stats {
  margin: 1.4rem auto 1.6rem;
}
.ws-catalog-stats span,
.ws-catalog-active-filters span,
.ws-grade-chip {
  border: 1px solid var(--fs-border-light);
  border-radius: 999px;
  background: var(--fs-card-bg);
  color: var(--fs-primary);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
}
.ws-catalog-search {
  display: flex;
  gap: 0.75rem;
  max-width: 720px;
  margin: 0 auto;
}
.ws-catalog-search input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--fs-border);
  border-radius: 8px;
  background: var(--fs-card-bg);
  color: var(--fs-text);
  font-size: 1rem;
  padding: 0.85rem 1rem;
}
.ws-catalog-section,
.ws-catalog-results {
  padding: 2.5rem 1rem;
}
.ws-catalog-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ws-catalog-section-head h2 {
  margin: 0;
  color: var(--fs-primary);
  font-size: clamp(1.5rem, 2vw, 2rem);
}
.ws-catalog-section-head a,
.ws-catalog-breadcrumb a {
  color: var(--fs-primary);
  font-weight: 700;
}
.ws-catalog-category-grid,
.ws-catalog-grid {
  display: grid;
  gap: 1rem;
}
.ws-catalog-category-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ws-catalog-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ws-category-card,
.ws-catalog-card {
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: var(--fs-card-bg);
  box-shadow: var(--fs-shadow-sm);
}
.ws-category-card {
  padding: 1.25rem;
}
.ws-category-card h2,
.ws-catalog-card h2 {
  margin: 0 0 0.45rem;
  color: var(--fs-primary);
  font-size: 1.08rem;
  line-height: 1.25;
}
.ws-category-card p,
.ws-catalog-card p {
  margin: 0;
  color: var(--fs-text-muted);
}
.ws-category-topics {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}
.ws-category-topics a {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 6px;
  background: #faf7f2;
  color: var(--fs-text);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
}
.ws-category-topics span {
  color: var(--fs-primary);
  white-space: nowrap;
}
.ws-grade-chip {
  text-decoration: none;
}
.ws-grade-chip span {
  color: var(--fs-text-muted);
  margin-left: 0.35rem;
}
.ws-catalog-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem;
}
.ws-catalog-card-top,
.ws-catalog-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.ws-catalog-card-actions {
  margin-top: auto;
}
.ws-pill {
  border-radius: 999px;
  background: var(--fs-bg);
  border: 1px solid var(--fs-border-light);
  color: var(--fs-text-light);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.32rem 0.55rem;
  text-transform: uppercase;
}
.ws-pill.free {
  background: #eaf5e3;
  color: #2d5016;
}
.ws-pill.premium {
  background: #fff0c9;
  color: #7a5600;
}
.ws-catalog-breadcrumb {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  color: var(--fs-text-muted);
  font-size: 0.94rem;
}
.ws-catalog-active-filters {
  justify-content: flex-start;
  margin-bottom: 1.25rem;
}
@media (max-width: 700px) {
  .ws-catalog-search,
  .ws-catalog-section-head {
    align-items: stretch;
    flex-direction: column;
  }
  .ws-catalog-search .btn {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   SIMPLE UX + MOBILE POLISH PASS (2026-06-01)
   Keeps the worksheet sidebar, but makes the main public surfaces
   calmer, flatter, and less likely to overflow on phones.
   ════════════════════════════════════════════════════════════════ */
.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--fs-primary);
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}
.btn-quiet:hover {
  background: rgba(45, 80, 22, 0.08);
  color: var(--fs-primary-dark);
}

.hero-kicker {
  color: var(--fs-secondary);
  font-family: var(--fs-heading-font);
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.08em;
  margin: 0 0 0.85rem;
  text-transform: uppercase;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.7rem;
}
.start-here-strip {
  padding: 1rem 1.5rem 0;
}
.start-here-inner {
  align-items: center;
  border-bottom: 1px solid var(--fs-border-light);
  border-top: 1px solid var(--fs-border-light);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 0 auto;
  max-width: 900px;
  padding: 1rem 1.5rem;
  text-align: center;
}

.games-page {
  background: var(--fs-bg);
}
.games-page .games-hub-hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem 2rem;
}
.games-page .games-hub-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
}
.games-page .games-hub-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  padding-bottom: 2rem;
}
.games-page .game-hub-card {
  border-radius: 10px;
  overflow: visible;
}
.games-page .game-hub-card-media {
  padding: 1.5rem 1.25rem 0.25rem;
  text-align: center;
}
.games-page .game-hub-card-header {
  padding: 0;
}
.games-page .game-hub-card .game-hub-mark {
  height: 170px;
  width: 170px;
}
.games-page .game-hub-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem 1.25rem 1.35rem;
}
.games-page .game-hub-card-body h2 {
  color: var(--fs-earth);
  font-size: 1.35rem;
  margin: 0;
}
.games-page .game-hub-card-body p {
  margin: 0;
}
.games-page .product-card-tagline {
  color: var(--fs-secondary);
  font-family: var(--fs-heading-font);
  font-style: italic;
}
.games-page .game-hub-card-body .method-list {
  margin: 0;
}
.games-page .game-hub-card-body .method-list li {
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}
.games-page .game-hub-card-body .btn {
  margin-top: auto;
  width: 100%;
}
.games-fit-section {
  padding: 1rem 1.5rem 0;
}
.games-fit-inner {
  background: #fff;
  border: 1px solid var(--fs-border-light);
  border-radius: 10px;
  margin: 0 auto;
  max-width: 900px;
  padding: 1.5rem;
  text-align: center;
}
.games-fit-inner h2 {
  color: var(--fs-earth);
  font-size: 1.45rem;
  margin-bottom: 0.5rem;
}
.games-fit-inner p {
  color: var(--fs-text-light);
  margin: 0 auto 1rem;
  max-width: 640px;
}
.games-fit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

@media (max-width: 1024px) {
  .games-page .games-hub-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 860px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }
  .site-main,
  .home-page-outer,
  .home-main-col,
  .section-inner,
  .games-page,
  .games-hub-grid,
  .worksheets-layout,
  .worksheets-main {
    max-width: 100%;
    min-width: 0;
  }
  .hero-section {
    overflow: clip;
  }
  .hero-title,
  .hero-subtitle,
  .games-hub-hero h1,
  .games-hub-hero p,
  .page-hero-title,
  .page-hero-subtitle,
  .section-title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .hero-word {
    white-space: normal;
  }
  .hero-actions,
  .games-fit-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .hero-actions .btn,
  .games-fit-actions .btn {
    width: 100%;
  }
  .start-here-strip {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .start-here-inner {
    gap: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .games-page .games-hub-hero {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .games-page .games-hub-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .games-page .game-hub-card .game-hub-mark {
    height: 145px;
    width: 145px;
  }
  .games-fit-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 768px) {
  body.tmpl-template-game-readers .header-logo-row,
  body.tmpl-template-game-thinkers .header-logo-row,
  body.tmpl-template-game-grammar .header-logo-row,
  body.tmpl-template-harvest-app .header-logo-row,
  body.tmpl-template-bible-cards .header-logo-row,
  body.tmpl-template-copywork-creator .header-logo-row {
    padding: 0.2rem 0.75rem;
  }
  body.tmpl-template-game-readers .site-logo-img,
  body.tmpl-template-game-thinkers .site-logo-img,
  body.tmpl-template-game-grammar .site-logo-img,
  body.tmpl-template-harvest-app .site-logo-img,
  body.tmpl-template-bible-cards .site-logo-img,
  body.tmpl-template-copywork-creator .site-logo-img {
    max-width: 150px;
    width: 150px;
  }
  body.tmpl-template-game-readers .header-nav-row,
  body.tmpl-template-game-thinkers .header-nav-row,
  body.tmpl-template-game-grammar .header-nav-row,
  body.tmpl-template-harvest-app .header-nav-row,
  body.tmpl-template-bible-cards .header-nav-row,
  body.tmpl-template-copywork-creator .header-nav-row {
    min-height: 38px;
    padding: 0.15rem 0.75rem;
  }
  body.tmpl-template-game-readers .menu-toggle,
  body.tmpl-template-game-thinkers .menu-toggle,
  body.tmpl-template-game-grammar .menu-toggle,
  body.tmpl-template-harvest-app .menu-toggle,
  body.tmpl-template-bible-cards .menu-toggle,
  body.tmpl-template-copywork-creator .menu-toggle,
  body.tmpl-template-game-readers .theme-toggle,
  body.tmpl-template-game-thinkers .theme-toggle,
  body.tmpl-template-game-grammar .theme-toggle,
  body.tmpl-template-harvest-app .theme-toggle,
  body.tmpl-template-bible-cards .theme-toggle,
  body.tmpl-template-copywork-creator .theme-toggle {
    min-height: 38px;
    min-width: 38px;
  }
  body.tmpl-template-game-readers .game-fullscreen-wrap,
  body.tmpl-template-game-thinkers .game-fullscreen-wrap,
  body.tmpl-template-game-grammar .game-fullscreen-wrap,
  body.tmpl-template-harvest-app .game-fullscreen-wrap,
  body.tmpl-template-bible-cards .game-fullscreen-wrap,
  body.tmpl-template-copywork-creator .copywork-iframe-wrap {
    min-height: calc(100svh - 86px);
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 2rem 1rem 2.25rem;
  }
  .hero-inner {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .hero-kicker {
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .hero-title {
    max-width: 20rem;
    font-size: clamp(1.45rem, 7.1vw, 1.75rem);
    line-height: 1.16;
    overflow-wrap: normal;
  }
  .hero-word {
    display: inline;
    white-space: normal;
  }
  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 20rem;
  }
  .games-page .game-hub-card {
    border-radius: 8px;
    overflow: hidden;
    padding: 1.25rem;
    width: 100%;
  }
  .games-page .games-hub-hero h1 {
    font-size: clamp(1.55rem, 7.4vw, 1.95rem);
    line-height: 1.15;
    max-width: 20rem;
  }
  .games-page .games-hub-hero p {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 20rem;
  }
  .games-page .games-hub-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .games-page .game-hub-card p,
  .games-page .game-hub-card li {
    overflow-wrap: anywhere;
  }
}

/* Faith Readers Packet Library */
.packets-page {
  background:
    linear-gradient(180deg, rgba(45, 80, 22, 0.05), transparent 22rem),
    var(--fs-bg);
  color: var(--fs-text);
}

.packet-hero,
.packet-controls,
.packet-featured,
.packet-day-list,
.packet-library-grid-section,
.packet-grade-overview,
.packet-overview-note,
.packet-empty {
  width: min(var(--fs-max-width), calc(100% - 2rem));
  margin: 0 auto;
}

.packet-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  padding: clamp(2.75rem, 5vw, 5rem) 0 2rem;
}

.packet-kicker {
  margin: 0 0 0.55rem;
  color: var(--fs-secondary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.packet-hero h1,
.packet-featured h2,
.packet-day-list h2,
.packet-library-grid-section h2 {
  margin: 0;
  color: var(--fs-primary-dark);
  font-family: var(--fs-heading-font);
  line-height: 1.08;
}

.packet-hero h1 {
  max-width: 760px;
  font-size: clamp(2.25rem, 6vw, 4.9rem);
}

.packet-hero p,
.packet-featured-copy > p,
.section-heading-row > p {
  color: var(--fs-text-light);
  line-height: 1.7;
}

.packet-hero-copy > p:last-child {
  max-width: 720px;
  margin-bottom: 0;
  font-size: 1.08rem;
}

.packet-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.packet-hero-stats div {
  padding: 1rem;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fs-card-bg) 88%, var(--fs-accent) 12%);
  box-shadow: var(--fs-shadow-sm);
}

.packet-hero-stats dt {
  color: var(--fs-primary-dark);
  font-family: var(--fs-heading-font);
  font-size: 1.8rem;
  font-weight: 700;
}

.packet-hero-stats dd {
  margin: 0.1rem 0 0;
  color: var(--fs-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.packet-controls {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: var(--fs-card-bg);
  box-shadow: var(--fs-shadow-sm);
}

.packet-grade-overview {
  padding: 1rem 0 1.25rem;
}

.packet-grade-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.packet-grade-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: var(--fs-card-bg);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--fs-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.packet-grade-card:hover,
.packet-grade-card.is-selected {
  border-color: rgba(200, 134, 10, 0.66);
  box-shadow: var(--fs-shadow-md);
  transform: translateY(-3px);
}

.packet-grade-card-media {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 18%, rgba(200, 134, 10, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(45, 80, 22, 0.08), rgba(200, 134, 10, 0.08)),
    var(--fs-bg);
}

.packet-grade-card-media img {
  position: absolute;
  top: 1rem;
  left: calc(50% - 3.7rem);
  width: 7.4rem;
  height: 10rem;
  object-fit: cover;
  border: 1px solid rgba(61, 28, 2, 0.12);
  border-radius: 6px;
  background: var(--fs-card-bg);
  box-shadow: 0 12px 28px rgba(61, 28, 2, 0.12);
  transform: rotate(0deg);
  transition: transform 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
}

.packet-grade-card-media img:nth-child(1) {
  left: calc(50% - 7.6rem);
  transform: rotate(-4deg);
}

.packet-grade-card-media img:nth-child(2) {
  left: calc(50% - 3.7rem);
  z-index: 1;
}

.packet-grade-card-media img:nth-child(3) {
  left: calc(50% + 0.2rem);
  transform: rotate(4deg);
}

.packet-grade-card-body {
  padding: 1rem;
}

.packet-grade-card h3 {
  margin: 0 0 0.7rem;
  color: var(--fs-primary-dark);
  font-family: var(--fs-heading-font);
  font-size: 1.55rem;
  line-height: 1.15;
}

.packet-grade-focus,
.packet-grade-faith {
  margin: 0;
  color: var(--fs-text-light);
  font-size: 0.93rem;
  line-height: 1.55;
}

.packet-grade-faith {
  margin-top: 0.55rem;
  color: var(--fs-text);
}

.packet-grade-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.packet-grade-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.32rem 0.58rem;
  border: 1px solid var(--fs-border-light);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fs-card-bg) 86%, var(--fs-primary) 14%);
  color: var(--fs-primary-dark);
  font-size: 0.74rem;
  font-weight: 800;
}

.packet-grade-hover,
.packet-week-hover {
  position: absolute;
  inset: auto 0.75rem 0.75rem;
  display: inline-flex;
  justify-content: center;
  padding: 0.48rem 0.7rem;
  border-radius: 999px;
  background: rgba(30, 58, 14, 0.9);
  color: var(--fs-text-on-green);
  font-size: 0.78rem;
  font-weight: 800;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.packet-grade-hover {
  inset: auto auto 0.85rem 50%;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  z-index: 8;
  box-shadow: 0 10px 22px rgba(30, 58, 14, 0.22);
  pointer-events: none;
  transform: translate(-50%, 8px);
}

.packet-week-hover {
  z-index: 5;
}

.packet-grade-card:hover .packet-grade-hover,
.packet-grade-card:focus-visible .packet-grade-hover {
  opacity: 1;
  transform: translate(-50%, 0);
}

.packet-week-card:hover .packet-week-hover,
.packet-week-card a:focus-visible .packet-week-hover {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .packet-grade-card:hover .packet-grade-card-media img:nth-child(1) {
    left: calc(50% - 8.5rem);
    transform: rotate(-8deg) translateY(-0.3rem);
  }
  .packet-grade-card:hover .packet-grade-card-media img:nth-child(2) {
    width: 8.4rem;
    height: 11.35rem;
    left: calc(50% - 4.2rem);
    transform: rotate(0deg) translateY(-0.65rem);
    z-index: 2;
  }
  .packet-grade-card:hover .packet-grade-card-media img:nth-child(3) {
    left: calc(50% + 1.25rem);
    transform: rotate(8deg) translateY(-0.3rem);
  }
}

.packet-path-nav {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.packet-tab-group {
  display: grid;
  gap: 0.4rem;
}

.packet-tab-group > span,
.packet-find-form span {
  color: var(--fs-text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.packet-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.packet-tab-row a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--fs-border-light);
  border-radius: 999px;
  background: var(--fs-bg);
  color: var(--fs-text-light);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.packet-tab-row a:hover,
.packet-tab-row a.is-active {
  border-color: var(--fs-primary);
  background: rgba(45, 80, 22, 0.1);
  color: var(--fs-primary-dark);
}

.packet-find-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 0.75rem;
  align-items: end;
}

.packet-find-form label {
  display: grid;
  gap: 0.35rem;
}

.packet-find-form input {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: var(--fs-bg);
  color: var(--fs-text);
  font: inherit;
}

.packet-featured {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.packet-preview-panel {
  position: sticky;
  top: 1rem;
}

.packet-preview-stage {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(200, 134, 10, 0.12), rgba(45, 80, 22, 0.08)),
    var(--fs-card-bg);
  box-shadow: var(--fs-shadow-lg);
}

.packet-preview-stage img {
  width: 100%;
  max-height: min(72vh, 820px);
  object-fit: contain;
  display: block;
}

.packet-sample-badge {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  border-radius: var(--fs-radius-full);
  background: rgba(45, 80, 22, 0.92);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  padding: 0.38rem 0.7rem;
  text-transform: uppercase;
  box-shadow: var(--fs-shadow-sm);
}

.packet-preview-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.packet-preview-thumb {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.35rem;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: var(--fs-card-bg);
  color: var(--fs-text);
  cursor: pointer;
  text-align: center;
}

.packet-preview-thumb.is-active {
  border-color: var(--fs-accent);
  box-shadow: 0 0 0 3px rgba(200, 134, 10, 0.18);
}

.packet-preview-thumb img {
  width: 100%;
  aspect-ratio: 8 / 10.5;
  object-fit: cover;
  border-radius: 5px;
  background: var(--fs-bg);
}

.packet-preview-thumb span {
  overflow: hidden;
  color: var(--fs-text-light);
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.packet-featured-copy h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.packet-intel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.35rem 0 1rem;
}

.packet-intel-grid div,
.packet-mini-intel div {
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: var(--fs-card-bg);
}

.packet-intel-grid div {
  padding: 0.85rem;
}

.packet-intel-grid span,
.packet-mini-intel dt {
  display: block;
  color: var(--fs-text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.packet-intel-grid strong,
.packet-mini-intel dd {
  display: block;
  margin: 0.25rem 0 0;
  color: var(--fs-text);
  font-size: 0.98rem;
}

.packet-includes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0;
}

.packet-includes span {
  padding: 0.38rem 0.62rem;
  border: 1px solid var(--fs-border-light);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.packet-includes .is-on {
  background: rgba(45, 80, 22, 0.1);
  color: var(--fs-primary-dark);
}

.packet-includes .is-off {
  color: var(--fs-text-muted);
  opacity: 0.62;
}

.packet-path-note {
  margin: 0 0 1.2rem;
  color: var(--fs-text-light);
}

.packet-featured-actions,
.packet-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.section-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 1rem;
}

.section-heading-row h2 {
  font-size: clamp(1.7rem, 3vw, 2.45rem);
}

.section-heading-row > p {
  max-width: 420px;
  margin: 0;
  font-size: 0.92rem;
}

.packet-day-list,
.packet-library-grid-section {
  padding: 2rem 0 clamp(2.5rem, 5vw, 4rem);
}

.packet-day-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.packet-day-card {
  display: grid;
  grid-template-columns: minmax(118px, 0.42fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: var(--fs-card-bg);
  box-shadow: var(--fs-shadow-sm);
}

.packet-day-card.packet-guide-card {
  background: color-mix(in srgb, var(--fs-card-bg) 86%, var(--fs-secondary) 14%);
}

.packet-day-preview {
  height: 100%;
  border: 0;
  border-right: 1px solid var(--fs-border-light);
  border-radius: 0;
}

.packet-day-preview img {
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.packet-day-body,
.packet-week-body {
  padding: 1rem;
}

.packet-day-label {
  margin: 0 0 0.35rem;
  color: var(--fs-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.packet-day-card h3,
.packet-week-card h3 {
  margin: 0 0 0.4rem;
  color: var(--fs-primary-dark);
  font-family: var(--fs-heading-font);
  font-size: 1.22rem;
  line-height: 1.18;
}

.packet-day-card p {
  margin: 0 0 0.75rem;
  color: var(--fs-text-light);
  font-size: 0.9rem;
  line-height: 1.55;
}

.packet-mini-intel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}

.packet-mini-intel div {
  padding: 0.55rem;
}

.packet-mini-intel dd {
  font-size: 0.82rem;
  line-height: 1.25;
}

.packet-week-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.packet-week-card {
  overflow: hidden;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: var(--fs-card-bg);
  box-shadow: var(--fs-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.packet-week-card:hover,
.packet-week-card.is-selected {
  border-color: rgba(200, 134, 10, 0.62);
  box-shadow: var(--fs-shadow-md);
  transform: translateY(-2px);
}

.packet-week-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.packet-week-previews {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  padding: 0.4rem;
  background: rgba(45, 80, 22, 0.06);
}

.packet-week-previews img {
  width: 100%;
  aspect-ratio: 8 / 10.5;
  object-fit: cover;
  border-radius: 5px;
  background: var(--fs-bg);
  transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .packet-week-card:hover .packet-week-previews img {
    transform: scale(1.035);
  }
  .packet-week-card:hover .packet-week-previews img:nth-child(2) {
    transform: scale(1.075);
  }
}

.packet-overview-note {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  padding: 1rem 1.1rem;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fs-card-bg) 92%, var(--fs-primary) 8%);
}

.packet-overview-note p {
  max-width: 780px;
  margin: 0;
  color: var(--fs-text-light);
  line-height: 1.65;
}

.packet-empty {
  margin-top: 2rem;
  margin-bottom: 4rem;
  padding: 2rem;
  border: 1px solid var(--fs-border-light);
  border-radius: 8px;
  background: var(--fs-card-bg);
}

@media (max-width: 980px) {
  .packet-hero,
  .packet-featured {
    grid-template-columns: 1fr;
  }
  .packet-preview-panel {
    position: static;
  }
  .packet-path-nav {
    grid-template-columns: 1fr;
  }
  .packet-find-form {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .packet-search-label {
    grid-column: auto;
  }
  .packet-day-grid,
  .packet-week-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .packet-hero,
  .packet-controls,
  .packet-featured,
  .packet-day-list,
  .packet-library-grid-section,
  .packet-grade-overview,
  .packet-overview-note,
  .packet-empty {
    width: min(100% - 1rem, var(--fs-max-width));
  }
  .packet-hero {
    padding-top: 2rem;
  }
  .packet-hero h1 {
    font-size: clamp(2rem, 8.2vw, 2.55rem);
    line-height: 1.1;
  }
  .packet-hero-stats,
  .packet-find-form,
  .packet-intel-grid,
  .packet-mini-intel {
    grid-template-columns: 1fr;
  }
  .packet-find-form .btn {
    width: 100%;
  }
  .packet-featured {
    padding-top: 0.5rem;
  }
  .packet-preview-stage {
    min-height: 260px;
  }
  .packet-preview-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .section-heading-row {
    display: block;
  }
  .section-heading-row > p {
    margin-top: 0.5rem;
  }
  .packet-day-card {
    grid-template-columns: 1fr;
  }
  .packet-day-preview {
    border-right: 0;
    border-bottom: 1px solid var(--fs-border-light);
  }
  .packet-day-preview img {
    min-height: 220px;
  }
  .packet-grade-grid {
    grid-template-columns: 1fr;
  }
  .packet-grade-card-media {
    min-height: 168px;
  }
  .packet-grade-card-media img {
    top: 0.85rem;
    width: 6.2rem;
    height: 8.3rem;
  }
}

/* Mobile typography safety net — keep brand fonts, scale display type down. */
@media (max-width: 640px) {
  body {
    font-size: 1rem;
    line-height: 1.65;
  }
  h1,
  .hero-title,
  .page-hero-title,
  .games-hub-hero h1,
  .games-page .games-hub-hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.45rem);
    line-height: 1.12;
    overflow-wrap: break-word;
  }
  h2,
  .section-title,
  .packet-featured h2,
  .packet-day-list h2,
  .packet-library-grid-section h2,
  .games-fit-inner h2,
  .games-why-section h2,
  .games-membership-cta h2 {
    font-size: clamp(1.45rem, 6.4vw, 2rem);
    line-height: 1.16;
    overflow-wrap: break-word;
  }
  h3,
  .packet-day-card h3,
  .packet-week-card h3,
  .game-hub-card-header h2 {
    font-size: clamp(1.12rem, 5.4vw, 1.45rem);
    line-height: 1.22;
  }
  p,
  li,
  .hero-subtitle,
  .page-hero-subtitle,
  .packet-hero p,
  .packet-featured-copy > p,
  .section-heading-row > p {
    font-size: max(1rem, 16px);
    line-height: 1.65;
  }
  .hero-kicker,
  .packet-kicker,
  .packet-day-label,
  .packet-tab-group > span,
  .packet-find-form span,
  .packet-intel-grid span,
  .packet-mini-intel dt,
  .ws-catalog-kicker,
  .ws-catalog-stats span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1.35;
  }
  .packet-hero .packet-kicker {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1.4;
  }
  .btn,
  .packet-tab-row a {
    min-height: 44px;
    line-height: 1.25;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   WORKSHEET LIBRARY 2.0 — curriculum-aware catalog (2026-06-03)
   Filters drawer + thumbnail card grid + learning paths + WebP preview modal.
   Built entirely on design tokens so light/dark both work.
   ════════════════════════════════════════════════════════════════════════ */

.ws-lib { padding-top: 1.5rem; }

.ws-lib-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

/* ── Mobile filter toggle (hidden on desktop) ── */
.ws-filter-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-full);
  background: var(--fs-card-bg);
  color: var(--fs-primary);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: var(--fs-shadow-sm);
}

/* ── Filters sidebar ── */
.ws-filters {
  position: sticky;
  top: 90px;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-lg);
  background: var(--fs-card-bg);
  box-shadow: var(--fs-shadow-sm);
  padding: 1.1rem 1.15rem 1.25rem;
}
.ws-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.ws-filters-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--fs-primary);
}
.ws-filters-close {
  display: none;
  border: none;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--fs-text-muted);
  cursor: pointer;
}
.ws-filter-block { margin-bottom: 1.15rem; }
.ws-filter-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
}
.ws-filter-block input[type="search"],
.ws-select {
  width: 100%;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-md);
  background: var(--fs-bg);
  color: var(--fs-text);
  font-size: 0.95rem;
  padding: 0.6rem 0.7rem;
}
.ws-select { cursor: pointer; }
.ws-filter-block input[type="search"]:focus,
.ws-select:focus {
  outline: 2px solid var(--fs-accent);
  outline-offset: 1px;
}

.ws-chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ws-chip {
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-full);
  background: var(--fs-bg);
  color: var(--fs-text-light);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.38rem 0.72rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ws-chip:hover { border-color: var(--fs-accent); color: var(--fs-primary); }
.ws-chip.is-active {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
  color: #fff;
}
.ws-chip-sm { font-size: 0.76rem; padding: 0.3rem 0.6rem; }

.ws-filter-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.5rem;
}
.ws-filter-clear {
  color: var(--fs-text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
}
.ws-noscript { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--fs-text-muted); }

/* ── Results column ── */
.ws-results { min-width: 0; }
.ws-results.is-loading { opacity: 0.55; transition: opacity 0.15s ease; }
.ws-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 0.9rem;
}
.ws-result-count { margin: 0; color: var(--fs-text); font-size: 1rem; }
.ws-result-count strong { color: var(--fs-primary); font-size: 1.15rem; }
.ws-sort { display: inline-flex; align-items: center; }
.ws-sort-select {
  width: auto;
  min-width: 170px;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
}
/* IA (P3): the guided landing hides the flat results grid so the learning
   paths lead; any active filter/search reveals it again. */
.fs-worksheets-catalog.ws-landing .ws-lib { display: none; }
.ws-hero-jump { margin-top: 1.1rem; font-size: 0.92rem; color: var(--fs-text-muted); }
.ws-hero-jump a { color: var(--fs-primary); font-weight: 700; }
.ws-active-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem; }
.ws-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--fs-accent);
  border-radius: var(--fs-radius-full);
  background: var(--fs-card-bg);
  color: var(--fs-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
}
.ws-active-chip:hover { border-color: var(--fs-accent); }

/* ── Card grid (overrides the older flat card styles above) ── */
.ws-results .ws-catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.1rem;
}
.ws-results .ws-catalog-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-lg);
  background: var(--fs-card-bg);
  box-shadow: var(--fs-shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ws-results .ws-catalog-card:hover {
  box-shadow: var(--fs-shadow-md);
  transform: translateY(-2px);
}
.ws-card-thumb {
  position: relative;
  aspect-ratio: 17 / 22;
  background: var(--fs-bg);
  border-bottom: 1px solid var(--fs-border-light);
  cursor: pointer;
  overflow: hidden;
}
.ws-card-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.ws-card-preview-fan {
  display: grid;
  place-items: center;
  padding: 1rem 0.85rem;
  background:
    linear-gradient(135deg, rgba(200, 134, 10, 0.12), rgba(45, 80, 22, 0.08)),
    var(--fs-bg);
}
.ws-card-fan {
  position: relative;
  width: min(76%, 164px);
  height: min(84%, 226px);
}
.ws-card-fan img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 1px solid rgba(65, 47, 25, 0.18);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(40, 28, 12, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ws-card-fan img:nth-child(1) {
  transform: translateX(-18%) rotate(-8deg);
}
.ws-card-fan img:nth-child(2) {
  transform: translateY(-2%) rotate(0deg);
  z-index: 1;
}
.ws-card-fan img:nth-child(3) {
  transform: translateX(18%) rotate(8deg);
}
.ws-results .ws-catalog-card:hover .ws-card-fan img:nth-child(1) {
  transform: translateX(-22%) translateY(-2%) rotate(-10deg);
}
.ws-results .ws-catalog-card:hover .ws-card-fan img:nth-child(2) {
  transform: translateY(-5%) rotate(0deg);
  box-shadow: 0 16px 30px rgba(40, 28, 12, 0.2);
}
.ws-results .ws-catalog-card:hover .ws-card-fan img:nth-child(3) {
  transform: translateX(22%) translateY(-2%) rotate(10deg);
}
.ws-card-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--fs-border);
  opacity: 0.4;
}
.ws-card-badge {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  border-radius: var(--fs-radius-full);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem;
  box-shadow: var(--fs-shadow-sm);
}
.ws-card-badge.is-free { background: #2d5016; color: #fff; }
.ws-card-badge.is-premium { background: var(--fs-accent); color: #2a1c00; }
.ws-card-sample-note {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  max-width: calc(100% - 1.1rem);
  border-radius: var(--fs-radius-full);
  background: rgba(45, 80, 22, 0.92);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  padding: 0.28rem 0.56rem;
  text-transform: uppercase;
  box-shadow: var(--fs-shadow-sm);
}
.ws-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem 0.95rem;
  flex: 1;
}
.ws-card-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ws-card-title {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--fs-primary);
  font-family: var(--fs-heading-font);
}
.ws-card-topic {
  margin: 0;
  font-size: 0.83rem;
  color: var(--fs-text-muted);
}
.ws-card-value {
  margin: 0;
  color: var(--fs-text-light);
  font-size: 0.82rem;
  line-height: 1.45;
}
.ws-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
}
.ws-card-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--fs-text-light);
}
.ws-card-meta svg { opacity: 0.7; }
.ws-help-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fs-text-muted);
  display: inline-block;
}
.ws-help-low .ws-help-dot { background: #4f9a3f; }
.ws-help-medium .ws-help-dot { background: var(--fs-accent); }
.ws-help-high .ws-help-dot { background: #c0612a; }
.ws-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.25rem;
}
/* flex:1 1 0 + min-width:0 lets the two buttons share the row and shrink so the
   "Download" label is never clipped by the card's overflow:hidden on narrow
   cards; trimmed side padding keeps both labels fully visible. */
.ws-card-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  white-space: nowrap;
  text-align: center;
}

/* ── Empty state ── */
.ws-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--fs-text-muted);
}
.ws-empty svg { color: var(--fs-border); opacity: 0.5; margin-bottom: 0.5rem; }
.ws-empty h3 { margin: 0 0 0.4rem; color: var(--fs-primary); font-size: 1.3rem; }
.ws-empty-suggests {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.1rem;
}
.ws-empty-suggests a {
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-full);
  padding: 0.45rem 0.95rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--fs-primary);
  background: var(--fs-card-bg);
}
.ws-empty-suggests a:hover { border-color: var(--fs-accent); }

/* ── Pagination ── */
.ws-pager-wrap { margin-top: 1.75rem; text-align: center; }
.ws-page-note { margin: 0 0 0.85rem; font-size: 0.88rem; color: var(--fs-text-muted); }
.ws-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.ws-page-numbers { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.ws-page-btn,
.ws-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.6rem;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-md);
  background: var(--fs-card-bg);
  color: var(--fs-primary);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.ws-page-btn:hover,
.ws-page-num:hover { border-color: var(--fs-accent); }
.ws-page-num.is-current {
  background: var(--fs-primary);
  border-color: var(--fs-primary);
  color: #fff;
  cursor: default;
}
.ws-page-btn.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.ws-page-ellipsis {
  display: inline-flex;
  align-items: flex-end;
  padding: 0 0.2rem;
  color: var(--fs-text-muted);
}
/* "Page X of N" text is the mobile-friendly indicator; numbers are the desktop control. */
.ws-page-current { display: none; font-weight: 700; color: var(--fs-text-muted); font-size: 0.9rem; padding: 0 0.4rem; }

@media (max-width: 640px) {
  /* On phones, collapse the numbered list to a compact Prev · "Page X of N" · Next. */
  .ws-page-numbers { display: none; }
  .ws-page-current { display: inline-flex; align-items: center; }
}

/* ── Phase 6: Learning paths ── */
.ws-paths { padding-top: 1rem; padding-bottom: 2.5rem; }
.ws-paths-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.ws-paths-head p { margin: 0; color: var(--fs-text-muted); font-size: 0.95rem; }
.ws-paths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}
.ws-path-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-lg);
  background: var(--fs-card-bg);
  box-shadow: var(--fs-shadow-sm);
  padding: 1.25rem;
  border-top: 3px solid var(--fs-accent);
}
.ws-path-math { border-top-color: #2f7bb5; }
.ws-path-reading { border-top-color: #4f9a3f; }
.ws-path-grammar { border-top-color: #b5642f; }
.ws-path-handwriting { border-top-color: #8a6fb0; }
.ws-path-early { border-top-color: var(--fs-accent); }
.ws-path-cardhead h3 {
  margin: 0 0 0.25rem;
  color: var(--fs-primary);
  font-size: 1.15rem;
}
.ws-path-cardhead p { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--fs-text-muted); }
.ws-skill-nodes { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.5rem; }
.ws-skill-node a {
  display: block;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-md);
  background: var(--fs-bg);
  padding: 0.6rem 0.7rem;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ws-skill-node a:hover { border-color: var(--fs-accent); background: var(--fs-card-bg); }
.ws-skill-name { display: block; font-weight: 700; color: var(--fs-primary); font-size: 0.92rem; }
.ws-skill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: var(--fs-text-muted);
}
.ws-skill-grade { font-weight: 700; color: var(--fs-secondary); }
.ws-skill-starter {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.76rem;
  color: var(--fs-text-light);
}
.ws-skill-starter em { font-style: italic; color: var(--fs-text-muted); }
.ws-path-all {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--fs-primary);
}

/* ── Phase 5: Preview modal ── */
body.ws-modal-open { overflow: hidden; }
.ws-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.ws-modal[hidden] { display: none; }
.ws-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 15, 0, 0.55);
  backdrop-filter: blur(2px);
}
.ws-modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: 90vh;
  background: var(--fs-card-bg);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-xl);
  overflow: hidden;
}
.ws-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--fs-border-light);
}
.ws-modal-title { margin: 0; font-size: 1.2rem; color: var(--fs-primary); }
.ws-modal-sub { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--fs-text-muted); }
.ws-modal-close {
  border: none;
  background: none;
  color: var(--fs-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 0;
  border-radius: var(--fs-radius-sm);
}
.ws-modal-close:hover { color: var(--fs-primary); background: var(--fs-bg); }
.ws-modal-body {
  overflow-y: auto;
  padding: 1.25rem;
  background: var(--fs-bg);
}
.ws-modal-pages { display: grid; gap: 1rem; justify-items: center; }
.ws-modal-pages.is-sample-fan {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  width: min(100%, 620px);
  margin: 0 auto;
  padding: 1.25rem 0.75rem;
}
.ws-modal-page {
  width: 100%;
  max-width: 560px;
  height: auto;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-sm);
  box-shadow: var(--fs-shadow-md);
  background: #fff;
}
.ws-modal-pages.is-sample-fan .ws-modal-page {
  max-width: none;
  transform-origin: center;
}
.ws-modal-pages.is-sample-fan .ws-modal-page:nth-child(1) {
  transform: translateX(20%) rotate(-7deg);
}
.ws-modal-pages.is-sample-fan .ws-modal-page:nth-child(2) {
  position: relative;
  z-index: 1;
  transform: translateY(-4%) scale(1.04);
}
.ws-modal-pages.is-sample-fan .ws-modal-page:nth-child(3) {
  transform: translateX(-20%) rotate(7deg);
}
.ws-modal-locked {
  text-align: center;
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px dashed var(--fs-border-light);
  border-radius: var(--fs-radius-md);
  color: var(--fs-text-muted);
}
.ws-modal-locked svg { color: var(--fs-accent); margin-bottom: 0.4rem; }
.ws-modal-locked p { margin: 0 0 0.8rem; }
.ws-modal-foot {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1.25rem 1.2rem;
  border-top: 1px solid var(--fs-border-light);
}
.ws-modal-download { align-self: flex-start; }

@media (max-width: 520px) {
  .ws-card-preview-fan {
    min-height: 220px;
  }
  .ws-card-fan {
    width: min(72%, 150px);
  }
  .ws-modal-pages.is-sample-fan {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0;
  }
  .ws-modal-pages.is-sample-fan .ws-modal-page,
  .ws-modal-pages.is-sample-fan .ws-modal-page:nth-child(1),
  .ws-modal-pages.is-sample-fan .ws-modal-page:nth-child(2),
  .ws-modal-pages.is-sample-fan .ws-modal-page:nth-child(3) {
    transform: none;
  }
}

/* ── Phase 7: sample ladder ── */
.ws-ladder { border-top: 1px dashed var(--fs-border-light); padding-top: 0.85rem; }
.ws-ladder-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
  margin-bottom: 0.55rem;
}
.ws-ladder-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
}
.ws-ladder-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-md);
  background: var(--fs-bg);
  padding: 0.4rem 0.6rem 0.4rem 0.4rem;
  cursor: pointer;
  text-align: left;
  max-width: 230px;
}
.ws-ladder-item:hover { border-color: var(--fs-accent); }
.ws-ladder-thumb {
  width: 38px;
  height: 49px;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  border: 1px solid var(--fs-border-light);
  background: #fff;
  flex-shrink: 0;
}
.ws-ladder-thumb-empty { display: inline-block; }
.ws-ladder-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ws-ladder-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fs-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ws-ladder-tag {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ws-ladder-tag.is-free { color: #2d5016; }
.ws-ladder-tag.is-premium { color: var(--fs-secondary); }
.ws-ladder-browse {
  align-self: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--fs-primary);
}

/* Screen-reader-only utility (in case the base theme lacks it) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Dismissable drawer backdrop — a real element (JS toggles [hidden]) so it can
   take a click. Only ever shown at the mobile breakpoint. */
.ws-filters-overlay { display: none; }
body.ws-drawer-open { overflow: hidden; }

/* ── Responsive: filter drawer on small screens ── */
@media (max-width: 860px) {
  .ws-lib-layout { grid-template-columns: 1fr; }
  .ws-filter-toggle { display: inline-flex; }
  .ws-filters {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 86vw);
    max-height: none;
    border-radius: 0;
    z-index: 1001;
    overflow-y: auto;
    transform: translateX(-104%);
    transition: transform 0.22s ease;
  }
  .ws-filters-open .ws-filters { transform: none; box-shadow: var(--fs-shadow-xl); }
  .ws-filters-close { display: block; }
  .ws-filters-overlay:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(26, 15, 0, 0.45);
    z-index: 1000;
  }
}

@media (max-width: 480px) {
  .ws-results .ws-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
  .ws-card-actions { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════════
   SITEWIDE RESPONSIVE TYPOGRAPHY (2026-06-03)
   Fluid display type that steps down cleanly to phones — applied to the base
   headings AND the per-template heroes so every page responds the same way.
   Root is 17px; body copy never drops below it (≥16px everywhere).
   ════════════════════════════════════════════════════════════════════════ */

/* Headings never overflow or break mid-word; balance lines where supported. */
h1, h2, h3, h4, h5, h6,
.page-hero-title, .hero-title, .section-title,
.games-hub-hero h1, .packet-hero h1, .ws-catalog-card h2, .ws-card-title {
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Desktop/tablet display tuning (≥641px). Gated so the per-template mobile
   clamps + line-heights (defined in @media max-width:640px blocks above)
   remain authoritative on phones — an ungated rule here would win on source
   order and defeat them. */
@media (min-width: 641px) {
  /* Comfortable display line-height (the base 1.3 reads tall at display sizes). */
  .page-hero-title, .hero-title, .packet-hero h1, .games-hub-hero h1 {
    line-height: 1.18;
  }
  /* Cap the one oversized desktop hero (was clamp(...,4.9rem) ≈ 78px) so display
     type is consistent across the site. */
  .packet-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
}

/* Make the decorative 404 code fluid (no per-breakpoint override conflicts). */
.error-404 .error-code { font-size: clamp(3.25rem, 12vw, 5rem); line-height: 1; }

@media (max-width: 600px) {
  /* Big hero display titles: a touch tighter so 2–3 line phone headings sit well. */
  .page-hero-title, .hero-title, .packet-hero h1, .games-hub-hero h1 { line-height: 1.2; }

  /* Ease wide-tracked, heavy uppercase eyebrows so they don't feel cramped at
     phone sizes (the widest were 0.12–0.16em). */
  .ws-catalog-kicker, .packet-kicker, .hero-kicker, .coming-soon-label,
  .badge, .stat-label, .ws-filter-label, .ws-ladder-label, .ws-card-badge,
  .footer-col h4.footer-col-title, .games-strip-program, .packet-day-label {
    letter-spacing: 0.05em;
  }
  .ws-catalog-kicker, .packet-kicker { font-weight: 700; }

  /* Comfortable tap targets + spacing for primary actions on phones. */
  .btn { min-height: 44px; }
}

/* ════════════════════════════════════════════════════════════════════════
   EDUCATION ENGINE DRAFT LIBRARY SCAFFOLD
   Hidden/internal review surface for generated drafts. Source PDFs are not
   public; only generated WebP previews are shown here.
   ════════════════════════════════════════════════════════════════════════ */

.draft-library-page {
  background:
    radial-gradient(circle at 12% 4%, rgba(200, 134, 10, 0.08), transparent 30rem),
    var(--fs-bg);
}

.draft-hero {
  padding: clamp(3rem, 6vw, 5rem) 1rem 2.5rem;
}

.draft-kicker {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-secondary);
}

.draft-hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.draft-hero-stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-full);
  background: rgba(255, 255, 255, 0.72);
  color: var(--fs-text-light);
  box-shadow: var(--fs-shadow-sm);
}

.draft-hero-stats strong {
  color: var(--fs-primary);
}

.draft-library-shell {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.draft-empty-state,
.draft-controls,
.draft-result-bar,
.draft-card {
  border: 1px solid var(--fs-border-light);
  background: var(--fs-card-bg);
  box-shadow: var(--fs-shadow-sm);
}

.draft-empty-state {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem;
  border-radius: var(--fs-radius-lg);
}

.draft-empty-state h2 {
  margin-bottom: 0.55rem;
  color: var(--fs-primary);
}

.draft-empty-state code {
  display: block;
  margin-top: 1rem;
  padding: 0.85rem;
  border-radius: var(--fs-radius-md);
  background: rgba(45, 80, 22, 0.08);
  overflow-x: auto;
}

.draft-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(150px, 1fr)) auto;
  gap: 0.75rem;
  align-items: end;
  padding: 1rem;
  border-radius: var(--fs-radius-lg);
}

.draft-controls label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.draft-controls label span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-text-muted);
}

.draft-controls input,
.draft-controls select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-sm);
  background: var(--fs-bg);
  color: var(--fs-text);
  padding: 0.6rem 0.7rem;
  font: inherit;
}

.draft-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--fs-radius-md);
  color: var(--fs-text-light);
}

.draft-result-bar p {
  margin: 0;
}

.draft-result-bar a {
  font-weight: 700;
  color: var(--fs-primary);
}

.draft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.draft-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--fs-radius-lg);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.draft-card:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 80, 22, 0.26);
  box-shadow: var(--fs-card-shadow-hover);
}

.draft-card-media {
  position: relative;
  min-height: 230px;
  padding: 1.1rem;
  background:
    linear-gradient(145deg, rgba(45, 80, 22, 0.08), rgba(200, 134, 10, 0.08)),
    #fbf8f2;
  display: grid;
  place-items: center;
}

.draft-card-media img {
  display: block;
  width: min(78%, 190px);
  max-height: 220px;
  object-fit: contain;
  object-position: top center;
  border: 1px solid rgba(61, 28, 2, 0.14);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(61, 28, 2, 0.16);
}

.draft-card.is-locked .draft-card-media img {
  filter: saturate(0.9);
}

.draft-card-placeholder {
  width: 142px;
  aspect-ratio: 8.5 / 11;
  display: grid;
  place-items: center;
  border: 1px dashed var(--fs-border-light);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--fs-text-muted);
  font-weight: 800;
}

.draft-access-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.28rem 0.55rem;
  border-radius: var(--fs-radius-full);
  background: var(--fs-primary);
  color: var(--fs-text-on-green);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--fs-shadow-sm);
}

.draft-card.is-locked .draft-access-badge {
  background: var(--fs-accent);
  color: var(--fs-earth);
}

.draft-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.draft-card-meta,
.draft-card-note {
  margin: 0;
  color: var(--fs-text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.draft-card-meta {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fs-secondary);
}

.draft-card h2 {
  margin: 0;
  color: var(--fs-primary);
  font-size: clamp(1.05rem, 2vw, 1.24rem);
  line-height: 1.25;
}

.draft-card-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin: 0;
}

.draft-card-facts div {
  min-width: 0;
  padding: 0.5rem;
  border-radius: var(--fs-radius-sm);
  background: rgba(45, 80, 22, 0.06);
}

.draft-card-facts dt {
  margin-bottom: 0.18rem;
  color: var(--fs-text-muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.draft-card-facts dd {
  margin: 0;
  color: var(--fs-text);
  font-size: 0.85rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.draft-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.draft-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.8rem;
  color: var(--fs-text-light);
}

[data-theme="dark"] .draft-hero-stats span,
[data-theme="dark"] .draft-card-media,
[data-theme="dark"] .draft-empty-state code {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .draft-controls input,
[data-theme="dark"] .draft-controls select {
  background: #1A1410;
}

[data-theme="dark"] .draft-card-facts div {
  background: rgba(90, 155, 58, 0.10);
}

@media (max-width: 1100px) {
  .draft-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .draft-controls,
  .draft-result-bar,
  .draft-pagination {
    align-items: stretch;
    flex-direction: column;
  }
  .draft-controls {
    grid-template-columns: 1fr;
  }
  .draft-result-bar {
    display: flex;
  }
  .draft-card-facts {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   FAITH READERS CURRICULUM PREMIUM SHOWCASE
   Public-facing curriculum portal built from protected Education Engine
   draft previews. Clean PDFs stay gated.
   ════════════════════════════════════════════════════════════════════════ */

.frc-page {
  background:
    radial-gradient(circle at 10% 6%, rgba(200, 134, 10, 0.10), transparent 28rem),
    linear-gradient(180deg, rgba(45, 80, 22, 0.04), transparent 30rem),
    var(--fs-bg);
}

.frc-hero {
  padding: clamp(3.25rem, 7vw, 5.5rem) 1rem 3rem;
  border-bottom: 1px solid var(--fs-border-light);
}

.frc-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.78fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.frc-kicker,
.frc-card-kicker {
  margin: 0;
  color: var(--fs-secondary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.frc-hero h1,
.frc-section-head h2,
.frc-access-inner h2 {
  margin: 0.55rem 0 0;
  color: var(--fs-primary-dark);
  font-family: var(--fs-heading-font);
  line-height: 1.08;
  text-wrap: balance;
}

.frc-hero h1 {
  max-width: 780px;
  font-size: clamp(2.45rem, 7vw, 5rem);
}

.frc-hero-lede {
  max-width: 700px;
  margin: 1.1rem 0 0;
  color: var(--fs-text);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.65;
}

.frc-hero-note {
  max-width: 620px;
  margin: 1rem 0 0;
  color: var(--fs-text-light);
  font-style: italic;
  line-height: 1.55;
}

.frc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.frc-hero-preview {
  position: relative;
  min-height: clamp(360px, 48vw, 560px);
  display: grid;
  place-items: center;
}

.frc-preview-fan {
  position: relative;
  width: min(100%, 420px);
  min-height: 360px;
  isolation: isolate;
}

.frc-preview-fan img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(66%, 250px);
  max-height: 88%;
  object-fit: contain;
  object-position: top center;
  border: 1px solid rgba(61, 28, 2, 0.18);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(61, 28, 2, 0.22);
  pointer-events: none;
  user-select: none;
}

.frc-preview-fan img:nth-child(1) {
  transform: translate(-76%, -50%) rotate(-8deg);
  z-index: 1;
}

.frc-preview-fan img:nth-child(2) {
  transform: translate(-50%, -53%) scale(1.04);
  z-index: 3;
}

.frc-preview-fan img:nth-child(3) {
  transform: translate(-24%, -50%) rotate(8deg);
  z-index: 2;
}

.frc-preview-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px dashed var(--fs-border-light);
  border-radius: var(--fs-radius-lg);
  color: var(--fs-text-muted);
  background: rgba(255, 255, 255, 0.44);
}

.frc-preview-lock {
  position: absolute;
  right: 0;
  bottom: 1rem;
  z-index: 5;
  max-width: 260px;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-md);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--fs-shadow-md);
}

.frc-preview-lock strong,
.frc-preview-lock span {
  display: block;
}

.frc-preview-lock strong {
  color: var(--fs-primary-dark);
  font-size: 0.9rem;
}

.frc-preview-lock span {
  margin-top: 0.25rem;
  color: var(--fs-text-light);
  font-size: 0.78rem;
  line-height: 1.4;
}

.frc-proof-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.8rem;
  margin-bottom: 1rem;
}

.frc-proof-row div {
  padding: 1rem;
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-md);
  background: var(--fs-card-bg);
  box-shadow: var(--fs-shadow-sm);
}

.frc-proof-row strong {
  display: block;
  color: var(--fs-primary-dark);
  font-family: var(--fs-heading-font);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1;
}

.frc-proof-row span {
  display: block;
  margin-top: 0.4rem;
  color: var(--fs-text-light);
  font-size: 0.84rem;
  line-height: 1.35;
}

.frc-section {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.frc-section-head {
  max-width: 780px;
  margin-bottom: 2rem;
}

.frc-section-head h2,
.frc-access-inner h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
}

.frc-section-head p:not(.frc-kicker),
.frc-access-inner p {
  margin: 0.9rem 0 0;
  color: var(--fs-text-light);
  font-size: 1.02rem;
  line-height: 1.65;
}

.frc-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.frc-three article,
.frc-grade-card,
.frc-family-card,
.frc-rhythm-grid article,
.frc-access-card {
  border: 1px solid var(--fs-border-light);
  border-radius: var(--fs-radius-lg);
  background: var(--fs-card-bg);
  box-shadow: var(--fs-shadow-sm);
}

.frc-three article {
  padding: 1.15rem;
}

.frc-three span {
  color: var(--fs-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.frc-three h3,
.frc-grade-card h3,
.frc-family-card h3,
.frc-rhythm-grid h3,
.frc-access-card h3 {
  margin: 0.45rem 0 0;
  color: var(--fs-primary-dark);
  font-family: var(--fs-heading-font);
  line-height: 1.2;
}

.frc-three p,
.frc-grade-body p,
.frc-family-body p,
.frc-rhythm-grid p,
.frc-access-card li {
  color: var(--fs-text-light);
  line-height: 1.55;
}

.frc-grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.1rem;
}

.frc-grade-card,
.frc-family-card {
  overflow: hidden;
}

.frc-grade-preview,
.frc-family-media {
  min-height: 310px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(45, 80, 22, 0.08), rgba(200, 134, 10, 0.10)),
    #fbf8f2;
}

.frc-grade-preview .frc-preview-fan,
.frc-family-media .frc-preview-fan {
  width: min(100%, 310px);
  min-height: 285px;
}

.frc-grade-preview .frc-preview-fan img,
.frc-family-media .frc-preview-fan img {
  width: min(64%, 180px);
}

.frc-grade-body,
.frc-family-body {
  padding: 1rem;
}

.frc-grade-theme {
  margin: 0.35rem 0 0.45rem;
  color: var(--fs-secondary) !important;
  font-weight: 800;
}

.frc-grade-foot {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--fs-border-light);
}

.frc-grade-foot span:first-child,
.frc-family-body span {
  color: var(--fs-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.frc-grade-foot span:last-child {
  color: var(--fs-text-muted);
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.45;
}

.frc-family-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.frc-family-card {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1fr);
  align-items: stretch;
}

.frc-family-media {
  min-height: 250px;
}

.frc-family-media .frc-preview-fan {
  min-height: 235px;
}

.frc-family-media .frc-preview-fan img {
  width: min(62%, 145px);
}

.frc-rhythm-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
}

.frc-rhythm-grid article {
  padding: 1rem;
}

.frc-rhythm-grid strong {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--fs-radius-full);
  background: var(--fs-primary);
  color: var(--fs-text-on-green);
  font-family: var(--fs-heading-font);
}

.frc-access-band {
  margin-top: 1rem;
  padding: clamp(3rem, 6vw, 5rem) 1rem;
  background:
    linear-gradient(135deg, rgba(45, 80, 22, 0.94), rgba(61, 28, 2, 0.94)),
    var(--fs-primary-dark);
  color: var(--fs-text-on-green);
}

.frc-access-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 2rem;
  align-items: center;
}

.frc-access-inner .frc-kicker,
.frc-access-inner h2,
.frc-access-inner p {
  color: var(--fs-text-on-green);
}

.frc-access-card {
  padding: 1.2rem;
  background: rgba(249, 245, 239, 0.96);
  color: var(--fs-text);
}

.frc-access-card ul {
  margin: 0.8rem 0 1rem;
  padding-left: 1.1rem;
}

.frc-access-card li + li {
  margin-top: 0.35rem;
}

.frc-notify {
  max-width: 900px;
}

[data-theme="dark"] .frc-preview-lock,
[data-theme="dark"] .frc-grade-preview,
[data-theme="dark"] .frc-family-media {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .frc-access-card {
  background: #2A2018;
}

@media (max-width: 980px) {
  .frc-hero-inner,
  .frc-access-inner {
    grid-template-columns: 1fr;
  }
  .frc-hero-preview {
    min-height: 410px;
  }
  .frc-proof-row,
  .frc-three,
  .frc-rhythm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .frc-family-grid,
  .frc-family-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .frc-hero {
    padding-top: 2.6rem;
  }
  .frc-hero h1 {
    font-size: clamp(2.1rem, 12vw, 3rem);
  }
  .frc-hero-actions,
  .frc-access-card .btn {
    width: 100%;
  }
  .frc-hero-actions .btn {
    width: 100%;
  }
  .frc-proof-row,
  .frc-three,
  .frc-rhythm-grid {
    grid-template-columns: 1fr;
  }
  .frc-preview-fan {
    min-height: 330px;
  }
  .frc-preview-fan img {
    width: min(70%, 210px);
  }
  .frc-preview-lock {
    position: static;
    margin-top: 0.75rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE POLISH (2026-06-22) — "illuminated schoolbook" depth.
   Scoped to body.faith-home; tokens only (dark-mode safe).
   ════════════════════════════════════════════════════════════════ */

/* — Ornamented section headers — */
body.faith-home .fs-sec-head { text-align: center; max-width: 720px; margin: 0 auto 2.6rem; }
body.faith-home .fs-sec-head-sm { margin-bottom: 1.4rem; }
body.faith-home .fs-eyebrow { font-family: var(--fs-heading-font); font-style: italic; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fs-accent); margin: 0 0 0.55rem; }
body.faith-home .fs-sec-head .section-title { margin: 0; }
body.faith-home .fs-sec-sub { margin: 1rem auto 0; color: var(--fs-text-light); max-width: 640px; }
body.faith-home .fs-rule { display: flex; align-items: center; justify-content: center; gap: 0.65rem; margin: 0.95rem auto 0; }
body.faith-home .fs-rule::before,
body.faith-home .fs-rule::after { content: ""; width: 54px; height: 1px; }
body.faith-home .fs-rule::before { background: linear-gradient(90deg, transparent, var(--fs-accent)); }
body.faith-home .fs-rule::after { background: linear-gradient(90deg, var(--fs-accent), transparent); }
body.faith-home .fs-rule span { width: 7px; height: 7px; transform: rotate(45deg); background: var(--fs-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-accent) 18%, transparent); }
body.faith-home .fs-textlink { color: var(--fs-secondary); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--fs-accent); }
body.faith-home .fs-textlink:hover { color: var(--fs-primary); }

/* — Atmospheric tinted band (visual rhythm) — */
body.faith-home .fs-band {
  background:
    radial-gradient(ellipse at 12% -10%, color-mix(in srgb, var(--fs-accent) 9%, transparent), transparent 42%),
    radial-gradient(ellipse at 92% 110%, color-mix(in srgb, var(--fs-primary) 8%, transparent), transparent 46%),
    var(--fs-bg);
}

/* — Card grids — */
body.faith-home .fs-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; }
body.faith-home .fs-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; }

/* — Library / tool cards — */
body.faith-home .fs-lib-card {
  --accent: var(--fs-primary);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 1.6rem 1.5rem 1.45rem; text-decoration: none; color: inherit;
  background: linear-gradient(165deg, var(--fs-card-bg), color-mix(in srgb, var(--fs-card-bg) 86%, var(--fs-bg)));
  border: 1px solid var(--fs-border-light); border-radius: var(--fs-radius-xl);
  box-shadow: var(--fs-shadow-sm);
  transition: transform .24s cubic-bezier(.4,0,.2,1), box-shadow .24s ease, border-color .24s ease;
}
body.faith-home .fs-lib-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--fs-accent)));
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
body.faith-home .fs-lib-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fs-shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--fs-border-light));
}
body.faith-home .fs-lib-card:hover::before { transform: scaleX(1); }
body.faith-home .fs-lib-card:focus-visible { outline: 3px solid var(--fs-accent); outline-offset: 3px; }

body.faith-home .fs-lib-icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.05rem; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--fs-card-bg));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
body.faith-home .fs-card-tag { font-size: .71rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); margin-bottom: .42rem; }
body.faith-home .fs-lib-card h3 { font-family: var(--fs-heading-font); font-size: 1.32rem; line-height: 1.14; color: var(--fs-primary-dark); margin: 0 0 .5rem; }
body.faith-home .fs-lib-card p { font-size: .93rem; line-height: 1.6; color: var(--fs-text-light); margin: 0 0 1.1rem; flex: 1 1 auto; }
body.faith-home .fs-lib-cta { font-family: var(--fs-heading-font); font-weight: 700; font-size: .9rem; color: var(--fs-primary); display: inline-flex; align-items: center; gap: .4rem; }
body.faith-home .fs-lib-cta svg { width: 15px; height: 15px; transition: transform .2s ease; }
body.faith-home .fs-lib-card:hover .fs-lib-cta svg { transform: translateX(4px); }

/* Coming-soon variant */
body.faith-home .fs-lib-card.is-soon { background: var(--fs-bg); border-style: dashed; box-shadow: none; }
body.faith-home .fs-lib-card.is-soon:hover { box-shadow: var(--fs-shadow-md); }
body.faith-home .fs-soon-badge { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fs-secondary); background: color-mix(in srgb, var(--fs-secondary) 12%, var(--fs-card-bg)); border: 1px solid color-mix(in srgb, var(--fs-secondary) 25%, transparent); padding: .25rem .6rem; border-radius: var(--fs-radius-full); margin-bottom: .55rem; }

/* Tool card — circular icon chip */
body.faith-home .fs-tool-icon {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; line-height: 1; margin-bottom: 1rem;
  background: color-mix(in srgb, var(--fs-accent) 14%, var(--fs-card-bg));
  border: 2px solid color-mix(in srgb, var(--fs-accent) 42%, transparent);
}

/* — Start-here steps (numbered, connected) — */
body.faith-home .fs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; max-width: 960px; margin: 0 auto; position: relative; }
body.faith-home .fs-step {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem;
  padding: 1.6rem 1.4rem 1.35rem; text-decoration: none; color: inherit;
  background: var(--fs-card-bg); border: 1px solid var(--fs-border-light); border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
body.faith-home .fs-step:hover { transform: translateY(-4px); box-shadow: var(--fs-shadow-md); }
body.faith-home .fs-step-num {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--fs-heading-font); font-weight: 700; font-size: 1.2rem; color: var(--fs-text-on-green);
  background: linear-gradient(145deg, var(--fs-primary), var(--fs-primary-dark));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--fs-primary) 38%, transparent);
}
body.faith-home .fs-step h4 { font-family: var(--fs-heading-font); color: var(--fs-primary-dark); margin: .2rem 0 0; font-size: 1.12rem; }
body.faith-home .fs-step p { margin: 0; font-size: .88rem; color: var(--fs-text-light); line-height: 1.5; }
@media (min-width: 720px) {
  body.faith-home .fs-steps::before {
    content: ""; position: absolute; top: calc(1.6rem + 21px); left: 17%; right: 17%; height: 2px; z-index: 0;
    background: repeating-linear-gradient(90deg, var(--fs-accent) 0 7px, transparent 7px 15px); opacity: .35;
  }
}
@media (max-width: 720px) { body.faith-home .fs-steps { grid-template-columns: 1fr; max-width: 460px; } }

/* — HARVEST banner — */
body.faith-home .fs-harvest-card {
  max-width: 940px; margin: 0 auto; border-radius: var(--fs-radius-xl); padding: 2rem 2.25rem;
  position: relative; overflow: hidden; border: 1px solid rgba(201,168,76,0.35);
  background:
    radial-gradient(circle at 12% 18%, rgba(201,168,76,0.18), transparent 42%),
    linear-gradient(135deg, #5A2E00 0%, #3a4f22 100%);
  box-shadow: var(--fs-shadow-lg);
}
body.faith-home .fs-harvest-inner { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
body.faith-home .fs-harvest-icon { flex-shrink: 0; width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #F4D589; background: rgba(244,213,137,0.14); border: 2px solid #C9A84C; }
body.faith-home .fs-harvest-text { flex: 1 1 320px; }
body.faith-home .fs-harvest-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #F4D589; margin-bottom: .4rem; }
body.faith-home .fs-harvest-text h3 { font-family: var(--fs-heading-font); color: #FFFDF7; font-size: 1.55rem; margin: 0 0 .5rem; }
body.faith-home .fs-harvest-text p { color: rgba(249,245,239,0.92); margin: 0; font-size: .97rem; line-height: 1.6; }
body.faith-home .fs-harvest-btn { flex-shrink: 0; }
@media (max-width: 640px) {
  body.faith-home .fs-harvest-card { padding: 1.6rem 1.4rem; text-align: center; }
  body.faith-home .fs-harvest-inner { flex-direction: column; }
  body.faith-home .fs-harvest-btn { width: 100%; }
}

/* — Why feature items as soft cards — */
body.faith-home #why .feature-item {
  background: linear-gradient(165deg, var(--fs-card-bg), color-mix(in srgb, var(--fs-card-bg) 88%, var(--fs-bg)));
  border: 1px solid var(--fs-border-light); border-radius: var(--fs-radius-xl); padding: 1.7rem 1.6rem;
  box-shadow: var(--fs-shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
body.faith-home #why .feature-item:hover { transform: translateY(-4px); box-shadow: var(--fs-shadow-md); }

/* — By the numbers: warm gold figures — */
body.faith-home #stats .stat-number {
  background: linear-gradient(135deg, var(--fs-accent-light), var(--fs-secondary));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Homepage polish v2 — browser-review fixes (2026-06-22) ── */

/* Dark-mode header logo: the dark wordmark vanished on near-black. Keep it on a
   cream plate (no separate light asset needed) so it always reads. */
[data-theme="dark"] .site-logo { display: inline-block; background: #F9F5EF; border-radius: 16px; padding: 8px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
@media (max-width: 768px) {
  .header-logo-row { padding-inline: 1rem; }   /* logo never touches the edge */
  [data-theme="dark"] .site-logo { padding: 6px 14px; border-radius: 12px; }
}

/* Lock the green bands to a deep forest green in dark mode — the --fs-primary
   token brightens to ~#5A9B3A in dark, which read as neon and broke the rhythm. */
[data-theme="dark"] .stats-section { background: #2c4424; }
[data-theme="dark"] .flip-card-front { background: linear-gradient(135deg, #34502d 0%, #1f3320 100%); }

/* Deeper, warmer resting shadow so the cards aren't flat "outlined boxes". */
body.faith-home .fs-lib-card { box-shadow: 0 2px 8px rgba(60,40,20,0.07), 0 10px 26px rgba(60,40,20,0.05); }

/* Scripture cross: brand gold line-cross (was a color emoji). */
body.faith-home .flip-card-cross { opacity: 1; display: flex; align-items: center; justify-content: center; }
body.faith-home .flip-card-cross svg { width: 30px; height: 30px; color: #F4D589; opacity: 0.92; }

/* Kill the orphan card in "Why" — 3-up on desktop, 1-up on phones, left-aligned. */
body.faith-home #why .features-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
body.faith-home #why .feature-item { text-align: left; align-items: flex-start; }
body.faith-home #why .feature-text { text-align: left; }
@media (max-width: 880px) { body.faith-home #why .features-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* Scripture cards: clean 4-across block on desktop, 2x2 on phones (no orphan). */
body.faith-home .flip-card-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { body.faith-home .flip-card-grid { grid-template-columns: repeat(2, 1fr); } }

/* Hero title: step down on small phones. */
@media (max-width: 480px) { body.faith-home .hero-title { font-size: clamp(1.5rem, 6.5vw, 2rem); } }