/* ==========================================================================
   LITTLE BLESSINGS INSTITUTE (LBI) — MOBILE-FIRST STYLESHEET (LBI-08)
   Optimized first for 375px & 390px viewports, scaling cleanly to tablet/desktop.
   Color palette & storybook aesthetic grounded in 2026-04-25 Website Brief.
   ========================================================================== */

:root {
  /* Canonical Brand Palette */
  --bg-cream: #FAF6EE;
  --bg-ivory: #FFFDF9;
  --bg-sage-tint: #EEF3EC;
  --sage-deep: #4A6B53;
  --sage-hover: #3B5742;
  --sage-soft: #7A9A82;
  --butter-gold: #F3C969;
  --butter-hover: #E8B84B;
  --warm-brown: #3E2C23;
  --muted-brown: #5E493E;
  --border-warm: #E4DCCF;
  --daisy-pink: #F4D5DC;
  --danny-blue: #D8E5F0;

  /* Typography */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing & Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-soft: 0 10px 28px rgba(62, 44, 35, 0.07);
  --shadow-card: 0 4px 14px rgba(62, 44, 35, 0.05);
}

/* 1. Reset & Base Mobile-First Defaults (375px / 390px Base) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 16px base prevents iOS auto-zoom on form inputs */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--warm-brown);
  background-color: var(--bg-cream);
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--warm-brown);
  line-height: 1.22;
  margin-top: 0;
  font-weight: 600;
}

p {
  margin-top: 0;
  color: var(--muted-brown);
}

a {
  color: var(--sage-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--warm-brown);
}

/* Focus Visibility for Keyboard / WCAG 2.1 AA */
:focus-visible {
  outline: 3px solid var(--sage-deep);
  outline-offset: 3px;
}

.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 */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--warm-brown);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: 0.75rem;
}

/* Layout Container (16px horizontal padding at 375px/390px) */
.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

/* 2. Top Reassurance Bar */
.top-banner {
  background-color: var(--sage-deep);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 0;
  text-align: center;
}

.top-banner__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
}

.top-banner .dot {
  color: var(--butter-gold);
}

/* 3. Sticky Header & Mobile Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-warm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
  gap: 0.5rem;
  position: relative;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--warm-brown);
  min-height: 48px;
}

.brand-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-logo__text strong {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--warm-brown);
}

.brand-logo__text small {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage-deep);
  font-weight: 700;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: var(--bg-sage-tint);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
}

.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background-color: var(--warm-brown);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.primary-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  right: -1rem;
  background: var(--bg-ivory);
  border-bottom: 2px solid var(--border-warm);
  box-shadow: var(--shadow-soft);
  padding: 1rem;
}

.primary-nav.is-open {
  display: block;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--warm-brown);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.nav-link:hover {
  background-color: var(--bg-sage-tint);
  color: var(--sage-deep);
}

/* 4. Buttons (Minimum 48px Touch Target) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.35rem;
  font-family: var(--font-sans);
  font-size: 0.975rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

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

.btn--primary {
  background-color: var(--sage-deep);
  color: #FFFFFF;
}

.btn--primary:hover {
  background-color: var(--sage-hover);
  color: #FFFFFF;
}

.btn--secondary {
  background-color: var(--bg-ivory);
  color: var(--warm-brown);
  border-color: var(--sage-deep);
}

.btn--secondary:hover {
  background-color: var(--bg-sage-tint);
}

.btn--butter {
  background-color: var(--butter-gold);
  color: var(--warm-brown);
}

.btn--butter:hover {
  background-color: var(--butter-hover);
  color: var(--warm-brown);
}

.btn--outline-dark {
  background-color: transparent;
  color: var(--warm-brown);
  border-color: var(--warm-brown);
}

.btn--outline-dark:hover {
  background-color: var(--warm-brown);
  color: #FFFFFF;
}

.btn--sm {
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
}

.btn--lg {
  min-height: 54px;
  padding: 0.9rem 1.75rem;
  font-size: 1.05rem;
}

.btn--block,
.btn--full-mobile {
  width: 100%;
}

/* 5. Hero Section (Mobile-First 375px/390px) */
.hero {
  padding: 2rem 0 3rem;
  background: radial-gradient(circle at top right, #EEF3EC 0%, var(--bg-cream) 65%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--bg-sage-tint);
  color: var(--sage-deep);
  border: 1px solid #C8D8C4;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.825rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.pill-badge--butter {
  background-color: var(--butter-gold);
  color: var(--warm-brown);
  border-color: #E2B44D;
}

.hero__title {
  font-size: clamp(1.85rem, 6vw, 3.1rem);
  margin-bottom: 1rem;
}

.hero__subtitle {
  font-size: 1.0625rem;
  margin-bottom: 1.5rem;
}

.hero__cta-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.trust-pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.trust-pills li {
  background: var(--bg-ivory);
  border: 1px solid var(--border-warm);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
}

/* Hero Storybook Frame */
.storybook-frame {
  background: linear-gradient(180deg, #EAF4F8 0%, #EEF3EC 55%, #E3ECD8 100%);
  border: 3px solid #FFFFFF;
  outline: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
}

.artwork-sky {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.storybook-tag {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  color: var(--muted-brown);
  font-weight: 600;
}

.character-duo-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.char-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-ivory);
  padding: 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-warm);
}

.char-badge--daisy {
  border-left: 5px solid #D97F93;
}

.char-badge--danny {
  border-left: 5px solid #C84B31;
}

.char-avatar {
  font-size: 1.85rem;
}

.char-badge strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
}

.char-badge small {
  color: var(--muted-brown);
  font-size: 0.82rem;
}

.artwork-caption {
  margin: 0;
  font-style: italic;
  font-size: 0.92rem;
  background: rgba(255, 253, 249, 0.9);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--warm-brown);
}

/* 6. Generic Section Spacing & Headers */
.section {
  padding: 3.25rem 0;
}

.section--ivory {
  background-color: var(--bg-ivory);
}

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

.section--sage {
  background-color: var(--bg-sage-tint);
}

.section--sage-dark {
  background-color: var(--sage-deep);
  color: #FFFFFF;
}

.section--sage-dark h2,
.section--sage-dark h3,
.section--sage-dark p {
  color: #FFFFFF;
}

.section-header {
  max-width: 44rem;
  margin: 0 auto 2.25rem;
  text-align: center;
}

.section-header--compact {
  margin-bottom: 1.5rem;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage-deep);
  margin-bottom: 0.5rem;
}

.section-lead {
  font-size: 1.05rem;
}

/* 7. Empathy & Info Cards */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.info-card {
  background: var(--bg-cream);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.info-card__icon {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

/* 8. Promise & 10 Pillars Grid */
.promise-banner {
  background: var(--bg-ivory);
  border: 2px solid #D5E0D1;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.highlight-rhythm {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--sage-deep);
  background: var(--bg-sage-tint);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--sage-deep);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.check-list li {
  position: relative;
  padding-left: 1.75rem;
  font-weight: 600;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sage-deep);
  font-weight: 800;
}

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.pillar-chip {
  background: var(--bg-ivory);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* 9. Free Lesson Opt-In Section */
.free-offer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.lesson-preview-box {
  background: var(--bg-ivory);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  margin-top: 1.25rem;
}

.lesson-checklist {
  padding-left: 1.2rem;
  margin-bottom: 1.25rem;
}

.lesson-checklist li {
  margin-bottom: 0.65rem;
}

.free-offer__form-card,
.contact__form-card {
  background: var(--bg-ivory);
  border: 2px solid var(--sage-deep);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.integration-badge {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #FFF8E6;
  border: 1px solid #E6C770;
  color: var(--warm-brown);
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  margin-bottom: 1.25rem;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.status-dot--pending {
  background-color: #D9822B;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}

.form-control {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--warm-brown);
  background-color: #FFFFFF;
  border: 1px solid #C8BEB0;
  border-radius: var(--radius-sm);
}

.form-control:focus {
  border-color: var(--sage-deep);
  outline: 2px solid var(--sage-deep);
}

.form-privacy-note {
  font-size: 0.8125rem;
  margin-top: 0.85rem;
  margin-bottom: 0;
  text-align: center;
}

.form-feedback {
  margin-top: 1rem;
  padding: 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--bg-sage-tint);
  border: 1px solid var(--sage-deep);
  color: var(--warm-brown);
  font-size: 0.9rem;
}

/* 10. Curriculum Pathway Cards */
.pathway-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.tier-card {
  background: var(--bg-cream);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.tier-card--featured {
  background: #FFFFFF;
  border: 2px solid var(--sage-deep);
  box-shadow: var(--shadow-soft);
}

.featured-ribbon {
  display: inline-block;
  align-self: flex-start;
  background: var(--butter-gold);
  color: var(--warm-brown);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.tier-step {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sage-deep);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.tier-features {
  padding-left: 1.2rem;
  margin-bottom: 1.25rem;
}

.tier-features li {
  margin-bottom: 0.5rem;
}

.integration-note-inline {
  font-size: 0.8125rem;
  background: var(--bg-sage-tint);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}

/* 11. Workbooks Grid & Governance Notice */
.governance-alert {
  background: #FFF8E6;
  border-left: 4px solid #D9822B;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.75rem;
  font-size: 0.925rem;
}

.workbooks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.workbook-card {
  background: var(--bg-ivory);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.workbook-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.workbook-cat {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sage-deep);
  background: var(--bg-sage-tint);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.workbook-price {
  font-weight: 700;
  color: var(--warm-brown);
}

.workbook-card__meta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted-brown);
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-warm);
}

/* 12. Official Little Blessings Friends™ Cards */
.friends-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.friend-card {
  background: var(--bg-cream);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.friend-card__visual {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 140px;
}

.friend-card__visual--daisy { background: linear-gradient(135deg, #F8E3E8, #DCE8F2); }
.friend-card__visual--danny { background: linear-gradient(135deg, #FCEFD2, #F5D6CE); }
.friend-card__visual--juliana { background: linear-gradient(135deg, #E8EEF5, #F9E6EC); }
.friend-card__visual--lucas { background: linear-gradient(135deg, #F5DAD6, #E2EBD9); }

.friend-emoji {
  font-size: 2.5rem;
}

.friend-asset-tag {
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: var(--warm-brown);
}

.friend-card__body {
  padding: 1.35rem;
}

.friend-role {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 0.25rem;
}

.friend-quote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--warm-brown);
  font-weight: 600;
  margin-bottom: 0.65rem;
}

.friend-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.friend-traits span {
  font-size: 0.75rem;
  background: var(--bg-ivory);
  border: 1px solid var(--border-warm);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

/* 13. Video Story Companions Section */
.video-companion__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.video-beats-list {
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
}

.video-beats-list li {
  margin-bottom: 0.65rem;
}

.video-frame-placeholder {
  background: rgba(255, 255, 255, 0.1);
  border: 2px dashed rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-lg);
  padding: 2rem 1.25rem;
  text-align: center;
}

.video-status-pill {
  display: inline-block;
  background: rgba(0, 0, 0, 0.28);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  margin-bottom: 1rem;
}

.play-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--butter-gold);
  color: var(--warm-brown);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1rem;
}

/* 14. About & Photo Placeholders */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.guiding-principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.principle-item {
  background: var(--bg-cream);
  border-left: 4px solid var(--sage-deep);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
}

.principle-item strong {
  display: block;
  color: var(--warm-brown);
}

.photo-placeholder-card {
  margin: 0 0 1.25rem;
  background: var(--bg-cream);
  border: 2px dashed #B9C8B5;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}

.placeholder-icon {
  font-size: 2.25rem;
  display: block;
  margin-bottom: 0.5rem;
}

.photo-placeholder-card figcaption {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted-brown);
  margin-top: 0.75rem;
}

/* 15. Testimonials */
.testimonial-card {
  margin: 0;
  background: var(--bg-ivory);
  border: 1px dashed var(--border-warm);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.testimonial-placeholder-text {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--warm-brown);
}

.testimonial-card footer {
  font-size: 0.825rem;
  color: var(--sage-deep);
  font-weight: 600;
}

/* 16. Accessible FAQ Accordions */
.faq__container {
  max-width: 52rem;
}

.faq-list {
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  background: var(--bg-ivory);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  padding: 0 1.15rem;
}

.faq-item summary {
  min-height: 52px;
  padding: 0.85rem 0;
  font-weight: 700;
  color: var(--warm-brown);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 1.35rem;
  color: var(--sage-deep);
  font-weight: 700;
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding-bottom: 1rem;
  border-top: 1px solid var(--border-warm);
  padding-top: 0.85rem;
}

/* 17. Final CTA, Contact, Legal & Footer */
.section--final-cta {
  background: linear-gradient(135deg, var(--sage-deep), #36523E);
  color: #FFFFFF;
  text-align: center;
}

.section--final-cta h2,
.section--final-cta p {
  color: #FFFFFF;
}

.contact__grid,
.legal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.contact-details-list div {
  margin-bottom: 1rem;
}

.contact-details-list dt {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.contact-details-list dd {
  margin: 0.2rem 0 0;
}

.section--legal {
  background: var(--bg-cream);
  border-top: 1px solid var(--border-warm);
}

.legal-card {
  background: var(--bg-ivory);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  font-size: 0.9rem;
}

.legal-meta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sage-deep);
}

.site-footer {
  background: var(--warm-brown);
  color: #F5EFE6;
  padding: 3rem 0 2rem;
}

.site-footer p,
.site-footer a,
.site-footer h4 {
  color: #F5EFE6;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.5rem;
  font-size: 0.825rem;
}

/* 18. Sample Lesson Preview Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(62, 44, 35, 0.65);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-card {
  background: var(--bg-ivory);
  border-radius: var(--radius-lg);
  max-width: 42rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.modal-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-warm);
  background: var(--bg-cream);
  cursor: pointer;
  font-size: 1.1rem;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* ==========================================================================
   TABLET & DESKTOP BREAKPOINTS (Progressive Enhancement)
   ========================================================================== */

@media (min-width: 640px) {
  .hero__cta-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .btn--full-mobile {
    width: auto;
  }

  .trust-pills {
    grid-template-columns: repeat(3, 1fr);
  }

  .character-duo-preview,
  .pillars-grid,
  .guiding-principles,
  .cards-grid--4,
  .workbooks-grid,
  .friends-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .nav-toggle,
  .header__cta-mobile {
    display: none;
  }

  .primary-nav {
    display: block;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
  }

  .nav-link {
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
  }

  .hero__grid,
  .free-offer__grid,
  .video-companion__grid,
  .about__grid,
  .contact__grid,
  .legal-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .promise-banner {
    grid-template-columns: 1.3fr 0.7fr;
    align-items: center;
    padding: 2.25rem;
  }

  .cards-grid--3,
  .pathway-grid,
  .workbooks-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cards-grid--4,
  .friends-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
}
/* LBI website v2 mobile polish */
:root {--bg-cream:#f8f5e9;--bg-ivory:#fffdf7;--sage-deep:#365d45;--warm-brown:#473429;--border-warm:#dce6d3}
.brand-logo__badge {background:transparent!important;width:60px;height:60px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%}
.brand-logo__badge img {height:100%;width:100%;object-fit:cover}
.hero {background:linear-gradient(150deg,#f9f6ed 0%,#e7f0dd 100%);padding-top:3.5rem}
.hero__title {font-size:clamp(2.1rem,5vw,4.6rem);letter-spacing:-.035em;line-height:1.11}
.hero__subtitle {font-size:clamp(1rem,1.3vw,1.16rem);max-width:38rem}
.hero-visual {overflow:hidden;border-radius:28px;border:8px solid #fff;box-shadow:0 24px 65px #365d4525}
.hero-visual img {display:block;width:100%;aspect-ratio:1.7/1;object-fit:cover;object-position:center}
.hero__cta-group {max-width:520px}
.section {padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3rem,7vw,5.5rem)}
.section-header h2 {font-size:clamp(1.9rem,3.6vw,3rem)}
.friend-card {overflow:hidden}
.auth-character {width:100%;height:230px;object-fit:contain;object-position:center;margin:0 auto 1rem;background:radial-gradient(ellipse,#e6f0de 0%,transparent 70%);border-radius:22px}
.free-lesson-art {display:block;width:100%;margin-top:1.5rem;border-radius:18px}
.preview-disclaimer {font-size:.875rem;color:#5b5549;background:#f4f6ec;padding:.7rem 1rem;border-radius:12px}
@media(min-width:960px){.hero__grid {grid-template-columns:1.03fr .97fr;gap:3rem}.hero-visual img {aspect-ratio:1.32/1}}
@media(max-width:639px){.hero{padding-top:1.6rem}.hero__title{font-size:2.25rem}.hero-visual{border-width:5px}.hero-visual img{aspect-ratio:1.45/1}.site-header .brand-logo__badge {height:45px;width:45px}.brand-logo__text strong{font-size:.94rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============= V3 ORIGINAL STORYBOOK ART DIRECTION ============= */
body{background:#faf7e9;overflow-x:clip}
.top-banner{background:#557e65}.site-header{background:rgba(255,254,247,.92);border-bottom:1px solid rgba(68,105,80,.13)}
.hero--storybook{position:relative;overflow:hidden;isolation:isolate;min-height:720px;padding:0 0 125px!important;background:linear-gradient(180deg,#c7e9fa 0%,#eaf5f2 55%,#e4eecf 100%)}
.hero-sky{position:absolute;z-index:-2;inset:0 0 21%;background:url('assets/clouds.webp') center top/cover no-repeat;opacity:.9}
.hero-meadow{position:absolute;z-index:-1;bottom:-1px;left:0;right:0;height:51%;background:url('assets/meadow.webp') center bottom/cover no-repeat;mask-image:linear-gradient(to bottom,transparent,black 31%)}
.hero-scene{position:relative;display:grid;grid-template-columns:1fr 1.02fr;align-items:center;gap:1rem;min-height:620px;padding-top:4.5rem}
.hero-copy{max-width:620px;z-index:5;text-shadow:0 1px 0 #fff8}.hero-eyebrow{display:inline-block;font-size:.84rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#37694b;margin-bottom:1.2rem}
.hero-copy h1{font-size:clamp(3.1rem,5.2vw,5.8rem);max-width:640px;line-height:1.02;letter-spacing:-.055em;color:#3b4d31;margin:0 0 1.5rem}
.hero-copy h1 em{font-style:italic;color:#9b694a}.hero-lead{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:600;max-width:490px;color:#4e5e4a;line-height:1.6;margin-bottom:1.7rem}
.hero-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}.hero-actions .btn{box-shadow:0 8px 0 rgba(32,90,59,.1)}.hero-text-link{font-weight:800;max-width:230px}
.hero-reassurance{font-size:.82rem;color:#527355;margin-top:1.25rem;font-weight:700}.hero-reassurance span{color:#b96969}
.hero-cast{height:520px;position:relative;align-self:end;margin-left:-2rem}.hero-character{position:absolute;bottom:0;height:auto;width:auto;max-height:390px;object-fit:contain;filter:drop-shadow(0 15px 12px #50703427);transform-origin:center 85%;animation:helloBob 5s ease-in-out infinite;transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.hero-character--daisy{left:4%;max-height:355px;z-index:3;animation-delay:0s}.hero-character--danny{right:3%;max-height:345px;z-index:2;animation-delay:.9s}.hero-character--juliana{left:31%;max-height:435px;z-index:4;animation-delay:1.7s}.hero-character--lucas{right:25%;max-height:375px;z-index:5;animation-delay:2.5s}
.hero-cast.is-seen .hero-character--daisy{transform:rotate(-4deg) translateY(-10px)}.hero-cast.is-seen .hero-character--danny{transform:rotate(5deg) translateY(-12px)}.hero-cast.is-seen .hero-character--juliana{transform:rotate(-3deg) translateY(-14px)}.hero-cast.is-seen .hero-character--lucas{transform:rotate(4deg) translateY(-8px)}
@keyframes helloBob{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 -8px;rotate:-1deg}55%{translate:0 -2px;rotate:1.5deg}}
.story-scroll-hint{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);font-size:.75rem;font-weight:800;display:flex;gap:.5rem;color:#426143;letter-spacing:.09em;text-transform:uppercase}
.section--landscape{position:relative;background:linear-gradient(180deg,#f7f8ea,#f4f6e5)!important}.section--landscape::before{content:"";position:absolute;inset:0;background:url('assets/flowerlesson.webp') center center/cover no-repeat;opacity:.13;pointer-events:none}.section--landscape>.container{position:relative}
.section--open{background:transparent!important}.info-card--open{background:transparent;border:0;box-shadow:none;text-align:center;padding:1rem 1.1rem}.info-card--open .info-card__icon{font-size:2.5rem}.info-card--open h3{color:#456a4b}
.promise-banner.unboxed{box-shadow:none;border:0;background:transparent;padding:0}.pillar-chip.unboxed{border:0;background:transparent;box-shadow:none;border-bottom:1px solid #cddfc6;border-radius:0}
#friends{background:linear-gradient(180deg,#f7f8ea,#eaf4dc)!important}.friends-grid{gap:1rem}.friend-card--floating{background:none;border:0;box-shadow:none;text-align:center;padding:1rem}.friend-card--floating .auth-character{height:260px;background:transparent;transition:transform .8s}.friend-card--floating:hover .auth-character{transform:translateY(-10px) rotate(-3deg)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.reveal.is-seen{opacity:1;transform:translateY(0)}
.footer--garden{background-image:url('assets/garden.webp');background-position:bottom center;background-size:cover}
#final-cta{background:linear-gradient(180deg,#eaf4d7,#b3ce92)!important}
@media(max-width:900px){.hero-scene{grid-template-columns:1fr;min-height:unset;padding-top:2.5rem}.hero--storybook{padding-bottom:80px!important}.hero-copy{max-width:680px}.hero-copy h1{font-size:clamp(2.9rem,8vw,4.8rem)}.hero-cast{width:100%;margin:0;height:395px}.hero-character--juliana{max-height:345px}.hero-character--lucas{max-height:290px}.hero-character--daisy{max-height:265px}.hero-character--danny{max-height:265px}}
@media(max-width:540px){.hero-sky{background-position:center top}.hero-copy h1{font-size:clamp(2.65rem,11vw,3.5rem)}.hero-copy{padding:0 .1rem}.hero-eyebrow{font-size:.72rem}.hero-lead{font-size:1.04rem;line-height:1.55}.hero-actions{align-items:stretch;flex-direction:column;gap:.8rem}.hero-text-link{max-width:none;text-align:center}.hero-cast{height:285px;margin-top:15px}.hero-character--juliana{max-height:252px;left:26%}.hero-character--lucas{max-height:225px;right:19%}.hero-character--daisy{max-height:200px;left:-5%}.hero-character--danny{max-height:195px;right:-5%}.hero-meadow{height:36%}.hero--storybook{padding-bottom:60px!important}.hero-reassurance{font-size:.72rem}.friend-card--floating .auth-character{height:210px}}
@media(prefers-reduced-motion:reduce){.hero-character{animation:none!important}.reveal{opacity:1;transform:none;transition:none}.hero-cast.is-seen .hero-character{transform:none}}

/* v3.1 living editorial storybook update */
.hero--storybook{min-height:690px;overflow:hidden;isolation:isolate}.hero-scene{position:relative;min-height:590px;display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);align-items:center;gap:1.25rem}.hero-copy{position:relative;z-index:5;max-width:550px}.hero-photo-stage{position:relative;min-height:470px;z-index:3;align-self:center}.hero-photo{position:absolute;margin:0;overflow:hidden;border-radius:34px;box-shadow:0 24px 45px #3b4e3a33;border:7px solid #fff}.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}.hero-photo--child-reading{top:3%;left:1%;width:68%;height:64%;transform:rotate(-3deg)}.hero-photo--child-coloring{right:0;bottom:2%;width:65%;height:62%;transform:rotate(3deg)}.hero-mascots{position:absolute;z-index:4;inset:0;pointer-events:none}.hero-mascot{position:absolute;height:auto;object-fit:contain;filter:drop-shadow(0 10px 10px #293a2d26);animation:gentle-wave 5s ease-in-out infinite;transform-origin:50% 85%}.hero-mascot--daisy{width:110px;right:1%;top:4%;animation-delay:-1.8s}.hero-mascot--danny{width:115px;right:40%;bottom:0%;animation-delay:-3s}.photographic-story{background:linear-gradient(#f4f8e9,#edf3e4);padding:1.6rem 0 3rem}.photo-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.photo-story-tile{margin:0;position:relative}.photo-story-tile img{width:100%;height:300px;object-fit:cover;border-radius:25px;box-shadow:0 14px 28px #40503622}.photo-story-tile figcaption{font:600 clamp(1.1rem,2vw,1.5rem) var(--font-serif);margin:.8rem 0;color:#365d45}.auth-character{background:transparent!important;filter:drop-shadow(0 16px 12px #2b4c2820);animation:gentle-sway 5.5s ease-in-out infinite;transform-origin:50% 90%}.friend-card:nth-child(2n) .auth-character{animation-delay:-2s}.preview-quality-note{max-width:1100px;margin:1.5rem auto;font-size:.75rem;opacity:.6;padding:0 1rem}@keyframes gentle-wave{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(5deg) translateY(-8px)}}@keyframes gentle-sway{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(2deg)}}@media(max-width:900px){.hero-scene{grid-template-columns:1fr;min-height:unset}.hero-copy{max-width:620px}.hero-photo-stage{min-height:390px}.hero-mascot--daisy{top:auto;bottom:11%;right:5%}.hero-mascot--danny{bottom:0;right:56%}}@media(max-width:560px){.hero--storybook{min-height:unset}.hero-photo-stage{min-height:305px}.hero-photo{border-width:4px;border-radius:22px}.hero-photo--child-reading{width:72%;height:67%}.hero-photo--child-coloring{width:68%;height:65%}.hero-mascot--daisy{width:75px;right:0;bottom:4%}.hero-mascot--danny{width:74px;right:67%;bottom:0}.photo-story-grid{grid-template-columns:1fr;gap:1.4rem}.photo-story-tile img{height:230px}.photo-story-tile figcaption{text-align:center}}@media(prefers-reduced-motion:reduce){.hero-mascot,.auth-character{animation:none!important}}

.photo-story-tile{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}.photo-story-tile.is-visible{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.photo-story-tile{opacity:1;transform:none}}

/* Workbook showcase v3.3 */
.workbooks-grid {align-items:stretch}
.workbook-card {border:0;background:transparent;box-shadow:none;padding:1rem 0;justify-content:start}
.workbook-cover,.workbook-cover-fallback {width:100%;height:230px;display:flex;align-items:center;justify-content:center;object-fit:contain;border-radius:20px;margin-bottom:1.1rem;background:#f1ead9}
.workbook-cover--sample {object-fit:contain;background:#f8f1e3;box-shadow:0 8px 22px #3e2c231c}
.workbook-cover-fallback {background:linear-gradient(140deg,#f8e9c9,#e0ebd6);border:1px solid #dfd6c5}
.workbook-cover-fallback span {font-family:var(--font-serif);font-size:3rem;color:#467054;letter-spacing:.08em;opacity:.75}
.workbook-card:hover .workbook-cover,.workbook-card:hover .workbook-cover-fallback {transform:translateY(-4px);transition:transform .3s ease}
@media(prefers-reduced-motion:reduce){.workbook-card:hover .workbook-cover,.workbook-card:hover .workbook-cover-fallback {transform:none}}


/* v3.4 unified hero + workbook showcase */
.hero-photo-stage--unified{min-height:520px;display:flex;align-items:center;justify-content:center}
.hero-group-scene{margin:0;position:relative;width:100%;max-width:860px;overflow:hidden;border-radius:38px;box-shadow:0 26px 52px rgba(59,78,58,.24);border:8px solid rgba(255,255,255,.92);background:#fff}
.hero-group-scene img{display:block;width:100%;height:auto;object-fit:cover}
.hero-copy{padding-top:1.2rem;padding-bottom:1rem}
.hero-reassurance{background:rgba(255,255,255,.72);display:inline-flex;gap:.6rem;flex-wrap:wrap;padding:.65rem 1rem;border-radius:999px;backdrop-filter:blur(6px)}
.hero-text-link{font-weight:700}
.workbooks-hero-banner{margin:0 0 2rem;overflow:hidden;border-radius:34px;background:linear-gradient(180deg,#fff9eb,#f7f1df);box-shadow:0 18px 34px rgba(54,93,69,.14)}
.workbooks-hero-banner img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
.workbooks-hero-banner figcaption{padding:1rem 1.2rem 1.35rem;text-align:center;color:#4a5646;font-weight:600;font-size:1rem}
.workbooks-grid{margin-top:.25rem}
@media (max-width:900px){
  .hero-photo-stage--unified{min-height:unset}
  .hero-group-scene{max-width:700px;border-width:6px;border-radius:28px}
}
@media (max-width:560px){
  .hero-copy{padding-top:.5rem}
  .hero-group-scene{border-width:4px;border-radius:22px}
  .hero-reassurance{display:flex;border-radius:20px;padding:.8rem .95rem;line-height:1.4}
  .workbooks-hero-banner{border-radius:22px}
  .workbooks-hero-banner figcaption{font-size:.95rem;padding:.9rem 1rem 1.1rem}
}

/* v3.5 seamlessly integrated hero and complete character roster */
.hero--storybook{min-height:700px}
.hero-scene{width:min(100% - 2rem,1440px);max-width:1440px;grid-template-columns:minmax(290px,.87fr) minmax(430px,1.13fr);gap:clamp(.5rem,2vw,2rem);padding-top:clamp(2rem,5vw,4.5rem);padding-bottom:clamp(2rem,5vw,4rem)}
.hero-copy{z-index:5;max-width:560px}.hero-copy h1{font-size:clamp(3rem,4.7vw,5.35rem);line-height:1.06}
.hero-photo-stage--unified{min-height:490px;width:100%;overflow:visible}
.hero-group-scene--blended{width:100%;max-width:none;background:transparent;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible}
.hero-group-scene--blended img{display:block;width:100%;height:auto;object-fit:contain;border:0;border-radius:0;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 57%,transparent 99%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 57%,transparent 99%)}
.hero-photo-stage--unified .reveal{opacity:1;transform:none}.hero-sky,.hero-meadow{pointer-events:none}
#friends .friends-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.65rem,1.5vw,1.6rem);align-items:start}
#friends .friend-card--floating{display:flex;flex-direction:column;min-width:0;padding:.6rem .6rem 1.3rem;overflow:visible;opacity:1!important;visibility:visible!important;transform:none!important}
#friends .friend-card--floating .auth-character{display:block;width:100%;height:clamp(190px,22vw,310px);object-fit:contain;object-position:center;max-width:100%;margin:0 auto 1rem}
#friends .friend-card__body{padding:.6rem}#friends .friend-card__body p{overflow-wrap:anywhere}
.workbooks-hero-banner{border-radius:0;box-shadow:none;background:transparent}.workbooks-hero-banner img{max-height:640px;object-fit:contain}
@media(max-width:959px){.hero-scene{grid-template-columns:1fr;width:min(100% - 2rem,760px);padding-top:2.3rem;padding-bottom:2rem}.hero-photo-stage--unified{min-height:0}.hero-group-scene--blended img{max-height:570px}#friends .friends-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#friends .friend-card--floating .auth-character{height:250px}}
@media(max-width:560px){.hero--storybook{min-height:0}.hero-scene{width:min(100% - 1.2rem,580px);gap:.5rem;padding-top:1.4rem;padding-bottom:2rem}.hero-photo-stage--unified{min-height:0;margin-inline:-.4rem}.hero-group-scene--blended img{max-height:370px}.hero-copy h1{font-size:clamp(2.35rem,11vw,3.6rem)}#friends .friends-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}#friends .friend-card--floating{padding:.25rem .1rem .75rem}#friends .friend-card--floating .auth-character{height:clamp(160px,42vw,220px)}#friends .friend-card__body{padding:.3rem}#friends .friend-card__body h3{font-size:1.45rem}#friends .friend-card__body p{font-size:.88rem}#friends .friend-traits{display:none}.workbooks-hero-banner img{max-height:unset}}
@media(prefers-reduced-motion:reduce){.hero-group-scene--blended img,#friends .auth-character{animation:none!important;transition:none!important}}



/* v3.9: consistent four-edge feather; keep the central cast fully opaque. */
.hero--storybook{background:linear-gradient(180deg,#d9f2ff 0%,#e8f6eb 65%,#eaf2d9 100%);min-height:0}
.hero-sky{background:linear-gradient(180deg,#d9f2ff,transparent)!important;opacity:1}
.hero-meadow{opacity:.62}
.hero-scene{padding-block:clamp(1.5rem,4vw,4rem);min-height:0}
.hero-photo-stage--unified{min-height:0!important;isolation:isolate}
.hero-group-scene--blended{overflow:visible!important}
.hero-group-scene--blended img{width:100%;height:auto;object-fit:contain;filter:none;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 13%,#000 83%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 13%,#000 83%,transparent);
-webkit-mask-composite:source-in;mask-composite:intersect}
.hero-copy h1{text-wrap:balance}.hero-lead{max-width:36ch}.hero-actions{gap:1rem}
.hero-reassurance{background:transparent;backdrop-filter:none;padding:.6rem 0;line-height:1.6}
section[id]{scroll-margin-top:6rem}
#friends .auth-character{opacity:1!important;visibility:visible!important;mix-blend-mode:normal!important;animation:none;filter:drop-shadow(0 8px 9px #3d5d371f)}
.workbook-card h3{text-wrap:balance}.collection-note{max-width:65ch;margin:0 auto 2rem;text-align:center}
.workbook-price{font-size:.75rem}.workbook-cover,.workbook-cover-fallback{aspect-ratio:4/3;height:auto;min-height:180px}
.modal-card{overscroll-behavior:contain}.modal-close{flex-shrink:0}.modal-open{overflow:hidden}
/* Content stays visible if JavaScript or IntersectionObserver is unavailable. */
.reveal,.photo-story-tile{opacity:1;transform:none}
.motion-ready .reveal:not(.is-seen),.motion-ready .photo-story-tile:not(.is-visible){opacity:0;transform:translateY(14px)}
@media(min-width:960px) and (max-width:1279px){
 .nav-toggle,.header__cta-mobile{display:inline-flex}
 .primary-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-ivory);padding:1rem;box-shadow:var(--shadow-soft)}
 .primary-nav.is-open{display:block}.nav-list{flex-direction:column;align-items:stretch}.nav-link{display:block}
}
@media(max-width:959px){.hero-copy{max-width:650px}.hero-group-scene--blended{max-width:760px;margin-inline:auto}}
@media(max-width:560px){
 .hero-scene{width:calc(100% - 2rem);padding-top:1.4rem;padding-bottom:0;gap:0}
 .hero--storybook{padding-bottom:2rem!important}.hero-copy h1{font-size:clamp(2.35rem,10.5vw,3.4rem)}
 .hero-photo-stage--unified{width:calc(100% + 2rem);margin-inline:-1rem}
 .hero-reassurance{font-size:.76rem}.hero-text-link{padding-block:.5rem}
 .brand-logo__text strong{font-size:1rem}.brand-logo{gap:.4rem}.header__cta-mobile{font-size:.76rem;padding:.55rem .7rem}
 .modal-card{padding:1rem;max-height:90dvh}.modal-header h2{font-size:1.45rem}.modal-footer .btn{width:100%}
 .section-header h2{text-wrap:balance}.friend-role{font-size:.72rem}.contact-details-list dd{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
 .motion-ready .reveal,.motion-ready .photo-story-tile{opacity:1!important;transform:none!important}
}
@media print{
 body.modal-open>*{display:none!important}body.modal-open>.modal-backdrop{display:block!important;position:static;background:white;padding:0}
 .modal-card{max-height:none;max-width:none;overflow:visible;box-shadow:none;padding:0}.modal-close,.modal-footer{display:none!important}
}

/* v3.9.1: organic scene feather, compact mobile hero, clear inquiry paths. */
.hero-group-scene--blended img {
 -webkit-mask-image:radial-gradient(ellipse 68% 66% at 52% 52%,#000 54%,transparent 98%);
 mask-image:radial-gradient(ellipse 68% 66% at 52% 52%,#000 54%,transparent 98%);
 -webkit-mask-composite:source-over;mask-composite:add;
}
.hero-reassurance{display:flex;gap:.3rem .85rem;flex-wrap:wrap;align-items:center}
.hero-reassurance span{color:#456348;white-space:nowrap}
.hero-text-link{max-width:260px}
.primary-nav{max-height:calc(100dvh - 5rem);overflow-y:auto;overscroll-behavior:contain}
.workbook-inquiry{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:700;color:#365d45;text-underline-offset:4px}
.workbook-card{display:flex;flex-direction:column;gap:.3rem}
.workbook-card p{margin-bottom:.8rem}
.tier-card--featured{border:2px solid #557e65}
:focus-visible{outline:3px solid #365d45;outline-offset:4px}
@media(max-width:560px){
 .hero-copy h1{margin-bottom:1rem}
 .hero-lead{margin-bottom:1.2rem}
 .hero-actions{gap:.55rem}
 .hero-reassurance{margin-top:.7rem;font-size:.72rem;gap:.2rem .65rem;line-height:1.5}
 .hero-group-scene--blended img{mask-image:radial-gradient(ellipse 72% 68% at 51% 51%,#000 55%,transparent 98%);-webkit-mask-image:radial-gradient(ellipse 72% 68% at 51% 51%,#000 55%,transparent 98%)}
 .top-banner__inner{gap:.35rem;font-size:.66rem}
 .header__inner{gap:.4rem}
}

@media(max-width:390px){
 .brand-logo__text strong{font-size:.87rem;white-space:nowrap}
 .brand-logo__text span{font-size:.65rem}
 .brand-logo__badge{flex-shrink:0}
 .header__cta-mobile{white-space:nowrap;padding:.55rem .65rem}
 .header__actions{gap:.35rem;flex-shrink:0}
}
/* Keep every image boundary transparent; the cast stays within the opaque center. */
.hero-group-scene--blended img{
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 76%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 18%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 76%,transparent);
 -webkit-mask-composite:source-in;mask-composite:intersect;
}

/* Requested image relocation only: retain the existing soft landscape treatment. */
.building-blocks-with-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:center}
.building-blocks-with-photo .pillars-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.relocated-learning-photo{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
 -webkit-mask-composite:source-in;mask-composite:intersect}
.free-step-photo{margin-top:1.5rem}
@media(max-width:767px){.building-blocks-with-photo{grid-template-columns:1fr;gap:1rem}}

/* Debbie's supplied author and dedication pages, scoped to About. */
#about .about-debbie-headshot{width:180px;max-width:45%;height:auto;float:left;margin:0 1.5rem 1rem 0;border-radius:18px}
#about .about-debbie-pages{display:grid;gap:1.5rem;align-content:start}
#about .about-debbie-pages img{display:block;width:100%;height:auto;border-radius:12px}
#about .guiding-principles{clear:both}
@media(max-width:639px){#about .about-debbie-headshot{width:130px;margin-right:1rem}}