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

:root {
  /* Primary - Deep Terracotta */
  --terra:        #A1280B;
  --terra-hover:  #B8300D;
  --terra-dark:   #751E0B;
  --terra-tint:   #F0C4B5;

  /* Accent 1 - Forest Green */
  --green:        #3A8C4A;
  --green-hover:  #4DAF60;
  --green-dark:   #256634;
  --green-tint:   #B8E4C0;
  --amber:        #f9b54b;

  /* Accent 2 - Cobalt Blue */
  --cobalt:       #2563A8;
  --cobalt-hover: #3478C5;
  --cobalt-dark:  #164278;
  --cobalt-tint:  #B0CAEA;

  /* Neutrals */
  --cream:        #FDF6EE;
  --surface:      #F0E6D8;
  --surface-2:    #E8D8C8;
  --white:        #FFFFFF;
  --dark:         #3D2314;
  --body:         #6B4C3B;
  --muted:        #7A5D4D;
  --rule:         #E8D8C8;

  /* Layout */
  --nav-h:        60px;
  --foot-h:       64px;
  --panel-h:      calc(100vh - var(--nav-h) - var(--foot-h));
  /* Typography */
  --font-handwritten: 'Shadows Into Light Two', cursive;
}

/* ── Focus ring (keyboard accessibility) ─────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 4px;
}
/* White focus ring on dark backgrounds */
nav *:focus-visible,
footer *:focus-visible,
.his-cta-section *:focus-visible,
#footer-drawer *:focus-visible {
  outline-color: white;
}
/* Form fields already have their own focus style */
.sh-field input:focus-visible,
.sh-field select:focus-visible,
.sh-field textarea:focus-visible {
  outline: none;
}

/* ── Skip to content link ────────────────────────────────────────────────── */
.skip-to-content {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 10000;
  background: var(--terra);
  color: white;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-to-content:focus {
  top: var(--nav-h);
}

html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'DM Sans', sans-serif;
  /* background: cream #FDF6EE applied via inline style in panel-layout.php */
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}

/* ── NAV ── */
nav {
  flex: 0 0 var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px;
  background: rgba(161,40,11,0.97);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  z-index: 1001;
  position: relative;
}
/* ── Hamburger button — hidden on desktop ── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
  z-index: 1010;
}
.nav-burger span {
  display: block;
  width: 24px; height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}
/* X state */
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  /* Show burger, hide links by default */
  .nav-burger { display: flex; }
  .nav-links {
    display: none !important;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    bottom: var(--foot-h);
    background: var(--dark);
    padding: 24px 32px 64px;
    gap: 0;
    z-index: 1000;
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open { display: flex !important; }
  .nav-links li { border-bottom: 1px solid rgba(255,255,255,0.07); }
  .nav-links li:last-child { border-bottom: none; margin-top: 16px; }
  .nav-links a {
    display: block;
    padding: 14px 0;
    font-size: 17px;
  }
  /* Dropdown on mobile — always visible, indented */
  .nav-dropdown > a::after { display: none; }
  .nav-dropdown-menu,
  .nav-dropdown-menu li,
  .nav-dropdown-menu ul { display: block !important; }
  .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    padding-top: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
  }
  .nav-dropdown-menu-inner {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 0 0 16px !important;
  }
  .nav-dropdown-menu a {
    font-size: 15px;
    padding: 10px 0;
    color: rgba(255,255,255,0.65);
    border-radius: 0;
  }
  .nav-dropdown-menu a:hover { background: none; color: #fdd79c; }
  /* Open App in nav bar, hide from dropdown list */
  .nav-cta-mobile { display: inline-flex !important; font-size: 13px !important; padding: 7px 16px !important; margin-left: auto; }
  .nav-burger { margin-left: 12px; }
  .nav-links li:last-child { display: none; }
}

.nav-cta-mobile { display: none; }
.nav-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 19px;
  color: white; text-decoration: none; letter-spacing: -0.03em;
}
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a {
  font-size: 16px; font-weight: 500;
  color: #FFFFFF; text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover { color: #fdd79c; }

/* Dropdown nav item */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: ' ▾';
  font-size: 14px;
  font-weight: 900;
  opacity: 0.9;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 14px; /* bridge gap between nav item and menu */
  z-index: 200;
}
.nav-dropdown-menu-inner {
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.nav-dropdown-menu li { list-style: none; }
.nav-dropdown-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: rgba(255,255,255,0.07); color: #fdd79c; }
.nav-dropdown:hover .nav-dropdown-menu { display: block; }

/* Half-height hero for subpages */
.his-hero-section-sm {
  min-height: 42vh;
}

.nav-cta {
  background: white; color: var(--terra) !important;
  padding: 8px 20px; border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700 !important; font-size: 13px;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
.nav-count {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.35); letter-spacing: 0.05em;
}

/* ── STAGE ── */
.stage {
  flex: 1;
  display: flex;
  overflow-x: scroll; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stage::-webkit-scrollbar { display: none; }

/* ── PANEL BASE ── */
.panel {
  flex: 0 0 100vw;
  height: 100%;
  scroll-snap-align: start;
  position: relative; overflow: hidden;
  display: flex;
}

/* CMS Background on first panel */
/* !important overrides inline background: shorthand on content-file #p1 panels */
.panel:first-child {
  background-image: var(--cms-background, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.home-hero {
  background-position: right center !important;
}

/* Footer legal links — inline styles can't :hover, use class */
.footer-legal-link { color: #fdf6ee !important; text-decoration: none; transition: color 0.2s; }
.footer-legal-link:hover { color: #fdd79c !important; }

/* split utility */
.split-left {
  flex: 0 0 42%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 52px 48px 52px 60px;
  position: relative; z-index: 2;
}
.split-right {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 52px 60px 52px 48px;
  border-left: 1px solid var(--rule);
  position: relative; z-index: 2;
}

/* label pill */
.eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--terra); margin-bottom: 10px;
}
.eyebrow-light { color: var(--terra-tint); }

/* ── PANEL 1: HERO ── */
#p1 { background: transparent; }

/* animated dot grid */
@keyframes dotPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

.hero-left {
  flex: 0 0 52%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 52px 56px 52px 64px;
  position: relative; z-index: 3;
}
.hero-h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(54px, 6.8vw, 96px);
  font-weight: 800; line-height: 0.9;
  letter-spacing: -0.04em; color: var(--dark);
  margin-bottom: 28px;
}
.hero-h1 em { font-style: italic; color: var(--terra); display: block; }
.hero-sub {
  font-size: 19px; line-height: 1.3; color: var(--body);
  max-width: 400px; margin-bottom: 10px;
}
.hero-sub strong { color: var(--dark); }

/* ── Global section typography ─────────────────────────────────────────────── */
/* Replaces: prob-h2, money-h2, how-h2 (all identical values) */
.section-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--dark);
  margin-bottom: 20px;
}
.section-h2 em { font-style: italic; color: var(--terra); }

/* Replaces: prob-quote, money-body (same values) */
.section-body {
  font-size: 18px;
  line-height: 1.55;
  color: var(--body);
  margin-bottom: 16px;
}
.section-body:last-of-type { margin-bottom: 0; }
.section-body strong { color: var(--dark); font-weight: 700; }

.hero-incl {
  font-size: 16px; font-style: italic; color: var(--muted);
  max-width: 370px; margin-bottom: 32px;
  border-left: 2px solid var(--terra-tint); padding-left: 14px;
  line-height: 1.3;
}
.hero-btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ── Global pill button — terra fill, white text, darker terra hover ── */
.btn-pill,
.btn-primary {
  display: inline-block;
  background: var(--terra);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(161,40,11,0.28);
}
.btn-pill:hover,
.btn-primary:hover { background: var(--terra-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(161,40,11,0.38); }

.btn-outline {
  color: var(--dark); font-size: 14px; font-weight: 600;
  text-decoration: none; border: 1.5px solid var(--rule);
  padding: 13px 22px; border-radius: 100px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: var(--terra); color: var(--terra); }

.hero-right {
  flex: 1;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative; z-index: 3;
}
.hero-glow {
  position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%);
  width: 580px; height: 580px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,196,181,0.52) 0%, transparent 65%);
  pointer-events: none;
  animation: breathe 3.5s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{transform:translateX(-50%) scale(1);opacity:.8} 50%{transform:translateX(-50%) scale(1.07);opacity:1} }
.hero-pip {
  height: 93%; width: auto; object-fit: contain;
  position: relative; z-index: 2;
  filter: drop-shadow(0 24px 52px rgba(61,35,20,0.14));
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.34,1.5,0.64,1);
}
.hero-pip:hover { animation: wiggle 0.6s ease-in-out; }

/* -- PANEL 1 v2: PIP-LEFT HERO LAYOUT (home panel 1 only) -- */
/* Pip absolutely positioned left, text overlay on right */
/* .hero-left/.hero-right kept intact for all other pages */
.hero-pip-col {
  position: absolute;
  left: -80px; top: 0; bottom: 0;
  width: 52%;
  display: flex; align-items: flex-start; justify-content: flex-start;
  z-index: 2;
  pointer-events: none;
}
/* Hide glow in pip-left layout */
.hero-pip-col .hero-glow { display: none; }
/* Pip: taller than panel so feet get clipped by overflow:hidden */
.hero-pip-col .hero-pip {
  height: 105%;
  align-self: flex-start;
}
.hero-text-col {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 60%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 60px 40px 60px;
  z-index: 3;
  /* No background wash -- watercolor shows through as per design comp */
}
/* Uncap body text width within new wide text col */
.hero-text-col .hero-sub { max-width: none; font-size: 20px; line-height: 1.45; color: var(--dark); }
/* "third time this week" and "Sound familiar?" bold highlights */
.hero-text-col .hero-sub strong { color: var(--terra); }
/* Larger H1 scoped to new home hero -- does not affect other pages */
.hero-text-col .hero-h1 { font-size: clamp(54px, 7.5vw, 95px); }
/* Eyebrow size override for new wide hero layout */
.hero-text-col .eyebrow { font-size: 17px; }
/* Right-align buttons + push to bottom of panel */
.hero-text-col .hero-btns { justify-content: flex-end; margin-top: 40px; }

/* �/* Recipe card -- semi-transparent cream panel behind hero text */
.hero-card {
  background: rgba(255,255,255,0.65);
  border-radius: 20px;
  border-top: 4px solid var(--terra);
  border-right: 4px solid var(--terra);
  border-bottom: 1px solid var(--terra);
  border-left: 1px solid var(--terra);
  box-shadow: 0 6px 32px rgba(61,35,20,0.10);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 40px 44px;
}

��─ PANEL 2: THE PROBLEM ── */
#p2 { background: transparent; }
#p2 .split-right { border-left-color: var(--rule); }

/* .prob-h2 → replaced by .section-h2 */
.prob-quote {
  font-size: 17px; color: #3D2314;
  line-height: 1.3;
}
.prob-quote strong { color: #3D2314; font-style: normal; }

/* panel-full context (How It Started etc) — full-size, not inside a card */

/* panel-full dark CTA panel — centred, homepage-matched sizing */
.panel-full .closing-h2 {
  font-size: clamp(42px, 5.5vw, 58px);
  text-align: center;
  margin-bottom: 24px;
}
.panel-full .cta-big-sub {
  font-size: 18px;
  max-width: 780px;
  margin: 0 auto 20px;
  text-align: center;
  color: rgba(255,255,255,0.90);
}
.panel-full .btn-pill-amber {
  margin: 16px auto 0;
  display: block;
  width: fit-content;
}

/* ── FEAT LIST — shared across Inside MyMealGrid + other pages ── */
.feat-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.feat-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.feat-item:last-child { border-bottom: none; }
.feat-n {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 36px;
  font-weight: 800;
  font-style: italic;
  color: var(--terra);
  opacity: 0.5;
  line-height: 1;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  min-width: 44px;
  transition: opacity 0.2s;
}
.feat-item:hover .feat-n { opacity: 1; }
.feat-body-wrap { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.feat-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
}
.feat-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}

/* ── INSIDE MYMEALGRID — canvas + card (slide 1) ── */
.imy-canvas {
  position: absolute;
  width: 1440px;
  height: 710px;
  top: 0;
  left: 0;
}

/* Centred col — 50% of 1440px = 720px, left = (1440-720)/2 = 360px */
.imy-col {
  position: absolute;
  left: 360px;
  top: 50%;
  transform: translateY(-50%);
  width: 720px;
}

/* Card appearance */
.imy-card {
  padding: 48px 56px;
  background: rgba(255,255,255,0.65);
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(61,35,20,0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
}

/* Terra accent — top + right (mirrors slide 1 homepage but right instead of bottom) */
.imy-card-terra {
  border-top:    4px solid var(--terra);
  border-right:  4px solid var(--terra);
  border-bottom: 1px solid var(--terra);
  border-left:   1px solid var(--terra);
}

/* Inside card text sizing — matches homepage slide 1 scale */
.imy-card .hero-h1  { font-size: 75px; margin-bottom: 28px; }
.imy-card .hero-h1 em { display: inline; } /* override global display:block so em flows inline */
.imy-card .hero-sub { font-size: 20px; line-height: 1.45; color: var(--body); margin-bottom: 0; max-width: none; }

[data-page="help-resources"] .his-hero-text { max-width: 820px; }

/* How It Started slide 1 hero-h1 */
[data-page="how-it-started"] #p1 .hero-h1 { font-size: 75px; }

/* IMY slide 2 — card layout matching homepage slide 4 */
/* Left col: 60% of 1440px = 864px, left = (1440-864)/2 = 288px, centred */
.imy-p2-col {
  position: absolute;
  left: 288px;
  top: 50%;
  transform: translateY(-50%);
  width: 864px;
}

/* Card: amber accent top+left (matches homepage slide 4) */
.imy-p2-card {
  padding: 36px 44px;
  background: rgba(255,255,255,0.65);
  border-top:    4px solid var(--amber);
  border-left:   4px solid var(--amber);
  border-bottom: 1px solid var(--amber);
  border-right:  1px solid var(--amber);
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(249,181,75,0.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
}

/* IMY slide 5 — same layout as slide 2, green accent */
.imy-p5-col {
  position: absolute;
  left: 288px;
  top: 50%;
  transform: translateY(-50%);
  width: 864px;
}
.imy-p5-card {
  padding: 36px 44px;
  background: rgba(255,255,255,0.65);
  border-top:    4px solid var(--green);
  border-left:   4px solid var(--green);
  border-bottom: 1px solid var(--green);
  border-right:  1px solid var(--green);
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(58,140,74,0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
}
.imy-p5-eyebrow { color: var(--terra) !important; }
.imy-p5-n { color: var(--green) !important; }

/* IMY slide 6 video placeholder grid — also used on How To page */
.imy-video-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.imy-video-grid .img-placeholder { min-height: 180px; }

/* FAQ 2-column grid */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
.faq-grid .faq-item { break-inside: avoid; }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* FAQ content section */
.faq-content-section { background: #FDF6EE; }
.faq-content-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 60px;
}
@media (max-width: 900px) {
  .imy-video-grid { grid-template-columns: 1fr; }
  .faq-content-inner { padding: 48px 32px; }
}

/* FAQ element styles (moved from inline) */
.faq-item {
  border-top: 1px solid var(--rule);
  padding: 18px 0;
}
.faq-summary {
  font-weight: 700;
  font-size: 16px;
  color: var(--dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.2s;
}
.faq-answer {
  margin: 14px 0 4px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  max-width: 680px;
}
.faq-rule {
  border-top: 1px solid var(--rule);
}
details.faq-item[open] .faq-chevron {
  transform: rotate(45deg);
  border-color: var(--terra);
  color: var(--terra);
}
details.faq-item[open] .faq-summary {
  color: var(--terra);
}

/* panel-full dark panel overrides for IMY slide 6 (same as homepage slide 5) */
.panel-full .closing-sub  { text-align: center; }
.panel-full .closing-h2   { text-align: center; margin-bottom: 16px; }
.panel-full .cta-big-sub  { max-width: 640px; margin: 0 auto 32px; }

/* ── HOW IT STARTED — canvas + card system ── */
.his-canvas {
  position: absolute;
  width: 1440px;
  height: 710px;
  top: 0;
  left: 0;
}

/* Positioning column — centred, 65% of 1440px = 936px */
/* Uses translateY only — no conflict with .r reveal class transforms */
.his-col {
  position: absolute;
  left: 252px; /* (1440 - 936) / 2 */
  top: 50%;
  transform: translateY(-50%);
  width: 936px;
}

/* Card — appearance only, no positioning transforms */
.his-card {
  padding: 48px 56px;
  background: rgba(255,255,255,0.65);
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(61,35,20,0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
}

/* Slide 2 — cobalt accent top + right */
.his-card-cobalt {
  border-top:    4px solid var(--cobalt);
  border-right:  4px solid var(--cobalt);
  border-bottom: 1px solid var(--cobalt);
  border-left:   1px solid var(--cobalt);
}

/* Slide 3 — green accent top + left */
.his-card-green {
  border-top:    4px solid var(--green);
  border-left:   4px solid var(--green);
  border-bottom: 1px solid var(--green);
  border-right:  1px solid var(--green);
}

/* Text inside his-card — scoped sizes matching homepage locked styles */
.his-card .eyebrow    { margin-bottom: 10px; }

.list-section-head {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.list-section-head.before { color: var(--terra); }
.list-section-head.after { color: var(--green); margin-top: 20px; }

.check-list { display: flex; flex-direction: column; }
.check-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px; line-height: 1.4; color: var(--dark);
  transition: padding-left 0.2s;
}
.check-item:hover { padding-left: 6px; }
.check-item.before { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(122,93,77,0.35); }
.ci-icon { font-size: 13px; flex-shrink: 0; font-weight: 700; }
.ci-icon.x { color: var(--terra); }
.ci-icon.v { color: var(--green); }

/* ── PANEL 2: THE PROBLEM — fixed 1440×710 canvas v2.0.218 ── */
#p2.p2-panel {
  position: relative;
  overflow: hidden;
}

/* Canvas: always 1440×710px — JS scales + centres it */
.p2-canvas {
  position: absolute;
  width: 1440px;
  height: 710px;
  top: 0;
  left: 0;
}

/* Text card — px from mockup: left=52 top=30 width=735 */
/* Left column — vertically centred, contains text card + fixes strip */
.p2-left-col {
  position: absolute;
  left: 52px;
  top: 50%;
  transform: translateY(-50%);
  width: 735px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 2;
}

.p2-text-card {
  padding: 36px 44px;
  background: rgba(255,255,255,0.65);
  border-top:    4px solid var(--cobalt);
  border-left:   4px solid var(--cobalt);
  border-bottom: 1px solid var(--cobalt);
  border-right:  1px solid var(--cobalt);
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(37,99,168,0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: center;
  box-sizing: border-box;
}
.p2-text-card .eyebrow      { font-size: 17px; margin-bottom: 10px; }
.p2-text-card .prob-h2      { font-size: 55px; margin-bottom: 22px; }
.p2-text-card .prob-quote   { font-size: 18px; margin-bottom: 14px; }
.p2-text-card .prob-quote:last-child { margin-bottom: 0; }

/* Pip — left positioned so tail tucks behind card (card z-index:2, pip z-index:1) */
.p2-pip {
  position: absolute;
  left: 720px;
  bottom: 0;
  height: 680px;
  width: auto;
  z-index: 1;
}

/* Fixes strip — inside left col, no longer needs absolute position */
.p2-fixes {
  text-align: center;
}
.p2-fixes-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
  line-height: 1.2;
}
.p2-fixes-title strong { font-weight: 700; }
.p2-fixes-title em     { color: var(--terra); font-style: italic; }
.p2-ft-dark  { color: var(--dark);  font-weight: 800; }
.p2-ft-terra { color: var(--terra); font-weight: 800; }

.p2-fixes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 22px;
  justify-content: center;
}
.p2-fix-break { width: 100%; height: 0; }
.p2-fix-item {
  font-family: var(--font-handwritten);
  font-size: 23px;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.p2-fix-item .ci-icon.v {
  background: none;
  color: var(--cobalt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-size: 22px;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
}

/* ── PANEL 3: THE MONEY — fixed 1440×710 canvas v2.0.232 ── */
#p3.p3-panel {
  position: relative;
  overflow: hidden;
}

.p3-canvas {
  position: absolute;
  width: 1440px;
  height: 710px;
  top: 0;
  left: 0;
}

/* Composition: Pip + card as one centred unit */
.p3-composition {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  height: 710px;
}

/* Pip: absolute within composition, bleeds bottom-left */
.p3-pip {
  position: absolute;
  left: -150px;
  bottom: -75px;
  height: 725px;
  width: auto;
  z-index: 1;
}

/* Right column: right side of composition, vertically centred */
.p3-right-col {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 660px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* Card: green accent top+right (mirrored from slide 2 cobalt top+left) */
.p3-card {
  padding: 36px 44px;
  background: rgba(255,255,255,0.65);
  border-top:    4px solid var(--green);
  border-right:  4px solid var(--green);
  border-bottom: 1px solid var(--green);
  border-left:   1px solid var(--green);
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(58,140,74,0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: center;
  box-sizing: border-box;
}


/* .money-h2 → replaced by .section-h2 */
/* .money-body → replaced by .section-body */

/* ── PANEL 4: HOW IT WORKS — fixed 1440×710 canvas v2.0.244 ── */
#p4.p4-panel {
  position: relative;
  overflow: hidden;
}

.p4-canvas {
  position: absolute;
  width: 1440px;
  height: 710px;
  top: 0;
  left: 0;
}

/* Pip: right side, bleeds behind card */
.p4-pip {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 645px;
  width: auto;
  z-index: 1;
}

/* Left col: 55% width, vertically centred */
.p4-left-col {
  position: absolute;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  width: 864px;
  z-index: 2;
}

/* Card: amber accent top+left */
.p4-card {
  padding: 36px 44px;
  background: rgba(255,255,255,0.65);
  border-top:    4px solid var(--amber);
  border-left:   4px solid var(--amber);
  border-bottom: 1px solid var(--amber);
  border-right:  1px solid var(--amber);
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(249,181,75,0.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-sizing: border-box;
}

.p4-eyebrow { color: var(--terra) !important; font-size: 17px !important; margin-bottom: 8px; text-align: center; }

.p4-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--dark);
  margin: 0 0 16px;
  text-align: center;
}
.p4-h2 em { font-style: italic; color: var(--terra); }

.p4-intro {
  font-size: 18px;
  line-height: 1.45;
  color: var(--dark);
  margin-bottom: 24px;
  text-align: center;
}

/* 2×2 feature grid */
.p4-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}

.p4-feat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.p4-feat-n {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 36px;
  font-weight: 800;
  font-style: italic;
  color: var(--amber);
  opacity: 1;
  line-height: 1;
  letter-spacing: -0.05em;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.p4-feat:hover .p4-feat-n { opacity: 0.7; }
.p4-feat-body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark);
  padding-top: 4px;
}
.p4-feat-body strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

/* shared base classes */
/* .how-h2 → replaced by .section-h2 */
.pip-img {
  display: block; width: auto; max-height: 300px;
  margin-bottom: 20px; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(61,35,20,0.15));
}

/* ── PANEL 5: CLOSING ── */
#p5 { background: transparent; }
#p5 .split-left {
  flex: 0 0 50%;
  border-right: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  padding: 0;
}
#p5 .split-right { border-left: none; padding: 52px 64px; justify-content: center; }

.closing-pip-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
}
.closing-glow {
  position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%);
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(161,40,11,0.4) 0%, transparent 65%);
  pointer-events: none;
  animation: breathe 3.5s ease-in-out infinite;
}
.closing-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.closing-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(42px, 5.5vw, 58px);
  font-weight: 800; color: white;
  letter-spacing: -0.04em; line-height: 1.0;
  margin-bottom: 28px;
}
.closing-h2 em { font-style: italic; color: var(--amber); }
.closing-pip {
  height: 85%; width: auto; object-fit: contain;
  position: relative; z-index: 2;
  filter: drop-shadow(0 24px 52px rgba(0,0,0,0.3));
  cursor: default;
}
.closing-pip:hover { animation: wiggle 0.6s ease-in-out; }

/* dots bg for dark panels */
.dots-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1.5px, transparent 1.5px);
  background-size: 36px 36px;
}

.cta-big-sub {
  font-size: 18px; color: rgba(255,255,255,0.90);
  line-height: 1.55; margin-bottom: 32px; max-width: 480px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500;
}
.cta-big-sub em { font-style: italic; color: var(--terra-tint); }

.btn-pill-amber {
  display: inline-block;
  background: var(--amber);
  color: var(--dark);
  padding: 14px 32px;
  border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.2s, transform 0.15s;

}
.btn-pill-amber:hover { background: #f5a623; transform: translateY(-2px); }

.cta-note { font-size: 13px; color: rgba(255,255,255,0.35); font-style: italic; margin-top: 12px; }

.cta-features {
  margin-top: 36px; display: flex; flex-direction: column; gap: 12px;
}
.cta-feat {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; color: rgba(255,255,255,0.7);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cta-feat::before { content: '✓'; color: var(--amber); font-weight: 700; font-size: 14px; }

/* ── FOOTER ── */
footer {
  flex: 0 0 var(--foot-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px;
  background-color: #2C1A0E;
  border-top: 1px solid rgba(255,255,255,0.06);
  z-index: 1001;
  position: relative;
}
.footer-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; font-weight: 800; color: white; letter-spacing: -0.02em;
}
.footer-logo em { font-style: normal; color: var(--terra-tint); }

.panel-dots { display: flex; align-items: center; gap: 10px; }
.dot {
  width: 28px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.68);
  border: none; cursor: pointer; padding: 0;
  transition: background 0.3s, width 0.3s;
}
.dot:hover { background: #f9b54b; }
.dot.active { background: #f9b54b; width: 44px; }

.nav-arrows { display: flex; gap: 8px; }
.arr-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent;
  border: none;
  color: #f9b54b; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color 0.2s;
}
.arr-btn:hover { color: #fdd79c; }
.arr-btn:disabled { opacity: 0.3; cursor: default; }

/* ── ANIMATIONS ── */
@keyframes wiggle {
  0%   { transform: scale(1) rotate(0); }
  20%  { transform: scale(1.04) rotate(-2.5deg); }
  45%  { transform: scale(1.04) rotate(2.5deg); }
  65%  { transform: scale(1.02) rotate(-1deg); }
  85%  { transform: scale(1.01) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* reveal */
.r { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease, transform 0.65s ease; }
.r.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.32s; }
.d4 { transition-delay: 0.44s; }
.d5 { transition-delay: 0.56s; }

/* ── TWEAKS ── */
#tweaks-panel {
  display: none;
  position: fixed; bottom: calc(var(--foot-h) + 16px); right: 24px; z-index: 999;
  background: white; border: 1px solid var(--rule); border-radius: 14px;
  padding: 20px 22px; width: 230px;
  box-shadow: 0 8px 40px rgba(61,35,20,0.12);
  font-family: 'DM Sans', sans-serif; font-size: 13px;
}
#tweaks-panel h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--dark); margin-bottom: 16px;
}
.tw { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--body); }
.tw label { font-weight: 500; }
.tw input[type=color] { width: 30px; height: 22px; border: none; border-radius: 4px; cursor: pointer; }
.tw input[type=range] { width: 90px; accent-color: var(--terra); }


/* ═══════════════════════════════════════════════════════════════
   ADDITIONAL PANEL TYPES (for non-homepage pages)
   ═══════════════════════════════════════════════════════════════ */

/* Full-width panel */
.panel-full {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 52px 80px;
  position: relative; z-index: 2;
}

.panel-h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; color: var(--dark);
  margin-bottom: 24px;
}
.panel-h1 em { font-style: italic; color: var(--terra); }
.panel-body { font-size: 16px; line-height: 1.7; color: var(--body); margin-bottom: 20px; }
.panel-body strong { color: var(--dark); }

/* Dark panel variant */

/* Pricing cards */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
.pricing-card {
  background: white; padding: 40px 32px; border-radius: 16px;
  border: 2px solid var(--rule); text-align: center;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.pricing-card.featured { border-color: var(--terra); transform: scale(1.05); box-shadow: 0 12px 32px rgba(161,40,11,0.15); }
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(61,35,20,0.1); }
.pricing-card.featured:hover { transform: scale(1.05) translateY(-4px); }
.pricing-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--terra); margin-bottom: 12px; }
.pricing-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 28px; font-weight: 800; color: var(--dark); margin-bottom: 16px; }
.pricing-amount { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 48px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.pricing-period { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.pricing-features { list-style: none; margin-bottom: 32px; text-align: left; }
.pricing-features li { font-size: 14px; line-height: 1.6; color: var(--body); padding-left: 28px; position: relative; margin-bottom: 10px; }
.pricing-features li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }

/* Signpost cards */
.signpost-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; }
.signpost-card {
  background: rgba(255,255,255,0.80); padding: 48px 40px; border-radius: 20px;
  border-top: 4px solid var(--rule); border-left: 4px solid var(--rule);
  border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
  text-align: center; transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none; display: flex; flex-direction: column; gap: 0;
}
.signpost-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(61,35,20,0.08); }
.signpost-terra  { border-top-color: var(--terra);  border-left-color: var(--terra);  border-bottom-color: var(--terra);  border-right-color: var(--terra);  }
.signpost-cobalt { border-top-color: var(--cobalt); border-left-color: var(--cobalt); border-bottom-color: var(--cobalt); border-right-color: var(--cobalt); }
.signpost-green  { border-top-color: var(--green);  border-left-color: var(--green);  border-bottom-color: var(--green);  border-right-color: var(--green);  }
.signpost-amber  { border-top-color: var(--amber);  border-left-color: var(--amber);  border-bottom-color: var(--amber);  border-right-color: var(--amber);  }
.signpost-icon { font-size: 48px; margin-bottom: 16px; }
.signpost-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 24px; font-weight: 700; color: var(--dark); margin-bottom: 12px; }
.signpost-card p { font-size: 15px; line-height: 1.6; color: var(--body); margin-bottom: 20px; flex: 1; }
.signpost-link { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; color: var(--terra); letter-spacing: 0.02em; }

/* Help & Resources section wrapper */
.hr-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 60px;
}
.hr-intro {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 56px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
}
@media (max-width: 900px) {
  .signpost-grid { grid-template-columns: 1fr; }
  .hr-section { padding: 60px 32px; }
}

/* Feature cards */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; }
.feature-card {
  background: white; padding: 32px; border-radius: 16px;
  border: 1px solid var(--rule); transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(61,35,20,0.08); }
.feature-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--terra-tint); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; }
.feature-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--dark); margin-bottom: 12px; }
.feature-card p { font-size: 15px; line-height: 1.6; color: var(--body); }

/* Image placeholder */
.img-placeholder {
  background-color: var(--cream); border: 2px dashed var(--rule); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 14px; font-style: italic; min-height: 300px;
}

/* Footer drawer */
#footer-drawer {
  position: fixed; bottom: var(--foot-h); left: 0; right: 0;
  background: #3d2314; border-top: 1px solid rgba(255,255,255,0.08);
  transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), visibility 0s 0.4s;
  visibility: hidden;
  z-index: 49; padding: 44px 52px 36px;
  font-family: 'DM Sans', sans-serif;
}
#footer-drawer.open { transform: translateY(0); visibility: visible; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), visibility 0s; }
.drawer-grid { display: grid; grid-template-columns: 220px 1fr 1fr 1fr 280px; gap: 0 48px; margin-bottom: 36px; align-items: start; }
.drawer-col h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--amber); margin-bottom: 16px; }
.drawer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.drawer-col a { font-size: 14px; color: #ffffff; text-decoration: none; transition: color 0.2s; }
.drawer-col a:hover { color: #fdd79c; }

/* Responsive */
@media (max-width: 1024px) {
  nav, footer { padding: 0 24px; }
  .hero-left, .split-left, .split-right { padding: 32px 24px; }
  .pricing-grid, .signpost-grid, .feature-grid { grid-template-columns: 1fr; }
  .drawer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ── SHORT VIEWPORT (laptops ~768-860px tall) ── */
@media (max-height: 860px) {
  /* Tighten nav + footer */
  nav    { height: 54px; }
  footer { height: 44px; }

  /* Reduce panel padding across all slides */
  .hero-left, .split-left, .split-right { padding-top: 28px; padding-bottom: 28px; }
  /* p2: canvas JS handles all scaling — no overrides needed */

  /* Scale headlines down slightly */
  #p1 .hero-h1  { font-size: 44px !important; }
  /* p3+p4: canvas JS handles scaling */

  /* Intro/body text */
  #p1 .hero-intro { font-size: 17px !important; }

  /* Pip heights */
  /* p2+p3+p4 pip: canvas JS handles scaling, no override needed */

  /* Stat card numbers */

  /* Hero card padding */
  .hero-card { padding: 28px 32px; }

  /* p2: canvas JS handles scaling */
  .p2-fixes-title { font-size: 24px !important; }
  .p2-fix-item    { font-size: 18px !important; }

  /* p3 cards */

  /* p4 feature grid */
  .p4-feats { gap: 8px; padding-bottom: 24px; }
  .p4-feat  { padding: 14px 18px; }
}

/* ── VERY SHORT VIEWPORT (small laptops ~600-760px tall) ── */
@media (max-height: 760px) {
  nav    { height: 48px; }
  footer { height: 38px; }

  /* Panels padding very tight */
  .hero-left  { padding: 20px 36px 20px 48px; }
  .split-left, .split-right { padding: 20px 32px; }
  /* p2: canvas JS handles all scaling — no overrides needed */

  /* Headlines */
  #p1 .hero-h1  { font-size: 42px !important; line-height: 1.0 !important; }
  /* p3+p4: canvas JS handles scaling */

  /* Eyebrows */
  .eyebrow { font-size: 13px !important; margin-bottom: 6px !important; }

  /* Body/intro */
  #p1 .hero-intro { font-size: 14px !important; line-height: 1.3 !important; margin-bottom: 16px !important; }

  /* CTA buttons */
  .btn-pill, .btn-primary { padding: 10px 22px !important; font-size: 14px !important; }

  /* Pip heights — p2+p3+p4 canvas JS handles scaling */

  /* Hero card */
  .hero-card { padding: 20px 24px; }
  .hero-card .hero-eyebrow { font-size: 13px; margin-bottom: 4px; }

  /* p3 stats */

  /* p4 cards */
  .p4-feats { gap: 6px; padding: 0 32px 16px 52px; }
  .p4-feat  { padding: 10px 14px; }
  .p4-feat-title { font-size: 14px !important; }
  .p4-feat-desc  { font-size: 12px !important; }
}

/* ── SLIDE TRANSITION: fade (handled via JS opacity) ── */
#stage { perspective: none; }


/* ── HOW IT STARTED — editorial scroll layout ───────────────────────────────── */

/* Hero — full-width, min-height, watercolour BG handled by CMS */
.his-hero-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px;
  background-image: var(--cms-background, none);
  background-size: cover;
  background-position: center;
}
.his-hero-text {
  max-width: 680px;
  text-align: center;
  background: rgba(255,255,255,0.65);
  border-top:    4px solid var(--terra);
  border-right:  4px solid var(--terra);
  border-bottom: 1px solid var(--terra);
  border-left:   1px solid var(--terra);
  border-radius: 20px;
  padding: 40px 52px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 32px rgba(61,35,20,0.10);
}
.his-hero-text .eyebrow { margin-bottom: 12px; }
.his-hero-text h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 75px;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--dark);
  margin: 0 0 16px;
}
.his-hero-text h1 em { font-style: italic; color: var(--terra); }
.his-hero-text p {
  font-size: 20px;
  color: var(--body);
  line-height: 1.5;
  margin: 0;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.4; }
  50%       { transform: scaleY(1.6); opacity: 0.8; }
}

.his-scroll-indicator {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  opacity: 0.75;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.his-scroll-indicator::after {
  content: '';
  display: block;
  width: 6px;
  height: 36px;
  background: var(--terra);
  transform-origin: top center;
  animation: scrollPulse 1.8s ease-in-out infinite;
}

/* Editorial section wrapper */
.his-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
}
.his-section.his-section-full {
  grid-template-columns: 1fr;
  max-width: 760px;
}
.his-section.his-section-flip { direction: rtl; }
.his-section.his-section-flip > * { direction: ltr; }

/* Divider between sections */
.his-divider {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 60px;
  border-top: 1px solid var(--rule);
}

/* Text column */
.his-text .eyebrow { margin-bottom: 14px; }
.his-text h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--dark);
  margin: 0 0 28px;
}
.his-text h2 em { font-style: italic; color: var(--terra); }
.his-text p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 18px;
}
.his-text p:last-child { margin-bottom: 0; }
.his-text p strong { color: var(--dark); font-weight: 700; }

/* Pull quote */
.his-pull-quote {
  border-left: 3px solid var(--terra);
  padding-left: 24px;
  margin: 32px 0;
  font-size: 20px;
  font-style: italic;
  color: var(--dark);
  line-height: 1.5;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}

/* App screenshot placeholder */
.his-img-placeholder {
  background: rgba(37,99,168,0.06);
  border: 2px dashed rgba(37,99,168,0.2);
  border-radius: 16px;
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--cobalt);
  opacity: 0.7;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 32px;
  box-sizing: border-box;
}
.his-img-placeholder svg { opacity: 0.4; }

/* Full-width image strip */
.his-img-full {
  width: 100%;
  background: rgba(37,99,168,0.06);
  border-top: 1px solid rgba(37,99,168,0.1);
  border-bottom: 1px solid rgba(37,99,168,0.1);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--cobalt);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.7;
}

/* Pip accent — small, positioned within section */
.his-pip-accent {
  position: absolute;
  right: 0;
  bottom: -20px;
  height: 220px;
  width: auto;
  opacity: 0.92;
  pointer-events: none;
}
.his-pip-left {
  left: 0;
  right: auto;
}

/* Dark CTA section — reuses homepage slide 5 styles */
.his-cta-section {
  background: var(--dark);
  position: relative;
  overflow: hidden;
  padding: 75px 60px calc(75px + var(--foot-h));
  text-align: center;
}
.his-cta-section .dots-bg { position: absolute; inset: 0; pointer-events: none; }
.his-cta-section .closing-sub  { margin-bottom: 10px; }
.his-cta-section .closing-h2   { margin-bottom: 24px; }
.his-cta-section .cta-big-sub  { max-width: 640px; margin: 0 auto 32px; }
.his-cta-section .btn-pill-amber { margin: 0 auto; display: block; width: fit-content; }

/* ── GET COOKING — pricing section ── */
.gc-pricing-section {
  background: #FDF6EE;
  padding: 80px 60px;
}
.gc-pricing-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .gc-pricing-inner { grid-template-columns: 1fr; max-width: 480px; }
  .gc-pricing-section { padding: 60px 32px; }
}

/* ── INSIDE MYMEALGRID — step list (used in scroll sections) ── */
.imy-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 28px;
}
.imy-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.imy-step-n {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  font-style: italic;
  color: var(--terra);
  opacity: 0.4;
  line-height: 1;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  min-width: 40px;
  transition: opacity 0.2s;
}
.imy-step:hover .imy-step-n { opacity: 1; }
.imy-step > div { padding-top: 2px; }
.imy-step strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
}
.imy-step p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}

@media (max-width: 900px) {
  .his-section { grid-template-columns: 1fr; gap: 40px; padding: 60px 32px; }
  .his-section.his-section-flip { direction: ltr; }
  .his-hero-section { padding: 0 32px 48px; }
  .his-hero-text h1 { font-size: 52px; }
}

/* ── SAY HELLO — contact page ── */
.sh-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Left info column */
.sh-info-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--dark);
  margin: 0 0 16px;
}
.sh-info-h2 em { font-style: italic; color: var(--terra); }
.sh-info-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 40px;
}
.sh-contact-blocks {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sh-contact-block .eyebrow { margin-bottom: 8px; }
.sh-contact-block p { font-size: 15px; color: var(--body); margin: 0; }
.sh-email {
  color: var(--terra);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.sh-email:hover { opacity: 0.75; }
.sh-socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sh-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  color: var(--body);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.sh-social-btn:hover { border-color: var(--terra); color: var(--terra); }
.sh-social-muted { opacity: 0.45; cursor: default; border-style: dashed; }

/* Right form column */
.sh-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 40px 40px;
  box-shadow: 0 4px 24px rgba(61,35,20,0.06);
}
.sh-field { display: flex; flex-direction: column; gap: 8px; }
.sh-field label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
}
.sh-field input,
.sh-field select,
.sh-field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  background: #FAFAFA;
  color: var(--dark);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.sh-field input:focus,
.sh-field select:focus,
.sh-field textarea:focus { border-color: var(--terra); background: white; }
.sh-field textarea { resize: vertical; }
.sh-field select { appearance: none; cursor: pointer; }

@media (max-width: 900px) {
  .sh-section { grid-template-columns: 1fr; gap: 48px; padding: 60px 32px; }
  .sh-info-h2 { font-size: 32px; }
}

/* ── MOBILE FIXES v2.0.303 ─────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── 1. Nav menu — centre all items including H&R and subpages ── */
  .nav-links a,
  .nav-links > li > a { text-align: center; }
  .nav-dropdown { text-align: center; }
    .nav-dropdown-menu-inner {
    background: rgba(255,255,255,0.06) !important;
    border-radius: 12px !important;
    padding: 4px 0 !important;
    margin: 8px -32px !important;
  }
  .nav-dropdown-menu a {
    text-align: center !important;
    padding: 12px 16px !important;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .nav-dropdown-menu a:last-child { border-bottom: none; }
  /* Remove extra rule divider before Support (last subpage) */
  .nav-dropdown-menu li:last-child a { border-bottom: none; }
  /* Remove gap between Get Cooking rule and Help & Resources */
  .nav-links li { border-bottom: 1px solid rgba(255,255,255,0.07); }
  .nav-dropdown li { border-bottom: none; }

  /* ── 2. Scroll indicator — move below card, not overlapping ── */
  .his-hero-section {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: calc(var(--nav-h) + 5px) 20px 0;
    min-height: 0;
  }
  .his-scroll-indicator {
    position: relative;
    bottom: auto; left: auto;
    transform: none;
    margin-top: 20px;
    margin-bottom: 8px;
  }

  /* ── 3. Hero card — uniform top spacing + full width ── */
  .his-hero-text {
    width: calc(100% - 32px);
    max-width: none !important;
    margin-top: 5px;
    padding: 28px 24px;
    box-sizing: border-box;
  }
  .his-hero-text h1 { font-size: 42px; }
  .his-hero-section-sm {
    min-height: 55vh;
    justify-content: center;
    padding: calc(var(--nav-h) + 5px) 20px calc(var(--nav-h) + 5px);
  }

  /* ── 5. What's New blog — image above text on mobile ── */
  .blog-card { flex-direction: column; gap: 16px; }
  .blog-card-img { width: 100%; height: 220px; border-radius: 12px; }

  /* ── 6. Support — icon on top ── */
  .support-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .support-icon { font-size: 32px; width: auto; }

  /* ── Footer drawer — hide on mobile, swap for inline ── */
  #footer-drawer { display: none !important; }
  footer .footer-logo { display: none; }
}

/* ── 4. Inside MyMealGrid — prevent mid-word wrap on "meal freedom" ── */
@media (max-width: 768px) {
  [data-page="inside-mymealgrid"] .his-text h2 em { white-space: nowrap; }
}

/* ── Mobile inline footer ── */
.mobile-footer-inline { display: none; }
@media (max-width: 768px) {
  .mobile-footer-inline {
    display: block;
    background: #2C1A0E;
    padding: 40px 28px 28px;
    color: white;
  }
  .mobile-footer-brand {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px; font-weight: 800;
    margin-bottom: 8px;
  }
  .mobile-footer-brand em { font-style: normal; color: var(--terra-tint); }
  .mobile-footer-sub {
    font-size: 13px; color: rgba(255,255,255,0.55);
    line-height: 1.6; margin-bottom: 28px;
  }
  .mobile-footer-cols {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px; margin-bottom: 28px;
  }
  .mobile-footer-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--amber); margin-bottom: 12px;
  }
  .mobile-footer-cols a {
    display: block; color: rgba(255,255,255,0.7);
    font-size: 14px; text-decoration: none;
    padding: 6px 0; transition: color 0.2s;
  }
  .mobile-footer-cols a:hover { color: white; }
  .mobile-footer-legal {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 12px; color: rgba(255,255,255,0.35);
  }
  .mobile-footer-legal a {
    color: rgba(255,255,255,0.35); text-decoration: none;
  }
  .mobile-footer-cols { grid-template-columns: 1fr 1fr; }
  .mobile-footer-newsletter {
    border-top: none;
    padding-top: 0; margin-top: 0; margin-bottom: 0;
  }
  .mobile-footer-newsletter p {
    font-size: 13px; color: rgba(255,255,255,0.55);
    margin-bottom: 12px; line-height: 1.5;
  }
  .mobile-footer-newsletter input {
    width: 100%; padding: 11px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; color: white;
    font-size: 14px; font-family: 'DM Sans', sans-serif;
    outline: none; margin-bottom: 10px; box-sizing: border-box;
  }
  .mobile-footer-newsletter button {
    width: 100%; padding: 12px;
    background: var(--terra); color: white;
    border: none; border-radius: 8px; cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px; font-weight: 700;
  }
  /* Hide drawer + toggle button on mobile */
  #footer-drawer, #drawer-toggle, footer { display: none !important; }
}

/* Placeholder size label */
.placeholder-size {
  display: block;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.6;
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* ── Legal pages (privacy + terms) ─────────────────────────────────────────── */
[data-page="privacy"] .privacy-content-wrap,
[data-page="terms"] .privacy-content-wrap {
  padding: 48px 48px 60px;
  max-width: 1100px;
  margin: 0 auto;
}
[data-page="privacy"] .privacy-body,
[data-page="terms"] .privacy-body {
  font-size: 15px;
  color: var(--body);
  line-height: 1.65;
  margin: 0 0 10px;
}
[data-page="privacy"] .privacy-h2,
[data-page="terms"] .privacy-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--dark);
  margin: 36px 0 12px;
}
[data-page="privacy"] .privacy-h3,
[data-page="terms"] .privacy-h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--dark);
  margin: 20px 0 6px;
}
[data-page="privacy"] .privacy-list,
[data-page="terms"] .privacy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}
[data-page="privacy"] .privacy-list li,
[data-page="terms"] .privacy-list li {
  font-size: 15px;
  color: var(--body);
  line-height: 1.6;
  padding: 3px 0 3px 20px;
  position: relative;
}
[data-page="privacy"] .privacy-list li::before,
[data-page="terms"] .privacy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terra);
  opacity: 0.5;
}
[data-page="privacy"] .privacy-highlight,
[data-page="terms"] .privacy-highlight {
  background: rgba(161,40,11,0.06);
  border-left: 3px solid var(--terra);
  border-radius: 0 8px 8px 0;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 15px;
  color: var(--dark);
}

/* ── Accessibility widget ───────────────────────────────────────────────────── */
#a11y-widget {
  position: fixed;
  bottom: calc(var(--foot-h) + 16px);
  left: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  /* panel hidden by default — JS drives transform via --a11y-tab-w */
  transform: translateX(calc(-100% + var(--a11y-tab-w, 36px)));
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
#a11y-widget.open {
  transform: translateX(0) !important;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
#a11y-panel {
  background: white;
  border: 1px solid var(--rule);
  border-right: none;
  border-radius: 12px 0 0 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 4px 4px 20px rgba(61,35,20,0.1);
}
#a11y-panel-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 2px;
}
.a11y-btn-row {
  display: flex;
  gap: 6px;
}
.a11y-size-btn {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--cream);
  color: var(--dark);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.a11y-size-btn:hover {
  background: var(--terra);
  border-color: var(--terra);
  color: white;
}
.a11y-size-btn.active {
  background: var(--terra);
  border-color: var(--terra);
  color: white;
}
#a11y-tab {
  /* width driven by --a11y-tab-w CSS var set from JS */
  width: var(--a11y-tab-w, 36px);
  min-height: 72px;
  background: var(--terra);
  color: white;
  border: none;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: 4px 4px 20px rgba(161,40,11,0.25);
  flex-shrink: 0;
  overflow: hidden;
  transition: background 0.2s;
}
#a11y-tab:hover { background: var(--terra-dark); }
#a11y-tab svg {
  flex-shrink: 0;
  transition: opacity 0.15s;
}
#a11y-tab-label {
  font-size: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  line-height: 1;
  margin-top: 4px;
  white-space: nowrap;
  transition: opacity 0.15s;
}

/* ── Accessibility font scaling ───────────────────────────────────────────── */
/* Actual scaling is done via JS (reads computed px, multiplies, applies).    */
/* CSS handles only the data attribute on body for state tracking.           */

@media (max-width: 768px) {
  #a11y-widget {
    bottom: 80px;
  }
}