/**
 * Dentplicity Design System
 * Based on Owner.com aesthetic with Dentplicity emerald green accent
 *
 * Last Updated: January 7, 2026
 * Reference: /Users/arvindmurthy/.claude/plans/fancy-conjuring-kay.md (Part 2)
 *
 * Modern CSS Features (2025+):
 * - View Transitions API (lines 261-325)
 * - Scroll-Driven Animations (lines 338-454)
 * - Container Queries (lines 468-565)
 * Documentation: docs/modern-css-features.md
 */

/* ============================================
   ALPINE.JS X-CLOAK - MUST BE FIRST!
   Hide elements until Alpine.js initializes
   ============================================ */
[x-cloak] { display: none !important; }

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

:root {
  /* Primary Brand - Dentplicity Emerald (replaces Owner.com blue) */
  --primary: #059669;           /* Emerald 600 - main CTAs */
  --primary-hover: #047857;     /* Emerald 700 - hover state */
  --primary-light: #d1fae5;     /* Emerald 100 - light backgrounds */
  --primary-muted: #6ee7b7;     /* Emerald 300 - decorative */
  --primary-dark: #065f46;      /* Emerald 800 - dark accents */

  /* Secondary - Owner.com warm neutrals */
  --bg-warm: #faf9f7;           /* Warm cream (Owner's hero bg) */
  --bg-warm-alt: #f5f5f0;       /* Slightly darker warm */
  --bg-white: #ffffff;
  --bg-dark: #1e293b;           /* Slate 800 - dark sections */
  --bg-dark-alt: #0f172a;       /* Slate 900 - footer */

  /* Sidebar - Warm cream theme (Owner.com style) */
  --sidebar-bg: #faf9f7;            /* Warm cream background */
  --sidebar-bg-hover: #f5f1eb;      /* Slightly darker on hover */
  --sidebar-text: #1e293b;          /* Dark text for contrast */
  --sidebar-text-muted: #64748b;    /* Slate 500 - section headers */
  --sidebar-border: #e7e5e4;        /* Stone 200 - subtle borders */
  --sidebar-active-bg: var(--primary);
  --sidebar-active-text: #ffffff;

  /* Text Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #525252;    /* Neutral 600 */
  --text-muted: #737373;        /* Neutral 500 */
  --text-inverse: #ffffff;
  --text-link: var(--primary);

  /* Borders */
  --border-light: #e5e5e5;
  --border-medium: #d4d4d4;
  --border-dark: #a3a3a3;

  /* Status Colors (Owner.com soft background style) */
  --status-critical-bg: #fee2e2;
  --status-critical-text: #991b1b;
  --status-critical-border: #fecaca;

  --status-warning-bg: #fef3c7;
  --status-warning-text: #92400e;
  --status-warning-border: #fde68a;

  --status-success-bg: #d1fae5;
  --status-success-text: #166534;
  --status-success-border: #a7f3d0;

  --status-info-bg: #e0f2fe;
  --status-info-text: #075985;
  --status-info-border: #bae6fd;

  /* Score Range Colors */
  --score-poor: #ef4444;        /* Red 500 */
  --score-fair: #f59e0b;        /* Amber 500 */
  --score-good: var(--primary);
  --score-excellent: #22c55e;   /* Green 500 */

  /* Font Families */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', 'Times New Roman', serif;

  /* Font Sizes - Mobile First */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px - Hero headlines */

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;

  /* Spacing Scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Section Padding - Mobile */
  --section-padding-y: var(--space-16);
  --section-padding-x: var(--space-4);

  /* Container */
  --container-max: 1200px;
  --container-padding: var(--space-4);

  /* Border Radius */
  --radius-sm: 0.375rem;   /* 6px - small elements */
  --radius-md: 0.5rem;     /* 8px - inputs */
  --radius-lg: 0.75rem;    /* 12px - small cards */
  --radius-xl: 1rem;       /* 16px - cards */
  --radius-2xl: 1.5rem;    /* 24px - large cards, modals */
  --radius-3xl: 2rem;      /* 32px - hero elements */
  --radius-full: 9999px;   /* Pill buttons */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Card-specific shadows */
  --shadow-card: 0 4px 24px -4px rgb(0 0 0 / 0.08);
  --shadow-card-hover: 0 8px 32px -4px rgb(0 0 0 / 0.12);

  /* FAB (Floating Action Button) shadows */
  --shadow-fab: 0 4px 14px rgba(5, 150, 105, 0.4);
  --shadow-fab-hover: 0 6px 20px rgba(5, 150, 105, 0.5);

  /* Glassmorphism shadows */
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.3);

  /* Platform Colors (Social Media) */
  --platform-instagram: #e1306c;
  --platform-instagram-gradient: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  --platform-facebook: #1877f2;
  --platform-twitter: #000000;
  --platform-linkedin: #0a66c2;
  --platform-google: #34a853;
  --platform-email: #7c3aed;
  --platform-tiktok: #000000;
  --platform-threads: #000000;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* Z-Index Scale */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal-backdrop: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ============================================
   B2B (Specialist) Theme Override
   Purple theme for dental specialists who
   market to other dentists, not patients.
   Applied via data-branch="b2b" attribute.
   ============================================ */
[data-branch="b2b"] {
  /* Primary Brand - Professional Purple for B2B */
  --primary: #7c3aed;           /* Violet 600 - main CTAs */
  --primary-hover: #6d28d9;     /* Violet 700 - hover state */
  --primary-light: #ede9fe;     /* Violet 100 - light backgrounds */
  --primary-muted: #a78bfa;     /* Violet 400 - decorative */
  --primary-dark: #5b21b6;      /* Violet 800 - dark accents */

  /* Score colors adjusted for purple theme */
  --score-good: #7c3aed;

  /* Status success uses purple tint */
  --status-success-bg: #ede9fe;
  --status-success-text: #5b21b6;
  --status-success-border: #c4b5fd;
}

/* Theme color utility classes */
[data-theme="emerald"] {
  --primary: #059669;
  --primary-hover: #047857;
  --primary-light: #d1fae5;
  --primary-muted: #6ee7b7;
  --primary-dark: #065f46;
}

[data-theme="purple"] {
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-light: #ede9fe;
  --primary-muted: #a78bfa;
  --primary-dark: #5b21b6;
}

/* Responsive Breakpoint Overrides */
@media (min-width: 768px) {
  :root {
    --section-padding-y: var(--space-20);
    --section-padding-x: var(--space-8);
    --container-padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-padding-y: var(--space-24);
    --container-padding: var(--space-8);
  }
}

/* ============================================
   MODERN CSS FEATURES (2025+)
   View Transitions, Scroll Animations, Container Queries
   Last Updated: January 7, 2026

   Browser Support:
   - View Transitions: Chrome 111+, Safari 18+, Firefox 126+
   - Scroll-Driven Animations: Chrome 115+, Edge 115+
   - Container Queries: Baseline Widely Available (all modern browsers)
   ============================================ */

/* --------------------------------------------
   1. VIEW TRANSITIONS API
   Smooth page transitions between dashboard pages

   Usage: Automatically applies to same-origin navigations.
   For HTMX: Add hx-boost="true" to enable SPA-style transitions.

   Customize per-element with view-transition-name property:
   .hero { view-transition-name: hero; }
   -------------------------------------------- */

/* Enable View Transitions for all navigations */
@view-transition {
  navigation: auto;
}

/* Default page transition - subtle fade + slide */
::view-transition-old(root) {
  animation: vt-fade-out 200ms ease-out;
}

::view-transition-new(root) {
  animation: vt-fade-in 200ms ease-in;
}

@keyframes vt-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Named transitions for specific elements */
.dashboard-content {
  view-transition-name: dashboard-content;
}

::view-transition-old(dashboard-content) {
  animation: vt-slide-out-left 250ms ease-out;
}

::view-transition-new(dashboard-content) {
  animation: vt-slide-in-right 250ms ease-in;
}

@keyframes vt-slide-out-left {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-20px); }
}

@keyframes vt-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Sidebar stays stable during page transitions */
.dashboard-sidebar {
  view-transition-name: sidebar;
}

::view-transition-old(sidebar),
::view-transition-new(sidebar) {
  animation: none;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* --------------------------------------------
   2. SCROLL-DRIVEN ANIMATIONS
   Elements animate as they enter the viewport

   Usage: Add .scroll-reveal class to any element
   Variants: .scroll-reveal-left, .scroll-reveal-right, .scroll-reveal-scale

   These replace JavaScript scroll handlers and
   Intersection Observer for basic reveal effects.
   -------------------------------------------- */

/* Base scroll reveal - fade up */
.scroll-reveal {
  animation: scroll-fade-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes scroll-fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Variant: Slide from left */
.scroll-reveal-left {
  animation: scroll-slide-left linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes scroll-slide-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Variant: Slide from right */
.scroll-reveal-right {
  animation: scroll-slide-right linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes scroll-slide-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Variant: Scale up */
.scroll-reveal-scale {
  animation: scroll-scale-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes scroll-scale-up {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Staggered reveals for grid items */
.scroll-reveal-stagger > * {
  animation: scroll-fade-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

.scroll-reveal-stagger > *:nth-child(1) { animation-delay: 0ms; }
.scroll-reveal-stagger > *:nth-child(2) { animation-delay: 50ms; }
.scroll-reveal-stagger > *:nth-child(3) { animation-delay: 100ms; }
.scroll-reveal-stagger > *:nth-child(4) { animation-delay: 150ms; }
.scroll-reveal-stagger > *:nth-child(5) { animation-delay: 200ms; }
.scroll-reveal-stagger > *:nth-child(6) { animation-delay: 250ms; }

/* Progress bar that fills as you scroll */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  transform-origin: left;
  animation: scroll-progress-fill linear;
  animation-timeline: scroll(root);
  z-index: var(--z-sticky);
}

@keyframes scroll-progress-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale,
  .scroll-reveal-stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------
   3. CONTAINER QUERIES
   Components that respond to their container size

   Usage:
   1. Add container-type to parent: .card-container { container-type: inline-size; }
   2. Use @container to style children based on container width

   This allows the same component to adapt whether
   it's in a sidebar (narrow) or main content (wide).
   -------------------------------------------- */

/* Dashboard card containers */
.metric-card,
.summary-card,
.score-card,
.action-card {
  container-type: inline-size;
  container-name: card;
}

/* Compact layout when card is narrow (< 280px) */
@container card (max-width: 280px) {
  .metric-icon,
  .summary-icon,
  .score-icon {
    width: 36px;
    height: 36px;
  }

  .metric-value,
  .summary-value,
  .score-value {
    font-size: 1.25rem;
  }

  .metric-label,
  .summary-label,
  .score-label {
    font-size: 0.75rem;
  }

  .metric-trend {
    display: none;
  }
}

/* Expanded layout when card has room (> 350px) */
@container card (min-width: 350px) {
  .metric-card,
  .summary-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }
}

/* Grid containers for responsive grids */
.metrics-grid,
.summary-grid,
.cards-grid {
  container-type: inline-size;
  container-name: grid;
}

/* Auto-adjust grid columns based on container */
@container grid (max-width: 400px) {
  .metrics-grid,
  .summary-grid,
  .cards-grid {
    grid-template-columns: 1fr;
  }
}

@container grid (min-width: 401px) and (max-width: 700px) {
  .metrics-grid,
  .summary-grid,
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container grid (min-width: 701px) {
  .metrics-grid,
  .summary-grid,
  .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* Sidebar-aware content container */
.dashboard-content {
  container-type: inline-size;
  container-name: content;
}

/* Adjust content when sidebar makes space tight */
@container content (max-width: 600px) {
  .page-header h1 {
    font-size: 1.5rem;
  }

  .page-subtitle {
    font-size: 0.875rem;
  }

  .section-header h2 {
    font-size: 1.125rem;
  }
}

/* ============================================
   END OF MODERN CSS FEATURES
   ============================================ */

/* ============================================
   BASE STYLES (Reset & Typography)
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

.text-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-link:hover {
  color: var(--primary-hover);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   TYPOGRAPHY CLASSES
   ============================================ */

.headline-hero {
  font-family: var(--font-serif);  /* Serif throughout page */
  font-size: clamp(2.5rem, 6vw, 5rem);  /* Bigger, more commanding - 40px to 80px */
  font-weight: 700;
  line-height: 1.05;  /* Tighter for large headlines */
  letter-spacing: -0.03em;  /* Tighter tracking for headlines */
}

.headline-section {
  font-family: var(--font-serif);  /* Serif throughout page */
  font-size: clamp(1.75rem, 4vw, 3rem);  /* Larger section headlines - 28px to 48px */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Section divider for clear visual breaks */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
  margin: 0 auto var(--space-12);
  max-width: 200px;
}

/* Section subheadline */
.section-subhead {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 600px;
  margin: var(--space-4) auto 0;
  text-align: center;
}

/* Section subtitle + helper text */
.section-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 720px;
  margin: var(--space-3) auto 0;
  text-align: center;
}

.section-note {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 720px;
  margin: var(--space-3) auto 0;
  text-align: center;
}

.headline-card {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.body-large {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.body-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-narrow {
  max-width: 800px;
}

.container-wide {
  max-width: 1400px;
}

/* Section Backgrounds */
.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}

.section-warm {
  background-color: var(--bg-warm);
}

.section-white {
  background-color: var(--bg-white);
}

.section-dark {
  background-color: var(--bg-dark);
  color: var(--text-inverse);
}

.section-dark .headline-section,
.section-dark .headline-hero {
  color: var(--text-inverse);
}

.section-dark .body-large {
  color: rgba(255, 255, 255, 0.8);
}

.section-footer {
  background-color: var(--bg-dark-alt);
  color: var(--text-inverse);
}

/* Background Utility Classes */
.bg-dark {
  background-color: var(--bg-dark);
  color: var(--text-inverse);
}

.bg-dark h2, .bg-dark h3, .bg-dark h4,
.bg-dark .section-title {
  color: var(--text-inverse);
}

.bg-dark p, .bg-dark li {
  color: rgba(255, 255, 255, 0.85);
}

.bg-warm {
  background-color: var(--bg-warm);
}

.bg-white {
  background-color: var(--bg-white);
}

.bg-muted {
  background-color: var(--bg-warm-alt);
}

.bg-brand {
  background-color: var(--bg-dark);
  color: var(--text-inverse);
}

.home-shell {
  background: var(--bg-warm);
  padding-bottom: var(--space-8);
}

/* Hero Section Utilities */
.hero-warm {
  background: var(--bg-warm);
  padding-top: calc(var(--space-20) + 80px);
  padding-bottom: var(--space-16);
}

.hero-dark {
  background: var(--bg-dark-alt);
  color: var(--text-inverse);
  padding-top: calc(var(--space-20) + 80px);
  padding-bottom: var(--space-16);
}

.hero-dark .headline-hero,
.hero-dark .headline-section {
  color: var(--text-inverse);
}

.hero-dark .body-large,
.hero-dark p {
  color: rgba(255, 255, 255, 0.8);
}

/* Section Header Margin Utilities */
.section-header-lg {
  margin-bottom: var(--space-12);
}

.section-header-md {
  margin-bottom: var(--space-10);
}

.section-header-sm {
  margin-bottom: var(--space-8);
}

/* Text Inverse Utilities */
.text-inverse {
  color: var(--text-inverse) !important;
}

.text-inverse-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.section-rounded {
  border-radius: 48px;
  margin: var(--space-6) var(--space-6);
  overflow: hidden;
  box-shadow: var(--shadow-lg-soft, 0 20px 80px rgba(15, 23, 42, 0.06));
}

@media (max-width: 900px) {
  .section-rounded {
    margin: var(--space-5) var(--space-4);
    border-radius: 32px;
  }
}

@media (max-width: 640px) {
  .section-rounded {
    margin: var(--space-4) var(--space-3);
    border-radius: 24px;
  }
}

/* Flexbox Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Grid Utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:flex-row { flex-direction: row; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Spacing Utilities */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================
   BUTTONS (Owner.com pill style)
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary Button (Black pill - Owner.com default) */
.btn-primary {
  background-color: var(--text-primary);
  color: var(--text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background-color: #333333;
  transform: translateY(-1px);
}

/* Secondary Button (Outline) */
.btn-secondary {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--bg-warm);
  border-color: var(--text-primary);
}

/* CTA Button (Emerald, larger - for hero sections) */
.btn-cta {
  background-color: var(--primary);
  color: var(--text-inverse);
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

.btn-cta:hover:not(:disabled) {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Ghost Button (Text only) */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-4);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--text-primary);
  background-color: var(--bg-warm);
}

/* Button Icon */
.btn-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* ============================================
   FORM INPUTS
   ============================================ */

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.input-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

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

.input-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-lg);
  border-radius: var(--radius-lg);
}

/* Hero Search Input (with button) */
.input-hero {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}

.input-hero .input {
  border: none;
  flex: 1;
  background: transparent;
}

.input-hero .input:focus {
  box-shadow: none;
}

/* ============================================
   CARDS (Owner.com rounded style)
   ============================================ */

.card {
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all var(--transition-normal);
}

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

.card-body {
  padding: var(--space-6);
}

/* Feature Card */
.card-feature {
  padding: var(--space-8);
  text-align: center;
}

.card-feature .card-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  color: var(--primary);
}

.card-feature .card-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.card-feature .card-description {
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================
   BADGES & CHIPS
   ============================================ */

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
}

.badge-primary {
  background-color: var(--primary-light);
  color: var(--primary);
}

.badge-new {
  background-color: var(--primary);
  color: var(--text-inverse);
}

/* Status Badges */
.badge-critical {
  background-color: var(--status-critical-bg);
  color: var(--status-critical-text);
}

.badge-warning {
  background-color: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.badge-success {
  background-color: var(--status-success-bg);
  color: var(--status-success-text);
}

/* ============================================
   SCORE GAUGE (Owner.com style)
   ============================================ */

.gauge {
  position: relative;
  width: 160px;
  text-align: center;
}

.gauge-svg {
  transform: rotate(-90deg);
  width: 120px;
  height: 120px;
}

.gauge-bg {
  fill: none;
  stroke: var(--border-light);
  stroke-width: 8;
}

.gauge-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.292; /* 2 * PI * 54 */
  stroke-dashoffset: calc(339.292 * (1 - var(--score, 0) / 100));
  transition: stroke-dashoffset 1s ease;
}

/* Score-based colors */
.gauge[data-score-range="poor"] .gauge-fill { stroke: var(--score-poor); }
.gauge[data-score-range="fair"] .gauge-fill { stroke: var(--score-fair); }
.gauge[data-score-range="good"] .gauge-fill { stroke: var(--score-good); }
.gauge[data-score-range="excellent"] .gauge-fill { stroke: var(--score-excellent); }

.gauge-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gauge-score {
  display: block;
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.gauge-max {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.gauge-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.gauge-status {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
}

.gauge-status-poor {
  background: var(--status-critical-bg);
  color: var(--status-critical-text);
}

.gauge-status-fair {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.gauge-status-good {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

/* ============================================
   ISSUE CARDS (Owner.com pink/red style)
   ============================================ */

.issue-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

.issue-card.issue-critical {
  background: var(--status-critical-bg);
  border: 1px solid var(--status-critical-border);
}

.issue-card.issue-warning {
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
}

.issue-icon {
  flex-shrink: 0;
  font-size: var(--text-lg);
}

.issue-content {
  flex: 1;
}

.issue-title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.issue-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Issue List */
.issue-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.issue-list .issue {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.issue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.issue.issue-critical .issue-dot { background: var(--status-critical-text); }
.issue.issue-warning .issue-dot { background: var(--status-warning-text); }

/* ============================================
   MODAL
   ============================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  padding: var(--space-4);
}

.modal-backdrop[hidden] {
  display: none;
}

body.modal-open {
  overflow: hidden;
}

.modal {
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  z-index: var(--z-modal);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-light);
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-6);
  border-top: 1px solid var(--border-light);
}

/* ============================================
   SKELETON LOADING
   ============================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--border-light) 25%,
    #f0f0f0 50%,
    var(--border-light) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 1em;
  margin-bottom: var(--space-2);
}

.skeleton-text.w-3\/4 { width: 75%; }
.skeleton-text.w-1\/2 { width: 50%; }
.skeleton-text.w-1\/4 { width: 25%; }

.skeleton-circle {
  border-radius: 50%;
}

.skeleton-gauge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-fade-in {
  animation: fadeIn var(--transition-normal) ease-out;
}

.animate-slide-up {
  animation: slideUp var(--transition-slow) ease-out;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

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

.skip-link:focus {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-radius: var(--radius-md);
  background: var(--bg-white);
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  outline: 2px solid var(--primary);
  z-index: var(--z-sticky);
}

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { inset: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* ============================================
   HTMX INDICATORS
   ============================================ */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-flex;
}

.htmx-request.htmx-indicator {
  display: inline-flex;
}

/* Loading spinner for htmx */
.spinner {
  width: 1em;
  height: 1em;
  border: 2px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   OWNER.COM STYLE LANDING COMPONENTS
   ============================================ */
.hero-owner {
  padding: calc(var(--space-24) + 80px) 0 var(--space-20);
  background: var(--bg-warm);
  --screen-duration: 42s;
}

.hero-owner__grid {
  display: grid;
  gap: var(--space-10);
  align-items: start;
  justify-items: center;
}

.hero-owner__copy {
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}

.hero-owner .headline-hero {
  font-size: clamp(3.75rem, 7.5vw, 6.5rem);
  font-weight: 500;
  line-height: 1.05;
}

.hero-owner__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-bottom: var(--space-20);
  position: relative;
}

@media (min-width: 1024px) {
  .hero-owner__media {
    justify-self: center;
  }
}

@media (max-width: 900px) {
  .hero-owner__copy {
    text-align: center;
    margin: 0 auto;
  }

  .hero-points {
    justify-content: center;
    justify-items: center;
  }

  .hero-point {
    justify-content: center;
  }

  .hero-cta-row {
    justify-content: center;
  }

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

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero-phone {
  position: relative;
  width: min(560px, 94vw);
  aspect-ratio: 780 / 1598;
  overflow: visible;
  --screen-count: 7;
  --screen-duration: 42s;
}

.hero-phone-screen {
  position: absolute;
  inset: 5.2% 5% 2.7% 5%;
  border-radius: 32px;
  background: linear-gradient(180deg, #fbf7f2 0%, #f7f1ec 100%);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.hero-phone-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}

.hero-phone-status {
  position: absolute;
  top: 4px;  /* Inside container to avoid clipping by overflow:hidden + border-radius */
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 28px;  /* Increased horizontal padding to avoid corner clipping */
  font-size: 14px;  /* iPhone standard */
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  color: #0f172a;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #faf9f7 100%);  /* Seamless blend into screen */
  border-radius: 32px 32px 0 0;  /* Match phone screen corners */
  z-index: 4;  /* Above phone frame */
}

/* White mask to cover scrolling content behind status bar */
.hero-phone-status::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;  /* Extend down to cover Dynamic Island area */
  background: linear-gradient(180deg, #ffffff 0%, #faf9f7 100%);
  z-index: -1;  /* Behind status text, but element inherits parent z-index: 4 */
  border-radius: 32px 32px 0 0;
}

.hero-phone-time {
  min-width: 64px;
  text-align: center;
  letter-spacing: 0.02em;
  margin-left: 8px;  /* Slight offset toward center (padding handles main spacing) */
}

.hero-phone-status-right {
  display: flex;
  align-items: center;
  gap: 6px;  /* iPhone standard gap */
  justify-content: flex-end;  /* Align to right edge */
  margin-right: 0;  /* Removed negative margin to avoid corner clipping */
}

.hero-phone-network {
  font-size: 13px;  /* iPhone 5G indicator size */
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero-phone-signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.hero-phone-signal span {
  width: 4px;
  background: #0f172a;
  border-radius: 2px;
}

.hero-phone-signal span:nth-child(1) { height: 7px; }
.hero-phone-signal span:nth-child(2) { height: 10px; }
.hero-phone-signal span:nth-child(3) { height: 13px; }
.hero-phone-signal span:nth-child(4) { height: 16px; }

.hero-phone-battery {
  position: relative;
  width: 30px;
  height: 13px;
  border: 1.5px solid #0f172a;
  border-radius: 3px;
}

.hero-phone-battery span {
  display: block;
  height: 100%;
  width: 70%;
  background: #0f172a;
  border-radius: 2px;
}

.hero-phone-battery::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -4px;
  width: 2.5px;
  height: 7px;
  background: #0f172a;
  border-radius: 1px;
}

.hero-app-bar {
  position: absolute;
  top: 24px;  /* Position BELOW Dynamic Island - gives room for island */
  left: 0;
  right: 0;
  padding: 4px 16px 6px;  /* Tighter vertical padding */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* White mask extending upward to cover scrolling content above app bar */
.hero-app-bar::before {
  content: "";
  position: absolute;
  top: -30px;  /* Extend 30px above app bar to cover Dynamic Island area */
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(180deg, #faf9f7 0%, rgba(255, 255, 255, 0.95) 100%);
  z-index: -1;
  border-radius: 32px 32px 0 0;
}

.hero-app-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-app-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hero-app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hero-app-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.hero-app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}

.hero-screen-window {
  flex: 1;
  overflow: hidden;
  padding: 78px 16px 40px;  /* More top padding for spacing below app bar */
  position: relative;
  z-index: 1;  /* Below app bar (z-index: 2) so content doesn't scroll over it */
}

.hero-screen-track {
  height: calc(var(--screen-count) * 100%);
  display: flex;
  flex-direction: column;
  animation: heroScreenScroll var(--screen-duration) infinite;
  will-change: transform;
  animation-timing-function: ease-in-out;
}

.hero-screen-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 6px 0;
}

@keyframes heroScreenScroll {
  0%, 11% { transform: translateY(0); }
  14%, 25% { transform: translateY(-14.285%); }
  28%, 39% { transform: translateY(-28.57%); }
  42%, 53% { transform: translateY(-42.855%); }
  56%, 67% { transform: translateY(-57.14%); }
  70%, 81% { transform: translateY(-71.425%); }
  84%, 95% { transform: translateY(-85.71%); }
  100% { transform: translateY(-85.71%); }
}

.hero-tab-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px 12px 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  z-index: 2;
}

.hero-tab-item {
  font-size: 0.6rem;
  text-align: center;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.hero-tab-item.is-active {
  color: var(--primary);
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.screen-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.screen-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.screen-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--bg-white);
}

.screen-toolbar-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.screen-toolbar-subtitle {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.screen-toolbar-chip {
  padding: 4px 8px;
  border-radius: 999px;
  background: #fde68a;
  color: #92400e;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Simplified toolbar colors - all use warm cream/emerald */
.screen-toolbar--indigo,
.screen-toolbar--purple,
.screen-toolbar--green,
.screen-toolbar--blue {
  background: linear-gradient(90deg, var(--primary-light), #ecfdf5);
  border-color: #a7f3d0;
}

.screen-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.screen-kpi {
  border-radius: 12px;
  border: 1px solid var(--border-light);
  padding: 8px 10px;
  background: var(--bg-white);
  display: grid;
  gap: 4px;
}

/* Simplified KPI colors - all use emerald accent */
.screen-kpi--purple,
.screen-kpi--blue,
.screen-kpi--mint,
.screen-kpi--sage {
  background: var(--primary-light);  /* Emerald 100 */
  border-color: #a7f3d0;  /* Emerald 200 */
}

.screen-kpi-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.screen-kpi-value {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-primary);
}

.screen-kpi-meta {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.screen-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.screen-progress span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.screen-mini-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.screen-mini-metric {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 6px 8px;
  display: grid;
  gap: 2px;
}

.screen-mini-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.screen-mini-label {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.screen-mini-meta {
  font-size: 0.64rem;
  color: var(--text-secondary);
}

.screen-action-list {
  display: grid;
  gap: 6px;
}

.screen-action {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 10px 8px 26px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  position: relative;
}

.screen-action::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.screen-opportunity-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.screen-opportunity {
  text-align: center;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 6px;
}

.screen-opportunity-value {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.screen-opportunity-label {
  display: block;
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.screen-table {
  display: grid;
  gap: 6px;
}

.screen-table-head,
.screen-table-row {
  display: grid;
  grid-template-columns: 2.2fr 0.8fr 0.8fr 0.6fr 0.6fr;
  gap: 6px;
  font-size: 0.74rem;
  align-items: center;
}

.screen-table-head {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0 2px;
}

.screen-table-row {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 6px 8px;
  color: var(--text-secondary);
}

.screen-table--seo .screen-table-head,
.screen-table--seo .screen-table-row {
  grid-template-columns: 2.4fr 0.8fr 0.8fr 0.8fr;
}

.screen-table-name {
  font-weight: 600;
  color: var(--text-primary);
}

/* Simplified table indicators - emerald for good, muted for bad */
.screen-table-good {
  color: var(--primary);
  font-weight: 700;
}

.screen-table-bad {
  color: var(--text-muted);
  font-weight: 500;
}

.screen-table-warn {
  color: var(--text-secondary);  /* Neutral instead of amber */
  font-weight: 600;
}

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

.screen-gap-card {
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 0.68rem;
  border: 1px solid transparent;
  display: grid;
  gap: 2px;
}

/* Simplified gap card colors - all use emerald */
.screen-gap-card--purple,
.screen-gap-card--blue,
.screen-gap-card--green {
  background: var(--primary-light);
  border-color: #a7f3d0;
  color: var(--primary-dark);
}

.screen-gap-title {
  font-weight: 700;
}

.screen-gap-text {
  color: inherit;
  opacity: 0.9;
}

.screen-opportunity-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: linear-gradient(90deg, var(--primary-light), #a7f3d0);
  border: 1px solid var(--primary-muted);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 0.7rem;
  color: var(--primary-dark);
}

.screen-opportunity-text {
  display: block;
  font-size: 0.62rem;
  color: var(--primary-dark);
}

.screen-swot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.screen-swot-card {
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 0.68rem;
  border: 1px solid transparent;
  display: grid;
  gap: 6px;
}

/* Simplified SWOT card colors - all use neutral/emerald */
.screen-swot-card--green,
.screen-swot-card--red,
.screen-swot-card--blue,
.screen-swot-card--orange {
  background: var(--bg-warm);
  border-color: var(--border-light);
}

.screen-swot-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
}

.screen-swot-list {
  margin: 0;
  padding-left: 16px;
  color: #0f172a;
  line-height: 1.4;
}

.screen-swot-list li {
  margin-bottom: 2px;
}

.screen-swot-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.screen-swot-stat {
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-white);
  padding: 8px 10px;
  display: grid;
  gap: 2px;
}

.screen-swot-stat--accent {
  background: #ecfdf3;
  border-color: #bbf7d0;
}

.screen-swot-stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.screen-swot-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.screen-swot-stat-meta {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.screen-priority-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.screen-priority-pill {
  background: #ede9fe;
  color: #4c1d95;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.62rem;
  font-weight: 700;
}

.screen-button-row {
  display: flex;
  gap: 8px;
}

.screen-button {
  flex: 1;
  text-align: center;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.screen-button--primary {
  background: var(--bg-dark-alt);
  color: var(--text-inverse);
  border-color: var(--bg-dark-alt);
}

.screen-input {
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-white);
}

.screen-map {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.screen-map img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.screen-map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.screen-map-marker {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.66rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.screen-map-marker:nth-child(1) {
  top: 14px;
  left: 12px;
}

.screen-map-marker:nth-child(2) {
  top: 76px;
  right: 14px;
}

.screen-map-marker:nth-child(3) {
  bottom: 16px;
  left: 24px;
}

.screen-map-marker.marker-dso {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}

.screen-map-marker.marker-indie {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.screen-list {
  display: grid;
  gap: var(--space-2);
}

.screen-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 10px;
}

.screen-list-label {
  font-weight: 600;
  color: var(--text-primary);
}

.screen-list-value {
  color: var(--text-muted);
}

.screen-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.screen-chip {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.screen-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
}

.screen-threat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.screen-threat-score {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 10px;
  text-align: center;
}

.screen-threat-label {
  display: block;
  font-size: 0.64rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.screen-threat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.screen-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.screen-row-muted {
  color: var(--text-muted);
}

.screen-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.screen-tag {
  background: #dcfce7;
  color: #166534;
  font-size: 0.55rem;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.screen-score {
  font-weight: 600;
  color: var(--primary);
  font-size: 0.78rem;
}

.screen-score-warn {
  color: #d97706;
}

.screen-callout {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.76rem;
  padding: 8px 10px;
  border-radius: 12px;
  line-height: 1.3;
}

.screen-callout-success {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.screen-section-divider {
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin: 8px 0;
}

.screen-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.screen-stat {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 10px;
}

.screen-stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.screen-stat-value {
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--text-primary);
}

.screen-keywords .screen-subtitle {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.screen-plan {
  display: grid;
  gap: var(--space-2);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.screen-plan-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.screen-plan-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.screen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.screen-badge-warn {
  background: #fee2e2;
  color: #b91c1c;
}

.screen-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.screen-metric {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 10px;
  text-align: center;
}

.screen-metric-label {
  display: block;
  font-size: 0.64rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.screen-metric-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.screen-payer {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 10px;
}

.screen-payer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.screen-payer-label {
  font-size: 0.72rem;
}

.screen-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.screen-chat-compact .screen-chat-bubble {
  font-size: 0.72rem;
  padding: 6px 8px;
}

.screen-chat-bubble {
  max-width: 90%;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.screen-chat-user {
  align-self: flex-end;
  background: var(--bg-dark-alt);
  color: var(--text-inverse);
}

.screen-chat-ai {
  align-self: flex-start;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.screen-keyword-list {
  display: grid;
  gap: var(--space-2);
}

.screen-keyword {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.screen-keyword-value {
  font-weight: 600;
  color: var(--text-primary);
}

.screen-post {
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.screen-social {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.screen-social-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  color: var(--text-muted);
}

.screen-social-brand {
  font-weight: 700;
  color: var(--text-primary);
}

.screen-social-meta {
  font-size: 0.58rem;
  color: var(--text-muted);
}

.screen-social-image {
  position: relative;
  height: 128px;
  border-radius: 10px;
  overflow: hidden;
}

.screen-social-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screen-social-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
}

.screen-social-user {
  display: grid;
  gap: 2px;
}

.screen-social-handle {
  font-size: 0.58rem;
  color: var(--text-muted);
}

.screen-social-more {
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.2em;
}

.screen-social-actions {
  display: flex;
  gap: 10px;
  font-size: 0.66rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.screen-social-caption {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.screen-social-tags {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.screen-social-time {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.screen-post-title {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.screen-post-meta {
  margin-top: 6px;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.hero-prompt {
  position: absolute;
  left: 50%;
  bottom: 24%;
  transform: translateX(-50%) scale(1.45);
  transform-origin: center;
  width: min(760px, 130vw);
  z-index: 4;
  scroll-margin-top: 120px;
}

@media (max-width: 900px) {
  .hero-prompt {
    bottom: 18%;
    transform: translateX(-50%) scale(1.2);
    width: min(640px, 112vw);
  }
}

@media (max-width: 640px) {
  .hero-prompt {
    bottom: 12%;
    transform: translateX(-50%) scale(0.98);
    width: min(520px, 100vw);
  }
}

.hero-stat-grid {
  width: min(520px, 90vw);
}

.hero-stat-grid .stat {
  align-items: center;
  text-align: center;
}

.hero-stat-grid .stat-value {
  font-size: var(--text-2xl);
}

@media (prefers-reduced-motion: reduce) {
  .hero-screen-track {
    animation: none;
    transform: translateY(0);
  }
}

.hero-split {
  padding: calc(var(--space-24) + 80px) 0 var(--space-20);
  background: var(--bg-hero, #f7f7f5);
}

.split-grid {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .split-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  font-family: var(--font-body);
}

.hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.6;
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.hero-spotlight {
  background: var(--bg-white);
  border-radius: var(--radius-3xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
}

.hero-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) auto var(--space-4);
  max-width: 720px;
  justify-items: center;
}

.hero-point {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  justify-content: center;
}

.hero-point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-note {
  margin-top: var(--space-4);
  font-size: 0.95rem;
  color: var(--text-secondary);
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero-stance {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.hero-proof {
  margin-top: var(--space-4);
  font-size: 0.95rem;
  color: var(--text-secondary);
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.hero-under {
  margin-top: var(--space-6);
  text-align: center;
  max-width: 720px;
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--text-primary);
  font-size: 1.1rem;
  line-height: 1.5;
}

.hero-under-proof {
  margin-top: var(--space-2);
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-weight: 500;
}

.hero-trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;  /* Center the trust badge */
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.9rem;
  width: 100%;
}

.hero-trust-stars {
  color: #f59e0b;  /* Amber/gold for stars */
  letter-spacing: 2px;
}

.hero-trust-text {
  color: var(--text-secondary);
  font-weight: 500;
}


.hero-media {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--bg-warm);
  box-shadow: var(--shadow-lg);
}

.hero-media img {
  width: 100%;
  display: block;
}

.hero-media-phone {
  background: transparent;
  box-shadow: none;
  display: flex;
  justify-content: center;
}

.hero-media-phone img {
  width: auto;
  max-height: 520px;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hero-media-card {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
  min-width: 220px;
}

.hero-score {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.hero-score-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--primary);
}

.hero-score-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-score-detail {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.hero-score-pill {
  background: var(--bg-warm);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.hero-video {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  position: relative;
}

.hero-video img,
.hero-video .media-placeholder {
  width: 100%;
  display: block;
}

.play-button {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  background: var(--bg-white);
  color: var(--text-primary);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: var(--shadow-lg);
  font-weight: 600;
}

.media-placeholder {
  width: 100%;
  min-height: 260px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(120deg, rgba(5, 150, 105, 0.08), rgba(5, 150, 105, 0.02));
  border: 1px solid rgba(5, 150, 105, 0.08);
  position: relative;
  overflow: hidden;
}

.media-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 45%);
  opacity: 0.9;
}

.media-placeholder-label {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.media-hero {
  min-height: 420px;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.2), rgba(5, 150, 105, 0.05));
}

.media-value {
  min-height: 340px;
}

.blog-thumb {
  min-height: 260px;
  border-radius: var(--radius-2xl);
}

.avatar-placeholder {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--bg-warm-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

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

.value-shell,
.card-shell,
.faq-shell,
.testimonial-shell,
.resource-shell {
  background: var(--bg-white);
  border-radius: 32px;
  padding: var(--space-16) var(--space-12);
  box-shadow: var(--shadow-lg-soft, 0 20px 80px rgba(15, 23, 42, 0.08));
}

.value-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .value-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.value-card,
.spotlight-card,
.faq-card,
.testimonial-card,
.resource-card {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-light);
  padding: var(--space-8);
  background: var(--bg-white);
}

.highlight-card {
  background: radial-gradient(circle at top, #f1ede9, #f7f4ef 60%, #f9f7f3);
  border: none;
}

.problem-split .hero-video {
  box-shadow: var(--shadow-card);
}

.more-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .more-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.more-card {
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}

.more-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.more-card p {
  margin: 0;
  color: var(--text-secondary);
}

.tech-grid {
  display: grid;
  gap: var(--space-4);
}

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

.tech-item {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.tech-title {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.tech-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.dp-carousel {
  position: relative;
}

.dp-carousel-track {
  display: flex;
  transition: transform 600ms ease;
  will-change: transform;
}

.dp-carousel-slide {
  min-width: 100%;
  opacity: 0.2;
  transition: opacity 300ms ease;
}

.dp-carousel-slide.is-active {
  opacity: 1;
}

.dp-carousel-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .dp-carousel-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.dp-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-6);
}

.dp-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border-medium);
  background: var(--bg-white);
  cursor: pointer;
  transition: all 200ms ease;
}

.dp-carousel-dot.is-active {
  width: 28px;
  background: var(--primary);
  border-color: var(--primary);
}

.review-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x mandatory;
}

.review-row::-webkit-scrollbar {
  display: none;
}

.review-row--fade {
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.review-card {
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-light);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  scroll-snap-align: start;
  display: grid;
  gap: var(--space-3);
}

.review-stars {
  color: #f59e0b;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
}

.review-quote {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.review-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.belief-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .belief-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.belief-card {
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-light);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

.belief-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.belief-card p {
  margin: 0;
  color: var(--text-secondary);
}

/* Step Cards */
.step-grid {
  display: grid;
  gap: var(--space-4);
}

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

@media (min-width: 1024px) {
  .step-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step-card {
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}

.step-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.step-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

/* Image Cards */
.image-card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--bg-white);
  box-shadow: var(--shadow-card);
}

.image-card img {
  width: 100%;
  display: block;
}

.image-card-tag {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  background: rgba(15, 23, 42, 0.85);
  color: var(--text-inverse);
  padding: 6px var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.referral-map {
  min-height: 320px;
}

.referral-map-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.referral-map-chip {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.referral-map-chip.chip-gp {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.referral-map-chip.chip-dso {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}

.referral-map-chip:nth-child(1) {
  top: 16px;
  left: 16px;
}

.referral-map-chip:nth-child(2) {
  top: 70px;
  right: 18px;
}

.referral-map-chip:nth-child(3) {
  bottom: 100px;
  left: 22px;
}

.referral-map-panel {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: rgba(15, 23, 42, 0.95);
  color: var(--text-inverse);
  padding: 16px 18px;
  border-radius: 14px;
  min-width: 220px;
  display: grid;
  gap: 8px;
  backdrop-filter: blur(4px);
}

.referral-map-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.referral-map-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  gap: var(--space-3);
}

.referral-map-row span:last-child {
  color: #86efac;
  font-weight: 700;
}

/* GP → Specialist Referral Table (NEW) */
.referral-table-wrapper {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.referral-network-table {
  width: 100%;
  border-collapse: collapse;
}

.referral-network-table th {
  background: var(--bg-warm);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.referral-network-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
}

.referral-network-table tr:last-child td {
  border-bottom: none;
}

.referral-practice {
  font-weight: 500;
  color: var(--text-primary);
}

.referral-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-warm);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-right: 4px;
}

.referral-volume {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.referral-volume-high {
  background: var(--status-success-bg);
  color: var(--primary);
}

.referral-volume-med {
  background: #fef3c7;
  color: #b45309;
}

.referral-volume-low {
  background: var(--bg-warm);
  color: var(--text-muted);
}

.referral-score {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.referral-score-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-warm);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.referral-score-bar span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
}

.referral-score-num {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  min-width: 24px;
}

/* Responsive table */
@media (max-width: 640px) {
  .referral-network-table {
    display: block;
  }

  .referral-network-table thead {
    display: none;
  }

  .referral-network-table tbody,
  .referral-network-table tr,
  .referral-network-table td {
    display: block;
  }

  .referral-network-table tr {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
  }

  .referral-network-table td {
    padding: var(--space-1) 0;
    border-bottom: none;
  }

  .referral-network-table td:first-child {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
  }
}

/* Enhanced Referral Network Section */
.referral-section-header {
  margin-bottom: var(--space-8);
}

.referral-why-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
  border-left: 4px solid #f59e0b;
}

.referral-why-icon {
  font-size: var(--text-2xl);
  flex-shrink: 0;
}

.referral-why-content {
  flex: 1;
}

.referral-why-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.referral-why-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.referral-why-text strong {
  color: #b45309;
}

/* Referral Network Card */
.referral-network-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.referral-network-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-light);
}

.referral-network-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.referral-network-location {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Expanded Table Styles */
.referral-network-table--expanded {
  font-size: var(--text-sm);
}

.referral-network-table--expanded th {
  font-size: 10px;
  padding: var(--space-3) var(--space-4);
}

.referral-network-table--expanded td {
  padding: var(--space-3) var(--space-4);
}

.referral-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.referral-type-indie {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.referral-type-dso {
  background: var(--status-critical-bg);
  color: var(--status-critical-text);
}

.referral-row--alert {
  background: rgba(239, 68, 68, 0.05);
}

/* Referral Insights */
.referral-insights {
  padding: var(--space-5) var(--space-6);
  background: var(--bg-warm);
  border-top: 1px solid var(--border-light);
}

.referral-insights-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-4) 0;
}

.referral-insights-grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .referral-insights-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.referral-insight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.referral-insight-icon {
  font-size: var(--text-base);
  flex-shrink: 0;
}

.referral-insight-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.referral-insight-text strong {
  color: var(--text-primary);
}

.referral-insight--warning {
  border-left: 3px solid #f59e0b;
}

.referral-insight--opportunity {
  border-left: 3px solid var(--primary);
}

.referral-insight--info {
  border-left: 3px solid #3b82f6;
}

.referral-features {
  justify-content: center;
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.dentgpt-preview {
  padding: var(--space-8);
  border: 1px solid var(--border-light);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dentgpt-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dentgpt-badge {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  font-weight: 600;
}

.dentgpt-preview__bubble {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  line-height: var(--leading-relaxed);
}

.dentgpt-preview__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dentgpt-preview__item {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.dentgpt-preview__footer {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.dentgpt-impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-10);
  align-items: center;
}

.dentgpt-impact__mock {
  display: flex;
  justify-content: center;
}

.dentgpt-impact__mock .mockup {
  max-width: 420px;
  width: 100%;
}

.dentgpt-impact__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dentgpt-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  width: fit-content;
}

.dentgpt-pill-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}

.dentgpt-accent {
  color: var(--primary);
  border-bottom: 2px solid rgba(5, 150, 105, 0.35);
}

.dentgpt-diff {
  background: #f5f3ff;
  border: 1px solid #e9d5ff;
  border-radius: 16px;
  padding: var(--space-4);
  color: #4c1d95;
}

.dentgpt-diff-title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 6px;
}

.dentgpt-diff p {
  margin: 0;
  font-size: var(--text-sm);
  color: #5b21b6;
}

@media (max-width: 900px) {
  .dentgpt-impact {
    grid-template-columns: 1fr;
  }

  .dentgpt-impact__mock {
    order: 2;
  }

  .dentgpt-impact__copy {
    order: 1;
  }
}

/* Testimonials */
.testimonial-photo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.feature-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.feature-row svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex-shrink: 0;
}

.action-columns {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.action-column .feature-list {
  margin-top: var(--space-3);
}

.action-title {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

@media (min-width: 900px) {
  .action-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.faq-shell {
  background: #f9f7f2;
}

.faq-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 820px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.faq-card h3 {
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
}

/* ---- Blog / Knowledge Hub Section ---- */
.blog-section {
  background: var(--bg-warm);
}

.blog-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

@media (max-width: 900px) {
  .blog-home-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  display: block;
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  color: inherit;
}

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

.blog-card-featured {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card-featured .blog-card-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.blog-card-featured .blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-category {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.blog-category-finance {
  background: #10b981;
  color: white;
}

.blog-category-growth {
  background: #3b82f6;
  color: white;
}

.blog-category-marketing {
  background: #8b5cf6;
  color: white;
}

.blog-category-reputation {
  background: #f59e0b;
  color: white;
}

.blog-category-operations {
  background: #6b7280;
  color: white;
}

.blog-category-insights {
  background: #ec4899;
  color: white;
}

.blog-category-specialist {
  background: #14b8a6;
  color: white;
}

.blog-card-content {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  line-height: 1.3;
  color: var(--text-primary);
}

.blog-card-excerpt {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  flex: 1;
}

.blog-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.blog-card-arrow {
  color: var(--color-primary);
  font-weight: 600;
}

/* Recent articles grid (3 smaller cards) */
.blog-recent-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.blog-card-small {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
}

.blog-card-small .blog-card-image {
  width: 100px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.blog-card-small .blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-small .blog-card-content {
  padding: 0;
  flex: 1;
}

.blog-card-category-small {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.blog-card-title-small {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.blog-card-read-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .blog-card-featured .blog-card-image {
    height: 180px;
  }

  .blog-card-small .blog-card-image {
    width: 80px;
    height: 64px;
  }

  .blog-card-title-small {
    font-size: var(--text-xs);
  }
}

/* ---- FAQ Accordion ---- */
.faq-section {
  background: var(--bg-warm);
}

.faq-container {
  max-width: 800px;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  background: var(--bg-white);
  border-radius: 0;
  overflow: hidden;
  transition: all 0.2s ease;
}

.faq-item:first-child {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.faq-item:last-child {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.faq-item:only-child {
  border-radius: var(--radius-xl);
}

.faq-item + .faq-item {
  border-top: 1px solid var(--border-light);
}

.faq-item.is-open {
  background: var(--bg-white);
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-8);  /* Increased horizontal padding */
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}

.faq-trigger:hover {
  background: rgba(0, 0, 0, 0.02);
}

.faq-question {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.faq-icon svg {
  width: 18px;
  height: 18px;
}

.faq-item.is-open .faq-icon {
  color: var(--primary);
}

.faq-content {
  padding: 0 var(--space-8) var(--space-5);  /* Increased horizontal padding */
  overflow: hidden;
}

.faq-content p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Alpine Collapse animation support */
[x-collapse] {
  overflow: hidden !important;
}

[x-collapse].x-collapse-enter-active,
[x-collapse].x-collapse-leave-active {
  transition: height 0.3s ease;
}

.testimonial-shell {
  background: #f6f2ec;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

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

.testimonial-quote {
  font-size: var(--text-xl);
  line-height: 1.6;
}

.resource-shell {
  background: #0f172a;
  color: var(--text-inverse);
}

.resource-shell .btn {
  background: var(--bg-white);
  color: var(--text-primary);
}

.resource-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .resource-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.guide-card {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.guide-label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.text-white { color: var(--text-inverse); }
.text-white-muted { color: rgba(255, 255, 255, 0.7); }

.btn-inverse {
  background: var(--bg-white);
  color: var(--text-primary);
}

.btn-inverse:hover {
  background: var(--bg-warm);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-inverse);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.25);
}

.dark-band {
  background: #0f1b17;
  color: #f8f7f3;
  border-radius: 32px;
  padding: var(--space-16) var(--space-12);
}

.dark-band p {
  color: rgba(248, 247, 243, 0.8);
}

.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: var(--space-4);
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  min-width: 280px;
  scroll-snap-align: start;
}

.feature-tab {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  background: var(--bg-white);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.feature-tab.active,
.feature-tab:hover {
  background: var(--text-primary);
  color: var(--text-inverse);
  border-color: var(--text-primary);
}

.article-category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-divider {
  height: 1px;
  background: var(--border-light);
  margin: var(--space-12) 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-6);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-value {
  font-size: var(--text-3xl);
  font-weight: 700;
}

.stat-label {
  color: var(--text-muted);
}

/* ============================================
   OWNER.COM REDESIGN - CSS FOUNDATIONS
   Social Proof Marquee, Feature Tabs, Swiper
   ============================================ */

/* Section Background Utilities */
.section-cream-gradient {
  background: linear-gradient(180deg, #f5f5f0 0%, #faf9f7 100%);
}

/* ---- Social Proof Cards (Static Grid) ---- */
.proof-section {
  padding: var(--space-12) 0;
}

.proof-label {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6);
}

.proof-cards-grid {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.proof-card {
  flex-shrink: 0;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-6);
  width: 280px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

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

/* Circular avatar placeholder */
.proof-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light) 0%, #a7f3d0 100%);
  flex-shrink: 0;
}

/* Content wrapper */
.proof-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.proof-metric {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}

.proof-text {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
}

/* "How they did it" context */
.proof-how {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  font-style: italic;
}

.proof-author {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  font-weight: 500;
}

/* Responsive: Stack to 2 columns on tablet, 1 on mobile */
@media (max-width: 1024px) {
  .proof-cards-grid {
    max-width: 600px;
  }
}

@media (max-width: 640px) {
  .proof-cards-grid {
    flex-direction: column;
    align-items: center;
  }

  .proof-card {
    width: 100%;
    max-width: 320px;
  }
}

/* ---- Feature Tabs (Owner.com style) ---- */
.feature-tabs-section {
  padding: var(--space-20) 0;
}

.feature-tabs {
  margin-top: var(--space-8);
}

.feature-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-8);
}

.feature-tab-btn {
  position: relative;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  background: var(--bg-white);
  font-weight: 500;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  overflow: hidden;
}

.feature-tab-btn:hover {
  border-color: var(--text-primary);
}

.feature-tab-btn.is-active {
  background: var(--text-primary);
  color: var(--text-inverse);
  border-color: var(--text-primary);
}

.tab-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.tab-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--primary);
}

.feature-tab-btn.is-active .tab-progress span {
  animation: tab-progress-fill 6s linear forwards;
}

@keyframes tab-progress-fill {
  from { width: 0%; }
  to { width: 100%; }
}

.feature-tab-content {
  position: relative;
  height: 100%;
}

/* Feature panels - stacked with opacity transitions for smooth fading */
.feature-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.feature-panel.is-active {
  opacity: 1;
  visibility: visible;
}

.feature-panel-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .feature-panel-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Feature "Why this matters" explanatory text */
.feature-why {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--primary);
}

.feature-why-title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}

.feature-why-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-2) 0;
}

.feature-why-text:last-child {
  margin-bottom: 0;
}

/* DentGPT Mockup Frame - for Instagram/social mockups in carousel */
.dentgpt-mockup-frame {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.dentgpt-mockup-frame .mockup {
  max-width: 340px;
  width: 100%;
}

.dentgpt-mockup-frame .instagram-post {
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

@media (max-width: 768px) {
  .dentgpt-mockup-frame .mockup {
    max-width: 280px;
  }
}

/* Dashboard Mockup Cards */
.dashboard-mockup {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mockup-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--border-light);
}

.mockup-toolbar-title {
  font-size: var(--text-sm);
  font-weight: 600;
}

.mockup-toolbar-chip {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
}

.mockup-body {
  padding: var(--space-4);
  min-height: 220px;  /* Consistent height across all tab panels */
  max-height: 220px;
  overflow: hidden;   /* Clip excess content for clean transitions */
}

/* Expanded mockup body for taller feature tabs */
.dashboard-mockup--expanded .mockup-body {
  min-height: 520px;
  max-height: 520px;
  overflow: hidden;  /* No scrolling - content clips elegantly */
  position: relative;
}

/* Elegant fade-out at bottom of clipped content */
.dashboard-mockup--expanded .mockup-body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(transparent, var(--bg-white));
  pointer-events: none;
}

/* SEO Table Mockup */
.mockup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.mockup-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-light);
}

.mockup-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.mockup-table tr:last-child td {
  border-bottom: none;
}

.position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.position-badge.top-3 {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.position-badge.mid {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.position-badge.low {
  background: var(--status-critical-bg);
  color: var(--status-critical-text);
}

.quick-win-badge {
  background: var(--primary);
  color: var(--text-inverse);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  margin-left: var(--space-2);
}

/* Competitor Cards Mockup */
.competitor-cards {
  display: grid;
  gap: var(--space-3);
}

.competitor-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.competitor-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.competitor-info {
  flex: 1;
}

.competitor-name {
  font-size: var(--text-sm);
  font-weight: 500;
}

.competitor-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-2);
}

.threat-badge {
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
}

.threat-badge.high {
  background: var(--status-critical-bg);
  color: var(--status-critical-text);
}

.threat-badge.medium {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.threat-badge.low {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

/* Referral Table Mockup */
.referral-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.referral-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-light);
}

.referral-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.compatibility-bar {
  width: 60px;
  height: 6px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.compatibility-bar span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
}

.connect-link {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
}

.connect-link:hover {
  text-decoration: underline;
}

/* Chat Preview Mockup */
.chat-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chat-bubble {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: 18px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.chat-bubble.user {
  background: var(--text-primary);
  color: var(--text-inverse);
  align-self: flex-end;
  border-bottom-right-radius: 6px;
}

.chat-bubble.ai {
  background: var(--bg-warm);
  color: var(--text-primary);
  align-self: flex-start;
  border-bottom-left-radius: 6px;
}

.chat-input-preview {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
  margin-top: var(--space-2);
}

.chat-input-preview span {
  flex: 1;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Instagram Mockup Styles */
.instagram-mockup {
  max-width: 380px;  /* Unified size with other mockups to prevent jitter */
}

.instagram-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
}

.instagram-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.instagram-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ef4444, #ec4899);
}

.instagram-handle {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.instagram-body {
  padding: 0;
  min-height: auto;
  max-height: none;
}

.instagram-post {
  display: flex;
  flex-direction: column;
}

.instagram-image {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #fef3c7 0%, #e0f2fe 50%, #fce7f3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.instagram-image-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.instagram-image-icon {
  font-size: 2.5rem;
}

.instagram-image-text {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.instagram-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.instagram-action-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.instagram-action {
  font-size: var(--text-sm);
  cursor: pointer;
}

.instagram-caption {
  padding: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.instagram-caption strong {
  font-weight: 600;
  margin-right: var(--space-1);
}

.instagram-more {
  color: var(--text-muted);
  cursor: pointer;
}

/* ---- Platform Cycling Tabs ---- */
.platform-tabs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.platform-tab {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  background: var(--bg-white);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.platform-tab:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.platform-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.platform-icon {
  font-size: var(--text-sm);
}

.platform-label {
  display: none;
}

@media (min-width: 640px) {
  .platform-label {
    display: inline;
  }
}

/* Platform Content Container */
.platform-content-container {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}

.platform-panel {
  width: 100%;
}

/* Platform transitions - beautifully smooth */
.platform-enter {
  animation: platformFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.platform-leave {
  animation: platformFadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes platformFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes platformFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ---- Facebook Mockup Styles ---- */
.facebook-mockup {
  max-width: 380px;  /* Unified size with other mockups */
}

.facebook-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
}

.facebook-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.facebook-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1877f2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: var(--text-lg);
}

.facebook-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.facebook-page-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.facebook-timestamp {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.facebook-body {
  padding: 0;
}

.facebook-post-content {
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.facebook-reactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.facebook-reaction-icons {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.fb-like,
.fb-love {
  font-size: var(--text-sm);
}

.fb-love {
  margin-left: -4px;
}

.fb-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-left: var(--space-1);
}

.fb-comments {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.facebook-actions {
  display: flex;
  justify-content: space-around;
  padding: var(--space-2) 0;
}

.fb-action {
  flex: 1;
  padding: var(--space-2);
  background: none;
  border: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease;
}

.fb-action:hover {
  background: var(--bg-warm);
}

/* ---- Twitter/X Mockup Styles ---- */
.twitter-mockup {
  max-width: 380px;  /* Unified size with other mockups */
}

.twitter-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
}

.twitter-header-left {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.twitter-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.twitter-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.twitter-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.twitter-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #1DA1F2;
  border-radius: 50%;
  color: white;
  font-size: 10px;
  margin-left: var(--space-1);
}

.twitter-handle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.twitter-body {
  padding: 0;
}

.twitter-post-content {
  padding: var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
}

.twitter-timestamp {
  padding: 0 var(--space-4) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.twitter-stats {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.twitter-stats strong {
  color: var(--text-primary);
  font-weight: 700;
}

.twitter-actions {
  display: flex;
  justify-content: space-around;
  padding: var(--space-2) var(--space-4);
}

.tw-action {
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.tw-action:hover {
  color: var(--primary);
}

/* ---- Calendar Mockup Styles ---- */
.calendar-mockup {
  max-width: 380px;  /* Unified size with other mockups */
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
}

.calendar-month {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.calendar-nav {
  display: flex;
  gap: var(--space-1);
}

.cal-nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.cal-nav-btn:hover {
  background: var(--bg-warm);
}

.calendar-body {
  padding: var(--space-3);
}

.calendar-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.calendar-grid-full {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  position: relative;
  gap: 2px;
}

.cal-day--empty {
  background: transparent;
}

.cal-day--scheduled {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-weight: 500;
}

.cal-dot {
  font-size: 10px;
  line-height: 1;
}

/* ---- Content Value Props (More Content Tab) ---- */
.content-value-props {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.content-prop {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.content-prop-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.content-prop-icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

.content-prop-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.content-prop-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  margin-left: calc(16px + var(--space-2));
}

/* ---- Referral Value Props (More Referrals Tab) ---- */
.referral-value-props {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.referral-value-prop {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.referral-value-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.referral-value-icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

.referral-value-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.referral-value-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  margin-left: calc(16px + var(--space-2));
}

/* ---- Expanded Feature Tab Elements ---- */

/* KPI Summary Row */
.mockup-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.mockup-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
  text-align: center;
}

.mockup-kpi-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.mockup-kpi-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mockup-kpi--warning .mockup-kpi-value {
  color: var(--status-warning-text);
}

.mockup-kpi--success .mockup-kpi-value {
  color: var(--status-success-text);
}

/* Gap Analysis Row */
.mockup-gap-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.mockup-gap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
}

.mockup-gap-icon {
  font-size: var(--text-base);
}

.mockup-gap-text {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Insight Callout */
.mockup-insight {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--text-primary);
  border-left: 3px solid #f59e0b;
}

.mockup-insight strong {
  color: #b45309;
}

/* Trend Indicators */
.trend-up {
  color: var(--status-success-text);
  font-weight: 600;
}

.trend-down {
  color: var(--status-critical-text);
  font-weight: 600;
}

.trend-stable {
  color: var(--text-muted);
  font-weight: 600;
}

/* At Risk Badge */
.at-risk-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  background: var(--status-critical-bg);
  color: var(--status-critical-text);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/* DSO Competitor Avatar - neutral gray instead of red */
.competitor-avatar--dso {
  background: linear-gradient(135deg, var(--text-muted), var(--text-secondary));
  color: var(--text-inverse);
  font-weight: 700;
}

/* Content Calendar Mini Preview */
.content-calendar-mini {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.calendar-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.calendar-count {
  font-size: var(--text-xs);
  color: var(--primary);
  font-weight: 500;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}

.calendar-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.calendar-day--scheduled {
  border-color: var(--primary);
  background: var(--primary-light);
}

.calendar-date {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

.calendar-type {
  font-size: var(--text-sm);
  margin-top: 2px;
}

/* ---- Feature Tabs V2 (Owner.com exact copy) ---- */
.feature-tabs-section-v2 {
  padding: var(--space-20) 0;
}

.feature-tabs-v2 {
  margin-top: var(--space-8);
}

/* Numbered Tab Navigation */
.feature-tabs-nav-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (max-width: 768px) {
  .feature-tabs-nav-v2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

.feature-tab-v2 {
  text-align: left;
  padding: var(--space-4) 0;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
}

.tab-number {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
  margin-bottom: var(--space-1);
}

.tab-label {
  display: block;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--text-muted);
  transition: all var(--transition-fast);
}

.feature-tab-v2.is-active .tab-label {
  font-weight: 600;
  color: var(--text-primary);
}

/* Progress line UNDER the tab */
.tab-progress-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--border-light);
  border-radius: var(--radius-full);
}

.tab-progress-line span {
  display: block;
  height: 100%;
  background: var(--text-primary);
  width: 0%;
  border-radius: var(--radius-full);
}

.feature-tab-v2.is-active .tab-progress-line span {
  animation: progress-fill-v2 12s linear forwards;  /* Matches 12s JS timer */
}

@keyframes progress-fill-v2 {
  from { width: 0%; }
  to { width: 100%; }
}

/* Large rounded gradient card - FIXED height for smooth transitions */
.feature-tabs-card {
  background: linear-gradient(135deg, #fef3c7 0%, #e0f2fe 50%, #fce7f3 100%);
  border-radius: 32px;
  padding: var(--space-10);
  height: 720px;  /* Increased from 560px to show full charts */
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .feature-tabs-card {
    border-radius: 24px;
    padding: var(--space-6);
    height: auto;
    min-height: 400px;
  }

  /* Ensure nested mockups scale down properly */
  .feature-panel-grid {
    gap: var(--space-4);
  }

  .dashboard-mockup {
    max-width: 100%;
  }

  .dashboard-mockup--expanded {
    max-width: 100%;
  }

  .dashboard-mockup--expanded .mockup-body {
    min-height: 350px;
    max-height: 400px;
  }

  /* Platform content container responsive */
  .platform-content-container {
    min-height: 380px;
  }

  /* Content value props responsive */
  .content-value-props {
    gap: var(--space-2);
  }

  .content-prop-desc {
    margin-left: 0;
    margin-top: var(--space-1);
  }

  /* Platform tabs responsive */
  .platform-tabs {
    gap: var(--space-1);
  }

  .platform-tab {
    padding: var(--space-1) var(--space-2);
    font-size: 11px;
  }

  /* Fix: Feature panel visibility on mobile */
  /* Panels use absolute positioning which breaks when parent has height: auto */
  /* Switch to display toggle instead of opacity/visibility */
  .feature-tab-content {
    height: auto;
  }

  .feature-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: none;
    opacity: 1;
    visibility: visible;
    overflow-x: hidden;
  }

  .feature-panel.is-active {
    display: block;
  }

  /* Calendar mockup responsive */
  .calendar-grid-full {
    gap: 1px;
  }

  .cal-day {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .feature-tabs-card {
    padding: var(--space-4);
    border-radius: 20px;
  }

  .dashboard-mockup--expanded .mockup-body {
    min-height: 280px;
    max-height: 320px;
  }

  .platform-content-container {
    min-height: 300px;
  }

  /* Hide platform labels on very small screens */
  .platform-label {
    display: none !important;
  }

  /* Reduce mockup padding */
  .mockup-body {
    padding: var(--space-2);
  }
}

/* Navigation Arrows */
.feature-tabs-arrows {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-6);
}

.arrow-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.arrow-btn:hover {
  color: var(--text-primary);
}

.arrow-btn svg {
  flex-shrink: 0;
}

/* ---- Reviews Masonry Grid (Owner.com style) ---- */
.reviews-masonry-section {
  padding: var(--space-20) 0;
  position: relative;
}

.reviews-badges {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-4);
}

.reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
}

.reviews-link {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reviews-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-10);
  position: relative;
}

@media (max-width: 900px) {
  .reviews-masonry {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .reviews-masonry {
    grid-template-columns: 1fr;
  }
}

.reviews-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.review-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.review-stars {
  color: #fbbf24;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  letter-spacing: 2px;
}

.review-quote {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}

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

.review-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669 0%, #34d399 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}

.review-name {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Fade effect at bottom (Owner.com style) */
.reviews-masonry::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(transparent, var(--bg-warm));
  pointer-events: none;
}

/* ---- Three Beliefs V2 (Owner.com 2-column style) ---- */
.beliefs-section-v2 {
  padding: var(--space-20) 0;
}

.beliefs-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 900px) {
  .beliefs-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.beliefs-left .headline-section {
  font-size: var(--text-4xl);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.beliefs-subhead {
  margin-bottom: var(--space-8);
}

.founder-card {
  position: relative;
  display: inline-block;
  background: var(--bg-white);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.founder-photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.founder-info {
  margin-top: var(--space-4);
}

.founder-name {
  display: block;
  font-weight: 600;
  font-size: var(--text-base);
}

.founder-title {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.beliefs-right {
  padding-top: var(--space-4);
}

.belief-item {
  padding: var(--space-2) 0;
}

.belief-heading {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.belief-body {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.belief-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-8) 0;
}

/* ---- Three Beliefs V3 (Quote Hero + Cards) ---- */
.beliefs-section-v3 {
  padding: var(--space-20) 0;
}

/* Quote Hero */
.beliefs-quote-hero {
  text-align: center;
  margin-bottom: var(--space-16);
}

.beliefs-quote {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 auto var(--space-8);
  max-width: 800px;
  font-style: italic;
}

.beliefs-quote::before,
.beliefs-quote::after {
  display: none;
}

/* Founder in Quote */
.beliefs-founder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.beliefs-founder-photo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.beliefs-founder-info {
  text-align: left;
}

.beliefs-founder-name {
  display: block;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-primary);
}

.beliefs-founder-title {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Section Header */
.beliefs-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.beliefs-header .headline-section {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 0;
}

/* Beliefs Cards Grid */
.beliefs-cards-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .beliefs-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* Beliefs Card */
.beliefs-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.beliefs-card-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary) 0%, #34d399 100%);
  color: white;
  font-weight: 700;
  font-size: var(--text-lg);
  border-radius: var(--radius-full);
}

.beliefs-card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0;
}

.beliefs-card-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ---- Polish: Responsive & Accessibility Enhancements ---- */

/* Feature panel content mobile layout */
.feature-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.feature-panel .panel-text {
  max-width: 480px;
}

.panel-eyebrow {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.panel-headline {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin: 0;
}

@media (max-width: 640px) {
  .feature-tabs-nav-v2 {
    grid-template-columns: 1fr;
  }

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

  .panel-headline {
    font-size: var(--text-xl);
  }

  .feature-tabs-arrows {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }

  .arrow-btn {
    justify-content: center;
  }
}

/* Beliefs mobile adjustments */
@media (max-width: 640px) {
  .beliefs-left .headline-section {
    font-size: var(--text-3xl);
  }

  .founder-photo {
    width: 160px;
    height: 160px;
  }

  .belief-heading {
    font-size: var(--text-lg);
  }
}

/* Reviews mobile adjustments */
@media (max-width: 640px) {
  .reviews-badges {
    flex-direction: column;
    align-items: center;
  }
}

/* Touch-friendly button sizes */
@media (max-width: 768px) {
  .arrow-btn {
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
  }

  .feature-tab-v2 {
    min-height: 72px;
    padding: var(--space-4);
  }
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  .feature-tab-v2.is-active .tab-progress-line span {
    animation: none;
    width: 100%;
  }

  .review-card,
  .belief-item,
  .marquee-card {
    transition: none;
  }
}

/* Marquee cards mobile with avatar */
@media (max-width: 640px) {
  .marquee-card {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
  }

  .marquee-avatar {
    width: 36px;
    height: 36px;
  }

  .marquee-metric {
    font-size: var(--text-lg);
  }

  .marquee-text,
  .marquee-how {
    font-size: var(--text-xs);
  }
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---- Testimonial Swiper (Owner.com scaling) ---- */
.testimonial-swiper-section {
  padding: var(--space-16) 0;
  overflow: hidden;
}

.testimonial-swiper {
  padding: var(--space-8) 0;
}

.testimonial-swiper .swiper-slide {
  transform: scale(0.85);
  opacity: 0.5;
  transition: transform 300ms ease, opacity 300ms ease;
}

.testimonial-swiper .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}

.testimonial-slide-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial-stars {
  color: #f59e0b;
  font-size: var(--text-lg);
  letter-spacing: 0.1em;
}

.testimonial-quote {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

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

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-dark);
  font-weight: 600;
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-role {
  font-size: var(--text-sm);
  font-weight: 500;
}

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

/* Swiper navigation overrides */
.testimonial-swiper .swiper-button-prev,
.testimonial-swiper .swiper-button-next {
  color: var(--text-primary);
  background: var(--bg-white);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transition: transform 200ms ease;
}

.testimonial-swiper .swiper-button-prev:hover,
.testimonial-swiper .swiper-button-next:hover {
  transform: scale(1.05);
}

.testimonial-swiper .swiper-button-prev::after,
.testimonial-swiper .swiper-button-next::after {
  font-size: 16px;
  font-weight: 700;
}

.testimonial-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--border-medium);
  opacity: 1;
}

.testimonial-swiper .swiper-pagination-bullet-active {
  background: var(--primary);
  width: 28px;
  border-radius: var(--radius-full);
}

/* ---- DSO Tech Band (standalone) ---- */
.dso-tech-band {
  background: linear-gradient(180deg, #f5f5f0 0%, #faf9f7 100%);
  padding: var(--space-20) 0;
}

.dso-tech-content {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .dso-tech-content {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.dso-tech-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.dso-tech-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.dso-tech-card.span-2 {
  grid-column: span 2;
}

/* Mini Phone Mockup (DSO Tech Section) */
.mini-phone-mockup {
  background: var(--bg-warm);
  border-radius: var(--radius-2xl);
  padding: var(--space-2);
  position: relative;
  max-width: 180px;
  margin: 0 auto;
  border: 3px solid var(--text-primary);
}

.mini-phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 16px;
  background: var(--text-primary);
  border-radius: 10px;
}

.mini-phone-status {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-2) var(--space-1);
}

.mini-phone-content {
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.mini-phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.mini-header-location {
  font-size: 8px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.mini-header-badge {
  font-size: 8px;
  font-weight: 600;
  color: var(--primary);
  background: var(--status-success-bg);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

.mini-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.mini-kpi {
  text-align: center;
  padding: var(--space-2);
  background: var(--bg-warm);
  border-radius: var(--radius-md);
}

.mini-kpi-value {
  display: block;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.mini-kpi-label {
  display: block;
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 2px;
}

.mini-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 40px;
  gap: 4px;
}

.mini-chart-bar {
  flex: 1;
  background: var(--border-light);
  border-radius: 2px;
  transition: background-color 0.2s;
}

.mini-chart-bar.active {
  background: var(--primary);
}

/* Dentist Success Visual (DSO Tech Section) */
.dentist-success-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
}

.dentist-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  display: flex;
  align-items: center;
  justify-content: center;
}

.dentist-icon-circle svg {
  width: 32px;
  height: 32px;
  stroke: white;
}

.dentist-stats-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.dentist-stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius-md);
}

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

.stat-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

/* DSO Data Cards (NEW - replaces phone mockups) */
.dso-data-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .dso-data-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .dso-data-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dso-data-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.dso-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-light);
}

.dso-card-icon {
  font-size: var(--text-base);
}

.dso-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.dso-card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Demographics stat rows */
.dso-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dso-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.dso-stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.dso-stat-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.dso-stat-bar {
  height: 6px;
  background: var(--bg-warm);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dso-stat-bar span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
}

/* SEO keyword rows */
.dso-keyword {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius-md);
}

.dso-keyword-term {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
}

.dso-keyword-vol {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.dso-keyword-rank {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  background: var(--status-success-bg);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Action items */
.dso-action {
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
}

.dso-action:last-of-type {
  border-bottom: none;
}

.dso-action-done {
  color: var(--primary);
}

.dso-action-pending {
  color: var(--text-muted);
}

.dso-action-impact {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.dso-action-impact strong {
  color: var(--primary);
  font-weight: 600;
}

/* DSO Stacked Full-Width Cards (NEW DESIGN) */
.dso-tech-header {
  margin-bottom: var(--space-12);
}

.dso-stacked-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.dso-card-wide {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.dso-card-wide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border-light);
}

.dso-card-wide-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.dso-card-location {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.dso-card-score {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.dso-card-impact {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.dso-card-impact strong {
  color: var(--primary);
}

/* "Why it matters" context box */
.dso-why-box {
  padding: var(--space-3) var(--space-6);
  background: color-mix(in srgb, var(--primary) 5%, var(--bg-white));
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.dso-why-box strong {
  color: var(--primary);
  font-weight: 600;
}

.dso-card-wide-body {
  padding: var(--space-6);
}

/* Demographics Metric Grid */
.dso-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .dso-metric-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.dso-metric {
  text-align: center;
  padding: var(--space-4);
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
}

.dso-metric-value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.dso-metric-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dso-metric-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
  overflow: hidden;
}

.dso-metric-bar span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
}

.dso-metric-bar--trend span {
  background: linear-gradient(90deg, var(--primary), var(--primary-muted));
}

/* SEO Table */
.dso-seo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.dso-seo-table th {
  text-align: left;
  padding: var(--space-3);
  font-weight: 500;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-light);
}

.dso-seo-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

.dso-seo-table tr:last-child td {
  border-bottom: none;
}

.dso-seo-keyword {
  font-weight: 500;
  color: var(--text-primary);
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.rank-badge.rank-top {
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.rank-badge.rank-mid {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.rank-badge.rank-low {
  background: var(--status-critical-bg);
  color: var(--status-critical-text);
}

.opportunity-bar {
  display: inline-block;
  width: 60px;
  height: 6px;
  background: var(--bg-warm);
  border-radius: var(--radius-full);
  overflow: hidden;
  vertical-align: middle;
  margin-right: var(--space-2);
}

.opportunity-bar span {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
}

.opportunity-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
}

/* Action Grid */
.dso-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .dso-action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.dso-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
}

.dso-action-check {
  font-size: var(--text-base);
  flex-shrink: 0;
}

.dso-action-item--done .dso-action-check {
  color: var(--primary);
}

.dso-action-item--pending .dso-action-check {
  color: var(--text-muted);
}

.dso-action-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.dso-action-item--done .dso-action-text {
  color: var(--text-muted);
  text-decoration: line-through;
}

.dso-action-priority {
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Feature Row Below Cards */
.dso-features-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

.dso-feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.dso-feature svg {
  color: var(--primary);
}

/* ---- Three Beliefs Section ---- */
.beliefs-section {
  padding: var(--space-20) 0;
}

.beliefs-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .beliefs-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.belief-card {
  text-align: center;
}

.belief-photo {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.belief-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  line-height: var(--leading-tight);
}

.belief-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ---- Footer CTA with Rounded Edges ---- */
.footer-cta-section {
  padding: var(--space-4) var(--space-4) var(--space-16);
}

.footer-cta-band {
  background: var(--bg-dark);
  color: var(--text-inverse);
  border-radius: 48px;
  padding: var(--space-16) var(--space-8);
  text-align: center;
}

@media (min-width: 768px) {
  .footer-cta-band {
    padding: var(--space-20) var(--space-16);
  }
}

.footer-cta-band .headline-section {
  color: var(--text-inverse);
}

.footer-cta-band .body-large {
  color: rgba(255, 255, 255, 0.8);
  max-width: 540px;
  margin: var(--space-4) auto var(--space-6);
}

.footer-cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.footer-cta-content .hero-actions {
  justify-content: center;
}

/* Footer CTA with Phone */
.footer-cta-band--with-phone {
  text-align: left;
  padding: var(--space-12) var(--space-8);
  overflow: hidden;
}

@media (min-width: 768px) {
  .footer-cta-band--with-phone {
    padding: var(--space-16) var(--space-12);
  }
}

.footer-cta-grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 900px) {
  .footer-cta-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
  }
}

.footer-cta-band--with-phone .footer-cta-content {
  max-width: none;
  margin: 0;
}

.footer-cta-band--with-phone .hero-actions {
  justify-content: flex-start;
}

/* Feature Bullets */
.footer-cta-features {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .footer-cta-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer-cta-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.9);
}

.footer-cta-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Trust Badge */
.footer-cta-trust {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}

.footer-cta-stars {
  letter-spacing: 2px;
}

.footer-cta-trust-text {
  color: rgba(255, 255, 255, 0.7);
}

/* Footer Phone Mockup - Use scaled hero phone */
.footer-cta-phone {
  display: none;
  justify-content: center;
  align-items: flex-start;
}

@media (min-width: 900px) {
  .footer-cta-phone {
    display: flex;
  }
}

/* Scale the hero phone to 75% for final CTA */
.footer-cta-phone .hero-phone {
  transform: scale(0.75);
  transform-origin: top center;
}

/* Wrapper to contain the scaled phone dimensions */
.footer-phone-wrapper {
  width: 320px;  /* 420px * 0.75 - bigger preview */
  height: 650px; /* Taller to show more content */
  position: relative;
  overflow: visible;
}

/* Static screen for CTA - no animation */
.footer-cta-phone .hero-screen-track {
  animation: none !important;
  transform: translateX(0) !important;
}

.footer-phone-mockup {
  position: relative;
}

.footer-phone-frame {
  width: 220px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf7f2 100%);
  border-radius: 32px;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  overflow: hidden;
  border: 4px solid #1a1a1a;
}

/* Footer Phone Status */
.footer-phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-white);
}

.footer-phone-time {
  min-width: 40px;
}

.footer-phone-notch {
  width: 80px;
  height: 24px;
  background: #1a1a1a;
  border-radius: 16px;
}

.footer-phone-status-right {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}

/* Footer Phone App Bar */
.footer-phone-app-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--primary);
  color: white;
}

.footer-phone-app-logo {
  font-size: 14px;
}

.footer-phone-app-title {
  font-size: 11px;
  font-weight: 600;
}

/* Footer Phone Content */
.footer-phone-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  background: linear-gradient(180deg, #fbf7f2 0%, #f5f1eb 100%);
}

/* Footer Phone Card */
.footer-phone-card {
  background: white;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.footer-phone-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.footer-phone-card-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.footer-phone-card-badge {
  font-size: 9px;
  background: rgba(5, 150, 105, 0.1);
  color: var(--primary);
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 500;
}

.footer-phone-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 6px;
}

.footer-phone-score-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.footer-phone-score-label {
  font-size: 12px;
  color: var(--text-muted);
}

.footer-phone-score-bar {
  height: 6px;
  background: var(--bg-warm);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.footer-phone-score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, #34d399 100%);
  border-radius: var(--radius-full);
}

/* Footer Phone Stats */
.footer-phone-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.footer-phone-stat {
  background: white;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.footer-phone-stat-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}

.footer-phone-stat-label {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Footer Phone Action */
.footer-phone-action {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.footer-phone-action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--primary);
  color: white;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
}

.footer-phone-action-text {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ---- DentGPT Review Mockups ---- */
.review-mockups-section {
  margin-bottom: var(--space-12);
}

.review-mockups-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.review-mockups-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.review-mockups-subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0;
}

/* Toggle Switch */
.review-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-toggle-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.review-toggle-label.active {
  color: var(--text-primary);
  font-weight: 500;
}

.toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
  background: var(--bg-warm);
  border-radius: var(--radius-full);
  cursor: pointer;
  border: 2px solid var(--border-light);
  transition: all 0.3s ease;
}

.toggle-switch.active {
  background: var(--primary);
  border-color: var(--primary);
}

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--bg-white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease;
}

.toggle-switch.active .toggle-knob {
  transform: translateX(22px);
}

/* Review Cards Grid */
.review-mockups-grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .review-mockups-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Review Card */
.review-mockup-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Platform Badge */
.review-mockup-platform {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4285f4;
  background: rgba(66, 133, 244, 0.1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  width: fit-content;
}

.review-mockup-platform--yelp {
  color: #d32323;
  background: rgba(211, 35, 35, 0.1);
}

/* Review Header */
.review-mockup-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Avatar */
.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.review-avatar--negative {
  background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
  color: #7f1d1d;
}

.review-avatar--positive {
  background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
  color: #14532d;
}

/* Review Meta */
.review-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-author {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* Star Ratings */
.review-stars {
  font-size: var(--text-base);
  letter-spacing: 1px;
}

.review-stars--2 {
  color: #f59e0b;
}

.review-stars--5 {
  color: #f59e0b;
}

/* Review Text */
.review-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  font-style: italic;
  padding-left: var(--space-4);
  border-left: 3px solid var(--border-light);
}

/* AI Response Section */
.review-response {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border-left: 3px solid var(--primary);
}

.review-response-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.review-response-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  background: rgba(5, 150, 105, 0.15);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.review-response-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2);
}

.review-response-author {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
}

/* Outcome Badge */
.review-outcome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
}

.review-outcome--recovered {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
}

.review-outcome--referral {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
}

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

/* ---- DentGPT + Team Help Section ---- */
.dentgpt-help-section {
  padding: var(--space-20) 0;
}

.dentgpt-help-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .dentgpt-help-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.team-help-box {
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-top: var(--space-6);
}

.team-help-box p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.team-help-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--primary);
}

.team-help-link:hover {
  text-decoration: underline;
}

/* ---- DentGPT + Team Help CTA ---- */
/* DentGPT Platform Icons */
.dentgpt-platforms {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.platform-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-warm);
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.platform-icon:hover {
  background: var(--primary);
  color: white;
}

.platform-icon svg {
  width: 20px;
  height: 20px;
}

.dentgpt-help-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.dentgpt-help-link {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 200ms ease;
}

.dentgpt-help-link:hover {
  color: var(--primary);
}

.dentgpt-help-note {
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-6);
}

.dentgpt-help-note p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ============================================
   SERVICE PAGES
   ============================================ */

/* Breadcrumb Navigation */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--brand-primary);
}

.breadcrumb span {
  color: var(--text-muted);
}

/* Section Badge Variants */
.section-badge.emerald {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.section-badge.inverse {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-inverse);
}

.section-badge.purple {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}

/* Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.feature-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
}

.feature-card:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
}

.feature-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--text-primary);
}

.feature-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Feature Icon */
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-warm);
  color: var(--text-secondary);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature-icon.emerald {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.feature-icon.purple {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}

.feature-icon.blue {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

/* Timeline */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}

@media (min-width: 768px) {
  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

.timeline-item {
  position: relative;
  padding-left: 60px;
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .timeline-item {
    padding-left: 0;
    padding-right: 0;
  }

  .timeline-item:nth-child(odd) {
    padding-right: calc(50% + 40px);
    text-align: right;
  }

  .timeline-item:nth-child(even) {
    padding-left: calc(50% + 40px);
  }
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: 12px;
  top: 0;
  width: 24px;
  height: 24px;
  background: var(--brand-primary);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  z-index: 1;
}

@media (min-width: 768px) {
  .timeline-marker {
    left: 50%;
    transform: translateX(-50%);
  }
}

.timeline-content {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  border: 1px solid var(--border-light);
}

.timeline-header {
  margin-bottom: var(--space-3);
}

.timeline-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-primary);
  margin-bottom: var(--space-1);
}

.timeline-header h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.timeline-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

.timeline-tasks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .timeline-item:nth-child(odd) .timeline-tasks {
    align-items: flex-end;
  }
}

.timeline-tasks li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.timeline-tasks li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--brand-primary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* CTA Card */
.cta-card {
  background: var(--bg-warm);
  border-radius: var(--radius-2xl);
  padding: var(--space-12);
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

/* FAQ Trigger (Alpine-compatible) */
.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-8);  /* Added horizontal padding */
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

.faq-trigger:hover {
  color: var(--brand-primary);
}

.faq-trigger svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition-normal);
}

.faq-trigger svg.rotate-180 {
  transform: rotate(180deg);
}

.faq-content {
  padding: 0 var(--space-8) var(--space-5);  /* Added horizontal padding */
}

.faq-content p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Stat Highlight */
.stat-highlight {
  padding: var(--space-4);
}

/* =========================================
   Reputation Page Components
   ========================================= */

/* Stats Row */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.stat-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Section Badge Variants */
.section-badge.yellow {
  background: rgba(234, 179, 8, 0.1);
  color: #ca8a04;
}

.section-badge.red {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* Comparison Grid */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

.comparison-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 2px solid var(--border-light);
}

.comparison-card--positive {
  background: #f0fdf4;
  border-color: #86efac;
}

.comparison-card--neutral {
  background: #fefce8;
  border-color: #fde047;
}

.comparison-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-light);
}

.comparison-card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 700;
}

.comparison-card__rating .icon {
  width: 28px;
  height: 28px;
}

.comparison-card__count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.comparison-card__reviews {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.comparison-card__reviews p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  padding-left: var(--space-3);
  position: relative;
}

.comparison-card--positive .comparison-card__reviews p {
  color: #166534;
}

.comparison-card--neutral .comparison-card__reviews p {
  color: #854d0e;
}

/* Highlight Box */
.highlight-box {
  background: var(--bg-muted);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 800px;
  margin: 0 auto;
}

.highlight-box--centered {
  text-align: center;
}

.highlight-box__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-3) 0;
}

.highlight-box__text {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.7;
}

/* Psychology Grid */
.psychology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  max-width: 1000px;
  margin: 0 auto;
}

.psychology-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.psychology-card--full {
  grid-column: 1 / -1;
}

.psychology-card__icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.psychology-card__icon .icon {
  width: 24px;
  height: 24px;
  color: var(--text-inverse);
}

.psychology-card__icon--warning .icon {
  color: #fbbf24;
}

.psychology-card__icon--insight .icon {
  color: #60a5fa;
}

.psychology-card h3 {
  color: var(--text-inverse);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-3) 0;
}

.psychology-card__quote {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-sm);
  font-style: italic;
  margin: 0 0 var(--space-3) 0;
  line-height: 1.6;
}

.psychology-card__result {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-sm);
  margin: 0;
}

.psychology-card__insight {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-base);
  margin: var(--space-4) 0 0 0;
  line-height: 1.6;
}

/* Response Demo */
.response-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
}

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

.response-demo__card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 2px solid var(--border-light);
}

.response-demo__card--positive {
  border-color: #86efac;
}

.response-demo__card--neutral {
  border-color: #fde047;
}

.response-demo__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.response-demo__badge {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.response-demo__badge--positive {
  background: #dcfce7;
  color: #166534;
}

.response-demo__badge--neutral {
  background: #fef9c3;
  color: #854d0e;
}

.response-demo__stars {
  display: flex;
  gap: 2px;
}

.response-demo__stars .icon-star {
  width: 16px;
  height: 16px;
  color: #eab308;
}

.response-demo__stars .icon-star--empty {
  color: #d1d5db;
}

.response-demo__review,
.response-demo__response {
  margin-bottom: var(--space-4);
}

.response-demo__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2) 0;
}

.response-demo__review blockquote,
.response-demo__response blockquote {
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin: 0;
  padding: var(--space-3);
  background: var(--bg-muted);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--brand-primary);
  line-height: 1.6;
}

.response-demo__card--positive .response-demo__response blockquote {
  border-left-color: #22c55e;
}

.response-demo__card--neutral .response-demo__response blockquote {
  border-left-color: #eab308;
}

.response-demo__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--brand-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  margin: var(--space-4) 0;
}

.response-demo__arrow .icon {
  width: 20px;
  height: 20px;
}

.response-demo__time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.response-demo__time .icon {
  width: 14px;
  height: 14px;
}

/* Free Features */
.free-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}

.free-feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-inverse);
  font-size: var(--text-base);
}

.free-feature .icon {
  width: 20px;
  height: 20px;
  color: #86efac;
}

/* Text Gradient Warm */
.text-gradient-warm {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Text Gradient Emerald */
.text-gradient-emerald {
  background: linear-gradient(135deg, #047857, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* CTA Card Large Variant */
.cta-card--large {
  padding: var(--space-16);
}

.cta-card--large h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.cta-card--large p {
  font-size: var(--text-lg);
  max-width: 600px;
  margin: 0 auto var(--space-8);
}

.cta-card__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* Feature Card Stats */
.feature-card__stat {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-primary);
  margin: var(--space-1) 0 var(--space-2);
}

/* Feature Icon Red Variant */
.feature-icon.red {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* =========================================
   Advertising Page Components
   ========================================= */

/* Section Badge Purple Variant */
.section-badge.purple {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
}

/* Text Gradient Purple */
.text-gradient-purple {
  background: linear-gradient(135deg, #9333ea, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* DIY Features Grid */
.diy-feature-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
}

.diy-feature-card {
  display: flex;
  gap: var(--space-6);
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 1px solid var(--border-light);
}

.diy-feature-card__number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--brand-primary);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 700;
}

.diy-feature-card__content h3 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.diy-feature-card__content p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.diy-feature-card__example {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-muted);
  border-radius: var(--radius-lg);
}

.diy-feature-card__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.diy-feature-card__example p {
  font-style: italic;
  color: var(--text-primary);
}

/* Philosophy Card */
.philosophy-card {
  display: flex;
  gap: var(--space-6);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(59, 130, 246, 0.05));
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: 1px solid rgba(16, 185, 129, 0.2);
  max-width: 900px;
  margin: 0 auto;
}

.philosophy-card__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--brand-primary);
  color: white;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.philosophy-card__icon .icon {
  width: 32px;
  height: 32px;
}

.philosophy-card__content h3 {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-xl);
  font-weight: 700;
}

.philosophy-card__content blockquote {
  font-size: var(--text-base);
  color: var(--text-secondary);
  font-style: italic;
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--brand-primary);
  line-height: 1.7;
}

.philosophy-card__emphasis {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

@media (max-width: 640px) {
  .philosophy-card {
    flex-direction: column;
    text-align: center;
  }

  .philosophy-card__icon {
    margin: 0 auto;
  }

  .philosophy-card__content blockquote {
    border-left: none;
    padding-left: 0;
  }
}

/* Story Card */
.story-card {
  background: var(--bg-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: 1px solid var(--border-light);
  max-width: 900px;
  margin: 0 auto;
}

.story-card__narrative {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

.story-card__narrative p {
  margin: 0;
}

.story-card__insight {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.05), rgba(236, 72, 153, 0.05));
  border-radius: var(--radius-lg);
  margin-top: var(--space-6);
}

.story-card__insight .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #9333ea;
}

.story-card__insight p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.6;
}

/* Story Timeline */
.story-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.story-timeline__item {
  background: var(--bg-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
}

.story-timeline__item--highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.story-timeline__time {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #9333ea;
  margin-bottom: var(--space-2);
}

.story-timeline__content h4 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.story-timeline__content p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Auction Demo */
.auction-demo__formula {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
  font-weight: 600;
}

.auction-demo__formula-part {
  padding: var(--space-2) var(--space-4);
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.auction-demo__formula-operator {
  color: var(--text-secondary);
}

.auction-demo__formula-result {
  padding: var(--space-2) var(--space-4);
  background: var(--brand-primary);
  color: white;
  border-radius: var(--radius-lg);
}

/* Auction Table */
.auction-table-wrapper {
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

.auction-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.auction-table th,
.auction-table td {
  padding: var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}

.auction-table th {
  background: var(--bg-muted);
  font-weight: 600;
  font-size: var(--text-sm);
}

.auction-table th:first-child,
.auction-table td:first-child {
  text-align: left;
}

.auction-table__winner {
  background: rgba(16, 185, 129, 0.05);
}

.auction-table__quality {
  font-weight: 600;
}

.auction-table__quality--high {
  color: #059669;
}

.auction-table__quality--medium {
  color: #d97706;
}

.auction-table__quality--low {
  color: #dc2626;
}

.badge-position {
  display: inline-flex;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.badge-position--first {
  background: var(--brand-primary);
  color: white;
}

/* Comparison Card Variants */
.comparison-card--search .comparison-card__header--blue {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05));
  border-bottom: 2px solid rgba(59, 130, 246, 0.3);
  padding: var(--space-4);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.comparison-card--social .comparison-card__header--purple {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(236, 72, 153, 0.05));
  border-bottom: 2px solid rgba(147, 51, 234, 0.3);
  padding: var(--space-4);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.comparison-card__header h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.comparison-card__intent {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.comparison-card__body {
  padding: var(--space-4);
}

.comparison-card__detail {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
}

.comparison-card__detail:last-of-type {
  border-bottom: none;
}

.comparison-card__label {
  color: var(--text-secondary);
}

.comparison-card__example {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-muted);
  border-radius: var(--radius-lg);
}

.comparison-card__example code {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* Pro Tip */
.pro-tip {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(59, 130, 246, 0.05));
  border-radius: var(--radius-xl);
  border: 1px solid rgba(16, 185, 129, 0.2);
  max-width: 800px;
  margin: 0 auto;
}

.pro-tip .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--brand-primary);
}

.pro-tip p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.6;
}

/* ========================================
   ABOUT PAGE COMPONENTS
   ======================================== */

/* About Hero */
.about-hero {
  text-align: center;
}

.about-hero__content {
  max-width: 700px;
  margin: 0 auto;
}

/* Founder Story */
.founder-story {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 900px) {
  .founder-story {
    grid-template-columns: 1fr;
  }
}

.founder-story__narrative {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.story-block {
  position: relative;
}

.story-block__label {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: rgba(5, 150, 105, 0.1);
  color: var(--brand-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.story-block h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.story-block p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.story-block p:last-child {
  margin-bottom: 0;
}

/* Founder Quotes */
.founder-story__quotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: 120px;
}

.founder-quote {
  padding: var(--space-6);
  background: var(--bg-muted);
  border-radius: var(--radius-2xl);
  border-left: 4px solid var(--brand-primary);
  margin: 0;
}

.founder-quote p {
  font-size: var(--text-base);
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.founder-quote--emphasis {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.05), rgba(16, 185, 129, 0.02));
  border-left-color: var(--brand-primary);
}

.founder-quote--emphasis p {
  font-weight: 500;
  color: var(--text-primary);
}

/* Tools Comparison */
.tools-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .tools-comparison {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.tools-comparison__column {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}

.tools-comparison__column h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: white;
  margin-bottom: var(--space-4);
  text-align: center;
}

.tools-comparison__column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tools-comparison__column li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
}

.tools-comparison__column--dso li::before {
  content: '✓';
  color: var(--brand-primary);
  font-weight: 700;
}

.tools-comparison__column--indie li::before {
  content: '✗';
  color: #ef4444;
  font-weight: 700;
}

.tools-comparison__vs {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tools-comparison__vs span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .tools-comparison__vs {
    display: none;
  }
}

/* Problem Statement */
.problem-statement {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.problem-statement p {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0;
}

/* Mission Content */
.mission-content {
  max-width: 900px;
  margin: 0 auto;
}

.mission-statement {
  margin-bottom: var(--space-10);
}

.mission-quote {
  padding: var(--space-8);
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
  margin: 0;
}

.mission-quote p {
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

/* Mission Pillars */
.mission-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .mission-pillars {
    grid-template-columns: 1fr;
  }
}

.mission-pillar {
  text-align: center;
  padding: var(--space-6);
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}

.mission-pillar__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background: rgba(5, 150, 105, 0.1);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.mission-pillar__icon .icon {
  width: 32px;
  height: 32px;
}

.mission-pillar h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.mission-pillar p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Philosophy Content */
.philosophy-content {
  max-width: 900px;
  margin: 0 auto;
}

.wisdom-quote {
  padding: var(--space-8);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.05), rgba(16, 185, 129, 0.02));
  border-radius: var(--radius-2xl);
  text-align: center;
  margin: 0 0 var(--space-10);
  border: 1px solid rgba(5, 150, 105, 0.1);
}

.wisdom-quote p {
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

.wisdom-quote cite {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: normal;
}

/* Philosophy Grid */
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

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

.philosophy-card {
  padding: var(--space-6);
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

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

.philosophy-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.philosophy-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Impact Stats */
.impact-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .impact-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.impact-stat {
  text-align: center;
  padding: var(--space-6);
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}

.impact-stat__number {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}

.impact-stat__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ========================================
   BRANDING PAGE COMPONENTS
   ======================================== */

/* Impressions Stats */
.impressions-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .impressions-stats {
    grid-template-columns: 1fr;
  }
}

.stat-card--large {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.stat-card__number {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--brand-primary);
  line-height: 1;
}

.stat-card__unit {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--brand-primary);
}

.stat-card__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  line-height: 1.5;
}

/* Website Showcase */
.website-showcase {
  max-width: 900px;
  margin: 0 auto;
}

.website-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (max-width: 768px) {
  .website-comparison {
    grid-template-columns: 1fr;
  }
}

.website-comparison__before,
.website-comparison__after {
  text-align: center;
}

.website-comparison__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.website-comparison__arrow .icon {
  width: 32px;
  height: 32px;
  color: var(--brand-primary);
}

@media (max-width: 768px) {
  .website-comparison__arrow {
    transform: rotate(90deg);
  }
}

.comparison-label {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.comparison-label--before {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.comparison-label--after {
  background: rgba(16, 185, 129, 0.1);
  color: var(--brand-primary);
}

/* Website Mockups */
.website-mockup {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.mockup-browser-bar {
  display: flex;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-light);
}

.mockup-browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-color);
}

.mockup-content {
  padding: var(--space-4);
  min-height: 200px;
}

.mockup-content--old {
  background: #f8fafc;
}

.mockup-content--new {
  background: linear-gradient(135deg, #faf9f7, #f5f1eb);
}

.mockup-header-old {
  height: 24px;
  background: #e2e8f0;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.mockup-header-new {
  height: 24px;
  background: linear-gradient(90deg, var(--brand-primary), #10b981);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.mockup-hero-old {
  height: 80px;
  background: #cbd5e1;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.mockup-hero-new {
  height: 80px;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.2), rgba(16, 185, 129, 0.1));
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

.mockup-grid-old,
.mockup-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.mockup-grid-old div {
  height: 40px;
  background: #e2e8f0;
  border-radius: var(--radius-sm);
}

.mockup-grid-new div {
  height: 40px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.comparison-issues,
.comparison-benefits {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  text-align: left;
}

.comparison-issues li,
.comparison-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
}

.comparison-issues li::before {
  content: '✗';
  color: #ef4444;
  font-weight: 700;
}

.comparison-benefits li::before {
  content: '✓';
  color: var(--brand-primary);
  font-weight: 700;
}

/* Website Features */
.website-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .website-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.website-feature {
  text-align: center;
}

.website-feature__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.website-feature__icon .icon {
  width: 28px;
  height: 28px;
}

.website-feature h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.website-feature p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Brand Elements */
.brand-elements {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .brand-elements {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .brand-elements {
    grid-template-columns: 1fr;
  }
}

.brand-element {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: all 0.3s ease;
}

.brand-element:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.brand-element__visual {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

/* Logo Evolution */
.logo-evolution {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.logo-old {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-lg);
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}

.logo-new {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-primary), #10b981);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: white;
  font-weight: 600;
}

.logo-evolution .icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

/* Color Palette */
.color-palette {
  display: flex;
  gap: var(--space-2);
}

.color-swatch {
  width: 40px;
  height: 60px;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Typography Sample */
.type-sample {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.type-headline {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
}

.type-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Voice Example */
.voice-example {
  padding: var(--space-4);
  background: var(--bg-muted);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--brand-primary);
}

.voice-example span {
  font-style: italic;
  color: var(--text-secondary);
}

.brand-element h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.brand-element p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Design Process */
.design-process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .design-process {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .design-process {
    grid-template-columns: 1fr;
  }
}

.design-step {
  text-align: center;
}

.design-step__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: 700;
  color: white;
  margin: 0 auto var(--space-4);
}

.design-step__content h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: white;
  margin-bottom: var(--space-2);
}

.design-step__content p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
}

/* Value Grid */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.value-card {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  text-align: center;
  transition: all 0.3s ease;
}

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

.value-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: rgba(5, 150, 105, 0.1);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.value-card__icon .icon {
  width: 28px;
  height: 28px;
}

.value-card h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.value-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ========================================
   INTELLIGENCE REPORTS PAGE COMPONENTS
   ======================================== */

/* Premium Badge & Gradient */
.section-badge.premium {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
}

.text-gradient-premium {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Consultant Comparison Cards */
.consultant-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .consultant-comparison {
    grid-template-columns: 1fr;
  }
}

.consultant-card {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  position: relative;
}

.consultant-card--traditional {
  background: var(--bg-muted);
  border: 1px solid var(--border-light);
}

.consultant-card--dentplicity {
  background: white;
  border: 2px solid var(--brand-primary);
  box-shadow: 0 8px 32px rgba(5, 150, 105, 0.2);
}

.consultant-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--brand-primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 var(--radius-2xl) 0 var(--radius-lg);
  font-size: var(--text-xs);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.consultant-card__badge .icon {
  width: 14px;
  height: 14px;
}

.consultant-card__header {
  padding: var(--space-6);
  text-align: center;
}

.consultant-card--traditional .consultant-card__header {
  background: rgba(0, 0, 0, 0.03);
}

.consultant-card--dentplicity .consultant-card__header {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.05), rgba(16, 185, 129, 0.02));
}

.consultant-card__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--space-2);
}

.consultant-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
}

.price-note {
  width: 100%;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.price-dollar {
  font-size: var(--text-2xl);
  font-weight: 700;
}

.price-amount {
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1;
}

.consultant-card--traditional .price-amount {
  color: var(--text-secondary);
}

.consultant-card--dentplicity .price-amount {
  color: var(--brand-primary);
}

.price-suffix {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-secondary);
}

.consultant-card__body {
  padding: var(--space-6);
}

.consultant-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.consultant-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-sm);
}

.consultant-card__features li:last-child {
  border-bottom: none;
}

.consultant-card__features li .icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.consultant-card--traditional .consultant-card__features li .icon {
  color: #ef4444;
}

.consultant-card--dentplicity .consultant-card__features li .icon {
  color: var(--brand-primary);
}

/* Report Preview Section */
.report-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .report-preview {
    grid-template-columns: 1fr;
  }
}

/* Report Cover Mockup */
.report-cover {
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.report-cover__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--brand-primary), #047857);
  color: white;
}

.report-cover__logo {
  font-weight: 700;
  font-size: var(--text-lg);
}

.report-cover__badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
}

.report-cover__title {
  padding: var(--space-6);
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}

.report-cover__title h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.report-cover__title p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: var(--space-1) 0;
}

.report-cover__toc {
  padding: var(--space-5);
}

.report-cover__toc h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.report-cover__toc ol {
  margin: 0;
  padding-left: var(--space-5);
}

.report-cover__toc li {
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border-light);
}

.report-cover__toc li:last-child {
  border-bottom: none;
}

/* Report Section Cards */
.report-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .report-sections {
    grid-template-columns: 1fr;
  }
}

.report-section-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

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

.report-section-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: rgba(5, 150, 105, 0.1);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.report-section-card__icon .icon {
  width: 24px;
  height: 24px;
}

.report-section-card h4 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.report-section-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* Insights Showcase */
.insights-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
}

.insight-example {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.insight-example__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-light);
}

.insight-example__category {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-primary);
}

.insight-example__source {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.insight-example__content {
  padding: var(--space-5);
}

.insight-example__content h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.insight-example__content p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.insight-example__content strong {
  color: var(--brand-primary);
}

/* Process Timeline */
.process-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .process-timeline {
    grid-template-columns: 1fr;
  }
}

.process-step {
  text-align: center;
}

.process-step__number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  margin: 0 auto var(--space-4);
}

.process-step__content h4 {
  font-size: var(--text-base);
  font-weight: 600;
  color: white;
  margin-bottom: var(--space-2);
}

.process-step__content p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
}

/* Free vs Premium Tier Cards */
.free-vs-premium {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .free-vs-premium {
    grid-template-columns: 1fr;
  }
}

.tier-card {
  background: white;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.tier-card--premium {
  border: 2px solid var(--brand-primary);
  box-shadow: 0 8px 32px rgba(5, 150, 105, 0.2);
  transform: scale(1.02);
}

.tier-card__header {
  padding: var(--space-6);
  text-align: center;
}

.tier-card__header--free {
  background: var(--bg-muted);
}

.tier-card__header--premium {
  background: linear-gradient(135deg, var(--brand-primary), #047857);
  color: white;
}

.tier-card__header h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.tier-card__price {
  font-size: var(--text-2xl);
  font-weight: 800;
}

.tier-card__header--premium .tier-card__price {
  color: white;
}

.tier-card__body {
  padding: var(--space-6);
}

.tier-card__body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tier-card__body li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.tier-card__body li .icon {
  width: 18px;
  height: 18px;
  color: var(--brand-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ========================================
   SPECIALISTS PAGE COMPONENTS
   ======================================== */

/* Text Gradient for Specialist */
.text-gradient-specialist {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Specialty Grid */
.specialty-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .specialty-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Specialty Card Base */
.specialty-card {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.specialty-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

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

.specialty-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.specialty-card__icon .icon {
  width: 28px;
  height: 28px;
}

.specialty-card h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.specialty-card > p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.specialty-card__highlights {
  list-style: none;
  padding: 0;
  margin: 0;
}

.specialty-card__highlights li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-light);
}

.specialty-card__highlights li::before {
  content: '→';
  color: inherit;
  font-weight: 600;
  flex-shrink: 0;
}

/* Specialty Card Variants - Oral Surgery (Red) */
.specialty-card--surgery::before {
  background: linear-gradient(90deg, #dc2626, #b91c1c);
}

.specialty-card--surgery .specialty-card__icon {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.specialty-card--surgery:hover {
  border-color: rgba(220, 38, 38, 0.3);
}

.specialty-card--surgery .specialty-card__highlights li::before {
  color: #dc2626;
}

/* Specialty Card Variants - Orthodontics (Blue) */
.specialty-card--ortho::before {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.specialty-card--ortho .specialty-card__icon {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.specialty-card--ortho:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

.specialty-card--ortho .specialty-card__highlights li::before {
  color: #3b82f6;
}

/* Specialty Card Variants - Periodontics (Emerald) */
.specialty-card--perio::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

.specialty-card--perio .specialty-card__icon {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.specialty-card--perio:hover {
  border-color: rgba(16, 185, 129, 0.3);
}

.specialty-card--perio .specialty-card__highlights li::before {
  color: #10b981;
}

/* Specialty Card Variants - Endodontics (Purple) */
.specialty-card--endo::before {
  background: linear-gradient(90deg, #9333ea, #7c3aed);
}

.specialty-card--endo .specialty-card__icon {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
}

.specialty-card--endo:hover {
  border-color: rgba(147, 51, 234, 0.3);
}

.specialty-card--endo .specialty-card__highlights li::before {
  color: #9333ea;
}

/* Network Demo Container */
.network-demo {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (max-width: 900px) {
  .network-demo {
    grid-template-columns: 1fr;
  }
}

/* Network Map Visualization */
.network-map {
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  position: relative;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.network-map__center {
  position: relative;
  z-index: 2;
}

.network-map__you {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), #047857);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: var(--text-sm);
  text-align: center;
  box-shadow: 0 8px 32px rgba(5, 150, 105, 0.4);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(5, 150, 105, 0.4);
  }
  50% {
    box-shadow: 0 8px 48px rgba(5, 150, 105, 0.6);
  }
}

.network-map__connections {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
}

.network-map__gp {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.network-map__gp:nth-child(1) { top: 10%; left: 5%; }
.network-map__gp:nth-child(2) { top: 5%; right: 15%; }
.network-map__gp:nth-child(3) { bottom: 30%; right: 5%; }
.network-map__gp:nth-child(4) { bottom: 10%; left: 20%; }
.network-map__gp:nth-child(5) { bottom: 15%; right: 25%; }

.network-map__gp--active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
  border: 2px solid rgba(59, 130, 246, 0.5);
}

.network-map__gp--opportunity {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
  border: 2px dashed rgba(251, 191, 36, 0.7);
}

.network-map__gp:hover {
  transform: scale(1.1);
}

.network-map__gp-count {
  font-size: var(--text-xl);
  font-weight: 700;
}

.network-map__gp--active .network-map__gp-count {
  color: #3b82f6;
}

.network-map__gp--opportunity .network-map__gp-count {
  color: #f59e0b;
}

.network-map__gp-name {
  font-size: 9px;
  text-align: center;
  color: var(--text-secondary);
  margin-top: var(--space-1);
  max-width: 80px;
  line-height: 1.2;
}

/* Network Insights Panel */
.network-insights {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.network-insight {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.network-insight:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-lg);
}

.network-insight__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.network-insight__icon .icon {
  width: 24px;
  height: 24px;
}

.network-insight__icon--active {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.network-insight__icon--opportunity {
  background: rgba(251, 191, 36, 0.1);
  color: #f59e0b;
}

.network-insight__content h4 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.network-insight__content p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Thought Leadership Grid */
.thought-leadership-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .thought-leadership-grid {
    grid-template-columns: 1fr;
  }
}

.thought-card {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

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

.thought-card__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), #047857);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: 700;
  flex-shrink: 0;
}

.thought-card__content h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.thought-card__content p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Relationship Features */
.relationship-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

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

.relationship-feature {
  text-align: center;
  padding: var(--space-6);
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

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

.relationship-feature__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background: rgba(5, 150, 105, 0.1);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.relationship-feature__icon .icon {
  width: 32px;
  height: 32px;
}

.relationship-feature h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.relationship-feature p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }

  .feature-tab-btn.is-active .tab-progress span {
    animation: none;
    width: 100%;
  }

  .testimonial-swiper .swiper-slide {
    transition: none;
  }

  .network-map__you {
    animation: none;
  }
}

/* ========================================
   SERVICES INDEX PAGE
   ======================================== */

/* Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.services-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .services-grid,
  .services-grid--two {
    grid-template-columns: 1fr;
  }
}

/* Service Card */
.service-card {
  display: block;
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  position: relative;
}

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

.service-card--featured {
  border: 2px solid var(--brand-primary);
}

.service-card__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--brand-primary);
  color: white;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.service-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: rgba(5, 150, 105, 0.1);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.service-card__icon svg {
  width: 28px;
  height: 28px;
}

.service-card__icon--marketing {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.service-card__icon--design {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
}

.service-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.service-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.service-card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand-primary);
}

.service-card:hover .service-card__link {
  text-decoration: underline;
}

/* Specialist Callout */
.specialist-callout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  background: var(--bg-warm);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
}

@media (max-width: 768px) {
  .specialist-callout {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-8);
  }
}

.specialist-callout__content .section-title {
  margin-top: var(--space-3);
}

.specialist-callout__content .body-large {
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

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

.specialist-badge {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  text-align: center;
  font-weight: 600;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}

/* CTA Band Split */
.cta-band-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

@media (max-width: 768px) {
  .cta-band-split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.cta-band__testimonial blockquote {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  margin: 0;
}

.cta-band__testimonial p {
  font-size: var(--text-lg);
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

.cta-band__testimonial cite {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
  margin-bottom: var(--space-2);
}

.testimonial-stars {
  color: #fbbf24;
  font-size: var(--text-base);
  letter-spacing: 2px;
}

/* Related Services Grid */
.related-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .related-services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.related-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: white;
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}

.related-service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-primary);
}

.related-service-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  background: rgba(5, 150, 105, 0.1);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.related-service-icon svg {
  width: 24px;
  height: 24px;
}

.related-service-card h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.related-service-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   DASHBOARD COMPONENTS
   ExpandableMetricCard - Matches Next.js dentplicity_revamp component
   ========================================================================== */

/* Base Card Styles */
.expandable-card {
  background: white;
  border-radius: var(--radius-2xl, 24px);
  padding: var(--space-6, 1.5rem);
  box-shadow: var(--shadow-card, 0 4px 24px -4px rgba(0, 0, 0, 0.08));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.expandable-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover, 0 8px 32px -4px rgba(0, 0, 0, 0.12));
}

/* Card Header with Icon */
.expandable-card .card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-4, 1rem);
}

.expandable-card .card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg, 12px);
  background: rgba(5, 150, 105, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary, #059669);
  flex-shrink: 0;
}

.expandable-card .card-icon svg {
  width: 20px;
  height: 20px;
}

/* Label - Uppercase small text */
.expandable-card .card-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
}

/* Primary Value - Large KPI Number */
.expandable-card .card-value {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
}

.expandable-card .primary-value {
  font-size: var(--text-5xl, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary, #0f172a);
  font-family: var(--font-display, 'Inter', system-ui, sans-serif);
  letter-spacing: -0.02em;
}

.expandable-card .suffix {
  font-size: var(--text-xl, 1.25rem);
  font-weight: 500;
  color: var(--text-muted, #64748b);
}

/* Context Text */
.expandable-card .card-context {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-muted, #64748b);
  margin-top: var(--space-2, 0.5rem);
  line-height: 1.5;
}

/* Expand Toggle Button */
.expandable-card .expand-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--primary, #059669);
  margin-top: var(--space-4, 1rem);
  padding: var(--space-2, 0.5rem) 0;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.2s;
}

.expandable-card .expand-toggle:hover {
  color: var(--primary-hover, #047857);
}

.expandable-card .expand-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.expandable-card .expand-toggle svg.rotate-180 {
  transform: rotate(180deg);
}

/* Detail Content (expandable) */
.expandable-card .card-detail {
  margin-top: var(--space-4, 1rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--border, #e2e8f0);
}

/* Theme Variants */
.expandable-card--general .primary-value,
.expandable-card--general .card-icon {
  color: var(--primary, #059669);
}

.expandable-card--general .card-icon {
  background: rgba(5, 150, 105, 0.1);
}

.expandable-card--specialist .primary-value,
.expandable-card--specialist .card-icon {
  color: #7c3aed;
}

.expandable-card--specialist .card-icon {
  background: rgba(124, 58, 237, 0.1);
}

.expandable-card--neutral .primary-value,
.expandable-card--neutral .card-icon {
  color: #475569;
}

.expandable-card--neutral .card-icon {
  background: rgba(71, 85, 105, 0.1);
}

/* Snippet Integration (optional speech bubble) */
.expandable-card .card-snippet {
  margin-top: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--bg-warm, #faf9f7);
  border-radius: var(--radius-lg, 12px);
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #334155);
  font-style: italic;
  position: relative;
}

.expandable-card .card-snippet::before {
  content: '"';
  font-size: 1.5rem;
  color: var(--primary, #059669);
  opacity: 0.5;
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
}

/* Dashboard Card Grid */
.dashboard-card-grid {
  display: grid;
  gap: var(--space-6, 1.5rem);
}

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

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

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

/* Responsive Dashboard Grid */
@media (max-width: 1280px) {
  .dashboard-card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .dashboard-card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-card-grid--2,
  .dashboard-card-grid--3,
  .dashboard-card-grid--4 {
    grid-template-columns: 1fr;
  }

  .expandable-card .primary-value {
    font-size: var(--text-4xl, 2.25rem);
  }
}

/* Dashboard Section Header */
.dashboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6, 1.5rem);
}

.dashboard-section-title {
  font-size: var(--text-xl, 1.25rem);
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  margin: 0;
}

.dashboard-section-subtitle {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-muted, #64748b);
  margin: var(--space-1, 0.25rem) 0 0 0;
}

/* Dashboard Stat Card (simpler variant) */
.stat-card {
  background: white;
  border-radius: var(--radius-2xl, 24px);
  padding: var(--space-5, 1.25rem);
  box-shadow: var(--shadow-card, 0 4px 24px -4px rgba(0, 0, 0, 0.08));
}

.stat-card .stat-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
  margin-bottom: var(--space-2, 0.5rem);
}

.stat-card .stat-value {
  font-size: var(--text-3xl, 1.875rem);
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.2;
}

.stat-card .stat-change {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  margin-top: var(--space-1, 0.25rem);
}

.stat-card .stat-change--up {
  color: #059669;
}

.stat-card .stat-change--down {
  color: #dc2626;
}

.stat-card .stat-change--neutral {
  color: var(--text-muted, #64748b);
}

/* ========================================
   EDUCATIONAL MICRO-ELEMENTS
   Subtle education for landing page - Jan 11, 2026
   ======================================== */

/* Eyebrow Stats - Above sections to provide context */
.edu-eyebrow {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  font-style: italic;
  text-align: center;
}

.edu-eyebrow .edu-stat {
  color: var(--primary);
  font-weight: 600;
  font-style: normal;
}

/* Feature Panel Eyebrow - Smaller, positioned at top of panels */
.feature-panel-eyebrow {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.feature-panel-eyebrow .edu-stat {
  color: var(--primary);
  font-weight: 600;
  font-style: normal;
}

/* Context Sentences - Below headlines or sections */
.edu-context {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  opacity: 0.9;
  font-style: italic;
}

.edu-context strong {
  color: var(--text-primary);
  font-style: normal;
}

/* Hero context line - DSO cost comparison */
.hero-context-line {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-3);
  font-style: italic;
  letter-spacing: 0.01em;
}

.hero-context-line .edu-stat {
  color: var(--primary);
  font-weight: 600;
  font-style: normal;
}

/* Micro-stats row - For inline stats */
.edu-micro-stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
}

.edu-micro-stat::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
}

/* Tooltip styles for technical terms */
.edu-tooltip {
  cursor: help;
  border-bottom: 1px dotted var(--border-color);
  position: relative;
}

.edu-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: white;
  font-size: var(--text-xs);
  font-style: normal;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  z-index: 100;
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-2);
}

.edu-tooltip:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--text-primary);
  margin-bottom: calc(var(--space-2) - 6px);
  z-index: 101;
}

/* Feature micro-context - Under checklist items */
.feature-micro-context {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  font-style: italic;
  padding-left: 28px;  /* Align with text after checkmark */
}

/* Reviews section eyebrow styling */
.reviews-edu-eyebrow {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  font-style: italic;
}

.reviews-edu-eyebrow .edu-stat {
  color: var(--primary);
  font-weight: 600;
  font-style: normal;
}

/* Action section context */
.action-context {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  font-style: italic;
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Referral table tooltip headers */
.referral-network-table th.has-tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--border-color);
}

/* DSO subtitle */
.dso-tech-subtitle {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  font-style: italic;
}

.dso-tech-subtitle strong {
  color: var(--primary);
  font-style: normal;
}

/* Final CTA micro-context items */
.footer-cta-feature-context {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
  padding-left: 24px;
  font-style: italic;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .edu-eyebrow {
    font-size: var(--text-xs);
  }

  .feature-panel-eyebrow {
    font-size: 11px;
  }

  .edu-tooltip:hover::after {
    left: 0;
    transform: none;
    max-width: 200px;
  }

  .footer-cta-feature-context {
    font-size: 10px;
  }
}