/* Policy & Play — Brand Stylesheet
   Loaded after each page's inline <style> to override colour variables and fonts.
   Edit this file to update the brand site-wide. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&display=swap');

/* ── Viewport lock — prevents horizontal overflow on ALL screen sizes ─── */
/* html clips overflow; body stays constrained within it.
   Must be on html (not body) so iOS Safari doesn't treat body as the
   scroll container — which would break position:fixed/sticky elements. */
html {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  max-width: 100%;
}

/* ── Colour tokens — Kinetic Policy Narrative design system ─────────────── */
:root {
  /* Core palette */
  --teal:        #00D1C1;   /* kinetic teal — primary CTA / interaction */
  --teal-dark:   #00A99C;   /* teal hover */
  --teal-pale:   #E0FAF8;   /* teal tint backgrounds */
  --coral:       #F26E20;   /* energy orange — urgent CTAs, warnings */
  --coral-light: #F58040;
  --amber:       #FFB100;   /* civic amber — highlights, badges, accents */
  --amber-pale:  #FFF5D6;
  --navy:        #0A1C30;   /* policy blue dark — footer, deepest text */
  --action-navy: #1A2B3C;   /* action navy — nav, structural elements */
  --slate:       #2C4A5A;   /* body text */
  --muted:       #6B8796;   /* muted / secondary text */
  --border:      #E2EDF2;
  --white:       #FFFFFF;
  --bg:          #F9F5EE;   /* surface cream — warm page background */
  --bg-blue:     #E0FAF8;   /* sky tint — section backgrounds */

  /* Legacy aliases — updated to kinetic teal so older pages auto-upgrade */
  --green:       #00D1C1;   /* was #00D1C1 — now resolves to kinetic teal */
  --green-light: #00A99C;
  --green-pale:  #E0FAF8;
  --text:        #2C4A5A;

  /* Extra brand colours */
  --brand-teal:   #00D1C1;
  --brand-orange: #F26E20;
  --brand-amber:  #FFB100;
  --brand-navy:   #0A1C30;
  --brand-cream:  #F9F5EE;
}

/* ── Typography — Kinetic Policy Narrative ──────────────────────────────── */
/* Body: Source Serif 4 (literary credibility for policy/EYFS content) */
body {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
}
/* UI controls stay Montserrat — functional, clean */
input, button, select, textarea,
.btn-primary, .nav-cta, .chip, .stitch-chip, .badge,
.stitch-nav-item, .sidebar-chip, .tab, .label {
  font-family: 'Montserrat', sans-serif !important;
}

/* Headlines: Montserrat, bold, tight tracking */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero h1,
.plan-name,
.card-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

/* ── Logo wordmark ──────────────────────────────────────────────────────── */
.logo {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  font-size: 1.3rem !important;
}

.logo-img {
  height: 52px;
  width: auto;
  display: block;
}

/* Hero background is set per-page — no global override */

/* ── Buttons — kinetic teal primary, coral for urgency ──────────────────── */
.btn-primary,
.nav-cta {
  background: var(--teal) !important;
  color: var(--navy) !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}
.btn-primary:hover,
.nav-cta:hover {
  background: var(--teal-dark) !important;
}
/* Price nudge keeps coral — urgency signal */
.price-nudge-btn {
  background: var(--coral) !important;
  border-radius: 10px !important;
}
.price-nudge-btn:hover {
  background: var(--coral-light) !important;
}

.btn-secondary {
  border-color: rgba(255,255,255,0.5) !important;
  border-radius: 10px !important;
}

/* ── Pricing cards ──────────────────────────────────────────────────────── */
.pricing-card.popular {
  border-color: #00D1C1 !important;
  background: #EEF7FA !important;
}

.pricing-card.sub-card {
  border-color: #F26E20 !important;
}

.popular-badge {
  background: #00D1C1 !important;
}

/* ── Proof bar ──────────────────────────────────────────────────────────── */
.proof-logo {
  color: #00D1C1 !important;
}

/* ── Price nudge bar ────────────────────────────────────────────────────── */
.price-nudge {
  background: #EEF7FA !important;
  border-color: #c0dde8 !important;
}

/* ── Sidebar (dashboard) ────────────────────────────────────────────────── */
.sidebar {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 0.5rem !important;
}

/* ── Feature icons & section labels ────────────────────────────────────── */
.section-label {
  color: #F26E20 !important;
}

/* ── Scrollbar accent ───────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: #00D1C1;
}

/* ── Days Out nav button — teal pill, sits left of Find Childcare ───────── */
.nav-days-out {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: #00D1C1 !important;
  color: white !important;
  border: 1px solid #00D1C1 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 0.45rem 1rem !important;
  border-radius: 20px !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.nav-days-out:hover {
  background: #00A99C !important;
  border-color: #00A99C !important;
}

/* Show Days Out alongside Find Childcare on mobile — compact pill */
@media (max-width: 640px) {
  .nav-days-out {
    display: flex !important;
    font-size: 0.75rem !important;
    padding: 0.35rem 0.7rem !important;
  }
}

/* ── Find Childcare nav button — prominent orange pill ──────────────────── */
.nav-find {
  background: #F26E20 !important;
  color: white !important;
  border-color: #F26E20 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 0.45rem 1rem !important;
  border-radius: 20px !important;
}
.nav-find:hover {
  background: #F58040 !important;
  border-color: #F58040 !important;
  color: white !important;
}

/* ── Days Out & Activities — highlighted in desktop nav ─────────────────── */
.nav-links a[href="/activities-for-parents.html"] {
  color: #F26E20 !important;
  font-weight: 700 !important;
}

/* ── Recommended — amber highlight in desktop nav ───────────────────────── */
.nav-links a[href="/recommended.html"] {
  color: #FFB100 !important;
  font-weight: 700 !important;
}

/* ── Drawer hero: prominent CTA cards at top of mobile drawer ───────────── */
.nav-drawer-hero {
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: #E0FAF8;
  border-bottom: 1px solid #D4EAF5;
  flex-shrink: 0;
}
.drawer-hero-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  color: white;
  transition: opacity 0.15s;
}
.drawer-hero-btn:hover { opacity: 0.9; }
.drawer-hero-btn-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 0.1rem;
}
.drawer-hero-primary { background: var(--teal); color: var(--navy) !important; }
.drawer-hero-secondary { background: var(--action-navy); }

/* ── Mobile nav: always show Login, hide Get Started (it's in the drawer) ── */
@media (max-width: 860px) {
  /* Keep nav from overflowing on small screens */
  nav { box-sizing: border-box; }
  .nav-inner { gap: 0.5rem; }
  /* Show Find Childcare in the sticky nav bar on mobile — compact */
  .nav-find {
    display: flex !important;
    font-size: 0.75rem !important;
    padding: 0.35rem 0.7rem !important;
  }
}

@media (max-width: 640px) {
  /* Show Login button — override any page-level display:none */
  .nav-login {
    display: none !important;
  }
  /* Hide the Get Started coral CTA — it lives in the mobile drawer */
  .nav-cta { display: none !important; }
}

/* Respect users who ask for less motion — kill decorative animation/transition
   site-wide (accessibility + stops perceived jumpiness for those users). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Stitch design system — glassmorph + bento + surface cards
   These classes are used by all rebuilt Stitch-patterned pages.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Semantic surface tokens ─────────────────────────────────────────────── */
:root {
  --surface:               #F9F5EE;
  --surface-low:           #F4EFE6;
  --surface-white:         #FFFFFF;
  --surface-card:          rgba(255,255,255,0.97);
  --outline-faint:         rgba(10,28,48,0.08);
  --outline-mid:           rgba(10,28,48,0.14);
  --shadow-card:           0 2px 8px rgba(10,28,48,0.06), 0 1px 2px rgba(10,28,48,0.04);
  --shadow-lift:           0 12px 28px -6px rgba(10,28,48,0.14);
  --radius-card:           16px;
  --radius-lg:             20px;
  --transition-ui:         0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ── Glass morphism ──────────────────────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.4), var(--shadow-card);
}
.glass-panel {
  background: rgba(255,255,255,0.75);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 4px 6px -1px rgba(10,28,48,0.05), 0 2px 4px -1px rgba(10,28,48,0.03);
}
.glass-card {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.5), 0 2px 5px rgba(10,28,48,0.04);
}

/* ── Surface cards (flat, non-glass) ─────────────────────────────────────── */
.surface-card {
  background: var(--surface-white);
  border: 1px solid var(--outline-faint);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.surface-card-low {
  background: #FAFAF8;
  border: 1px solid var(--outline-faint);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ── Bento cards ─────────────────────────────────────────────────────────── */
.bento-card {
  background: var(--surface-white);
  border: 1px solid var(--outline-faint);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
.bento-lift {
  transition: transform var(--transition-ui), box-shadow var(--transition-ui);
}
.bento-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* ── Color top-border accents (1px stripe at card top) ───────────────────── */
.bt-teal   { border-top: 4px solid var(--green) !important; }
.bt-coral  { border-top: 4px solid var(--coral) !important; }
.bt-amber  { border-top: 4px solid var(--amber) !important; }
.bt-navy   { border-top: 4px solid var(--navy) !important; }
.bt-green  { border-top: 4px solid var(--brand-green) !important; }

/* ── Chip / pill badges ──────────────────────────────────────────────────── */
.stitch-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
}
.chip-teal  { background: var(--teal-pale); color: #007a71; }
.chip-kinetic { background: var(--teal); color: var(--navy); }
.chip-coral { background: #FFF0E8; color: #bf4d0d; }
.chip-amber { background: var(--amber-pale); color: #7a5200; }
.chip-navy  { background: #E8EDF2; color: var(--navy); }
.chip-green { background: #EFF8EC; color: #3a6b2a; }

/* ── Progress bars ───────────────────────────────────────────────────────── */
.progress-track {
  width: 100%;
  height: 6px;
  background: #E8EDF2;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--teal);
  transition: width 0.6s ease;
}
.progress-fill-coral  { background: var(--coral); }
.progress-fill-amber  { background: var(--amber); }
.progress-fill-navy   { background: var(--navy); }

/* ── Stitch sidebar nav ──────────────────────────────────────────────────── */
.stitch-sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--surface-white);
  border-right: 1px solid var(--outline-faint);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  overflow-y: auto;
}
.stitch-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.5rem;
  margin-bottom: 2rem;
}
.stitch-sidebar-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #E0FAF8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.stitch-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.875rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4A6375;
  text-decoration: none;
  transition: background var(--transition-ui), color var(--transition-ui);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.stitch-nav-item:hover {
  background: var(--teal-pale);
  color: var(--action-navy);
}
.stitch-nav-item.active {
  background: var(--teal-pale);
  color: #007a71;
  font-weight: 700;
}
.stitch-nav-item .nav-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ── Stitch top header ───────────────────────────────────────────────────── */
.stitch-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(249,245,238,0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--outline-faint);
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ── Icon button (topbar actions) ────────────────────────────────────────── */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #4A6375;
  cursor: pointer;
  transition: background var(--transition-ui), color var(--transition-ui);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.icon-btn:hover {
  background: #E0FAF8;
  color: var(--navy);
}

/* ── Polly widget / AI card ──────────────────────────────────────────────── */
.polly-card {
  background: linear-gradient(135deg, #E0FAF8 0%, #EFF8EC 100%);
  border: 1px solid rgba(0,209,193,0.3);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}
.polly-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(0,209,193,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.polly-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.polly-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulse-dot 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* ── Chat message bubbles ────────────────────────────────────────────────── */
.chat-bubble-ai {
  background: var(--surface-white);
  border: 1px solid var(--outline-faint);
  border-radius: 18px 18px 18px 4px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--navy);
  max-width: 85%;
}
.chat-bubble-user {
  background: var(--teal);
  color: var(--navy);
  border-radius: 18px 18px 4px 18px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 85%;
  margin-left: auto;
}

/* ── Typing indicator ────────────────────────────────────────────────────── */
.typing-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9BB4C0;
  margin: 0 1.5px;
  animation: typing-bounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%,60%,100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ── Quick-chip row (Polly suggestions) ──────────────────────────────────── */
.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.quick-chip {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  background: var(--surface-white);
  border: 1.5px solid var(--outline-faint);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: all var(--transition-ui);
  white-space: nowrap;
}
.quick-chip:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy);
}

/* ── Registration milestone timeline ─────────────────────────────────────── */
.milestone-line {
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: #E2EDF2;
}
.milestone-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  font-size: 1rem;
  border: 3px solid var(--surface-white);
  box-shadow: 0 2px 6px rgba(10,28,48,0.12);
}
.dot-complete { background: var(--green); color: var(--surface-white); }
.dot-action   { background: #FEE2E2; color: #b91c1c; }
.dot-progress { background: #FEF3C7; color: #92400e; }
.dot-locked   { background: #E8EDF2; color: #9CA3AF; }

/* ── Video card thumbnail ────────────────────────────────────────────────── */
.video-card {
  background: var(--surface-white);
  border: 1px solid var(--outline-faint);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--transition-ui), box-shadow var(--transition-ui);
}
.video-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #1a3a4a 0%, #0A1C30 100%);
  overflow: hidden;
}
.video-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: rgba(10,28,48,0.35);
  transition: opacity var(--transition-ui);
}
.video-thumb:hover .video-play-btn { opacity: 1; }
.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(10,28,48,0.75);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

/* ── Custom scrollbar (Stitch style) ─────────────────────────────────────── */
.stitch-scroll::-webkit-scrollbar { width: 6px; }
.stitch-scroll::-webkit-scrollbar-track { background: transparent; }
.stitch-scroll::-webkit-scrollbar-thumb { background: rgba(0,209,193,0.35); border-radius: 999px; }
.stitch-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,209,193,0.6); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Mobile responsive baseline — site-wide
   Loaded after per-page <style> so these override inline grid definitions.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Global overflow + image safety */
img, video, iframe, embed { max-width: 100%; height: auto; }
table { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; }

/* Touch targets — any button/link in .no-print should be tap-friendly */
.no-print button,
.no-print a,
.print-btn,
.polly-ask-chip,
.download-btn,
.btn-primary,
.btn-secondary,
.nav-cta,
.pcta {
  min-height: 44px;
  min-width: 44px;
}

/* Polly tip panel */
.polly-tip {
  background: linear-gradient(135deg, #E0FAF8 0%, #F0FAEE 100%);
  border: 1px solid rgba(0,209,193,0.3);
  border-left: 4px solid #00D1C1;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}
.polly-tip-head {
  font-weight: 800;
  color: #0A1C30;
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
}
.polly-tip-body p { color: #2C4A5A; line-height: 1.6; margin-bottom: 0.5rem; }
.polly-tip-body p:last-child { margin-bottom: 0; }
.polly-tip-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.polly-ask-chip {
  background: #fff;
  border: 1.5px solid rgba(0,209,193,0.4);
  color: #0A1C30;
  border-radius: 50px;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.14s;
  display: inline-flex;
  align-items: center;
}
.polly-ask-chip:hover { background: #00D1C1; color: #fff; border-color: #00D1C1; }

/* ── 640px and below: collapse form grids ─────────────────────────────────── */
@media (max-width: 640px) {
  /* Reduce body padding on print-form pages */
  body { padding: 1rem !important; }

  /* Collapse all field grids (inline styles use 1fr 1fr / 1fr 1fr 1fr) */
  .field-row,
  .field-row.triple,
  .field-row.single { grid-template-columns: 1fr !important; gap: 0.6rem !important; }

  /* Signature row: stack vertically */
  .sig-row { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* Form header: stack logo + title */
  .form-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
  }
  .form-type { text-align: left !important; }
  .form-type h1,
  .form-type p { text-align: left !important; }

  /* Reduce form card padding */
  .form-card .card-body { padding: 0.75rem !important; }

  /* EYFS grid: 2 columns still readable at 640px */
  .eyfs-grid { grid-template-columns: 1fr 1fr !important; }

  /* Age band wraps naturally */
  .age-band { flex-wrap: wrap !important; }

  /* Print button: full width */
  .print-btn { width: 100% !important; text-align: center !important; box-sizing: border-box !important; }

  /* Stitch bento: always single column */
  .bento-grid { grid-template-columns: 1fr !important; }
  .btile.span2 { grid-column: auto !important; }

  /* Library sidebar hidden + body padding normalised */
  .lib-body { padding: 0.75rem 0.75rem 4rem !important; }

  /* Section padding */
  section, .hero, .features, .how, .why-us, .pricing, .faq, .final {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ── 480px and below: further collapse ─────────────────────────────────────── */
@media (max-width: 480px) {
  /* EYFS 3-col → single col on very small phones */
  .eyfs-grid { grid-template-columns: 1fr !important; }

  /* Download/action buttons full width */
  .download-bar-inner { flex-direction: column !important; gap: 0.5rem !important; }
  .download-bar-inner a,
  .download-bar-inner button { width: 100% !important; text-align: center !important; }

  /* Polly tip chips stack */
  .polly-tip-actions { flex-direction: column !important; }
  .polly-ask-chip { width: 100% !important; justify-content: center !important; }

  /* Hero: tighten */
  .hero-inner { gap: 1.5rem !important; }
  .hero-ctas { flex-direction: column !important; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { width: 100% !important; text-align: center !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Library resource sheet upgrade (Jun 2026)
   All 75 sheets in policies/ activities/ forms/ link brand.css.
   These rules replace the old #00D1C1 teal + D4547A pink + Fraunces/Inter
   design with the Kinetic Policy Narrative brand — no per-file edits needed.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Form document headers — clean left-border accent replaces thick boxy border */
.form-header {
  border: none !important;
  border-left: 4px solid var(--teal) !important;
  background: #F8FBFC !important;
  border-radius: 0 10px 10px 0 !important;
}
.form-header .form-logo {
  color: var(--teal) !important;
}
.form-header .form-logo span {
  color: var(--coral) !important;
}

/* Card title bars — navy instead of old teal */
.card-title {
  background: var(--navy) !important;
  color: white !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* Highlight / note blocks */
.highlight {
  border-left-color: var(--teal) !important;
  background: var(--teal-pale) !important;
  color: var(--slate) !important;
}

/* Print button */
.print-btn {
  background: var(--navy) !important;
  color: white !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}
.print-btn:hover {
  background: #1A3A58 !important;
}
/* Print button inside dark page-header keeps white-on-dark styling */
.page-header .print-btn {
  background: white !important;
  color: var(--navy) !important;
}
.page-header .print-btn:hover {
  background: #F0F4F8 !important;
}

/* Activity/colouring sheet page header — replace pink gradient with brand navy */
.page-header {
  background: linear-gradient(135deg, #0A1C30, #1A3A58) !important;
}
.page-header h1 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
}
.intro-box strong {
  color: var(--teal) !important;
}

/* Activity card (colouring sheet) headers — replace pink with teal pale */
.sheet-header {
  background: var(--teal-pale) !important;
}
.sheet-title {
  color: var(--navy) !important;
  font-family: 'Montserrat', sans-serif !important;
}
.sheet-age {
  background: var(--navy) !important;
  color: white !important;
}

/* EYFS strips on activity sheets */
.eyfs-strip {
  background: var(--teal-pale) !important;
}
.eyfs-tag {
  background: var(--teal) !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
}

/* Instruction text boxes on activity sheets */
.instruction {
  background: var(--teal-pale) !important;
  color: var(--navy) !important;
}

/* ── Logo wordmark (Jun 2026) ──────────────────────────────────────────────
   Standalone pages (login, dashboard, guides) use a hardcoded logo anchor.
   These rules replace the old shield image with the Polly avatar + wordmark.
   Pages that use site-nav.js get the logo via injected markup — not these rules.
   ─────────────────────────────────────────────────────────────────────────── */
a.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}
a.logo .mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #E0FAF8;
  box-shadow: inset 0 0 0 2px rgba(0,209,193,0.3);
}
a.logo .mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
a.logo .word {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.3px !important;
  color: #0A1C30 !important;
}
a.logo .word b {
  color: #F26E20 !important;
  font-weight: 900 !important;
}

@media print {
  /* Restore navy in print so headers print correctly */
  .page-header {
    background: #0A1C30 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .card-title {
    background: #0A1C30 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}