/* ===== CSS Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, picture, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; }

/* ===== Design Tokens ===== */
:root {
  /* Brand Colors — lavender-blue + navy + cream */
  --color-primary: #D6E1FF;          /* cloodyLavenderBlue */
  --color-primary-deep: #8FA6E0;     /* hover, gradient stops, link underlines */
  --color-secondary: #EDF2FF;        /* soft card backgrounds */
  --color-accent: #1A2B5C;           /* deep navy, editorial type */
  --color-bg: #FFFFFF;               /* clean white */
  --color-bg-alt: #EAF0FF;           /* lavender-blue color block */
  --color-soft-blue: #A8D8EA;
  --color-cream: #FFF4D6;            /* cozy section bg (matches iOS warmCream) */
  --color-warm-yellow: #FFE5A0;      /* highlight chip only */
  --color-soft-peach: #FFD5C5;

  /* Status */
  --color-success: #017745;          /* cloodyGreen */

  /* Night (footer + dark sections + 3D button base) */
  --color-night: #0E1428;
  --color-night-soft: #1A2440;       /* slightly lifted for layered dark sections */

  /* Text */
  --color-text: #0E1428;             /* slightly softer than pure black */
  --color-text-secondary: #4A5169;
  --color-text-light: #7A8198;
  --color-text-inverse: #FFFFFF;

  /* Spacing */
  --space-xxxs: 4px;
  --space-xxs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* Layout */
  --max-width: 1200px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 9999px;

  /* Shadows — lavender-blue tint, not purple */
  --shadow-card: 0 6px 28px rgba(143, 166, 224, 0.16);
  --shadow-card-hover: 0 12px 40px rgba(143, 166, 224, 0.26);
  --shadow-nav: 0 2px 24px rgba(14, 20, 40, 0.06);
  --shadow-pill: 0 4px 18px rgba(143, 166, 224, 0.22);
  --shadow-deep: 0 24px 60px rgba(14, 20, 40, 0.18);

  /* Aurora gradient — used behind hero and as accent overlays */
  --gradient-aurora: conic-gradient(from 210deg at 50% 50%,
    #D6E1FF 0deg,
    #EAF0FF 80deg,
    #FFF4D6 160deg,
    #FFE5A0 200deg,
    #D6E1FF 280deg,
    #EAF0FF 360deg);
  --gradient-aurora-soft: radial-gradient(80% 60% at 50% 30%, #FFF4D6 0%, transparent 60%),
                          radial-gradient(70% 70% at 80% 80%, #D6E1FF 0%, transparent 65%),
                          radial-gradient(70% 70% at 20% 90%, #EAF0FF 0%, transparent 65%);
  --gradient-night-aurora: radial-gradient(60% 50% at 50% 0%, rgba(214, 225, 255, 0.16) 0%, transparent 70%),
                           radial-gradient(50% 40% at 80% 100%, rgba(255, 229, 160, 0.10) 0%, transparent 70%);

  /* Display font tweak */
  --font-display-tracking: -0.03em;

  /* SVG noise overlay (~4% opacity grain) */
  --noise-overlay: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.07'/></svg>");

  /* Sky-fade hero — gradual, no visible seam, ends at pure white */
  --sky-fade-height: 130vh;
  --gradient-sky-fade: linear-gradient(180deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.18) 52%,
    rgba(255, 255, 255, 0.48) 68%,
    rgba(255, 255, 255, 0.82) 84%,
    rgba(255, 255, 255, 0.98) 96%,
    #FFFFFF 100%);

  /* Scrapbook / sticker */
  --shadow-sticker: 0 8px 0 rgba(143, 166, 224, 0.18), 0 14px 28px rgba(14, 20, 40, 0.10);
  --shadow-sticker-sm: 0 4px 0 rgba(143, 166, 224, 0.15), 0 8px 18px rgba(14, 20, 40, 0.08);
  --tilt-1: -2.2deg;
  --tilt-2: 1.6deg;
  --tilt-3: -1.1deg;

  /* Number badge for 01/02/03 */
  --num-badge-size: 56px;

  /* Decorative inline SVG tokens */
  --squiggle-primary: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'><path d='M2 6 Q15 0 30 6 T58 6 T86 6 T114 6' fill='none' stroke='%238FA6E0' stroke-width='3' stroke-linecap='round'/></svg>");
  --dotted-path: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M0 6 H200' fill='none' stroke='%238FA6E0' stroke-width='2' stroke-linecap='round' stroke-dasharray='2 8'/></svg>");
  --twinkle-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFE5A0'><path d='M12 0 L13.4 9.2 L22.5 11 L13.4 12.8 L12 22 L10.6 12.8 L1.5 11 L10.6 9.2 Z'/></svg>");
  --ribbon-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'><path d='M0 18 Q40 0 80 14 T160 14 T240 14 T320 14 T400 18 L400 76 Q360 90 320 78 T240 78 T160 78 T80 78 T0 76 Z' fill='%23FFE5A0'/></svg>");
}

/* ===== Typography ===== */
body {
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { font-size: 1.05rem; color: var(--color-text-secondary); }

.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

/* ===== Layout ===== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

section {
  padding: var(--space-3xl) 0;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  font-family: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  border: none;
  border-radius: var(--radius-pill);
  padding: 16px 36px;
  cursor: pointer;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, opacity 0.08s ease-out;
}

.btn:active {
  transform: scale(0.95) translateY(1.5px);
  opacity: 0.8;
}

/* 3D Primary Button (matches iOS ThreeDCapsuleBackground) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  font-family: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  border: none;
  border-radius: var(--radius-pill);
  padding: 16px 36px;
  cursor: pointer;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, opacity 0.08s ease-out;
  background: linear-gradient(180deg, #303030 0%, #1A1A1A 50%, #101010 100%);
  color: white;
  box-shadow: 0 2.5px 0 #080808, 0 6px 16px rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  position: relative;
}
.btn-primary:active {
  transform: scale(0.96) translateY(1.5px);
  opacity: 0.85;
}
.btn-primary.btn-light {
  background: white;
  color: var(--color-night);
  box-shadow: 0 2.5px 0 rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.nav-cta {
  background: var(--color-night);
  color: var(--color-text-inverse) !important;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-pill);
}
.hero-trust {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-top: 4px;
}

.btn-primary:active {
  box-shadow: 0 0.5px 0 #080808, 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary .apple-logo {
  width: 18px;
  height: 18px;
  fill: white;
}

/* White CTA button */
.btn-white {
  background: white;
  color: var(--color-text);
  box-shadow: 0 2.5px 0 rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.btn-white:active {
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Outline nav button */
.btn-nav {
  background: var(--color-text);
  color: white;
  padding: 10px 24px;
  font-size: 0.9rem;
  border-radius: var(--radius-pill);
}

.btn-small-text {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-text-light);
}

/* ===== Navigation ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-md) 0;
  transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
}

.nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-nav);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  font-weight: 800;
  font-size: 1.3rem;
}

.nav-brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.nav-brand img.wordmark {
  width: auto;
  height: 34px;
  border-radius: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-links a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--color-primary);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ===== Hero ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(197, 184, 232, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 20%, rgba(168, 216, 234, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, #D5E5F5 0%, #E8EEF5 30%, #F0F0FA 60%, var(--color-bg) 100%);
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero-content {
  max-width: 540px;
}

.hero-content h1 {
  margin-bottom: var(--space-sm);
}

.hero-content p {
  font-size: 1.15rem;
  margin-bottom: var(--space-lg);
  max-width: 460px;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-mascot {
  width: 380px;
  height: 380px;
  object-fit: contain;
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 20px 40px rgba(155, 141, 201, 0.25));
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* ===== Social Proof Bar ===== */
.social-proof {
  background: rgba(197, 184, 232, 0.12);
  padding: var(--space-xl) 0;
  text-align: center;
}

.social-proof .stat {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-xxxs);
}

.social-proof .citation {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

/* ===== Problem Section ===== */
.problem {
  text-align: center;
}

.problem h2 {
  margin-bottom: var(--space-xl);
}

.problem-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.problem-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s, box-shadow 0.3s;
}

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

.problem-card img {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-sm);
  object-fit: contain;
}

.problem-card p {
  font-size: 1rem;
  line-height: 1.5;
}

.problem-summary {
  font-size: 1.2rem;
  color: var(--color-text);
  max-width: 600px;
  margin: 0 auto;
}

.problem-summary strong {
  color: var(--color-primary);
}

/* ===== Features ===== */
.features {
  background: white;
}

.features-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.features-header p {
  font-size: 1.1rem;
  margin-top: var(--space-xxs);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.feature-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform 0.3s, box-shadow 0.3s;
}

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

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.feature-card h3 {
  margin-bottom: var(--space-xxs);
  font-size: 1.15rem;
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ===== How It Works ===== */
.how-it-works {
  text-align: center;
}

.how-it-works h2 {
  margin-bottom: var(--space-xl);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  position: relative;
}

/* Connecting line between steps */
.steps::before {
  content: '';
  position: absolute;
  top: 80px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-primary), var(--color-secondary));
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
}

.step img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  margin: 0 auto var(--space-sm);
  filter: drop-shadow(0 8px 16px rgba(155, 141, 201, 0.2));
}

.step h3 {
  margin-bottom: var(--space-xxxs);
}

.step p {
  font-size: 0.95rem;
  max-width: 280px;
  margin: 0 auto;
}

/* ===== Science ===== */
.science {
  background: white;
}

.science-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.science-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.science-card {
  border: 1px solid rgba(197, 184, 232, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  transition: border-color 0.3s;
}

.science-card:hover {
  border-color: var(--color-primary);
}

.science-stat {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: var(--space-xxxs);
}

.science-card h4 {
  margin-bottom: var(--space-xxs);
  font-size: 0.95rem;
}

.science-card p {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

/* ===== Final CTA — starry night atmosphere ===== */
.final-cta {
  background-image: url('../images/purple-sky.jpg');
  background-size: cover;
  background-position: center;
  color: var(--color-text-inverse);
  text-align: center;
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Fade smoothly into the footer's navy at the bottom — no visible seam */
  background: linear-gradient(180deg,
    rgba(14, 20, 40, 0.25) 0%,
    rgba(14, 20, 40, 0.55) 60%,
    rgba(14, 20, 40, 0.92) 92%,
    var(--color-night) 100%);
  pointer-events: none;
}
.final-cta > * { position: relative; z-index: 1; }
.final-cta h2,
.final-cta p { color: var(--color-text-inverse); }
.final-cta p { color: rgba(255, 255, 255, 0.85); }

.final-cta-mascot {
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin: 0 auto var(--space-md);
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.15));
}

.final-cta h2 {
  color: white;
  margin-bottom: var(--space-xxs);
}

.final-cta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.15rem;
  margin-bottom: var(--space-lg);
}

.final-cta .platform-note {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ===== Footer ===== */
.footer {
  background: var(--color-night);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-xl) 0 var(--space-md);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  font-weight: 800;
  font-size: 1.2rem;
  color: white;
  margin-bottom: var(--space-xs);
}

.footer-brand img {
  /* Lavender 3D wordmark — preserve aspect ratio, sized small */
  width: auto;
  height: 44px;
  max-width: 160px;
  border-radius: 0;
  filter: drop-shadow(0 4px 10px rgba(143, 166, 224, 0.3));
}

.footer-tagline {
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 320px;
}

.footer h4 {
  color: white;
  margin-bottom: var(--space-sm);
  font-size: 0.95rem;
}

.footer-links a {
  display: block;
  margin-bottom: var(--space-xxs);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--color-secondary);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-md);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

/* ===== Legal Pages ===== */
.legal {
  padding-top: 120px;
  padding-bottom: var(--space-3xl);
}

/* When a sky page-header sits above, the legal main doesn't need its own top padding */
.page-header + .legal {
  padding-top: var(--space-xl);
}

.legal h1 {
  margin-bottom: var(--space-xxs);
}

.legal .last-updated {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
}

.legal h2 {
  font-size: 1.4rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.legal h3 {
  font-size: 1.1rem;
  margin-top: var(--space-md);
  margin-bottom: var(--space-xxs);
}

.legal p, .legal li {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.legal ul {
  list-style: disc;
  padding-left: var(--space-md);
}

.legal a {
  color: var(--color-primary);
  text-decoration: underline;
}

.legal a:hover {
  color: var(--color-accent);
}

/* Support page */
.support-contact {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-xl);
  text-align: center;
}

.support-contact .email-link {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.support-contact .email-link:hover {
  text-decoration: underline;
}

.faq-item {
  border-bottom: 1px solid rgba(197, 184, 232, 0.2);
  padding: var(--space-md) 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item h3 {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.faq-item h3::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-primary);
  transition: transform 0.3s;
}

.faq-item.open h3::after {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
  padding-top: var(--space-sm);
}

/* ===== Scroll Animations ===== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ===== Responsive ===== */
@media (max-width: 968px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-content p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-mascot {
    width: 280px;
    height: 280px;
  }

  .problem-cards {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

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

  .steps::before {
    display: none;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: 400px;
    margin: 0 auto;
  }

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

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Mobile nav */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(248, 246, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--space-md);
    gap: var(--space-sm);
    box-shadow: var(--shadow-nav);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

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

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

  .hero-mascot {
    width: 220px;
    height: 220px;
  }

  section {
    padding: var(--space-2xl) 0;
  }
}

/* ============================================================
   2026 Visual Uplift — new component classes
   Used by index.html + the two new SEO pages.
   All animations gated by prefers-reduced-motion.
   ============================================================ */

/* ===== Editorial display type ===== */
.h1-editorial {
  font-size: clamp(3rem, 7.5vw, 6.25rem);
  font-weight: 800;
  letter-spacing: var(--font-display-tracking);
  line-height: 0.98;
  color: var(--color-accent);
}
.h1-editorial .accent {
  background: linear-gradient(120deg, var(--color-accent) 0%, var(--color-primary-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.h2-editorial {
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--color-accent);
}

/* ===== Color blocks ===== */
.color-block--cream {
  background: var(--color-cream);
  position: relative;
}
.color-block--blue {
  background: var(--color-bg-alt);
  position: relative;
}
.color-block--navy {
  background: var(--color-night);
  background-image: var(--gradient-night-aurora);
  color: var(--color-text-inverse);
}
.color-block--navy h1,
.color-block--navy h2,
.color-block--navy h3 { color: var(--color-text-inverse); }
.color-block--navy p { color: rgba(255, 255, 255, 0.72); }

/* ===== Aurora background ===== */
.aurora-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.aurora-bg::before {
  content: '';
  position: absolute;
  inset: -20% -20% -20% -20%;
  background: var(--gradient-aurora-soft);
  z-index: -2;
  filter: blur(40px);
  opacity: 0.95;
}
.aurora-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise-overlay);
  z-index: -1;
  opacity: 0.65;
  pointer-events: none;
}

/* ===== Hero (new) — Cloody sky atmosphere ===== */
.hero-2026 {
  padding: clamp(112px, 16vh, 180px) 0 clamp(48px, 8vh, 96px);
  text-align: left;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}
.hero-mascot-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: -64px;
  padding-left: 8%;
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { align-items: center; }
  .hero-mascot-wrap { order: -1; margin-top: 0; }
}

/* Sky <picture> sits behind everything, fading into cream at the bottom */
.hero-sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.hero-sky picture,
.hero-sky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.hero-sky img {
  transform: translateY(calc(var(--sky-y, 0) * 1px));
  will-change: transform;
}
.hero-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-sky-fade);
  pointer-events: none;
}

/* Faint white halo behind the mascot for soft depth (no yellow) */
.hero-2026::before {
  content: '';
  position: absolute;
  top: 18%;
  right: 8%;
  width: clamp(360px, 50vw, 640px);
  height: clamp(360px, 50vw, 640px);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), transparent 70%);
  filter: blur(24px);
  z-index: -1;
  pointer-events: none;
}
.hero-2026 .h1-editorial {
  color: #000000;
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.55);
  margin: 0;
  max-width: 14ch;
}
.hero-2026 .hero-sub {
  color: var(--color-accent);
  font-weight: 500;
  max-width: 42ch;
}
.hero-2026 .hero-trust { color: var(--color-accent); opacity: 0.75; }

/* Floating sparkles around the mascot */
.hero-sparkles {
  position: relative;
  display: inline-block;
}
.hero-sparkles::before,
.hero-sparkles::after {
  content: '✦';
  position: absolute;
  color: var(--color-warm-yellow);
  font-size: 1.4rem;
  filter: drop-shadow(0 2px 6px rgba(255, 229, 160, 0.7));
  animation: twinkle 3.5s ease-in-out infinite;
}
.hero-sparkles::before {
  top: 8%;
  left: -10%;
  animation-delay: 0s;
}
.hero-sparkles::after {
  top: 30%;
  right: -8%;
  font-size: 1rem;
  animation-delay: 1.5s;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Wordmark inside the hero — centered, 3D lavender (image is tight-cropped) */
.hero-wordmark {
  display: block;
  width: auto;
  height: clamp(51px, 7.01vw, 115px);
  max-width: 100%;
  margin: 0 auto var(--space-lg);
  opacity: 1;
  filter: drop-shadow(0 8px 18px rgba(143, 166, 224, 0.35));
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(143, 166, 224, 0.25);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-warm-yellow);
  box-shadow: 0 0 0 3px rgba(255, 229, 160, 0.35);
}
.hero-h1 {
  max-width: 14ch;
  margin: 0 auto;
}
.hero-sub {
  max-width: 36ch;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
@media (max-width: 880px) {
  .hero-cta { align-items: center; }
}
.hero-mascot-2026 {
  width: clamp(234px, 36vw, 468px);
  height: auto;
  filter: drop-shadow(0 40px 80px rgba(143, 166, 224, 0.4)) drop-shadow(0 -10px 30px rgba(255, 255, 255, 0.3));
  transform: translateY(calc(var(--py, 0) * 1px));
  will-change: transform;
}
@keyframes hero-float-once {
  0%   { transform: translateY(calc(var(--py, 0) * 1px))                rotate(0); }
  18%  { transform: translateY(calc(var(--py, 0) * 1px - 22px))         rotate(-3deg); }
  35%  { transform: translateY(calc(var(--py, 0) * 1px - 6px))          rotate(2deg); }
  55%  { transform: translateY(calc(var(--py, 0) * 1px - 16px))         rotate(-1.5deg); }
  75%  { transform: translateY(calc(var(--py, 0) * 1px - 2px))          rotate(0.5deg); }
  100% { transform: translateY(calc(var(--py, 0) * 1px))                rotate(0); }
}
.hero-mascot-2026.is-floating {
  animation: hero-float-once 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
/* When cursor leaves the hero, transform glides back smoothly */
.hero-mascot-2026.is-returning {
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Single laurel below the hero (RBP only) ===== */
.hero-laurels {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-xl);
}
.laurel {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: clamp(60px, 6.93vw, 88px);
  opacity: 1;
}

/* Science section laurel — small, centered above the stat cards */
.science-laurel {
  display: block;
  margin: 0 auto var(--space-2xl);
  max-width: 100%;
  max-height: clamp(80px, 9vw, 120px);
  width: auto;
  height: auto;
}

/* ===== Marquee proof bar ===== */
.marquee {
  background: linear-gradient(180deg, rgba(234, 240, 255, 0.6), rgba(247, 244, 236, 0.9));
  color: var(--color-accent);
  padding: 22px 0;
  overflow: hidden;
  border-top: 1px solid rgba(143, 166, 224, 0.18);
  border-bottom: 1px solid rgba(143, 166, 224, 0.12);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: var(--space-2xl);
  white-space: nowrap;
  animation: marquee-scroll 36s linear infinite;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.marquee-item::before {
  content: '✦';
  color: var(--color-primary-deep);
  font-size: 0.7rem;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== Problem section, refreshed ===== */
.problem-2026 {
  padding: var(--space-3xl) 0;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.problem-2026 .container { position: relative; z-index: 1; }
.problem-2026 h2 {
  text-align: center;
  max-width: 14ch;
  margin: 0 auto var(--space-2xl);
}
/* Timeline — three beats connected by a thin line */
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 960px;
  margin: var(--space-3xl) auto 0;
  position: relative;
  padding: 0 var(--space-md);
}
/* The connecting horizontal line — sits at the middle (dot) row */
.timeline::before {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    #D6E1FF 12%,
    #8FA6E0 50%,
    #D6E1FF 88%,
    transparent 100%);
  z-index: 0;
}
.timeline-step {
  position: relative;
  text-align: center;
  padding: 0 var(--space-lg);
  z-index: 1;
}
/* Dot marker at the line */
.timeline-step::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px rgba(143, 166, 224, 0.35);
}
.timeline-time {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: clamp(56px, 7vw, 96px);
}
.timeline-quote {
  margin-top: clamp(56px, 7vw, 96px);
  margin-bottom: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 500;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
@media (max-width: 700px) {
  .timeline {
    grid-template-columns: 1fr;
    max-width: 460px;
    padding: 0 var(--space-md);
    row-gap: var(--space-xl);
  }
  .timeline::before {
    left: 24px;
    right: auto;
    top: 24px;
    bottom: 24px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg,
      transparent 0%,
      #D6E1FF 12%,
      #8FA6E0 50%,
      #D6E1FF 88%,
      transparent 100%);
  }
  .timeline-step {
    text-align: left;
    padding: 0 0 0 56px;
  }
  .timeline-step::before {
    top: 24px;
    left: 24px;
    transform: translate(-50%, -50%);
  }
  .timeline-time { margin-bottom: var(--space-xs); }
  .timeline-quote { margin-top: 0; }
}
/* ===== Name-the-thing band — starry night atmosphere ===== */
.name-band {
  padding: clamp(96px, 16vh, 180px) 0;
  background-image: url('../images/purple-sky.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  position: relative;
  color: var(--color-text-inverse);
  overflow: hidden;
}
.name-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 20, 40, 0.15), rgba(14, 20, 40, 0.35));
  pointer-events: none;
}
.name-band .container { position: relative; z-index: 1; }
.name-band h2 {
  max-width: 18ch;
  margin: 0 auto var(--space-md);
  color: var(--color-text-inverse);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}
.name-band .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-text-inverse);
  border-bottom: 2px solid var(--color-warm-yellow);
  padding-bottom: 4px;
  font-size: 1.1rem;
}
.name-band .link-arrow:hover {
  border-color: var(--color-text-inverse);
  color: var(--color-warm-yellow);
}

/* ===== Features grid — normal, clean ===== */
.features-section {
  padding: var(--space-3xl) 0;
  background: #FFFFFF;
}
.features-section h2 {
  text-align: center;
  max-width: 18ch;
  margin: 0 auto var(--space-2xl);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
}
.feature {
  background: #FFFFFF;
  border: 1px solid rgba(143, 166, 224, 0.18);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: rgba(143, 166, 224, 0.35);
}
.feature h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}
.feature p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}
@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .features-grid { grid-template-columns: 1fr; }
}

/* ===== Legacy bento (kept for compatibility, no longer rendered) ===== */
.bento-section {
  padding: var(--space-3xl) 0;
}
.bento-section h2 {
  text-align: center;
  max-width: 16ch;
  margin: 0 auto var(--space-2xl);
}
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 20px;
}
.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  padding: var(--space-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(143, 166, 224, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.bento-card h3 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  margin-bottom: var(--space-xxs);
}
.bento-card p {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.bento-card--lg { grid-column: span 2; grid-row: span 3; }
.bento-card--tall { grid-row: span 2; }
.bento-card--wide { grid-column: span 3; grid-row: span 2; }
.bento-card--square { grid-column: span 2; grid-row: span 2; }
.bento-card--short { grid-column: span 2; grid-row: span 1; padding-top: var(--space-md); padding-bottom: var(--space-md); }

.bento-card--dark {
  background: var(--color-accent);
  background-image: var(--gradient-night-aurora);
  color: var(--color-text-inverse);
}
.bento-card--dark h3 { color: var(--color-text-inverse); }
.bento-card--dark p { color: rgba(255, 255, 255, 0.7); }

.bento-card--cream {
  background: #F4F6FB;
}
.bento-card--blue {
  background: var(--color-bg-alt);
}

.bento-card .mascot-inset {
  width: 56%;
  max-width: 280px;
  margin-top: auto;
  align-self: flex-end;
  filter: drop-shadow(0 12px 24px rgba(14, 20, 40, 0.18));
}
.bento-card--lg .mascot-inset {
  width: 70%;
  max-width: none;
  align-self: center;
  margin-top: var(--space-md);
}
.bento-card .counter {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  line-height: 1;
}
.bento-card--dark .counter { color: var(--color-primary); }
.bento-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-xxs);
}
.bento-card--dark .bento-eyebrow { color: var(--color-primary); }

/* ===== Screenshot showcase — purple sky atmosphere ===== */
.screens-section {
  padding: var(--space-3xl) 0;
  background-image: url('../images/purple-sky.jpg');
  background-size: cover;
  background-position: center;
  color: var(--color-text-inverse);
  overflow: hidden;
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .screens-section { background-attachment: fixed; }
}
.screens-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 20, 40, 0.2), rgba(14, 20, 40, 0.45));
  pointer-events: none;
  z-index: 0;
}
.screens-section > * { position: relative; z-index: 1; }
.screens-section h2,
.screens-section p { color: var(--color-text-inverse); }
.screens-section p { color: rgba(255, 255, 255, 0.72); max-width: 52ch; margin: 0 auto; text-align: center; }
.screens-section h2 {
  text-align: center;
  max-width: 18ch;
  margin: 0 auto var(--space-md);
}
.screens-rail {
  margin-top: var(--space-2xl);
  display: flex;
  gap: clamp(16px, 2.4vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-md) clamp(24px, 5vw, 96px);
  scroll-padding-left: clamp(24px, 5vw, 96px);
  -webkit-overflow-scrolling: touch;
}
.screens-rail::-webkit-scrollbar { display: none; }
.screens-rail { scrollbar-width: none; }
.screen-phone {
  flex: 0 0 clamp(220px, 28vw, 320px);
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  transition: transform 0.4s ease;
}
.screen-phone-frame {
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.08);
  background: #000;
  width: 100%;
  transition: transform 0.4s ease;
}
.screen-phone:nth-child(odd) .screen-phone-frame { transform: translateY(0) rotate(-1.5deg); }
.screen-phone:nth-child(even) .screen-phone-frame { transform: translateY(20px) rotate(1.5deg); }
.screen-phone:hover .screen-phone-frame { transform: translateY(-8px) rotate(0); }
.screen-phone img {
  width: 100%;
  height: auto;
  display: block;
}
.screen-caption {
  display: inline-block;
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-accent);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  max-width: 92%;
  text-align: center;
  opacity: 1;
}
.screens-hint {
  text-align: center;
  margin-top: var(--space-md);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ===== How it works refresh ===== */
.how-2026 {
  padding: var(--space-3xl) 0;
}
.how-2026 h2 {
  text-align: center;
  max-width: 18ch;
  margin: 0 auto var(--space-2xl);
}
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  position: relative;
}
.how-step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
}
.how-step .num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.how-step img {
  width: 140px;
  height: 140px;
  object-fit: contain;
}
.how-step h3 {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}
.how-step p {
  font-size: 0.98rem;
  max-width: 28ch;
}
.how-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 16.67%;
  right: 16.67%;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    var(--color-primary-deep) 0 6px,
    transparent 6px 14px);
  opacity: 0.5;
  z-index: -1;
}

/* ===== Science (refresh existing) ===== */
.science-2026 {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-alt);
  position: relative;
  overflow: hidden;
}
.science-2026 h2 {
  text-align: center;
  max-width: 24ch;
  margin: 0 auto var(--space-2xl);
}
.science-cards-2026 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.science-card-2026 {
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(143, 166, 224, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.science-card-2026:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.science-card-2026 .counter {
  display: inline-block;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-xs);
  /* Lock digit widths so the text doesn't jitter as the count animates */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  min-width: 4ch;
  text-align: center;
  /* Reserve space so the card height doesn't change during the count */
  min-height: 1em;
}
.science-card-2026 .counter-suffix {
  font-size: 0.6em;
  color: var(--color-primary-deep);
  margin-left: 2px;
}
/* Word hook — same bold treatment as .counter but sized for short phrases */
.science-card-2026 .stat-word {
  display: inline-block;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  line-height: 1.05;
  margin-bottom: var(--space-xs);
  text-align: center;
  min-height: 1em;
}
.science-card-2026 h4 {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  margin-bottom: var(--space-xxs);
}
.science-card-2026 p {
  font-size: 0.82rem;
  color: var(--color-text-light);
}

/* ===== Pull-quote block ===== */
.quote-band {
  padding: clamp(96px, 14vh, 160px) 0;
  background: #FAFBFC;
  position: relative;
  overflow: hidden;
}
.quote-band .container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
}
.quote-band blockquote {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--color-accent);
  max-width: 22ch;
}
.quote-band blockquote::before {
  content: '"';
  font-size: 3em;
  line-height: 0.3;
  color: var(--color-primary-deep);
  display: block;
  margin-bottom: var(--space-sm);
}
.quote-band img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 18px 36px rgba(14, 20, 40, 0.15));
}

/* ===== Crosslink cards (SEO bridge) ===== */
.crosslink-section {
  padding: var(--space-3xl) 0;
}
.crosslink-section h2 {
  text-align: center;
  margin: 0 auto var(--space-2xl);
}
.crosslink-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.crosslink-card {
  display: block;
  padding: var(--space-xl);
  background: #fff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(143, 166, 224, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.crosslink-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-primary-deep);
}
.crosslink-card .eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-deep);
  margin-bottom: var(--space-xs);
}
.crosslink-card h3 {
  font-size: clamp(1.4rem, 2vw, 1.75rem);
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  letter-spacing: -0.02em;
}
.crosslink-card p {
  margin-bottom: var(--space-md);
}
.crosslink-card .arrow {
  font-weight: 600;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--color-primary-deep);
  padding-bottom: 4px;
}

/* ===== Nav wordmark ===== */
.nav-brand img.wordmark {
  width: auto;
  height: 28px;
  display: block;
}
.nav-brand .wordmark-fallback { display: none; }
.nav.scrolled.nav--compact {
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ===== Article prose (long-form SEO pages) ===== */
.article-prose {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(96px, 14vh, 140px) var(--space-md) var(--space-3xl);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--color-text);
}
.article-prose h1.h1-editorial {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 100%;
  overflow-wrap: break-word;
}
.article-prose .article-sub {
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  line-height: 1.45;
}
.article-prose h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.025em;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
}
.article-prose h3 {
  font-size: 1.25rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  color: var(--color-accent);
}
.article-prose p { color: var(--color-text); font-size: 1.08rem; margin-bottom: var(--space-md); }
.article-prose ul, .article-prose ol {
  margin-bottom: var(--space-md);
  padding-left: 1.2em;
}
.article-prose ul li { list-style: disc; margin-bottom: var(--space-xs); color: var(--color-text); }
.article-prose ol li { list-style: decimal; margin-bottom: var(--space-md); color: var(--color-text); }
.article-prose strong { color: var(--color-accent); font-weight: 700; }
.article-prose a { color: var(--color-primary-deep); border-bottom: 1.5px solid var(--color-primary-deep); }
.article-prose a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.tldr {
  position: relative;
  margin-bottom: var(--space-2xl);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  background: radial-gradient(135% 130% at 0% 0%, #FFFFFF 0%, #F1F5FF 52%, #E4ECFF 100%);
  border: 1px solid rgba(143, 166, 224, 0.28);
  box-shadow: 0 20px 44px -26px rgba(143, 166, 224, 0.65);
  overflow: hidden;
}
/* Soft cloud-like glow drifting out of the top-right corner */
.tldr::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 225, 255, 0.9) 0%, rgba(214, 225, 255, 0) 70%);
  pointer-events: none;
}
.tldr .tldr-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: var(--space-md);
  padding: 6px 15px;
  background: var(--color-night);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tldr .tldr-label::before {
  content: "✦";
  font-size: 0.78em;
  color: var(--color-primary);
}
.tldr p {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  font-size: 1.22rem;
  line-height: 1.62;
  color: var(--color-accent);
  font-weight: 450;
}
/* Gradient drop cap for an editorial flourish */
.tldr p::first-letter {
  float: left;
  margin: 0.04em 0.1em 0 0;
  font-size: 3.6rem;
  line-height: 0.74;
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 640px) {
  .tldr { padding: var(--space-lg); }
  .tldr p { font-size: 1.1rem; }
  .tldr p::first-letter { font-size: 3rem; }
}
.breadcrumb {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(96px, 14vh, 140px) var(--space-md) 0;
  font-size: 0.85rem;
  color: var(--color-text-light);
}
/* If the breadcrumb has already pushed past the nav, the article shouldn't push again. */
.breadcrumb + .article-prose {
  padding-top: var(--space-lg);
}
.breadcrumb a {
  color: var(--color-primary-deep);
  border-bottom: 1px dotted var(--color-primary-deep);
}
.breadcrumb a:hover { color: var(--color-accent); border-color: var(--color-accent); }
.article-footer-cta {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
}

/* ===== Responsive — bento, screens, science, problem cards ===== */
@media (max-width: 968px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-card--lg { grid-column: span 2; grid-row: span 3; }
  .bento-card--wide { grid-column: span 2; }
  .bento-card--tall { grid-column: span 1; grid-row: span 2; }

  .how-steps {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .how-steps::before { display: none; }

  .science-cards-2026 {
    grid-template-columns: repeat(2, 1fr);
  }

  .quote-band .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .quote-band img {
    margin: 0 auto;
    width: 160px;
    height: 160px;
  }

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

@media (max-width: 480px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .bento-card--lg,
  .bento-card--wide,
  .bento-card--tall,
  .bento-card--square,
  .bento-card--short {
    grid-column: span 1;
    grid-row: span 1;
  }

  .science-cards-2026 {
    grid-template-columns: 1fr;
  }

  .laurel {
    height: 64px;
  }
}

/* ===== Reduced motion guards ===== */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .hero-mascot-2026 { animation: none; transform: none; }
  .hero-2026::before { animation: none; }
  .hero-sky img { transform: none; }
  .bento-card,
  .bento-card:nth-child(n) { transform: none; }
  .science-card-2026,
  .science-card-2026:nth-child(n) { transform: none; }
  .screen-phone:nth-child(odd) .screen-phone-frame,
  .screen-phone:nth-child(even) .screen-phone-frame { transform: none; }
  .twinkle { animation: none; opacity: 0.6; }
  .footer-mascot { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   Whimsical-restrained utilities & new sections (2026 v2)
   ========================================================= */

/* --- Animations --- */
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-2.5deg); }
  60% { transform: rotate(2deg); }
  80% { transform: rotate(-1deg); }
}
@keyframes slow-rotate {
  from { transform: translateX(-50%) rotate(0); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
@keyframes twinkle-pop {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* --- Section numbers (Roamy 01 / 02 / 03) --- */
.section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--num-badge-size);
  height: var(--num-badge-size);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-warm-yellow);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sticker-sm);
  flex: 0 0 auto;
}

/* --- Sticker / squiggle utilities --- */
.sticker {
  display: inline-block;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 14px 22px;
  box-shadow: var(--shadow-sticker);
  transform: rotate(var(--tilt-1));
}
.sticker--right { transform: rotate(var(--tilt-2)); }
.sticker--flat  { transform: none; }
.squiggle-under {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.squiggle-under::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: var(--squiggle-primary) repeat-x center / 120px 12px;
  pointer-events: none;
}

/* --- Inline twinkles (sky sparkles) --- */
.twinkle {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--twinkle-svg) no-repeat center / contain;
  filter: drop-shadow(0 2px 6px rgba(255, 229, 160, 0.7));
  opacity: 0;
  pointer-events: none;
}
.is-twinkling .twinkle { animation: twinkle-pop 3.2s ease-in-out infinite; }
.is-twinkling .twinkle:nth-of-type(1) { animation-delay: 0s; }
.is-twinkling .twinkle:nth-of-type(2) { animation-delay: 0.8s; }
.is-twinkling .twinkle:nth-of-type(3) { animation-delay: 1.6s; }
.is-twinkling .twinkle:nth-of-type(4) { animation-delay: 2.4s; }

/* --- Name-band "a name" highlight — elegant lavender pill --- */
.name-band h2 .ribbon-text {
  position: relative;
  display: inline-block;
  padding: 0.06em 0.45em;
  margin: 0 0.08em;
  color: var(--color-accent);
  background: rgba(214, 225, 255, 0.95);
  border-radius: 16px;
  text-shadow: none;
  white-space: nowrap;
}

/* --- "A night with Cloody" numbered ladder --- */
.night-with-cloody {
  padding: var(--space-3xl) 0;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}
.night-with-cloody h2 {
  text-align: center;
  max-width: 18ch;
  margin: 0 auto var(--space-2xl);
}
.night-ladder {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 760px;
  margin: 0 auto;
}
.night-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: #fff;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sticker-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.night-step:nth-child(1) { margin-left: 0;    transform: rotate(var(--tilt-1)); }
.night-step:nth-child(2) { margin-left: 8%;   transform: rotate(var(--tilt-2)); }
.night-step:nth-child(3) { margin-left: 16%;  transform: rotate(var(--tilt-3)); }
.night-step:nth-child(4) { margin-left: 24%;  transform: rotate(var(--tilt-2)); }
.night-step:hover {
  transform: rotate(0) translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.night-step .time {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--color-primary-deep);
  letter-spacing: -0.01em;
  min-width: 64px;
}
.night-step .copy {
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.45;
}

/* --- Quiet testimonials (sticker pull-quotes) --- */
.quiet-testimonials {
  padding: var(--space-3xl) 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(214, 225, 255, 0.6), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(255, 244, 214, 0.5), transparent 60%),
    var(--color-bg);
}
.quiet-testimonials h2 {
  text-align: center;
  max-width: 20ch;
  margin: 0 auto var(--space-2xl);
}
.quiet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
.quiet-card {
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sticker);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.quiet-card:nth-child(1) { transform: rotate(var(--tilt-1)); }
.quiet-card:nth-child(2) { transform: rotate(var(--tilt-2)) translateY(14px); }
.quiet-card:nth-child(3) { transform: rotate(var(--tilt-3)); }
.quiet-card blockquote {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text);
  font-weight: 500;
}
.quiet-card blockquote::before {
  content: '\201C';
  font-size: 2.4em;
  line-height: 0.2;
  color: var(--color-primary-deep);
  display: block;
  margin-bottom: var(--space-xs);
}
.quiet-card cite {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--color-text-light);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Hand-drawn quote marks for pull-quote band --- */
.quote-band blockquote { position: relative; }

/* (Crosslink stays with default flat card styling — see earlier .crosslink-card rules) */

/* --- Footer drifting mascot --- */
.footer { position: relative; overflow: hidden; }
.footer-mascot {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 240px;
  height: 240px;
  object-fit: contain;
  opacity: 0.10;
  pointer-events: none;
  animation: drift 9s ease-in-out infinite;
  filter: brightness(2) saturate(0.4);
}

/* --- Scaled-down sky-fade page header (used on non-home pages) --- */
.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(140px, 22vh, 220px) 0 clamp(48px, 8vh, 96px);
  text-align: center;
  background: var(--color-bg);
}
.page-header .hero-sky { height: 100%; }
.page-header h1 {
  position: relative;
  z-index: 1;
  max-width: 22ch;
  margin: 0 auto var(--space-sm);
  letter-spacing: -0.025em;
  color: var(--color-accent);
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.6);
}
.page-header .dek {
  position: relative;
  z-index: 1;
  max-width: 56ch;
  margin: 0 auto;
  color: var(--color-accent);
  opacity: 0.78;
  font-size: 1.1rem;
}
.page-header .back-pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-md);
  padding: 8px 16px;
  background: #fff;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  box-shadow: var(--shadow-sticker-sm);
  transform: rotate(var(--tilt-2));
}
.page-header .back-pill:hover {
  transform: rotate(0) translateY(-2px);
}

/* Thin variant — used on SEO guide pages where the H1 stays in the article */
.page-header--thin {
  padding: clamp(96px, 14vh, 140px) 0 var(--space-md);
}
.page-header--thin .back-pill {
  margin-bottom: 0;
}

/* When breadcrumb sits inside an article page using .page-header */
.page-header + .breadcrumb,
.page-header--thin + .breadcrumb {
  padding-top: var(--space-md);
}
.page-header--thin + .breadcrumb + .article-prose {
  padding-top: var(--space-md);
}

/* --- Responsive overrides for new sections --- */
@media (max-width: 968px) {
  .bento-card,
  .bento-card:nth-child(n) { transform: none; }
  .quiet-grid { grid-template-columns: 1fr; }
  .quiet-card,
  .quiet-card:nth-child(n) { transform: none; }
  .night-step,
  .night-step:nth-child(n) { margin-left: 0; transform: none; }
  .science-card-2026,
  .science-card-2026:nth-child(n) { transform: none; }
  .crosslink-card,
  .crosslink-card:nth-child(n) { transform: none; }
  .screen-caption { font-size: 0.85rem; padding: 8px 14px; }
}
@media (max-width: 480px) {
  .footer-mascot { width: 180px; height: 180px; bottom: -30px; right: -30px; }
  .section-num { width: 44px; height: 44px; font-size: 0.95rem; }
}