/* Google Fonts - Inter (sans-serif) + Lora (serif) + Poppins (display) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@400;600;700&family=Poppins:wght@600;700;800&display=swap');

/* ============================================
   DESIGN TOKENS - CORE SCALE (Base Layer)
   ============================================ */
:root {
  /* Spacing Scale - Foundation for all spacing decisions */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 1.5rem; /* 24px */
  --space-md: 2rem; /* 32px */
  --space-lg: 2.5rem; /* 40px */
  --space-xl: 3rem; /* 48px */
  --space-2xl: 4rem; /* 64px - Between related sections */
  --space-3xl: 6rem; /* 96px - Between major narrative groups */
  --space-4xl: 8rem; /* 128px - Extra emphasis (optional) */

  /* Geometry - Consistent shapes and effects */
  --radius-sm: 0.75rem; /* 12px */
  --radius-md: 1rem; /* 16px */
  --radius-lg: 1.25rem; /* 20px */
  --radius-xl: 1.5rem; /* 24px */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  /* Motion - Consistent easing and timing */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* Material Design standard easing */
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce effect */
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.5s;

  /* Grid System - 12 Column Layout (1400px base) */
  --grid-columns: 12;
  --grid-gap: var(--space-md); /* 2rem default gap */

  /* Container System - Hierarchical widths */
  --container-max: 87.5rem;     /* 1400px - 12-column grid base */
  --container-wide: 75rem;      /* 1200px - wide content */
  --container-normal: 68.75rem; /* 1100px - standard content */
  --container-narrow: 56.25rem; /* 900px - narrow content */

  /* Column Spans (absolute widths within 1400px grid) */
  --col-12: var(--container-max);  /* 1400px - full width */
  --col-9: 65.625rem;              /* 1050px - 75% major features */
  --col-6: 43.75rem;               /* 700px - 50% standard cards */
  --col-4: 29.16rem;               /* 467px - intermediate sizes */
  --col-3: 21.875rem;              /* 350px - 25% small content */

  /* Padding Scale - Semantic padding tokens */
  --pad-2xs: 0.125rem; /* 2px - micro spacing for pills */
  --pad-3xs: 0.3rem; /* 4.8px - compact UI elements */
  --pad-xs: var(--space-xs); /* 0.5rem / 8px - very tight */
  --pad-xs-plus: 0.625rem; /* 10px - between xs and sm */
  --pad-sm-minus: 0.875rem; /* 14px - slightly less than sm */
  --pad-sm: var(--space-sm); /* 1.5rem / 24px - tight spacing */
  --pad-md-minus: 1.25rem; /* 20px - between sm and md */
  --pad-md: var(--space-md); /* 2rem / 32px - normal spacing */
  --pad-md-plus: 1.75rem; /* 28px - between md and lg */
  --pad-lg: var(--space-lg); /* 2.5rem / 40px - spacious */
  --pad-xl: var(--space-xl); /* 3rem / 48px - extra spacious */

  /* Type Scale - Major Third (1.25 ratio) */
  --text-xs: 0.75rem; /* 12px - tiny labels */
  --text-sm: 0.875rem; /* 14px - small text, nav */
  --text-md: 0.9375rem; /* 15px - medium text, descriptions */
  --text-base: 1rem; /* 16px - body text */
  --text-lg: 1.125rem; /* 18px - emphasized body */
  --text-xl: 1.25rem; /* 20px - card titles */
  --text-2xl: 1.5rem; /* 24px - section subtitles */
  --text-3xl: 1.875rem; /* 30px - section titles */
  --text-4xl: 2.25rem; /* 36px - major headings */
  --text-5xl: 3rem; /* 48px - hero */
  --text-6xl: 3.75rem; /* 60px - hero large */

  /* Responsive Fluid Typography */
  --hero-title: clamp(1.75rem, 4vw, 2.5rem); /* Reduced to fit 3 words on top line */
  --section-title: clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
  --card-title: clamp(1.125rem, 2vw + 0.25rem, 1.5rem);
  --body-text: clamp(0.938rem, 1vw + 0.5rem, 1.063rem);

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Lora', Georgia, serif;
  --font-display: 'Poppins', var(--font-sans); /* Heavy sans-serif for branding */
  --font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Letter Spacing */
  --tracking-tighter: -0.02em;  /* Large headings */
  --tracking-tight: -0.01em;    /* Headings */
  --tracking-normal: 0;         /* Body text */
  --tracking-wide: 0.025em;     /* Buttons */
  --tracking-wider: 0.05em;     /* Captions, labels */

  /* Legacy Spacing (for backward compatibility - use --space-* instead) */
  --gap-title-subtitle: 0.75rem;
  --gap-subtitle-content: 1.5rem;
  --gap-content: 1rem;
  --section-padding-mobile: 2rem 0;
  --section-padding-desktop: 4rem 0;
  --card-padding-sm: var(--space-sm);
  --card-padding-md: var(--space-md);
  --card-padding-lg: var(--space-lg);
  --card-padding-xl: var(--space-xl);
  --grid-gap-sm: 0.75rem;
  --grid-gap-md: 1rem;
  --grid-gap-lg: 1.5rem;

  /* Orbit Ring Colors (Dunbar's Numbers) */
  --orbit-core: #ff8b7b;
  --orbit-inner: #ffc48c;
  --orbit-far: #83b9ff;
  --orbit-outer: #c4c9ff; /* Lavender - Ring 4 */
  --orbit-core-bright: #ff9b8b;
  --orbit-inner-bright: #ffd49c;
  --orbit-far-bright: #93c9ff;
  --orbit-outer-bright: #d4d9ff; /* Lighter lavender */

  /* Orbit Visualization - Blue Gradients */
  --orbit-navy-dark: var(--orbit-navy-dark); /* Dark navy for SVG */
  --orbit-navy-mid: var(--orbit-navy-mid); /* Mid navy */
  --orbit-navy-light: var(--orbit-navy-light); /* Light navy */
  --orbit-navy-alt: var(--orbit-navy-alt); /* Alt navy */
  --orbit-blue-deep: var(--orbit-blue-deep); /* Deep blue */
  --orbit-blue-mid: var(--orbit-blue-mid); /* Mid blue */
  --orbit-blue-sky: var(--orbit-blue-sky); /* Sky blue */
  --orbit-blue-soft: var(--orbit-blue-soft); /* Soft blue */
  --orbit-blue-pale: var(--orbit-blue-pale); /* Pale blue */

  /* UI Colors - Contrast & Components */
  --color-white: var(--color-white); /* Pure white for max contrast */
  --color-black: var(--color-black); /* Pure black */
  --color-near-white: var(--color-near-white); /* Near white */
  --color-near-black: var(--color-near-black); /* Near black */
  --color-near-black-alt: var(--color-near-black-alt); /* Near black variant */
  --color-dark-1: var(--color-dark-1); /* Dark background level 1 */
  --color-dark-2: var(--color-dark-2); /* Dark background level 2 */
  --color-dark-3: var(--color-dark-3); /* Dark background level 3 */
  --color-dark-4: var(--color-dark-4); /* Dark background level 4 */
  --color-dark-5: var(--color-dark-5); /* Dark background level 5 */

  /* Additional Accent Colors */
  --accent-gold-light: var(--accent-gold-light); /* Light gold */
  --accent-gold-warm: var(--accent-gold-warm); /* Warm gold */
  --accent-gold-soft: var(--accent-gold-soft); /* Soft gold */
  --accent-gold-deep: var(--accent-gold-deep); /* Deep gold */
  --accent-red-bright: var(--accent-red-bright); /* Bright red */
  --accent-red-deep: var(--accent-red-deep); /* Deep red */
  --accent-red-darker: var(--accent-red-darker); /* Darker red */
  --accent-teal: var(--accent-teal); /* Teal */
  --accent-lime: var(--accent-lime); /* Lime green */
  --accent-violet: var(--accent-violet); /* Violet purple */
}

/* ============================================
   THEME TOKENS - LIGHT (Semantic Layer)
   ============================================ */
:root,
[data-theme="light"] {
  /* Surface & Backgrounds - Flexoki Paper */
  --bg-surface: #f8f6ef; /* Flexoki paper-200 */
  --bg-default: #fcf9f7; /* Lightest paper */
  --bg-subtle: #f2f0e5;
  --bg-muted: #e6e4d9;
  --bg-card: rgba(248, 246, 239, 0.85); /* Semi-transparent for glassmorphism */
  --bg-secondary: #e6e4d9;
  --bg-dark: #100f0f;

  /* Text Hierarchy */
  --text-primary: #3b3a35; /* fx-gray-700 - highest contrast */
  --text-default: #100f0f; /* Legacy - almost black */
  --text-secondary: #6f6e69; /* fx-gray-500 - medium contrast */
  --text-subtle: #282726;
  --text-muted: #575653;
  --text-faint: #878580;

  /* Accents & Actions */
  --accent: #da702c; /* Primary amber - warm & friendly */
  --accent-glow: var(--accent-glow); /* Brighter amber for highlights */
  --accent-primary: #da702c;
  --accent-secondary: #879a39;
  --accent-tertiary: #3aa99f;
  --accent-info: #4385be;
  --accent-warning: var(--accent-warning);
  --accent-purple: #8b7ec8;
  --accent-warm: #da702c;
  --accent-error: var(--accent-red-deep);

  /* Borders */
  --border-default: #cecdc3;
  --border-subtle: #e6e4d9;

  /* Shadows - Layered depth system */
  --shadow-sm: 0 1px 3px rgba(16, 15, 15, 0.05);
  --shadow-md: 0 4px 12px rgba(16, 15, 15, 0.1);
  --shadow-lg: 0 8px 24px rgba(16, 15, 15, 0.15);
  --shadow-deep: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 20px 60px rgba(16, 15, 15, 0.08),
    0 8px 24px rgba(16, 15, 15, 0.05);
  --shadow-float: 0 32px 80px rgba(16, 15, 15, 0.12);

  /* Glass Effects - Glassmorphism UI */
  --glass-bg: rgba(255, 255, 255, 0.4);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-highlight: rgba(255, 255, 255, 0.5);

  /* Connection States */
  --disconnection-text: #6f6e69;
  --connection-text: #da702c;
  --connection-glow: var(--accent-glow);

  /* Paper Texture */
  --paper-grain-v: rgba(0, 0, 0, 0.008);
  --paper-grain-h: rgba(0, 0, 0, 0.006);
  --paper-fiber-1: rgba(0, 0, 0, 0.012);
  --paper-fiber-2: rgba(0, 0, 0, 0.01);
  --paper-fiber-3: rgba(0, 0, 0, 0.015);
  --paper-blend-mode: overlay;
  --paper-opacity: 0.15;
  --paper-grain-v-white: rgba(255, 255, 255, 0.008);
  --paper-grain-h-white: rgba(255, 255, 255, 0.01);
  --paper-fiber-1-white: rgba(255, 255, 255, 0.015);
  --paper-fiber-2-white: rgba(255, 255, 255, 0.012);
  --paper-fiber-3-white: rgba(255, 255, 255, 0.006);
}

/* ============================================
   THEME TOKENS - DARK (Semantic Layer)
   ============================================ */
[data-theme="dark"] {
  /* Surface & Backgrounds - Night/Orbit */
  --bg-surface: var(--color-dark-1);
  --bg-default: #100f0f;
  --bg-subtle: #1c1b1a;
  --bg-muted: #282726;
  --bg-card: rgba(30, 30, 30, 0.75); /* Semi-transparent for glassmorphism */
  --bg-secondary: #282726;
  --bg-dark: var(--color-near-black-alt);

  /* Text Hierarchy */
  --text-primary: #eae8e0; /* Lightest - highest contrast */
  --text-default: #fffcf0; /* Legacy - pure white tint */
  --text-secondary: #b6b5ad; /* Medium gray */
  --text-subtle: #cecdc3;
  --text-muted: #878580;
  --text-faint: #575653;

  /* Accents & Actions - Warmer for night */
  --accent: var(--accent-glow); /* Warmer amber for dark mode */
  --accent-glow: #ffb35a; /* Bright glow */
  --accent-primary: #da702c;
  --accent-secondary: #879a39;
  --accent-tertiary: #3aa99f;
  --accent-info: #4385be;
  --accent-warning: var(--accent-warning);
  --accent-purple: #8b7ec8;
  --accent-warm: #da702c;
  --accent-error: var(--accent-red-bright);

  /* Borders */
  --border-default: #343331;
  --border-subtle: #282726;

  /* Shadows - Stronger for depth in dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-deep: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-float: 0 32px 80px rgba(0, 0, 0, 0.4);

  /* Glass Effects - Dark glassmorphism */
  --glass-bg-dark: rgba(18, 22, 35, 0.5);
  --glass-border-dark: rgba(255, 255, 255, 0.15);
  --glass-highlight-dark: rgba(255, 255, 255, 0.1);

  /* Paper Texture - same grain for consistency */
  --paper-grain-v: rgba(0, 0, 0, 0.008);
  --paper-grain-h: rgba(0, 0, 0, 0.006);
  --paper-fiber-1: rgba(0, 0, 0, 0.012);
  --paper-fiber-2: rgba(0, 0, 0, 0.01);
  --paper-fiber-3: rgba(0, 0, 0, 0.015);
  --paper-blend-mode: overlay;
  --paper-opacity: 0.15;
}

/* ============================================
   TABLE OF CONTENTS
   ============================================

   1. CSS Variables & Theme (lines 5-95)
   2. Reset & Base Styles (lines 97-119)
   3. Body & Texture (lines 120-245)
   4. Card Standardization System (lines 247-304)
   5. Layout System
      - Container & Sidekick (lines 172-195)
      - Shadow Block (lines 197-222)
   6. Navigation (lines 307-712)
   7. Hero Section (lines 714-1100)
   8. Orbit Visualizations & Animations (lines 1050-1272)
   9. Typography & Badges (lines 1273-1370)
   10. Buttons & Forms (lines 1325-1370)
   11. Content Sections
       - Problem Statement (lines 1397-1578)
       - Dunbar's Limit (lines 1589-1750)
       - Highlight Pills (lines 1371-1395, 2125-2325)
       - Features Grid (lines 2227-2328)
   12. Tools & Bento Grid (lines 2330-2800, 5250-5356)
   13. Floating Tools Section (lines 5407-5800)
   14. Personas Carousel (lines 3051-3472)
   15. Dunbar Visualization (lines 3824-4418)
   16. Pricing Section (lines 5934-6165)
   17. Beta Signup/Cosmos (lines 6167-6417)
   18. Footer (lines 3475-3822)
   19. Support Page Styles (lines 6424-6750)
   20. Responsive Overrides
       - Mobile (≤640px)
       - Tablet (≥768px)
       - Desktop (≥1024px)
       - Large (≥1536px)

   Optimizations Applied:
   - Font weights: 3 standardized (400, 500, 600)
   - Px→Rem: 281 conversions (612 legitimate px remain)
   - Media queries: 6 core breakpoints
   - Spacing system: CSS variables added
   - !important flags: removed (0 instances)

   Total: ~6,768 lines | 133KB
   Last optimized: 2025-10-17
   ============================================ */

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-default);
  background-color: var(--bg-default);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Paper texture background for whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  mix-blend-mode: var(--paper-blend-mode);
  opacity: var(--paper-opacity);
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      var(--paper-grain-v) 1px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      var(--paper-grain-h) 1px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      var(--paper-fiber-1) 1px,
      transparent 2px,
      transparent 18px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      var(--paper-fiber-2) 1px,
      transparent 2px,
      transparent 24px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      var(--paper-fiber-3) 1px,
      transparent 3px,
      transparent 6px
    );
  background-size:
    0.25rem 4px,
    4px 4px,
    18px 18px,
    24px 24px,
    100% 6px;
  background-position:
    0 0,
    0 0,
    0 0,
    12px 12px,
    0 0;
}

/* ============================================
   BASE TYPOGRAPHY STYLES
   ============================================ */

/* Headings - Serif for hierarchy and elegance */
h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--hero-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-default);
}

h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--section-title);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-default);
}

h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--card-title);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--text-default);
}

h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--text-default);
}

h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--text-default);
}

h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Paragraphs - Sans-serif for readability */
p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
}

/* Blockquotes - Serif, italic for emphasis */
blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-normal);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-normal);
  color: var(--text-secondary);
}

/* Links - Inherit font, styled with color */
a {
  font-family: inherit;
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-soft);
}

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

/* Strong and emphasis */
strong, b {
  font-weight: var(--weight-semibold);
}

em, i {
  font-style: italic;
}

/* Code - Monospace */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-subtle);
  padding: calc(var(--space-xs) / 4) calc(var(--space-xs) * 0.75);
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  background: var(--bg-subtle);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

/* Small text */
small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.container {
  max-width: var(--container-narrow); /* 900px */
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

/* Sidekick Layout - Primary 12-column grid container */
.sidekick {
  max-width: var(--container-max); /* 1400px - 12-column base */
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--space-md);
}

@media (min-width: 768px) {
  .sidekick {
    padding: 0 var(--space-md);
  }
}

/* .dunbar-visualization removed - using .section.container-grid instead */

/* Shadow block - wrapper for sidekick content cards */
.shadow-block {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 386px;
  gap: 4rem;
  border-radius: 1.5rem;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-md);
  background: var(--bg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 20px 60px rgba(16, 15, 15, 0.08),
    0 8px 24px rgba(16, 15, 15, 0.05);
  border: 0.0625rem solid var(--border);
}

@media (min-width: 768px) {
  .shadow-block {
    gap: 5rem;
    padding: var(--space-lg) var(--space-sm) var(--space-sm) var(--space-sm);
  }
}

@media (min-width: 1024px) {
  .shadow-block {
    min-height: 556px;
    padding: calc(var(--space-xl) + var(--space-md)) var(--space-lg) var(--space-lg) var(--space-lg);
  }
}

/* Sidekick cards - each section inside sidekick */
.sidekick > * {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 2rem;
  max-width: var(--container-max); /* Inherit 1400px grid base */
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .sidekick > * {
    gap: 3rem;
  }
}

/* ========== CARD STANDARDIZATION SYSTEM ========== */
/* Base card - all cards inherit from this */
.card-base {
  position: relative;
  border-radius: 1.5rem;
  background: var(--bg-subtle);
  border: 0.0625rem solid var(--border-subtle);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 20px 60px rgba(16, 15, 15, 0.08),
    0 8px 24px rgba(16, 15, 15, 0.05);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

[data-theme="dark"] .card-base {
  background: var(--bg-muted);
  border-color: var(--border-default);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Standard padding variants */
.card-padding-sm {
  padding: var(--pad-sm);
}
.card-padding-md {
  padding: var(--pad-md);
}
.card-padding-lg {
  padding: var(--pad-xl);
}

/* Responsive padding (Craft.do pattern) */
.card-padding-responsive {
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-md);
}
@media (min-width: 768px) {
  .card-padding-responsive {
    padding: var(--space-lg) var(--space-sm) var(--space-sm) var(--space-sm);
  }
}
@media (min-width: 1024px) {
  .card-padding-responsive {
    padding: calc(var(--space-xl) + var(--space-md)) var(--space-lg) var(--space-lg) var(--space-lg);
  }
}

/* Card elevation variants */
.card-elevated {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 32px 80px rgba(16, 15, 15, 0.12),
    0 12px 32px rgba(16, 15, 15, 0.08);
}

.card-elevated:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 40px 100px rgba(16, 15, 15, 0.15),
    0 16px 40px rgba(16, 15, 15, 0.1);
}

/* Universal card utility - clean token-based design */
.card {
  position: relative;
  padding: var(--pad-md);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-md); /* Reduced from lg for subtler rounding */
  box-shadow: var(--shadow-deep);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  transition: transform var(--duration-base) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-soft);
}

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

/* Card padding variants */
.card--tight {
  padding: var(--pad-sm);
}

.card--normal {
  padding: var(--pad-md);
}

.card--spacious {
  padding: var(--pad-lg);
}

/* Paper grain texture overlay for physical depth */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/textures/paper-grain.png");
  background-size: 400px 400px;
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
}

/* ========== END CARD SYSTEM ========== */

/* ============================================
   GRID SYSTEM - 12 Column Layout
   ============================================ */

/* Grid Container */
.container-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Column Span Utilities */
.col-12 {
  grid-column: span 12;
}

.col-9 {
  grid-column: span 9;
}

.col-6 {
  grid-column: span 6;
}

.col-4 {
  grid-column: span 4;
}

.col-3 {
  grid-column: span 3;
}

/* Responsive Grid - Mobile First */
@media (max-width: 640px) {
  /* All cards stack on mobile */
  .col-9,
  .col-6,
  .col-4,
  .col-3 {
    grid-column: span 12;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  /* Tablet: 9-col and 3-col become full width, 6-col stays half */
  .col-9,
  .col-3 {
    grid-column: span 12;
  }

  .col-6 {
    grid-column: span 6;
  }
}

@media (min-width: 1024px) {
  /* Desktop: Full grid system active */
  .col-12 {
    grid-column: span 12;
  }
  .col-9 {
    grid-column: span 9;
  }
  .col-6 {
    grid-column: span 6;
  }
  .col-3 {
    grid-column: span 3;
  }
}

/* Grid Alignment Helpers */
.col-center {
  margin: 0 auto;
}

.col-start {
  grid-column-start: 1;
}

/* Centered 3-col */
.col-3.col-center {
  grid-column: 5 / span 3; /* Start at column 5, span 3 columns (centered in 12-col grid) */
}

@media (max-width: 1023px) {
  .col-3.col-center {
    grid-column: span 12; /* Full width on tablet and mobile */
  }
}

/* Centered 6-col (for features section) */
.col-6.col-center {
  grid-column: 4 / span 6; /* Start at column 4, span 6 columns (centered in 12-col grid) */
}

@media (min-width: 641px) and (max-width: 1023px) {
  .col-6.col-center {
    grid-column: 4 / span 6; /* Keep centered on tablet */
  }
}

@media (max-width: 640px) {
  .col-6.col-center {
    grid-column: span 12; /* Full width on mobile */
  }
}

/* Centered 9-col (for major features like orbit graph) */
.col-9.col-center {
  grid-column: 2 / span 9; /* Start at column 2, span 9 columns */
}

@media (max-width: 1023px) {
  .col-9.col-center {
    grid-column: span 12; /* Full width on tablet and mobile */
  }
}

/* Section Spacing Utilities */
.section {
  padding: var(--pad-lg) var(--pad-md); /* top/bottom larger than sides */
}

@media (min-width: 1024px) {
  .section {
    padding: var(--pad-xl) var(--pad-lg);
  }
}

/* ========== END GRID SYSTEM ========== */

/* Navigation */
/* Floating Glass Navigation - 2026 Liquid Glass */
.super-hero-nav {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-md);
  right: var(--space-md);
  z-index: 100;
  width: auto;
  max-width: 600px;
  height: 3.25rem;
  margin: 0 auto;
  border-radius: 2rem;
  transition: all var(--duration-base) var(--ease-soft);
}

/* Override liquid-glass for nav-specific styling */
.super-hero-nav.liquid-glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

[data-theme="dark"] .super-hero-nav.liquid-glass {
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* Shrink nav on scroll and stick to top */
.super-hero-nav.scrolled {
  top: var(--space-sm); /* Stick to top with small margin */
  height: 2.75rem;
}

.super-hero-nav.scrolled .logo-text {
  font-size: var(--text-base); /* Proportionally adjusted from 1.125rem */
}

.super-hero-nav.scrolled .nav-link {
  font-size: var(--text-md); /* Proportionally adjusted from 1rem (15px) */
  padding: var(--pad-3xs) 0.65rem;
}

.super-hero-nav.scrolled .theme-toggle {
  width: 2rem;
  height: 2rem;
}

.super-hero-nav.scrolled .theme-toggle svg {
  width: 0.875rem;
  height: 0.875rem;
}

.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 var(--pad-sm);
}

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

.nav-right {
  display: flex;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--text-default);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  transition: opacity var(--duration-fast) var(--ease-soft);
}

.nav-logo:hover {
  opacity: 0.8;
}

.logo-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent-primary);
}

/* Winking animation for logo - PRESERVED! */
@keyframes wink {
  0%,
  95%,
  100% {
    transform: scaleY(1);
  }
  97.5% {
    transform: scaleY(0.1);
  }
}

.winking-logo {
  animation: wink 5s infinite;
  transform-origin: center;
}

.logo-text {
  color: var(--text-default);
  font-family: var(--font-display); /* Poppins - heavy sans-serif branding */
  font-weight: var(--weight-extrabold); /* 800 - strong brand presence */
  padding-right: var(--space-sm);
}

.nav-links {
  display: none;
  gap: var(--space-xs); /* Reduced from sm */
  align-items: center;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}

.nav-link {
  color: var(--text-secondary); /* Semantic token with built-in contrast (was --text-default with opacity) */
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm); /* 14px - lighter type */
  font-weight: var(--weight-normal); /* Lighter weight */
  letter-spacing: 0.01em; /* Subtle spacing for legibility */
  transition: all var(--duration-fast) var(--ease-soft);
  padding: var(--space-xs) var(--pad-xs); /* Reduced padding */
  border-radius: var(--radius-sm);
  /* Removed opacity: 0.9 - maintains WCAG AA contrast */
}

.nav-link:hover {
  color: var(--text-primary); /* Darker on hover for emphasis */
  background: rgba(131, 185, 255, 0.12);
}

[data-theme="dark"] .nav-link:hover {
  background: rgba(147, 201, 255, 0.15);
}

.nav-link-beta {
  color: var(--accent-info);
  font-weight: var(--weight-semibold); /* Heavier weight for emphasis */
  letter-spacing: 0.015em; /* Slightly more spacing */
  opacity: 1;
}

.nav-link-beta:hover {
  color: var(--accent-info);
  background: rgba(67, 133, 190, 0.15);
  transform: translateY(-1px);
}

[data-theme="dark"] .nav-link-beta {
  color: var(--orbit-far-bright);
}

[data-theme="dark"] .nav-link-beta:hover {
  color: var(--orbit-far-bright);
  background: rgba(147, 201, 255, 0.2);
}

.theme-toggle {
  background: rgba(131, 185, 255, 0.08);
  border: 1px solid rgba(131, 185, 255, 0.2);
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-soft);
  color: var(--text-default);
}

.theme-toggle:hover {
  background: rgba(131, 185, 255, 0.2);
  border-color: rgba(131, 185, 255, 0.35);
  transform: scale(1.05);
}

[data-theme="dark"] .theme-toggle {
  background: rgba(147, 201, 255, 0.12);
  border-color: rgba(147, 201, 255, 0.25);
}

[data-theme="dark"] .theme-toggle:hover {
  background: rgba(147, 201, 255, 0.25);
  border-color: rgba(147, 201, 255, 0.4);
}

.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: all var(--duration-base) var(--ease-soft);
}

.sun-icon {
  display: block;
}

.moon-icon {
  display: none;
}

[data-theme="dark"] .sun-icon {
  display: none;
}

[data-theme="dark"] .moon-icon {
  display: block;
}

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(131, 185, 255, 0.08);
  border: none;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-default);
  margin-left: 0.5rem;
}

.mobile-menu-toggle:hover {
  background: rgba(131, 185, 255, 0.2);
  transform: scale(1.05);
}

[data-theme="dark"] .mobile-menu-toggle {
  background: rgba(147, 201, 255, 0.12);
}

[data-theme="dark"] .mobile-menu-toggle:hover {
  background: rgba(147, 201, 255, 0.25);
}

/* Hide mobile menu toggle on desktop */
@media (min-width: 768px) {
  .mobile-menu-toggle {
    display: none;
  }
}

/* Hamburger Icon Animation */
.hamburger-icon {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
}

.hamburger-lines,
.hamburger-close {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.2s ease;
}

.hamburger-lines {
  opacity: 1;
}

.hamburger-close {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-lines {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-close {
  opacity: 1;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(16, 15, 15, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .mobile-menu-overlay {
  background: rgba(255, 252, 240, 0.95);
}

.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Mobile Menu Content */
.mobile-menu-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.mobile-menu-overlay.active .mobile-menu-content {
  transform: translateY(0);
}

.mobile-menu-link {
  color: var(--bg-default);
  text-decoration: none;
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  padding: var(--radius-sm) var(--space-sm);
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  opacity: 0.9;
}

[data-theme="dark"] .mobile-menu-link {
  color: var(--bg-dark);
}

.mobile-menu-link:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

[data-theme="dark"] .mobile-menu-link:hover {
  background: rgba(16, 15, 15, 0.1);
}

.mobile-menu-link-beta {
  color: var(--orbit-far-bright);
  opacity: 1;
}

[data-theme="dark"] .mobile-menu-link-beta {
  color: var(--accent-info);
}

.mobile-menu-link-beta:hover {
  background: rgba(147, 201, 255, 0.2);
}

[data-theme="dark"] .mobile-menu-link-beta:hover {
  background: rgba(67, 133, 190, 0.15);
}

/* Hide mobile menu on desktop */
@media (min-width: 768px) {
  .mobile-menu-overlay {
    display: none;
  }
}

/* Mobile responsive */
@media (max-width: 640px) {
  .super-hero-nav {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    height: 56px;
    border-radius: 1.5rem;
  }

  .super-hero-nav.scrolled {
    top: 0.75rem; /* Smaller top margin on mobile when scrolled */
    height: 48px;
  }

  .nav-inner {
    padding: 0 var(--space-md);
  }

  .logo-text {
    font-size: var(--text-base);
  }

  .logo-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .theme-toggle {
    width: 2rem;
    height: 2rem;
  }

  .theme-toggle svg {
    width: 1rem;
    height: 1rem;
  }
}

/* Hero Section - Floating Card Style */
.hero {
  min-height: auto;
  padding: 0;
  background: transparent;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: var(--radius-sm);
}

@media (min-width: 768px) {
  .hero {
    margin: var(--space-md);
  }
}

/* Super-hero landing - Modern card-based hero */
/* Hero shadow wrapper - separate from card for proper shadow rendering */
.hero-shadow-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: 1.5rem;
  box-shadow:
    0 20px 60px rgba(16, 15, 15, 0.15),
    0 8px 24px rgba(16, 15, 15, 0.1);
}

@media (min-width: 768px) {
  .hero-shadow-wrapper {
    border-radius: 2rem;
  }
}

[data-theme="dark"] .hero-shadow-wrapper {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3);
}

.super-hero-landing {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%; /* Full width to fill viewport */
  border-radius: 1.5rem;
  padding: calc(101px + 2rem) 2rem 2rem 2rem; /* Nav safe zone at top */
  background: linear-gradient(to bottom, var(--accent-info) 0%, var(--accent-purple) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  overflow: hidden; /* Crop/mask content */
  margin: 0 auto;
  height: 50vh; /* Cap to 50% viewport height */
  max-height: 50vh; /* Ensure cap is enforced */
  min-height: 500px; /* Breathing room */

  /* 5-COLUMN GRID LAYOUT - Padding columns for proper spacing */
  display: grid;
  grid-template-columns: 1fr auto minmax(auto, 800px) auto 1fr; /* Padding, polaroid, center, polaroid, padding */
  grid-template-rows: auto 1fr; /* Title row, devices row */
  justify-items: center;
  align-items: center;
  column-gap: 1.5rem; /* Comfortable gap between elements (24px) */
  row-gap: 1rem; /* Tighter vertical spacing (16px) */
}

/* Add noise texture overlay to hero */
.super-hero-landing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.03) 2px, rgba(255,255,255,.03) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,.03) 2px, rgba(255,255,255,.03) 4px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

/* Mobile (<768px): 1-column stack */
@media (max-width: 767px) {
  .super-hero-landing {
    grid-template-columns: 1fr; /* Single column */
    grid-template-rows: auto auto; /* Title row, devices row */
    gap: 1.5rem;
    padding: calc(101px + 1.5rem) 1.5rem 1.5rem 1.5rem;
  }

  .hero-text {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .hero-orbit {
    display: none; /* Hide polaroids on mobile */
  }

  .hero-devices-showcase {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    transform: translateY(20%); /* Less crop for mobile */
  }
}

/* Tablet (768px-1023px): Simplified 3-column, hide polaroids */
@media (min-width: 768px) and (max-width: 1023px) {
  .super-hero-landing {
    padding: calc(101px + 1.5rem) 1.5rem 2rem 1.5rem;
    border-radius: 2rem;
    grid-template-columns: 1fr minmax(auto, 700px) 1fr; /* Padding, center, padding */
    gap: 1.5rem;
  }

  .hero-text {
    grid-column: 2 / 3; /* Center column */
    grid-row: 1 / 2;
  }

  .hero-orbit {
    display: none; /* Hide polaroids on tablet */
  }

  .hero-devices-showcase {
    grid-column: 2 / 3; /* Center column */
    grid-row: 2 / 3;
  }
}

/* Desktop (≥1024px): 5-column layout */
@media (min-width: 1024px) {
  .super-hero-landing {
    padding: calc(101px + 2rem) 1.5rem 2rem 1.5rem;
    grid-template-columns: 1fr auto minmax(auto, 800px) auto 1fr; /* Maintain 5-column */
    /* Maintain 50vh cap on all sizes */
  }
}

/* Extra-wide (≥1536px): Maximum width, maintain 5 columns */
@media (min-width: 1536px) {
  .super-hero-landing {
    padding: calc(101px + 2rem) 2rem 2rem 2rem;
    grid-template-columns: 1fr auto minmax(auto, 900px) auto 1fr; /* Slightly wider center */
    /* Maintain 50vh cap on all sizes */
  }
}

[data-theme="dark"] .super-hero-landing {
  background: linear-gradient(to bottom, var(--orbit-navy-alt) 0%, var(--accent-violet) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

/* Hero sidekick - Content zone (title + buttons) */
.super-hero-landing .sidekick {
  flex: 0 0 auto; /* Don't grow - only take space needed for content */
  position: relative;
  z-index: 2; /* Above visual elements */
}

/* Glass overlay - floating card sample using --shadow-float */
.glass-overlay {
  position: absolute;
  top: 2rem;
  right: 2rem;
  padding: var(--space-md) var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  z-index: 10;
  pointer-events: none;
  opacity: 0.9;
}

[data-theme="dark"] .glass-overlay {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Craft paper texture - reusable across hero, tools, footer */
.craft-paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  mix-blend-mode: var(--paper-blend-mode);
  opacity: var(--paper-opacity);
  pointer-events: none;
  background-image:
    /* Fine noise grain - vertical */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      var(--paper-grain-v) 1px,
      transparent 2px,
      transparent 4px
    ),
    /* Fine noise grain - horizontal */
      repeating-linear-gradient(
        90deg,
        transparent 0px,
        var(--paper-grain-h) 1px,
        transparent 2px,
        transparent 4px
      ),
    /* Diagonal fibers */
      repeating-linear-gradient(
        45deg,
        transparent 0px,
        var(--paper-fiber-1) 1px,
        transparent 2px,
        transparent 18px
      ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      var(--paper-fiber-2) 1px,
      transparent 2px,
      transparent 24px
    ),
    /* Horizontal fibers */
      repeating-linear-gradient(
        180deg,
        transparent 0px,
        var(--paper-fiber-3) 1px,
        transparent 3px,
        transparent 6px
      );
  background-size:
    0.25rem 4px,
    4px 4px,
    18px 18px,
    24px 24px,
    100% 6px;
  background-position:
    0 0,
    0 0,
    0 0,
    12px 12px,
    0 0;
}

.hero-text {
  /* GRID: Center column between polaroids, Row 1 */
  grid-column: 3 / 4; /* Column 3 - between polaroids in columns 2 and 4 */
  grid-row: 1 / 2;
  position: relative;
  z-index: 2; /* Above background */
  text-align: center;
  width: 100%;
  padding: 0 var(--space-md);
  align-self: center;
  justify-self: center;
  transform: translateY(120px); /* Move title down to vertical center of hero */
}

.hero-title {
  text-align: center;
}

.hero-subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Hero Devices Container - Grid-based Layout */
.hero-devices-showcase {
  /* GRID: Center column between polaroids, Row 2 (bottom) */
  grid-column: 3 / 4; /* Column 3 - same as title, between polaroids */
  grid-row: 2 / 3;
  align-self: center; /* Center vertically in row 2 */
  justify-self: center; /* Center horizontally */
  width: min(var(--col-6), 50vw); /* 6 columns or 50% viewport width */
  max-width: 700px;
  z-index: 5; /* Above background orbit, below polaroids */
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* 3-column grid for iPhone/iPad */
  grid-template-rows: 1fr;
  align-items: end;
  gap: 0; /* Overlapping effect */
  transform: translateY(-30%); /* Pull up moderately - positioned below centered title */
}

/* Hero iPhone - Titanium (Grid Column 1, overlaps into 2) */
.hero-iphone {
  grid-column: 1 / 2;
  grid-row: 1;
  width: 80%; /* Proportional within grid cell */
  justify-self: end; /* Align to right edge of cell */
  margin-right: -20%; /* Overlap into center */
  margin-bottom: -5%; /* Slightly lower */
  aspect-ratio: 9/19; /* iPhone aspect ratio */
  filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.4));
  animation: float-hero-iphone 4s ease-in-out infinite;
  z-index: 2; /* In front of iPad */
}

.hero-iphone-frame {
  width: 100%;
  height: 100%;
  /* Gold gradient - warm metallic tones */
  background: linear-gradient(135deg,
    #e8d4a0 0%,
    #d4b378 25%,
    #c9a860 50%,
    #f0e0c0 75%,
    #d9c088 100%);
  border-radius: 24px; /* Reduced from 35px */
  padding: 5px; /* Reduced from 8px for thinner bezel */
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5),
              inset 0 -1px 2px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(230, 200, 140, 0.6);
  position: relative;
}

/* Dynamic Island - Floating pill shape (on frame, appears in screen) */
.hero-iphone-frame::after {
  content: "";
  position: absolute;
  top: 13px; /* Position inside screen area (5px frame + 8px from top) */
  left: 50%;
  transform: translateX(-50%);
  width: 20%; /* Smaller, more realistic */
  height: 8px; /* Thin pill shape */
  background: #000; /* Solid black island */
  border-radius: 20px; /* Fully rounded pill */
  z-index: 15; /* Above screen, below content */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
}

.hero-iphone-screen {
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  border-radius: 20px; /* Reduced from 30px */
  overflow: hidden; /* Keep hidden for screen content */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px; /* Adjusted for thinner bezel */
  position: relative;
}

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

/* Hero iPad - Blue Aluminum (Grid Column 2) */
.hero-ipad {
  grid-column: 2 / 3; /* Center column */
  grid-row: 1;
  width: 100%;
  aspect-ratio: 4/3;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.3));
  animation: float-hero-ipad 6s ease-in-out infinite;
  z-index: 1; /* Behind iPhone */
}

.hero-ipad-frame {
  width: 100%;
  height: 100%;
  /* Sky Blue Aluminum gradient */
  background: linear-gradient(135deg, #a8c9e6 0%, #8fb5d9 50%, #7da5cc 100%);
  border-radius: 18px; /* Reduced from 24px */
  padding: 8px; /* Reduced from 14px for thinner bezel */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4),
              inset 0 -1px 2px rgba(0, 0, 0, 0.1),
              0 0 0 1px rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.hero-ipad-screen {
  width: 100%;
  height: 100%;
  background: #0a0a0a; /* Dark cosmos background */
  border-radius: 12px; /* Reduced from 16px */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

@keyframes float-hero-ipad {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px); /* Reduced float height to maintain cropping */
  }
}

/* Responsive adjustments for hero devices - Maintain Grid */
@media (max-width: 1024px) {
  .hero-devices-showcase {
    width: min(80%, 600px);
    /* Grid scales proportionally */
  }
}

@media (max-width: 768px) {
  .hero-devices-showcase {
    width: min(90%, 500px);
    bottom: 0;
    transform: translateX(-50%) translateY(33%); /* Maintain 1/3 crop */
    /* Grid maintains same proportions */
  }

  .hero-iphone {
    width: 90%; /* Slightly larger in grid cell */
  }
}

/* Mobile Portrait - Stack/Hide iPad */
@media (max-width: 480px) and (orientation: portrait) {
  .hero-devices-showcase {
    width: 50%;
    transform: translateX(-50%) translateY(20%); /* Less crop for iPhone alone */
    display: flex; /* Switch from grid to flex for single item */
    justify-content: center;
  }

  .hero-ipad {
    display: none; /* Hide iPad on mobile portrait */
  }

  .hero-iphone {
    grid-column: unset; /* Remove grid positioning */
    width: 100%;
    max-width: 200px;
    margin: 0;
    justify-self: center;
  }

  .hero-iphone-frame {
    padding: 4px; /* Reduced to match thinner bezel design */
    border-radius: 20px; /* Reduced to match refined design */
  }

  .hero-iphone-screen {
    border-radius: 16px; /* Reduced to match refined design */
  }
}

/* iPad Orbit Visualization (reuse existing) */
.hero-ipad-orbit {
  width: 100%;
  height: 100%;
  animation: rotate-slow 120s linear infinite;
}

.orbit-dots-slow {
  animation: rotate-slow 60s linear infinite reverse;
  transform-origin: center;
}

.iphone-frame {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 45px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* iPhone notch */
.iphone-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 30px;
  background: #000;
  border-radius: 0 0 35px 35px;
  z-index: 10;
}

.iphone-screen {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  border-radius: 37px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}

.iphone-screen img {
  display: none;
}

/* iPhone Orbit View */
.hero-iphone-orbit {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  overflow: hidden;
}

.orbit-mobile-rings {
  position: absolute;
  width: 200px;
  height: 200px;
  animation: rotate-slow 90s linear infinite;
}

.orbit-ring-mobile {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ring-core {
  width: 60px;
  height: 60px;
  border-color: #ff8b7b;
  opacity: 0.6;
}

.ring-inner {
  width: 100px;
  height: 100px;
  border-color: #ffc48c;
  opacity: 0.5;
}

.ring-near {
  width: 140px;
  height: 140px;
  border-color: #83b9ff;
  opacity: 0.4;
}

.ring-far {
  width: 180px;
  height: 180px;
  border-color: #c4c9ff;
  opacity: 0.3;
}

.orbit-center-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #f5c766;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(245, 199, 102, 0.6);
  z-index: 10;
}

/* Smooth floating animations for hero devices */
@keyframes float-ipad {
  0%, 100% {
    transform: translate(-65%, -50%) rotateY(-10deg) rotateZ(2deg) translateY(0px);
  }
  50% {
    transform: translate(-65%, -50%) rotateY(-10deg) rotateZ(2deg) translateY(-20px);
  }
}

@keyframes float-iphone {
  0%, 100% {
    transform: translate(-15%, -50%) rotateY(8deg) rotateZ(-2deg) scale(1.1) translateY(0px);
  }
  50% {
    transform: translate(-15%, -50%) rotateY(8deg) rotateZ(-2deg) scale(1.1) translateY(-25px);
  }
}

/* Tablet - maintain layout but scale down */
@media (max-width: 1024px) {
  .hero-orbit {
    width: 140px;
    top: 65%; /* Consistent percentage positioning */
  }

  .hero-orbit-left {
    transform: translateX(calc(-100% - 200px)) rotate(-4deg);
  }

  .hero-orbit-right {
    transform: translateX(200px) rotate(3deg);
  }

  .hero-devices {
    height: 500px;
  }

  .device-ipad {
    width: 360px;
    height: 270px;
  }

  .device-iphone {
    width: 220px;
    height: 440px;
  }
}

/* Small tablet - tighter spacing */
@media (max-width: 900px) {
  .hero-orbit {
    width: 120px;
    top: 65%; /* Consistent percentage positioning */
  }

  .hero-orbit-left {
    transform: translateX(calc(-100% - 160px)) rotate(-4deg);
  }

  .hero-orbit-right {
    transform: translateX(160px) rotate(3deg);
  }
}

/* Mobile landscape - still show all but compact */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-devices {
    height: 320px;
  }

  .hero-orbit {
    width: 100px;
    top: 60%; /* Lower on landscape for less interference */
  }

  .device-ipad {
    width: 300px;
    height: 225px;
    transform: translate(-60%, -50%) rotateY(-6deg) rotateZ(1deg);
  }

  .device-iphone {
    width: 200px;
    height: 400px;
    transform: translate(-20%, -50%) rotateY(4deg) rotateZ(-1deg) scale(0.95);
  }
}

/* Mobile portrait - vertical stack */
@media (max-width: 768px) and (orientation: portrait) {
  .super-hero-landing {
    min-height: auto;
  }

  .hero-devices {
    height: 380px;
    max-width: 100%;
    margin-top: 3rem;
  }

  /* Stack polaroids vertically above devices */
  .hero-orbit {
    position: relative;
    display: block;
    width: 120px;
    margin: 1rem auto;
    top: 0;
    left: 0 !important;
    transform: rotate(-2deg) !important;
  }

  .hero-orbit-left {
    transform: rotate(-3deg) !important;
  }

  .hero-orbit-right {
    transform: rotate(3deg) !important;
  }

  .device-ipad {
    display: none;
  }

  .device-iphone {
    position: relative;
    right: 0;
    bottom: 0;
    width: 180px;
    height: 360px;
  }

  .iphone-frame {
    border-radius: 40px;
    padding: 8px;
  }

  .iphone-screen {
    border-radius: 32px;
  }
}

.hero-orbit {
  /* GRID: Polaroids positioned in left/right columns, Row 1 */
  grid-row: 1 / 2; /* Same row as title */
  width: 160px; /* Smaller for better composition */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10; /* Above devices */
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.2));
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
  align-self: center; /* Center vertically in grid cell */
}

/* Left polaroid (galaxy) - GRID Column 2 */
.hero-orbit-left {
  grid-column: 2 / 3;
  justify-self: center; /* Center in column */
  transform: rotate(-4deg);
}

.hero-orbit-left:hover {
  transform: scale(1.05) rotate(-4deg) translateY(-5px);
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.25));
}

/* Right polaroid (connection) - GRID Column 4 */
.hero-orbit-right {
  grid-column: 4 / 5;
  justify-self: center; /* Center in column */
  transform: rotate(3deg);
}

.hero-orbit-right:hover {
  transform: scale(1.05) rotate(3deg) translateY(-5px);
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.25));
}

/* Polaroid in hero styling */
.hero-orbit .cosmic-polaroid {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  width: 100%;
}

.hero-orbit .polaroid-frame {
  max-width: 100%;
  transform: rotate(0deg);
  transition: none; /* No separate animation - moves with parent */
}

.hero-orbit .polaroid-frame:hover {
  transform: rotate(0deg); /* Keep flat, no separate scale */
}

.hero-orbit .polaroid-image {
  aspect-ratio: 1;
}

/* Left polaroid (galaxy) - near black background with stars */
.hero-orbit-left .polaroid-image {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
  position: relative;
}

/* Starfield for galaxy polaroid */
.hero-orbit-left .polaroid-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, white, transparent),
    radial-gradient(1px 1px at 85% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 45% 60%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 70% 75%, white, transparent),
    radial-gradient(1px 1px at 25% 85%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 90% 15%, rgba(255, 255, 255, 0.5), transparent);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.hero-orbit-left .polaroid-image img {
  position: relative;
  z-index: 1;
}

/* Right polaroid should NOT be inverted */
.hero-orbit-right .polaroid-image {
  background: var(--color-near-white);
}

.hero-orbit-right .polaroid-image img {
  filter: none;
}

.orbit-diagram-hero {
  position: absolute;
  top: 100%; /* Align to bottom edge of hero */
  left: 50%;
  transform: translate(-50%, -50%); /* Center of orbit aligns with bottom edge */
  width: 240%; /* Doubled from 120% */
  max-width: 1800px; /* Doubled from 900px */
  height: auto;
  opacity: 0.15; /* Subtle background element */
  z-index: 0; /* Behind all content */
  animation: rotate-slow 120s linear infinite;
  pointer-events: none; /* Don't interfere with interactions */
}

@media (max-width: 1023px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text {
    text-align: center;
    max-width: 100%; /* Full width on mobile */
    margin: 0 auto;
    padding-left: 0;
  }

  .hero-title {
    text-align: center;
  }

  .hero-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .orbit-diagram-hero {
    max-width: 50rem; /* Doubled from 25rem */
  }
}

/* iPad Showcase Section with Scroll Effect */
.ipad-showcase {
  padding: var(--space-md) 0 calc(var(--space-xl) + var(--space-md));
  background: transparent;
  position: relative;
  overflow: visible;
  margin-top: -3rem;
}

/* Stage - 3D iPad Animation */
.stage {
  min-height: 60vh;
  display: grid;
  place-items: center;
  background: transparent;
  perspective: 1400px;
  perspective-origin: 50% 50%; /* Perfectly centered */
  position: relative;
}

/* iPad proportions (rough iPad Pro 11") */
.ipad.wrap {
  width: min(72vmin, 820px);
  height: calc(min(72vmin, 820px) * 0.65);
}

/* Core block with initial depth tilt - Blue Metallic */
.ipad.body {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 28px;
  /* Blue metallic gradient - iPhone 15 Pro inspired */
  background: linear-gradient(145deg, #a8c5e0, #6d9ec8, #4a7ba7);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 12px 32px rgba(0, 0, 0, .10),
    0 48px 96px rgba(0, 0, 0, .18);
  transform:
    translateZ(-260px) rotateX(28deg) rotateY(-18deg) scale(.92);
  animation: leanIn 1100ms cubic-bezier(.2, .7, .2, 1) forwards;
  overflow: hidden;
}

/* Bezel + screen - Much thinner */
.bezel {
  position: absolute;
  inset: 4px; /* Much thinner bezel (was 14px) */
  border-radius: 24px;
  background: #111;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
}

.screen {
  position: absolute;
  inset: 6px; /* Adjusted for thinner bezel */
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
  transform: translateZ(1px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Edge chamfer (faux 3D rim) */
.ipad.body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .55),
    rgba(255, 255, 255, 0) 22%,
    rgba(0, 0, 0, .08) 78%,
    rgba(0, 0, 0, .18)
  );
  mix-blend-mode: soft-light;
}

/* Specular sweep highlight */
.ipad.body::after {
  content: "";
  position: absolute;
  inset: -15% -15% auto -15%;
  height: 60%;
  background: linear-gradient(100deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 60%);
  transform: rotate(8deg) translateY(-30%) translateZ(2px);
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  animation: spec 1100ms cubic-bezier(.2, .7, .2, 1) 120ms forwards;
}

/* Ground contact shadow */
.stage::after {
  content: "";
  position: absolute;
  inset: auto 0 8vh 0;
  margin-inline: auto;
  width: 40vmin;
  height: 8vmin;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 70%);
  filter: blur(18px);
  transform: scale(.7) translateZ(-1px);
  opacity: 0;
  animation: shadow 1100ms cubic-bezier(.2, .7, .2, 1) forwards;
}

/* Animations */
@keyframes leanIn {
  0% {
    transform: translateZ(-260px) rotateX(28deg) rotateY(-18deg) scale(.92);
  }
  65% {
    transform: translateZ(40px) rotateX(-4deg) rotateY(6deg) scale(1.02);
  }
  100% {
    transform: translateZ(0px) rotateX(0deg) rotateY(0deg) scale(1.00);
  }
}

@keyframes spec {
  0% {
    opacity: 0;
    transform: rotate(8deg) translateY(-45%) translateZ(2px);
  }
  40% {
    opacity: .6;
  }
  100% {
    opacity: 0;
    transform: rotate(8deg) translateY(20%) translateZ(2px);
  }
}

@keyframes shadow {
  0% {
    opacity: 0;
    transform: scale(.6);
  }
  65% {
    opacity: .9;
    transform: scale(1.05);
  }
  100% {
    opacity: .6;
    transform: scale(.95);
  }
}

/* Hover/intent bump (desktop nicety) */
@media (hover: hover) {
  .ipad.body:hover {
    transform: translateZ(24px) rotateX(-2deg) rotateY(3deg) scale(1.01);
    transition: transform 300ms ease;
  }
}

/* Dark mode support for iPad - Blue metallic */
[data-theme="dark"] .ipad.body {
  background: linear-gradient(145deg, #4a6a8a, #2d4a6a, #1a3a5a);
}

[data-theme="dark"] .bezel {
  background: #0a0a0a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset;
}

[data-theme="dark"] .ipad.body::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .2),
    rgba(255, 255, 255, 0) 22%,
    rgba(0, 0, 0, .2) 78%,
    rgba(0, 0, 0, .3)
  );
}

/* iPad Cosmic UI */
.ipad-cosmic-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-near-black);
  background-image:
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 33% 80%, white, transparent),
    radial-gradient(1px 1px at 15% 90%, white, transparent);
  background-size: 200% 200%;
  background-position: 50% 50%;
  z-index: 1;
}

/* iPad nav removed - orbit visualization only */

.ipad-orbit-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5); /* Centered, slightly smaller scale */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.ipad-orbit-container svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Responsive sizing */
@media (min-width: 768px) {
  .ipad.wrap {
    width: min(80vmin, 900px);
    height: calc(min(80vmin, 900px) * 0.65);
  }
}

@media (min-width: 1024px) {
  .ipad.wrap {
    width: min(85vmin, 1000px);
    height: calc(min(85vmin, 1000px) * 0.65);
  }
}

@media (max-width: 640px) {
  .ipad-showcase {
    padding: calc(var(--space-xl) + var(--space-md)) 0 var(--space-md);
  }

  .stage {
    min-height: 50vh;
  }

  .ipad.wrap {
    width: min(90vmin, 600px);
    height: calc(min(90vmin, 600px) * 0.65);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ipad.body,
  .stage::after,
  .ipad.body::after {
    animation: none;
    transform: none;
  }
}

@keyframes rotate-slow {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate-planet {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Orbit rotation animations - default (for bento) */
.orbit-ring-2-dots {
  transform-origin: 400px 400px;
  animation: rotate-slow 60s linear infinite;
  animation-play-state: paused; /* Paused by default */
}

.orbit-ring-3-dots {
  transform-origin: 400px 400px;
  animation: rotate-slow 90s linear infinite;
  animation-play-state: paused; /* Paused by default */
}

.orbit-ring-4-dots {
  transform-origin: 400px 400px;
  animation: rotate-slow 120s linear infinite;
  animation-play-state: paused; /* Paused by default */
}

.orbit-ring-5-dots {
  transform-origin: 400px 400px;
  animation: rotate-slow 180s linear infinite;
  animation-play-state: paused; /* Paused by default */
}

/* Play animations only when in viewport */
#dunbar-svg.in-viewport .orbit-ring-2-dots,
#dunbar-svg.in-viewport .orbit-ring-3-dots,
#dunbar-svg.in-viewport .orbit-ring-4-dots,
#dunbar-svg.in-viewport .orbit-ring-5-dots {
  animation-play-state: running;
}

/* Hero orbit - MUCH slower, contemplative speeds */
.orbit-diagram-hero .orbit-ring-2-dots {
  animation: rotate-slow 120s linear infinite;
}

.orbit-diagram-hero .orbit-ring-3-dots {
  animation: rotate-slow 240s linear infinite;
}

.orbit-diagram-hero .orbit-ring-4-dots {
  animation: rotate-slow 400s linear infinite;
}

.orbit-diagram-hero .orbit-ring-5-dots {
  animation: rotate-slow 600s linear infinite;
}

.orbit-ring {
  fill: none;
  opacity: 0.8;
}

.orbit-ring-1 {
  /* Core - You (Sun Gold) */
  fill: var(--accent-glow);
  stroke: none;
  opacity: 0.85;
  animation: rotate-planet 8s linear infinite;
  transform-origin: center;
}

.orbit-ring-2 {
  /* Core Orbit - closest people (coral/salmon pink) */
  stroke: var(--orbit-core);
  stroke-width: 2.8;
  fill: none;
  opacity: 0.7;
}

.orbit-ring-3 {
  /* Inner Orbit - close companions (peach/apricot gold) */
  stroke: var(--orbit-inner);
  stroke-width: 2.5;
  fill: none;
  opacity: 0.65;
}

.orbit-ring-4 {
  /* Near Orbit - regular friends (light lavender) */
  stroke: var(--orbit-outer);
  stroke-width: 2;
  fill: none;
  opacity: 0.6;
}

.orbit-ring-5 {
  /* Far Orbit - occasional connections (sky blue) */
  stroke: var(--orbit-far);
  stroke-width: 2;
  fill: none;
  opacity: 0.5;
}

.orbit-ring-6 {
  /* Deep Space - distant (dark navy) */
  stroke: var(--orbit-navy-dark);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.4;
}

/* Light theme specific colors */
[data-theme="light"] .orbit-ring-1 {
  fill: var(--accent-gold-warm); /* Softened gold for light mode */
}

/* Light theme colors */
[data-theme="light"] .orbit-ring-2 {
  stroke: var(--orbit-core);
}

[data-theme="light"] .orbit-ring-3 {
  stroke: var(--orbit-inner);
}

[data-theme="light"] .orbit-ring-4 {
  stroke: var(--orbit-outer); /* Lavender */
}

[data-theme="light"] .orbit-ring-5 {
  stroke: var(--orbit-far);
}

[data-theme="light"] .orbit-ring-6 {
  stroke: var(--orbit-navy-dark); /* Dark navy */
}

/* Dark theme colors - brighter for visibility */
[data-theme="dark"] .orbit-ring-1 {
  fill: var(--accent-gold-light); /* Brighter gold for dark mode */
  filter: drop-shadow(0 0 25px rgba(245, 199, 102, 0.7));
}

[data-theme="dark"] .orbit-ring-2 {
  stroke: var(--orbit-core-bright);
}

[data-theme="dark"] .orbit-ring-3 {
  stroke: var(--orbit-inner-bright);
}

[data-theme="dark"] .orbit-ring-4 {
  stroke: var(--orbit-outer-bright); /* Brighter lavender */
}

[data-theme="dark"] .orbit-ring-5 {
  stroke: var(--orbit-far-bright);
}

[data-theme="dark"] .orbit-ring-6 {
  stroke: var(--orbit-blue-deep); /* Lighter navy for visibility */
}

.orbit-dot {
  opacity: 0.8;
}

/* Dot colors matching the rings */
.orbit-dot-1 {
  fill: var(--accent-glow); /* Golden amber center */
  opacity: 0.9;
}
.orbit-dot-2 {
  fill: var(--orbit-core);
  opacity: 0.85;
}
.orbit-dot-3 {
  fill: var(--orbit-inner);
  opacity: 0.8;
}
.orbit-dot-4 {
  fill: var(--orbit-outer); /* Lavender */
  opacity: 0.75;
}
.orbit-dot-5 {
  fill: var(--orbit-far);
  opacity: 0.7;
}
.orbit-dot-6 {
  fill: var(--orbit-navy-dark); /* Dark navy */
  opacity: 0.65;
}

/* Light theme dot colors */
[data-theme="light"] .orbit-dot-2 {
  fill: var(--orbit-core);
}
[data-theme="light"] .orbit-dot-3 {
  fill: var(--orbit-inner);
}
[data-theme="light"] .orbit-dot-4 {
  fill: var(--orbit-outer);
}
[data-theme="light"] .orbit-dot-5 {
  fill: var(--orbit-far);
}
[data-theme="light"] .orbit-dot-6 {
  fill: var(--orbit-navy-dark);
}

/* Dark theme dot colors - brighter for visibility */
[data-theme="dark"] .orbit-dot-1 {
  fill: var(--accent-gold-light);
}
[data-theme="dark"] .orbit-dot-2 {
  fill: var(--orbit-core-bright);
}
[data-theme="dark"] .orbit-dot-3 {
  fill: var(--orbit-inner-bright);
}
[data-theme="dark"] .orbit-dot-4 {
  fill: var(--orbit-outer-bright);
}
[data-theme="dark"] .orbit-dot-5 {
  fill: var(--orbit-far-bright);
}
[data-theme="dark"] .orbit-dot-6 {
  fill: var(--orbit-blue-deep);
}

.hero-badge {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: 0.75rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 0.0625rem solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--hero-title);
  font-weight: var(--weight-normal);
  line-height: var(--leading-tight);
  margin-bottom: 0; /* Buttons have margin-top for spacing */
  color: var(--color-white);
  letter-spacing: -0.5px;
  /* Subtle shadow for legibility, not glow */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.hero-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: var(--weight-medium); /* Heavier text */
  line-height: var(--leading-normal); /* Tighter */
  color: rgba(255, 255, 255, 0.88);
  max-width: 36rem; /* Narrower width */
  margin: 0 auto var(--space-md) auto; /* Higher - reduced bottom margin */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.hero-cta {
  /* SAFE BUTTON ZONE - Always below title, never overlaps */
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-xs); /* Very tight - right under title (0.5rem / 8px) */
  position: relative; /* Normal flow positioning */
  z-index: 2; /* Above visual zone */
  width: 100%; /* Full width of parent */
}

/* Hero iPad - Subtle bottom-right showcase */
.hero-ipad-container {
  position: absolute;
  bottom: 20px;
  right: 5%;
  width: 320px; /* Fixed size for consistency */
  height: 240px; /* Compact height */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0; /* Behind other elements */
  pointer-events: none; /* Don't block interactions */
  opacity: 0.8; /* Subtle presence */
  animation: slideInUp 1s ease-out 0.5s both;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 0.8;
    transform: translateY(0);
  }
}

.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.hero-ipad {
  /* Compact iPad for hero */
  width: 100% !important;
  height: 100% !important;
  transform: rotateX(5deg) rotateY(-10deg); /* Subtle 3D tilt */
  transition: transform 0.5s ease;
}

.hero-ipad:hover {
  transform: rotateX(0deg) rotateY(0deg) scale(1.05);
}

/* Responsive iPad positioning for hero */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-ipad-container {
    width: 280px;
    height: 200px;
    bottom: 15px;
    right: 3%;
  }
}

@media (min-width: 1024px) {
  .hero-ipad-container {
    width: 360px;
    height: 260px;
    bottom: 30px;
    right: 8%;
  }
}

@media (min-width: 1536px) {
  .hero-ipad-container {
    width: 400px;
    height: 300px;
    bottom: 40px;
    right: 10%;
  }
}

/* Hide hero iPad on mobile (< 768px) for cleaner mobile experience */
@media (max-width: 767px) {
  .hero-ipad-container {
    display: none;
  }
}

/* Buttons */
.btn {
  padding: var(--radius-sm) var(--space-md);
  border-radius: 0.75rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-size: var(--text-base);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: rgba(131, 185, 255, 0.9); /* Nearly solid blue - 90% opacity */
  color: white;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(131, 185, 255, 1);
  box-shadow: 0 4px 16px rgba(131, 185, 255, 0.4);
  font-weight: var(--weight-semibold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: rgba(131, 185, 255, 1); /* Fully solid on hover */
  border-color: rgba(131, 185, 255, 1);
  box-shadow: 0 8px 24px rgba(131, 185, 255, 0.5);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1); /* Subtle white tint - glass effect */
  color: white;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  font-weight: var(--weight-semibold);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .btn-primary {
  background: rgba(131, 185, 255, 0.85); /* Nearly solid in dark mode */
  border-color: rgba(131, 185, 255, 1);
  color: white;
  box-shadow: 0 4px 16px rgba(131, 185, 255, 0.4);
}

[data-theme="dark"] .btn-primary:hover {
  background: rgba(131, 185, 255, 1); /* Fully solid on hover */
  border-color: rgba(131, 185, 255, 1);
  box-shadow: 0 8px 24px rgba(131, 185, 255, 0.5);
}

[data-theme="dark"] .btn-secondary {
  background: rgba(255, 255, 255, 0.15); /* Subtle white tint in dark */
  border-color: rgba(255, 255, 255, 0.25);
  color: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.btn-full {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-loading {
  display: none;
}

.btn.loading .btn-text {
  display: none;
}

.btn.loading .btn-loading {
  display: block;
}

/* Highlight Feature Section */
.highlight-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad-md) 0;
  background: transparent;
}

/* Allow wider content in highlight-feature section */
.highlight-feature .sidekick {
  max-width: var(--container-wide); /* 1200px - standardized from 1242px */
}

.highlight-card {
  position: relative;
  background: var(--bg-subtle);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .highlight-feature {
    padding: calc(var(--pad-xl) + var(--space-md)) 0;
  }
}

/* Problem Statement Section - Human, relatable copy */
.problem-statement {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad-xl) 0;
  background: transparent;
}

@media (min-width: 1024px) {
  .problem-statement {
    padding: calc(var(--pad-xl) + var(--space-xl)) 0;
  }
}

.problem-content {
  max-width: var(--col-6); /* 700px - 6 columns */
  margin: 0 auto;
  text-align: center;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
  background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-tertiary) 100%);
  overflow: hidden;
  padding: var(--pad-md);
}

.problem-content .craft-paper {
  z-index: 1;
}

@media (min-width: 768px) {
  .problem-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--pad-md) var(--pad-lg);
  }
}

@media (min-width: 1024px) {
  .problem-content {
    padding: var(--pad-lg);
  }
}

/* Problem image styling */
.problem-visual {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.problem-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: grayscale(20%) contrast(1.05);
  opacity: 0.92;
}

/* Problem text container */
.problem-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Problem paragraphs with better spacing */
.problem-body {
  font-size: var(--body-text);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--leading-normal);
  font-weight: var(--weight-normal);
  margin: 0;
}

.problem-body + .problem-body {
  margin-top: var(--space-xs);
}

/* Emphasized phrases */
.problem-emphasis {
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

/* Highlighted text */
.problem-highlight {
  font-weight: var(--weight-semibold);
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* Quoted text */
.problem-quote {
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

/* Final conclusion paragraph */
.problem-conclusion {
  font-size: calc(var(--body-text) * 1.05);
  font-weight: var(--weight-normal);
  color: var(--text-default);
  margin-top: 0.75rem;
}

/* Connection Vision Section - Bridge from problem to solution */
.connection-vision {
  padding: calc(var(--space-xl) * 2) 0;
  background: transparent;
}

.vision-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  max-width: var(--container-narrow); /* 900px */
  margin: 0 auto;
}

.vision-polaroid {
  width: 100%;
  display: flex;
  justify-content: center;
}

.polaroid-large {
  max-width: 37.5rem;
  width: 100%;
}

.vision-content {
  text-align: center;
  max-width: var(--col-6); /* 700px - 6 columns */
}

.vision-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: var(--weight-semibold);
  color: var(--text-default);
  margin-bottom: 1rem;
  line-height: var(--leading-tight);
}

.vision-text {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-normal);
}

/* Responsive layout for vision section */
@media (min-width: 768px) {
  .vision-container {
    flex-direction: row;
    gap: 4rem;
    align-items: center;
  }

  .vision-polaroid {
    flex: 1;
    max-width: 50%;
  }

  .vision-content {
    flex: 1;
    text-align: left;
  }
}

/* Dunbar's Limit Section - Educational, credible */
.dunbar-limit-section {
  padding: var(--pad-xl) 0;
  background: transparent;
}

/* Wrapper allows stickers to extend outside card boundaries */
.dunbar-card-wrapper {
  position: relative;
  padding: var(--pad-lg); /* Space for stickers to float around edges */
}

.dunbar-card {
  position: relative;
  background: var(--bg-subtle); /* Neutral background instead of purple */
  overflow: visible; /* Allow stickers to peek over edges */
}

.dunbar-card .craft-paper {
  z-index: 1;
}

/* Decorative sticker-style images - float around card edges */

/* Chimp sticker - bottom right corner, extending outside */
.dunbar-chimp-decoration {
  position: absolute;
  bottom: 1rem;
  right: 0.5rem;
  width: 80px;
  height: 80px;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-8deg);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

.dunbar-chimp-decoration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* White border to make sticker pop on purple background */
  filter: drop-shadow(0 0 0 2px rgba(255, 255, 255, 0.4));
}

@media (min-width: 768px) {
  .dunbar-chimp-decoration {
    width: 100px;
    height: 100px;
    bottom: 1.5rem;
    right: 1rem;
  }
}

@media (min-width: 1024px) {
  .dunbar-chimp-decoration {
    width: 120px;
    height: 120px;
    bottom: 2rem;
    right: 1.5rem;
  }
}

/* Brain sticker - top left corner, extending outside */
.dunbar-brain-decoration {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 70px;
  height: 70px;
  z-index: 3;
  pointer-events: none;
  transform: rotate(12deg);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

.dunbar-brain-decoration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* White border to make sticker pop on purple background */
  filter: drop-shadow(0 0 0 2px rgba(255, 255, 255, 0.4));
}

@media (min-width: 768px) {
  .dunbar-brain-decoration {
    width: 85px;
    height: 85px;
    top: 1rem;
    left: 1rem;
  }
}

@media (min-width: 1024px) {
  .dunbar-brain-decoration {
    width: 100px;
    height: 100px;
    top: 1.5rem;
    left: 1.5rem;
  }
}

/* Books sticker - bottom left, extending outside */
.dunbar-books-decoration {
  position: absolute;
  bottom: 1rem;
  left: 0.5rem;
  width: 75px;
  height: 75px;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-5deg);
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.13));
}

.dunbar-books-decoration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* White border to make sticker pop on purple background */
  filter: drop-shadow(0 0 0 2px rgba(255, 255, 255, 0.4));
}

@media (min-width: 768px) {
  .dunbar-books-decoration {
    width: 90px;
    height: 90px;
    bottom: 1.5rem;
    left: 1rem;
  }
}

@media (min-width: 1024px) {
  .dunbar-books-decoration {
    width: 105px;
    height: 105px;
    bottom: 2rem;
    left: 1.5rem;
  }
}

.dunbar-content {
  position: relative;
  z-index: 2;
  max-width: var(--col-6); /* 700px - 6 columns */
  margin: 0 auto;
}

/* Responsive wrapper padding adjustments */
@media (max-width: 640px) {
  .dunbar-card-wrapper {
    padding: var(--pad-sm); /* Less space on mobile */
  }
}

@media (min-width: 768px) {
  .dunbar-card-wrapper {
    padding: var(--pad-xl); /* More space on tablet */
  }
}

@media (min-width: 1024px) {
  .dunbar-limit-section {
    padding: calc(var(--pad-xl) + var(--space-xl)) 0;
  }

  .dunbar-card-wrapper {
    padding: calc(var(--space-xl) + var(--space-md)); /* Even more breathing room on desktop */
  }
}

/* Intro */
.dunbar-intro {
  position: relative;
  z-index: 2;
  max-width: 50rem;
  margin: 0 auto var(--space-xl) auto;
  text-align: center;
}

.dunbar-intro .section-title {
  color: var(--text-default); /* Flexoki light text */
}

.dunbar-lead {
  font-size: clamp(1.125rem, 2.75vw, 1.25rem);
  color: rgba(255, 252, 240, 0.9);
  margin-top: var(--space-sm);
  line-height: var(--leading-loose);
}

/* The 150 Pattern Examples */
.pattern-examples {
  position: relative;
  z-index: 2;
}

.pattern-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: var(--weight-medium);
  text-align: center;
  margin-bottom: 1rem;
  color: var(--text-default);
}

.pattern-intro {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  color: rgba(255, 252, 240, 0.9);
  text-align: center;
  max-width: 37.5rem;
  margin: var(--space-xs) auto var(--space-md);
  line-height: var(--leading-relaxed);
}

.example-cards {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.example-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
  padding: var(--pad-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.example-card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-lg);
  transform: translateX(4px);
}

.example-card:hover .example-circle {
  transform: scale(1.05);
}

/* Colored circles */
.example-circle {
  width: 4rem;
  height: 4rem;
  min-width: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.example-circle-neolithic {
  background: var(--accent-secondary); /* Flexoki green */
}

.example-circle-roman {
  background: var(--accent-warm); /* Flexoki orange */
}

.example-circle-instagram {
  background: var(--accent-info); /* Flexoki blue */
}

.example-icon {
  line-height: 1;
  color: white;
}

.example-icon svg {
  width: 2rem;
  height: 2rem;
  stroke: currentColor;
  transition: all 0.3s ease;
  stroke-width: 2;
}

.example-card:hover .example-icon svg {
  transform: scale(1.1);
}

.example-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

.example-heading {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0;
}

.example-stat {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: var(--tracking-wide);
}

/* Cosmic Perspective Polaroid */
.cosmic-polaroid {
  position: relative;
  z-index: 1;
  margin: calc(var(--space-xl) + var(--space-md)) 0;
  padding: calc(var(--space-xl) + var(--space-md)) var(--space-md);
  background: linear-gradient(135deg, var(--color-dark-3) 0%, var(--color-dark-1) 50%, var(--color-near-black) 100%);
  border-radius: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Subtle star field effect */
.cosmic-polaroid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(2px 2px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 33% 70%, white, transparent),
    radial-gradient(1px 1px at 79% 80%, white, transparent);
  background-repeat: no-repeat;
  background-size: 200% 200%;
  opacity: 0.3;
  pointer-events: none;
}

.polaroid-frame {
  background: white;
  /* Authentic Polaroid proportions: thin top/sides, thick bottom */
  padding: 0.625rem; /* 10px thin border on top and sides */
  padding-bottom: 2.75rem; /* 44px thick bottom section for caption area */
  border-radius: 0; /* Sharp corners for polaroid authenticity */
  box-shadow: var(--shadow-deep);
  transform: rotate(-2deg);
  transition: all var(--duration-slow) var(--ease-soft);
  position: relative;
  z-index: 1;
  max-width: 400px; /* Single size for desktop + iPad landscape */
}

/* SIMPLIFIED 2-STATE POLAROID SYSTEM */

/* Desktop + iPad Landscape (≥768px): Single consistent size */
@media (min-width: 768px) {
  .polaroid-frame {
    max-width: 400px; /* Comfortable size for desktop + iPad landscape */
    padding: 0.625rem; /* 10px */
    padding-bottom: 2.75rem; /* 44px - authentic Polaroid bottom */
  }

  /* Hero orbit polaroids now use grid positioning - no transforms needed */
}

/* Mobile Portrait (<768px): Hidden for clean mobile experience */
@media (max-width: 767px) {
  .hero-orbit {
    display: none;
  }
}

.polaroid-frame:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: var(--shadow-float);
}

.polaroid-image {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--color-dark-3) 0%, var(--color-dark-1) 50%, var(--color-near-black) 100%);
  overflow: hidden;
  border-radius: 0; /* Sharp corners for polaroid authenticity */
}

.polaroid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: invert(1);
}

.polaroid-caption {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-dark-3);
  text-align: center;
  margin-top: var(--space-md);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 768px) {
  .cosmic-polaroid {
    padding: var(--space-xl) var(--space-sm);
  }

  .polaroid-frame {
    max-width: 100%;
  }
}

/* Health Necessity */
.health-necessity {
  position: relative;
  z-index: 1;
}

.health-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .health-layout {
    grid-template-columns: 45% 55%;
    gap: 4rem;
  }
}

.health-polaroid {
  display: flex;
  justify-content: center;
}

.health-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.health-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: var(--weight-semibold);
  margin: 0;
  color: var(--text-default);
}

.health-lead {
  font-size: clamp(1.125rem, 2.75vw, 1.25rem);
  color: var(--text-subtle);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.health-stat-featured {
  background: var(--bg-subtle);
  border-radius: 1rem;
  padding: var(--pad-sm);
  text-align: center;
}

.health-stat-featured .stat-number {
  font-size: var(--hero-title);
  font-weight: var(--weight-semibold);
  color: var(--accent-primary);
  margin: 0 0 var(--space-xs) 0;
  line-height: 1;
}

.health-stat-featured .stat-label {
  font-size: var(--text-base);
  color: var(--text-default);
  margin: 0;
  line-height: var(--leading-normal);
}

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

@media (min-width: 768px) {
  .health-stats {
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
  }
}

.health-stat-large {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  min-height: 25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black);
}

.health-stat-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.health-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.health-stat-large:hover .health-image {
  opacity: 0.5;
}

/* Black gradient vignette on sides */
.health-stat-image::before,
.health-stat-image::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.33%;
  background: black;
  z-index: 1;
  pointer-events: none;
}

.health-stat-image::before {
  left: 0;
  background: linear-gradient(to right, black 0%, black 60%, transparent 100%);
}

.health-stat-image::after {
  right: 0;
  background: linear-gradient(to left, black 0%, black 60%, transparent 100%);
}

.health-stat-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: white;
}

.stat-number {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: var(--weight-medium);
  line-height: 1;
  margin-bottom: 1rem;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

.stat-label {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-normal);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  max-width: 18.75rem;
  margin: 0 auto;
}

.health-facts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.health-fact {
  font-size: var(--text-base);
  color: var(--text-subtle);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.health-fact::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-secondary);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
}

.health-warning {
  font-size: clamp(1.125rem, 2.75vw, 1.375rem);
  color: var(--text-default);
  line-height: var(--leading-loose);
  margin: 0;
  font-weight: var(--weight-semibold);
  padding: var(--pad-sm);
  background: var(--bg-subtle);
  border-radius: 0.75rem;
  border-left: 0.25rem solid var(--accent-primary);
}

.health-conclusion {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  color: var(--text-subtle);
  text-align: center;
  line-height: var(--leading-loose);
  font-style: italic;
}

.highlight-sentence {
  max-width: var(--container-narrow); /* 900px */
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-align: center;
  color: var(--text-default);
  font-weight: var(--weight-normal);
  position: relative;
  z-index: 2;
  padding: 0;
  letter-spacing: normal;
}

.pill {
  display: inline;
  padding: 0.125rem var(--pad-xs-plus); /* Reduced vertical padding from var(--pad-2xs) to 2px */
  border-radius: 999px;
  font-weight: var(--weight-bold);
  font-size: inherit;
  font-style: normal;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(10px);
  animation: pillFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  text-decoration: none;
  cursor: default;
  white-space: nowrap;
  line-height: 1.4; /* Tighter line height to reduce total height */
}

@keyframes pillFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation delays */
.pill[data-stagger="1"] {
  animation-delay: 0.1s;
}
.pill[data-stagger="2"] {
  animation-delay: 0.2s;
}
.pill[data-stagger="3"] {
  animation-delay: 0.3s;
}
.pill[data-stagger="4"] {
  animation-delay: 0.4s;
}
.pill[data-stagger="5"] {
  animation-delay: 0.5s;
}
.pill[data-stagger="6"] {
  animation-delay: 0.6s;
}
.pill[data-stagger="7"] {
  animation-delay: 0.7s;
}
.pill[data-stagger="8"] {
  animation-delay: 0.8s;
}
.pill[data-stagger="9"] {
  animation-delay: 0.9s;
}
.pill[data-stagger="10"] {
  animation-delay: 1s;
}
.pill[data-stagger="11"] {
  animation-delay: 1.1s;
}

/* Pill color variants - Light mode */
.pill-core {
  background: rgba(255, 139, 123, 0.15);
  color: #d14d39;
  box-shadow: none;
  border: 1px solid rgba(255, 139, 123, 0.2);
}

.pill-inner {
  background: rgba(255, 196, 140, 0.15);
  color: #ce7a38;
  box-shadow: none;
  border: 1px solid rgba(255, 196, 140, 0.2);
}

.pill-near {
  background: rgba(196, 201, 255, 0.15);
  color: #7671c8;
  box-shadow: none;
  border: 1px solid rgba(196, 201, 255, 0.2);
}

.pill-far {
  background: rgba(131, 185, 255, 0.15);
  color: #3d7ab5;
  box-shadow: none;
  border: 1px solid rgba(131, 185, 255, 0.2);
}

.pill-deep {
  background: rgba(30, 44, 75, 0.1);
  color: #384d6b;
  box-shadow: none;
  border: 1px solid rgba(30, 44, 75, 0.2);
}

.pill-nurture {
  background: rgba(255, 167, 131, 0.15);
  color: #d16a3a;
  box-shadow: none;
  border: 1px solid rgba(255, 167, 131, 0.2);
}

/* Dark mode pill colors */
[data-theme="dark"] .pill-core {
  background: rgba(255, 155, 139, 0.12);
  color: #ff9b8b;
  box-shadow: none;
  border: 1px solid rgba(255, 155, 139, 0.25);
}

[data-theme="dark"] .pill-inner {
  background: rgba(255, 212, 156, 0.12);
  color: #ffd49c;
  box-shadow: none;
  border: 1px solid rgba(255, 212, 156, 0.25);
}

[data-theme="dark"] .pill-near {
  background: rgba(212, 217, 255, 0.12);
  color: #d4d9ff;
  box-shadow: none;
  border: 1px solid rgba(212, 217, 255, 0.25);
}

[data-theme="dark"] .pill-far {
  background: rgba(147, 201, 255, 0.12);
  color: #93c9ff;
  box-shadow: none;
  border: 1px solid rgba(147, 201, 255, 0.25);
}

[data-theme="dark"] .pill-deep {
  background: rgba(94, 124, 171, 0.15);
  color: #7a9dcf;
  box-shadow: none;
  border: 1px solid rgba(94, 124, 171, 0.25);
}

[data-theme="dark"] .pill-nurture {
  background: rgba(255, 183, 147, 0.12);
  color: #ffb793;
  box-shadow: none;
  border: 1px solid rgba(255, 183, 147, 0.25);
}

/* Hover effects */
.pill:hover {
  transform: translateY(-1px);
}

.pill-core:hover {
  background: rgba(255, 139, 123, 0.25);
  border-color: rgba(255, 139, 123, 0.4);
}
.pill-inner:hover {
  background: rgba(255, 196, 140, 0.25);
  border-color: rgba(255, 196, 140, 0.4);
}
.pill-near:hover {
  background: rgba(196, 201, 255, 0.25);
  border-color: rgba(196, 201, 255, 0.4);
}
.pill-far:hover {
  background: rgba(131, 185, 255, 0.25);
  border-color: rgba(131, 185, 255, 0.4);
}
.pill-deep:hover {
  background: rgba(30, 44, 75, 0.2);
  border-color: rgba(30, 44, 75, 0.35);
}
.pill-nurture:hover {
  background: rgba(255, 167, 131, 0.25);
  border-color: rgba(255, 167, 131, 0.4);
}

/* Accessibility - respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pill {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .pill:hover {
    transform: none;
  }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .highlight-feature {
    padding: var(--pad-md) 0;
  }

  .highlight-sentence {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
  }

  .pill {
    padding: var(--pad-2xs) var(--pad-xs);
    font-size: inherit;
  }
}

/* ============================================
   IPAD SHOWCASE SECTION - Orbit Visualization
   ============================================ */

.ipad-showcase {
  padding: 4rem 0;
  background: transparent;
  position: relative;
  overflow: visible;
}

.ipad-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  perspective: 2000px;
}

.ipad-mockup {
  position: relative;
  transform-origin: center bottom;
  transform: perspective(2000px) rotateX(5deg) scale(0.95);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.ipad-mockup.scrolled {
  transform: perspective(2000px) rotateX(0deg) scale(1);
}

.ipad-frame {
  position: relative;
  width: 700px;
  max-width: 90vw;
  aspect-ratio: 4/3;
  /* Sky Blue Aluminum - matching hero iPad */
  background: linear-gradient(135deg, #a8c9e6 0%, #8fb5d9 50%, #7da5cc 100%);
  border-radius: var(--radius-xl);
  padding: var(--pad-md);
  box-shadow: var(--shadow-deep), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ipad-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ipad-cosmic-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  background-image:
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent);
  background-size: 200% 200%;
  background-position: 50% 50%;
  z-index: 1;
}

.ipad-orbit-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: var(--pad-md);
}

.ipad-orbit-container svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Pause animations when SVG is out of viewport */
#ipad-dunbar-svg.paused,
#ipad-dunbar-svg.paused * {
  animation-play-state: paused !important;
}

/* Orbit rings in the iPad visualization */
.ipad-ring {
  fill: none;
  stroke-width: 1.5;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.ipad-ring-0 { stroke: var(--orbit-core); }
.ipad-ring-1 { stroke: var(--orbit-core); }
.ipad-ring-2 { stroke: var(--orbit-inner); }
.ipad-ring-3 { stroke: var(--orbit-inner); }
.ipad-ring-4 { stroke: var(--orbit-far); }
.ipad-ring-5 { stroke: var(--orbit-far); }
.ipad-ring-6 { stroke: var(--orbit-outer); }
.ipad-ring-7 { stroke: var(--orbit-outer); }

.ipad-ring.active {
  opacity: 0.8;
  stroke-width: 2;
}

/* Orbit nodes */
.ipad-node {
  fill: currentColor;
  transition: all 0.3s ease;
}

.ipad-node-0, .ipad-node-1 { color: var(--orbit-core); }
.ipad-node-2, .ipad-node-3 { color: var(--orbit-inner); }
.ipad-node-4, .ipad-node-5 { color: var(--orbit-far); }
.ipad-node-6, .ipad-node-7 { color: var(--orbit-outer); }

/* Toggle Pill Controls */
.orbit-control-pill {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: rgba(16, 15, 15, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  width: fit-content;
  margin: 0 auto;
}

[data-theme="light"] .orbit-control-pill {
  background: rgba(255, 252, 240, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.pill-toggle {
  cursor: pointer;
  user-select: none;
}

.pill-toggle input[type="checkbox"] {
  display: none;
}

.pill-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  transition: all 0.3s ease;
  background: transparent;
}

.pill-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  opacity: 0.4;
}

.toggle-core .pill-dot {
  background: var(--orbit-core);
}

.toggle-inner .pill-dot {
  background: var(--orbit-inner);
}

.toggle-near .pill-dot {
  background: var(--orbit-far);
}

.toggle-far .pill-dot {
  background: var(--orbit-outer);
}

.pill-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: color 0.3s ease;
}

/* Active states */
.pill-toggle input:checked + .pill-button {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .pill-toggle input:checked + .pill-button {
  background: rgba(0, 0, 0, 0.05);
}

.pill-toggle input:checked + .pill-button .pill-dot {
  opacity: 1;
  box-shadow: 0 0 8px currentColor;
}

.pill-toggle input:checked + .pill-button .pill-label {
  color: var(--text-default);
}

/* Hover effects */
.pill-button:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .pill-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Responsive iPad */
@media (max-width: 768px) {
  .ipad-showcase {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ipad-frame {
    width: 600px;
  }
}

/* Features Section */
.features {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad-md) 0;
  background: transparent;
}

@media (min-width: 1024px) {
  .features {
    padding: calc(var(--pad-xl) + var(--space-md)) 0;
  }
}

/* ============================================
   FEATURES SECTION - Super-Hero Pattern
   ============================================ */

.super-hero-features {
  position: relative;
  background: var(--bg-subtle);
  max-width: var(--col-6); /* 700px - 6 columns */
  margin: 0 auto;
}

.super-hero-features .craft-paper {
  z-index: 1;
}

/* Header */
.features-header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: var(--space-xl);
}

.features-header .section-title {
  margin-bottom: 0;
}

/* Grid - Asymmetric bento layout */
.features-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Tablet: 2-column balanced grid */
@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

/* Desktop: 3-column masonry-style with varied heights */
@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: var(--space-md);
  }

  /* First card spans 2 columns for visual hierarchy */
  .feature-card:nth-child(1) {
    grid-column: span 2;
  }

  /* Create asymmetric balance */
  .feature-card:nth-child(4) {
    grid-column: span 2;
  }
}

.feature-card {
  position: relative;
  background: var(--bg-subtle);
  padding: var(--pad-sm);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  transition: all var(--duration-base) var(--ease-soft);
  cursor: default;
  overflow: hidden;
}

.feature-card .craft-paper {
  z-index: 1;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-warm);
}

.feature-icon {
  position: relative;
  z-index: 2;
  width: var(--space-2xl);
  height: var(--space-2xl);
  margin-bottom: var(--space-md);
  color: var(--accent-primary);
}

.feature-icon svg {
  width: 100%;
  height: 100%;
}

/* Cosmic gradient colors for feature icons */
.feature-card:nth-child(1) .feature-icon {
  color: var(--accent-glow); /* Golden amber - Center */
}

.feature-card:nth-child(2) .feature-icon {
  color: var(--orbit-core);
}

.feature-card:nth-child(3) .feature-icon {
  color: var(--orbit-inner);
}

.feature-card:nth-child(4) .feature-icon {
  color: var(--orbit-outer); /* Lavender - Ring 4 */
}

.feature-card:nth-child(5) .feature-icon {
  color: var(--orbit-far);
}

.feature-card:nth-child(6) .feature-icon {
  color: var(--accent-secondary); /* Flexoki green - Thoughtful Design */
}

/* Dark mode - brighter versions for visibility */
[data-theme="dark"] .feature-card:nth-child(1) .feature-icon {
  color: var(--accent-gold-soft); /* Brighter golden amber */
}

[data-theme="dark"] .feature-card:nth-child(2) .feature-icon {
  color: var(--orbit-core-bright);
}

[data-theme="dark"] .feature-card:nth-child(3) .feature-icon {
  color: var(--orbit-inner-bright);
}

[data-theme="dark"] .feature-card:nth-child(4) .feature-icon {
  color: var(--orbit-outer-bright); /* Brighter lavender */
}

[data-theme="dark"] .feature-card:nth-child(5) .feature-icon {
  color: var(--orbit-far-bright);
}

[data-theme="dark"] .feature-card:nth-child(6) .feature-icon {
  color: var(--accent-lime); /* Brighter green for dark mode */
}

.feature-title {
  position: relative;
  z-index: 2;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-sm);
  color: var(--text-default);
}

.feature-description {
  position: relative;
  z-index: 2;
  font-size: var(--text-base);
  color: var(--text-subtle);
  line-height: var(--leading-relaxed);
}

.section-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: var(--section-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-align: center;
  margin-bottom: 1rem;
  color: var(--text-default);
  letter-spacing: -0.5px;
  line-height: var(--leading-tight);
}

/* Bento Grid Section */
.bento-section {
  padding: calc(var(--space-xl) + var(--space-md)) 1.25rem;
  background: var(--bg-default);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: var(--container-wide); /* 1200px */
  margin: calc(var(--space-xl) + var(--radius-sm)) auto 0;
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
  }

  .bento-people {
    grid-row: span 2;
  }
}

@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .bento-people {
    grid-row: span 2;
  }
}

.bento-card {
  background: var(--bg-subtle);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--pad-md) !important; /* Override card--spacious for tight modern layout */
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08);
}

@media (min-width: 1024px) {
  .bento-card {
    padding: var(--pad-md) !important;
  }
}

@media (max-width: 640px) {
  .bento-card {
    padding: var(--pad-sm) !important;
    border-radius: var(--radius-md);
  }
}

/* ============================================
   TOOLS SECTION - Card-based Design
   ============================================ */

/* Header */
.tools-section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
  max-width: var(--col-6); /* 700px - 6 columns */
  margin-left: auto;
  margin-right: auto;
}

.tools-section-header .section-title {
  margin-bottom: var(--space-xs);
}

.tools-section-header .section-subtitle {
  font-family: var(--font-serif); /* Lora - matches pricing */
  font-size: var(--text-2xl); /* Larger - matches pricing */
  font-weight: var(--weight-normal); /* Regular weight */
  font-style: italic; /* Italic style - matches pricing */
  color: var(--text-default);
  margin: 0;
  opacity: 0.85; /* Subtle opacity - matches pricing */
}

/* Hidden/Visible states for bento cards */
.bento-hidden {
  display: none !important;
}

.bento-visible {
  display: flex !important;
}

/* See More Button Container */
.tools-see-more-container {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.tools-see-more {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: all var(--duration-base) var(--ease-soft);
  cursor: pointer;
}

.tools-see-more:hover {
  background: var(--bg-subtle-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.tools-see-more .see-more-icon {
  width: 20px;
  height: 20px;
  transition: transform var(--duration-base) var(--ease-soft);
}

.tools-see-more.expanded .see-more-icon {
  transform: rotate(180deg);
}

/* Tools Horizontal Grid - 3 equal cards stacked horizontally */
.tools-horizontal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: var(--container-wide); /* 1200px for 3 cards */
  margin: 0 auto;
}

/* Mobile: Equal heights for stacked cards */
.tools-horizontal-grid .bento-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tools-horizontal-grid .bento-footer {
  margin-top: auto !important;
}

/* Tablet and Desktop: 3 cards in a horizontal row */
@media (min-width: 768px) {
  .tools-horizontal-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-lg);
  }
}

/* See More Tools Card */
.tools-see-more-card {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 240px;
  margin: var(--space-xl) auto 0 auto;
  padding: 12px 24px;
  /* Aqua gel button gradient - blue tint */
  background: linear-gradient(180deg,
    rgba(110, 160, 220, 0.95) 0%,
    rgba(90, 140, 200, 0.92) 50%,
    rgba(70, 120, 180, 0.9) 100%
  );
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.2s var(--ease-soft);
  box-shadow:
    0 2px 8px rgba(67, 133, 190, 0.25),
    0 4px 16px rgba(67, 133, 190, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tools-see-more-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg,
    rgba(120, 170, 230, 0.98) 0%,
    rgba(100, 150, 210, 0.95) 50%,
    rgba(80, 130, 190, 0.92) 100%
  );
  box-shadow:
    0 4px 12px rgba(67, 133, 190, 0.35),
    0 8px 24px rgba(67, 133, 190, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.tools-see-more-card:active {
  transform: translateY(-1px);
  box-shadow:
    0 1px 4px rgba(67, 133, 190, 0.3),
    inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tools-see-more-text {
  font-family: "Lucida Grande", "Helvetica Neue", -apple-system, sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-style: normal;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.01em;
}

/* Tight internal padding for all bento cards */
.bento-card {
  padding: var(--pad-sm) !important; /* Tight padding */
}

/* Scale down typography and icons */
.bento-header {
  gap: var(--space-xs); /* Tight gap */
  margin-bottom: var(--space-xs); /* Tight margin */
}

.bento-icon {
  width: 1.25rem !important; /* Smaller icons */
  height: 1.25rem !important;
}

.bento-icon svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

.bento-title {
  font-size: var(--text-lg) !important; /* Smaller titles */
  margin: 0 !important;
}

.bento-description {
  font-size: var(--text-sm) !important; /* Compact descriptions */
  line-height: var(--leading-snug) !important;
  margin-bottom: var(--space-sm) !important;
}

.bento-footer {
  font-size: var(--text-xs) !important; /* Tiny footer */
  line-height: var(--leading-snug) !important;
  margin-top: var(--space-sm) !important;
  margin-bottom: 0 !important;
}

/* Mobile scaling for bento cards */
@media (max-width: 640px) {
  .bento-card {
    padding: var(--pad-xs) !important; /* Extra tight padding */
  }

  .bento-icon {
    width: 1rem !important; /* Smaller icons on mobile */
    height: 1rem !important;
  }

  .bento-icon svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  .bento-title {
    font-size: var(--text-base) !important; /* 16px */
  }

  .bento-description {
    font-size: var(--text-xs) !important; /* 12px */
    line-height: var(--leading-tight) !important;
  }

  .bento-footer {
    font-size: 0.75rem !important; /* 12px instead of 10px - accessibility minimum */
    opacity: 0.8; /* Maintain subtlety through opacity */
  }
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-warm);
}

/* Pill-triggered glow effect */
.bento-card.pill-glow {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 2px rgba(255, 139, 123, 0.4),
    0 0 30px rgba(255, 139, 123, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: var(--orbit-core);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-people.pill-glow {
  box-shadow:
    0 0 0 2px rgba(255, 139, 123, 0.4),
    0 0 30px rgba(255, 139, 123, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: var(--orbit-core);
}

.bento-gather.pill-glow {
  box-shadow:
    0 0 0 2px rgba(255, 196, 140, 0.4),
    0 0 30px rgba(255, 196, 140, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: var(--orbit-inner);
}

.bento-moments.pill-glow {
  box-shadow:
    0 0 0 2px rgba(196, 201, 255, 0.4),
    0 0 30px rgba(196, 201, 255, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: var(--orbit-outer);
}

.bento-invites.pill-glow {
  box-shadow:
    0 0 0 2px rgba(131, 185, 255, 0.4),
    0 0 30px rgba(131, 185, 255, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: var(--orbit-far);
}

.bento-rituals.pill-glow {
  box-shadow:
    0 0 0 2px rgba(218, 112, 44, 0.4),
    0 0 30px rgba(218, 112, 44, 0.3),
    0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: var(--accent-warm);
}

/* Icon and title on same line */
.bento-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.bento-header .bento-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent-warm);
  opacity: 0.9;
  flex-shrink: 0;
}

.bento-header .bento-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

.bento-header .bento-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}

/* Legacy support for cards without bento-header wrapper */
.bento-card > .bento-icon {
  width: 2rem;
  height: 2rem;
  color: var(--accent-warm);
  opacity: 0.9;
  flex-shrink: 0;
}

.bento-card > .bento-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.bento-card > .bento-title {
  margin: 0;
}

/* Header row with icon and title */
.bento-card > .bento-icon + .bento-title {
  display: inline-block;
  margin-left: 0.75rem;
  vertical-align: middle;
}

.bento-card > .bento-icon,
.bento-card > .bento-title {
  display: inline-block;
  vertical-align: middle;
}

/* Cosmic gradient colors for bento icons */
.bento-people .bento-icon {
  color: var(--orbit-core);
}

.bento-gather .bento-icon {
  color: var(--orbit-inner);
}

.bento-moments .bento-icon {
  color: var(--orbit-outer); /* Lavender - Ring 4 */
}

.bento-share .bento-icon {
  color: var(--orbit-far);
}

.bento-invites .bento-icon {
  color: var(--orbit-far); /* Sky blue - for sharing */
}

.bento-rituals .bento-icon {
  color: var(--accent-warm); /* Warm orange - for recurring connections */
}

.bento-signup .bento-icon {
  color: var(--accent-glow); /* Golden amber - beta theme */
}

/* Dark mode - brighter versions for visibility */
[data-theme="dark"] .bento-people .bento-icon {
  color: var(--orbit-core-bright);
}

[data-theme="dark"] .bento-gather .bento-icon {
  color: var(--orbit-inner-bright);
}

[data-theme="dark"] .bento-moments .bento-icon {
  color: var(--orbit-outer-bright); /* Brighter lavender */
}

[data-theme="dark"] .bento-share .bento-icon {
  color: var(--orbit-far-bright);
}

[data-theme="dark"] .bento-invites .bento-icon {
  color: var(--orbit-far-bright);
}

[data-theme="dark"] .bento-signup .bento-icon {
  color: var(--accent-glow); /* Brighter golden amber */
}

.bento-title {
  font-size: var(--card-title);
  font-weight: var(--weight-normal);
  color: var(--text-default);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-snug);
}

.bento-description {
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-subtle);
  margin-top: var(--space-xs);
  display: block;
}

/* People card special styling */
.bento-people {
  background: var(--bg-subtle);
}

.bento-people .bento-icon {
  color: var(--accent-warm); /* Inner Orbit orange - for closest relationships */
}

/* Person Preview Card */
.person-preview {
  margin: var(--space-sm) 0;
  padding: var(--pad-xs); /* Tight padding for compact UI sample */
  background: var(--bg-default);
  border-radius: 0.75rem;
  border: 0.0625rem solid var(--border-subtle);
}

.person-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.person-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orbit-core), var(--orbit-inner));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-normal);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.person-info {
  flex: 1;
}

.person-name {
  font-weight: var(--weight-normal);
  font-size: var(--text-base);
  color: var(--text-default);
  margin-bottom: 0.125rem;
}

.person-circle {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.person-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.tag {
  display: inline-block;
  padding: calc(var(--space-xs) / 2) 0.625rem;
  background: rgba(255, 139, 123, 0.12);
  color: var(--accent-warm);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: 0.0625rem solid rgba(218, 112, 44, 0.2);
}

[data-theme="dark"] .tag {
  background: rgba(255, 155, 139, 0.15);
  color: var(--orbit-core-bright);
  border-color: rgba(255, 155, 139, 0.25);
}

.person-qualities {
  margin-bottom: 0.75rem;
  padding: var(--pad-xs-plus);
  background: var(--bg-subtle);
  border-radius: 0.5rem;
  font-size: var(--text-sm);
}

.quality-pair {
  margin-bottom: 0.25rem;
  color: var(--text-subtle);
}

.quality-pair:last-child {
  margin-bottom: 0;
}

.quality-key {
  font-weight: var(--weight-normal);
  color: var(--text-default);
  margin-right: 0.25rem;
}

.person-note {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-subtle);
  font-style: italic;
  padding: var(--pad-xs-plus);
  background: var(--bg-subtle);
  border-radius: 0.5rem;
}

/* Insights Calendar - GitHub Activity View Style */
.insights-calendar {
  margin-top: 0.5rem;
  padding: var(--pad-xs);
  background: var(--bg-subtle);
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--border-subtle);
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.calendar-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.375rem;
}

/* GitHub-style activity grid - 52 weeks × 7 days */
.calendar-grid-dense {
  display: grid;
  grid-template-columns: repeat(52, 4px);
  grid-template-rows: repeat(7, 4px);
  grid-auto-flow: column; /* Fill by columns (weeks) not rows */
  gap: 2px;
  width: fit-content;
}

.calendar-day {
  width: 4px;
  height: 4px;
  background: var(--bg-muted);
  border-radius: 1px;
  border: 0.5px solid var(--border-subtle);
  transition: all 0.2s ease;
  cursor: pointer;
}

.calendar-day:hover {
  transform: scale(1.5);
  border-color: var(--accent-warm);
  box-shadow: 0 0 4px rgba(218, 112, 44, 0.4);
  z-index: 10;
}

/* 3-color system for different interaction types (GitHub-style) */
/* Level 0: Empty/no activity */
.calendar-day.level-0 {
  background: var(--bg-subtle);
  border-color: var(--border-subtle);
}

/* Type 1: Conversations/Messages (Orange) */
.calendar-day.level-1 {
  background: rgba(218, 112, 44, 0.35);
  border-color: rgba(218, 112, 44, 0.5);
}

/* High intensity orange */
.calendar-day.level-1.high {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
}

/* Type 2: Gatherings/Events (Green) */
.calendar-day.level-2 {
  background: rgba(135, 154, 57, 0.35);
  border-color: rgba(135, 154, 57, 0.5);
}

/* High intensity green */
.calendar-day.level-2.high {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

/* Type 3: Notes/Moments (Blue) */
.calendar-day.level-3 {
  background: rgba(67, 133, 190, 0.35);
  border-color: rgba(67, 133, 190, 0.5);
}

/* High intensity blue */
.calendar-day.level-3.high {
  background: var(--accent-info);
  border-color: var(--accent-info);
}

/* Type 4: Multiple interactions (Purple - mixed) */
.calendar-day.level-4 {
  background: rgba(139, 126, 200, 0.35);
  border-color: rgba(139, 126, 200, 0.5);
}

/* High intensity purple */
.calendar-day.level-4.high {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
}

/* Dark mode adjustments */
[data-theme="dark"] .calendar-day.level-1 {
  background: rgba(232, 146, 58, 0.4);
  border-color: rgba(232, 146, 58, 0.5);
}

[data-theme="dark"] .calendar-day.level-1.high {
  background: var(--accent-glow);
  border-color: var(--accent-glow);
}

[data-theme="dark"] .calendar-day.level-2 {
  background: rgba(135, 154, 57, 0.4);
  border-color: rgba(135, 154, 57, 0.5);
}

[data-theme="dark"] .calendar-day.level-2.high {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

[data-theme="dark"] .calendar-day.level-3 {
  background: rgba(67, 133, 190, 0.4);
  border-color: rgba(67, 133, 190, 0.5);
}

[data-theme="dark"] .calendar-day.level-3.high {
  background: var(--accent-info);
  border-color: var(--accent-info);
}

[data-theme="dark"] .calendar-day.level-4 {
  background: rgba(139, 126, 200, 0.4);
  border-color: rgba(139, 126, 200, 0.5);
}

[data-theme="dark"] .calendar-day.level-4.high {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
}

/* Responsive - smaller tiles on mobile */
@media (max-width: 640px) {
  .calendar-grid-dense {
    grid-template-columns: repeat(52, 3px);
    grid-template-rows: repeat(7, 3px);
    gap: 1px;
  }

  .calendar-day {
    width: 3px;
    height: 3px;
    border-radius: 0.5px;
  }
}

.bento-footer {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  margin-top: var(--space-sm);
  font-style: italic;
}

.bento-visual {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mini-orbit {
  width: 12.5rem;
  height: 12.5rem;
  animation: gentleRotate 60s linear infinite;
}

/* Thicker rings for bento mini-orbit */
.mini-orbit .orbit-ring-2 {
  stroke-width: 4;
}

.mini-orbit .orbit-ring-3 {
  stroke-width: 3.5;
}

.mini-orbit .orbit-ring-4 {
  stroke-width: 3;
}

.mini-orbit .orbit-ring-5 {
  stroke-width: 2.5;
}

.mini-orbit .orbit-ring-6 {
  stroke-width: 2;
}

/* Card-specific colors */
.bento-gather .bento-icon {
  color: var(--accent-info); /* Far Orbit blue - for gathering people */
}

.bento-moments .bento-icon {
  color: var(--accent-purple); /* Near Orbit violet - for personal notes */
}

.bento-invites .bento-icon {
  color: var(--orbit-far);
}

/* Background patterns removed for cleaner Flexoki paper aesthetic */

/* Mini Signup Form (in Bento) */
.mini-signup-form {
  margin-top: 1rem;
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.mini-input {
  flex: 1;
  padding: var(--pad-xs-plus) var(--pad-sm-minus);
  font-size: var(--text-md);
  border: 1.5px solid var(--border-default);
  border-radius: 0.5rem;
  background: var(--bg-default);
  color: var(--text-default);
  transition: all 0.2s ease;
  font-family: inherit;
}

.mini-input::placeholder {
  color: var(--text-muted); /* Darker for better contrast (was --text-subtle with opacity) */
  /* Removed opacity: 0.6 - maintains WCAG AA contrast */
}

.mini-input:focus {
  outline: none;
  border-color: var(--accent-glow);
  box-shadow: 0 0 0 3px rgba(230, 180, 80, 0.1);
}

.mini-input:invalid {
  border-color: var(--border-default);
}

.mini-input[aria-invalid="true"] {
  border-color: var(--accent-red-bright);
}

.mini-btn {
  padding: var(--pad-xs-plus) var(--text-lg);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  color: var(--bg-surface);
  background: linear-gradient(135deg, var(--accent-glow) 0%, var(--accent-gold-deep) 100%);
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
}

.mini-btn:hover {
  background: linear-gradient(135deg, var(--accent-glow) 0%, var(--accent-glow) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(230, 180, 80, 0.3);
}

.mini-btn:active {
  transform: translateY(0);
}

.mini-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.mini-btn.loading {
  position: relative;
  color: transparent;
}

.mini-btn.loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 0.125rem solid var(--color-dark-1);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .mini-signup-form {
    flex-direction: column;
  }

  .mini-btn {
    width: 100%;
  }
}

/* Signup Section with Parallax */
.signup {
  padding: calc(var(--pad-xl) + var(--space-xl)) 0;
  background: var(--bg-default);
  position: relative;
}

.signup-content {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.section-subtitle {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--text-subtle);
  margin-bottom: 1.5rem;
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
}

.super-hero-signup {
  background: linear-gradient(135deg, var(--accent-info) 0%, var(--orbit-navy-mid) 100%);
  padding: var(--pad-md);
  border-radius: 1.5rem;
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .super-hero-signup {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Textured paper overlay */
.super-hero-signup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
  opacity: 0.3;
  pointer-events: none;
}

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: var(--weight-medium);
}

.required {
  color: rgba(255, 255, 255, 0.7);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: var(--radius-sm);
  border: 0.0625rem solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--bg-surface);
  font-size: var(--text-base);
  transition: all 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  background: var(--color-white);
}

.form-textarea {
  resize: vertical;
  font-family: inherit;
}

.form-error {
  display: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
  margin-top: 0.25rem;
  background: rgba(0, 0, 0, 0.2);
  padding: var(--pad-xs);
  border-radius: 0.5rem;
}

.form-error.show {
  display: block;
}

.form-message {
  margin-top: 1rem;
  padding: var(--space-md);
  border-radius: 0.75rem;
  text-align: center;
  display: none;
  position: relative;
  z-index: 1;
}

.form-message.success {
  display: block;
  background: rgba(255, 255, 255, 0.95);
  color: var(--accent-teal);
  font-weight: var(--weight-normal);
}

.form-message.error {
  display: block;
  background: rgba(255, 255, 255, 0.95);
  color: var(--accent-red-darker);
  font-weight: var(--weight-normal);
}

/* Special button styling for blue form */
.super-hero-signup .btn-primary {
  background: linear-gradient(135deg, var(--accent-glow) 0%, var(--accent-gold-deep) 100%);
  color: var(--bg-surface);
  font-weight: var(--weight-normal);
  position: relative;
  z-index: 1;
}

.super-hero-signup .btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-glow) 0%, var(--accent-glow) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(230, 180, 80, 0.4);
}

/* ========================================
   Personas Carousel Section
   ======================================== */

.personas-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad-md) 0;
  background: transparent;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .personas-carousel {
    padding: calc(var(--pad-xl) + var(--space-md)) 0;
  }
}

.personas-container {
  width: 96%;
  max-width: var(--col-9); /* 1050px - 9 columns */
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

/* Center the title wrapper */
.personas-carousel .sidekick {
  text-align: center;
  max-width: var(--col-6); /* 700px - 6 columns for title */
  margin: 0 auto;
}

.personas-carousel .section-title {
  display: inline-block;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--disconnection-text);
  font-style: italic;
  transition:
    color 0.45s ease,
    text-shadow 0.6s ease;
  white-space: nowrap; /* Keep "dis" and "connection" on same line as single word */
  max-width: var(--col-6); /* 700px - 6 columns */
  transform: translateX(-10%); /* Shift 10% left */
}

/* "Dis" prefix that fades out on connection */
.personas-carousel .section-title .title-prefix {
  display: inline;
  opacity: 1;
  transition: opacity 0.6s ease;
  letter-spacing: var(--tracking-normal);
  margin-right: 0;
  padding-right: 0;
}

/* When any persona card is hovered or tapped, the section title lights up with connection */
.personas-carousel:has(.persona-card:hover) .section-title,
.personas-carousel:has(.persona-card.tapped) .section-title {
  color: var(--connection-text);
  text-shadow: 0 0 12px var(--connection-glow);
}

/* Fade out "Dis" when connection happens */
.personas-carousel:has(.persona-card:hover) .section-title .title-prefix,
.personas-carousel:has(.persona-card.tapped) .section-title .title-prefix {
  opacity: 0;
}

.personas-carousel .section-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-lg);
  margin-bottom: 2rem;
  max-width: 37.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* Carousel Wrapper */
.carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: var(--col-9); /* 1050px - 9 columns */
  margin: 0 auto;
  overflow: hidden;
  padding: var(--space-md) 0 var(--space-md);
  cursor: grab;
}

.carousel-wrapper:active {
  cursor: grabbing;
}

/* Edge fade effects */
.carousel-wrapper::before,
.carousel-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7.5rem;
  pointer-events: none;
  z-index: 2;
}

.carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-default) 0%, transparent 100%);
}

.carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-default) 0%, transparent 100%);
}

/* Carousel Track */
.carousel-track {
  display: flex;
  gap: 0.75rem;
  transition: transform 0.5s ease-out;
  will-change: transform;
}

/* Persona Card - 50% smaller */
.persona-card {
  flex: 0 0 140px;
  min-width: 8.75rem;
  background: var(--bg-subtle);
  border-radius: 0.75rem;
  padding: var(--space-md) var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* Remove blue tap highlight on mobile */
}

[data-theme="dark"] .persona-card {
  background: var(--bg-muted);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

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

[data-theme="dark"] .persona-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Avatar */
.persona-avatar {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.persona-portrait {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(100%);
  box-shadow: var(--shadow-sm);
  transition: filter 0.35s var(--ease-soft); /* Slightly longer for mobile bloom */
}

/* Legacy avatar styles (kept for compatibility) */
.avatar-placeholder {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.avatar-initials {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-family: var(--font-serif);
}

/* Persona Content */
.persona-content {
  text-align: center;
}

.persona-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-default);
  margin-bottom: 0.25rem;
  font-family: var(--font-serif);
  line-height: var(--leading-tight);
}

.persona-tag {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
  margin-bottom: 0.5rem;
  font-weight: var(--weight-normal);
}

/* State wrapper for disconnection/connection text swap */
.persona-state-wrapper {
  position: relative;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.persona-disconnection,
.persona-connection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: var(--text-xs);
  line-height: 1.4;
  font-weight: var(--weight-normal);
  text-align: center;
  padding: 0 calc(var(--space-xs) / 2);
  transition: opacity 0.3s ease;
}

.persona-disconnection {
  opacity: 1;
  color: var(--disconnection-text);
}

.persona-connection {
  opacity: 0;
  color: var(--connection-text);
  transition-delay: 0.12s; /* Arrive 120ms after image color */
}

/* When auto-reverting (class removal), slow fade for "memory fading" effect */
.persona-card.tapped.fading .persona-connection {
  opacity: 0;
  transition: opacity 1s ease; /* Slower fade out like memory receding */
}

.persona-card.tapped.fading .persona-portrait {
  filter: grayscale(100%);
  transition: filter 1s ease; /* Slow color drain */
}

/* On hover (desktop) or tap (mobile): swap states */
.persona-card:hover .persona-disconnection,
.persona-card.tapped .persona-disconnection {
  opacity: 0;
  transition-delay: 0s; /* Fade out immediately */
}

.persona-card:hover .persona-connection,
.persona-card.tapped .persona-connection {
  opacity: 1;
  transition-delay: 0.12s; /* Fade in with warmth delay */
}

/* On hover (desktop) or tap (mobile): reveal color */
.persona-card:hover .persona-portrait,
.persona-card.tapped .persona-portrait {
  filter: grayscale(0%);
}

/* Tapped state adds a subtle bloom effect on mobile */
.persona-card.tapped {
  transform: scale(1.02);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Legacy quote styling - now unused */
.persona-quote::before {
  content: '"';
  position: absolute;
  left: -0.125rem;
  top: -0.25rem;
  font-size: var(--text-2xl);
  color: var(--accent-primary);
  opacity: 0.3;
  font-family: var(--font-serif);
  line-height: 1;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .personas-carousel {
    padding: calc(var(--space-xl) + var(--space-md)) 0 calc(var(--space-xl) * 2);
  }

  .persona-card {
    flex: 0 0 120px;
    min-width: 7.5rem;
    padding: var(--radius-sm) var(--space-xs);
  }

  .persona-portrait,
  .avatar-placeholder {
    width: 3.125rem;
    height: 3.125rem;
  }

  .avatar-initials {
    font-size: var(--text-base);
  }

  .persona-name {
    font-size: var(--text-xs);
  }

  .persona-tag {
    font-size: var(--text-xs);
  }

  .persona-disconnection,
  .persona-connection {
    font-size: var(--text-xs);
  }
}

/* Mobile: Two-row slow auto-scroll with gesture override */
@media (max-width: 768px) {
  .carousel-wrapper {
    overflow-x: auto; /* Allow horizontal scroll */
    overflow-y: hidden;
    padding: var(--space-md) 0;
    cursor: grab;
    -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
    scroll-behavior: smooth;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .carousel-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .carousel-wrapper:active {
    cursor: grabbing;
  }

  /* Keep edge fades on mobile for polish */
  .carousel-wrapper::before,
  .carousel-wrapper::after {
    width: 3.75rem; /* Smaller fade on mobile */
  }

  .carousel-track {
    display: grid;
    grid-template-columns: repeat(6, 140px); /* 6 cards wide (12 cards ÷ 2 rows) */
    grid-template-rows: repeat(2, auto); /* 2 rows */
    grid-auto-flow: column; /* Fill columns first, then rows */
    gap: 0.75rem;
    width: max-content;
    /* Slow auto-scroll animation - pauses on user interaction */
    animation: slow-scroll-mobile 60s linear infinite;
  }

  /* Pause animation when user is scrolling */
  .carousel-wrapper:active .carousel-track,
  .carousel-wrapper:hover .carousel-track {
    animation-play-state: paused;
  }

  @keyframes slow-scroll-mobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%); /* Scroll through half the cards */
    }
  }

  .persona-card {
    flex: 0 0 140px;
    min-width: 8.75rem;
    width: 8.75rem;
  }

  /* Larger cards and text on mobile for easier tapping */
  .persona-portrait {
    width: 70px;
    height: 70px;
  }

  .persona-name {
    font-size: var(--text-sm);
  }

  .persona-disconnection,
  .persona-connection {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  .persona-state-wrapper {
    min-height: 3rem; /* More breathing room */
  }
}

/* Carousel reflection paragraph - elegant closing thought */
.carousel-reflection {
  max-width: var(--col-6); /* 700px - 6 columns */
  margin: calc(var(--space-xl) + var(--space-md)) auto 0;
  padding: 0 var(--space-sm);
  text-align: center;
}

.carousel-reflection p {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  line-height: var(--leading-loose);
  color: var(--text-subtle);
  font-weight: var(--weight-normal);
  font-style: italic;
  position: relative;
}

/* Optional subtle quotation styling */
.carousel-reflection p::before,
.carousel-reflection p::after {
  content: "";
  position: absolute;
  width: 2.5rem;
  height: 0.125rem;
  background: linear-gradient(to right, transparent, var(--accent-primary), transparent);
  opacity: 0.3;
}

.carousel-reflection p::before {
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-reflection p::after {
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .carousel-reflection {
    margin-top: 3rem;
  }

  .carousel-reflection p {
    font-size: var(--text-base);
  }
}


/* Lower Navigation Bar - Glass Card Style */
.lower-nav-section {
  padding: var(--space-xl) 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lower-nav {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  padding: var(--pad-sm) var(--pad-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: var(--blur-lg) saturate(200%);
  -webkit-backdrop-filter: var(--blur-lg) saturate(200%);
  box-shadow: var(--shadow-float);
  transition: all var(--duration-base) var(--ease-soft);
  max-width: fit-content;
}

[data-theme="dark"] .lower-nav {
  background: var(--glass-bg-dark);
  border-color: var(--glass-border-dark);
  box-shadow: var(--shadow-deep);
}

.lower-nav-link {
  color: var(--text-default);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-xs) var(--pad-sm);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-soft);
  opacity: 0.85;
  white-space: nowrap;
}

.lower-nav-link:hover {
  opacity: 1;
  background: rgba(131, 185, 255, 0.12);
}

[data-theme="dark"] .lower-nav-link:hover {
  background: rgba(147, 201, 255, 0.15);
}

.lower-nav-link-cta {
  color: var(--accent-info);
  font-weight: var(--weight-semibold);
  opacity: 1;
}

.lower-nav-link-cta:hover {
  background: rgba(67, 133, 190, 0.15);
  transform: translateY(-1px);
}

[data-theme="dark"] .lower-nav-link-cta {
  color: var(--orbit-far-bright);
}

[data-theme="dark"] .lower-nav-link-cta:hover {
  background: rgba(147, 201, 255, 0.2);
}

/* Mobile: Stack links vertically or reduce spacing */
@media (max-width: 640px) {
  .lower-nav {
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--pad-xs) var(--pad-sm);
    justify-content: center;
  }

  .lower-nav-link {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--pad-xs);
  }
}

/* Footer - Floating Card Style */
.footer {
  padding: 0;
  background: transparent;
  border-top: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: var(--radius-sm);
}

@media (min-width: 768px) {
  .footer {
    margin: var(--space-md);
  }
}

/* Footer shadow wrapper - separate from card for proper shadow rendering */
.footer-shadow-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: 1.5rem;
  box-shadow:
    0 20px 60px rgba(16, 15, 15, 0.15),
    0 8px 24px rgba(16, 15, 15, 0.1);
}

@media (min-width: 768px) {
  .footer-shadow-wrapper {
    border-radius: 2rem;
  }
}

[data-theme="dark"] .footer-shadow-wrapper {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Footer card - matches hero styling with 12-column layout */
.super-hero-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  border-radius: 1.5rem;
  padding: var(--pad-md) var(--pad-md); /* Compact vertical padding */
  text-align: center;
  background: #1a1a1a; /* Almost black dark grey */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  border: 0.0625rem solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  margin: 0 auto;
}

/* Add noise texture overlay to footer */
.super-hero-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,.02) 2px, rgba(255,255,255,.02) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,.02) 2px, rgba(255,255,255,.02) 4px);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 768px) {
  .super-hero-footer {
    padding: var(--pad-lg) var(--pad-md); /* Reduced vertical padding on tablet */
    border-radius: 2rem;
  }
}

@media (min-width: 1024px) {
  .super-hero-footer {
    padding: var(--pad-lg) var(--pad-lg); /* Compact vertical padding on desktop */
  }
}

@media (min-width: 1536px) {
  .super-hero-footer {
    padding: var(--pad-lg) 0; /* Remove side padding on ultra-wide */
  }
}

[data-theme="dark"] .super-hero-footer {
  background: #141414; /* Even darker in dark mode */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

/* Footer craft paper - lighter for dark background */
.super-hero-footer .craft-paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen; /* Screen mode for dark backgrounds */
  opacity: 0.12; /* Slightly more visible */
}

/* White craft paper for dark backgrounds (footer) */
.craft-paper-white {
  mix-blend-mode: screen;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      var(--paper-grain-v-white) 1px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      var(--paper-grain-h-white) 1px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      var(--paper-fiber-1-white) 1px,
      transparent 2px,
      transparent 18px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      var(--paper-fiber-2-white) 1px,
      transparent 2px,
      transparent 24px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      var(--paper-fiber-3-white) 1px,
      transparent 3px,
      transparent 6px
    );
  background-size:
    0.25rem 4px,
    4px 4px,
    18px 18px,
    24px 24px,
    100% 6px;
  background-position:
    0 0,
    2px 2px,
    0 0,
    12px 12px,
    0 0;
}

/* Update text colors for dark footer */
.super-hero-footer .footer-logo,
.super-hero-footer .footer-tagline,
.super-hero-footer .footer-link,
.super-hero-footer .footer-copyright {
  color: rgba(255, 255, 255, 0.9);
}

.super-hero-footer .footer-tagline {
  color: rgba(255, 255, 255, 0.75); /* Lighter for readability */
}

.super-hero-footer .footer-copyright {
  color: rgba(255, 255, 255, 0.7); /* Much lighter for readability */
}

.super-hero-footer .footer-link:hover {
  color: var(--orbit-core);
}

.footer-brand {
  margin-bottom: var(--space-sm); /* Compact spacing */
  position: relative;
  z-index: 1;
}

/* Footer logo - links to nav logo-text styles */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display); /* Poppins - matches nav */
  font-weight: var(--weight-extrabold); /* 800 - matches nav */
  font-size: var(--text-lg); /* Matches nav logo-text base size */
  color: var(--text-default);
  margin-bottom: 0.25rem; /* Minimal spacing */
}

.footer-tagline {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xs); /* Minimal spacing to copyright */
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.footer-link {
  color: var(--text-subtle);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--accent-primary);
}

.footer-copyright {
  color: var(--text-muted);
  font-size: var(--text-sm);
  position: relative;
  z-index: 1;
}

/* Animations */
.fade-in {
  animation: fadeIn 1s ease-out;
}

.slide-in {
  animation: slideIn 0.8s ease-out;
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .nav-container {
    padding: var(--radius-sm) var(--space-sm);
  }

  .nav-links {
    display: none;
  }

  .hero {
    padding: calc(var(--pad-xl) + var(--space-md)) 0;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 18.75rem;
  }

  .signup {
    padding: var(--pad-xl) 0;
  }

  .super-hero-signup {
    padding: var(--pad-sm);
  }

  .footer-links {
    flex-direction: column;
    gap: 1rem;
  }
}
/* Legal and Support Pages */
.legal-content {
  padding: var(--pad-xl) 0;
  min-height: calc(100vh - 8rem);
}

.legal-article {
  max-width: 50rem;
  margin: 0 auto;
  background: var(--bg-default);
  padding: var(--pad-xl);
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--border-subtle);
}

.legal-article h1 {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.legal-article h2 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.legal-article h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.legal-article h4 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.legal-article p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
}

.legal-article ul,
.legal-article ol {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-sm);
  padding-left: var(--space-md);
  color: var(--text-secondary);
}

.legal-article li {
  margin-bottom: var(--space-xs);
}

.legal-article a {
  color: var(--accent-info);
  text-decoration: none;
  border-bottom: 0.0625rem solid transparent;
  transition: all var(--duration-fast) var(--ease-soft);
}

.legal-article a:hover {
  border-bottom-color: var(--accent-info);
}

.legal-article section {
  margin-bottom: var(--space-lg);
}

.legal-summary {
  background: var(--bg-muted);
  padding: var(--pad-md);
  border-radius: var(--radius-lg);
  margin-bottom: var(--pad-xl);
}

.legal-summary h2 {
  margin-top: 0;
}

.legal-date {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-lg);
  font-style: italic;
}

/* Mobile responsiveness for legal content */
@media (max-width: 768px) {
  .legal-content {
    padding: var(--pad-md) 0;
  }

  .legal-article {
    padding: var(--pad-md);
    border-radius: var(--radius-sm);
  }

  .legal-article h1 {
    font-size: var(--text-3xl);
  }

  .legal-article h2 {
    font-size: var(--text-xl);
  }

  .legal-article h3 {
    font-size: var(--text-base);
  }

  .legal-summary {
    padding: var(--pad-sm);
  }
}

@media (max-width: 640px) {
  .legal-article {
    padding: var(--pad-sm);
  }

  .legal-article h1 {
    font-size: var(--text-2xl);
  }

  .legal-article h2 {
    font-size: var(--text-lg);
  }
}

.support-section {
  margin-bottom: 3rem;
}

.support-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.support-card,
.contact-card {
  background: var(--bg-muted);
  padding: var(--pad-md);
  border-radius: 0.75rem;
  border: 0.0625rem solid var(--border-subtle);
}

.contact-card {
  text-align: center;
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

/* FAQ Items */
.faq-item {
  margin-bottom: 1rem;
  border: 0.0625rem solid var(--border-subtle);
  border-radius: 0.5rem;
  background: var(--bg-muted);
}

.faq-item summary {
  padding: var(--space-md) var(--space-sm);
  cursor: pointer;
  font-weight: var(--weight-medium);
  color: var(--text-default);
}

.faq-item p {
  padding: var(--pad-sm);
  margin: 0;
  color: var(--text-subtle);
}

/* Heart Animation */
.heart {
  color: var(--accent-error);
  display: inline-block;
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.link {
  color: var(--accent-primary);
  text-decoration: none;
  border-bottom: 0.0625rem solid transparent;
  transition: all 0.2s ease;
}

.link:hover {
  border-bottom-color: var(--accent-primary);
}

/* Dunbar Visualization Section - now using .section.container-grid + .col-9.col-center */

.orbit-canvas {
  position: relative;
  background: linear-gradient(135deg, var(--color-dark-5) 0%, var(--color-dark-4) 100%);
  border-radius: 1.75rem;
  padding: var(--pad-xl);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 10px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border: 0.0625rem solid rgba(255, 255, 255, 0.08);
  overflow: visible; /* Changed from hidden to allow graph overflow */
}

/* Desktop: Restrict card to 6 columns (50% width) */
@media (min-width: 1024px) {
  .orbit-canvas {
    max-width: 50%;
    margin: 0 auto;
  }
}

/* Dark paper texture */
.orbit-canvas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
  opacity: 0.5;
  pointer-events: none;
}

.orbit-canvas-header {
  text-align: center;
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.orbit-canvas-header .section-subtitle {
  font-family: var(--font-serif); /* Lora */
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.orbit-canvas-subtitle {
  font-family: var(--font-sans); /* Inter */
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 37.5rem;
  margin: 0 auto;
}

#dunbar-svg {
  width: 100%;
  height: auto;
  max-height: 70vh;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Desktop: Make graph extend beyond card by 69% */
@media (min-width: 1024px) {
  #dunbar-svg {
    width: 169%; /* Extends beyond card by 69% of card width */
    max-width: none;
    transform: translateX(0); /* Centered by default */
  }
}

.orbit-legend {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

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

.legend-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.legend-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* Dark mode specific adjustments for visualization */
[data-theme="dark"] .orbit-canvas {
  background: linear-gradient(135deg, var(--color-near-black-alt) 0%, var(--color-dark-2) 100%);
}

[data-theme="dark"] .legend-label {
  color: var(--text-subtle);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .orbit-canvas {
    padding: var(--pad-sm);
    margin: var(--space-md) auto 0;
  }

  .orbit-legend {
    gap: 1rem;
    font-size: var(--text-xs);
  }

  #dunbar-svg {
    max-height: 50vh;
  }
}

/* Attribution styling */
.attribution {
  text-align: center;
  margin-top: 1rem;
  opacity: 0.7;
  font-size: var(--text-xs);
}

.attribution a {
  color: var(--text-muted);
  text-decoration: underline;
  transition: color 0.2s ease;
}

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

/* Orbit Canvas Embedded Wrapper */
.orbit-canvas-embedded {
  margin-top: var(--space-xl);
}

/* Orbit Control Pill */
.orbit-control-pill {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin: var(--space-md) auto 0;
  padding: var(--pad-xs) var(--pad-md);
  background: var(--glass-bg);
  backdrop-filter: var(--blur-lg) saturate(150%);
  -webkit-backdrop-filter: var(--blur-lg) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  width: fit-content;
}

[data-theme="light"] .orbit-control-pill {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-float);
}

.pill-toggle {
  cursor: pointer;
  user-select: none;
}

.pill-toggle input[type="checkbox"] {
  display: none;
}

.pill-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-xs) var(--space-md);
  border-radius: 1.875rem;
  transition: all 0.3s ease;
  background: transparent;
}

.pill-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  opacity: 0.4;
}

.toggle-core .pill-dot {
  background: var(--orbit-core);
}

.toggle-inner .pill-dot {
  background: var(--orbit-inner);
}

.toggle-near .pill-dot {
  background: var(--orbit-outer);
}

.toggle-far .pill-dot {
  background: var(--orbit-far);
}

.pill-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: color 0.3s ease;
}

/* Active states */
.pill-toggle input:checked + .pill-button {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .pill-toggle input:checked + .pill-button {
  background: rgba(0, 0, 0, 0.05);
}

.pill-toggle input:checked + .pill-button .pill-dot {
  opacity: 1;
  box-shadow: 0 0 8px currentColor;
}

.toggle-core input:checked + .pill-button .pill-dot {
  box-shadow: 0 0 8px var(--orbit-core);
}

.toggle-inner input:checked + .pill-button .pill-dot {
  box-shadow: 0 0 8px var(--orbit-inner);
}

.toggle-near input:checked + .pill-button .pill-dot {
  box-shadow: 0 0 8px var(--orbit-outer);
}

.toggle-far input:checked + .pill-button .pill-dot {
  box-shadow: 0 0 8px var(--orbit-far);
}

.pill-toggle input:checked + .pill-button .pill-label {
  color: var(--text-default);
}

/* Hover effects */
.pill-button:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .pill-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.pill-button:hover .pill-dot {
  opacity: 0.7;
}

/* Responsive Pills */
@media (max-width: 768px) {
  .orbit-control-pill {
    gap: 0.5rem;
    padding: var(--space-xs) var(--radius-sm);
    flex-wrap: wrap;
  }

  .pill-button {
    padding: 0.4rem var(--radius-sm);
  }

  .pill-label {
    font-size: var(--text-xs);
  }
}

/* Dunbar Explanation */
.dunbar-explanation {
  max-width: 50rem;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.dunbar-explanation p {
  margin: var(--space-sm) 0;
  line-height: var(--leading-loose);
  color: var(--text-subtle);
  font-size: var(--text-lg);
}

.dunbar-explanation .dunbar-cta {
  color: var(--text-default);
  font-weight: var(--weight-medium);
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

/* Village Intro */
.village-intro {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

.village-intro h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  color: var(--text-default);
  margin: 0 0 var(--space-md) 0;
}

.village-intro p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-subtle);
  margin: 0;
}

/* Circles Names Section */
.circles-section {
  margin-top: var(--space-lg);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-wide); /* 1200px - wider than inner card */
  padding: var(--pad-lg); /* Reduced padding */
  background: linear-gradient(135deg, rgba(16, 15, 15, 0.5) 0%, rgba(16, 15, 15, 0.3) 100%);
  border-radius: var(--radius-lg); /* Inset card style */
  border: 0.0625rem solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1); /* Inset shadow */
}

[data-theme="light"] .circles-section {
  background: linear-gradient(135deg, rgba(255, 252, 240, 0.5) 0%, rgba(255, 252, 240, 0.3) 100%);
  border: 0.0625rem solid rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05); /* Inset shadow for light mode */
}

/* Dunbar Quote */
.dunbar-quote {
  margin-bottom: var(--space-xl);
  text-align: center;
}

.dunbar-quote blockquote {
  margin: 0 auto;
  padding: 0 var(--pad-md);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-subtle);
  font-style: italic;
  max-width: 50rem;
}

.dunbar-quote cite {
  display: block;
  margin-top: 1rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: normal;
  font-weight: var(--weight-medium);
}

/* Circles Grid */
.circles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
  gap: var(--space-md); /* Tighter gap */
  align-items: start;
  justify-items: start;
}

.circle-column {
  min-width: 0;
  width: 100%;
  max-width: 100%; /* Full width within column */
  text-align: left;
}

.circle-heading {
  margin: 0 0 calc(var(--space-xs) / 2) 0;
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.circle-heading::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
}

.circle-number {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  margin-right: 0.25rem;
  opacity: 0.9;
}

.circle-core .circle-heading {
  color: var(--orbit-core);
}

.circle-core .circle-heading::before {
  background: var(--orbit-core);
}

.circle-inner .circle-heading {
  color: var(--orbit-inner);
}

.circle-inner .circle-heading::before {
  background: var(--orbit-inner);
}

.circle-near .circle-heading {
  color: var(--orbit-outer);
}

.circle-near .circle-heading::before {
  background: var(--orbit-outer);
}

.circle-far .circle-heading {
  color: var(--orbit-far);
}

.circle-far .circle-heading::before {
  background: var(--orbit-far);
}

.circle-description {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  opacity: 0.8;
}

/* Names List */
.names-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.name-item {
  font-size: var(--text-sm);
  line-height: 1.4;
  transition: opacity 0.2s ease;
}

/* Progressive opacity for names */
.name-1 {
  color: var(--text-default);
}
.name-2 {
  color: var(--text-default);
  opacity: 0.95;
}
.name-3 {
  color: var(--text-subtle);
  opacity: 0.9;
}
.name-4 {
  color: var(--text-subtle);
  opacity: 0.85;
}
.name-5 {
  color: var(--text-subtle);
  opacity: 0.8;
}
.name-6 {
  color: var(--text-muted);
  opacity: 0.75;
}
.name-7 {
  color: var(--text-muted);
  opacity: 0.7;
}
.name-8 {
  color: var(--text-muted);
  opacity: 0.65;
}
.name-9 {
  color: var(--text-muted);
  opacity: 0.6;
}
.name-10 {
  color: var(--text-faint);
  opacity: 0.55;
}
.name-11 {
  color: var(--text-faint);
  opacity: 0.5;
}
.name-12 {
  color: var(--text-faint);
  opacity: 0.48;
}
.name-13 {
  color: var(--text-faint);
  opacity: 0.46;
}
.name-14 {
  color: var(--text-faint);
  opacity: 0.44;
}
.name-15 {
  color: var(--text-faint);
  opacity: 0.42;
}
.name-16 {
  color: var(--text-faint);
  opacity: 0.4;
}
.name-17 {
  color: var(--text-faint);
  opacity: 0.38;
}
.name-18 {
  color: var(--text-faint);
  opacity: 0.36;
}
.name-19 {
  color: var(--text-faint);
  opacity: 0.34;
}
.name-20 {
  color: var(--text-faint);
  opacity: 0.32;
}
.name-21 {
  color: var(--text-faint);
  opacity: 0.3;
}
.name-22 {
  color: var(--text-faint);
  opacity: 0.28;
}
.name-23 {
  color: var(--text-faint);
  opacity: 0.26;
}
.name-24 {
  color: var(--text-faint);
  opacity: 0.24;
}
.name-25 {
  color: var(--text-faint);
  opacity: 0.22;
}
.name-26 {
  color: var(--text-faint);
  opacity: 0.2;
}
.name-27 {
  color: var(--text-faint);
  opacity: 0.19;
}
.name-28 {
  color: var(--text-faint);
  opacity: 0.18;
}
.name-29 {
  color: var(--text-faint);
  opacity: 0.17;
}
.name-30 {
  color: var(--text-faint);
  opacity: 0.16;
}
.name-31 {
  color: var(--text-faint);
  opacity: 0.15;
}
.name-32 {
  color: var(--text-faint);
  opacity: 0.14;
}
.name-33 {
  color: var(--text-faint);
  opacity: 0.13;
}
.name-34 {
  color: var(--text-faint);
  opacity: 0.12;
}
.name-35 {
  color: var(--text-faint);
  opacity: 0.11;
}
.name-36 {
  color: var(--text-faint);
  opacity: 0.1;
}
.name-37 {
  color: var(--text-faint);
  opacity: 0.09;
}
.name-38 {
  color: var(--text-faint);
  opacity: 0.08;
}
.name-39 {
  color: var(--text-faint);
  opacity: 0.07;
}
.name-40 {
  color: var(--text-faint);
  opacity: 0.06;
}
.name-41 {
  color: var(--text-faint);
  opacity: 0.05;
}
.name-42 {
  color: var(--text-faint);
  opacity: 0.04;
}

/* Hover effect for names */
.name-item:hover {
  opacity: 1;
  color: var(--text-default);
  cursor: default;
}

/* Responsive adjustments */
/* Tablet responsiveness */
@media (max-width: 1023px) {
  .circles-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    gap: var(--space-md);
  }

  .circles-section {
    margin-top: var(--space-md);
    padding: var(--pad-lg);
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .circles-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: var(--space-md);
  }

  .circles-section {
    margin-top: var(--space-md);
    padding: var(--pad-md);
  }

  .dunbar-quote {
    margin-bottom: var(--space-md);
  }

  .dunbar-quote blockquote {
    font-size: var(--text-base);
    padding: 0 var(--pad-sm);
  }
}

/* Small mobile */
@media (max-width: 640px) {
  .circles-section {
    padding: var(--pad-sm);
  }

  .dunbar-quote blockquote {
    font-size: var(--text-sm);
  }
}

/* ============================================
   NEW SECTIONS - Ultra-refactor
   ============================================ */

/* Explainer Section */
.explainer {
  padding: calc(var(--pad-xl) + var(--space-xl)) 0;
  background: var(--bg-default);
}

.explainer-intro {
  text-align: center;
  font-size: var(--text-xl);
  line-height: var(--leading-loose);
  color: var(--text-subtle);
  max-width: 50rem;
  margin: 0 auto calc(var(--space-xl) + var(--space-md));
}

.explainer-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

.step {
  text-align: center;
  position: relative;
  padding: var(--pad-md);
  background: var(--bg-default);
  border-radius: 1rem;
  border: 0.0625rem solid var(--border-subtle);
  transition: all 0.3s ease;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-primary);
}

.step-number {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 2.5rem;
  background: var(--accent-primary);
  color: var(--bg-default);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
}

.step-icon {
  width: 4rem;
  height: 4rem;
  margin: var(--space-sm) auto var(--space-md);
  color: var(--accent-primary);
}

.step-icon svg {
  width: 100%;
  height: 100%;
}

/* Cosmic gradient colors for steps */
.step:nth-child(1) .step-icon {
  color: var(--orbit-core);
}

.step:nth-child(1) .step-number {
  background: var(--orbit-core);
}

.step:nth-child(2) .step-icon {
  color: var(--orbit-inner);
}

.step:nth-child(2) .step-number {
  background: var(--orbit-inner);
}

.step:nth-child(3) .step-icon {
  color: var(--orbit-outer); /* Lavender */
}

.step:nth-child(3) .step-number {
  background: var(--orbit-outer);
}

.step-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  color: var(--text-default);
  margin-bottom: 0.75rem;
}

.step-description {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-subtle);
}

/* Tools Section (replaces bento/features) */
.tools-section {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad-xl) 0;
  background: transparent;
}

@media (min-width: 1024px) {
  .tools-section {
    padding: calc(var(--pad-xl) + var(--space-xl)) 0;
  }
}

.tools-header {
  text-align: center;
  margin-bottom: 1.5rem;
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

.tools-header .section-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: var(--weight-medium);
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.tools-header .section-subtitle {
  font-size: clamp(1.125rem, 2.5vw, 1.25rem);
  color: var(--text-secondary);
  margin-top: 0;
  margin-bottom: 0;
  line-height: var(--leading-relaxed);
}

/* .tools-grid removed - now using .container-grid + .col-6 */

/* Social Proof Section */
.social-proof {
  padding: calc(var(--pad-xl) + var(--space-xl)) 0;
  background: var(--bg-subtle);
  position: relative;
}

.social-proof-content {
  text-align: center;
  max-width: var(--container-narrow); /* 900px */
  margin: 0 auto;
}

.social-proof-title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1.5rem;
  color: var(--text-default);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stat-number {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--weight-medium);
  background: linear-gradient(135deg, var(--orbit-core) 0%, var(--orbit-outer) 50%, var(--orbit-far) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: var(--leading-tight);
}

.stat-label {
  font-size: var(--text-md);
  color: var(--text-subtle);
  text-align: center;
}

.testimonial {
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--text-default);
  margin: 0;
  padding: var(--pad-md) 0;
  border-top: 0.0625rem solid var(--border-subtle);
  border-bottom: 0.0625rem solid var(--border-subtle);
}

/* Collapsible Circles Details */
.circles-details {
  margin-top: var(--space-lg);
  border: 0.0625rem solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 0;
  background: rgba(16, 15, 15, 0.3);
}

[data-theme="light"] .circles-details {
  background: rgba(255, 252, 240, 0.3);
  border-color: rgba(0, 0, 0, 0.1);
}

.circles-summary {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-default);
  transition: all 0.3s ease;
  user-select: none;
}

.circles-summary:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .circles-summary:hover {
  background: rgba(0, 0, 0, 0.03);
}

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

.summary-icon {
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  transition: transform 0.3s ease;
  color: var(--accent-primary);
}

.circles-details[open] .summary-icon {
  transform: rotate(45deg);
}

.summary-text {
  flex: 1;
}

.circles-details[open] .circles-section {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Hero Refactor - Clean, focused, efficient (polaroids hidden below 768px) */
@media (max-width: 767px) {
  /* Tighter mobile spacing */
  .super-hero-landing {
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-md);
  }

  /* Hero badge - smaller on mobile */
  .hero-badge {
    margin-bottom: 0.75rem;
  }

  .badge {
    font-size: var(--text-xs);
    padding: calc(var(--space-xs) * 0.75) 0.875rem;
  }

  /* Hero title - use fluid clamp for natural scaling */
  .hero-title {
    font-size: var(--hero-title); /* clamp(2rem, 4.5vw, 3rem) - fluid scaling */
    line-height: var(--leading-tight);
    margin-bottom: 0.75rem;
    letter-spacing: var(--tracking-tighter);
  }

  .hero-title br {
    display: none; /* Single line on mobile for better flow */
  }

  /* Hero subtitle - readable, concise */
  .hero-subtitle {
    font-size: var(--text-md); /* ~15px */
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-md);
    padding: 0 var(--space-xs);
  }

  /* CTA buttons - full width, stacked on mobile */
  .hero-cta {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-top: var(--space-lg); /* Add spacing below title */
  }

  .hero-cta .btn {
    width: 100%;
    max-width: 100%;
    padding: 0.875rem var(--space-sm);
    font-size: var(--text-base);
  }

  /* Hide orbit diagram on very small screens */
  .orbit-diagram-hero {
    display: none;
  }

  /* Hero text - full width on mobile */
  .hero-text {
    max-width: 100%;
    padding: 0;
  }

  .explainer-intro {
    font-size: var(--text-lg);
  }

  .explainer-steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .social-proof-title {
    font-size: var(--text-3xl);
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .testimonial {
    font-size: var(--text-lg);
  }

  .circles-summary {
    padding: var(--space-md) var(--space-sm);
    font-size: var(--text-base);
  }
}

/* Tablet Hero - Balanced layout */
@media (min-width: 641px) and (max-width: 1023px) {
  .super-hero-landing {
    padding: var(--space-xl) var(--space-md);
  }

  .hero-text {
    max-width: 95%; /* Wider on tablet for better title presence */
    padding: 0 var(--space-md);
  }

  .hero-title {
    font-size: var(--text-4xl); /* ~36px */
    margin-bottom: 1rem;
  }

  .hero-subtitle {
    font-size: var(--text-lg); /* ~17px */
    max-width: 600px;
    margin-bottom: var(--space-md);
  }

  .hero-cta {
    gap: 1rem;
    /* Maintain flow positioning - buttons stay below title */
    flex-direction: row; /* Side by side on tablet */
    flex-wrap: wrap;
  }

  .hero-cta .btn {
    min-width: 160px;
  }
}

/* Mobile-wide shared styles (all screens under 968px) */
@media (max-width: 1023px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text {
    text-align: center;
  }

  .hero-title {
    text-align: center;
  }

  .hero-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta {
    justify-content: center;
  }
}

/* Hero layout overhaul - centered devices with flanking polaroids */
.super-hero-landing {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: clamp(6rem, 8vh, 7.5rem) clamp(1.5rem, 4vw, 3rem) clamp(3.5rem, 6vh, 4.5rem);
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vh, 3rem);
  align-items: center;
  justify-content: center;
  min-height: clamp(680px, 85vh, 960px);
  height: auto;
  max-height: none;
}

.hero-layout {
  position: relative;
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr minmax(140px, 220px);
  grid-template-rows: auto 1fr;
  column-gap: clamp(1rem, 3vw, 3rem);
  row-gap: clamp(1.5rem, 3vh, 2rem);
  align-items: center;
  justify-items: center;
  z-index: 2;
  padding: 0 var(--space-lg);
}

.hero-center {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  width: 100%;
  max-width: none;
}

/* Override sidekick constraints within hero */
.hero-center > .sidekick {
  width: 100%;
  max-width: none;
  padding: 0;
}

.hero-text {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  transform: none;
}

.hero-title {
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3.5rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  text-align: center;
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.hero-devices-showcase {
  position: relative;
  width: clamp(320px, 55vw, 640px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: clamp(2rem, 5vh, 3rem);
  margin: 0 auto;
  transform: none;
}

.hero-ipad {
  position: relative;
  width: clamp(320px, 60vw, 480px);
  margin: 0 auto;
  z-index: 1;
}

.hero-iphone {
  position: absolute;
  left: clamp(8%, 18vw, 22%);
  bottom: clamp(-2.5rem, -4vh, -1.5rem);
  width: clamp(130px, 22vw, 190px);
  margin: 0;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
  z-index: 2;
}

.hero-orbit {
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
}

.hero-orbit-left {
  grid-column: 1;
  transform: rotate(-4deg);
}

.hero-orbit-right {
  grid-column: 3;
  transform: rotate(3deg);
}

@media (max-width: 1200px) {
  .hero-layout {
    max-width: 100%;
    grid-template-columns: minmax(120px, 180px) 1fr minmax(120px, 180px);
    column-gap: clamp(0.75rem, 2vw, 2rem);
    padding: 0 var(--space-md);
  }

  .hero-iphone {
    left: clamp(10%, 20vw, 24%);
  }
}

@media (max-width: 1023px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: clamp(1.5rem, 4vh, 2.5rem);
  }

  .hero-center {
    grid-column: 1;
    grid-row: 1;
  }

  .hero-orbit {
    display: none;
  }

  .hero-devices-showcase {
    width: min(90%, 520px);
  }
}

@media (max-width: 767px) {
  .super-hero-landing {
    padding: clamp(5rem, 7vh, 6rem) var(--space-md) clamp(3rem, 6vh, 4rem);
    gap: var(--space-lg);
  }

  .hero-devices-showcase {
    padding-top: var(--space-md);
  }
}

@media (max-width: 480px) {
  .hero-devices-showcase {
    width: min(100%, 360px);
  }

  .hero-iphone {
    position: static;
    width: clamp(160px, 60vw, 220px);
    margin: -3rem auto 0;
  }

  .hero-ipad {
    width: min(100%, 320px);
  }
}

/* ============================================
   CSS UI MOCKUPS FOR TOOLS
   ============================================ */

/* Enhanced bento cards with mockups */
.bento-moments .bento-visual-mockup,
.bento-gather .bento-visual-mockup,
.bento-invites .bento-visual-mockup,
.bento-rituals .bento-visual-mockup {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-muted);
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--border-subtle);
}

/* Moments Mockup - Memory card style with Flexoki colors */
.bento-moments .mockup-moment {
  background: var(--bg-default); /* Flexoki paper background */
  border-radius: 0.5rem;
  padding: var(--pad-xs); /* Tight padding for compact UI sample */
  border: 0.0625rem solid var(--border-subtle);
}

.mockup-moment-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.mockup-moment-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-primary); /* Flexoki orange */
  color: var(--bg-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.mockup-moment-info {
  flex: 1;
}

.mockup-moment-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--text-default);
  margin-bottom: 0.125rem;
}

.mockup-moment-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.mockup-moment-content {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-subtle);
  font-style: italic;
  margin-bottom: 0.75rem;
  padding: var(--pad-xs-plus);
  background: var(--bg-subtle); /* Flexoki subtle */
  border-radius: 0.375rem;
}

.mockup-moment-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.moment-tag {
  display: inline-block;
  padding: calc(var(--space-xs) / 2) var(--space-xs);
  background: rgba(139, 126, 200, 0.12); /* Flexoki purple tint */
  color: var(--accent-purple); /* Flexoki purple */
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border: 0.0625rem solid rgba(139, 126, 200, 0.25);
}

[data-theme="dark"] .moment-tag {
  background: rgba(212, 217, 255, 0.15);
  color: var(--orbit-outer-bright);
  border-color: rgba(212, 217, 255, 0.25);
}

/* Gather Mockup - Calendar/Event style */
.bento-gather .mockup-event {
  background: var(--bg-default);
  border-radius: 0.5rem;
  padding: var(--pad-xs); /* Tight padding for compact UI sample */
  margin-bottom: 0.5rem;
  max-width: 100%;
  width: 100%;
}

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

.mockup-event-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--text-default);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-event-date {
  font-size: var(--text-xs);
  color: var(--orbit-inner);
  font-weight: var(--weight-normal);
  white-space: nowrap;
  flex-shrink: 0;
}

.mockup-event-details {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  line-height: 1.4;
  margin-bottom: 0.625rem;
}

.mockup-rsvp-options {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
  flex-wrap: wrap;
}

.mockup-rsvp-btn {
  flex: 1;
  min-width: calc(33.333% - 0.25rem);
  padding: calc(var(--space-xs) * 0.75) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  /* Aqua gel button gradient */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(240, 245, 250, 0.85) 50%,
    rgba(225, 235, 245, 0.8) 100%
  );
  color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: "Lucida Grande", "Helvetica Neue", -apple-system, sans-serif;
  text-align: center;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.mockup-rsvp-btn:hover {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(245, 250, 255, 0.9) 50%,
    rgba(235, 245, 255, 0.85) 100%
  );
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Mobile adjustments for gather mockup */
@media (max-width: 768px) {
  .bento-gather .mockup-event {
    padding: var(--pad-xs-plus);
  }

  .mockup-event-title {
    font-size: var(--text-xs);
  }

  .mockup-event-date {
    font-size: var(--text-xs);
  }

  .mockup-event-details {
    font-size: var(--text-xs);
  }

  .mockup-rsvp-btn {
    font-size: var(--text-xs);
    padding: var(--pad-3xs) 0.4rem;
  }
}

.mockup-rsvp-btn:hover {
  background: var(--bg-subtle);
}

.mockup-rsvp-btn.active {
  background: var(--orbit-inner);
  color: var(--bg-surface);
  border-color: var(--orbit-inner);
  font-weight: var(--weight-normal);
}

.mockup-attendees {
  display: flex;
  gap: 0.25rem;
  margin-top: 0;
}

.mockup-attendee-dot {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 0.125rem solid var(--bg-default);
}

.mockup-attendee-dot:nth-child(1) {
  background: var(--orbit-core);
}
.mockup-attendee-dot:nth-child(2) {
  background: var(--orbit-inner);
}
.mockup-attendee-dot:nth-child(3) {
  background: var(--orbit-outer);
}
.mockup-attendee-dot:nth-child(4) {
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--text-subtle);
}

/* Share Mockup - Contact card style */
.bento-invites .mockup-card {
  background: linear-gradient(135deg, var(--orbit-far) 0%, var(--orbit-outer) 100%);
  border-radius: 1rem;
  padding: var(--pad-xs); /* Tight padding for compact UI sample */
  color: white;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-shadow: 0 8px 24px rgba(131, 185, 255, 0.25);
}

/* Light mode - use softer gradient with better contrast */
[data-theme="light"] .bento-invites .mockup-card {
  background: linear-gradient(135deg, var(--accent-info) 0%, var(--accent-purple) 100%);
  box-shadow: 0 8px 24px rgba(67, 133, 190, 0.2);
}

/* Dark mode - use brighter gradient */
[data-theme="dark"] .bento-invites .mockup-card {
  background: linear-gradient(135deg, var(--orbit-far-bright) 0%, var(--orbit-outer-bright) 100%);
  box-shadow: 0 8px 24px rgba(147, 201, 255, 0.3);
}

.mockup-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 150%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.mockup-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.mockup-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-semibold);
  color: var(--orbit-far);
  font-size: var(--text-xl);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mockup-card-avatar {
  background: rgba(255, 252, 240, 0.95);
  color: var(--accent-info);
}

[data-theme="dark"] .mockup-card-avatar {
  background: rgba(16, 15, 15, 0.9);
  color: var(--orbit-far-bright);
}

.mockup-card-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  letter-spacing: var(--tracking-tight);
}

.mockup-card-info {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  opacity: 0.95;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.mockup-card-info div {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Responsive sizing */
@media (min-width: 768px) {
  .bento-invites .mockup-card {
    padding: var(--pad-xs); /* Keep tight padding for compact UI */
  }

  .mockup-card-avatar {
    width: 3rem;
    height: 3rem;
    font-size: var(--text-lg);
  }

  .mockup-card-name {
    font-size: var(--text-base);
  }

  .mockup-card-info {
    font-size: var(--text-sm);
    gap: 0.5rem;
  }
}

/* Share card layout with portrait */
.share-card-layout {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.share-portrait {
  flex-shrink: 0;
  width: 5rem;
  height: 6.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.share-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rituals Mockup - Recurring event style with Flexoki colors */
.bento-rituals .mockup-ritual {
  background: var(--bg-default); /* Flexoki paper background */
  border-radius: 0.5rem;
  padding: var(--pad-xs); /* Tight padding for compact UI sample */
  border: 0.0625rem solid var(--border-subtle);
}

.mockup-ritual-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.mockup-ritual-icon {
  font-size: var(--text-2xl);
  line-height: 1;
}

.mockup-ritual-info {
  flex: 1;
}

.mockup-ritual-title {
  font-weight: var(--weight-normal);
  font-size: var(--text-sm);
  color: var(--text-default);
  margin-bottom: 0.125rem;
}

.mockup-ritual-frequency {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.mockup-ritual-guests {
  font-size: var(--text-xs);
  color: var(--text-default);
  margin-bottom: 0.625rem;
  padding: calc(var(--space-xs) * 0.75) 0.625rem;
  background: var(--bg-subtle); /* Flexoki subtle */
  border-radius: 0.375rem;
  display: inline-block;
  font-weight: var(--weight-medium);
}

.mockup-ritual-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--text-default);
  padding: var(--pad-xs);
  background: rgba(135, 154, 57, 0.12); /* Flexoki green tint */
  border-radius: 0.375rem;
  border: 0.0625rem solid rgba(135, 154, 57, 0.25);
}

.mockup-ritual-checkbox input[type="checkbox"] {
  width: 0.875rem;
  height: 0.875rem;
  cursor: not-allowed;
  accent-color: var(--accent-secondary); /* Flexoki green */
}

.mockup-ritual-checkbox label {
  cursor: default;
  user-select: none;
}

/* Responsive mockups */
@media (max-width: 768px) {
  .bento-moments .bento-visual-mockup,
  .bento-gather .bento-visual-mockup,
  .bento-invites .bento-visual-mockup,
  .bento-rituals .bento-visual-mockup {
    padding: var(--pad-xs); /* Keep tight padding on mobile */
    margin-top: 1rem;
  }

  /* Make Alex Kim card more compact on mobile */
  .bento-invites .mockup-card {
    padding: var(--pad-xs); /* Keep tight padding for compact UI */
    border-radius: 0.75rem;
  }

  .mockup-card-avatar {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--text-base);
  }

  .mockup-card-name {
    font-size: var(--text-sm);
  }

  .mockup-card-info {
    font-size: var(--text-xs);
    gap: 0.25rem;
  }

  .mockup-card-info div {
    padding: calc(var(--space-xs) / 4) 0;
  }
}

/* ============================================
   NEW: 3-CARD BENTO + FLOATING CARDS LAYOUT
   ============================================ */

/* Main bento grid - 3 cards in a row */
/* .tools-grid-main removed - now using .container-grid + .col-6 .card--spacious */

/* ============================================
   FLOATING TOOLS SECTION - SEPARATE SECTION
   ============================================ */

.floating-tools-section {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--space-sm) 0; /* No top padding - previous section provides spacing */
  background: transparent;
}

@media (min-width: 1024px) {
  .floating-tools-section {
    padding: 0 0 var(--space-xl) 0; /* No top padding - prevents double gap */
  }
}

.floating-tools-header {
  text-align: center;
  margin-bottom: 1.5rem;
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

/* Section title - using design tokens */
.floating-section-title {
  font-family: var(--font-serif);
  font-size: var(--section-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.floating-section-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

/* Floating card structure */
.floating-card {
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--pad-sm);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: var(--shadow-deep);
}

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

/* Bright Orbit ring colors for each card */
.floating-card-moments {
  background: var(--accent-purple); /* Flexoki purple - inner circle */
  color: var(--text-default);
}

.floating-card-rituals {
  background: var(--accent-warm); /* Flexoki orange - mid circle */
  color: var(--text-default);
}

.floating-card-groups {
  background: var(--accent-tertiary); /* Flexoki teal - outer circle */
  color: var(--text-default);
}

/* Craft-paper texture for floating cards */
.floating-card .craft-paper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 40% 80%, rgba(0, 0, 0, 0.04) 0%, transparent 30%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 3px
    );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.floating-card-inner {
  position: relative;
  z-index: 1;
}

/* Header with icon and title inline */
.floating-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.floating-card-icon {
  flex-shrink: 0;
  line-height: 1;
  color: var(--text-default);
}

.floating-card-icon svg {
  display: block;
  stroke: currentColor;
  opacity: 0.95;
}

.floating-card .bento-title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--weight-medium);
  margin: 0;
  color: var(--text-default);
  line-height: var(--leading-tight);
}

.floating-card .bento-description {
  color: rgba(255, 252, 240, 0.9);
  margin-bottom: 1.5rem;
  line-height: var(--leading-relaxed);
}

.floating-card .bento-footer {
  color: rgba(255, 252, 240, 0.8);
  font-size: var(--text-md);
  margin-top: 1.5rem;
  line-height: var(--leading-normal);
}

/* Mockup elements inside floating cards - Flexoki bg-subtle */
.floating-card .mockup-moment,
.floating-card .mockup-ritual,
.floating-card .constellation-group {
  background: var(--bg-subtle);
  border: 0.0625rem solid var(--border-subtle);
}

.floating-card .mockup-moment {
  border-radius: 0.5rem;
  padding: var(--pad-sm-minus);
}

.floating-card .mockup-moment + .mockup-moment {
  margin-top: 0.75rem;
}

.floating-card .mockup-ritual {
  border-radius: 0.5rem;
  padding: var(--pad-sm-minus);
}

.floating-card .mockup-ritual + .mockup-ritual {
  margin-top: 0.75rem;
}

.floating-card .constellation-group {
  border-radius: 0.75rem;
  padding: var(--space-md);
}

/* Floating cards wrapper */
.floating-cards-wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 96%;
  max-width: var(--container-normal); /* 1100px */
  margin: 0 auto;
}

@media (min-width: 768px) {
  .floating-cards-wrapper {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .floating-cards-wrapper {
    gap: 2rem;
  }
}

/* App Preview Section with iPhone Mockup */
/* ============================================
   iPHONE SHOWCASE SECTION - Ultra-minimal Layout
   ============================================ */

.iphone-showcase-minimal {
  padding: var(--pad-xl) 0;
  background: transparent;
}

.iphone-showcase-minimal .sidekick {
  max-width: var(--col-9); /* 1050px - 9 columns */
  margin: 0 auto;
}

/* Content Grid - 2 columns on desktop */
.iphone-content-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

/* Text Column - Ultra-minimal (uses highlight-sentence from existing styles) */
.iphone-text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Visual Column */
.iphone-visual-column {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Desktop layout: text left (60%), phone right (40%) - Ultra-minimal */
@media (min-width: 768px) {
  .iphone-content-grid {
    grid-template-columns: 60fr 40fr;
    gap: var(--space-xl);
  }

  .iphone-text-column {
    gap: var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Large desktop: increase spacing */
@media (min-width: 1024px) {
  .iphone-content-grid {
    gap: var(--space-xl);
  }
}

/* ============================================
   THE 150 PATTERN MINI - Centered 3-Column with Icon Circles
   ============================================ */

.pattern-150-mini {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* Ultra-tight gap between all children */
  text-align: center;
  padding: 0.75rem; /* Invisible card padding */
  max-width: var(--col-6); /* 700px - 6 columns for tighter feel */
  margin: 0 auto; /* No extra vertical margin */
}

/* Title - Lora serif */
.pattern-150-mini-title {
  font-family: var(--font-serif); /* Lora */
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1.05; /* Ultra-tight line height */
  color: var(--text-primary);
  margin: 0; /* No margin - using flexbox gap */
}

/* Intro - Inter sans */
.pattern-150-mini-intro {
  font-family: var(--font-sans); /* Inter */
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: 1.25; /* Tighter line height */
  color: var(--text-secondary);
  margin: 0; /* No margin - using flexbox gap */
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* 3-Column Grid */
.pattern-150-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md); /* Moderate gap between columns */
  max-width: 100%;
  margin: 0; /* No margin - using parent flexbox gap */
}

/* Individual Items */
.pattern-150-mini-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Colorful Icon Circles - Redesigned for consistency */
.pattern-150-icon {
  width: 3.5rem; /* 56px - slightly larger for better presence */
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0.5rem; /* More breathing room */
  position: relative;
  transition: all var(--duration-base) var(--ease-soft);
  /* Layered shadow for depth */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.06);
}

/* Glass overlay effect for modern look */
.pattern-150-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
  pointer-events: none;
}

.pattern-150-icon svg {
  width: 1.75rem; /* 28px icon - larger for clarity */
  height: 1.75rem;
  stroke: white;
  stroke-width: 2;
  position: relative;
  z-index: 1;
}

/* Icon colors - Flexoki palette with gradients */
.pattern-150-icon-green {
  background: linear-gradient(135deg, var(--accent-secondary) 0%, #7FB069 100%);
}

.pattern-150-icon-orange {
  background: linear-gradient(135deg, var(--accent-warm) 0%, #E87A5D 100%);
}

.pattern-150-icon-blue {
  background: linear-gradient(135deg, var(--accent-info) 0%, #5A92BE 100%);
}

.pattern-150-mini-item:hover .pattern-150-icon {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.12),
    0 8px 12px rgba(0, 0, 0, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.08);
}

/* Heading - Lora serif */
.pattern-150-mini-heading {
  font-family: var(--font-serif); /* Lora */
  font-size: var(--text-base); /* Compact heading */
  font-weight: var(--weight-semibold);
  line-height: 1.1; /* Ultra-tight */
  color: var(--text-primary);
  margin-bottom: 0.125rem; /* Minimal spacing to stat */
  margin-top: 0; /* No extra top spacing */
}

/* Stat - Inter sans */
.pattern-150-mini-stat {
  font-family: var(--font-sans); /* Inter */
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  letter-spacing: var(--tracking-normal);
  margin: 0;
  line-height: 1.2; /* Tight */
}

/* Responsive - Keep 3 columns, scale down */
@media (max-width: 768px) {
  .pattern-150-mini-title {
    font-size: var(--text-xl);
  }

  .pattern-150-mini-intro {
    font-size: var(--text-sm);
    margin-bottom: var(--space-md);
  }

  .pattern-150-mini-grid {
    gap: var(--space-sm);
  }

  .pattern-150-icon {
    width: 3rem; /* Slightly smaller on tablet */
    height: 3rem;
  }

  .pattern-150-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .pattern-150-mini-heading {
    font-size: var(--text-sm);
  }

  .pattern-150-mini-stat {
    font-size: var(--text-xs);
  }
}

/* Extra small screens - ultra compact */
@media (max-width: 480px) {
  .pattern-150-mini {
    max-width: 100%;
  }

  .pattern-150-mini-title {
    font-size: var(--text-lg);
  }

  .pattern-150-mini-intro {
    font-size: var(--text-xs);
    margin-bottom: var(--space-sm);
  }

  .pattern-150-mini-grid {
    gap: var(--space-xs);
  }

  .pattern-150-icon {
    width: 2.5rem; /* Balanced size on mobile */
    height: 2.5rem;
    margin-bottom: 0.375rem;
  }

  .pattern-150-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .pattern-150-mini-heading {
    font-size: 0.75rem; /* 12px - readable minimum */
    line-height: 1.2;
    margin-bottom: 0.125rem;
  }

  .pattern-150-mini-stat {
    font-size: 0.75rem; /* 12px instead of 10px - accessibility minimum */
    line-height: 1.3;
    opacity: 0.8; /* Maintain hierarchy through opacity */
    font-weight: var(--weight-normal); /* Subtle through weight */
  }
}

/* ============================================
   DUNBAR COMPACT TAB LAYOUT
   ============================================ */

.dunbar-compact {
  max-height: 80vh;
  overflow: visible;
}

.dunbar-compact .section-title {
  text-align: center;
  margin-bottom: var(--space-lg);
  font-size: var(--text-3xl);
}

/* Tab Navigation */
.dunbar-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.dunbar-tab {
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-subtle);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  min-width: 120px;
}

.dunbar-tab:hover {
  background: var(--bg-subtle-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dunbar-tab.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.tab-number {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
}

.dunbar-tab.active .tab-number {
  color: white;
}

.tab-emoji {
  font-size: var(--text-2xl);
}

.tab-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* Always Visible Content Stack */
.dunbar-content-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}

.dunbar-section {
  width: 100%;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Brain Limit Panel - Horizontal Scroll */
.brain-limit-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
}

.brain-intro {
  font-size: var(--text-lg);
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-lg);
  line-height: var(--leading-relaxed);
}

.circles-scroll-container {
  width: 100%;
  margin: 0 auto var(--space-xl);
  padding-bottom: var(--space-sm);
}

.circles-scroll {
  display: grid;
  width: 100%;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  justify-items: center;
}

.circle-card {
  /* Round Flexoki color-filled circles */
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: clamp(168px, 18vw, 200px);
  height: clamp(168px, 18vw, 200px);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Flexoki orbit colors for each circle tier */
.circle-card[data-number="5"] {
  background: var(--orbit-core); /* Coral/salmon pink */
}

.circle-card[data-number="15"] {
  background: var(--orbit-inner); /* Peach/apricot gold */
}

.circle-card[data-number="50"] {
  background: #c4c9ff; /* Light lavender */
}

.circle-card[data-number="150"] {
  background: var(--orbit-far); /* Sky blue */
}

.circle-card:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.circle-number-large {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: white;
  margin-bottom: var(--space-xs);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.circle-card h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: 0.25rem;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.circle-card p {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.circle-examples {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  line-height: 1.2;
}

/* Mini iPad */
.dunbar-ipad-mini {
  max-width: 300px;
  margin: 0 auto;
}

.ipad-mini-device {
  background: #333;
  border-radius: 20px;
  padding: 10px;
  box-shadow: var(--shadow-xl);
}

.ipad-mini-screen {
  background: var(--bg-default);
  border-radius: 12px;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Evolution Panel */
.evolution-content {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.dark-paper-card {
  padding: clamp(2.5rem, 6vw, 3.75rem);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
    #1d1c21;
  box-shadow:
    0 18px 45px rgba(6, 6, 10, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(250, 249, 247, 0.92);
  overflow: visible;
  isolation: isolate;
}

.dark-paper-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3Ccircle cx='90' cy='60' r='1'/%3E%3Ccircle cx='150' cy='24' r='1'/%3E%3Ccircle cx='120' cy='120' r='1'/%3E%3Ccircle cx='30' cy='150' r='1'/%3E%3Ccircle cx='170' cy='90' r='1'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.4;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: -1;
}

.dark-paper-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 35%, transparent 65%, rgba(0, 0, 0, 0.4));
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: -1;
}

.evolution-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.evolution-stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.sticker {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(90px, 18vw, 120px);
  padding: 0.65rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  box-shadow:
    0 14px 24px rgba(10, 10, 12, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform-origin: center;
  pointer-events: none;
  isolation: isolate;
}

.sticker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18));
}

.sticker::after {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: clamp(56px, 11vw, 76px);
  height: 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(8, 8, 10, 0.18);
  transform: translateX(-50%) rotate(var(--tape-rotation, -4deg));
  opacity: 0.75;
  mix-blend-mode: multiply;
}

.sticker-brain {
  top: -38px;
  left: -34px;
  transform: rotate(-7deg);
  --tape-rotation: -12deg;
}

.sticker-chimp {
  top: -44px;
  right: -36px;
  transform: rotate(6deg);
  --tape-rotation: 8deg;
}

.sticker-books {
  bottom: -42px;
  left: -28px;
  transform: rotate(9deg);
  --tape-rotation: -6deg;
}

.sticker-pie {
  bottom: -46px;
  right: -40px;
  transform: rotate(-8deg);
  --tape-rotation: 12deg;
}

.evolution-content h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-md);
}

.evolution-content p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-md);
}

.dark-paper-card h3 {
  color: rgba(255, 255, 255, 0.97);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.dark-paper-card p {
  color: rgba(238, 237, 234, 0.88);
}

.dark-paper-card .dunbar-quote {
  background: rgba(0, 0, 0, 0.45);
  border-left: 0;
  border-radius: 16px;
  padding: clamp(1.1rem, 2.3vw, 1.5rem) clamp(1.4rem, 2.8vw, 1.9rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(245, 243, 240, 0.9);
}

.dark-paper-card .dunbar-quote cite {
  display: block;
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  font-style: normal;
  letter-spacing: 0.02em;
}

.dunbar-quote {
  background: var(--bg-subtle);
  border-left: 4px solid var(--accent-primary);
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  font-style: italic;
}

.dunbar-quote cite {
  display: block;
  text-align: right;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Pattern Panel */
.pattern-content {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

.pattern-intro {
  text-align: center;
  font-size: var(--text-lg);
  margin: 0;
  max-width: 52ch;
}

.pattern-grid {
  display: grid;
  width: 100%;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
}

.pattern-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pattern-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pattern-icon-new {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
}

.pattern-icon-lucide {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
}

.pattern-icon-lucide svg {
  width: 32px;
  height: 32px;
}

.pattern-item h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-xs);
}

.pattern-item p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Animated Numbers */
@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.animated-number {
  display: inline-block;
  animation: countUp 0.5s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
  .dunbar-tabs {
    flex-direction: column;
    align-items: stretch;
  }

  .dunbar-tab {
    flex-direction: row;
    justify-content: center;
  }

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

@media (max-width: 640px) {
  .circles-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: calc(-1 * var(--space-md));
    padding-inline: var(--space-md);
    -webkit-overflow-scrolling: touch;
  }

  .circles-scroll {
    display: flex;
    gap: var(--space-md);
    padding: 0;
    min-width: max-content;
    scroll-snap-type: x mandatory;
  }

  .circle-card {
    flex: 0 0 clamp(168px, 70vw, 200px);
    scroll-snap-align: center;
  }

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

/* ============================================
   HOW IT WORKS SECTION
   ============================================ */

.how-it-works-section {
  padding: var(--pad-2xl) 0;
  background: transparent;
}

.how-it-works-intro {
  text-align: center;
  max-width: var(--container-narrow); /* 900px */
  margin: 0 auto var(--space-2xl) auto;
}

.how-it-works-subheading {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-default);
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

.how-it-works-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  max-width: var(--container-wide); /* 1200px */
  margin: 0 auto var(--space-2xl) auto;
}

@media (min-width: 768px) {
  .how-it-works-steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .how-it-works-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step-card {
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  padding: var(--pad-lg);
  border: 1px solid var(--border-subtle);
  transition: all 0.3s var(--ease-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--border-default);
}

.step-number-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: white;
  flex-shrink: 0;
}

.step-badge-1 {
  background: #d14d41; /* Flexoki red */
}

.step-badge-2 {
  background: #4385be; /* Flexoki blue */
}

.step-badge-3 {
  background: #879a39; /* Flexoki green */
}

.step-badge-4 {
  background: #8b7ec8; /* Flexoki purple */
}

.step-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-default);
  margin: 0;
}

.step-description {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

.result-callout {
  max-width: var(--col-6); /* 700px - centered */
  margin: 0 auto;
  padding: var(--pad-md);
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  border: 2px solid #4385be; /* Flexoki blue */
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-lg);
  color: var(--text-default);
}

.result-icon {
  font-size: var(--text-2xl);
  flex-shrink: 0;
}

.result-text {
  line-height: var(--leading-relaxed);
}

/* ============================================
   FROM PRIMATES TO PEOPLE CARD - 6-column with stickers
   ============================================ */

.primates-card-wrapper {
  position: relative;
  max-width: 630px; /* 700px × 0.9 = 630px - reduced 10% */
  margin: 0 auto var(--space-xl) auto;
}

.primates-card {
  position: relative;
  background: rgba(67, 133, 190, 0.12); /* Solid Flexoki blue fill */
  border-radius: var(--radius-lg);
  padding: var(--pad-lg); /* Increased from var(--pad-md) for more breathing room */
  overflow: visible; /* Allow stickers to peek over edges */
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);
  border: 0.0625rem solid rgba(67, 133, 190, 0.25); /* Tinted border */
}

[data-theme="dark"] .primates-card {
  background: rgba(67, 133, 190, 0.18); /* Brighter solid blue in dark mode */
  border-color: rgba(67, 133, 190, 0.35);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.2);
}

.primates-card .craft-paper {
  z-index: 1;
}

.primates-content {
  position: relative;
  z-index: 2;
}

.primates-title {
  font-family: var(--font-serif); /* Lora */
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  text-align: center; /* Center align title */
}

.primates-text {
  font-family: var(--font-sans); /* Inter */
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  text-align: center; /* Center align text */
}

.primates-text:last-child {
  margin-bottom: 0;
}

/* Decorative sticker-style images - float around card edges */

/* Chimp sticker - bottom right corner - REDUCED SIZE */
.primates-chimp-decoration {
  position: absolute;
  bottom: 0.4rem;
  right: -1.5rem;
  width: 140px; /* Reduced from 179px for better balance */
  height: 140px;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-8deg);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

.primates-chimp-decoration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 0 2px rgba(255, 255, 255, 0.6));
}

/* Brain sticker - top left corner - SLIGHTLY LARGER */
.primates-brain-decoration {
  position: absolute;
  top: -1.8rem;
  left: -1.8rem;
  width: 130px; /* Increased from 120px */
  height: 130px;
  z-index: 3;
  pointer-events: none;
  transform: rotate(12deg);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

.primates-brain-decoration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 0 2px rgba(255, 255, 255, 0.6));
}

/* Books sticker - bottom left - REDUCED SIZE */
.primates-books-decoration {
  position: absolute;
  bottom: 0.4rem;
  left: -1.6rem;
  width: 125px; /* Reduced from 146px for better balance */
  height: 125px;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-5deg);
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.13));
}

.primates-books-decoration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 0 2px rgba(255, 255, 255, 0.6));
}

/* Orbit embroidered patch sticker - top right corner - SLIGHTLY LARGER */
.primates-orbit-decoration {
  position: absolute;
  top: -1.8rem;
  right: -1.8rem;
  width: 135px; /* Increased from 125px */
  height: 135px;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-12deg); /* Mirror angle of brain sticker */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

.primates-orbit-decoration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 0 2px rgba(255, 255, 255, 0.6));
}

/* STICKER SAFETY SYSTEM: Progressive padding + reduced offsets at smaller screens */

/* Extra small mobile (<640px) - Maximum padding, minimal sticker offset */
@media (max-width: 640px) {
  .primates-card-wrapper {
    padding: 0 var(--pad-xl); /* Extra padding for maximum safety */
  }

  .primates-card {
    padding: var(--pad-xs); /* Tighter padding on mobile */
  }

  /* Add internal padding to text content for extra safety */
  .primates-content {
    padding: var(--pad-sm) var(--pad-md);
  }

  .primates-title {
    font-size: var(--text-xl); /* 20px instead of 24px */
  }

  .primates-text {
    font-size: var(--text-sm); /* 14px instead of 16px */
  }

  /* Smaller stickers with MINIMAL negative offset (60% reduction) */
  .primates-chimp-decoration {
    width: 100px; /* Smaller for mobile balance */
    height: 100px;
    bottom: 0.5rem;
    right: -1rem;
  }

  .primates-brain-decoration {
    width: 95px; /* Balanced size */
    height: 95px;
    top: -1rem;
    left: -1rem;
  }

  .primates-books-decoration {
    width: 90px; /* Balanced size */
    height: 90px;
    bottom: 0.5rem;
    left: -1rem;
  }

  .primates-orbit-decoration {
    width: 100px; /* Balanced size */
    height: 100px;
    top: -1rem;
    right: -1rem;
  }
}

/* Large mobile to small tablet (640-768px) - Moderate padding */
@media (min-width: 640px) and (max-width: 767px) {
  .primates-card-wrapper {
    padding: 0 var(--pad-lg); /* Moderate padding */
  }

  .primates-content {
    padding: var(--pad-sm) var(--pad-md);
  }

  /* Slightly larger offsets than mobile */
  .primates-chimp-decoration {
    right: -1.5375rem; /* Moved right 15px (-0.9375rem) from -0.6rem */
    bottom: 0.65rem; /* Moved down 20px (+1.25rem) from -0.6rem */
  }

  .primates-brain-decoration {
    top: -1.225rem; /* Moved up 10px (-0.625rem) from -0.6rem */
    left: -1.225rem; /* Moved left 10px (-0.625rem) from -0.6rem */
  }

  .primates-books-decoration {
    bottom: 0.65rem; /* Moved down 20px (+1.25rem) from -0.6rem */
    left: -1.225rem; /* Moved left 10px (-0.625rem) from -0.6rem */
  }

  .primates-orbit-decoration {
    top: -1.225rem; /* Moved up 10px (-0.625rem) from -0.6rem */
    right: -1.225rem; /* Moved right 10px (-0.625rem) from -0.6rem */
  }
}

/* Tablet (768-1023px) - Moderate sticker offsets (40% reduction from desktop) */
@media (min-width: 768px) and (max-width: 1023px) {
  .primates-card-wrapper {
    padding: 0 var(--pad-lg); /* Moderate wrapper padding */
  }

  .primates-content {
    padding: var(--pad-sm) var(--pad-md);
  }

  .primates-chimp-decoration {
    width: 120px; /* Balanced for tablet */
    height: 120px;
    bottom: 0.5rem;
    right: -1.3rem;
  }

  .primates-brain-decoration {
    width: 115px; /* Balanced */
    height: 115px;
    top: -1.4rem;
    left: -1.4rem;
  }

  .primates-books-decoration {
    width: 110px; /* Balanced */
    height: 110px;
    bottom: 0.5rem;
    left: -1.3rem;
  }

  .primates-orbit-decoration {
    width: 120px; /* Balanced */
    height: 120px;
    top: -1.4rem;
    right: -1.4rem;
  }
}

/* Desktop (1024px+) - Full aggressive sticker positioning with ample space */
@media (min-width: 1024px) {
  .primates-card-wrapper {
    padding: var(--pad-lg); /* Normal wrapper padding */
  }

  .primates-content {
    padding: var(--pad-sm) var(--pad-md); /* Inner content safety padding */
  }

  .primates-chimp-decoration {
    width: 140px; /* Back to original balanced size */
    height: 140px;
    bottom: 0.4rem;
    right: -1.5rem;
  }

  .primates-brain-decoration {
    width: 130px; /* Back to original balanced size */
    height: 130px;
    top: -1.8rem;
    left: -1.8rem;
  }

  .primates-books-decoration {
    width: 125px; /* Back to original balanced size */
    height: 125px;
    bottom: 0.4rem;
    left: -1.6rem;
  }

  .primates-orbit-decoration {
    width: 135px; /* Back to original balanced size */
    height: 135px;
    top: -1.8rem;
    right: -1.8rem;
  }
}

/* iPhone Mockup */
.iphone-mockup {
  position: relative;
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.iphone-mockup:hover {
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) scale(1);
}

.iphone-frame {
  position: relative;
  width: 320px;
  height: 650px;
  /* Sky Blue Aluminum - iPhone 15 Pro inspired */
  background: linear-gradient(135deg, var(--orbit-blue-pale) 0%, var(--orbit-blue-soft) 50%, var(--orbit-blue-sky) 100%);
  border-radius: 45px;
  padding: var(--pad-sm);
  box-shadow: var(--shadow-deep);
  border: 2px solid rgba(131, 185, 255, 0.4); /* Light blue thin rim */
}

.iphone-notch {
  position: absolute;
  top: var(--pad-sm);
  left: 50%;
  transform: translateX(-50%);
  width: 7.5rem;
  height: 1.75rem;
  background: var(--color-near-black);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  z-index: 10;
  box-shadow: var(--shadow-sm);
}

.iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-black);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iphone-screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--color-black);
}

/* Responsive - Desktop layout */
@media (min-width: 1024px) {
  .iphone-frame {
    width: 360px;
    height: 730px;
  }

  .iphone-notch {
    width: 8.75rem;
    height: 2rem;
  }
}

/* Responsive - Mobile/Tablet */
@media (max-width: 1023px) {
  .iphone-mockup {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  }
}

/* Mobile responsive styles - shrink padding on small screens */
@media (max-width: 640px) {
  .floating-card {
    padding: var(--pad-sm);
  }

  .floating-card-header {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .floating-card-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .floating-card .bento-title {
    font-size: var(--text-lg);
  }

  .floating-card .bento-description {
    font-size: var(--text-md);
    margin-bottom: 1.25rem;
  }
}

/* Person role styling (added to People card) */
.person-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.125rem;
}

/* ============================================
   GROUPS CARD - NEW TECHY STYLING
   ============================================ */

.constellation-visual {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
}

.constellation-group {
  background: var(--bg-default); /* Flexoki paper background */
  border-radius: 0.75rem;
  padding: var(--pad-xs); /* Tight padding for compact UI sample */
  border: 0.0625rem solid var(--border-default);
  transition: all 0.2s ease;
  flex: 1;
  min-width: 17.5rem;
}

@media (max-width: 640px) {
  .constellation-visual {
    flex-direction: column;
  }
}

[data-theme="dark"] .constellation-group {
  background: var(--bg-muted);
  border-color: var(--border-subtle);
}

.constellation-group:hover {
  border-color: var(--accent-tertiary); /* Flexoki teal */
  box-shadow: 0 4px 12px rgba(58, 169, 159, 0.15);
  background: var(--bg-subtle);
}

[data-theme="dark"] .constellation-group:hover {
  border-color: var(--accent-tertiary);
  box-shadow: 0 4px 12px rgba(58, 169, 159, 0.15);
  background: var(--bg-card);
}

.constellation-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid var(--border-subtle);
}

.constellation-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent-info);
  flex-shrink: 0;
}

.constellation-name {
  font-weight: var(--weight-normal);
  font-size: var(--text-sm);
  color: var(--text-default);
  flex: 1;
}

.constellation-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg-muted);
  padding: calc(var(--space-xs) / 2) var(--space-xs);
  border-radius: 999px;
  font-family: var(--font-mono);
}

/* Techy chip-style key:value pairs */
.quality-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.quality-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-muted);
  border: 0.0625rem solid var(--border-default);
  border-radius: 0.375rem;
  padding: calc(var(--space-xs) * 0.75) 0.625rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  transition: all 0.2s ease;
}

.quality-chip:hover {
  background: var(--bg-subtle);
  border-color: var(--accent-info);
  transform: translateY(-1px);
}

.chip-key {
  color: var(--accent-info);
  font-weight: var(--weight-normal);
}

.chip-value {
  color: var(--text-default);
  font-weight: var(--weight-normal);
}

[data-theme="dark"] .chip-key {
  color: var(--orbit-far-bright);
}

/* Responsive adjustments for constellation */
@media (max-width: 640px) {
  .constellation-header {
    flex-wrap: wrap;
  }

  .quality-chips {
    gap: 0.375rem;
  }

  .quality-chip {
    font-size: var(--text-xs);
    padding: var(--pad-3xs) var(--pad-xs);
  }
}

/* ============================================
   PRICING SECTION
   ============================================ */

/* Pricing section wrapper - 6-column constraint */
.pricing-section-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* Reduced from lg */
  max-width: var(--col-6); /* 700px - 6 columns (50% of 1400px grid) */
  margin: 0 auto;
}

/* Header */
.pricing-section-header {
  text-align: center;
}

.pricing-section-header .section-title {
  margin-bottom: var(--space-xs);
}

.pricing-section-header .section-subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  font-style: italic;
  color: var(--text-default);
  margin: 0;
  opacity: 0.85;
}

/* Pricing cards grid - 2 cards sharing 6-column space (3 cols each) */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Always 2-column, even on mobile */
  gap: var(--space-sm);
}

/* Pricing card base */
.pricing-card {
  position: relative;
  background: var(--bg-default);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);
  border: 0.0625rem solid var(--border-subtle);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 0; /* Override card--normal padding */
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.12),
    0 12px 32px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .pricing-card {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .pricing-card:hover {
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.4),
    0 12px 32px rgba(0, 0, 0, 0.3);
}

/* Support card - dark background */
.pricing-card-support {
  background: var(--bg-dark);
  color: var(--bg-default);
}

[data-theme="dark"] .pricing-card-support {
  background: var(--bg-card);
  color: var(--text-default);
}

.pricing-card-support .pricing-card-title,
.pricing-card-support .pricing-card-description,
.pricing-card-support .pricing-feature span,
.pricing-card-support .price-amount,
.pricing-card-support .pricing-note {
  color: var(--bg-default);
}

[data-theme="dark"] .pricing-card-support .pricing-card-title,
[data-theme="dark"] .pricing-card-support .pricing-card-description,
[data-theme="dark"] .pricing-card-support .pricing-feature span,
[data-theme="dark"] .pricing-card-support .price-amount,
[data-theme="dark"] .pricing-card-support .pricing-note {
  color: var(--text-default);
}

.pricing-card-support .pricing-feature svg {
  color: rgba(255, 252, 240, 0.7);
}

[data-theme="dark"] .pricing-card-support .pricing-feature svg {
  color: var(--text-muted);
}

/* Pricing card content */
.pricing-card-content {
  position: relative;
  z-index: 1;
  padding: var(--pad-sm); /* Reduced from md */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* Reduced from md */
  min-height: auto;
  flex: 1; /* Fill the card */
}

/* Push button to bottom of card */
.pricing-card-content > .btn {
  margin-top: auto;
}

.pricing-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pricing-card-title {
  font-size: var(--text-2xl); /* Reduced from 3xl */
  font-weight: var(--weight-medium);
  color: var(--text-default);
}

.pricing-card-description {
  font-size: var(--text-base); /* Reduced from lg */
  line-height: var(--leading-normal);
  color: var(--text-subtle);
}

/* Pricing features */
.pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.pricing-feature svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--accent-primary);
  stroke-width: 2.5;
}

.pricing-feature span {
  font-size: var(--text-sm); /* Reduced from md */
  line-height: var(--leading-normal);
  color: var(--text-default);
}

/* Pricing price */
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: auto;
}

.price-amount {
  font-size: var(--text-3xl); /* Reduced from 4xl */
  font-weight: var(--weight-medium);
  color: var(--text-default);
  line-height: 1;
}

.price-amount-small {
  font-size: var(--text-xs); /* Much smaller for "Pay what feels right" */
  font-weight: var(--weight-normal);
  opacity: 0.8;
}

.price-period {
  font-size: var(--text-base); /* Reduced from lg */
  color: var(--text-muted);
  font-style: italic;
}

/* Pricing note - SPECIFICALLY SMALLER for visual balance */
.pricing-note {
  font-size: var(--text-xs); /* Reduced from sm - very small */
  line-height: var(--leading-snug);
  color: var(--text-muted); /* Darker for better contrast (was --text-subtle) */
  font-style: italic;
  margin-top: -0.5rem; /* Reduced margin */
  /* Removed opacity: 0.75 - maintains WCAG AA contrast */
}

/* Responsive pricing - Aggressive mobile scaling */
@media (max-width: 640px) {
  /* Section header */
  .pricing-section-header .section-title {
    font-size: var(--text-2xl);
  }

  .pricing-section-header .section-subtitle {
    font-size: var(--text-lg);
  }

  /* SINGLE COLUMN ON MOBILE PORTRAIT */
  .pricing-cards-grid {
    grid-template-columns: 1fr; /* Stack cards vertically */
    gap: var(--space-md);
    max-width: 320px; /* Constrain width */
    margin: 0 auto;
  }

  /* Significantly reduced padding */
  .pricing-card {
    border-radius: 1rem;
  }

  .pricing-card-content {
    padding: var(--pad-xs); /* Much tighter padding */
    gap: var(--space-xs); /* Tighter gaps */
  }

  .pricing-card-header {
    gap: 0.25rem;
  }

  /* Scale down typography significantly */
  .pricing-card-title {
    font-size: var(--text-base); /* Much smaller */
    line-height: var(--leading-tight);
  }

  .pricing-card-description {
    font-size: var(--text-xs); /* Much smaller */
    line-height: var(--leading-snug);
  }

  .pricing-features {
    gap: var(--space-xs); /* Better spacing */
  }

  /* HIDE EXTRA FEATURES ON MOBILE - Show only first 2 */
  .pricing-feature:nth-child(n+3) {
    display: none !important;
  }

  .pricing-feature {
    gap: var(--space-xs);
  }

  .pricing-feature svg {
    width: 0.875rem; /* Smaller icons */
    height: 0.875rem;
  }

  .pricing-feature span {
    font-size: var(--text-xs); /* Smaller text */
    line-height: var(--leading-snug);
  }

  .price-amount {
    font-size: var(--text-xl); /* Much smaller */
  }

  .price-period {
    font-size: var(--text-xs);
  }

  .pricing-note {
    font-size: 0.75rem; /* 12px - readable minimum */
    line-height: 1.3;
    /* Removed opacity: 0.7 - maintains WCAG AA contrast */
  }

  /* Button scaling */
  .pricing-card .btn {
    padding: 0.5rem 0.75rem;
    font-size: var(--text-xs);
  }
}

/* Extra aggressive scaling for iPhone SE and smaller */
@media (max-width: 375px) {
  .pricing-cards-grid {
    gap: 0.25rem; /* Minimal gap */
  }

  .pricing-card-content {
    padding: 0.5rem; /* Minimal padding */
    gap: 0.25rem;
  }

  .pricing-card-title {
    font-size: var(--text-sm);
  }

  .pricing-card-description {
    font-size: 0.625rem;
  }

  .pricing-feature span {
    font-size: 0.625rem;
  }

  .price-amount {
    font-size: var(--text-lg);
  }

  .pricing-note {
    font-size: 0.75rem; /* 12px - maintain accessibility even on tiny screens */
    /* Removed opacity: 0.65 - maintains WCAG AA contrast */
  }
}

/* ============================================
   COSMOS SIGNUP SECTION
   ============================================ */

.signup-cosmos {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) 0;
  background: transparent;
}

.signup-cosmos .sidekick {
  max-width: var(--col-9); /* 1050px - 9 columns (wider for better presence) */
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .signup-cosmos {
    padding: var(--pad-lg) 0; /* Reduced from xl */
  }
}

/* Beta signup card - Navy blue with animated stars */
.signup-cosmos-card {
  position: relative;
  background: linear-gradient(135deg, #1a2744 0%, #0d1525 100%); /* Navy blue gradient */
  border-radius: var(--radius-xl);
  padding: calc(var(--pad-md) * 0.5) var(--pad-lg); /* 50% reduced vertical padding */
  overflow: hidden;
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.25),
    0 12px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animated starfield for beta signup */
.signup-cosmos-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, var(--color-near-white), transparent),
    radial-gradient(2px 2px at 60% 70%, var(--accent-warm), transparent),
    radial-gradient(1px 1px at 50% 50%, var(--color-near-white), transparent),
    radial-gradient(1px 1px at 80% 10%, var(--accent-warm), transparent),
    radial-gradient(2px 2px at 90% 60%, var(--color-near-white), transparent),
    radial-gradient(1px 1px at 33% 70%, var(--accent-warm), transparent),
    radial-gradient(1px 1px at 79% 80%, var(--color-near-white), transparent),
    radial-gradient(2px 2px at 10% 90%, var(--accent-warm), transparent),
    radial-gradient(1px 1px at 95% 20%, var(--color-near-white), transparent);
  background-size: 200% 200%;
  animation: stars-rotate 120s linear infinite;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

/* Only animate when in viewport */
.signup-cosmos-card.in-viewport::before {
  animation-play-state: running;
}

.signup-cosmos-card:not(.in-viewport)::before {
  animation-play-state: paused;
}

@keyframes stars-rotate {
  from {
    transform: rotate(0deg) scale(1.5);
  }
  to {
    transform: rotate(360deg) scale(1.5);
  }
}

[data-theme="dark"] .signup-cosmos-card {
  background: linear-gradient(135deg, #0d1525 0%, #050810 100%); /* Even darker for dark mode */
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.5),
    0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Cosmos background with orbit visualization */
.cosmos-background {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.15;
  z-index: 0;
  overflow: hidden;
}

[data-theme="dark"] .cosmos-background {
  opacity: 0.25;
}

.cosmos-orbit {
  width: 100%;
  height: 100%;
  max-width: 50rem;
  max-height: 50rem;
  transform: scale(1.2);
}

.cosmos-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}

.cosmos-dot {
  fill: rgba(255, 255, 255, 0.5);
}

/* Static dots - no animation */
.cosmos-dots-5,
.cosmos-dots-4,
.cosmos-dots-3,
.cosmos-dots-2 {
  transform-origin: 400px 400px;
  /* Animation removed for cleaner static design */
}

@keyframes orbitSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitMedium {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitFast {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitVeryFast {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Content - 6-column constraint */
.signup-cosmos-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%; /* Full width within 6-col container */
  padding: calc(var(--pad-sm) * 0.5); /* 50% reduced padding */
  text-align: center;
}

@media (min-width: 768px) {
  .signup-cosmos-content {
    padding: calc(var(--pad-md) * 0.5); /* 50% reduced padding on desktop */
  }
}

@media (max-width: 640px) {
  .signup-cosmos-content {
    padding: calc(var(--pad-sm) * 0.5); /* 50% reduced padding on mobile */
  }
}

.signup-cosmos-header {
  margin-bottom: calc(var(--space-sm) * 0.5); /* 50% reduced spacing */
}

.cosmos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.0625rem solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: var(--space-xs) 1.25rem;
  margin-bottom: var(--space-sm);
}

.cosmos-badge span {
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: rgba(255, 255, 255, 0.95);
  text-transform: lowercase;
  letter-spacing: var(--tracking-wide);
}

/* Lora italic for "find community in the cosmos" tagline */
.cosmos-tagline {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

.signup-cosmos-header .section-title {
  color: white;
  margin-bottom: var(--space-sm);
}

.signup-cosmos-header .section-subtitle {
  color: rgba(255, 255, 255, 0.9);
  max-width: 500px;
  margin: 0 auto;
}

/* Form styling for cosmos section */
.signup-cosmos-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-sm) * 0.5); /* 50% reduced gap between form elements */
}

.signup-cosmos-form .form-group {
  text-align: left;
}

.signup-cosmos-form .form-label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--weight-medium);
  margin-bottom: 0.5rem;
  display: block;
}

.signup-cosmos-form .required {
  color: rgba(255, 255, 255, 0.7);
}

.signup-cosmos-form .form-input,
.signup-cosmos-form .form-textarea {
  background: rgba(255, 255, 255, 0.95);
  border: 0.0625rem solid rgba(255, 255, 255, 0.3);
  color: var(--text-default);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.signup-cosmos-form .form-input:focus,
.signup-cosmos-form .form-textarea:focus {
  background: white;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.signup-cosmos-form .form-input::placeholder,
.signup-cosmos-form .form-textarea::placeholder {
  color: var(--text-muted);
}

.signup-cosmos-form .btn-primary {
  background: white;
  color: var(--text-default);
  margin-top: 0.5rem;
}

.signup-cosmos-form .btn-primary:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.signup-cosmos-form .form-message {
  color: white;
  font-weight: var(--weight-medium);
}

/* Responsive cosmos section */
@media (max-width: 640px) {
  .signup-cosmos {
    padding: calc(var(--pad-md) * 0.5) var(--pad-sm); /* 50% reduced vertical padding */
  }

  .signup-cosmos-card {
    padding: calc(var(--pad-sm) * 0.5) var(--pad-md); /* 50% reduced vertical padding on mobile */
    border-radius: var(--radius-lg);
  }

  /* Scale down typography on mobile */
  .signup-cosmos-header .section-title {
    font-size: var(--text-2xl); /* 24px instead of 30px */
  }

  .signup-cosmos-header .section-subtitle {
    font-size: var(--text-sm); /* 14px instead of 16px */
  }

  .signup-cosmos-form .btn-primary {
    font-size: var(--text-sm); /* 14px button text */
    padding: 0.75rem 1.5rem; /* Slightly smaller button */
  }

  .cosmos-background {
    opacity: 0.1;
  }

  .cosmos-orbit {
    transform: scale(1.5);
  }
}

/* ============================================
   REMOVED: 408 lines of unused utility classes
   (Craft.do-inspired grid system was not being used in HTML)
   ============================================ */

/* ============================================
   SUPPORT PAGE STYLES
   ============================================ */

/* Support Hero Section */
.support-hero-section {
  padding: calc(var(--space-xl) * 2 + var(--space-md)) 0 calc(var(--space-xl) + var(--space-md)) 0; /* Large top padding for hero effect */
  background: transparent;
}

.support-hero-content {
  text-align: center;
  max-width: 50rem;
  margin: 0 auto;
}

.support-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.support-hero-subtitle {
  font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: var(--col-6); /* 700px - 6 columns */
  margin: 0 auto;
}

/* Support Cards Section */
.support-cards-section {
  padding: var(--pad-xl) 0 5rem 0;
}

.support-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .support-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .support-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.support-card {
  background: var(--bg-default);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--pad-md);
  transition: all var(--duration-base) var(--ease-soft);
  display: flex;
  flex-direction: column;
}

.support-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  border-color: var(--border-default);
}

.support-card-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.support-card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
}

.support-card-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.support-card-description {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.support-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm) 0;
  flex-grow: 1;
}

.support-card-list li {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  padding-left: var(--space-sm);
  position: relative;
  margin-bottom: var(--space-xs);
}

.support-card-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
}

.support-card-link {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--accent-info);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
}

.support-card-link:hover {
  color: var(--orbit-navy-light); /* Darker blue on hover */
  gap: var(--space-xs);
}

/* Support FAQ Section */
.support-faq-section {
  padding: calc(var(--pad-xl) + var(--space-md)) 0;
  background: var(--bg-subtle);
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: 2.5rem;
  max-width: var(--container-narrow); /* 900px */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.faq-item {
  background: var(--bg-default);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--pad-sm);
  transition: all var(--duration-fast) var(--ease-soft);
}

.faq-item:hover {
  border-color: var(--border-default);
}

.faq-item summary {
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--duration-fast) var(--ease-soft);
}

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

.faq-item summary::after {
  content: "+";
  font-size: var(--text-2xl);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  transition: transform var(--duration-fast) var(--ease-soft);
  flex-shrink: 0;
  margin-left: var(--space-sm);
}

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

.faq-item summary:hover {
  color: var(--accent-info);
}

.faq-item p {
  margin-top: var(--space-sm);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* Support Contact Section */
.support-contact-section {
  padding: calc(var(--pad-xl) + var(--space-xl)) 0;
}

.contact-card-wrapper {
  max-width: var(--col-6); /* 700px - 6 columns */
  margin: 0 auto;
}

.contact-card {
  position: relative;
  background: linear-gradient(135deg, var(--accent-info) 0%, var(--accent-tertiary) 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 4rem var(--pad-xl);
  text-align: center;
}

.contact-card .craft-paper {
  z-index: 0;
}

.contact-card-content {
  position: relative;
  z-index: 1;
}

.contact-card-title {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-3xl), 3vw, var(--text-4xl));
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-sm);
  color: var(--text-default); /* Flexoki light text on dark blue gradient */
}

.contact-card-description {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(255, 252, 240, 0.9);
  margin-bottom: var(--space-md);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.btn-large {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.btn-large svg {
  flex-shrink: 0;
}

.contact-response-time {
  font-size: var(--text-sm);
  color: rgba(255, 252, 240, 0.75);
  margin-top: var(--space-sm);
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .support-hero-section {
    padding: 5rem var(--pad-sm) var(--pad-md) var(--pad-sm);
  }

  .support-hero-title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-sm);
    line-height: var(--leading-tight);
  }

  .support-hero-subtitle {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    padding: 0 var(--space-xs);
  }

  .support-cards-section {
    padding: var(--pad-md) 0 var(--pad-xl) 0;
  }

  .support-card {
    padding: var(--pad-sm);
  }

  .contact-card {
    padding: var(--pad-xl) var(--pad-md);
  }

  .support-faq-section {
    padding: var(--pad-xl) 0;
  }

  .support-contact-section {
    padding: var(--pad-xl) 0;
  }
}

/* ============================================
   ADMIN DASHBOARD STYLES
   ============================================ */

.admin-content {
  padding: var(--pad-md) 0;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.stat-card {
  background: var(--bg-subtle);
  padding: var(--pad-sm);
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--border-default);
}

.stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
  margin-bottom: var(--space-xs);
}

.stat-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.data-section {
  margin-bottom: var(--space-xl);
}

.data-table {
  width: 100%;
  background: var(--bg-subtle);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.data-table thead {
  background: var(--bg-muted);
  border-bottom: 0.0625rem solid var(--border-default);
}

.data-table th {
  padding: var(--pad-sm);
  text-align: left;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.data-table td {
  padding: var(--pad-sm);
  border-bottom: 0.0625rem solid var(--border-subtle);
  color: var(--text-default);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--bg-default);
}

.empty-state {
  text-align: center;
  padding: var(--pad-xl);
  color: var(--text-muted);
}

.invite-code {
  font-family: var(--font-mono);
  background: var(--bg-muted);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.export-btn {
  background: var(--accent-secondary);
  color: var(--bg-default);
  border: none;
  padding: var(--pad-xs) var(--pad-sm);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-soft);
  margin-bottom: var(--space-sm);
}

.export-btn:hover {
  opacity: 0.9;
}

.auth-error {
  background: var(--bg-subtle);
  border: 0.0625rem solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--pad-md);
  text-align: center;
  margin: var(--space-xl) auto;
  max-width: 500px;
}

.auth-error h2 {
  color: var(--text-default);
  margin-bottom: var(--space-sm);
}

.auth-error p {
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.auth-error button {
  background: var(--accent-primary);
  color: var(--bg-default);
  border: none;
  padding: var(--pad-xs) var(--pad-sm);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-soft);
}

.auth-error button:hover {
  opacity: 0.9;
}

.period-selector {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.period-btn {
  background: var(--bg-subtle);
  color: var(--text-default);
  border: 0.0625rem solid var(--border-default);
  padding: var(--space-xs) var(--pad-sm);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-soft);
}

.period-btn:hover {
  background: var(--bg-muted);
}

.period-btn.active {
  background: var(--accent-primary);
  color: var(--bg-default);
  border-color: var(--accent-primary);
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.analytics-header h2 {
  margin: 0;
}

.analytics-link {
  color: var(--accent-primary);
  text-decoration: none;
  font-size: var(--text-sm);
}

.analytics-link:hover {
  text-decoration: underline;
}

.analytics-section-spacing {
  margin-bottom: var(--space-xl);
}

.period-selector {
  margin-bottom: var(--space-xl);
}

.section-subtitle-lg {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.chart-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
}

.chart-item-capitalize {
  text-transform: capitalize;
}

.chart-item-value {
  font-weight: var(--weight-semibold);
}

.chart-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ============================================
   BRAND IDENTITY SECTION - 2026 Aesthetic
   Liquid Glass + Natural Light + Paper Texture
   ============================================ */

.brand-identity-section {
  padding: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

.brand-identity-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  max-width: var(--container-normal);
  margin: 0 auto;
}

@media (max-width: 1023px) {
  .brand-identity-container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* Left side: Text content */
.brand-identity-text {
  padding: var(--space-lg);
}

.brand-identity-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-default);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
}

.brand-identity-intro {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.brand-identity-tagline {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-top: var(--space-md);
}

.brand-identity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin: var(--space-sm) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

/* Identity Pills - Liquid Glass 2026 Style */
.identity-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: all var(--duration-base) var(--ease-soft);
  /* Liquid glass base */
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
}

.identity-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

/* Pill color variants - Muted organic palette */
.pill-people {
  background: rgba(135, 154, 57, 0.15);
  color: #6b7a2e;
  border-color: rgba(135, 154, 57, 0.25);
}

[data-theme="dark"] .pill-people {
  background: rgba(135, 154, 57, 0.2);
  color: #a8b86d;
  border-color: rgba(135, 154, 57, 0.3);
}

.pill-moments {
  background: rgba(218, 112, 44, 0.12);
  color: #b85d23;
  border-color: rgba(218, 112, 44, 0.2);
}

[data-theme="dark"] .pill-moments {
  background: rgba(218, 112, 44, 0.2);
  color: #e8954a;
  border-color: rgba(218, 112, 44, 0.3);
}

.pill-science {
  background: rgba(67, 133, 190, 0.12);
  color: #2d6a9e;
  border-color: rgba(67, 133, 190, 0.2);
}

[data-theme="dark"] .pill-science {
  background: rgba(67, 133, 190, 0.2);
  color: #6da8d9;
  border-color: rgba(67, 133, 190, 0.3);
}

.pill-rituals {
  background: rgba(139, 126, 200, 0.12);
  color: #6b5aa8;
  border-color: rgba(139, 126, 200, 0.2);
}

[data-theme="dark"] .pill-rituals {
  background: rgba(139, 126, 200, 0.2);
  color: #a99cd8;
  border-color: rgba(139, 126, 200, 0.3);
}

.pill-privacy {
  background: rgba(58, 169, 159, 0.12);
  color: #2a857d;
  border-color: rgba(58, 169, 159, 0.2);
}

[data-theme="dark"] .pill-privacy {
  background: rgba(58, 169, 159, 0.2);
  color: #5cc4ba;
  border-color: rgba(58, 169, 159, 0.3);
}

.pill-dunbar {
  background: rgba(209, 77, 65, 0.12);
  color: #a83d32;
  border-color: rgba(209, 77, 65, 0.2);
}

[data-theme="dark"] .pill-dunbar {
  background: rgba(209, 77, 65, 0.2);
  color: #e87366;
  border-color: rgba(209, 77, 65, 0.3);
}

.pill-journal {
  background: rgba(230, 180, 80, 0.15);
  color: #9a7a2a;
  border-color: rgba(230, 180, 80, 0.25);
}

[data-theme="dark"] .pill-journal {
  background: rgba(230, 180, 80, 0.2);
  color: #e8c96a;
  border-color: rgba(230, 180, 80, 0.3);
}

/* Right side: Visual diagram */
.brand-identity-diagram {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  min-height: 400px;
}

/* Diagram vertical spine - simple centered line */
.diagram-spine {
  position: absolute;
  left: 50%;
  top: var(--space-lg);
  bottom: var(--space-lg);
  width: 1.5px;
  background: var(--text-muted);
  opacity: 0.3;
  transform: translateX(-50%);
  z-index: 0;
}

/* Diagram nodes - Liquid Glass 2026 */
.diagram-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  /* Liquid glass effect */
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px) saturate(200%);
  -webkit-backdrop-filter: blur(16px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 2px 0 rgba(255, 255, 255, 0.2) inset;
  transition: all var(--duration-base) var(--ease-soft);
}

[data-theme="dark"] .diagram-node {
  background: rgba(30, 30, 30, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 2px 0 rgba(255, 255, 255, 0.08) inset;
}

.diagram-node:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 2px 0 rgba(255, 255, 255, 0.25) inset;
}

/* Orbit logo node - Top center */
.diagram-orbit {
  position: relative;
  padding: 0.75rem 1.5rem;
  background: rgba(135, 154, 57, 0.15);
  border-color: rgba(135, 154, 57, 0.3);
  color: #5a6a2a;
  gap: 0.5rem;
  flex-direction: row;
  margin-bottom: var(--space-md);
}

[data-theme="dark"] .diagram-orbit {
  background: rgba(135, 154, 57, 0.25);
  color: #a8b86d;
}

.diagram-orbit-logo {
  width: 1.5rem;
  height: 1.5rem;
}

/* Diagram rows */
.diagram-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
}

.diagram-row-top {
  margin-top: var(--space-xl);
}

.diagram-row-middle {
  margin-top: var(--space-lg);
}

.diagram-row-bottom {
  margin-top: var(--space-lg);
}

/* Node color variants */
.diagram-node-people {
  background: rgba(67, 133, 190, 0.15);
  border-color: rgba(67, 133, 190, 0.25);
  color: #2d6a9e;
}

[data-theme="dark"] .diagram-node-people {
  background: rgba(67, 133, 190, 0.25);
  color: #6da8d9;
}

.diagram-node-moments {
  background: rgba(218, 112, 44, 0.15);
  border-color: rgba(218, 112, 44, 0.25);
  color: #b85d23;
}

[data-theme="dark"] .diagram-node-moments {
  background: rgba(218, 112, 44, 0.25);
  color: #e8954a;
}

.diagram-node-rituals {
  background: rgba(139, 126, 200, 0.15);
  border-color: rgba(139, 126, 200, 0.25);
  color: #6b5aa8;
}

[data-theme="dark"] .diagram-node-rituals {
  background: rgba(139, 126, 200, 0.25);
  color: #a99cd8;
}

.diagram-node-plus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--text-muted);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  padding: 0;
  min-width: auto;
}

.diagram-node-plus:hover {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.diagram-node-foundation {
  background: rgba(230, 180, 80, 0.12);
  border-color: rgba(230, 180, 80, 0.25);
  color: #9a7a2a;
  padding: 0.75rem 1.5rem;
  text-align: center;
}

[data-theme="dark"] .diagram-node-foundation {
  background: rgba(230, 180, 80, 0.2);
  color: #e8c96a;
}

.diagram-node-foundation small {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.diagram-node-journal {
  background: rgba(209, 77, 65, 0.12);
  border-color: rgba(209, 77, 65, 0.25);
  color: #a83d32;
  padding: 0.75rem 1.5rem;
}

[data-theme="dark"] .diagram-node-journal {
  background: rgba(209, 77, 65, 0.2);
  color: #e87366;
}

/* Responsive: Mobile */
@media (max-width: 767px) {
  .brand-identity-text {
    padding: var(--space-md);
    text-align: center;
  }

  .brand-identity-pills {
    justify-content: center;
  }

  .brand-identity-diagram {
    padding: var(--space-md);
    min-height: 350px;
  }

  .diagram-row {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .diagram-node {
    font-size: var(--text-xs);
    padding: 0.375rem 0.75rem;
  }
}

/* ============================================
   LIQUID GLASS 2026 - Global Enhancement Layer
   Modern frosted glass with natural light refraction
   ============================================ */

/* Enhanced glass card base - applies to all major cards */
.liquid-glass {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    /* Natural light - top highlight */
    0 -1px 0 rgba(255, 255, 255, 0.5) inset,
    /* Depth shadow */
    0 8px 32px rgba(0, 0, 0, 0.08),
    /* Soft ambient */
    0 2px 8px rgba(0, 0, 0, 0.04),
    /* Inner glow */
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .liquid-glass {
  background: rgba(30, 30, 30, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.1) inset,
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Light refraction gradient overlay */
.liquid-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

[data-theme="dark"] .liquid-glass::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    transparent 100%
  );
}

/* ============================================
   ENHANCED PAPER TEXTURE - 2026 Organic Feel
   Subtle fiber grain for tactile depth
   ============================================ */

/* Refined paper texture with better visibility */
.craft-paper-enhanced {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image:
    /* Micro noise */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
    /* Vertical grain */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(0, 0, 0, 0.015) 1px,
      transparent 2px,
      transparent 6px
    ),
    /* Diagonal fibers */
    repeating-linear-gradient(
      35deg,
      transparent 0px,
      rgba(139, 109, 76, 0.02) 1px,
      transparent 2px,
      transparent 20px
    );
  background-size: 200px 200px, 6px 6px, 20px 20px;
}

[data-theme="dark"] .craft-paper-enhanced {
  opacity: 0.2;
  mix-blend-mode: soft-light;
}

/* ============================================
   NATURAL LIGHT EFFECTS - 2026 Realism
   Subtle environmental lighting simulation
   ============================================ */

/* Top-down ambient light glow */
.natural-light-top {
  position: relative;
}

.natural-light-top::after {
  content: "";
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 200px;
  background: radial-gradient(
    ellipse 50% 40% at 50% 100%,
    rgba(255, 252, 240, 0.3) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

[data-theme="dark"] .natural-light-top::after {
  background: radial-gradient(
    ellipse 50% 40% at 50% 100%,
    rgba(67, 133, 190, 0.08) 0%,
    transparent 70%
  );
}

/* Warm side lighting - adds dimensionality */
.warm-side-light {
  position: relative;
}

.warm-side-light::before {
  content: "";
  position: absolute;
  top: 20%;
  left: -50px;
  width: 100px;
  height: 60%;
  background: radial-gradient(
    ellipse 80% 50% at 100% 50%,
    rgba(230, 180, 80, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}

[data-theme="dark"] .warm-side-light::before {
  background: radial-gradient(
    ellipse 80% 50% at 100% 50%,
    rgba(230, 180, 80, 0.05) 0%,
    transparent 70%
  );
}

/* ============================================
   SECTION TRANSITIONS - 2026 Flow
   Smooth visual rhythm between sections
   ============================================ */

/* Soft gradient divider between sections */
.section-divider-soft {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--border-subtle) 20%,
    var(--border-subtle) 80%,
    transparent 100%
  );
  margin: var(--space-xl) 0;
}

/* Fade-in animation for sections */
.section-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Stagger children animation */
.stagger-children > * {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.5s; }

.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   RETRO MAC WINDOW UI (System 7/8 Style)
   ============================================ */

.mac-window {
  /* Aqua bubble aesthetic - translucent, glossy, lickable */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(245, 248, 252, 0.92) 50%,
    rgba(235, 242, 250, 0.9) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  font-family: "Lucida Grande", "Helvetica Neue", -apple-system, sans-serif;
  max-width: 100%;
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Glossy highlight effect - the "lickable" shine */
.mac-window::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 11px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.2) 30%,
    rgba(255, 255, 255, 0) 50%
  );
  pointer-events: none;
  z-index: 2;
}

.mac-title-bar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(180deg,
    rgba(220, 230, 242, 0.95) 0%,
    rgba(200, 215, 232, 0.9) 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 11px 11px 0 0;
  gap: 8px;
  position: relative;
  z-index: 3;
  min-height: 32px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.mac-btn-close {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, #ff5f57 0%, #e94841 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.mac-btn-close:hover {
  transform: scale(1.1);
}

/* Active close button look (when clicked, visually) */
.mac-btn-close:active {
  background: linear-gradient(180deg, #e94841 0%, #d13832 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.mac-title-stripes {
  flex: 1;
  height: 1px;
  background: transparent; /* Remove stripes for cleaner Aqua look */
}

.mac-title-text {
  font-family: "Lucida Grande", "Helvetica Neue", -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  padding: 0 8px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.mac-btn-collapse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, #ffbd2e 0%, #f5a623 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.mac-btn-collapse:hover {
  transform: scale(1.1);
}
  background: #e6e6e6;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Inner square for collapse box */
.mac-btn-collapse::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 1px solid #000;
}

.mac-window-content {
  background: rgba(255, 255, 255, 0.75);
  border: none;
  margin: 0;
  padding: 1.25rem;
  position: relative;
  z-index: 3;
  border-radius: 0 0 11px 11px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Dark mode overrides for Aqua UI */
[data-theme="dark"] .mac-window {
  background: linear-gradient(180deg,
    rgba(60, 70, 85, 0.95) 0%,
    rgba(50, 60, 75, 0.92) 50%,
    rgba(40, 50, 65, 0.9) 100%
  );
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .mac-title-bar {
  background: #c0c0c0;
}
[data-theme="dark"] .mac-title-text {
  background: #c0c0c0;
}
[data-theme="dark"] .mac-btn-collapse {
  background: #c0c0c0;
}

/* Specific adjustments for content inside windows */
.person-preview.mac-window {
  background: #e6e6e6;
  padding: 0; /* Let window structure handle padding */
  border-radius: 0; /* Remove rounded corners */
}
.person-preview.mac-window .mac-window-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Remove old card styling from wrapped elements to avoid conflict */
.person-preview, .mockup-event, .mockup-moment {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Typography adjustments for inside windows */
.person-name, .mockup-event-title, .mockup-moment-name {
  font-family: "Geneva", sans-serif;
  letter-spacing: -0.02em;
}

/* ============================================
   RETRO UI OVERRIDES & ADJUSTMENTS
   ============================================ */

/* Remove default container styling for mockups to let windows shine */
.bento-moments .bento-visual-mockup,
.bento-gather .bento-visual-mockup,
.bento-invites .bento-visual-mockup,
.bento-rituals .bento-visual-mockup {
  background: transparent;
  border: none;
  padding: 0;
}

/* Add desktop pattern behind windows if desired, or just space */
.bento-visual-mockup {
  padding: 0.5rem; /* slight padding for shadow space */
}

/* Adjust avatar colors to be more retro/vibrant */
.mockup-moment-avatar, .person-avatar {
  background: #000; /* Black and white retro style? Or keep color? */
  color: #fff;
  border: 1px solid #000;
  font-family: "Chicago", sans-serif;
}

/* Adjust buttons to look like retro buttons */
.mockup-rsvp-btn {
  border: 1px solid #000;
  background: #fff;
  box-shadow: 1px 1px 0 #000;
  border-radius: 0;
  font-family: "Geneva", sans-serif;
  color: #000;
}

.mockup-rsvp-btn.active {
  background: #000;
  color: #fff;
  box-shadow: inset 1px 1px 0 #fff;
}

/* Tags retro style */
.tag, .moment-tag {
  border: 1px solid #000;
  background: #fff;
  color: #000;
  border-radius: 12px; /* Keep pill shape but black border */
  font-family: "Geneva", sans-serif;
  font-size: 0.75rem;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}

/* Person card specific tweaks */
.person-header .person-circle {
  font-family: "Geneva", sans-serif;
  text-transform: uppercase;
  font-size: 0.65rem;
  border: 1px solid #000;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fff;
  color: #000;
}

/* ============================================
   HERO MOCKUP - Dual Screen Visualization
   ============================================ */

/* Container */
.hero-mockup-container {
  position: relative;
  width: 100%;
  max-width: none; /* Remove constraint - let it fill available space */
  height: 500px;
  margin: 0 auto;
  padding: 0 var(--space-xl); /* Add horizontal padding */
}

/* Desktop Screen */
.hero-desktop-screen {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 400px;
  background: #000;
  border-radius: 16px;
  border: 8px solid #A8B5E8;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Mobile Screen */
.hero-mobile-screen {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  height: 480px;
  background: #000;
  border-radius: 32px;
  border: 8px solid #E8D5B5;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 10;
}

/* App Content - Desktop */
.hero-app-desktop {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
}

.hero-desktop-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

.hero-desktop-logo {
  font-size: 20px;
  font-weight: 700;
  color: #E8D5B5;
  letter-spacing: -0.5px;
}

.hero-desktop-nav {
  display: flex;
  gap: 20px;
}

.hero-nav-item {
  color: #A8B5E8;
  font-size: 13px;
  font-weight: 500;
}

/* App Content - Mobile */
.hero-app-mobile {
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
}

.hero-mobile-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 40px 16px 12px;
  z-index: 20;
  background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
}

.hero-mobile-logo {
  font-size: 18px;
  font-weight: 700;
  color: #E8D5B5;
  text-align: center;
}

/* Orbit Visualization - Desktop */
.hero-orbit-viz-desktop {
  position: absolute;
  top: -60px;
  left: -60px;
  width: 350px;
  height: 350px;
}

/* Orbit Visualization - Mobile */
.hero-orbit-viz-mobile {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

.hero-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  opacity: 0.3;
  animation: hero-orbit-pulse 4s ease-in-out infinite;
}

/* Desktop rings */
.hero-ring-1 {
  top: 130px;
  left: 130px;
  width: 90px;
  height: 90px;
  border-color: #E8D5B5;
}

.hero-ring-2 {
  top: 85px;
  left: 85px;
  width: 180px;
  height: 180px;
  border-color: #D4A574;
  animation-delay: 1s;
}

.hero-ring-3 {
  top: 40px;
  left: 40px;
  width: 270px;
  height: 270px;
  border-color: #8B9AC8;
  animation-delay: 2s;
}

.hero-ring-4 {
  top: 0;
  left: 0;
  width: 350px;
  height: 350px;
  border-color: #7B8CDE;
  animation-delay: 3s;
}

/* Mobile rings */
.hero-ring-mobile-1 {
  top: 70px;
  left: 70px;
  width: 60px;
  height: 60px;
  border-color: #E8D5B5;
}

.hero-ring-mobile-2 {
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  border-color: #D4A574;
  animation-delay: 1s;
}

.hero-ring-mobile-3 {
  top: 30px;
  left: 30px;
  width: 140px;
  height: 140px;
  border-color: #8B9AC8;
  animation-delay: 2s;
}

.hero-ring-mobile-4 {
  top: 10px;
  left: 10px;
  width: 180px;
  height: 180px;
  border-color: #7B8CDE;
  animation-delay: 3s;
}

/* Center dots */
.hero-center-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #E8D5B5 0%, #D4A574 100%);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(232, 213, 181, 0.4);
  top: 166px;
  left: 166px;
  animation: hero-float 3s ease-in-out infinite;
}

.hero-center-dot-mobile {
  position: absolute;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #E8D5B5 0%, #D4A574 100%);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(232, 213, 181, 0.4);
  top: 92px;
  left: 92px;
  animation: hero-float 3s ease-in-out infinite;
}

/* Feature cards - Desktop */
.hero-features-desktop {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  gap: 12px;
  z-index: 15;
}

.hero-feature-card {
  background: rgba(168, 181, 232, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(168, 181, 232, 0.2);
  border-radius: 12px;
  padding: 12px;
  width: 140px;
}

.hero-feature-card h3 {
  color: #E8D5B5;
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 600;
}

.hero-feature-card p {
  color: #A8B5E8;
  font-size: 11px;
  line-height: 1.4;
}

/* Bottom nav - Mobile */
.hero-bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px 24px;
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
  display: flex;
  justify-content: space-around;
  z-index: 20;
}

.hero-nav-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(168, 181, 232, 0.15);
  border: 1px solid rgba(168, 181, 232, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A8B5E8;
  font-size: 16px;
  font-weight: 600;
}

.hero-nav-active {
  background: rgba(232, 213, 181, 0.2);
  border-color: #E8D5B5;
  color: #E8D5B5;
}

/* Animations */
@keyframes hero-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes hero-orbit-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.5; }
}

/* Responsive */
@media (max-width: 1024px) {
  .hero-mockup-container {
    max-width: 700px;
    height: 400px;
  }
  
  .hero-desktop-screen {
    width: 500px;
    height: 320px;
  }
  
  .hero-mobile-screen {
    width: 200px;
    height: 400px;
  }
}

@media (max-width: 768px) {
  .hero-mockup-container {
    max-width: 100%;
    height: 300px;
  }
  
  .hero-desktop-screen {
    width: 380px;
    height: 240px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .hero-mobile-screen {
    display: none;
  }
}

/* ============================================
   DUNBAR SECTION - REDESIGNED LAYOUT
   ============================================ */

/* Intro text styling */
.dunbar-intro-text {
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-xl);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  text-align: center;
  color: var(--text-default);
  font-weight: var(--weight-normal);
}

/* iPad + Controls Section */
.dunbar-ipad-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* iPad Container - Dunbar specific */
.ipad-container-dunbar {
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}

.ipad-mockup-dunbar {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4/3;
  min-height: 450px; /* Ensure iPad is visible */
  position: relative;
  transform-style: preserve-3d;
}

.ipad-frame-dunbar {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
  border-radius: 32px;
  padding: 24px;
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.ipad-screen-dunbar {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.ipad-cosmic-bg-dunbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, #1a1f3a 0%, #0a0e1a 100%);
  z-index: 0;
}

.ipad-orbit-container-dunbar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Ring Control Cards */
.dunbar-ring-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  width: 100%;
  max-width: 1000px;
}

.ring-control-card {
  position: relative;
  background: var(--bg-subtle);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--pad-lg);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-soft);
  display: block;
}

.ring-control-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ring-control-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-info);
}

.ring-control-card input:checked + .ring-card-content {
  opacity: 1;
}

.ring-control-card input:not(:checked) + .ring-card-content {
  opacity: 0.5;
}

.ring-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  transition: opacity var(--duration-base) var(--ease-soft);
}

.ring-number {
  font-size: 3rem;
  font-weight: var(--weight-black);
  line-height: 1;
  color: var(--accent-info); /* Fallback color */
  background: linear-gradient(135deg, var(--accent-info), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-height: 3rem; /* Ensure space is reserved */
}

.ring-control-card h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-default);
  margin: 0;
}

.ring-control-card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.ring-examples {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  font-style: italic;
  margin-top: var(--space-2xs);
}

/* Color coding for each ring */
.toggle-core .ring-number {
  background: linear-gradient(135deg, #FF8B7B, #FFC48C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.toggle-inner .ring-number {
  background: linear-gradient(135deg, #FFC48C, #FFE0A0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.toggle-near .ring-number {
  background: linear-gradient(135deg, #83B9FF, #C4C9FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.toggle-far .ring-number {
  background: linear-gradient(135deg, #C4C9FF, #A8B5E8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hover states with colored borders */
.toggle-core:hover {
  border-color: #FF8B7B;
}

.toggle-inner:hover {
  border-color: #FFC48C;
}

.toggle-near:hover {
  border-color: #83B9FF;
}

.toggle-far:hover {
  border-color: #C4C9FF;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dunbar-ring-controls {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ring-number {
    font-size: 2.5rem;
  }
  
  .ipad-mockup-dunbar {
    max-width: 500px;
  }
}

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

/* Aqua gel button active state */
.mockup-rsvp-btn.active {
  background: linear-gradient(180deg,
    rgba(80, 130, 220, 0.95) 0%,
    rgba(60, 110, 200, 0.9) 100%
  );
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Mockup cards Aqua styling */
.person-preview, .mockup-event, .mockup-moment {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 251, 254, 0.92) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="dark"] .person-preview,
[data-theme="dark"] .mockup-event,
[data-theme="dark"] .mockup-moment {
  background: linear-gradient(180deg,
    rgba(55, 65, 80, 0.95) 0%,
    rgba(45, 55, 70, 0.92) 100%
  );
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Overall bento card Aqua coherence */
.bento-card {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(250, 252, 255, 0.5) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

[data-theme="dark"] .bento-card {
  background: linear-gradient(180deg,
    rgba(40, 48, 60, 0.7) 0%,
    rgba(30, 38, 50, 0.6) 100%
  );
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ============================================
   NARRATIVE SPACING SYSTEM
   Consistent vertical rhythm grouped by narrative context
   ============================================ */

/* GROUP 1: INTRODUCTION & HOOK */
.hero {
  margin-bottom: var(--space-xl); /* 48px - within group spacing */
}

.problem-statement {
  margin-bottom: var(--space-3xl); /* 96px - END of introduction group */
}

/* GROUP 2: EMOTIONAL CONNECTION */
.personas-carousel {
  margin-bottom: var(--space-3xl); /* 96px - major narrative shift to brand */
}

/* GROUP 3: BRAND IDENTITY */
.brand-identity-section {
  margin-bottom: var(--space-3xl); /* 96px - major narrative shift to science */
}

/* GROUP 4: THE SCIENCE (Dunbar's Number) */
.dunbar-limit-section {
  margin-bottom: var(--space-3xl); /* 96px - major shift to solution */
}

/* Dunbar subsections - consistent internal spacing */
.dunbar-ipad-section {
  margin-bottom: var(--space-xl); /* 48px - within Dunbar group */
}

.dunbar-content-stack {
  margin-top: var(--space-xl); /* 48px - spacing before evolution story */
}

.dunbar-section {
  margin-bottom: var(--space-xl); /* 48px - between Dunbar subsections */
}

.dunbar-section:last-child {
  margin-bottom: 0; /* No extra margin on last subsection */
}

/* GROUP 5: THE SOLUTION */
#tools {
  margin-bottom: var(--space-3xl); /* 96px - major shift to CTA */
}

/* GROUP 6: CALL TO ACTION */
#pricing {
  margin-bottom: var(--space-2xl); /* 64px - related CTA sections */
}

.signup-cosmos {
  margin-bottom: var(--space-3xl); /* 96px - transition to footer */
}

/* GROUP 7: FOOTER */
.footer {
  margin-bottom: 0; /* End of page */
}

/* Remove any conflicting section class margins */
.section {
  margin-bottom: 0; /* Reset default, use specific class spacing above */
}

/* Ensure consistent section padding (vertical breathing room within sections) */
.section,
.dunbar-limit-section,
.brand-identity-section,
.problem-statement,
.personas-carousel,
.signup-cosmos {
  padding-top: var(--space-md); /* 32px top padding for internal breathing */
  padding-bottom: var(--space-md); /* 32px bottom padding for internal breathing */
}

/* Hero doesn't need top padding (it's at the top of page) */
.hero {
  padding-top: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Reduce spacing on mobile for better use of vertical space */
  .problem-statement,
  .personas-carousel,
  .brand-identity-section,
  .dunbar-limit-section,
  #tools,
  .signup-cosmos {
    margin-bottom: var(--space-2xl); /* 64px instead of 96px on mobile */
  }
  
  #pricing {
    margin-bottom: var(--space-xl); /* 48px instead of 64px on mobile */
  }
  
  .dunbar-ipad-section,
  .dunbar-section,
  .dunbar-content-stack {
    margin-bottom: var(--space-lg); /* 40px instead of 48px on mobile */
  }
}