/* ============================================================
   AI Course For SEO — Global Design System
   Specification: DESIGN.md (Minimal, premium, technical, editorial monochrome SaaS marketplace)
   Includes Full Light & Dark Mode System
   ============================================================ */

/* --- Reference typefaces (runrobrun.com): Monument = display, Neue Montreal = headings, Neureal = mono body --- */
@font-face { font-family: 'Monument Extended'; src: url('../fonts/PPMonumentExtended_Bold-s.3nd20y3e6r2ln.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('../fonts/PPNeueMontreal_Medium-s.27b42u55evuf-.woff2') format('woff2'); font-weight: 100 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('../fonts/PPNeueMontreal_Semibold-s.2cdz_6gochybr.woff2') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neureal Mono'; src: url('../fonts/OONeureal_SemiMono-s.1nl5dhp-a-fko.otf') format('opentype'); font-weight: 100 900; font-style: normal; font-display: block; }
/* Metric-matched Arial fallbacks (same overrides as the reference) to avoid layout shift */
@font-face { font-family: 'Monument Extended Fallback'; src: local('Arial'); ascent-override: 47.94%; descent-override: 16.72%; line-gap-override: 5.57%; size-adjust: 179.39%; }
@font-face { font-family: 'Neue Montreal Fallback'; src: local('Arial'); ascent-override: 99.89%; descent-override: 25.23%; line-gap-override: 0%; size-adjust: 95.9%; }
@font-face { font-family: 'Neureal Mono Fallback'; src: local('Arial'); ascent-override: 78.81%; descent-override: 20.74%; line-gap-override: 0%; size-adjust: 120.54%; }

/* --- Design Tokens (Light Theme Default) --- */
:root {
  /* Fonts */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --rr-display: 'Monument Extended', 'Monument Extended Fallback', 'Inter', sans-serif;
  --rr-heading: 'Neue Montreal', 'Neue Montreal Fallback', 'Inter', sans-serif;
  --rr-mono: 'Neureal Mono', 'Neureal Mono Fallback', 'SFMono-Regular', 'SF Mono', Consolas, monospace;

  /* Typography Scale */
  --text-hero: clamp(36px, 5.5vw, 64px);
  --text-section: clamp(22px, 3vw, 28px);
  --text-card-title: 14px;
  --text-body: 13.5px;
  --text-body-sm: 12px;
  --text-meta: 9.5px;
  --text-pill: 9px;

  /* Line Heights */
  --lh-hero: 0.98;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.5;

  /* Brand Palette - Light Mode (DESIGN.md) */
  --bg-base: #F7F7F6;
  --fabric-dot: rgba(0, 0, 0, 0.075);
  --surface: #FFFFFF;
  --surface-secondary: #FAFAFA;
  --surface-tertiary: #F1F1F0;
  --surface-dark: #171716;
  --surface-dark-secondary: #222221;

  --text-primary: #151515;
  --text-secondary: #666666;
  --text-muted: #8A8A8A;
  --text-on-dark: #FFFFFF;
  --text-on-dark-secondary: #999999;

  --border: #DEDEDC;
  --border-light: #EAEAE8;
  --border-subtle: #E2E2E0;
  --border-card: #DFDFDD;
  --border-hover: #BEBEBB;
  --border-dark: #30302F;
  --border-dark-hover: #444443;

  --cta-bg: #171717;
  --cta-hover: #292929;
  --cta-text: #FFFFFF;
  --cta-border: #171717;

  /* Shadows (DESIGN.md) */
  --shadow-nav: 0 3px 14px rgba(0, 0, 0, 0.055);
  --shadow-mega: 0 15px 45px rgba(0, 0, 0, 0.10);
  --shadow-surface: 0 4px 20px rgba(0, 0, 0, 0.035);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.025);
  --shadow-card-hover: 0 8px 22px rgba(0, 0, 0, 0.065);
  --shadow-input: 0 3px 12px rgba(0, 0, 0, 0.035);
  --shadow-dark-card: 0 8px 25px rgba(0, 0, 0, 0.14);

  /* Radius (DESIGN.md) */
  --radius-nav: 20px;
  --radius-mega: 22px;
  --radius-surface: 24px;
  --radius-card: 10px;
  --radius-btn: 12px;
  --radius-input: 9px;
  --radius-pill: 999px;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 64px;
  --section-gap: 80px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-smooth: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Dark Theme Tokens --- */
[data-theme="dark"] {
  --bg-base: #0F0F0E;
  --fabric-dot: rgba(255, 255, 255, 0.085);
  --surface: #171716;
  --surface-secondary: #1F1F1E;
  --surface-tertiary: #272726;
  --surface-dark: #0A0A09;
  --surface-dark-secondary: #141413;

  --text-primary: #F3F3F2;
  --text-secondary: #A0A09C;
  --text-muted: #72726E;
  --text-on-dark: #FFFFFF;
  --text-on-dark-secondary: #999999;

  --border: #2C2C2B;
  --border-light: #242423;
  --border-subtle: #2A2A29;
  --border-card: #282827;
  --border-hover: #484846;
  --border-dark: #383836;
  --border-dark-hover: #525250;

  --cta-bg: #FFFFFF;
  --cta-hover: #E8E8E7;
  --cta-text: #111110;
  --cta-border: #FFFFFF;

  --shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-mega: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-surface: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
  --shadow-input: 0 3px 12px rgba(0, 0, 0, 0.25);
  --shadow-dark-card: 0 8px 30px rgba(0, 0, 0, 0.45);
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background-color: var(--bg-base);
  /* Clean solid background across all standard sections - no global dots */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

img, svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

/* --- Global Utilities --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.text-muted-editorial {
  color: var(--text-muted);
  font-weight: 400;
}

/* Large content surface container (DESIGN.md) */
.content-surface {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-surface);
  padding: 40px;
  margin-bottom: 32px;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* --- Navigation (Floating Rounded Header) --- */
.site-header-wrapper {
  position: sticky;
  top: 8px;
  z-index: 100;
  padding: 0 16px;
  margin-bottom: 24px;
}

.site-header {
  max-width: var(--max-width);
  margin: 0 auto;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 20px;
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[data-theme="dark"] .site-header {
  background: rgba(23, 23, 22, 0.88);
}

.brand-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.logo-symbol {
  width: 28px;
  height: 28px;
  background: var(--cta-bg);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cta-text);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.logo-symbol svg {
  width: 16px;
  height: 16px;
}

.brand-tag {
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-secondary);
  border: 1px solid var(--border-light);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Nav Menu */
.site-nav {
  display: flex;
  align-items: center;
}

.site-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 4px;
}

.nav-link {
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.nav-link:hover,
.nav-link[aria-expanded="true"] {
  background: var(--surface-secondary);
  color: var(--text-primary);
}

.nav-link.active {
  color: var(--text-primary);
  font-weight: 600;
}

.nav-link svg.chevron {
  width: 12px;
  height: 12px;
  stroke-width: 2;
  transition: transform var(--transition-fast);
}

.nav-link[aria-expanded="true"] svg.chevron {
  transform: rotate(180deg);
}

/* Header Right Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Theme Toggle Button */
.theme-toggle {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--surface-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.theme-toggle .icon-sun {
  width: 16px;
  height: 16px;
  display: none;
}

.theme-toggle .icon-moon {
  width: 16px;
  height: 16px;
  display: block;
}

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

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

/* Buttons (DESIGN.md) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--radius-btn);
  padding: 9px 16px;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-text);
  border: 1px solid var(--cta-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-primary:hover {
  background: var(--cta-hover);
  color: var(--cta-text);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--surface-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.btn-pill {
  border-radius: var(--radius-pill);
}

/* Nav Toggle for Mobile */
.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
}

.nav-toggle svg {
  width: 18px;
  height: 18px;
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* Mega Menu (DESIGN.md lines 251-304) */
.mega-menu-wrapper {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  padding: 0 4px;
  display: none;
  pointer-events: none;
  animation: megaFade 180ms ease-out forwards;
}

.mega-menu-wrapper.is-open {
  display: block;
  pointer-events: auto;
}

@keyframes megaFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mega-menu-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-mega);
  box-shadow: var(--shadow-mega);
  padding: 20px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

/* Mega Menu Left Dark Feature Card */
.mega-feature-dark {
  background: linear-gradient(135deg, #292928, #111110);
  border: 1px solid #333332;
  border-radius: 15px;
  padding: 24px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-dark-card);
}

[data-theme="dark"] .mega-feature-dark {
  background: linear-gradient(135deg, #222221, #131312);
  border-color: #383836;
}

.mega-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #BDBDBD;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 4px 9px;
  margin-bottom: 16px;
  width: fit-content;
}

.mega-feature-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00DD82;
}

.mega-feature-title {
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.mega-feature-desc {
  font-size: 12px;
  line-height: 1.45;
  color: #999999;
  margin-bottom: 20px;
}

.mega-feature-link {
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition-fast);
}

.mega-feature-dark:hover .mega-feature-link {
  gap: 10px;
}

/* Mega Menu Grid Links */
.mega-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mega-link-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: transparent;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.mega-link-item:hover {
  background: var(--surface-secondary);
}

.mega-link-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.mega-link-icon svg {
  width: 16px;
  height: 16px;
}

.mega-link-text h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.mega-link-text p {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-secondary);
}

/* --- Hero Section (DESIGN.md lines 306-357) --- */
/* Pure CSS Fabric Effect with Mesh Gradient & Fine Stippled Dots */
.hero {
  position: relative;
  padding: 84px 0 52px;
  text-align: center;
  overflow: hidden;
}

/* Layer 1: Organic Mesh Gradient Fabric Drape Folds - 100% full screen width */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* Left curved drape fold wave from edge */
    radial-gradient(ellipse 55% 65% at 0% 35%, rgba(0, 0, 0, 0.085) 0%, rgba(0, 0, 0, 0.035) 45%, transparent 70%),
    /* Right curved drape fold wave from edge */
    radial-gradient(ellipse 55% 65% at 100% 30%, rgba(0, 0, 0, 0.085) 0%, rgba(0, 0, 0, 0.035) 45%, transparent 70%),
    /* Mid-left diagonal soft fold */
    radial-gradient(ellipse 48% 45% at 16% 80%, rgba(0, 0, 0, 0.045) 0%, transparent 65%),
    /* Mid-right diagonal soft fold */
    radial-gradient(ellipse 48% 45% at 84% 85%, rgba(0, 0, 0, 0.045) 0%, transparent 65%),
    /* Top ambient fold */
    radial-gradient(ellipse 75% 35% at 50% 0%, rgba(0, 0, 0, 0.03) 0%, transparent 70%);
}

/* Layer 2: Fine Stippled Fabric Dot Matrix with Vignette Mask - 100% full screen width */
.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(var(--fabric-dot) 0.8px, transparent 0.8px);
  background-size: 5.5px 5.5px;
  -webkit-mask-image: radial-gradient(ellipse 92% 80% at 50% 45%, rgba(0, 0, 0, 0.95) 30%, rgba(0, 0, 0, 0.5) 65%, transparent 92%);
  mask-image: radial-gradient(ellipse 92% 80% at 50% 45%, rgba(0, 0, 0, 0.95) 30%, rgba(0, 0, 0, 0.5) 65%, transparent 92%);
  opacity: 0.9;
}

[data-theme="dark"] .hero::before {
  background-image:
    /* Left curved drape fold wave */
    radial-gradient(ellipse 55% 65% at 0% 35%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 45%, transparent 70%),
    /* Right curved drape fold wave */
    radial-gradient(ellipse 55% 65% at 100% 30%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 45%, transparent 70%),
    /* Mid-left diagonal soft fold */
    radial-gradient(ellipse 48% 45% at 16% 80%, rgba(255, 255, 255, 0.045) 0%, transparent 65%),
    /* Mid-right diagonal soft fold */
    radial-gradient(ellipse 48% 45% at 84% 85%, rgba(255, 255, 255, 0.045) 0%, transparent 65%),
    /* Top ambient fold */
    radial-gradient(ellipse 75% 35% at 50% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
}

[data-theme="dark"] .hero::after {
  opacity: 0.8;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  margin-bottom: 20px;
  color: var(--text-secondary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-primary);
}

.hero h1 {
  font-size: var(--text-hero);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: var(--lh-hero);
  color: var(--text-primary);
  margin-bottom: 18px;
  max-width: 720px;
}

.hero-subheading {
  color: var(--text-muted);
  display: block;
}

.hero p.subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 580px;
  margin-bottom: 28px;
}

/* Centered Hero CTA Section */
.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 28px;
  width: 100%;
}

.hero-ctas .btn-primary {
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.hero-ctas .btn-secondary {
  font-size: 11.5px;
  padding: 5px 14px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}

.hero-ctas .btn-secondary:hover {
  background: var(--surface-secondary);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* Search Bar (DESIGN.md lines 343-356, 769-781) */
.hero-search-wrapper {
  width: 100%;
  max-width: 520px;
  position: relative;
  margin-bottom: 18px;
}

.hero-search-input {
  width: 100%;
  height: 42px;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-input);
  box-shadow: var(--shadow-input);
  padding: 0 40px 0 38px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.hero-search-input::placeholder {
  color: var(--text-muted);
}

.hero-search-input:focus {
  outline: none;
  border-color: var(--border-hover);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .hero-search-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.search-icon-left {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-secondary);
}

.search-clear-btn.visible {
  display: flex;
}

/* Category Filter Pills (DESIGN.md lines 359-385) */
.category-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}

.filter-pill {
  height: 27px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-pill);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.filter-pill:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.filter-pill.active {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-color: var(--cta-bg);
}

/* --- Content Sections & Architecture --- */
.section {
  padding: 48px 0;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-header-left {
  max-width: 780px;
}

.section-header h2 {
  font-size: var(--text-section);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.section-header p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.45;
}

.section-badge {
  font-size: var(--text-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  white-space: nowrap;
}

/* Text / Editorial about content */
.about-content {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--text-secondary);
}

.about-content p {
  margin-bottom: 14px;
}

.about-content p:last-child {
  margin-bottom: 0;
}

.about-content a {
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hover);
}

.about-content a:hover {
  text-decoration-color: var(--text-primary);
}

/* Section Divider */
.section-divider {
  border: none;
  height: 1px;
  background: var(--border-light);
  margin: 32px 0;
}

/* --- Dark Feature Card (DESIGN.md lines 271-286, 896-909) --- */
.dark-feature-card {
  background: linear-gradient(135deg, #2A2A29 0%, #121211 100%);
  border: 1px solid #353534;
  border-radius: 14px;
  padding: 28px;
  color: #FFFFFF;
  box-shadow: var(--shadow-dark-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 24px;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

[data-theme="dark"] .dark-feature-card {
  background: linear-gradient(135deg, #242423 0%, #141413 100%);
  border-color: #383836;
}

.dark-feature-card:hover {
  transform: translateY(-2px);
  border-color: #4A4A49;
}

.dark-feature-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dark-feature-tag {
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #BDBDBA;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

.dark-feature-icon {
  width: 22px;
  height: 22px;
  color: #BDBDBA;
}

.dark-feature-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.dark-feature-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: #9A9A98;
  margin-bottom: 20px;
}

.dark-feature-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
  margin-top: auto;
}

.dark-feature-meta {
  font-size: var(--text-meta);
  color: #888886;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Split layout for AI SEO Course section */
.course-overview-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}

/* --- Marketplace Tool/Module Cards (DESIGN.md lines 414-490) --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  min-height: 110px;
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
}

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

a.card {
  text-decoration: none;
  color: inherit;
}

.card.hidden-by-filter {
  display: none !important;
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.card-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.card-icon-box svg {
  width: 15px;
  height: 15px;
}

.card h3 {
  font-size: var(--text-card-title);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.card-ext-icon {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  opacity: 0.6;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
  margin-top: 2px;
}

.card:hover .card-ext-icon {
  opacity: 1;
  transform: translate(1px, -1px);
}

.card p {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.card-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.tag-pill {
  background: var(--surface-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 8px;
  padding: 2.5px 7px;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.card-stat {
  font-size: var(--text-meta);
  color: var(--text-muted);
  white-space: nowrap;
  font-family: var(--font-mono);
}

/* --- Audience Grid (Who Is It For?) --- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.audience-item {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.audience-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-hover);
}

.audience-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.audience-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.audience-icon svg {
  width: 16px;
  height: 16px;
}

.audience-badge {
  font-size: 8px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-secondary);
  border: 1px solid var(--border-light);
  padding: 2px 6px;
  border-radius: 4px;
}

.audience-item h3 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.audience-item p {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* --- Learning Path (Structured Technical Progression) --- */
.path-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
}

.path-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  box-shadow: var(--shadow-card);
}

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

.path-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.path-step-number {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-secondary);
  border: 1px solid var(--border-light);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.path-phase-label {
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.path-card h3 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.path-card p {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* --- FAQ Section (DESIGN.md lines 542-566) --- */
.faq-section {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 0;
}

.faq-header {
  text-align: center;
  margin-bottom: 32px;
}

.faq-header h2 {
  font-size: clamp(22px, 3vw, 25px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--border-light);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--border-light);
}

.faq-question {
  width: 100%;
  padding: 18px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.faq-question:hover {
  color: var(--text-primary);
  opacity: 0.8;
}

.faq-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 180ms ease-out;
}

.faq-item[data-open="true"] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 200ms ease-out, opacity 180ms ease-out, padding 200ms ease-out;
  padding: 0 4px;
}

.faq-item[data-open="true"] .faq-answer {
  max-height: 280px;
  opacity: 1;
  padding-bottom: 18px;
}

.faq-answer p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Fallback if JS is disabled */
.faq-list:not([data-accordion="true"]) .faq-answer {
  max-height: none;
  opacity: 1;
  padding-bottom: 18px;
}

.cta-banner {
  background: var(--cta-bg);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-dark-card);
  padding: 48px 36px;
  text-align: center;
  color: var(--cta-text);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .cta-banner {
  background: #1C1C1B;
  border-color: #353534;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    /* Mesh fold curves */
    radial-gradient(ellipse 60% 60% at 0% 50%, rgba(255, 255, 255, 0.09) 0%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 100% 50%, rgba(255, 255, 255, 0.09) 0%, transparent 65%),
    /* Fine stippled fabric dot matrix */
    radial-gradient(rgba(255, 255, 255, 0.08) 0.8px, transparent 0.8px);
  background-size: 100% 100%, 100% 100%, 5.5px 5.5px;
  pointer-events: none;
}

.cta-banner-inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cta-banner h2 {
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--cta-text);
  margin-bottom: 10px;
}

[data-theme="dark"] .cta-banner h2 {
  color: #FFFFFF;
}

.cta-banner p {
  font-size: 13.5px;
  line-height: 1.5;
  color: #9E9E9C;
  margin-bottom: 24px;
}

.cta-banner .btn-primary {
  background: #FFFFFF;
  color: #171717;
  border-color: #FFFFFF;
  font-weight: 600;
}

.cta-banner .btn-primary:hover {
  background: #F0F0EF;
  color: #000000;
}

/* --- Footer (DESIGN.md lines 568-605) --- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 56px 0 28px;
  margin-top: 48px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 48px;
}

.footer-brand-col .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.footer-brand-col .footer-logo .logo-symbol {
  width: 24px;
  height: 24px;
}

.footer-brand-col .footer-logo .logo-symbol svg {
  width: 14px;
  height: 14px;
}

.footer-desc {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 280px;
}

.footer-col h4 {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  font-size: 11.5px;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  border-top: 1px solid var(--border-light);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copyright {
  font-size: 9.5px;
  color: var(--text-muted);
}

.footer-sub-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 9.5px;
  color: var(--text-muted);
}

.footer-sub-links a:hover {
  color: var(--text-primary);
}

/* --- Pillar Page Components --- */

.breadcrumb-nav { padding: 16px 0 0; }
.breadcrumb-list { list-style: none; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.breadcrumb-list li { display: flex; align-items: center; gap: 6px; }
.breadcrumb-list li:not(:last-child)::after { content: '/'; color: var(--text-muted); font-size: 10px; }
.breadcrumb-list a { color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); }
.breadcrumb-list a:hover { color: var(--text-primary); }
.breadcrumb-list [aria-current="page"] { color: var(--text-primary); font-weight: 500; }

.pillar-hero { padding-top: 56px; }

.toc-surface { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 24px 28px; margin-bottom: 32px; box-shadow: var(--shadow-card); transition: background var(--transition-fast), border-color var(--transition-fast); }
.toc-surface h2 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; letter-spacing: -0.01em; }
.toc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.toc-list li { display: flex; align-items: center; gap: 8px; }
.toc-list li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--border-hover); flex-shrink: 0; }
.toc-list a { font-size: 12.5px; color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); }
.toc-list a:hover { color: var(--text-primary); }

.pillar-prose { font-size: var(--text-body); line-height: 1.65; color: var(--text-secondary); max-width: 780px; }
.pillar-prose h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-top: 28px; margin-bottom: 10px; letter-spacing: -0.01em; }
.pillar-prose p { margin-bottom: 14px; }
.pillar-prose p:last-child { margin-bottom: 0; }
.pillar-prose a { color: var(--text-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-hover); }
.pillar-prose a:hover { text-decoration-color: var(--text-primary); }
.pillar-prose ul, .pillar-prose ol { margin-bottom: 14px; padding-left: 20px; }
.pillar-prose li { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 6px; }
.pillar-prose strong { color: var(--text-primary); font-weight: 600; }

.evaluation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; margin-bottom: 24px; }
.evaluation-card { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 18px; box-shadow: var(--shadow-card); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }
.evaluation-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--border-hover); }
.evaluation-card-icon { width: 28px; height: 28px; border-radius: 7px; background: var(--surface-secondary); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--text-primary); margin-bottom: 12px; }
.evaluation-card-icon svg { width: 15px; height: 15px; }
.evaluation-card h3 { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.evaluation-card p { font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.check-list { list-style: none; padding: 0; margin: 16px 0; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.check-list li:last-child { border-bottom: none; }
.check-list li::before { content: ''; width: 16px; height: 16px; border: 1.5px solid var(--border-hover); border-radius: 4px; flex-shrink: 0; margin-top: 1px; }

/* --- Responsive Breakpoints (DESIGN.md lines 712-743) --- */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  :root {
    --nav-height: 60px;
  }

  .course-overview-split {
    grid-template-columns: 1fr;
  }

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

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

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .mega-menu-card {
    grid-template-columns: 1fr;
  }

  .mega-feature-dark {
    display: none;
  }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  :root {
    --nav-height: 56px;
    --section-gap: 52px;
  }

  .site-header-wrapper {
    top: 6px;
    padding: 0 10px;
  }

  .site-header {
    padding: 0 12px 0 14px;
    border-radius: 16px;
  }

  .brand-tag {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .header-actions .btn-secondary {
    display: none;
  }

  .header-actions .btn-primary {
    padding: 7px 12px;
    font-size: 11.5px;
  }

  /* Mobile Navigation Drawer */
  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-mega);
    padding: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav[data-open="true"] {
    display: flex;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav-link {
    height: 42px;
    padding: 0 14px;
    border-radius: 8px;
  }

  .mega-menu-wrapper {
    position: static;
    display: block !important;
    animation: none;
    padding: 0;
    margin-top: 8px;
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
  }

  .mega-menu-card {
    padding: 0;
    box-shadow: none;
    border: none;
    grid-template-columns: 1fr;
  }

  .mega-links-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 52px 0 32px;
  }

  .hero p.subtitle {
    font-size: 13px;
  }

  .content-surface {
    padding: 24px 18px;
    border-radius: 18px;
  }

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

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

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

  /* Horizontal scrolling filter bar on mobile */
  .category-filter-bar {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .category-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .evaluation-grid { grid-template-columns: 1fr; }
  .pillar-hero { padding-top: 36px; }
  .toc-surface { padding: 18px 16px; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ============================================================
   Homepage Hero — editorial split type + organic blob
   (Scoped to .home-hero; legacy .hero styles above remain for inner pages)
   ============================================================ */
.home-scene,
.home-hero,
.home-define {
  --hh-bg: #DBDBDA;
  --hh-ink: #050505;
  --hh-ink-soft: rgba(5, 5, 5, 0.78);
  --hh-line: rgba(5, 5, 5, 0.72);
  --hh-line-soft: rgba(5, 5, 5, 0.22);
  --hh-accent: #FF641C;
  --hh-blue: #2C6ED5;
  --hh-grain-opacity: 0.38;
  --hh-pad: clamp(16px, 3.47vw, 50px);
  --hh-nav-space: calc(var(--nav-height) + 8px + 24px);
  --hh-word-size: clamp(64px, 6.6vw, 128px);
  --hh-small: 12.5px;
  --hh-display: var(--rr-display);
  --hh-mono: var(--rr-mono);
}

/* Shared scene: one continuous background for hero + "What is AI SEO?" */
.home-scene {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--hh-nav-space));
  background: var(--hh-bg);
  color: var(--hh-ink);
}

/* Stage holds grain, crosshairs and the blob; pinned while the scene scrolls */
.hs-stage {
  position: relative;
  z-index: 1;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  pointer-events: none;
}

.home-scene.is-pinned .hs-stage {
  position: sticky;
  top: 0;
}

.home-hero {
  position: relative;
  z-index: 3;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--hh-ink);
  font-family: var(--hh-mono);
}

/* Lime accent theme (hero + "What is AI SEO?" so far) */
.home-hero,
.home-define {
  --hh-accent: #B7E33A;
  --hh-accent-deep: #8DBB14;
}

[data-theme="dark"] .home-hero,
[data-theme="dark"] .home-define { --hh-accent-deep: #B7E33A; }

[data-theme="dark"] .home-scene,
[data-theme="dark"] .home-hero,
[data-theme="dark"] .home-define {
  --hh-bg: #121211;
  --hh-ink: #EDEDEA;
  --hh-ink-soft: rgba(237, 237, 234, 0.78);
  --hh-line: rgba(237, 237, 234, 0.7);
  --hh-line-soft: rgba(255, 255, 255, 0.2);
  --hh-grain-opacity: 0.22;
}

/* Film grain over everything (text sits above) */
.hh-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--hh-grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="dark"] .hh-grain {
  mix-blend-mode: screen;
}

/* Registration crosshairs (page-wide, fixed) */
.site-crosses {
  --hh-line: rgba(5, 5, 5, 0.72);
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
}

[data-theme="dark"] .site-crosses {
  --hh-line: rgba(237, 237, 234, 0.7);
}

.hh-cross {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.hh-cross::before,
.hh-cross::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--hh-line);
  transform: translate(-50%, -50%);
  transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), height 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hh-cross::before { width: 22px; height: 1px; }
.hh-cross::after  { width: 1px; height: 22px; }

.hh-cross--tl { top: 10px; left: 10px; }
.hh-cross--tc { top: 10px; left: 50%; transform: translateX(-50%); }
.hh-cross--tr { top: 10px; right: 10px; }
.hh-cross--bl { bottom: 10px; left: 10px; }
.hh-cross--bc { bottom: 10px; left: 50%; transform: translateX(-50%); }
.hh-cross--br { bottom: 10px; right: 10px; }

html.site-is-scrolling .hh-cross--tc::before,
html.site-is-scrolling .hh-cross--bc::before { width: 0; }
html.site-is-scrolling .hh-cross--tc::after,
html.site-is-scrolling .hh-cross--bc::after { height: 0; transition-delay: 60ms; }

/* Accent dot (drifts toward cursor via inline script) */
.hh-dot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: var(--hh-blue);
  pointer-events: none;
  transform: translate3d(80.5vw, 38.6vh, 0);
  animation: hh-fade 0.8s ease 1.1s both;
}

.home-hero:not(.is-interactive) .hh-dot {
  animation: hh-fade 0.8s ease 1.1s both, hh-dot-float 7s ease-in-out 2s infinite alternate;
}

/* --- Organic blob --- */
.hh-blob-wrap {
  position: absolute;
  left: 50%;
  top: 49%;
  z-index: 1;
  width: clamp(260px, 31vw, 600px);
  aspect-ratio: 1;
  pointer-events: none;
  /* --m: 0 = blob, 1 = fully handed over to the glass cube (set by scroll script) */
  opacity: calc(1 - var(--m, 0) * 1.15);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--mx, 0) * -28px), calc(var(--my, 0) * -22px), 0)
    scale(calc(1 - var(--m, 0) * 0.5))
    rotate(calc(var(--m, 0) * 45deg));
}

.hh-blob {
  position: relative;
  width: 100%;
  height: 100%;
  animation: hh-blob-in 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s both;
}

.hh-blob > span {
  position: absolute;
  display: block;
}

.hh-blob__shadow {
  inset: 18% 6% -8% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.05) 60%, transparent);
  filter: blur(28px);
}

[data-theme="dark"] .hh-blob__shadow {
  background: radial-gradient(closest-side, rgba(183, 227, 58, 0.22), transparent);
}

.hh-blob__halo {
  inset: 0;
  border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%;
  background:
    radial-gradient(60% 60% at 42% 40%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(70% 70% at 50% 52%, rgba(203, 236, 110, 0.62), rgba(214, 240, 140, 0.46) 55%, rgba(226, 245, 180, 0.3) 78%, rgba(233, 247, 196, 0.12));
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.4),
    inset -24px -34px 70px rgba(141, 187, 20, 0.22);
  animation: hh-morph-a 16s ease-in-out infinite alternate;
}

.hh-blob__body {
  inset: 12% 9% 13% 11%;
  border-radius: 42% 58% 38% 62% / 55% 40% 60% 45%;
  background:
    radial-gradient(70% 65% at 60% 58%, #A6D526 0%, #B7E33A 32%, #C8EB67 62%, rgba(214, 240, 140, 0.7) 88%, rgba(226, 245, 180, 0.4));
  box-shadow:
    inset 22px 20px 44px rgba(255, 255, 255, 0.28),
    inset -28px -34px 56px rgba(110, 160, 10, 0.32);
  filter: blur(0.4px);
  animation: hh-morph-b 12s ease-in-out infinite alternate;
}

.hh-blob__fold {
  inset: 30% 20% 20% 30%;
  border-radius: 60% 40% 48% 52% / 40% 62% 38% 60%;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0) 30%, rgba(141, 187, 20, 0.55));
  mix-blend-mode: multiply;
  opacity: 0.75;
  filter: blur(6px);
  animation: hh-morph-c 10s ease-in-out infinite alternate;
}

.hh-blob__shine {
  top: 29%;
  left: 23%;
  width: 17%;
  height: 21%;
  border-radius: 55% 45% 40% 60% / 60% 45% 55% 40%;
  background: radial-gradient(circle at 42% 40%, #FFFFFF 0%, rgba(255, 255, 255, 0.92) 38%, rgba(255, 255, 255, 0) 74%);
  filter: blur(1.5px);
  animation: hh-morph-c 9s ease-in-out infinite alternate-reverse;
}

.hh-blob__shine--2 {
  top: auto;
  left: auto;
  bottom: 27%;
  right: 29%;
  width: 17%;
  height: 10%;
  opacity: 0.55;
  animation-duration: 11s;
}

.hh-blob__spark {
  top: 44%;
  left: 43%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.8);
  opacity: 0.85;
}

.hh-blob__spark--2 {
  top: 69%;
  left: 74%;
  width: 5px;
  height: 5px;
}

/* WebGL rabbit (js/hero-rabbit.js) takes over from the CSS blob once ready */
.hh-rabbit {
  position: absolute;
  top: -8%;
  left: -8%;
  width: 116%;
  height: 116%;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.hh-blob > span:not(.hh-blob__shadow) { transition: opacity 0.7s ease; }

.hh-blob-wrap.has-rabbit .hh-rabbit { opacity: 1; }
.hh-blob-wrap.has-rabbit .hh-blob > span:not(.hh-blob__shadow) { opacity: 0; }

/* With WebGL the rabbit never fades on scroll: it bursts into a knowledge graph
   and travels into the cube's slot (--gx/--gy/--gs set by js/hero-rabbit.js) */
.hh-blob-wrap.has-rabbit {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    translate3d(var(--gx, 0px), var(--gy, 0px), 0)
    scale(var(--gs, 1));
}

.hh-blob-wrap.has-rabbit .hh-blob__shadow { opacity: calc(1 - var(--m, 0) * 2); }

.home-scene.has-graph .hd-cube-wrap { visibility: hidden; animation: none; }

/* Hub labels projected from the 3D graph */
.hh-graph-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hh-graph-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  background: var(--hh-bg);
  border: 1px solid var(--hh-ink);
  font-family: var(--hh-mono);
  font-size: calc(10.5px / var(--gs, 1));
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hh-ink);
  opacity: 0;
  will-change: transform, opacity;
}

.hh-graph-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #B7E33A;
}

/* --- Content frame --- */
.hh-frame {
  position: relative;
  z-index: 3;
  min-height: inherit;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--hh-nav-space) + 18px) var(--hh-pad) calc(var(--hh-pad) + 8px);
}

/* Giant split display H1 */
.hh-title {
  position: absolute;
  top: calc(var(--hh-nav-space) - 37px);
  right: var(--hh-pad);
  bottom: calc(var(--hh-pad) + 5px);
  left: var(--hh-pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  margin: 0;
  font-weight: 900;
  color: var(--hh-ink);
}

.hh-word {
  display: block;
  font-family: var(--hh-display);
  font-size: var(--hh-word-size);
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hh-word--top {
  align-self: flex-start;
  animation: hh-rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

.hh-word--bottom {
  align-self: flex-end;
  animation: hh-rise 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}

.hh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* "Press play" style CTA */
.hh-ctas {
  position: absolute;
  top: 50%;
  left: 75.8%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  animation: hh-fade 0.8s ease 0.9s both;
}

.hh-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--hh-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--hh-ink);
}

.hh-play__icon {
  width: 11px;
  height: 12px;
  background: var(--hh-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hh-play__label {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  padding-bottom: 2px;
  transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--transition-fast);
}

.hh-play:hover .hh-play__icon { transform: translateX(4px) scale(1.15); }
.hh-play:hover .hh-play__label { background-size: 100% 1px; }

/* Hero CTA stays still on hover; the playlist below does the talking */
.hh-ctas .hh-play__icon { background: var(--hh-accent-deep); }
.hh-ctas .hh-play:hover .hh-play__icon { transform: none; }
.hh-ctas .hh-play:hover .hh-play__label { background-size: 0 1px; }

/* Playlist-style module links under the CTA (revealed on hover / focus) */
.hh-playlist {
  position: absolute;
  top: 100%;
  left: -2px;
  width: 280px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.5s;
}

.hh-ctas:hover .hh-playlist,
.hh-ctas:focus-within .hh-playlist {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.hh-playlist li {
  position: relative;
  overflow: hidden;
}

/* Rule above each row draws in from the left */
.hh-playlist li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hh-ink);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hh-playlist a {
  display: block;
  padding: 11px 0 9px;
  font-family: var(--hh-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 11px;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hh-ink);
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease,
    padding 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.2s ease,
    color 0.2s ease;
}

.hh-playlist a:hover,
.hh-playlist a:focus-visible {
  padding-left: 8px;
  background: var(--hh-accent);
  color: #050505;
  outline: none;
}

.hh-ctas:hover .hh-playlist li::before,
.hh-ctas:focus-within .hh-playlist li::before { transform: scaleX(1); }

.hh-ctas:hover .hh-playlist a,
.hh-ctas:focus-within .hh-playlist a {
  opacity: 1;
  transform: translateY(0);
}

.hh-ctas:hover .hh-playlist li:nth-child(2)::before,
.hh-ctas:hover .hh-playlist li:nth-child(2) a,
.hh-ctas:focus-within .hh-playlist li:nth-child(2)::before,
.hh-ctas:focus-within .hh-playlist li:nth-child(2) a { transition-delay: 0.06s; }

.hh-ctas:hover .hh-playlist li:nth-child(3)::before,
.hh-ctas:hover .hh-playlist li:nth-child(3) a,
.hh-ctas:focus-within .hh-playlist li:nth-child(3)::before,
.hh-ctas:focus-within .hh-playlist li:nth-child(3) a { transition-delay: 0.12s; }

/* Format + local time meta (aligned with the About label row) */
.hh-meta {
  position: absolute;
  left: 74.3%;
  right: var(--hh-pad);
  bottom: calc(var(--hh-pad) + 8px + var(--hh-word-size) * 0.84 + 3px);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--hh-mono);
  font-size: var(--hh-small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--hh-ink-soft);
  animation: hh-fade 0.8s ease 0.8s both;
}

.hh-meta__key { margin-right: 14px; }
.hh-clock { font-variant-numeric: tabular-nums; }
.hh-clock::before { content: attr(data-time); }

/* About column */
.hh-about {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  max-width: min(452px, 32vw);
  animation: hh-fade 0.9s ease 0.6s both;
}

.hh-about__label::before { content: 'About'; }

.hh-about__label {
  font-size: var(--hh-small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--hh-ink-soft);
  margin-bottom: 35px;
}

.hh-about__text {
  font-size: var(--hh-small);
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: justify;
  color: rgba(5, 5, 5, 0.9);
  margin: 0;
}

/* --- Motion --- */
@keyframes hh-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hh-rise {
  from { opacity: 0; transform: translateY(35%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hh-blob-in {
  from { opacity: 0; transform: scale(0.72) rotate(-18deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes hh-morph-a {
  0%   { border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; transform: rotate(0deg); }
  50%  { border-radius: 45% 55% 42% 58% / 58% 42% 60% 40%; transform: rotate(8deg) scale(1.02); }
  100% { border-radius: 52% 48% 60% 40% / 40% 60% 48% 52%; transform: rotate(-6deg); }
}

@keyframes hh-morph-b {
  0%   { border-radius: 42% 58% 38% 62% / 55% 40% 60% 45%; transform: rotate(0deg) translate(0, 0); }
  50%  { border-radius: 60% 40% 55% 45% / 38% 62% 42% 58%; transform: rotate(-10deg) translate(2%, -2%); }
  100% { border-radius: 38% 62% 48% 52% / 62% 38% 55% 45%; transform: rotate(7deg) translate(-2%, 1%); }
}

@keyframes hh-morph-c {
  0%   { border-radius: 60% 40% 48% 52% / 40% 62% 38% 60%; transform: translate(0, 0) rotate(0deg); }
  100% { border-radius: 42% 58% 60% 40% / 58% 42% 55% 45%; transform: translate(6%, 4%) rotate(14deg); }
}

@keyframes hh-dot-float {
  from { transform: translate3d(80.5vw, 38.6vh, 0); }
  to   { transform: translate3d(78vw, 44vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero *,
  .home-hero *::before,
  .home-hero *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Big monitors & TVs: keep scaling past 1920px instead of capping --- */
@media (min-width: 1921px) {
  .home-scene,
  .home-hero {
    --hh-pad: 2.6vw;
    --hh-word-size: 6.6vw;
    --hh-small: 0.65vw;
  }

  .hh-blob-wrap { width: 31vw; }
  .hh-about { max-width: 23.5vw; }
  .hh-about__label { margin-bottom: 1.8vw; }
  .hh-play { font-size: 0.68vw; gap: 0.62vw; }
  .hh-play__icon { width: 0.57vw; height: 0.62vw; }
  .hh-playlist { width: 14.6vw; padding-top: 0.73vw; }
  .hh-playlist a { font-size: 0.57vw; line-height: 0.57vw; padding: 0.57vw 0 0.47vw; }

  .hh-dot {
    width: 1.25vw;
    height: 1.25vw;
    margin: -0.625vw 0 0 -0.625vw;
  }
}

/* --- Stacked layout: portrait tablets & phones (landscape 901–1024 keeps the desktop layout) --- */
@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
  /* Set on the scene too: the blob lives in .hs-stage, outside .home-hero */
  .home-scene,
  .home-hero {
    --hh-word-size: clamp(40px, 13.4vw, 120px);
  }

  .home-hero { min-height: 0; }

  .hh-frame {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: calc(var(--hh-pad) + 28px);
  }

  .hh-frame > * {
    min-width: 0;
    max-width: 100%;
  }

  .hh-title {
    order: 2;
    position: static;
    gap: 14px;
  }

  /* Blob sits between title and CTA, in flow (two 0.84-line words + 14px gap above it) */
  .hh-blob-wrap {
    top: calc(var(--hh-nav-space) + 18px + var(--hh-word-size) * 1.68 + 14px + 24px);
    width: min(66vw, 420px);
    transform:
      translate(-50%, 0)
      scale(calc(1 - var(--m, 0) * 0.5))
      rotate(calc(var(--m, 0) * 45deg));
  }

  .hh-ctas {
    order: 3;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    align-items: center;
    margin-top: calc(min(66vw, 420px) + 8px);
  }

  .hh-playlist {
    left: 50%;
    margin-left: -140px;
  }

  .hh-rabbit { top: -16%; }

  .hh-blob-wrap.has-rabbit {
    transform:
      translate(-50%, 0)
      translate3d(var(--gx, 0px), var(--gy, 0px), 0)
      scale(var(--gs, 1));
  }

  .hh-meta {
    order: 4;
    position: static;
    justify-content: center;
    gap: 40px;
    margin: 28px 0 28px;
  }

  .hh-about {
    order: 5;
    width: 100%;
    max-width: 560px;
  }

  .hh-about__label { margin-bottom: 14px; }

  .hh-dot {
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
  }

  .hh-cross--tc,
  .hh-cross--tl,
  .hh-cross--tr { display: none; }
}

@media (max-width: 480px) {
  .hh-about__text {
    font-size: 11.5px;
    text-align: left;
  }

  .hh-play { font-size: 11.5px; }
}

/* ============================================================
   Homepage "What is AI SEO?" — split statement + glass cube
   (Scoped to .home-define; shares tokens, grain & crosshairs with .home-hero)
   ============================================================ */
.home-define {
  position: relative;
  z-index: 3;
  overflow: hidden;
  color: var(--hh-ink);
  font-family: var(--hh-mono);
}

.hd-frame {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 40px;
  padding: calc(var(--nav-height) + 44px) var(--hh-pad) calc(var(--hh-pad) + 36px);
}

.hd-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hh-ink-soft);
}

.hd-meta__index::before { content: '(01)'; }

.hd-meta__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.hd-meta__badge::after {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--hh-accent);
}

/* Held section (desktop): taller than the screen with a sticky frame, so the
   content stays put while the heading rolls (see pinSection in index.html) */
.home-define.is-held {
  --hd-hold: 120vh;
  height: calc(100vh + var(--hd-hold));
  overflow: clip;
}

.home-define.is-held > .hd-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}

/* Split statement */
.hd-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
}

.hd-statement {
  margin: 0;
  font-family: var(--rr-heading);
  font-size: clamp(34px, 4.6vw, 88px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--hh-ink);
}

.hd-statement--right { text-align: right; }

.hd-line {
  display: block;
  overflow: hidden;
  clip-path: polygon(0 2%, 0 98%, 100% 98%, 100% 2%);
  line-height: 0.9;
  padding: 0.04em 0;
}

.hd-line > span {
  position: relative;
  display: inline-block;
  transform: translateY(calc(var(--roll, 0) * 100%));
  will-change: transform;
}

/* Decorative lines carry their text only in data-text (not indexed) */
.hd-line > span:empty::after {
  content: attr(data-text);
  white-space: nowrap;
}

.hd-line > span::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: -100%;
  white-space: nowrap;
}

/* Glass cube (rotation driven by --p scroll progress) */
.hd-cube-wrap {
  --s: clamp(150px, 16vw, 290px);
  position: relative;
  width: var(--s);
  height: var(--s);
  margin: 0 clamp(12px, 3vw, 60px);
  perspective: 1000px;
  animation: hd-float 6s ease-in-out infinite alternate;
}

.hd-cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    scale(calc(0.5 + var(--m, 1) * 0.5))
    rotateX(calc(-22deg + var(--p, 0.5) * 44deg))
    rotateY(calc(-40deg + var(--p, 0.5) * 120deg))
    rotateZ(calc(8deg - var(--p, 0.5) * 16deg));
}

/* Cube materialises as the pinned blob hands over (--m from scroll script) */
.hd-cube-wrap {
  opacity: calc(var(--m, 1) * 1.4 - 0.4);
}

.hd-cube__face {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.16) 60%, rgba(240, 250, 214, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.4);
}

.hd-cube__face--front  { transform: translateZ(calc(var(--s) / 2)); }
.hd-cube__face--back   { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.hd-cube__face--right  { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.hd-cube__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.hd-cube__face--top    { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.hd-cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

.hd-cube__core {
  position: absolute;
  inset: 24%;
  background: radial-gradient(circle at 45% 45%, #A6D526, #B7E33A 55%, rgba(214, 240, 140, 0.85));
  box-shadow: 0 0 50px 14px rgba(183, 227, 58, 0.45);
  filter: blur(1.5px);
}

.hd-cube-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -26%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.18), transparent);
  filter: blur(10px);
}

[data-theme="dark"] .hh-about__text,
[data-theme="dark"] .hd-body__text {
  color: rgba(237, 237, 234, 0.8);
}

[data-theme="dark"] .hd-cube__face {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 60%, rgba(183, 227, 58, 0.08));
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .hd-cube-shadow {
  background: radial-gradient(closest-side, rgba(183, 227, 58, 0.25), transparent);
}

/* Body copy */
.hd-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: clamp(20px, 3vw, 56px);
}

.hd-body__text {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: justify;
  color: rgba(5, 5, 5, 0.8);
}

.hd-body__text strong { font-weight: 600; color: var(--hh-ink); }

/* "With AI" / "For AI" run-in labels with the accent square */
.hd-body__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
}

.hd-body__label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--hh-accent);
}

.hd-body__cta {
  grid-column: 3;
  justify-self: end;
  max-width: 320px;
  font-size: 13px;
  color: var(--hh-ink);
}

.hd-body__cta .hh-play {
  align-items: flex-start;
  line-height: 1.5;
}

.hd-body__cta .hh-play__icon {
  flex-shrink: 0;
  margin-top: 4px;
}

@keyframes hd-float {
  from { transform: translateY(-8px); }
  to   { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-define *,
  .home-define *::before,
  .home-define *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Narrow desktop columns (~300px): justified uppercase mono leaves rivers of space */
@media (max-width: 1180px) {
  .hd-body__text { text-align: left; }
}

/* Big monitors & TVs: keep scaling past 1920px (matches the hero) */
@media (min-width: 1921px) {
  .hd-frame { gap: 2.1vw; }
  .hd-meta { font-size: 0.68vw; }
  .hd-meta__badge { gap: 0.52vw; }
  .hd-meta__badge::after { width: 0.47vw; height: 0.47vw; }
  .hd-statement { font-size: 4.6vw; }
  .hd-stage,
  .hd-body { gap: 2.9vw; }
  .hd-cube-wrap { --s: 15.1vw; margin: 0 3.1vw; }
  .hd-body__text,
  .hd-body__cta { font-size: 0.68vw; }
  .hd-body__cta { max-width: 16.7vw; }
  .hd-body__label { gap: 0.42vw; margin-right: 0.42vw; }
  .hd-body__label::before { width: 0.42vw; height: 0.42vw; }
  .hd-body__cta .hh-play { gap: 0.62vw; }
  .hd-body__cta .hh-play__icon { width: 0.57vw; height: 0.62vw; margin-top: 0.2vw; }
  .hh-graph-label { font-size: calc(0.55vw / var(--gs, 1)); }
}

/* Stacked: portrait tablets & phones (landscape 901–1024 keeps the desktop layout, like the hero).
   Keep in sync with STACKED_MQ in index.html and js/src/hero-rabbit.src.js */
@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
  .hd-frame {
    min-height: 0;
    gap: 36px;
  }

  .hd-stage {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hd-statement { font-size: clamp(34px, 10vw, 80px); }
  .hd-statement--right { justify-self: end; }
  .hd-cube-wrap { justify-self: center; --s: min(46vw, 240px); }

  .hd-body {
    grid-template-columns: 1fr 1fr;
  }

  .hd-body__cta { grid-column: auto; justify-self: start; }
}

@media (max-width: 640px) {
  .hd-body { grid-template-columns: 1fr; }
  .hd-body__text { text-align: left; font-size: 11.5px; }
}

/* ============================================================
   Orange pixel panels (runrobrun-style section transitions)
   Sections alternate grey -> orange -> grey. Each [data-pixel-panel] section owns a
   viewport-fixed grid of square cells behind its content: cells light bottom-up as the
   section scrolls in (covering the section before it), stay lit as its background, then
   clear bottom-up as it scrolls out to reveal the next grey section.
   ============================================================ */
.home-main {
  background: #DBDBDA;
}

[data-theme="dark"] .home-main {
  background: var(--bg-base);
}

.home-main > section.section {
  position: relative;
}

.px-section {
  --px-orange: #FF641C;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.px-section > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Reduced motion / no-JS fallback: plain orange background */
.px-section.is-static {
  background: var(--px-orange);
}

.px-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  visibility: hidden;
}

.px-layer.is-active {
  visibility: visible;
}

.px-grid {
  --px-cols: 12;
  --px-size: calc(100vw / var(--px-cols));
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--px-cols), var(--px-size));
  grid-auto-rows: var(--px-size);
  align-content: start;
  overflow: hidden;
}

.px-cell {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: var(--px-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Continuous grain across cells. Not background-attachment: fixed — that takes the
     whole page off Chrome's fast (compositor) scrolling. The layer is already fixed at
     the viewport origin, so offsetting each cell by its grid position (--c/--r, set in
     buildPanels) lines the tiles up the same way. */
  background-position: calc(var(--c, 0) * var(--px-size) * -1) calc(var(--r, 0) * var(--px-size) * -1);
}

/* Each cell on its own layer makes the on/off toggle compositor-only (without it every
   toggle repaints the whole full-screen panel, measured worse) — but only while the
   panel is showing: ~150 idle layers per panel slow every other frame on the page */
.px-layer.is-active .px-cell {
  will-change: opacity;
}

.px-cell.is-on {
  opacity: 1;
}

/* ============================================================
   Homepage "Top AI SEO Courses" — numbered course rows (lime panel)
   Rows match runrobrun.com "About" skill rows; hovering a row pops the
   course logo in a glossy sphere to the left of its name.
   Row numbers are CSS counters, not page text.
   ============================================================ */
.hc-section {
  --hc-ink: #050505;
  --hc-lime: #B7E33A;
  --px-orange: var(--hc-lime); /* pixel panel fill: theme lime instead of orange */
  --hc-pad: clamp(16px, 3.47vw, 50px);
  padding: 20px var(--hc-pad) 120px;
  color: var(--hc-ink);
  font-family: var(--rr-mono);
}

.hc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hc-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

/* Section heading: thin rule + square, then a wide centred title (matches .lp-title / .tp-title) */
.hc-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hc-head__rule {
  position: relative;
  width: 1px;
  height: clamp(64px, 9vw, 130px);
  margin-bottom: 28px;
  background: var(--hc-ink);
}

.hc-head__rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--hc-ink);
  transform: translateX(-50%);
}

.hc-head__title {
  margin: 0;
  font-family: var(--rr-display);
  font-size: clamp(40px, 7.2vw, 104px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--hc-ink);
}

.hc-head__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--hc-ink);
  text-transform: uppercase;
}

.hc-head__badge {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.hc-head__intro {
  max-width: 340px;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: right;
}

@media (max-width: 640px) {
  .hc-head__meta { flex-direction: column; gap: 10px; }
  .hc-head__intro { text-align: left; }
}

/* Course rows: [index] col 1 · title cols 4-9 · copy cols 10-12 */
.hc-rows {
  counter-reset: hc-row;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-row {
  counter-increment: hc-row;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  padding: 20px 0 24px;
  overflow: hidden;
  isolation: isolate;
}

/* Rule lines: drawn in from the left when the row scrolls into view */
.hc-row::before,
.hc-row::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 1px;
  background: var(--hc-ink);
  transform-origin: 0 50%;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--hc-row-delay, 0s);
}

.hc-row::before { top: 0; }
.hc-row::after { bottom: 0; opacity: 0; }
.hc-row:last-child::after { opacity: 1; }

.hc-rows.is-armed .hc-row { opacity: 0; transition: opacity 0.55s var(--hc-row-delay, 0s); }
.hc-rows.is-armed .hc-row::before,
.hc-rows.is-armed .hc-row::after { transform: scaleX(0); }
.hc-rows.is-armed .hc-row.is-visible { opacity: 1; }
.hc-rows.is-armed .hc-row.is-visible::before,
.hc-rows.is-armed .hc-row.is-visible::after { transform: scaleX(1); }

/* Hover: black bar drops in from the top, text turns lime */
.hc-row__bar {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hc-ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
  pointer-events: none;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.hc-row__index,
.hc-row__title,
.hc-row__copy {
  transition: color 0.3s ease;
}

.hc-row__index {
  grid-column: 1 / 2;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(5, 5, 5, 0.72);
}

.hc-row__index::before {
  content: '[' counter(hc-row, decimal-leading-zero) ']';
}

.hc-row__title {
  grid-column: 4 / 10;
  /* room for the arrow, which hangs into this padding (see .hc-row__icon) */
  padding-right: max(24px, 0.8em);
  margin: 0;
  font-family: var(--rr-heading);
  font-size: clamp(1.9rem, 2.8vw, 3.25rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--hc-ink);
}

.hc-row__title a {
  color: inherit;
  text-decoration: none;
}

/* Logo sphere: hidden (zero width) until hover, then grows in and pushes the name right.
   Sized in em so it always matches the title's font size. */
.hc-orb {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  margin-right: 0;
  vertical-align: -0.16em;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.2) rotate(-40deg);
  background:
    radial-gradient(circle at 32% 26%, #ffffff 0%, #f4f4f2 32%, #d9dbd4 68%, #aeb2a6 100%);
  box-shadow:
    inset -0.06em -0.08em 0.14em rgba(0, 0, 0, 0.28),
    inset 0.05em 0.06em 0.1em rgba(255, 255, 255, 0.9),
    0 0.08em 0.22em rgba(0, 0, 0, 0.35);
  transition:
    width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    margin-right 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease,
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hc-orb img {
  position: absolute;
  inset: 7%;
  width: 86%;
  height: 86%;
  object-fit: contain;
}

/* Specular highlight on top of the logo */
.hc-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 42% 28% at 34% 20%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 70% 85%, rgba(183, 227, 58, 0.28), rgba(183, 227, 58, 0) 45%);
  pointer-events: none;
}

.hc-row:hover .hc-orb,
.hc-row__title a:focus-visible .hc-orb {
  width: 1em;
  margin-right: 0.24em;
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* External-link arrow beside the course name */
.hc-row__icon {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.22em;
  /* hangs into the title's padding: takes no line width, so the (hidden) arrow can
     never wrap onto a line of its own and leave a blank gap under the name */
  margin-right: -0.72em;
  vertical-align: 0.42em;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Arrow only shows on hover / keyboard focus */
.hc-row:hover .hc-row__icon,
.hc-row__title a:focus-visible .hc-row__icon {
  opacity: 1;
  transform: translate(0, 0);
}

/* Touch screens have no hover: keep the arrow visible */
@media (hover: none) {
  .hc-row__icon { opacity: 1; transform: none; }
  .hc-orb { width: 1em; margin-right: 0.24em; opacity: 1; transform: none; }
}

/* Whole row is the click target */
.hc-row__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
}

.hc-row__copy {
  grid-column: 10 / 13;
  margin: 0;
  font-size: 13px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: rgba(5, 5, 5, 0.74);
}

.hc-row:focus-within { outline: 2px solid var(--hc-ink); outline-offset: 2px; }
.hc-row__title a:focus-visible { outline: none; }

@media (hover: hover) and (pointer: fine) {
  .hc-row:hover .hc-row__bar { transform: scaleY(1); }

  .hc-row:hover .hc-row__index,
  .hc-row:hover .hc-row__title,
  .hc-row:hover .hc-row__copy { color: var(--hc-lime); }
}

/* Big monitors & TVs: keep scaling past 1920px (matches the hero and "What is AI SEO?") */
@media (min-width: 1921px) {
  .hc-section { --hc-pad: 2.6vw; padding-bottom: 6.25vw; }
  .hc-inner { gap: 3.33vw; }
  .hc-head__rule { height: 6.77vw; margin-bottom: 1.46vw; }
  .hc-head__rule::before { width: 0.36vw; height: 0.36vw; }
  .hc-head__title { font-size: 5.42vw; }
  .hc-head__meta { margin-top: 1.46vw; padding-top: 0.63vw; }
  .hc-head__badge { font-size: 0.68vw; }
  .hc-head__intro { font-size: 0.57vw; max-width: 17.7vw; }
  .hc-row { padding: 1.04vw 0 1.25vw; }
  .hc-row__index,
  .hc-row__copy { font-size: 0.68vw; }
  .hc-row__title { font-size: 2.71vw; }
}

@media (max-width: 1100px) {
  .hc-row {
    grid-template-columns: 1fr;
    gap: 1rem 0;
  }

  .hc-row__index,
  .hc-row__title,
  .hc-row__copy { grid-column: 1 / -1; }

  .hc-row__copy { max-width: 34rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-row,
  .hc-row::before,
  .hc-row::after,
  .hc-row__bar,
  .hc-orb { transition: none; }
}

/* Links followed by sentence punctuation: flow inline so the full stop hugs the text */
.hd-body__cta .hh-play,
.hc-row__link .hh-play {
  display: inline;
}

.hd-body__cta .hh-play__icon,
.hc-row__link .hh-play__icon {
  display: inline-block;
  margin-right: 10px;
  vertical-align: 0;
}

/* ============================================================
   Homepage "What You Can Learn" — pinned module carousel (runrobrun "Work" style)
   Cards keep their original markup (links, text, data-category) so the hero
   search + filters still work. Desktop + JS: .is-cycle pins the section and
   cycles one card at a time. Otherwise (mobile / no JS): a stacked, numbered list.
   ============================================================ */
.tp-section {
  --tp-ink: #050505;
  --tp-pad: clamp(16px, 3.47vw, 50px);
  padding: 0;
  color: var(--tp-ink);
  font-family: var(--rr-mono);
}

[data-theme="dark"] .tp-section { --tp-ink: #EDEDEA; }

.tp-head {
  padding: 56px var(--tp-pad) 0;
}

.tp-title {
  margin: 0;
  font-family: var(--rr-display);
  font-size: clamp(34px, 5.2vw, 104px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--tp-ink);
}

.tp-intro {
  display: grid;
  grid-template-columns: 26.6% 1fr 26.6%;
  align-items: start;
  gap: 0;
  padding: 22px 0 16px;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tp-intro p {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  line-height: 1.4;
  color: var(--tp-ink);
  opacity: 0.8;
}

.tp-badge {
  grid-column: 1;
  grid-row: 1;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Decorative columns only exist in carousel mode */
.tp-col--index,
.tp-col--media { display: none; }

/* --- Card restyle (both modes): strip the old card chrome --- */
.tp-section .topics-grid {
  display: block;
  counter-reset: tp-card;
}

.tp-section .card {
  counter-increment: tp-card;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 0;
  color: var(--tp-ink);
  transform: none;
}

.tp-section .card:hover {
  transform: none;
  box-shadow: none;
}

.tp-section .card-icon-box,
.tp-section .card-ext-icon { display: none; }

.tp-section .card-top { margin-bottom: 8px; }

/* Module title: large Neue Montreal (same voice as the course / audience row titles) */
.tp-section .card h3 {
  margin: 0;
  font-family: var(--rr-heading);
  font-size: clamp(24px, 2.6vw, 44px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--tp-ink);
}

.tp-section .card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tp-ink);
  opacity: 0.85;
}

.tp-section .card-footer {
  border: 0;
  padding: 0;
  margin: 0;
  gap: 16px;
}

.tp-section .card-tags { gap: 0; }

.tp-section .tag-pill {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--tp-ink);
}

.tp-section .tag-pill + .tag-pill::before { content: ' / '; white-space: pre; }

.tp-section .card-stat {
  font-family: inherit;
  font-size: 13px;
  color: var(--tp-ink);
  opacity: 0.6;
}

/* --- List mode (default, mobile, no JS) --- */
.tp-section:not(.is-cycle) .tp-row {
  padding: 0 var(--tp-pad) 72px;
}

.tp-section:not(.is-cycle) .card {
  display: grid;
  grid-template-columns: 26.6% 1fr;
  grid-template-areas: "num main";
  gap: 0 16px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--tp-ink);
}

.tp-section:not(.is-cycle) .card:last-child { border-bottom: 1px solid var(--tp-ink); }

.tp-section:not(.is-cycle) .card::before {
  content: counter(tp-card, decimal-leading-zero);
  font-family: var(--rr-heading);
  font-size: clamp(34px, 4vw, 64px);
  font-weight: 500;
  line-height: 0.9;
}

.tp-section:not(.is-cycle) .card > div:first-child { display: flex; flex-direction: column; }
.tp-section:not(.is-cycle) .card-footer { grid-column: 2; margin-top: 14px; }

/* --- Carousel mode (desktop + JS) --- */
.tp-section.is-cycle .tp-track { position: relative; }

.tp-section.is-cycle .tp-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-height) + 16px);
  padding-bottom: 48px;
}

.tp-section.is-cycle .tp-row {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 26.6% 46.8% 26.6%;
  border-top: 1px solid var(--tp-ink);
  border-bottom: 1px solid var(--tp-ink);
}

.tp-section.is-cycle .tp-intro { padding-left: var(--tp-pad); padding-right: var(--tp-pad); margin: 0 calc(-1 * var(--tp-pad)); }
.tp-section.is-cycle .tp-head { padding-top: 0; }

.tp-section.is-cycle .tp-col--index,
.tp-section.is-cycle .tp-col--media { display: block; }

.tp-col--index {
  position: relative;
  padding: 16px;
}

.tp-index {
  margin: 0;
  display: flex;
  font-family: var(--rr-heading);
  font-size: clamp(56px, 6vw, 110px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--tp-ink);
}

.tp-digit {
  display: inline-block;
  height: 0.9em;
  overflow: hidden;
}

.tp-digit__stack {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.tp-digit__stack > span {
  display: block;
  height: 0.9em;
}

.tp-digit__stack > span::before { content: attr(data-d); }

.tp-view {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-block;
  overflow: hidden;
  padding: 5px 8px 4px;
  border: 1px solid var(--tp-ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tp-ink);
  cursor: pointer;
}

.tp-view__fill {
  position: absolute;
  inset: 0;
  background: var(--tp-ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tp-view__text { position: relative; transition: color 0.3s ease; }
.tp-view__text::before { content: 'View module'; }
.tp-view:hover .tp-view__fill { transform: scaleY(1); }
.tp-view:hover .tp-view__text { color: #DBDBDA; }

.tp-col--media {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--tp-ink);
  border-right: 1px solid var(--tp-ink);
}

.tp-media__base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tp-media__tiles {
  position: absolute;
  inset: 0;
  display: grid;
}

.tp-tile {
  position: relative;
  overflow: hidden;
}

.tp-tile img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.tp-section.is-cycle .tp-col--copy {
  position: relative;
  padding: 16px;
}

.tp-section.is-cycle .topics-grid {
  position: relative;
  height: 100%;
}

/* Stack: title, then tags / module number under it, description pinned to the bottom */
.tp-section.is-cycle .card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  opacity: 0;
  visibility: hidden;
}

.tp-section.is-cycle .card.is-active {
  opacity: 1;
  visibility: visible;
}

.tp-section.is-cycle .card > div:first-child { display: contents; }

.tp-section.is-cycle .card-top { grid-row: 1; margin: 0; }

.tp-section.is-cycle .card-footer {
  grid-row: 2;
  margin-top: 16px;
}

.tp-section.is-cycle .card p {
  grid-row: 3;
  align-self: end;
}

/* Big monitors & TVs: keep scaling past 1920px (each value equals its 1920px size) */
@media (min-width: 1921px) {
  .tp-section { --tp-pad: 2.6vw; }
  .tp-head { padding-top: 2.92vw; }
  .tp-title { font-size: 5.2vw; }
  .tp-intro { padding: 1.15vw 0 0.83vw; font-size: 0.68vw; }
  .tp-section .card h3 { font-size: 2.29vw; }
  .tp-section .card p,
  .tp-section .tag-pill,
  .tp-section .card-stat { font-size: 0.68vw; }
  .tp-section .card-top { margin-bottom: 0.42vw; }
  .tp-section.is-cycle .tp-sticky { padding-bottom: 2.5vw; }
  .tp-section.is-cycle .card-footer { margin-top: 0.83vw; }
  .tp-col--index,
  .tp-section.is-cycle .tp-col--copy { padding: 0.83vw; }
  .tp-index { font-size: 5.73vw; }
  .tp-view { left: 0.83vw; bottom: 0.83vw; padding: 0.26vw 0.42vw 0.21vw; font-size: 0.68vw; }
}

@media (max-width: 640px) {
  .tp-intro { grid-template-columns: 1fr; gap: 10px; }
  .tp-intro p, .tp-badge { grid-column: 1; grid-row: auto; }
  .tp-section:not(.is-cycle) .card { grid-template-columns: 64px 1fr; }
}

/* ============================================================
   Homepage "Who Is AI SEO Training For?" — statement stage (runrobrun quote style)
   Black squares clear from the centre outwards on scroll; the H2 uses
   mix-blend-mode: difference so it reads white on black and dark on grey.
   Cursor trail: blue squares with theme-lime letters (lime copy clipped to lit cells).
   Audience items keep their original markup, restyled as numbered rows.
   ============================================================ */
.aq-section {
  --aq-ink: #050505;
  --aq-bg: #DBDBDA;
  --aq-pad: clamp(16px, 3.47vw, 50px);
  padding: 0;
  color: var(--aq-ink);
  font-family: var(--rr-mono);
}

[data-theme="dark"] .aq-section {
  --aq-ink: #EDEDEA;
  --aq-bg: #0F0F0E;
}

.aq-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px var(--aq-pad);
  background: var(--aq-bg);
}

.aq-pixels,
.aq-hover {
  position: absolute;
  inset: 0;
  display: grid;
  pointer-events: none;
}

.aq-pixels { z-index: 2; }
.aq-hover  { z-index: 1; }

.aq-cell { visibility: visible; background: #050505; }
[data-theme="dark"] .aq-cell { background: #DBDBDA; }

/* Cursor trail: blue squares; the lime heading copy (.aq-quote--lit) is clipped
   to the same squares by JS, so letters inside them read theme lime */
.aq-hover-cell { visibility: hidden; background: #009BE3; }
.aq-hover-cell.is-lit { visibility: visible; }

/* Without JS the stage is simply grey (no black cover) */
.aq-stage:not(.is-ready) .aq-pixels { display: none; }

.aq-quote {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
  pointer-events: none;
  mix-blend-mode: difference;
}

.aq-quote h2,
.aq-quote__text {
  margin: 0;
  font-family: var(--rr-display);
  font-size: clamp(44px, 8.2vw, 150px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* Lime copy of the heading laid exactly over the real one; hidden until JS
   clips it to the lit hover cells */
.aq-quote--lit {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  mix-blend-mode: normal;
  clip-path: inset(100%);
}

.aq-quote--lit .aq-quote__text { color: #B7E33A; }

/* Body: intro + numbered audience rows */
.aq-body {
  padding: 56px var(--aq-pad) 96px;
}

.aq-intro {
  display: grid;
  grid-template-columns: 25% 1fr 25%;
  padding-bottom: 28px;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.aq-intro p {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  line-height: 1.4;
  color: var(--aq-ink);
  opacity: 0.8;
}

.aq-badge {
  grid-column: 1;
  grid-row: 1;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.aq-section .audience-grid {
  display: block;
  counter-reset: aq-row;
  border-bottom: 1px solid var(--aq-ink);
}

.aq-section .audience-item {
  counter-increment: aq-row;
  display: grid;
  grid-template-columns: 25% 1fr 25%;
  grid-template-areas: "meta title text";
  align-items: start;
  padding: 24px 0 28px;
  border: 0;
  border-top: 1px solid var(--aq-ink);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--aq-ink);
}

.aq-section .audience-item:hover { transform: none; box-shadow: none; }

.aq-section .audience-top {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

.aq-section .audience-top::before {
  content: '[' counter(aq-row, decimal-leading-zero) ']';
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.aq-section .audience-icon { display: none; }

.aq-section .audience-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aq-ink);
  opacity: 0.72;
}

.aq-section .audience-item h3 {
  grid-area: title;
  margin: 0;
  padding-right: 32px;
  font-family: var(--rr-heading);
  font-size: clamp(28px, 2.8vw, 52px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--aq-ink);
}

.aq-section .audience-item p {
  grid-area: text;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--aq-ink);
  opacity: 0.85;
}

/* Big monitors & TVs: keep scaling past 1920px (each value equals its 1920px size) */
@media (min-width: 1921px) {
  .aq-section { --aq-pad: 2.6vw; }
  .aq-quote h2,
  .aq-quote__text { font-size: 7.81vw; }
  .aq-body { padding: 2.92vw var(--aq-pad) 5vw; }
  .aq-intro { padding-bottom: 1.46vw; font-size: 0.68vw; }
  .aq-section .audience-item { padding: 1.25vw 0 1.46vw; }
  .aq-section .audience-top { gap: 0.52vw; }
  .aq-section .audience-top::before { font-size: 0.68vw; }
  .aq-section .audience-badge { font-size: 0.57vw; }
  .aq-section .audience-item h3 { font-size: 2.71vw; padding-right: 1.67vw; }
  .aq-section .audience-item p { font-size: 0.63vw; }
}

@media (max-width: 1024px) {
  .aq-stage { min-height: 500px; padding: 20px 18px; }
  .aq-quote h2,
  .aq-quote__text { font-size: clamp(2.75rem, 10vw, 5rem); }

  .aq-intro { grid-template-columns: 1fr; gap: 10px; }
  .aq-intro p, .aq-badge { grid-column: 1; grid-row: auto; }

  .aq-section .audience-item {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "title" "text";
    gap: 12px;
  }
}

/* ============================================================
   Homepage "Free Courses on YouTube" — pinned video strip (runrobrun "Tools"), lime panel
   Videos live in an <ol> (list on mobile / without JS). Desktop + JS (.is-cycle):
   pinned; JS builds a 000 rabbit lead-in slide plus one full-width slide per video
   (YouTube embed + pixel-trail grid); the active slide's description sits top-left,
   number + title bottom-left, and a rolling counter bottom-right.
   ============================================================ */
.lp-section {
  --lp-ink: #050505;
  --lp-lime: #B7E33A;
  --px-orange: var(--lp-lime); /* pixel panel fill: theme lime instead of orange */
  --lp-pad: clamp(16px, 3.47vw, 50px);
  padding: 0;
  display: block;
  color: var(--lp-ink);
  font-family: var(--rr-mono);
}

.lp-track { position: relative; z-index: 1; }

.lp-head { padding: 72px var(--lp-pad) 12px; }

.lp-title {
  margin: 0;
  font-family: var(--rr-display);
  font-size: clamp(34px, 4.4vw, 96px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--lp-ink);
}

.lp-frame {
  position: relative;
  margin: 0 11px;
  border-top: 1px solid var(--lp-ink);
  border-bottom: 1px solid var(--lp-ink);
}

.lp-meta {
  display: flex;
  justify-content: flex-end;
  padding: 32px 0 24px;
}

.lp-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: 340px;
  text-align: right;
  text-transform: uppercase;
}

.lp-intro p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--lp-ink);
}

.lp-badge {
  order: -1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Slider pieces exist only in carousel mode */
.lp-stage,
.lp-counter { display: none; }

/* --- Video list --- */
.lp-section .path-grid {
  display: block;
  margin: 0;
  padding: 0 0 24px;
  list-style: none;
}

.lp-section .path-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  color: var(--lp-ink);
}

.lp-section .path-card:hover { transform: none; box-shadow: none; }

.lp-section .path-step-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 6px;
}

.lp-section .path-step-number {
  font-family: var(--rr-display);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  color: var(--lp-ink);
  background: none;
  border: 0;
  padding: 0;
  width: auto;
  height: auto;
}

.lp-section .path-phase-label,
.lp-section .yt-link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-ink);
}

.lp-section .path-phase-label { opacity: 0.72; }

.lp-section .yt-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-section .yt-link::after { content: '\2197'; }
.lp-section .yt-link:hover { background-size: 100% 1px; }
.lp-section .yt-link:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; }

.lp-section .path-card h3 {
  margin: 0;
  font-family: var(--rr-display);
  font-size: clamp(30px, 3.4vw, 56px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--lp-ink);
}

.lp-section .path-card p {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: justify;
  color: var(--lp-ink);
}

/* --- YouTube embed (16:9) --- */
.yt-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050505;
}

.yt-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lead-in mark above the title: thin line + square (also spaces the section from the one above) */
.lp-mark {
  position: relative;
  width: 1px;
  height: clamp(120px, 22vh, 240px);
  margin: 0 auto;
  background: var(--lp-ink);
}

.lp-mark__square {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  background: var(--lp-ink);
  transform: translateX(-50%);
}

/* The rabbit lead-in only exists in the desktop slider */
.lp-section:not(.is-cycle) .lp-lead-grid { display: none; }

/* List mode (mobile / no JS): number + channel, title, video, description */
.lp-section:not(.is-cycle) .path-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 0 28px;
  border-top: 1px solid var(--lp-ink);
}

.lp-section:not(.is-cycle) .path-card p { max-width: 560px; }
.lp-section:not(.is-cycle) .yt-frame { max-width: 720px; }
/* keep the number / channel / YouTube link line over the video, not spread past it */
.lp-section:not(.is-cycle) .path-step-top { max-width: 720px; }
.lp-section:not(.is-cycle) .lp-meta { justify-content: flex-start; }
.lp-section:not(.is-cycle) .lp-intro { align-items: flex-start; text-align: left; }
.lp-section:not(.is-cycle) .lp-track { padding-bottom: 96px; }

/* --- Carousel mode (desktop + JS) --- */
.lp-section.is-cycle .lp-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-height) + 8px);
  padding-bottom: 8px;
}

.lp-section.is-cycle .lp-head { padding-top: 0; }

.lp-section.is-cycle .lp-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.lp-section.is-cycle .lp-meta { padding: 26px 0 0; min-height: 84px; }

.lp-section.is-cycle .lp-stage,
.lp-section.is-cycle .lp-counter { display: block; }

/* The list's own players are replaced by the slider's */
.lp-section.is-cycle .path-card .yt-frame { display: none; }

.lp-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  margin: 18px 0 110px;
  overflow: hidden;
}

.lp-strip {
  position: absolute;
  inset: 0;
  display: flex;
  will-change: transform;
}

/* One slide = the full stage width; video centred, pixel grid behind it */
.lp-card {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.lp-card__pixels {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  /* cell size from JS (lpCell): 72px, scaled past 1920px */
  grid-template-columns: repeat(var(--lp-cols, 1), var(--lp-px, 72px));
  grid-template-rows: repeat(var(--lp-rows, 1), var(--lp-px, 72px));
  transform: translateY(-50%);
  pointer-events: none;
}

.lp-card__cell { visibility: hidden; background: #050505; }
.lp-card__cell.is-on { visibility: visible; }

.lp-card__media {
  position: relative;
  z-index: 1;
  height: 100%;
  max-height: min(30vw, 520px);
  aspect-ratio: 16 / 9;
  max-width: min(52vw, 920px);
}

.lp-card__media .yt-frame { height: 100%; }

/* 000 lead-in: static black rabbit silhouette (like the reference's running man) */
.lp-card__media--lead {
  display: grid;
  place-items: center;
}

.lp-rabbit {
  display: block;
  height: 50%;
  width: auto;
  filter: brightness(0);
}

/* file:// fallback: YouTube thumbnail that opens the video on YouTube */
.yt-fallback { color: #FFFFFF; text-decoration: none; }
.yt-fallback img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-fallback__label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 12px;
  background: #050505;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lp-counter {
  position: absolute;
  right: 0;
  bottom: 22px;
  display: flex;
  font-family: var(--rr-display);
  font-size: clamp(40px, 3.6vw, 64px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--lp-ink);
}

.lp-counter__fixed::before { content: '00'; }

.lp-digit { display: inline-block; height: 0.9em; overflow: hidden; }
.lp-digit__stack { display: flex; flex-direction: column; will-change: transform; }
.lp-digit__stack > span { display: block; height: 0.9em; }
.lp-digit__stack > span::before { content: attr(data-d); }

/* Videos stacked over the frame; only the active one's text is visible */
.lp-section.is-cycle .path-grid {
  position: absolute;
  inset: 0;
  padding: 0;
  pointer-events: none;
}

.lp-section.is-cycle .path-card {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.lp-section.is-cycle .path-card.is-active { visibility: visible; }
.lp-section.is-cycle .path-card.is-active .yt-link { pointer-events: auto; }

.lp-section.is-cycle .path-card p {
  position: absolute;
  top: 26px;
  left: 0;
  width: 390px;
  max-width: 30vw;
}

.lp-section.is-cycle .path-step-top {
  position: absolute;
  left: 0;
  bottom: calc(22px + clamp(30px, 3.4vw, 56px) * 0.9 + 8px);
  margin: 0;
}

.lp-section.is-cycle .path-card h3 {
  position: absolute;
  left: 0;
  bottom: 22px;
  max-width: 70%;
  white-space: nowrap;
}

/* Swap animation: active video text rises into place */
.lp-section.is-cycle .path-card.is-active p,
.lp-section.is-cycle .path-card.is-active h3,
.lp-section.is-cycle .path-card.is-active .path-step-top {
  animation: lp-rise 0.55s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

@keyframes lp-rise {
  from { transform: translateY(60%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-section .path-card * { animation: none !important; }
}

/* Big monitors & TVs: keep scaling past 1920px (each value equals its 1920px size) */
@media (min-width: 1921px) {
  .lp-section { --lp-pad: 2.6vw; }
  .lp-title { font-size: 4.4vw; }
  .lp-section.is-cycle .lp-head { padding-bottom: 0.63vw; }
  .lp-frame { margin: 0 0.57vw; }
  .lp-section.is-cycle .lp-meta { padding-top: 1.35vw; min-height: 4.38vw; }
  .lp-intro { max-width: 17.7vw; gap: 0.52vw; }
  .lp-intro p { font-size: 0.57vw; }
  .lp-badge { font-size: 0.68vw; }
  .lp-stage { margin: 0.94vw 0 5.73vw; }
  .lp-card__media { max-height: 27.08vw; max-width: 47.92vw; }
  .lp-counter { bottom: 1.15vw; font-size: 3.33vw; }
  .lp-section .path-step-number { font-size: 0.94vw; }
  .lp-section .path-phase-label,
  .lp-section .yt-link,
  .lp-section .path-card p { font-size: 0.57vw; }
  .lp-section .path-step-top { gap: 0.31vw 0.73vw; }
  .lp-section .path-card h3 { font-size: 2.92vw; }
  .lp-section.is-cycle .path-card p { top: 1.35vw; width: 20.3vw; }
  .lp-section.is-cycle .path-card h3 { bottom: 1.15vw; }
  .lp-section.is-cycle .path-step-top { bottom: calc(1.15vw + 2.92vw * 0.9 + 0.42vw); }
}

/* ============================================================
   Homepage "Why This Site Exists" (About) — mark + statement title + 3 columns
   ============================================================ */
.ab-section {
  --ab-ink: #050505;
  --ab-pad: clamp(16px, 3.47vw, 50px);
  padding: 0;
  color: var(--ab-ink);
  font-family: var(--rr-mono);
}

[data-theme="dark"] .ab-section { --ab-ink: #EDEDEA; }

.ab-inner {
  position: relative;
  padding: 0 var(--ab-pad) 120px;
}

/* Vertical line with a small square that travels down it on scroll (reference "tools" mark) */
.ab-mark {
  /* line length and square size drive the travel distance, so the square always
     stops exactly at the end of the line (it overshot by 80px on phones) */
  --ab-h: 220px;
  --ab-sq: 6px;
  position: relative;
  width: 16px;
  height: var(--ab-h);
  margin: 0 auto 40px;
}

.ab-mark__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ab-ink);
}

.ab-mark__square {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--ab-sq);
  height: var(--ab-sq);
  margin-left: calc(var(--ab-sq) / -2);
  background: var(--ab-ink);
  transform: translateY(calc(var(--ab-p, 0) * (var(--ab-h) - var(--ab-sq))));
}

.ab-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 56px;
  text-align: center;
}

.ab-title {
  margin: 0;
  font-family: var(--rr-heading);
  font-size: clamp(34px, 4.6vw, 88px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ab-ink);
}

.ab-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ab-badge::after {
  content: '';
  width: 9px;
  height: 9px;
  background: #B7E33A;
}

.ab-section .ab-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ab-ink);
  border-bottom: 1px solid var(--ab-ink);
}

.ab-section .ab-cols p {
  margin: 0;
  padding: 26px 28px 32px;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: justify;
  text-transform: uppercase;
  color: var(--ab-ink);
  opacity: 0.88;
}

.ab-section .ab-cols p:first-child { padding-left: 0; }
.ab-section .ab-cols p:last-child { padding-right: 0; }
.ab-section .ab-cols p + p { border-left: 1px solid var(--ab-ink); }

/* Narrow columns (~320px): justified uppercase mono leaves rivers of space */
@media (max-width: 1180px) {
  .ab-section .ab-cols p { text-align: left; }
}

/* Big monitors & TVs: keep scaling past 1920px (each value equals its 1920px size) */
@media (min-width: 1921px) {
  .ab-section { --ab-pad: 2.6vw; }
  .ab-inner { padding-bottom: 6.25vw; }
  .ab-mark { --ab-h: 11.46vw; --ab-sq: 0.31vw; width: 0.83vw; margin-bottom: 2.08vw; }
  .ab-head { gap: 0.94vw; margin-bottom: 2.92vw; }
  .ab-title { font-size: 4.58vw; }
  .ab-badge { gap: 0.52vw; font-size: 0.68vw; }
  .ab-badge::after { width: 0.47vw; height: 0.47vw; }
  .ab-section .ab-cols p { padding: 1.35vw 1.46vw 1.67vw; font-size: 0.65vw; }
}

@media (max-width: 900px) {
  .ab-section .ab-cols { grid-template-columns: 1fr; }
  .ab-section .ab-cols p { padding: 22px 0; text-align: left; }
  .ab-section .ab-cols p + p { border-left: 0; border-top: 1px solid var(--ab-ink); }
  .ab-mark { --ab-h: 140px; }
}

/* ============================================================
   Homepage FAQ — big title + numbered accordion rows (existing main.js accordion)
   ============================================================ */
.fq-section {
  --fq-ink: #050505;
  --fq-pad: clamp(16px, 3.47vw, 50px);
  padding: 0 var(--fq-pad) 140px;
  color: var(--fq-ink);
  font-family: var(--rr-mono);
}

[data-theme="dark"] .fq-section { --fq-ink: #EDEDEA; }

.fq-section > .container { max-width: none; padding: 0; }

.fq-section .faq-section {
  max-width: none;
  padding: 0;
}

.fq-section .faq-header {
  display: grid;
  grid-template-columns: 25% 1fr 25%;
  margin-bottom: 0;
  text-align: left;
}

.fq-section .faq-header h2 {
  grid-column: 1 / -1;
  margin: 0 0 28px;
  font-family: var(--rr-display);
  font-size: clamp(32px, 4.4vw, 84px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--fq-ink);
}

.fq-section .fq-subtitle {
  grid-column: 3;
  margin: 0 0 24px;
  max-width: none;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fq-ink);
  opacity: 0.8;
}

.fq-section .faq-list {
  counter-reset: fq;
  border-bottom: 1px solid var(--fq-ink);
}

.fq-section .faq-item {
  counter-increment: fq;
  border-top: 1px solid var(--fq-ink);
}

.fq-section .faq-item:last-child { border-bottom: 0; }

.fq-section .faq-question {
  display: grid;
  grid-template-columns: 25% 1fr 48px;
  align-items: start;
  gap: 0;
  padding: 22px 0 24px;
  color: var(--fq-ink);
  font: inherit;
}

.fq-section .faq-question:hover { opacity: 1; }

.fq-section .faq-question::before {
  content: '[' counter(fq, decimal-leading-zero) ']';
  padding-top: 0.35em;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.fq-section .faq-question > span {
  font-family: var(--rr-heading);
  font-size: clamp(22px, 2.2vw, 40px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fq-section .faq-question:hover > span { transform: translateX(8px); }

/* Plus that turns into a cross when open (echoes the page crosshairs) */
.fq-section .faq-question::after {
  content: '';
  justify-self: end;
  width: 22px;
  height: 22px;
  margin-top: 0.3em;
  background:
    linear-gradient(var(--fq-ink), var(--fq-ink)) center / 22px 1px no-repeat,
    linear-gradient(var(--fq-ink), var(--fq-ink)) center / 1px 22px no-repeat;
  transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.fq-section .faq-item[data-open="true"] .faq-question::after { transform: rotate(45deg); }

.fq-section .faq-answer {
  padding: 0 0 0 25%;
  transition: max-height 0.45s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease, padding 0.45s ease;
}

.fq-section .faq-item[data-open="true"] .faq-answer {
  max-height: 480px;
  padding-bottom: 28px;
}

.fq-section .faq-list:not([data-accordion="true"]) .faq-answer { padding-bottom: 28px; }

.fq-section .faq-answer p {
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fq-ink);
  opacity: 0.85;
}

@media (max-width: 900px) {
  .fq-section .faq-header { grid-template-columns: 1fr; }
  .fq-section .fq-subtitle { grid-column: 1; }
  .fq-section .faq-question { grid-template-columns: 48px 1fr 32px; }
  .fq-section .faq-answer { padding-left: 48px; }
}

/* ============================================================
   Homepage CTA + footer — one lime block with a stepped pixel top edge,
   thin-line frame with black corner squares and a CSS-rendered wordmark.
   ============================================================ */
.home-cta {
  --hc-orange: #B7E33A; /* theme lime (was orange #FF641C) */
  --hc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative;
  z-index: 40;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #050505;
}

.home-cta__edge {
  --edge-size: calc(100vw / 16.5);
  position: relative;
  display: grid;
  grid-auto-rows: var(--edge-size);
  overflow: hidden;
  pointer-events: none;
}

.home-cta__cell {
  visibility: hidden;
  background-color: var(--hc-orange);
  background-image: var(--hc-grain);
  /* grain scrolls with the element: background-attachment: fixed disables fast scrolling page-wide */
}

.home-cta__edge.is-visible .home-cta__cell.is-solid {
  animation: hc-pop 0s linear var(--d, 0s) forwards;
}

@keyframes hc-pop { to { visibility: visible; } }

.home-cta .cta-banner {
  background-color: var(--hc-orange);
  background-image: var(--hc-grain);
  /* grain scrolls with the element: background-attachment: fixed disables fast scrolling page-wide */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 96px clamp(16px, 3.47vw, 50px) 88px;
  text-align: left;
  color: #050505;
  overflow: visible;
}

.home-cta .cta-banner::before { display: none; }

.home-cta .cta-banner-inner {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 30%);
  grid-template-areas: "title ." "title text" "title action";
  align-items: end;
  gap: 18px 48px;
  max-width: none;
  text-align: left;
}

.home-cta .cta-banner h2 {
  grid-area: title;
  margin: 0;
  font-family: var(--rr-heading);
  font-size: clamp(44px, 6.4vw, 120px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #050505;
}

[data-theme="dark"] .home-cta .cta-banner h2 { color: #050505; }

.home-cta .cta-banner p {
  grid-area: text;
  margin: 0;
  font-family: var(--rr-mono);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #050505;
}

.home-cta .cta-banner .btn-primary {
  grid-area: action;
  justify-self: start;
  position: relative;
  overflow: hidden;
  padding: 8px 12px 7px;
  border: 1px solid #050505;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--rr-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #050505;
  transition: color 0.3s ease, background 0.3s ease;
}

.home-cta .cta-banner .btn-primary:hover {
  background: #050505;
  color: var(--hc-orange);
}

/* Footer */
.home-footer {
  --hf-ink: #050505;
  --hf-orange: #B7E33A; /* theme lime (was orange #FF641C) */
  position: relative;
  z-index: 40;
  margin: 0;
  padding: 10px 21px 40px;
  border: 0;
  background-color: var(--hf-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* grain scrolls with the element: background-attachment: fixed disables fast scrolling page-wide */
  color: var(--hf-ink);
  font-family: var(--rr-mono);
}

.home-footer .footer-inner {
  position: relative;
  max-width: none;
  padding: 0;
  border: 1px solid var(--hf-ink);
}

.hf-corner {
  position: absolute;
  z-index: 2;
  width: 11px;
  height: 11px;
  background: var(--hf-ink);
}

.hf-corner--tl { top: -6px; left: -6px; }
.hf-corner--tr { top: -6px; right: -6px; }
.hf-corner--bl { bottom: -6px; left: -6px; }
.hf-corner--br { bottom: -6px; right: -6px; }

.home-footer .footer-grid {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 0;
  margin: 0;
}

.home-footer .footer-grid > div {
  padding: 36px 40px 56px;
  min-height: 300px;
}

.home-footer .footer-grid > div + div { border-left: 1px solid var(--hf-ink); }

.home-footer .footer-brand-col .footer-logo {
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--rr-heading);
  font-size: clamp(28px, 2.6vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hf-ink);
}

.home-footer .footer-brand-col .footer-logo .logo-symbol {
  display: none;
}

.home-footer .footer-desc {
  max-width: 300px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hf-ink);
}

.home-footer .footer-col h4 {
  margin-bottom: 28px;
  font-family: var(--rr-heading);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--hf-ink);
}

.home-footer .footer-col ul { gap: 14px; }

.home-footer .footer-col a,
.home-footer .footer-sub-links a {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hf-ink);
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  padding-bottom: 2px;
  transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-footer .footer-col a:hover,
.home-footer .footer-sub-links a:hover {
  color: var(--hf-ink);
  background-size: 100% 1px;
}

.home-footer .footer-bottom {
  padding: 14px 40px;
  border-top: 1px solid var(--hf-ink);
}

.home-footer .footer-copyright,
.home-footer .footer-sub-links {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hf-ink);
}

.hf-wordmark {
  padding: 80px 0 0;
  font-family: var(--rr-display);
  font-size: 8.7vw;
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hf-ink);
}

.hf-wordmark::before { content: '/AI SEO Course'; }

@media (max-width: 900px) {
  .home-cta .cta-banner-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "text" "action";
  }

  .home-cta__edge { --edge-size: calc(100vw / 8); }

  .home-footer { padding: 10px 14px 32px; }
  .home-footer .footer-grid { grid-template-columns: 1fr; }
  .home-footer .footer-grid > div { min-height: 0; padding: 28px 22px; }
  .home-footer .footer-grid > div + div { border-left: 0; border-top: 1px solid var(--hf-ink); }
  .home-footer .footer-bottom { padding: 14px 22px; flex-direction: column; align-items: flex-start; }
  .hf-wordmark { font-size: 8.2vw; padding-top: 48px; }
}

/* The "+" / "×" replaces the original chevron icon on the homepage FAQ */
.fq-section .faq-chevron { display: none; }

/* ============================================================
   Header on phones — bug fix (all pages that have the mega menu)
   The mega menu used to be forced visible on small screens as an extra
   item in the header row, widening the page and squeezing the logo.
   Now: it stays hidden until the menu is opened, and the drawer + mega
   links expand inside the header card as full-width rows.
   ============================================================ */
@media (max-width: 768px) {
  .site-header {
    height: auto;
    min-height: var(--nav-height);
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .brand-area { min-width: 0; flex: 1 1 0; }

  .site-logo { min-width: 0; }

  .site-logo span { line-height: 1.15; }

  .header-actions { flex-shrink: 0; }

  .site-nav {
    position: static;
    order: 10;
    width: 100%;
    margin-top: 12px;
    padding: 8px 0 0;
    border: 0;
    border-top: 1px solid var(--border-light);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .mega-menu-wrapper { display: none !important; }

  .site-nav[data-open="true"] ~ .mega-menu-wrapper {
    display: block !important;
    order: 11;
    width: 100%;
    margin-top: 8px;
    padding: 8px 0 4px;
  }
}

/* ============================================================
   Homepage header — minimal mono top bar (runrobrun "topbar" style)
   Same links/buttons as before; hides on scroll down, returns on scroll up.
   ============================================================ */
.home-topbar {
  --tb-ink: var(--text-primary);
  top: 0;
  padding: 0;
}

.home-topbar .site-header {
  max-width: none;
  height: calc(var(--nav-height) + 8px);
  padding: 12px clamp(16px, 3.47vw, 50px) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--rr-mono);
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.3s ease;
}

[data-theme="dark"] .home-topbar .site-header { background: transparent; }

.home-topbar.is-hidden .site-header { transform: translateY(-120%); }

.home-topbar .site-logo {
  gap: 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tb-ink);
}

.home-topbar .logo-symbol { display: none; }

.home-topbar .brand-tag {
  display: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--tb-ink);
  opacity: 0.55;
}

/* Reference layout: brand left, every link grouped on the right */
@media (min-width: 769px) {
  .home-topbar .site-nav {
    margin-left: auto;
    margin-right: clamp(20px, 3.4vw, 64px);
  }
}

.home-topbar .site-nav ul { gap: clamp(20px, 3.4vw, 64px); }

.home-topbar .nav-link,
.home-topbar .header-actions .btn {
  height: auto;
  padding: 0 0 2px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  box-shadow: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tb-ink);
  transform: none;
  transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

.home-topbar .nav-link:hover,
.home-topbar .nav-link[aria-expanded="true"],
.home-topbar .header-actions .btn:hover {
  background-color: transparent;
  background-size: 100% 1px;
  color: var(--tb-ink);
  transform: none;
}

.home-topbar .nav-link.active { font-weight: 500; }

.home-topbar .header-actions { gap: clamp(16px, 2.4vw, 40px); }

.home-topbar .header-actions .btn-secondary { opacity: 0.7; }
.home-topbar .header-actions .btn-secondary:hover { opacity: 1; }

/* "Explore Course" gets the reference's accent square (lime hero theme) */
.home-topbar .header-actions .btn-primary { gap: 10px; }
.home-topbar .header-actions .btn-primary::after {
  content: '';
  width: 10px;
  height: 10px;
  background: #B7E33A;
}

.home-topbar .theme-toggle,
.home-topbar .nav-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--tb-ink);
  border-radius: 0;
  background: transparent;
  color: var(--tb-ink);
}

.home-topbar .theme-toggle svg { width: 14px; height: 14px; }

.home-topbar .theme-toggle:hover,
.home-topbar .nav-toggle:hover {
  background: var(--tb-ink);
  color: var(--bg-base);
}

/* Mega menu: square, thin-line panel in the page's grey / black */
.home-topbar .mega-menu-wrapper {
  left: clamp(16px, 3.47vw, 50px);
  right: clamp(16px, 3.47vw, 50px);
  width: auto;
  padding: 0;
}

.home-topbar .mega-menu-card {
  border: 1px solid var(--tb-ink);
  border-radius: 0;
  background: #DBDBDA;
  box-shadow: none;
}

[data-theme="dark"] .home-topbar .mega-menu-card { background: #121211; }

.home-topbar .mega-feature-dark,
.home-topbar .mega-link-item,
.home-topbar .mega-link-icon,
.home-topbar .mega-feature-badge { border-radius: 0; }

.home-topbar .mega-feature-dark { background: #050505; }

.home-topbar .mega-link-item {
  border: 0;
  border-top: 1px solid rgba(5, 5, 5, 0.18);
  background: transparent;
}

.home-topbar .mega-link-item:hover { background: rgba(5, 5, 5, 0.06); }

.home-topbar .mega-link-text h4 {
  font-family: var(--rr-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.home-topbar .mega-link-text p,
.home-topbar .mega-feature-desc,
.home-topbar .mega-feature-link,
.home-topbar .mega-feature-badge {
  font-family: var(--rr-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.home-topbar .mega-feature-title {
  font-family: var(--rr-heading);
  font-weight: 600;
}

/* Homepage top bar on phones: compact row + square drawer panel */
@media (max-width: 768px) {
  .home-topbar .site-header {
    height: auto;
    padding: 14px 16px 10px;
  }

  .home-topbar.is-open .site-header,
  .home-topbar .site-header:has(.site-nav[data-open="true"]) {
    background: #DBDBDA;
    border-bottom: 1px solid var(--tb-ink);
  }

  [data-theme="dark"] .home-topbar.is-open .site-header,
  [data-theme="dark"] .home-topbar .site-header:has(.site-nav[data-open="true"]) { background: #121211; }

  .home-topbar .site-logo { font-size: 12px; }
  .home-topbar .site-logo span { white-space: nowrap; }
  .home-topbar .brand-tag { display: none; }
  .home-topbar .header-actions { gap: 10px; }
  .home-topbar .header-actions .btn-primary { font-size: 11px; }
  .home-topbar .header-actions .btn-primary::after { width: 8px; height: 8px; }

  .home-topbar .site-nav { border-top-color: var(--tb-ink); }
  .home-topbar .site-nav ul { gap: 0; }

  .home-topbar .site-nav li { width: 100%; }

  .home-topbar .nav-link {
    display: flex;
    width: 100%;
    height: 44px;
    padding: 0;
    font-size: 15px;
    background-image: none;
    border-bottom: 1px solid rgba(5, 5, 5, 0.15);
  }

  .home-topbar .mega-menu-card { border: 0; background: transparent; }
}

@media (max-width: 400px) {
  .home-topbar .site-logo { font-size: 11px; letter-spacing: 0.02em; }
}

.home-topbar .mega-link-icon {
  background: transparent;
  border: 1px solid var(--tb-ink);
  color: var(--tb-ink);
}

.home-topbar .mega-feature-dark { box-shadow: none; }
.home-topbar .mega-feature-badge { border-radius: 0; }

/* ============================================================
   Inner pages (.ip-*) — the homepage theme for guide pages
   Centred rabbit + title hero, centred Monument section titles with the rule +
   square lead-in, lime sections as homepage pixel panels ([data-pixel-panel],
   driven by js/main.js), and the black rabbit (images/rabbit-mark.webp) as
   the recurring character. Type: Monument for display, Neue Montreal for
   headings and labels, Inter for reading text (no mono on inner pages).
   Top bar, FAQ, CTA and footer are the homepage components.
   Scroll-perf rules apply: no fixed backgrounds, no per-frame CSS vars.
   ============================================================ */
.ip-page {
  /* the homepage components read --rr-mono; on inner pages it is Neue Montreal */
  --rr-mono: 'Neue Montreal', 'Neue Montreal Fallback', 'Inter', sans-serif;
  --ip-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ip-ink: #050505;
  --ip-lime: #B7E33A;
  --ip-lime-deep: #8DBB14;
  --ip-blue: #009BE3;
  --ip-pad: clamp(16px, 3.47vw, 50px);
  background: #DBDBDA;
  color: var(--ip-ink);
  font-family: var(--rr-mono);
}

.ip-page ::selection { background: var(--ip-lime); color: var(--ip-ink); }

/* Top bar overlays the page (on the homepage the hero scene absorbs it) */
.ip-page .home-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}

/* once past the hero the bar gets the page grey so it never sits on top of body text */
.ip-page .home-topbar.is-solid .site-header {
  background: #DBDBDA;
  box-shadow: 0 1px 0 rgba(5, 5, 5, 0.22);
}

.ip-page .home-topbar .nav-link,
.ip-page .home-topbar .header-actions .btn,
.ip-page .home-topbar .site-logo { letter-spacing: 0.03em; }

/* Reading text everywhere on the page, including the shared homepage parts */
.ip-page .fq-section .faq-answer p,
.ip-page .home-cta .cta-banner p,
.ip-page .home-footer .footer-desc {
  font-family: var(--ip-text);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

.ip-page .fq-section .fq-subtitle { letter-spacing: 0.04em; }

.ip-rabbit {
  display: block;
  height: auto;
  user-select: none;
  pointer-events: none;
}

/* --- Hero: rabbit, centred title, links; breadcrumb + summary and meta at the foot --- */
.ip-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-height) + 24px) var(--ip-pad) 40px;
}

.ip-hero__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0 40px;
  text-align: center;
}

.ip-hero__rabbit {
  width: clamp(110px, min(12vw, 22vh), 200px);
  margin-bottom: clamp(18px, 2.4vh, 32px);
  animation: ip-hop 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes ip-hop {
  0%   { opacity: 0; transform: translateY(-22%) scale(0.94, 1.06); }
  55%  { opacity: 1; transform: translateY(0) scale(1.05, 0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}

.ip-hero__title {
  margin: 0;
  font-family: var(--rr-display);
  font-size: clamp(42px, 7vw, 136px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ip-ink);
  animation: ip-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}

.ip-hero__line { display: block; }

/* long subheading (blog posts): a quieter second line inside the H1 */
.ip-hero__sub {
  display: block;
  max-width: 24em;
  margin: clamp(14px, 1.6vw, 24px) auto 0;
  font-family: var(--rr-heading);
  font-size: clamp(20px, 2.2vw, 38px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}

/* long titles (topic guides): one size step down, balanced lines */
.ip-hero__title--long {
  max-width: 18em;
  font-size: clamp(36px, 5.2vw, 100px);
  text-wrap: balance;
}

.ip-hero__title--long .ip-hero__line { display: inline; }

@keyframes ip-rise {
  from { opacity: 0; transform: translateY(18%); }
  to   { opacity: 1; transform: translateY(0); }
}

.ip-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin-top: clamp(28px, 3.4vw, 48px);
  animation: hh-fade 0.8s ease 0.8s both;
}

/* ▶ link: lime highlight sweeps in behind the label on hover / focus */
.ip-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ip-ink);
}

.ip-play__icon {
  flex: none;
  width: 11px;
  height: 12px;
  background: var(--ip-lime-deep);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s ease;
}

.ip-play__label {
  padding: 6px 8px 5px;
  background: linear-gradient(var(--ip-lime), var(--ip-lime)) no-repeat 0 100% / 0 100%;
  box-shadow: inset 0 -1px 0 currentColor;
  transition: background-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ip-play:hover .ip-play__label,
.ip-play:focus-visible .ip-play__label { background-size: 100% 100%; }

.ip-play:hover .ip-play__icon,
.ip-play:focus-visible .ip-play__icon { transform: translateX(5px) scale(1.15); background: var(--ip-ink); }

.ip-hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  animation: hh-fade 0.9s ease 0.6s both;
}

.ip-hero__about { max-width: 460px; }

.ip-hero__crumbs,
.ip-hero__meta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ip-hero__crumbs { margin-bottom: 18px; }

.ip-hero__copy {
  margin: 0;
  font-family: var(--ip-text);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(5, 5, 5, 0.85);
}

.ip-hero__meta { display: flex; gap: 40px; color: rgba(5, 5, 5, 0.78); }
.ip-hero__key { margin-right: 8px; }

.ip-crumbs {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ip-crumbs li + li::before {
  content: '/';
  margin: 0 0.7em;
  opacity: 0.45;
}

.ip-crumbs [aria-current] { opacity: 0.6; }

.ip-crumbs a,
.ip-toc__list a {
  color: var(--ip-ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  padding-bottom: 2px;
  transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ip-crumbs a:hover,
.ip-toc__list a:hover { background-size: 100% 1px; }

/* --- Sections --- */
.ip-section {
  position: relative;
  padding: 24px var(--ip-pad) 140px;
}

/* lime sections are homepage pixel panels: the fixed .px-layer is the background,
   content sits above it */
.ip-page .px-section { --px-orange: var(--ip-lime); } /* .px-section defaults to orange */
.ip-section.px-section { padding-top: 40px; padding-bottom: 120px; }
.ip-section.px-section > .ip-wrap,
.ip-statement > :not(.px-layer) { position: relative; z-index: 1; }

.ip-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80px;
}

.ip-head__rule {
  position: relative;
  width: 1px;
  height: clamp(64px, 9vw, 130px);
  margin-bottom: 40px;
  background: var(--ip-ink);
}

.ip-head__rule::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--ip-ink);
  transform: translateX(-50%);
}

.ip-head__title {
  max-width: 15em;
  margin: 0 0 28px;
  font-family: var(--rr-display);
  font-size: clamp(32px, 4.4vw, 84px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ip-ink);
}

.ip-head__bar {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding-top: 14px;
  border-top: 1px solid var(--ip-ink);
}

.ip-head__lead {
  max-width: 460px;
  margin: 0;
  font-family: var(--ip-text);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(5, 5, 5, 0.85);
}

.ip-head__badge {
  flex: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ip-head__index { margin-right: 6px; opacity: 0.6; }

.ip-head__badge::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 12px;
  background: var(--ip-lime-deep);
}

.px-section .ip-head__badge::after,
.ip-statement__bar span:first-child::after { background: var(--ip-ink); }

/* --- Long-form copy: one centred reading column --- */
.ip-prose {
  max-width: 760px;
  margin: 0 auto;
}

.ip-prose > :first-child { margin-top: 0; }

.ip-prose h3 {
  margin: 64px 0 18px;
  font-family: var(--rr-heading);
  font-size: clamp(24px, 2.2vw, 36px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ip-ink);
}

.ip-prose p,
.ip-prose li {
  font-family: var(--ip-text);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(5, 5, 5, 0.86);
}

.ip-prose p { margin: 0 0 1.15em; }

.ip-prose strong { font-weight: 500; color: var(--ip-ink); }

.ip-prose a {
  color: var(--ip-ink);
  text-decoration: underline;
  text-decoration-color: var(--ip-lime-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.ip-prose a:hover { color: var(--ip-blue); text-decoration-color: var(--ip-blue); }

.ip-prose ul,
.ip-prose .check-list {
  margin: 8px 0 1.6em;
  padding: 0;
  list-style: none;
}

.ip-prose li,
.ip-prose .check-list li {
  position: relative;
  display: block;
  padding: 12px 0 12px 28px;
  border: 0;
  border-top: 1px solid rgba(5, 5, 5, 0.22);
  font-size: 16px;
  line-height: 1.6;
}

.ip-prose li:last-child,
.ip-prose .check-list li:last-child { border-bottom: 1px solid rgba(5, 5, 5, 0.22); }

.ip-prose li::before,
.ip-prose .check-list li::before {
  content: '';
  position: absolute;
  top: calc(12px + 0.8em - 4px);
  left: 0;
  width: 8px;
  height: 8px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--ip-lime-deep);
}

.px-section .ip-prose li::before { background: var(--ip-ink); }

/* red flags: hollow squares */
.ip-prose .check-list li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ip-ink);
}

.px-section .ip-prose li,
.px-section .ip-prose li:last-child { border-color: rgba(5, 5, 5, 0.35); }

.ip-prose--after { margin-top: 88px; }

/* --- Curriculum cards (lime panel): photo, [01] + stat, title, text, tags --- */
.ip-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ip-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 12px 18px;
  border: 1px solid var(--ip-ink);
  background: #DBDBDA;
  transition: background 0.35s ease, color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ip-card__media {
  aspect-ratio: 6 / 5;
  overflow: hidden;
  background: #CFCFCD;
}

.ip-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ip-card__top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ip-card__index { opacity: 0.6; }

.ip-card__stat::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  background: var(--ip-lime-deep);
}

.ip-card__title {
  margin: 0;
  font-family: var(--rr-heading);
  font-size: clamp(22px, 1.75vw, 30px);
  font-weight: 500;
  line-height: 1.02;
}

.ip-card__text {
  flex: 1;
  margin: 0;
  font-family: var(--ip-text);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(5, 5, 5, 0.82);
  transition: color 0.35s ease;
}

.ip-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.ip-card__tags li {
  padding: 5px 8px 4px;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (hover: hover) {
  .ip-card:not(.ip-card--rabbit):hover {
    background: var(--ip-ink);
    color: var(--ip-lime);
    transform: translateY(-6px);
  }
  .ip-card:not(.ip-card--rabbit):hover .ip-card__text { color: rgba(237, 237, 234, 0.85); }
  .ip-card:not(.ip-card--rabbit):hover .ip-card__media img { transform: scale(1.05); }
  .ip-card:not(.ip-card--rabbit):hover .ip-card__stat::after { background: var(--ip-lime); }
}

/* eighth cell: the rabbit, pointing on to the evaluation guide */
.ip-card--rabbit {
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  background: var(--ip-ink);
  color: var(--ip-lime);
}

.ip-card__rabbit {
  display: block;
  width: 46%;
  aspect-ratio: 479 / 520;
  margin: 18% auto 0;
  background: var(--ip-lime);
  -webkit-mask: url("../images/rabbit-mark.webp") center / contain no-repeat;
  mask: url("../images/rabbit-mark.webp") center / contain no-repeat;
}

.ip-card__link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ip-lime);
  box-shadow: inset 0 -1px 0 currentColor;
}

/* --- Text cards: short, parallel sub-sections (topic guides) --- */
.ip-tcards {
  display: grid;
  grid-template-columns: repeat(var(--ip-tcols, 3), minmax(0, 1fr));
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.ip-tcards--2 { --ip-tcols: 2; max-width: 1040px; }
.ip-tcards--after { margin-top: 56px; }

/* an odd last card in a two-column grid spans the row */
.ip-tcards--2 > .ip-tcard:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* three-up grids run on six tracks so a short last row never leaves a hole:
   two leftover cards split the row, one leftover card spans it */
@media (min-width: 1101px) {
  .ip-tcards--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ip-tcards--3 > .ip-tcard { grid-column: span 2; }
  .ip-tcards--3 > .ip-tcard:nth-last-child(2):nth-child(3n + 1),
  .ip-tcards--3 > .ip-tcard:last-child:nth-child(3n + 2) { grid-column: span 3; }
  .ip-tcards--3 > .ip-tcard:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

.ip-tcard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 26px;
  border: 1px solid var(--ip-ink);
  background: #DBDBDA;
  transition: background 0.35s ease, color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ip-tcard__index {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.ip-tcard__index::after {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--ip-lime-deep);
}

.ip-tcard__title {
  margin: 0;
  font-family: var(--rr-heading);
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 500;
  line-height: 1.05;
}

.ip-tcard p {
  margin: 0;
  font-family: var(--ip-text);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(5, 5, 5, 0.84);
  transition: color 0.35s ease;
}

.ip-tcard a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ip-lime-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ip-tcard ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ip-tcard li {
  position: relative;
  padding: 9px 0 9px 22px;
  border-top: 1px solid rgba(5, 5, 5, 0.22);
  font-family: var(--ip-text);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(5, 5, 5, 0.84);
  transition: color 0.35s ease, border-color 0.35s ease;
}

.ip-tcard li::before {
  content: '';
  position: absolute;
  top: calc(9px + 0.75em - 3px);
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--ip-lime-deep);
}

.ip-tcard strong { font-weight: 500; color: inherit; }

@media (hover: hover) {
  .ip-tcard:hover {
    background: var(--ip-ink);
    color: var(--ip-lime);
    transform: translateY(-6px);
  }
  .ip-tcard:hover p,
  .ip-tcard:hover li { color: rgba(237, 237, 234, 0.86); border-color: rgba(237, 237, 234, 0.2); }
  .ip-tcard:hover .ip-tcard__index::after,
  .ip-tcard:hover li::before { background: var(--ip-lime); }
}

/* --- Legal pages: compact hero, one reading column, indexed H2s --- */
.ip-hero--compact {
  min-height: 0;
  padding-bottom: 32px;
}

.ip-hero--compact .ip-hero__center { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 96px); }
.ip-hero--compact .ip-hero__rabbit { width: clamp(80px, 8vw, 128px); }
.ip-hero--compact .ip-hero__foot {
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--ip-ink);
}

.ip-hero--compact .ip-hero__crumbs { margin-bottom: 0; }

.ip-hero__updated {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ip-hero__badge::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 12px;
  background: var(--ip-lime-deep);
}

.ip-legal { padding-top: 72px; }

.ip-prose--legal { counter-reset: ip-legal; }

.ip-prose--legal h2 {
  counter-increment: ip-legal;
  margin: 72px 0 22px;
  padding-top: 16px;
  border-top: 1px solid var(--ip-ink);
  font-family: var(--rr-heading);
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ip-ink);
}

.ip-prose--legal h2:first-child { margin-top: 0; }

.ip-prose--legal h2::before {
  content: '(' counter(ip-legal, decimal-leading-zero) ')';
  display: block;
  margin-bottom: 18px;
  font-family: var(--rr-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* --- 404: the rabbit stands in for the zero --- */
.ip-404 .ip-hero__center { padding-bottom: 72px; }

.ip-404__code {
  display: flex;
  align-items: baseline; /* the rabbit's feet sit on the digits' baseline */
  justify-content: center;
  gap: 0.06em;
  margin: 0;
  font-family: var(--rr-display);
  font-size: clamp(120px, 22vw, 360px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--ip-ink);
  animation: ip-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}

.ip-404__rabbit {
  width: 0.62em;
  margin: 0 0.04em;
  animation: ip-hop 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

.ip-404__title {
  margin: clamp(28px, 3.4vw, 48px) 0 16px;
  font-family: var(--rr-heading);
  font-size: clamp(28px, 3vw, 52px);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ip-ink);
}

.ip-404__copy {
  max-width: 46ch;
  margin: 0;
  font-family: var(--ip-text);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(5, 5, 5, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  .ip-404__code,
  .ip-404__rabbit { animation: none; }
}

/* --- Numbered rows (audience) — the homepage course rows --- */
.ip-rows {
  counter-reset: ip-row;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ip-ink);
}

.ip-row {
  counter-increment: ip-row;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  padding: 20px 0 26px;
  border-top: 1px solid var(--ip-ink);
  /* hover: black bar drops in from the top, text turns lime */
  background: linear-gradient(var(--ip-ink), var(--ip-ink)) no-repeat 0 0 / 100% 0;
  transition: background-size 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.ip-row::before {
  content: '[' counter(ip-row, decimal-leading-zero) ']';
  grid-column: 1 / 3;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(5, 5, 5, 0.72);
  transition: color 0.3s ease, padding 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.ip-row__title {
  grid-column: 4 / 9;
  margin: 0;
  font-family: var(--rr-heading);
  font-size: clamp(1.9rem, 2.8vw, 3.25rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--ip-ink);
  transition: color 0.3s ease;
}

.ip-row__body { grid-column: 9 / -1; padding-right: 8px; }

.ip-row__body p {
  margin: 0;
  font-family: var(--ip-text);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(5, 5, 5, 0.82);
  transition: color 0.3s ease;
}

.ip-row__body .ip-row__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  font-family: var(--rr-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (hover: hover) {
  .ip-row:hover { background-size: 100% 100%; }
  .ip-row:hover::before { padding-left: 10px; }
  .ip-row:hover::before,
  .ip-row:hover .ip-row__title,
  .ip-row:hover .ip-row__body p { color: var(--ip-lime); }
}

/* --- Evaluation criteria: four ruled columns with big numbers --- */
.ip-criteria {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ip-ink);
  border-bottom: 1px solid var(--ip-ink);
}

.ip-criteria__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 32px;
}

.ip-criteria__item + .ip-criteria__item { border-left: 1px solid var(--ip-ink); }
.ip-criteria__item:first-child { padding-left: 0; }
.ip-criteria__item:last-child { padding-right: 0; }

.ip-criteria__num {
  margin-bottom: 40px;
  font-family: var(--rr-heading);
  font-size: clamp(3.5rem, 6vw, 5.4rem);
  font-weight: 500;
  line-height: 0.9;
}

.ip-criteria__item h3 {
  margin: 0;
  font-family: var(--rr-heading);
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  line-height: 1.05;
}

.ip-criteria__item p {
  margin: 0;
  font-family: var(--ip-text);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(5, 5, 5, 0.85);
}

/* --- On this page: three-column index of [01] links --- */
.ip-toc { padding-bottom: 120px; }

.ip-toc__list {
  counter-reset: ip-toc;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ip-toc__list li {
  counter-increment: ip-toc;
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 16px 0 18px;
  border-bottom: 1px solid rgba(5, 5, 5, 0.22);
}

.ip-toc__list li::before {
  content: '[' counter(ip-toc, decimal-leading-zero) ']';
  flex: none;
  font-size: 13px;
  font-weight: 500;
  color: rgba(5, 5, 5, 0.6);
}

.ip-toc__list a {
  font-family: var(--rr-heading);
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 500;
  line-height: 1.1;
}

/* --- GEO statement (lime pixel panel): giant title, the rabbit as its full stop --- */
.ip-statement {
  position: relative;
  padding: 40px var(--ip-pad) 110px;
  color: var(--ip-ink);
  text-align: center;
}

.ip-statement__bar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ip-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ip-statement__bar span:first-child::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 12px;
}

.ip-statement__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.ip-statement__title {
  margin: clamp(96px, 10vw, 180px) 0 12px;
  font-family: var(--rr-display);
  font-size: clamp(44px, 8.2vw, 150px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* the rabbit hops onto the end of the title line, feet on the baseline */
.ip-statement__rabbit {
  display: inline-block;
  width: 0.78em;
  height: auto;
  margin-left: 0.12em;
  vertical-align: baseline;
  pointer-events: none;
}

.ip-statement__body p {
  max-width: 52ch;
  margin: 0;
  font-family: var(--ip-text);
  font-size: 17px;
  line-height: 1.6;
}

/* Outlined button (same as the homepage CTA button) */
.ip-btn {
  padding: 9px 14px 8px;
  border: 1px solid var(--ip-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ip-ink);
  transition: color 0.3s ease, background 0.3s ease;
}

.ip-btn:hover { background: var(--ip-ink); color: var(--ip-lime); }

/* --- CTA: the rabbit sits on the skyline's solid bottom row --- */
.ip-cta { --edge-size: calc(100vw / 16.5); }
.ip-cta .cta-banner { position: relative; }

.ip-cta__rabbit {
  position: absolute;
  right: calc(var(--edge-size) * 2);
  bottom: calc(100% + var(--edge-size)); /* on top of the skyline's solid bottom row */
  z-index: 2;
  width: calc(var(--edge-size) * 1.5);
}

/* Shared homepage components on inner pages */
.ip-page .fq-section { padding-top: 24px; }

.ip-page a:focus-visible,
.ip-page button:focus-visible {
  outline: 2px solid var(--ip-blue);
  outline-offset: 3px;
}

/* --- Tablet / phone --- */
@media (max-width: 1100px) {
  .ip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-tcards { --ip-tcols: 2; }
  .ip-tcards > .ip-tcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .ip-section { padding-bottom: 96px; }
  .ip-head { margin-bottom: 56px; }
  .ip-head__bar { flex-direction: column-reverse; gap: 14px; }

  .ip-hero__foot { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
  .ip-hero__meta { gap: 28px; }

  .ip-row { row-gap: 14px; }
  .ip-row::before { grid-column: 1 / 3; }
  .ip-row__title,
  .ip-row__body { grid-column: 3 / -1; }

  .ip-criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-criteria__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ip-criteria__item:nth-child(even) { padding-right: 0; }
  .ip-criteria__item:nth-child(n + 3) { border-top: 1px solid var(--ip-ink); }

  .ip-toc__list { grid-template-columns: 1fr; }
  .ip-cta { --edge-size: calc(100vw / 8); }
}

@media (max-width: 560px) {
  .ip-cards,
  .ip-tcards { grid-template-columns: 1fr; }
  .ip-card--rabbit { display: none; }
  .ip-criteria { grid-template-columns: 1fr; }
  .ip-criteria__item,
  .ip-criteria__item:nth-child(n) { padding: 20px 0 28px; border-left: 0; }
  .ip-criteria__item + .ip-criteria__item { border-top: 1px solid var(--ip-ink); }
  .ip-criteria__num { margin-bottom: 16px; }
  .ip-row::before,
  .ip-row__title,
  .ip-row__body { grid-column: 1 / -1; }
  .ip-statement__bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ip-hero__ctas { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ip-hero__rabbit,
  .ip-hero__title,
  .ip-hero__ctas,
  .ip-hero__foot { animation: none; }
  .ip-row,
  .ip-row::before,
  .ip-card,
  .ip-tcard,
  .ip-card__media img,
  .ip-play__label,
  .ip-play__icon { transition: none; }
}