/* ============================================
   BABLIO LANDING PAGE
   Cradle Clay Design System — Neo-Pastel
   ============================================ */

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

*:focus-visible {
  outline: 2px solid var(--color-neo-blue-ink);
  outline-offset: 4px;
  border-radius: 2px;
}

html {
  -webkit-text-size-adjust: 100%;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

/* === DESIGN TOKENS === */
:root {
  /* Colors — Cradle Clay Neo-Pastel */
  --color-surface: #FCF9F3;
  --color-neo-blue: #8AA5FF;
  --color-neo-purple: #F4C0FF;
  --color-neo-yellow: #FFE48A;
  --color-neo-cream: #F8F6F2;
  --color-neo-blue-ink: #3A56AB;
  --color-neo-purple-ink: #8935A5;
  --color-text-dark: #1C1C18;
  --color-text-muted: #434842;
  --color-white: #FFFFFF;
  --color-neo-green: #A8D8B9;
  --color-warm-pink: #FFB8D0;

  /* Hero Gradient */
  --gradient-hero: linear-gradient(135deg, #F1E6FA 0%, #F8F6F2 54%, #F7E7BE 100%);
  --gradient-warm: linear-gradient(135deg, #FFF8ED 0%, #FCF9F3 50%, #F1E6FA 100%);

  /* Spacing — 4pt base system */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --space-6xl: 160px;

  /* Typography */
  --font-display: 'Baloo 2', cursive;
  --font-heading: 'Quicksand', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;

  /* Type Scale — fluid headings, fixed body */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.75vw, 2.25rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-4xl: clamp(2.5rem, 2rem + 4vw, 4.5rem);
  --text-hero: clamp(3.5rem, 2.5rem + 6.5vw, 6.5rem);

  /* Motion */
  --ease-out-quart: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-expo: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 150ms;
  --duration-medium: 200ms;
  --duration-slow: 500ms;
  --duration-entrance: 700ms;

  /* Shapes */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;
  --radius-section-lg: clamp(36px, 6vw, 88px);
  --radius-section-sm: clamp(22px, 4.5vw, 64px);
  --section-curve-overlap: clamp(12px, 3vw, 32px);

  /* Section surfaces for curved architecture */
  --color-waitlist-surface: #D4E0FF;
  --color-waitlist-depth: #BECEFF;
  --color-footer-surface: #C5E2D2;
  --color-footer-depth: #A8CFB6;

  /* Shadows — subtle and warm */
  --shadow-sm: 0 1px 3px rgba(28, 28, 24, 0.04), 0 1px 2px rgba(28, 28, 24, 0.06);
  --shadow-md: 0 4px 12px rgba(28, 28, 24, 0.06), 0 2px 4px rgba(28, 28, 24, 0.04);
  --shadow-lg: 0 8px 24px rgba(28, 28, 24, 0.08), 0 4px 8px rgba(28, 28, 24, 0.04);
  --shadow-xl: 0 16px 48px rgba(28, 28, 24, 0.1), 0 8px 16px rgba(28, 28, 24, 0.06);
  --shadow-glow-blue: 0 4px 24px rgba(138, 165, 255, 0.3);
}

/* === TYPOGRAPHY === */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-dark);
  background-color: var(--color-surface);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Subtle Noise Texture Overlay */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.035;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  line-height: 1.15;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
}

h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-3xl);
  letter-spacing: -0.3px;
}

h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
}

p {
  text-wrap: pretty;
  max-width: 65ch;
}

a {
  color: var(--color-neo-blue-ink);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-quart);
}

a:hover {
  color: var(--color-neo-purple-ink);
}

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

/* Honeypot field — pushed off-screen rather than display:none, which bots detect
   and skip. Real users, screen readers (aria-hidden) and password managers
   (tabindex=-1, autocomplete=off) never reach it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 1000;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-neo-blue);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: top var(--duration-medium) var(--ease-out-quart);
}

.skip-link:focus {
  top: var(--space-md);
  color: var(--color-white);
}

/* === COMPONENT: BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  padding: var(--space-md) var(--space-xl);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration-medium) var(--ease-out-quart);
  text-decoration: none;
  line-height: 1.4;
  min-height: 52px;
  position: relative;
}

.btn-primary {
  background: var(--color-neo-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-md), var(--shadow-glow-blue);
}

/* Island Button Icon Wrapper */
.btn-inner-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -8px;
  transition: transform var(--duration-medium) var(--ease-out-quart);
}

.btn-primary:focus-visible {
  outline: 3px solid var(--color-neo-blue);
  outline-offset: 3px;
}

.btn-primary:active {
  transform: scale(0.97) translateY(0) !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.btn-primary.loading {
  pointer-events: none;
  opacity: 0.8;
}

/* === NAVIGATION === */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-sm) var(--space-lg);
  background: rgba(252, 249, 243, 0.82);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(28, 28, 24, 0.06);
  transform: translateY(-100%);
  transition: transform var(--duration-medium) var(--ease-out-quart);
}

.navbar.visible {
  transform: translateY(0);
}

.navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--color-text-dark);
}

.navbar-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
}

.navbar-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  transform: translateY(1px);
  background-image: linear-gradient(110deg, #7B96EE 0%, #D07AED 50%, #EED270 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.navbar .btn {
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-lg);
  min-height: 40px;
}

/* ============================================
   SECTION: HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: var(--space-4xl) var(--space-lg) var(--space-6xl);
  background: var(--gradient-hero);
  overflow: hidden;
}

/* Atmospheric floating blobs (Optimized for scrolling performance) */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
  /* Hardware acceleration */
}

.hero-blob-1 {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle at center, rgba(138, 165, 255, 0.3) 0%, rgba(138, 165, 255, 0) 70%);
  top: -10%;
  right: -10%;
  animation: float-1 20s ease-in-out infinite alternate;
}

.hero-blob-2 {
  width: 580px;
  height: 580px;
  background: radial-gradient(circle at center, rgba(244, 192, 255, 0.35) 0%, rgba(244, 192, 255, 0) 70%);
  bottom: -10%;
  left: -15%;
  animation: float-2 25s ease-in-out infinite alternate;
}

.hero-blob-3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle at center, rgba(255, 228, 138, 0.4) 0%, rgba(255, 228, 138, 0) 70%);
  top: 35%;
  right: 10%;
  animation: float-3 18s ease-in-out infinite alternate;
}

.hero-blob-4 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle at center, rgba(255, 184, 208, 0.3) 0%, rgba(255, 184, 208, 0) 70%);
  top: 15%;
  left: 5%;
  animation: float-4 22s ease-in-out infinite alternate;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: var(--space-4xl);
  align-items: center;
}

.hero-content-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-lg);
  max-width: 720px;
}

/* === RIGHT COLUMN & DEVICE MOCKUP === */
.hero-content-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
  isolation: isolate;
}

.hero-device-wrapper {
  position: relative;
  z-index: 2;
  width: min(340px, 74vw);
  height: auto;
  transform: rotate(3deg);
  animation: floatDevice 4.5s ease-in-out infinite;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  filter: drop-shadow(0 40px 80px rgba(28, 28, 24, 0.18));
}

/* Surgically expand the hover hit-area beyond the image bounds */
.hero-device-wrapper::after {
  content: "";
  position: absolute;
  inset: -80px;
  /* Extends exactly like the green box in the reference image */
  z-index: 10;
}

.hero-phone-image,
.hero-phone-overlay {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: high-quality;
  -webkit-font-smoothing: subpixel-antialiased;
}

.hero-phone-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-expo);
  pointer-events: none;
  /* Multiple overlapping radial gradients mapped to CSS variables for the trailing blobs */
  mask-image:
    radial-gradient(circle at var(--x0, 50%) var(--y0, 50%), black 0%, black 15%, transparent 35%),
    radial-gradient(circle at var(--x1, 50%) var(--y1, 50%), rgba(0, 0, 0, 0.6) 0%, transparent 25%),
    radial-gradient(circle at var(--x2, 50%) var(--y2, 50%), rgba(0, 0, 0, 0.3) 0%, transparent 15%);
  -webkit-mask-image:
    radial-gradient(circle at var(--x0, 50%) var(--y0, 50%), black 0%, black 15%, transparent 35%),
    radial-gradient(circle at var(--x1, 50%) var(--y1, 50%), rgba(0, 0, 0, 0.6) 0%, transparent 25%),
    radial-gradient(circle at var(--x2, 50%) var(--y2, 50%), rgba(0, 0, 0, 0.3) 0%, transparent 15%);
}

.hero-device-wrapper:hover .hero-phone-overlay {
  opacity: 1;
}

/* Disable hover reveal entirely on touch screens */
@media (hover: none),
(pointer: coarse) {
  .hero-phone-overlay {
    display: none !important;
  }
}

/* Floating Cards outside the phone */
.hero-float-card {
  position: absolute;
  z-index: 1;
  /* Push behind the device for 3D depth */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  gap: 12px;
  align-items: center;
  will-change: transform;
}

.hero-float-card-1 {
  top: 15%;
  left: -60px;
  /* Pull further out so it peeks from behind */
  animation: floatCard 5s ease-in-out infinite;
}

.hero-float-card-2 {
  bottom: 25%;
  right: -80px;
  /* Pull further out so it peeks from behind */
  animation: floatCard 6s ease-in-out infinite 1s;
  /* offset delay */
}

.hero-float-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Soft ambient glow behind the icon — mirrors section-2 feature cards */
.hero-float-icon::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.65), transparent 70%);
  filter: blur(10px);
  z-index: -1;
  animation: icon-orb-drift 8s ease-in-out infinite;
}

.hero-float-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-float-text {
  display: flex;
  flex-direction: column;
}

.hero-float-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.hero-float-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-top: 2px;
}

@keyframes floatDevice {

  0%,
  100% {
    transform: rotate(3deg) translateY(0);
  }

  50% {
    transform: rotate(3deg) translateY(-15px);
  }
}

@keyframes floatCard {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.hero-logo {
  width: 108px;
  height: 108px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  object-fit: cover;
  animation: logo-entrance var(--duration-entrance) var(--ease-out-expo) both;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(28, 28, 24, 0.05);
  border: 1px solid rgba(28, 28, 24, 0.1);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--color-text-muted);
  animation: fade-up 900ms var(--ease-out-expo) 100ms both;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10b981;
  position: relative;
}

.status-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid #10b981;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

.hero-title {
  display: flex;
  align-items: baseline;
  gap: 0.02em;
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
  padding: 0;
  cursor: default;
  /* Apply stronger negative margin to perfectly align the left edge of 'B' to the axis */
  margin-left: -11px;
}

.hero-letter {
  font-size: clamp(5.4rem, 15.6vw, 13.2rem);
  letter-spacing: -4px;
  line-height: 0.95;
  display: inline-block;
  will-change: transform, opacity;
  /* Exit transition: smooth 600ms float down */
  transition: color 0.5s ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Use fade-in (opacity only) so we don't lock the transform property! */
  animation: fade-in 600ms var(--ease-out-expo) both;

  /* Apply the gradient to EACH letter */
  background-image: linear-gradient(110deg,
      #7B96EE 0%,
      #D07AED 50%,
      #EED270 100%);
  background-size: 500% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Entrance transition: fast 200ms pop up */
.hero-letter:hover {
  transition: color 0.2s ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base stagger for organic rhythm and perfectly mapping the gradient across the word! */
.hero-letter:nth-child(1) {
  transform: translateY(0px);
  background-position: 0% center;
  animation-delay: 200ms;
}

.hero-letter:nth-child(2) {
  transform: translateY(-4px);
  background-position: 20% center;
  animation-delay: 260ms;
}

.hero-letter:nth-child(3) {
  transform: translateY(2px);
  background-position: 40% center;
  animation-delay: 320ms;
}

.hero-letter:nth-child(4) {
  transform: translateY(-6px);
  background-position: 60% center;
  animation-delay: 380ms;
}

.hero-letter:nth-child(5) {
  transform: translateY(0px);
  background-position: 80% center;
  animation-delay: 440ms;
}

.hero-letter:nth-child(6) {
  transform: translateY(-2px);
  background-position: 100% center;
  animation-delay: 500ms;
  /* No trailing letter-spacing on the last glyph: -4px would shrink the 'o'
     span past its ink, and since the gradient is background-clipped to text,
     the overflow ink renders unpainted (transparent) — looks cut on the right.
     padding-right gives the gradient box a little headroom for the round ink. */
  letter-spacing: 0;
  padding-right: 4px;
}

/* Interactive hover pop with beautiful pastel solid colors */
.hero-letter:nth-child(1):hover {
  color: #5C7CFA;
  transform: translateY(-12px) scale(1.08);
}

.hero-letter:nth-child(2):hover {
  color: #F06595;
  transform: translateY(-16px) scale(1.08);
}

.hero-letter:nth-child(3):hover {
  color: #FF922B;
  transform: translateY(-10px) scale(1.08);
}

.hero-letter:nth-child(4):hover {
  color: #22B8CF;
  transform: translateY(-18px) scale(1.08);
}

.hero-letter:nth-child(5):hover {
  color: #BE4BDB;
  transform: translateY(-12px) scale(1.08);
}

.hero-letter:nth-child(6):hover {
  color: #51CF66;
  transform: translateY(-14px) scale(1.08);
}

.hero-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.3;
  color: var(--color-text-dark);
  max-width: 600px;
  animation: fade-up 900ms var(--ease-out-expo) 350ms both;
}

/* Rotating word — Apple-style blur-in conveyor, width locked to longest word */
.hero-flip {
  display: inline-grid;
  vertical-align: bottom;
  /* Pin each word to the track start so it hugs "days," with a single space.
     The track stays max-content-wide (longest word) so rotation never jitters.
     Without this, mobile's centered text-align centers the shorter active word
     inside the wide track, opening a gap after "days,". */
  justify-items: start;
  /* Space before the word comes from the markup space, which collapses at
     the start of a wrapped line so the word aligns flush-left on line 2. */
}

.hero-flip-word {
  grid-area: 1 / 1;
  color: var(--flip-color);
  white-space: nowrap;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.42em);
  transition:
    opacity 0.7s var(--ease-out-expo),
    filter 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
  will-change: opacity, filter, transform;
}

.hero-flip-word.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.hero-flip-word.is-leaving {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-0.42em);
  /* Exit is quicker than entry (~75%) so the new word leads */
  transition-duration: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-flip-word {
    filter: none;
    transform: none;
    transition: opacity 0.3s linear;
  }
  .hero-flip-word.is-leaving {
    filter: none;
    transform: none;
  }
}

.hero-sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 480px;
  animation: fade-up 900ms var(--ease-out-expo) 500ms both;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Corrected to flush left */
  gap: var(--space-md);
  animation: fade-up 900ms var(--ease-out-expo) 650ms both;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border: 1px solid rgba(28, 28, 24, 0.06);
}

.hero-badge .material-symbols-rounded {
  font-size: 18px;
  color: var(--color-neo-blue-ink);
}

/* ============================================
   SECTION: VALUE PROPOSITION
   ============================================ */
.value-prop {
  padding: var(--space-7xl) var(--space-lg);
  /* Even more breathing room */
  text-align: center;
  background: transparent;
  position: relative;
  z-index: 1;
}

/* Colorize: Atmospheric physical glow orb */
.value-prop-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 60vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 122, 142, 0.15) 0%, rgba(220, 169, 49, 0.1) 40%, transparent 70%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

.value-prop-inner {
  /* Layout: Let the heading take full width, restrict paragraph inside */
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.value-prop-heading {
  margin-bottom: var(--space-3xl);
  /* Spatial Design: Generous gap */
  color: var(--color-text-dark);
  /* Colorize: Deep slate */

  /* Bolder: Extreme dramatic scale jump */
  font-size: clamp(2.5rem, 4rem + 2vw, 5.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;

  /* Typography: Flawless line breaks */
  text-wrap: balance;
}

/* Delight: The semantic twist on 'different' */
.delight-different {
  font-style: italic;
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--color-warm-pink);
  display: inline-block;
  transform: rotate(-2deg);
  /* Subtle twist */
  margin: 0 4px;
}

.value-prop-text {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-muted);

  /* Layout & Typography: Perfect optical measure */
  margin: 0 auto;
  max-width: 48ch;
  text-wrap: pretty;
}

/* ============================================
   EDITORIAL ORGANIC ATMOSPHERE (SECTIONS 2-4)
   ============================================ */
.continuous-atmosphere-wrapper {
  position: relative;
  width: 100%;
  background-color: var(--color-surface);

  /* Native Fusion: Pull the wrapper UP into the hero section, and use an alpha mask to softly fade it in. 
     This allows the hero's gradient to naturally bleed into the wrapper's canvas particles. */
  margin-top: -15vh;
  padding-top: 15vh;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 15vh);
  mask-image: linear-gradient(to bottom, transparent 0, black 15vh);

  /* Ambient Mesh Lighting: Faint, massive glows to break up the flat cream background */
  background-image:
    radial-gradient(circle at 15% 20%, rgba(220, 169, 49, 0.035) 0%, transparent 40%),
    /* Neo Yellow */
    radial-gradient(circle at 85% 55%, rgba(138, 165, 255, 0.035) 0%, transparent 40%),
    /* Neo Blue */
    radial-gradient(circle at 50% 85%, rgba(226, 122, 142, 0.035) 0%, transparent 40%);
  /* Warm Pink */

  overflow: hidden;
}

.organic-atmosphere {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}

/* ============================================
   PREMIUM AURORA MESH ATMOSPHERE
   ============================================ */

/* 1. Aurora Mesh Sky */
.aurora-mesh {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.4;
  animation: aurora-breathe 40s ease-in-out infinite alternate;
  mix-blend-mode: multiply;
  transform-origin: center;
}

.mesh-1 {
  top: -10%;
  left: -20%;
  width: 120vw;
  height: 120vh;
  background: radial-gradient(circle, var(--color-warm-pink) 0%, transparent 70%);
  animation-duration: 45s;
  opacity: 0.25;
  /* Lighter pink per user request */
}

.mesh-2 {
  top: 30%;
  right: -30%;
  width: 140vw;
  height: 140vh;
  background: radial-gradient(circle, var(--color-neo-yellow) 0%, transparent 60%);
  animation-duration: 60s;
  animation-delay: -15s;
  opacity: 0.25;
  /* Lighter yellow per user request */
}

.mesh-3 {
  bottom: -20%;
  left: 10%;
  width: 130vw;
  height: 130vh;
  background: radial-gradient(circle, var(--color-neo-blue) 0%, transparent 70%);
  animation-duration: 55s;
  animation-delay: -30s;
}

.mesh-4 {
  top: 55%;
  left: -25%;
  width: 110vw;
  height: 110vh;
  background: radial-gradient(circle, #D0A2F7 0%, transparent 55%);
  /* Soft Lilac/Purple */
  animation-duration: 50s;
  animation-delay: -10s;
  opacity: 0.15;
}

.mesh-5 {
  top: 85%;
  right: -20%;
  width: 120vw;
  height: 120vh;
  background: radial-gradient(circle, #B28DFF 0%, transparent 60%);
  /* Distinct Pastel Purple */
  animation-duration: 65s;
  animation-delay: -25s;
  opacity: 0.18;
}

@keyframes aurora-breathe {
  0% {
    transform: scale(1) translate(0, 0);
  }

  50% {
    transform: scale(1.1) translate(3%, 4%);
  }

  100% {
    transform: scale(0.95) translate(-2%, -3%);
  }
}

/* 2. Photographic Sunbeam */
.sunbeam-cone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 40%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* 3. Cinematic Depth of Field Canvas */
.nursery-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  /* Above the aurora mesh, below content */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .organic-atmosphere {
    display: none;
  }
}

/* Ensure content stays above the atmosphere */
.value-prop-inner {
  position: relative;
  z-index: 1;
}

/* ============================================
   NARRATIVE CONNECTORS
   ============================================ */
.narrative-connector {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Instead of adding massive new space, we pull it into existing section padding */
  margin: -var(--space-2xl) 0;
  z-index: 2;
  pointer-events: none;
}

.connector-hitbox {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 80px;
  transform: translateY(-50%);
  z-index: 10;
  cursor: grab;
  /* Tactile, physical cursor */
  pointer-events: auto;
  /* Override parent's pointer-events: none */
}

.connector-hitbox:hover {
  height: 250px;
  /* Expand generously so fast sweeps don't lose hover state */
}

.connector-hitbox:active {
  cursor: grabbing;
}

.connector-svg {
  width: 100%;
  max-width: 550px;
  height: auto;
  overflow: visible;
  will-change: transform, filter;
  /* Performance hint for physics */
}

.connector-path {
  fill: none;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-width 0.3s ease-out, filter 0.3s ease-out;
  /* Smooth hover */
}

/* Premium micro-interaction: glow and thicken on hover */
.connector-hitbox:hover+.connector-svg .connector-path {
  stroke-width: 4px;
  filter: drop-shadow(0 4px 12px currentColor);
}

.connector-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.5px;
  fill: currentColor;
  opacity: 0;
}

.connector-emoji {
  font-size: 20px;
  opacity: 0;
  letter-spacing: 0.6em;
  /* Optical, mathematical alignment */
  filter: saturate(0.85);
  /* Slightly darker/more saturated than before */
}

.color-warm-pink {
  stroke: var(--color-warm-pink);
  color: var(--color-warm-pink);
}

.color-neo-purple {
  stroke: var(--color-neo-purple);
  color: var(--color-neo-purple);
}

/* Specifically for connectors, use a darker golden yellow for better text readability */
.color-neo-yellow {
  stroke: #DCA931;
  color: #DCA931;
}

.color-neo-blue {
  stroke: var(--color-neo-blue);
  color: var(--color-neo-blue);
}

.narrative-connector.in-view .connector-path {
  animation: draw-connector 3s ease-out forwards;
}

.narrative-connector.in-view .connector-text {
  animation: fade-connector 2s ease-out 1.5s forwards;
}

.narrative-connector.in-view .connector-emoji {
  animation: fade-connector-emoji 2s ease-out 1.5s forwards;
}

@keyframes draw-connector {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-connector {
  to {
    opacity: 0.8;
  }
}

@keyframes fade-connector-emoji {
  to {
    opacity: 0.9;
  }
}

/* ============================================
   SECTION: FEATURE HIGHLIGHTS
   ============================================ */
.features {
  padding: var(--space-4xl) var(--space-lg);
  background: transparent;
  position: relative;
  z-index: 1;
}

.features-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.features-header {
  text-align: center;
  margin-bottom: var(--space-4xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.features-eyebrow {
  color: var(--color-neo-blue);
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
}

.features-headline {
  color: #083D26;
  /* Massive dark green legacy headline */
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-weight: 900;
  font-family: var(--font-display);
  max-width: 800px;
}

/* Hand-Drawn Animated Heart Underline */
.hand-drawn-wrapper {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.hand-drawn-svg {
  position: absolute;
  left: 0;
  bottom: -0.1em;
  /* Anchors the underline just below the text */
  width: 100%;
  height: auto;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}

.drawn-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

.features-headline.in-view .drawn-path {
  animation: draw-line-heart 7s ease-out forwards;
  animation-delay: 0.5s;
  /* Wait for scroll-reveal fade up */
}

@keyframes draw-line-heart {
  0% {
    stroke-dashoffset: 400;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  perspective: 1000px;
}

.feature-card {
  background: rgba(255, 255, 255, 0.7);
  transform-style: preserve-3d;
  will-change: transform;
  border: 1px solid rgba(8, 61, 38, 0.06);
  box-shadow: 0 2px 20px -4px rgba(8, 61, 38, 0.06);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-out-quart);
  position: relative;
  z-index: 1;
}

@keyframes icon-orb-drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(4px, -4px) scale(1.08);
  }

  66% {
    transform: translate(-4px, 2px) scale(0.96);
  }
}

.feature-icon::before {
  content: '';
  position: absolute;
  inset: -24px;
  /* Expands outwards to create a large ambient glow */
  border-radius: 50%;
  filter: blur(14px);
  z-index: -1;
  transition: transform 0.4s var(--ease-out-quart), opacity 0.4s var(--ease-out-quart);
  animation: icon-orb-drift 8s ease-in-out infinite;
}

/* Fluid Ambient Colors inheriting from inline style */
.feature-card .feature-icon::before {
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.7), transparent 70%);
}

.feature-icon img,
.feature-icon .material-symbols-rounded {
  font-size: 28px;
  color: var(--color-white);
  transition: transform 0.4s var(--ease-out-quart);
}

.feature-icon-blue {
  background: var(--color-neo-blue);
}

.feature-icon-purple {
  background: var(--color-neo-purple);
}

.feature-icon-yellow {
  background: var(--color-neo-yellow);
}

.feature-icon-green {
  background: var(--color-neo-green);
}

.feature-icon-yellow .material-symbols-rounded {
  color: #7A5C10;
}

.feature-icon-purple .material-symbols-rounded {
  color: var(--color-neo-purple-ink);
}

.feature-icon-green .material-symbols-rounded {
  color: #2D6A4F;
}

.feature-card h3 {
  color: #083D26;
  font-size: var(--text-xl);
  font-weight: 800;
  margin-top: var(--space-sm);
}

.feature-card p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}

.highlight-keyword {
  position: relative;
  display: inline-block;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  z-index: 1;
}

.highlight-keyword::before {
  content: '';
  position: absolute;
  inset: -2px -6px;
  background: rgba(var(--glow-rgb), 0.15);
  border-radius: 6px;
  z-index: -1;
}

.highlight-keyword::after {
  content: '';
  position: absolute;
  inset: -6px -12px;
  background: radial-gradient(ellipse, rgba(var(--glow-rgb), 0.4), transparent 70%);
  filter: blur(6px);
  z-index: -2;
  animation: text-orb-drift 4s ease-in-out infinite;
}

@keyframes text-orb-drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }

  50% {
    transform: translate(2px, -2px) scale(1.1);
    opacity: 1;
  }
}

/* ============================================
   SECTION: FEATURE SHOWCASE CAROUSEL
   ============================================ */
.showcase {
  position: relative;
  z-index: 1;
  padding: var(--space-6xl) 0;
  background: transparent;
  contain: paint layout;
}

.showcase-header {
  text-align: center;
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-3xl);
}

.showcase-header h2 {
  color: #083D26;
}

.showcase-header p {
  margin: var(--space-sm) auto 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-style: italic;
}

/* ============================================
   VIDEO WRAPPER
   ============================================ */
.showcase-video-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) 0;
  /* Padding for mobile when there is no aspect ratio */
}

.showcase-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
}

/* Ensure content sits on top of video */
.showcase-carousel,
.showcase-indicators {
  position: relative;
  z-index: 1;
}

/* Enforce perfect 16:9 on Desktop/Tablet */
@media (min-width: 900px) {
  .showcase-video-wrapper {
    aspect-ratio: 16 / 9;
    padding: 0;
    /* Let flex centering perfectly align the carousel vertically */
  }
}

/* Hide video completely on Mobile and tight viewports */
@media (max-width: 899px) {
  .showcase-bg-video {
    display: none !important;
  }
}

@keyframes infiniteMarquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - (var(--space-lg) / 2)));
  }
}

.showcase-carousel {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-xs) 0 var(--space-lg) 0;
  width: max-content;
  animation: infiniteMarquee 40s linear infinite;
}

/* Pause the infinite scroll when the user hovers over a card to read it */
.showcase-carousel:hover {
  animation-play-state: paused;
}

/* The Structural Wrapper handles the physical layout and the liquid glass */
.showcase-card-glass-wrapper {
  flex: 0 0 344px;
  /* 320px card + 24px padding */
  padding: 12px;
  border-radius: calc(var(--radius-lg) + 12px);
  scroll-snap-align: center;
  transition: transform var(--duration-medium) var(--ease-out-quart);

  /* GPU Anti-Aliasing Lock to prevent fuzzy text snapping during scale */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1);
  will-change: transform;

  /* Create stacking context for pseudo-elements */
  position: relative;
  z-index: 1;

  /* Base shadow from React code */
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Layer 1: The SVG Distortion Engine */
.showcase-card-glass-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  filter: url(#glass-distortion);
  isolation: isolate;

  /* GPU Acceleration to stop scroll jitter */
  transform: translateZ(0);
  will-change: transform, backdrop-filter, filter;
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease-in-out, visibility 0s 0s;
}

/* Scroll Hook: Power down the heavy math during active scrolling */
body.is-scrolling .showcase-card-glass-wrapper::before {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 200ms ease-out, visibility 0s 200ms !important;
}

/* Layer 2: Frosting and Highlights */
.showcase-card-glass-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;

  background: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
}

/* The inner card is strictly for content */
.showcase-card {
  width: 100%;
  height: 100%;
  min-height: 430px;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  position: relative;
  /* Card sits above the glass layers */
  z-index: 2;
  /* Force sharp text rendering during parent transform */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Card's own inner highlight and tiny rim */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

.showcase-card-1 {
  background: linear-gradient(160deg, #E8EDFF 0%, #C8D6FF 100%);
}

.showcase-card-2 {
  background: linear-gradient(160deg, #F9E6FF 0%, #EABCFF 100%);
}

.showcase-card-3 {
  background: linear-gradient(160deg, #FFF5D6 0%, #FFE48A 100%);
}

.showcase-card-4 {
  background: linear-gradient(160deg, #E3F5EA 0%, #A8D8B9 100%);
}

.showcase-card-5 {
  background: linear-gradient(160deg, #FFE8ED 0%, #FFB8C9 100%);
}

.showcase-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}

.showcase-card-icon .material-symbols-rounded {
  font-size: 28px;
  color: var(--color-text-dark);
}

/* Abstract visual elements inside cards */
.showcase-visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.showcase-bubble {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  max-width: 85%;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.showcase-bubble.right {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.75);
}

.showcase-dot-row {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-xs) 0;
}

.showcase-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

.showcase-dot.filled {
  background: rgba(255, 255, 255, 0.9);
}

.showcase-line {
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  flex: 1;
}

.showcase-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.showcase-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.showcase-check .material-symbols-rounded {
  font-size: 14px;
}

.showcase-card-content {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.showcase-card h3 {
  font-size: var(--text-xl);
  color: var(--color-text-dark);
  margin-bottom: var(--space-2xs);
}

.showcase-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Carousel scroll indicators */
.showcase-indicators {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  padding: 0 var(--space-lg);
}

.showcase-dot-indicator {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(28, 28, 24, 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--duration-medium) var(--ease-out-quart);
}

.showcase-dot-indicator:focus-visible {
  outline: 2px solid var(--color-neo-blue);
  outline-offset: 3px;
}

.showcase-dot-indicator.active {
  background: var(--color-neo-blue);
  width: 28px;
}

/* ============================================
   SECTION: 1000-DAY STORY
   ============================================ */
.story {
  padding: var(--space-6xl) var(--space-lg);
  background: transparent;
  text-align: center;
  position: relative;
  z-index: 1;
  /* Stay above canvas */
}

.story-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(10rem, 8rem + 30vw, 45rem);
  /* Immersive expansive scale */
  color: rgba(226, 122, 142, 0.12);
  /* Warm Pink tint, 12% prominent */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% + var(--mouse-x, 0px)), calc(-50% + var(--mouse-y, 0px)));
  z-index: 0;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  user-select: none;
  letter-spacing: -5px;
  /* Hardware acceleration for JS parallax */
  will-change: transform;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story-number {
      animation: parallax-number linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 100%;
    }
  }
}

.story-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.story h2 {
  margin-bottom: var(--space-xl);
  /* 4pt grid spacing */
  text-wrap: balance;
  /* Typography: balanced heading */
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.story-text {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--color-text);
  /* Richer hierarchy than muted */
  margin: 0 auto;
  max-width: 55ch;
  /* Typography: optimal measure */
  text-wrap: pretty;
  /* Typography: eliminate orphans */
}

/* ============================================
   INTERACTION: STORY TOKENS
   ============================================ */
.story-token {
  position: relative;
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.03);
  /* Subtle resting state */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
  font-weight: 500;
}

/* Interaction Design: Hover states with semantic brand colors */
.story-token:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.token-brain:hover {
  background: rgba(226, 122, 142, 0.12);
  /* Warm Pink */
  color: #c7566e;
  /* Darker for contrast */
}

.token-immune:hover {
  background: rgba(220, 169, 49, 0.15);
  /* Neo Yellow */
  color: #b58821;
}

.token-health:hover {
  background: rgba(138, 165, 255, 0.12);
  /* Neo Blue */
  color: #5d7fe6;
}

/* ============================================
   SECTION: WAITLIST CTA
   ============================================ */
.waitlist {
  padding: var(--space-4xl) var(--space-lg);

  /* Native Fusion: Overlap the Waitlist into the Globe section, fading its top natively */
  margin-top: -10vh;
  padding-top: calc(var(--space-4xl) + 8vh);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 8vh);
  mask-image: linear-gradient(to bottom, transparent 0, black 8vh);

  background: linear-gradient(180deg, var(--color-waitlist-surface) 0%, var(--color-waitlist-depth) 100%);
  position: relative;
  z-index: 2;
  border-bottom-left-radius: var(--radius-section-lg);
  border-bottom-right-radius: var(--radius-section-lg);
  overflow: hidden;
}

.waitlist-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl, 40px);
  align-items: center;
}

.waitlist-content {
  text-align: left;
}

.waitlist h2 {
  margin-bottom: var(--space-xs);
}

.waitlist-sub {
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.waitlist-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px var(--space-sm);
  margin-bottom: var(--space-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.waitlist-form label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-dark);
}

.waitlist-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(28, 28, 24, 0.1);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--color-white);
  color: var(--color-text-dark);
  transition: border-color var(--duration-fast) var(--ease-out-quart),
    box-shadow var(--duration-fast) var(--ease-out-quart),
    background-color var(--duration-fast) var(--ease-out-quart);
  min-height: 44px;
}

textarea.waitlist-input {
  min-height: 60px;
  resize: none;
  padding-top: var(--space-sm);
  border-radius: var(--radius-md);
}

.waitlist-input:focus {
  outline: none;
  border-color: var(--color-neo-blue);
  box-shadow: 0 0 0 4px rgba(138, 165, 255, 0.15);
}

/* Validation styling per polish.md. Background stays opaque — a translucent
   tint here would let the blue section show through the input. */
.waitlist-input:not(:placeholder-shown):user-invalid {
  border-color: #A4243B;
  background-color: #FFF4F5;
}

.waitlist-input::placeholder {
  color: #6B6E68;
}

.waitlist-form .btn.full-width {
  grid-column: 1 / -1;
  width: 100%;
}

.waitlist-visual {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  /* Perfect square */
  margin: 0 auto;
  border-radius: var(--radius-3xl, 32px);
  /* The glow */
}

/* Live beautiful ambient background */
.waitlist-visual::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: conic-gradient(from 0deg at 50% 50%,
      rgba(138, 165, 255, 0.9) 0deg,
      rgba(255, 184, 193, 0.9) 120deg,
      rgba(255, 230, 160, 0.9) 240deg,
      rgba(138, 165, 255, 0.9) 360deg);
  filter: blur(60px);
  border-radius: 50%;
  z-index: -1;
  animation: ambient-spin 10s linear infinite;
  opacity: 1;
}

@keyframes ambient-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.waitlist-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-3xl, 32px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
}

.waitlist-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-sm);
  font-size: 13px;
  color: var(--color-text-dark);
  font-weight: 500;
  opacity: 0.85;
}

.waitlist-trust span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.waitlist-trust .material-symbols-rounded {
  font-size: 18px;
  color: #4A6BFF;
  /* A stronger, deeper blue that contrasts well on the light blue bg */
}

/* Form states */
.waitlist-message {
  display: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

.waitlist-success {
  background: rgba(168, 216, 185, 0.25);
  color: #2D6A4F;
}

.waitlist-error {
  background: rgba(255, 184, 193, 0.25);
  color: #A4243B;
}

.waitlist-message.show {
  display: block;
  animation: success-pop 600ms var(--ease-out-expo) both;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(190px, 19vw, 280px);
  padding: calc(var(--space-xl) + var(--section-curve-overlap)) var(--space-lg) max(var(--space-lg), env(safe-area-inset-bottom));
  margin-top: calc(-1 * var(--section-curve-overlap));
  /* Bablio palette fallback — also the wing colour revealed at ultra-wide where painting ends */
  background: var(--gradient-hero);
  border-top: none;
  border-top-left-radius: var(--radius-section-sm);
  border-top-right-radius: var(--radius-section-sm);
  box-shadow: 0 -8px 18px rgba(28, 28, 24, 0.05);
  overflow: hidden;
}

/* Ambient YouTube-style colour spill: blurred copy that fills the full width
   on ultra-wide monitors where the capped painting can't reach the edges. */
.footer-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(48px) saturate(1.15);
  transform: scale(1.15);
  /* Dissolve to the Bablio-palette background at the far left/right edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%, black 78%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 22%, black 78%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

/* The painting itself, capped so it isn't grossly over-cropped on huge screens.
   No CSS transform here — GSAP owns the transform for the scroll drift. */
.footer-painting {
  position: absolute;
  top: -6%;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 100%;
  max-width: 1920px;
  height: 112%;
  object-fit: cover;
  /* On wide/ultra-wide screens the crop is width-bound, so bias it to the meadow:
     keeps the parent + child (Footer 1) in frame and text over a darker band. */
  object-position: center bottom;
  /* Fixed-px fade melts the painting edge into the ambient/background at ultra-wide.
     At ≤1920px the painting fills the footer so these 80px dissolve into the same
     scene behind — invisible. Above 1920px they melt into the Bablio palette wings. */
  -webkit-mask-image: linear-gradient(to right, transparent 0px, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0px, black 80px, black calc(100% - 80px), transparent 100%);
  z-index: 1;
  will-change: transform;
}

/* Bottom-weighted scrim so the copyright + columns stay legible over the meadow
   while the painting still reads brightly up top. */
.footer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 86%;
  background: linear-gradient(180deg, rgba(28, 28, 24, 0) 0%, rgba(28, 28, 24, 0.32) 38%, rgba(28, 28, 24, 0.60) 100%);
  z-index: 2;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 3;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl) var(--space-2xl);
}

/* Copyright at the bottom-left, like before. */
.footer-copy {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(28, 28, 24, 0.6), 0 1px 8px rgba(28, 28, 24, 0.5), 0 2px 22px rgba(28, 28, 24, 0.38);
  margin: 0;
}

/* Organized link columns on the right: Support + Legal. */
.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl) var(--space-3xl);
}

.footer-col-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 3px rgba(28, 28, 24, 0.5);
  margin: 0 0 var(--space-sm);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-col a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  width: fit-content;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(28, 28, 24, 0.5);
  transition: color var(--duration-medium) var(--ease-out-quart);
}

.footer-mail svg {
  flex-shrink: 0;
  opacity: 0.85;
}

/* A hairline underline that wipes in on hover — the one footer micro-interaction. */
.footer-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-medium) var(--ease-out-quart);
}

@media (hover: hover) {
  .footer-col a:hover {
    color: var(--color-white);
  }

  .footer-col a:hover::after {
    transform: scaleX(1);
  }
}

.footer-col a:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */
@keyframes float-1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(40px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-30px, 30px) scale(0.95);
  }

  100% {
    transform: translate(20px, -20px) scale(1.05);
  }
}

@keyframes float-2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(-40px, -30px) scale(1.05);
  }

  66% {
    transform: translate(50px, 20px) scale(0.9);
  }

  100% {
    transform: translate(-20px, 40px) scale(1.1);
  }
}

@keyframes float-3 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, 40px) scale(0.95);
  }

  66% {
    transform: translate(-40px, -20px) scale(1.1);
  }

  100% {
    transform: translate(10px, -30px) scale(1);
  }
}

@keyframes float-4 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(-20px, 30px) scale(1.05);
  }

  66% {
    transform: translate(30px, -40px) scale(0.95);
  }

  100% {
    transform: translate(-30px, -10px) scale(1.1);
  }
}

@keyframes logo-entrance {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes success-pop {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }

  50% {
    transform: scale(1.02) translateY(0);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes parallax-number {
  0% {
    transform: translate(calc(-50% + var(--mouse-x, 0px)), calc(-20% + var(--mouse-y, 0px)));
  }

  100% {
    transform: translate(calc(-50% + var(--mouse-x, 0px)), calc(-80% + var(--mouse-y, 0px)));
  }
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  /* Much softer, less dramatic jump */
  transition: opacity 1.2s cubic-bezier(0.2, 0, 0.1, 1),
    transform 1.2s cubic-bezier(0.2, 0, 0.1, 1);
  will-change: opacity, transform;
  /* Hardware acceleration hint */
}

.scroll-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for children */
.scroll-reveal[data-delay="1"] {
  transition-delay: 60ms;
}

.scroll-reveal[data-delay="2"] {
  transition-delay: 120ms;
}

.scroll-reveal[data-delay="3"] {
  transition-delay: 180ms;
}

.scroll-reveal[data-delay="4"] {
  transition-delay: 240ms;
}

.scroll-reveal[data-delay="5"] {
  transition-delay: 300ms;
}

/* ============================================
   RESPONSIVE DESIGN — Mobile First
   ============================================ */

/* Tablet & below */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-4xl);
  }

  .hero-content-left {
    align-items: center;
    text-align: center;
    margin: 0 auto;
  }

  .hero-content-right {
    min-height: 500px;
  }

  .hero-float-card {
    display: none;
    /* Hide floating cards on tablet/mobile to save space */
  }
}

@media (max-width: 768px) {
  :root {
    --radius-section-lg: clamp(28px, 9vw, 56px);
    --radius-section-sm: clamp(20px, 7vw, 40px);
    --section-curve-overlap: clamp(10px, 4vw, 22px);
  }

  .hero {
    padding: var(--space-3xl) var(--space-md);
    min-height: 90vh;
    min-height: 90dvh;
  }

  .hero-logo {
    width: 88px;
    height: 88px;
  }

  .value-prop,
  .features,
  .story,
  .waitlist {
    padding: var(--space-3xl) var(--space-md);
  }

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

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

  .feature-card:nth-child(even) {
    margin-top: var(--space-4xl);
  }

  .showcase-card {
    flex: 0 0 280px;
    min-height: 400px;
  }

  .waitlist-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .waitlist-content {
    text-align: center;
  }

  .waitlist-form {
    grid-template-columns: 1fr;
  }

  .waitlist-trust {
    justify-content: center;
  }

  .waitlist-visual {
    min-height: 300px;
    margin-top: var(--space-xl);
  }

  .footer-inner {
    align-items: flex-start;
    gap: var(--space-lg) var(--space-2xl);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .hero {
    padding: var(--space-2xl) var(--space-md);
  }

  .hero-logo {
    width: 76px;
    height: 76px;
    border-radius: var(--radius-md);
  }

  .hero-blob-1 {
    width: 280px;
    height: 280px;
  }

  .hero-blob-2 {
    width: 220px;
    height: 220px;
  }

  .hero-blob-3 {
    width: 180px;
    height: 180px;
  }

  .hero-blob-4 {
    width: 150px;
    height: 150px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  /* Single column: drop the 2-column masonry stagger so gaps stay even */
  .feature-card:nth-child(even) {
    margin-top: 0;
  }

  .feature-card {
    padding: var(--space-lg);
  }

  .showcase-card {
    flex: 0 0 260px;
    min-height: 380px;
    padding: var(--space-lg);
  }

  .story-number {
    font-size: clamp(4rem, 20vw, 8rem);
  }

  .waitlist-trust {
    flex-direction: column;
    align-items: center;
  }
}

/* Large screens */
@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl) var(--space-xl);
    max-width: 1060px;
    /* Constrain the 2-column grid for better line-lengths */
    margin: 0 auto;
  }

  .showcase-card {
    flex: 0 0 340px;
    min-height: 450px;
    scroll-snap-align: start;
  }
}

/* Hover-capable devices only */
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--color-neo-blue-ink);
    transform: scale(0.98) translateY(-1px);
    box-shadow: var(--shadow-lg), 0 8px 32px rgba(138, 165, 255, 0.4);
    color: var(--color-white);
  }

  .btn-primary:hover .btn-inner-icon {
    transform: translate(4px, -1px) scale(1.05);
  }

  /* Consolidated Dynamic Hover Physics */
  .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px -8px rgba(var(--glow-rgb), 0.25),
      0 4px 12px rgba(8, 61, 38, 0.06);
  }

  /* Click Press Physics */
  .feature-card:active {
    transform: translateY(-2px) scale(0.98);
    transition-duration: 0.1s;
  }

  /* Micro-interactions: Icon Hover Physics */
  .feature-card:hover .feature-icon img,
  .feature-card:hover .feature-icon .material-symbols-rounded {
    transform: scale(1.15) rotate(8deg);
  }

  .showcase-card-glass-wrapper:hover {
    transform: translateZ(0) scale(1.02);
  }
}

/* Touch devices */
@media (pointer: coarse) {
  .btn {
    min-height: 52px;
  }

  .waitlist-input {
    min-height: 52px;
  }
}

/* ============================================
   SECTION 5.5: GLOBE
   ============================================ */
.globe {
  position: relative;
  width: 100%;
  /* Fixed invalid variable that was breaking the padding rule entirely. 
     Decreased top spacing by 1/3 to tighten the visual rhythm per user request. */
  padding: var(--space-4xl) var(--space-lg) calc(var(--space-2xl) * 2);
  background: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 1;
  /* Stay above canvas */
}

.globe-inner {
  width: 100%;
  max-width: var(--container-width);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.globe-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #2A1A2E;
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.globe-smiley {
  color: #FF6B6B;
}

.globe-subtext {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  color: var(--color-text-muted);
  max-width: 600px;
  margin-bottom: var(--space-xs);
  line-height: 1.5;
  font-style: italic;
}

.globe-scene {
  width: 100%;
  max-width: 1300px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .globe-scene {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }
}

.globe-canvas-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1;
  margin: 0 auto;
  /* Add a subtle drop shadow to the wrapper to give the globe depth */
  filter: drop-shadow(0 20px 40px rgba(137, 53, 165, 0.08));
}

/* Atmospheric Testimonials Layer */
.globe-testimonials {
  position: relative;
  height: 600px;
  display: flex;
  gap: 1.5rem;
  overflow: hidden;
  /* Top and bottom vertical fade mask so cards gently drift in and out */
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.testimonial-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.testimonial-track {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  will-change: transform;
}

/* The vertical scroll only runs while the section is on screen.
   Chromium suspends offscreen CSS animations and sometimes never resumes them, so
   applying `animation` unconditionally left these tracks permanently frozen after
   scrolling down from the top. JS adds `.is-animating` while the section is in view
   (see initTestimonialsScroll), so the animation is applied fresh on screen instead. */

/* Horizontal Fade / Atmosphere styling per column */
.testimonial-column.col-1 {
  opacity: 0.45;
  filter: blur(0.5px);
}

/* Speeds tuned for the ~20-testimonial set (columns hold 7 / 7 / 6 cards, so the
   durations account for the differing card counts to keep the steps even). The
   gradient mirrors the globe spin: col-3 (right) fastest, col-2 (middle) medium,
   col-1 (left) slowest. Roughly 0.10 / 0.14 / 0.20 cards per second. */
.globe-testimonials.is-animating .testimonial-column.col-1 .testimonial-track {
  animation: scroll-y 70s linear infinite;
}

.testimonial-column.col-2 {
  opacity: 0.75;
  filter: blur(0px);
  margin-top: var(--space-2xl);
  /* Staggered layout aligned to token */
}

.globe-testimonials.is-animating .testimonial-column.col-2 .testimonial-track {
  animation: scroll-y 50s linear infinite;
}

.testimonial-column.col-3 {
  opacity: 0.95;
  margin-top: var(--space-4xl);
  /* Staggered layout aligned to token */
}

.globe-testimonials.is-animating .testimonial-column.col-3 .testimonial-track {
  animation: scroll-y 30s linear infinite;
}

@keyframes scroll-y {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-50%);
  }
}

/* Testimonial Card Styling matching Bablio brand */
.testimonial-card {
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--duration-medium) var(--ease-out-expo), box-shadow var(--duration-medium) var(--ease-out-expo);
}

@media (hover: hover) {
  .testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(138, 165, 255, 0.08);
  }
}

.testimonial-card p {
  font-family: var(--font-body);
  font-size: var(--text-base, 1rem);
  color: var(--color-text-body);
  line-height: 1.5;
  margin: 0;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-sm);
}

.testimonial-info {
  display: flex;
  flex-direction: column;
}

.testimonial-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-dark);
}

.testimonial-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.globe-backdrop-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border-radius: 50%;
  /* Soft colored glow behind the white globe to make it pop */
  background: radial-gradient(circle, var(--color-neo-purple) 0%, transparent 70%);
  opacity: 0.6;
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

#cobe-globe {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
  z-index: 1;
}

.globe-marker-container {
  position: absolute;
  /* CSS Anchor Positioning syntax */
  /* Lifts the label/sticker up by 1.8% of the globe height off its marker */
  bottom: calc(anchor(top) + 1.8%);
  left: anchor(center);
  transform: translate(-50%, -10px);
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.8s ease, filter 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.globe-label-content {
  /* Upgraded Glassmorphism with dynamic tint */
  background: var(--marker-tint, rgba(252, 249, 243, 0.85));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: var(--space-xs) var(--space-md);

  /* Typography */
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-dark);
  white-space: nowrap;

  /* Shadow */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(138, 165, 255, 0.12);

  /* Smooth internal transition for content swapping */
  transition: opacity 0.6s ease-in-out, transform 0.6s var(--ease-out-expo);
  opacity: 1;
  transform: scale(1) translateY(0);
}

.globe-label-content.fading-out {
  opacity: 0;
  transform: scale(0.9) translateY(4px);
}

.globe-sticker-content {
  font-size: 28px;
  /* Size of the emoji */
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Apply the die-cut white outline from the SVG filter, and a gentle shadow for depth */
  filter: url(#sticker-outline) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
  transition: opacity 0.6s ease-in-out, transform 0.6s var(--ease-out-expo);
  opacity: 1;
  transform: scale(1) translateY(0);
}

.globe-sticker-content.fading-out {
  opacity: 0;
  transform: scale(0.9) translateY(4px);
}

/* Polaroid — a warm family snapshot that develops at a marker. CSS owns the
   frame so source art stays just the photo; tilt is a per-marker scrapbook lean. */
.globe-polaroid-content {
  background: #fffdf9;
  /* Classic polaroid: even top/sides, deeper bottom lip for the caption */
  padding: 7px 7px 0;
  border-radius: 4px;
  box-shadow: 0 14px 32px rgba(80, 50, 100, 0.18), 0 3px 10px rgba(0, 0, 0, 0.08);
  transform: rotate(var(--tilt, -4deg)) scale(1);
  transition: opacity 0.6s ease-in-out, transform 0.6s var(--ease-out-expo);
  opacity: 1;
}

.globe-polaroid-img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 2px;
}

.globe-polaroid-caption {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--color-text-dark) 70%, transparent);
  padding: 5px 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.globe-polaroid-content.fading-out {
  opacity: 0;
  /* Keep the tilt; only scale + fade so it reads as the same card leaving */
  transform: rotate(var(--tilt, -4deg)) scale(0.92);
}

@media (max-width: 1024px) {
  .testimonial-column.col-3 {
    display: none;
    /* Hide 3rd column on tablet for better readability */
  }
}

@media (max-width: 768px) {
  .globe {
    padding-top: 100px;
  }

  .globe-canvas-wrapper {
    max-width: 300px;
  }

  .globe-label-content {
    font-size: var(--text-xs);
    padding: var(--space-2xs) var(--space-sm);
  }

  .globe-polaroid-content {
    padding: 5px 5px 0;
  }

  .globe-polaroid-img {
    width: 54px;
    height: 54px;
  }

  .globe-polaroid-caption {
    font-size: 10px;
    padding: 4px 4px 5px;
  }

  /* On mobile show only the sharpest column (col-3), not the blurred col-1 */
  .testimonial-column.col-1,
  .testimonial-column.col-2 {
    display: none;
  }

  .testimonial-column.col-3 {
    display: flex;
    /* Override the tablet hide above */
    margin-top: 0;
    /* Drop the staggered offset when it's the only column */
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-blob {
    animation: none !important;
  }

  .hero-logo,
  .hero-title,
  .hero-tagline,
  .hero-sub,
  .hero-cta {
    animation: fade-in 200ms ease-out both !important;
  }

  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease-out;
  }

  .btn,
  .feature-card,
  .showcase-card,
  .showcase-dot-indicator {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   DESIGNER BUTTERFLY CURSOR
   ============================================ */
.butterfly-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0; /* Fades in via JS once active */
  will-change: transform, opacity;
  /* Position/transform is driven entirely by GSAP — only fade opacity via CSS */
  transition: opacity 0.6s var(--ease-out-quart);
}

.butterfly-cursor.active {
  opacity: 1;
}
/* Dissolve/bloom over interactive areas is handled in JS (GSAP) on the inner
   .butterfly-svg, so it never clobbers the container's follow transform. */

.butterfly-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Soft, dreamy warm-rose lift off the page */
  filter: drop-shadow(0 4px 16px rgba(231, 132, 178, 0.42));
}

/* Steady ambient aura — gentle, slow breath so it feels alive without distracting */
.bfly-aura {
  animation: bfly-aura-breath 8s ease-in-out infinite;
  transform-origin: 30px 30px;
}
@keyframes bfly-aura-breath {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

.bfly-halo {
  animation: bfly-pulse 6s ease-in-out infinite;
  transform-origin: 30px 30px;
}

.bfly-body {
  animation: bfly-breathe 4.5s ease-in-out infinite;
  transform-origin: 30px 31px;
}

.bfly-wing {
  /* Slightly richer so the deeper colors read */
  opacity: 0.88;
  transform-origin: 30px 29px; /* Hinge on the central spine */
  /* Slower, softer, dreamier flap */
  animation: bfly-flap 0.75s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
}

/* Symmetric flap: gentle foreshorten toward the spine + soft inward rotate */
@keyframes bfly-flap {
  0%   { transform: scaleX(1)    rotate(0deg); }
  100% { transform: scaleX(0.52) rotate(5deg); }
}
.bfly-wing-right {
  animation-name: bfly-flap-r;
}
@keyframes bfly-flap-r {
  0%   { transform: scaleX(1)    rotate(0deg); }
  100% { transform: scaleX(0.52) rotate(-5deg); }
}

@keyframes bfly-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.45); opacity: 0.5; }
}

@keyframes bfly-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.05); }
}

/* Magical stardust particles dropped along the flight path */
.bfly-dust {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  will-change: transform, opacity;
}

/* Hide entirely on devices that don't support hover or have reduced motion */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .butterfly-cursor {
    display: none !important;
  }
}

/* ============================================
   LEGAL PAGES — Privacy Policy / Terms of Service
   Scoped under [data-page="legal"]; the landing page is untouched.
   Reuses the shared design tokens, chrome, and atmosphere.
   ============================================ */

[data-page="legal"] {
  background: var(--color-surface);
  scroll-padding-top: 84px;
}

/* The shared navbar has no hero to reveal it here, so pin it open. */
[data-page="legal"] .navbar {
  transform: translateY(0);
}

/* The legal pages reuse the landing's .continuous-atmosphere-wrapper, but with no
   hero above to fuse into — so drop the negative-margin/mask hero-fusion hack. */
[data-page="legal"] .continuous-atmosphere-wrapper {
  margin-top: 0;
  padding-top: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Absolute (not fixed) so it spans the full reading column and the aurora mesh +
   canvas bokeh drift in parallax as the content scrolls over it — like the landing. */
[data-page="legal"] .mesh-2,
[data-page="faq"] .mesh-2 {
  opacity: 0.15;
}

[data-page="legal"] .legal-atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}

.legal-main {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: calc(var(--space-3xl) + 56px) var(--space-lg) var(--space-4xl);
}

/* ── Hero ── */
.legal-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-neo-blue-ink);
  text-decoration: none;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  transition: background var(--duration-medium) var(--ease-out-quart),
    transform var(--duration-medium) var(--ease-out-quart);
}

.legal-back:hover {
  background: rgba(138, 165, 255, 0.14);
  transform: translateX(-3px);
}

.legal-back:focus-visible {
  outline: 2px solid var(--color-neo-blue-ink);
  outline-offset: 2px;
}

.legal-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: 1.08;
  margin: var(--space-lg) 0 var(--space-sm);
  background-image: linear-gradient(110deg, #7B96EE 0%, #D07AED 50%, #EED270 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.legal-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-white);
  border: 1px solid rgba(28, 28, 24, 0.08);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
}

.legal-meta .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-warm-pink);
}

/* ── Early-access banner ── */
.legal-banner {
  max-width: 820px;
  margin: 0 auto var(--space-2xl);
  background: rgba(138, 165, 255, 0.10);
  border: 1px solid rgba(138, 165, 255, 0.28);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.legal-banner p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-dark);
  margin: 0;
}

.legal-banner p + p {
  margin-top: var(--space-sm);
}

/* ── Reading column (centered; navigation lives in the dynamic island) ── */
.legal-layout {
  display: flex;
  justify-content: center;
}

.legal-content {
  width: 100%;
  max-width: 720px;
  font-family: var(--font-body);
}

.legal-section {
  scroll-margin-top: 96px;
}

.legal-section + .legal-section {
  margin-top: var(--space-2xl);
}

.legal-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.2;
  color: var(--color-text-dark);
  margin: 0 0 var(--space-md);
}

.legal-h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--color-text-dark);
  /* Sub-headings (2a, 2b…) sit indented to the body's left edge so they read as part of
     the indented content block under the main heading, with a clear gap above. */
  margin: var(--space-2xl) 0 var(--space-sm);
  padding-left: var(--space-lg);
}

.legal-content p,
.legal-content li {
  font-size: var(--text-base);
  line-height: 1.72;
  color: var(--color-text-muted);
}

.legal-content p {
  margin: 0 0 var(--space-md);
}

/* First-level section paragraphs share the list's 24px left edge, so paragraph-led
   sections (e.g. "12. Indemnification") align under the heading exactly like the
   list-led ones (e.g. "11. ..."). Scoped to direct children so callouts (aside > p)
   keep their own layout. */
.legal-section > p {
  padding-left: var(--space-lg);
}

.legal-content strong {
  color: var(--color-text-dark);
  font-weight: 700;
}

.legal-content ul {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.legal-content li::marker {
  color: var(--color-neo-blue);
}

.legal-content a {
  color: var(--color-neo-blue-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(58, 86, 171, 0.4);
  transition: text-decoration-color var(--duration-medium) var(--ease-out-quart);
}

.legal-content a:hover {
  text-decoration-color: var(--color-neo-blue-ink);
}

.legal-content a:focus-visible {
  outline: 2px solid var(--color-neo-blue-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Callout (the markdown blockquotes) — full border, no side-stripe ── */
.legal-callout {
  background: rgba(255, 184, 208, 0.14);
  border: 1px solid rgba(255, 184, 208, 0.45);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
  box-shadow: var(--shadow-sm);
}

.legal-callout p {
  margin: 0;
  color: var(--color-text-dark);
  font-size: calc(var(--text-base) - 0.5px);
  line-height: 1.62;
}

.legal-callout p + p {
  margin-top: var(--space-xs);
}

/* ── Table (legal basis) ── */
.legal-table-wrap {
  /* Left-indented to share the body content's edge (24px). */
  margin: var(--space-md) 0 var(--space-md) var(--space-lg);
  border: 1px solid rgba(28, 28, 24, 0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  line-height: 1.5;
  vertical-align: top;
  color: var(--color-text-muted);
}

.legal-table thead th {
  background: var(--color-neo-cream);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text-dark);
}

.legal-table tbody tr + tr td {
  border-top: 1px solid rgba(28, 28, 24, 0.08);
}

.legal-table td strong {
  color: var(--color-text-dark);
}

/* ── Cross-link to the sibling document ── */
/* Leave room at the bottom so the floating island never hides the last lines. */
[data-page="legal"] .footer {
  position: relative;
  z-index: 1;
}

/* ── Responsive: tighten the reading page on small screens ── */
@media (max-width: 860px) {
  .legal-main {
    padding-top: calc(var(--space-2xl) + 56px);
  }

  .legal-content {
    max-width: none;
  }
}

/* ============================================
   DYNAMIC ISLAND — table of contents
   A floating pill at the bottom that morphs open into the
   full heading list. Vanilla reimagining in Bablio's palette.
   ============================================ */

.toc-island-root {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}

/* Soft backdrop when expanded */
.toc-island-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 24, 0.18);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out-quart);
}

.toc-island-root[data-expanded="true"] .toc-island-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* The morphing container */
.toc-island {
  --island-w: 300px;
  --island-h: 54px;
  --island-r: 27px;

  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 34px);
  width: var(--island-w);
  height: var(--island-h);
  border-radius: var(--island-r);
  transform: translateX(-50%);
  /* entrance */
  animation: toc-island-rise 0.7s var(--ease-out-quart) both;

  background: rgba(252, 249, 243, 0.82);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: none;
  /* Liquid-glass: specular top highlight + warm depth + watercolor pastel aura (pink/purple/blue).
     box-shadow is used for the aura so it isn't clipped by overflow: hidden. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    var(--shadow-xl),
    0 10px 34px rgba(206, 146, 232, 0.18),
    0 10px 30px rgba(138, 165, 255, 0.14),
    0 6px 22px rgba(238, 127, 166, 0.12);
  overflow: hidden;
  pointer-events: auto;
  /* ponytail: morph animates width/height/radius — fine for one small fixed pill */
  transition:
    width var(--duration-slow) var(--ease-out-quart),
    height var(--duration-slow) var(--ease-out-quart),
    border-radius var(--duration-slow) var(--ease-out-quart),
    box-shadow var(--duration-slow) var(--ease-out-quart),
    opacity var(--duration-slow) var(--ease-out-quart),
    transform var(--duration-slow) var(--ease-out-quart);
  will-change: width, height;
}

/* Gradient hairline border — pseudo + mask-composite so it coexists with backdrop-filter
   (the background-clip border trick fights the blur). Same pink→purple→blue as the dot. */
.toc-island::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(238, 127, 166, 0.55) 0%,
    rgba(206, 146, 232, 0.5) 50%,
    rgba(130, 152, 242, 0.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Collapsed hover: deepen the watercolor aura — feedback without a transform
   (the entrance animation's fill retains the transform, so a :hover transform wouldn't take). */
.toc-island-root[data-expanded="false"] .toc-island:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    var(--shadow-xl),
    0 14px 40px rgba(206, 146, 232, 0.26),
    0 12px 34px rgba(138, 165, 255, 0.2),
    0 8px 26px rgba(238, 127, 166, 0.18);
}

.toc-island-root[data-expanded="true"] .toc-island {
  --island-w: min(360px, calc(100vw - 32px));
  --island-h: min(58vh, 460px);
  --island-r: 26px;
}

@keyframes toc-island-rise {
  from { opacity: 0; transform: translateX(-50%) translateY(60px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Collapsed pill ── */
.toc-island-pill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-md);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  opacity: 1;
  transition: opacity var(--duration-medium) var(--ease-out-quart),
    filter var(--duration-medium) var(--ease-out-quart);
}

.toc-island-root[data-expanded="true"] .toc-island-pill {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
}

.toc-island-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #EE7FA6 0%, #CE92E8 50%, #8298F2 100%);
  box-shadow: 0 0 8px rgba(206, 146, 232, 0.5);
}

.toc-island-active {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.toc-island-active-text {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-dark);
}

/* Progress ring */
.toc-island-progress {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transform: rotate(-90deg);
}

.toc-island-progress .ring-track {
  stroke: rgba(28, 28, 24, 0.12);
}

.toc-island-progress .ring-fill {
  stroke: url(#toc-ring-grad);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.15s ease-out;
}

/* ── Expanded panel ── */
.toc-island-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition: opacity var(--duration-medium) var(--ease-out-quart),
    transform var(--duration-medium) var(--ease-out-quart);
}

.toc-island-root[data-expanded="true"] .toc-island-panel {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition-delay: 0.1s;
}

.toc-island-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
}

.toc-island-head-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.toc-island-close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(28, 28, 24, 0.05);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-medium) var(--ease-out-quart),
    color var(--duration-medium) var(--ease-out-quart),
    transform var(--duration-medium) var(--ease-out-quart);
}

.toc-island-close:hover {
  background: rgba(255, 184, 208, 0.3);
  color: var(--color-text-dark);
  transform: rotate(90deg);
}

.toc-island-close:focus-visible {
  outline: 2px solid var(--color-neo-blue-ink);
  outline-offset: 2px;
}

.toc-island-close svg {
  width: 16px;
  height: 16px;
}

.toc-island-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Scroll-fade: the top/bottom edges dissolve so focused items read crisply
     while items entering/leaving fade out. --fade-top/-bottom (0→1) are ramped
     by scroll position in JS (updateFade), so a fully-scrolled edge stays sharp. */
  --fade-size: 30px;
  --fade-top: 0;
  --fade-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, calc(1 - var(--fade-top))) 0,
    #000 var(--fade-size),
    #000 calc(100% - var(--fade-size)),
    rgba(0, 0, 0, calc(1 - var(--fade-bottom))) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, calc(1 - var(--fade-top))) 0,
    #000 var(--fade-size),
    #000 calc(100% - var(--fade-size)),
    rgba(0, 0, 0, calc(1 - var(--fade-bottom))) 100%);
}

.toc-island-list::-webkit-scrollbar {
  width: 6px;
}

.toc-island-list::-webkit-scrollbar-thumb {
  background: rgba(28, 28, 24, 0.14);
  border-radius: var(--radius-pill);
}

.toc-island-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(67, 72, 66, 0.6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  /* Hidden by default; the panel is invisible while collapsed anyway. Revealed with a
     per-item stagger on expand (--i set in initLegalTOC) for one signature entrance. */
  opacity: 0;
  transform: translateY(10px);
  transition: background var(--duration-medium) var(--ease-out-quart),
    color var(--duration-medium) var(--ease-out-quart),
    opacity 0.4s var(--ease-out-quart),
    transform 0.4s var(--ease-out-quart);
}

.toc-island-root[data-expanded="true"] .toc-island-item {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.08s + var(--i, 0) * 0.035s);
}

.toc-island-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform var(--duration-medium) var(--ease-out-quart);
}

.toc-island-item:hover {
  background: rgba(138, 165, 255, 0.08);
  color: var(--color-text-dark);
}

.toc-island-item:hover .toc-island-item-text {
  transform: translateX(3px);
}

.toc-island-item:focus-visible {
  outline: 2px solid var(--color-neo-blue-ink);
  outline-offset: -1px;
}

.toc-island-item.is-active {
  background: linear-gradient(90deg, rgba(244, 192, 255, 0.18) 0%, rgba(138, 165, 255, 0.16) 100%);
  color: var(--color-neo-blue-ink);
  font-weight: 700;
}

/* sub-heading level */
.toc-island-item[data-level="3"] {
  font-size: calc(var(--text-sm) - 0.5px);
}

.toc-island-item-bullet {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  /* Same gradient as the collapsed pill dot — ties the active marker to the brand through-line. */
  background: linear-gradient(135deg, #EE7FA6 0%, #CE92E8 50%, #8298F2 100%);
  box-shadow: 0 0 8px rgba(206, 146, 232, 0.5);
  transform: scale(0);
  opacity: 0;
  transition: transform var(--duration-medium) var(--ease-out-quart),
    opacity var(--duration-medium) var(--ease-out-quart);
}

.toc-island-item.is-active .toc-island-item-bullet {
  transform: scale(1);
  opacity: 1;
}

/* ── "Return to Bablio" — a dedicated action, set apart from the TOC nav ── */
/* Footer row holding one pill (landing) or two (legal: Return + FAQ). */
.toc-island-foot {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: var(--space-2xs);
  margin: 0 var(--space-md) var(--space-md);
}

/* Two-pill split — Return ~64%, FAQ ~36%. */
.toc-island-foot--split .toc-island-home:first-child { flex: 1.8; }
.toc-island-foot--split .toc-island-home:last-child { flex: 1; }

.toc-island-home {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px var(--space-md);
  border-radius: var(--radius-md, 14px);
  /* A soft brand-gradient pill so it reads as the primary action, not a list row.
     The top hairline (box-shadow) separates it from the scrolling list above. */
  background: linear-gradient(120deg, rgba(238, 127, 166, 0.16) 0%, rgba(206, 146, 232, 0.15) 50%, rgba(130, 152, 242, 0.18) 100%);
  box-shadow:
    0 -1px 0 -0.5px rgba(28, 28, 24, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: var(--color-neo-blue-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  /* Reveal with the panel, just after the list items settle. */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease-out-quart),
    transform 0.4s var(--ease-out-quart),
    box-shadow var(--duration-medium) var(--ease-out-quart),
    background var(--duration-medium) var(--ease-out-quart);
}

.toc-island-root[data-expanded="true"] .toc-island-home {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s;
}

.toc-island-home-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #EE7FA6 0%, #CE92E8 50%, #8298F2 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(206, 146, 232, 0.4);
}

.toc-island-home-icon svg { width: 16px; height: 16px; }

.toc-island-home-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* App logo used as the icon on the legal "Return to Bablio" pill. */
.toc-island-home-logo {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  object-fit: cover;
}

.toc-island-home-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--color-neo-blue-ink);
  opacity: 0.55;
  transform: translateX(0);
  transition: transform var(--duration-medium) var(--ease-out-quart),
    opacity var(--duration-medium) var(--ease-out-quart);
}

.toc-island-home-arrow svg { width: 17px; height: 17px; }

.toc-island-home:hover {
  background: linear-gradient(120deg, rgba(238, 127, 166, 0.26) 0%, rgba(206, 146, 232, 0.24) 50%, rgba(130, 152, 242, 0.28) 100%);
  box-shadow:
    0 -1px 0 -0.5px rgba(28, 28, 24, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 6px 18px rgba(206, 146, 232, 0.22);
}

.toc-island-home:hover .toc-island-home-arrow {
  transform: translateX(4px);
  opacity: 0.9;
}

.toc-island-home:focus-visible {
  outline: 2px solid var(--color-neo-blue-ink);
  outline-offset: 2px;
}

/* ── Gracefully retire the island as the footer arrives — every device/width
   so it never sits over the footer. data-footer is toggled by the observer. */
.toc-island-root[data-footer="true"] .toc-island {
  opacity: 0;
  transform: translateX(-50%) translateY(28px);
  pointer-events: none;
}

/* ── Reduced motion: no morph, no rise, no backdrop blur ── */
@media (prefers-reduced-motion: reduce) {
  .toc-island {
    animation: none;
    transition: none;
  }

  .toc-island-pill,
  .toc-island-panel,
  .toc-island-backdrop {
    transition: none;
  }

  .toc-island-backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* No staggered reveal — items are present immediately. */
  .toc-island-item {
    opacity: 1;
    transform: none;
    transition: background var(--duration-medium) var(--ease-out-quart),
      color var(--duration-medium) var(--ease-out-quart);
  }

  .toc-island-root[data-expanded="true"] .toc-island-item {
    transition-delay: 0s;
  }

  .toc-island-home {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══ Landing collapsed pill: a section glyph that fills as you scroll ═══ */

/* Glyph = gray track (always shown) + gradient fill drawn on scroll, exactly
   like the legal progress ring's track + fill. */
.g-track path { stroke: rgba(66, 60, 78, 0.30); }
.g-fill path {
  stroke: url(#toc-ring-grad);
  stroke-dasharray: 1; /* paired with pathLength="1" so dashoffset 1→0 fills it */
}

.toc-island-glyph {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
}

.toc-glyph-svg {
  width: 25px;
  height: 25px;
  overflow: visible;
  transform-box: fill-box;
  transform-origin: center;
}

.toc-glyph-svg .g-fill { filter: drop-shadow(0 1px 3px rgba(206, 146, 232, 0.45)); }

@media (prefers-reduced-motion: reduce) {
  .g-fill path { stroke-dashoffset: 0 !important; } /* show the glyph filled at rest */
}

/* ============================================
   FAQ PAGE
   Scoped under [data-page="faq"]. Editorial and warm — a calm read,
   not a wall of legal text. Reuses the shared chrome + atmosphere.
   ============================================ */

[data-page="faq"] {
  background: var(--color-surface);
  scroll-padding-top: 88px;
}

/* No hero here to reveal the navbar, so pin it open (like the legal pages). */
[data-page="faq"] .navbar {
  transform: translateY(0);
}

/* Reuse the landing atmosphere wrapper without the hero-fusion mask. */
[data-page="faq"] .continuous-atmosphere-wrapper {
  margin-top: 0;
  padding-top: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Identical to the legal pages' atmosphere — same wrapper, meshes and canvas,
   reused verbatim. Absolute + inset:0 so it spans the reading column. */
/* Identical to the legal pages' atmosphere — same wrapper, meshes and canvas. The
   only FAQ-specific concern is that expanding an answer grows the page; initFAQ()
   freezes this layer's height once at load so the meshes (positioned by PERCENT of
   its height) never reflow when an answer opens. Same look as legal, no stretch. */
[data-page="faq"] .legal-atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}

.faq-main {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: calc(var(--space-3xl) + 56px) var(--space-lg) var(--space-4xl);
}

/* ── Hero: a serif title + lead + search inside a faint graph-paper "grid strip" ── */
.faq-hero {
  margin: var(--space-md) 0 var(--space-2xl);
}

/* The grid-strip panel — rounded, hairline-bordered, sitting on the atmosphere. */
.faq-hero-grid {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(28, 28, 24, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: clamp(30px, 5vw, 60px) clamp(24px, 5vw, 60px);
}

/* Faint square graph-paper grid, dissolving toward the panel edges. */
.faq-hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(28, 28, 24, 0.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(28, 28, 24, 0.05) 0 1px, transparent 1px 34px);
  -webkit-mask-image: radial-gradient(125% 135% at 28% 38%, #000 32%, transparent 100%);
  mask-image: radial-gradient(125% 135% at 28% 38%, #000 32%, transparent 100%);
}

/* Cursor spotlight (rose-gold): the same lattice in a warm rose→gold tint plus a soft
   warm bloom, revealed only through a radius around the pointer (--faq-mx/--faq-my set
   in initFaqGrid). The grid warms where the cursor flows. Fades in/out on enter/leave. */
.faq-hero-grid-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image:
    radial-gradient(circle 200px at var(--faq-mx, 50%) var(--faq-my, 50%), rgba(232, 168, 120, 0.16) 0%, rgba(220, 138, 150, 0.10) 42%, transparent 72%),
    repeating-linear-gradient(0deg, rgba(214, 126, 132, 0.5) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(214, 126, 132, 0.5) 0 1px, transparent 1px 34px);
  -webkit-mask-image: radial-gradient(circle 180px at var(--faq-mx, 50%) var(--faq-my, 50%), #000 0%, transparent 72%);
  mask-image: radial-gradient(circle 180px at var(--faq-mx, 50%) var(--faq-my, 50%), #000 0%, transparent 72%);
  transition: opacity var(--duration-slow) var(--ease-out-quart);
}

.faq-hero-grid.is-spotlight .faq-hero-grid-glow {
  opacity: 1;
}

.faq-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.faq-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: var(--color-text-dark);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

.faq-title em {
  font-style: italic;
  font-weight: 400;
}

.faq-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0 0 var(--space-lg);
}

/* ── Search field (lives inside the hero strip) ── */
.faq-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 360px;
}

.faq-search-icon {
  position: absolute;
  left: 15px;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  opacity: 0.7;
  pointer-events: none;
}

.faq-search input {
  width: 100%;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--color-text-dark);
  padding: 11px 18px 11px 42px;
  /* Plain white field by default (matches the focused/clicked state) with a
     neutral edge — no colour tint in the search bar. */
  border: 1px solid rgba(28, 28, 24, 0.10);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  transition: border-color var(--duration-medium) var(--ease-out-quart),
    box-shadow var(--duration-medium) var(--ease-out-quart),
    background var(--duration-medium) var(--ease-out-quart);
}

.faq-search input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.faq-search input:focus {
  outline: none;
  border-color: var(--color-neo-blue);
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgba(138, 165, 255, 0.18);
}

/* ── Questions, grouped under category subheadings ── */
/* No-JS fallback: a plain two-column grid of the flat list. */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 72px);
}

/* JS-enhanced: initFAQ() wraps items into per-category groups, so the grid
   becomes a plain stack of group sections. */
.faq-grid.is-grouped {
  display: block;
}

.faq-group {
  margin-top: var(--space-2xl);
}

.faq-group:first-child {
  margin-top: var(--space-md);
}

.faq-group-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--color-text-dark);
  margin: 0 0 var(--space-2xs);
}

.faq-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.faq-item {
  border-top: 1px solid rgba(28, 28, 24, 0.12);
  transition: background-color var(--duration-slow) var(--ease-out-quart);
}

/* A whisper of cool tint on the open item, keyed to the blue the question turns. */
.faq-item:not(.is-collapsed) {
  background: linear-gradient(180deg, rgba(138, 165, 255, 0.06) 0%, rgba(138, 165, 255, 0.02) 100%);
}

.faq-q {
  margin: 0;
}

.faq-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: var(--space-lg) var(--space-xs);
}

.faq-q-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: var(--color-text-dark);
  transition: color var(--duration-medium) var(--ease-out-quart);
}

.faq-item:not(.is-collapsed) .faq-q-text {
  color: var(--color-neo-blue-ink);
}

@media (hover: hover) {
  .faq-trigger:hover .faq-q-text,
  .faq-trigger:hover .faq-icon {
    color: var(--color-neo-blue-ink);
  }
}

.faq-trigger:focus-visible {
  outline: 2px solid var(--color-neo-blue-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* The + that morphs to − on open (the vertical bar swings flat and fades). */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  color: var(--color-neo-blue-ink);
  transition: color var(--duration-medium) var(--ease-out-quart);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--duration-slow) var(--ease-out-quart),
    opacity var(--duration-medium) ease;
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item:not(.is-collapsed) .faq-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* The answer: grid-rows 0fr -> 1fr (no max-height jank). Open by default so the
   content is present without JS; initFAQ collapses it as enhancement. */
.faq-a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-out-quart);
}

.faq-item.is-collapsed .faq-a {
  grid-template-rows: 0fr;
}

.faq-a-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-a-inner p {
  margin: 0;
  padding: 0 var(--space-xs) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.72;
  color: var(--color-text-muted);
  transition: opacity var(--duration-medium) ease 0.08s,
    transform var(--duration-slow) var(--ease-out-quart) 0.08s;
}

.faq-item.is-collapsed .faq-a-inner p {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.faq-enhanced .faq-item {
  will-change: opacity, transform;
}

/* ── No search results ── */
.faq-noresults {
  margin-top: var(--space-xl);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.faq-noresults a {
  color: var(--color-neo-blue-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Closing note ── */
.faq-closer {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(28, 28, 24, 0.10);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq-closer-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-text-dark);
  margin: 0;
}

.faq-closer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  width: fit-content;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-neo-blue-ink);
  text-decoration: none;
}

.faq-closer-link svg {
  opacity: 0.85;
  transition: transform var(--duration-medium) var(--ease-out-quart);
}

.faq-closer-link:hover svg {
  transform: translateX(3px);
}

.faq-closer-link:focus-visible {
  outline: 2px solid var(--color-neo-blue-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Prominent "Back to Bablio" button at the foot of the page (reveals on arrival). */
.faq-back-home {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
  padding: 13px 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-neo-blue-ink);
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(58, 86, 171, 0.20);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(28, 28, 24, 0.04);
  transition: background var(--duration-medium) var(--ease-out-quart),
    border-color var(--duration-medium) var(--ease-out-quart),
    box-shadow var(--duration-medium) var(--ease-out-quart),
    transform var(--duration-medium) var(--ease-out-quart);
}

.faq-back-home-arrow {
  transition: transform var(--duration-medium) var(--ease-out-quart);
}

@media (hover: hover) {
  .faq-back-home:hover {
    background: var(--color-white);
    border-color: var(--color-neo-blue);
    box-shadow: 0 8px 22px rgba(138, 165, 255, 0.25), 0 2px 6px rgba(28, 28, 24, 0.05);
    transform: translateY(-2px);
  }

  .faq-back-home:hover .faq-back-home-arrow {
    transform: translateX(-4px);
  }
}

.faq-back-home:focus-visible {
  outline: 2px solid var(--color-neo-blue-ink);
  outline-offset: 3px;
}

/* Foot of the legal pages: the same "Back to Bablio" button as the FAQ, aligned to
   the reading column, revealing on scroll. */
.legal-foot {
  max-width: 720px;
  margin: var(--space-3xl) auto 0;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(28, 28, 24, 0.10);
}

.legal-foot .faq-back-home {
  margin-top: 0;
}

/* ── Responsive ── */
@media (max-width: 760px) {
  .faq-main {
    padding-top: calc(var(--space-2xl) + 56px);
  }

  .faq-search {
    max-width: none;
  }

  /* Single column on small screens. */
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-group-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-a,
  .faq-icon::before,
  .faq-icon::after,
  .faq-a-inner p,
  .faq-item {
    transition: none !important;
    animation: none !important;
  }
}