/* Main Styles - Essential header, footer, and basic layout only */

/* Local Font Declarations */

/* Plus Jakarta Sans - Primary Font */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/PlusJakartaSans/static/PlusJakartaSans-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/PlusJakartaSans/static/PlusJakartaSans-Medium.ttf")
    format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/PlusJakartaSans/static/PlusJakartaSans-SemiBold.ttf")
    format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/PlusJakartaSans/static/PlusJakartaSans-Bold.ttf")
    format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Size-adjusted system font fallback to match Plus Jakarta Sans metrics */

@font-face {
  font-family: "Plus Jakarta Sans Fallback";
  src:
    local("system-ui"), local("-apple-system"), local("Segoe UI"),
    local("Roboto"), local("Helvetica Neue");
  size-adjust: 92%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* Design Tokens - Colors, Typography, Spacing */

:root {
  /* Colors - Design System */
  --color-graywarm-25: #fdfdfc;
  --color-graywarm-50: #fafaf9;
  --color-graywarm-100: #f5f5f4;
  --color-graywarm-200: #e7e5e4;
  --color-graywarm-400: #a9a29d;
  --color-graywarm-500: #79716b;
  --color-graywarm-800: #292524;

  /* Dark Surface Foundation Token */
  --color-dark-surface: #15161b;

  /* Semantic Dark Background Tokens */
  --color-background-dark: var(--color-gray-800);
  --color-card-background-dark: var(--color-dark-surface);

  /* Brand Colors */
  --color-accent-orange: #ffbb90;
  --color-accent-purple: #9b81f5;
  --color-accent-purple-light: #efedff;

  /* Brand System Colors */
  --color-brand-50: #f6f5ff;
  --color-brand-700: #5547c4;
  --color-success-400: #5cc978;
  --color-text-primary: #0d0e14;

  /* Button Colors */
  --color-button-primary-teal: var(--color-teal-400);
  --color-button-primary-teal-hover: var(--color-teal-500);
  --color-button-primary-black: var(--color-base-black);
  --color-button-primary-black-hover: var(--color-black);
  /* FIXME below looks out of date */
  --color-button-secondary: rgba(13, 14, 20, 0.03);
  --color-button-secondary-hover: rgba(13, 14, 20, 0.08);

  --color-gray-100: #f3f2f7;
  --color-gray-200: #ebeaf0;
  --color-gray-300: #d1d0dd;
  --color-gray-500: #6b6685;
  --color-gray-400: #9c98b3;
  --color-gray-600: #4a4767;
  --color-gray-700: #383454;
  --color-gray-800: #0d0e14;
  --color-gray-900: #141028;

  --color-teal-50: #f0fdf9;
  --color-teal-100: #ccfbef;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5fe9d0;
  --color-teal-400: #2ed3b7;
  --color-teal-500: #15b79e;
  --color-teal-600: #0f8679;
  --color-teal-700: #0d7068;
  --color-teal-800: #125d56;
  --color-teal-900: #134e48;

  --color-primary-50: #e9eff0;
  --color-primary-600: #1c4b55;

  --color-base-black: #1d1d1b;
  --color-base-white: #fff;
  --color-black: #000;

  /* Semantic Light Background Tokens */
  --color-background-light: var(--color-base-white);
  --color-background-light-subtle: var(--color-graywarm-25);
  --color-background-light-alternate: var(--color-graywarm-50);
  --color-background-light-card: var(--color-base-white);

  /* Semantic Card Tokens */
  --color-background-card-default: var(--color-graywarm-50);
  --color-background-card-hover: var(--color-graywarm-100);
  --color-border-card-hover: var(--color-graywarm-200);

  --color-heavy-metal: #1d1d1b;
  --color-heavy-metal-light: #60605f;

  --color-scheme-foreground: #f2f2f2;
  --color-scheme-border: #00000026;

  --color-opacity-white-10: #ffffff1a;

  /* Component specific colors */
  --color-surface-dark: var(
    --color-card-background-dark
  ); /* Dark theme surface color for cards/content */
  --color-error-fallback: #ff6b6b; /* Error state color for fallback components */

  /* Typography */
  --font-family-primary:
    "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  --font-family-secondary:
    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
    "Helvetica Neue", sans-serif;

  /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;
  --text-6xl: 56px;
  --text-7xl: 72px;

  /* Line Heights - All unitless for better scalability */
  --leading-xs: 1.1;
  --leading-sm: 1.43; /* 20px/14px = 1.43 - for small text */
  --leading-base: 1.5; /* 24px/16px = 1.5 - for body text */
  --leading-lg: 1.56; /* 28px/18px = 1.56 - for large text */
  --leading-xl: 1.5;
  --leading-2xl: 1.33; /* 32px/24px = 1.33 - for headings */
  --leading-3xl: 1.3;
  --leading-4xl: 1.2;
  --leading-5xl: 1.2;
  --leading-6xl: 1.2;
  --leading-7xl: 1.1;
  --leading-form: 1.15;
  --leading-normal: 1.5;
  --leading-tight: 1.43; /* Tight line-height for comparison table and small text */

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Letter Spacing */
  --tracking-normal: 0;
  --tracking-tight: -0.32px;
  --tracking-tighter: -0.48px;
  --tracking-tightest: -0.56px;
  --tracking-ultra-tight: -0.96px;
  --tracking-extra-tight: -1.2px;
  --tracking-mega-tight: -1.92px;
  --tracking-wide: 1.4px;

  /* 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-18-5: 4.625rem; /* 74px - for Figma stagger offset */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */
  --space-37: 9.25rem; /* 148px - for large Figma stagger offset */
  --space-40: 10rem; /* 160px */
  --space-48: 12rem; /* 192px */
  --space-56: 14rem; /* 224px */
  --space-64: 16rem; /* 256px */
  --space-80: 20rem; /* 320px */

  /* Longform TOC Configuration */
  --longform-toc-width: var(--space-80); /* 320px - TOC sidebar width */
  --longform-toc-content-top-margin: var(--space-16);
  --longform-toc-spacing: var(
    --space-10
  ); /* 40px - gap between content and TOC */

  /* Image aspect ratio spacing (1.22:1 ratio - Figma 104/85) */
  --space-66: 16.4rem; /* 262px - height for 320px width at 1.22:1 ratio */
  --space-52: 13.1rem; /* 210px - height for 256px width at 1.22:1 ratio */
  --space-39: 9.8rem; /* 157px - height for 192px width at 1.22:1 ratio */

  /* Additional spacing for specific components */
  --space-7-5: 1.875rem; /* 30px - for timeline and small element line-heights */
  --space-15: 3.75rem; /* 60px - for large element line-heights and spacing */
  --space-70: 17.5rem; /* 280px - for tooltip and help text min-widths */

  /* Featured Solutions Image Dimensions (from Figma) */
  --featured-solutions-image-height: 334px;
  --featured-solutions-image-max-width: 479px;

  /* Featured Solutions Card Responsive Widths */
  --featured-solutions-card-max-width-tablet: 850px;
  --featured-solutions-card-max-width-desktop: 1100px;
  --featured-solutions-card-max-width-large: 1200px;

  /* Featured Solutions Card Heights */
  --featured-solutions-card-min-height-tablet: 400px;
  --featured-solutions-card-min-height-desktop: 500px;

  /* Grid System */
  --grid-margin: 6.5rem; /* 104px - main content boundaries */
  --grid-margin-mobile: 1.5rem; /* 24px - mobile content boundaries */
  --grid-margin-tablet: 3rem; /* 48px - tablet boundaries */
  --grid-max-width: 1280px; /* Maximum content width */
  --grid-container-width: calc(
    var(--grid-max-width) + (var(--grid-margin) * 2)
  );

  /* Content max widths */
  --content-max-width-large: 52.5rem; /* 840px - for large content containers */

  /* Border Radius */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-2xl: 1.5rem; /* 24px */
  --radius-full: 9999px;

  /* Component specific measurements */
  --header-padding-y: 19px;
  --header-padding-x: 40px;
  --header-nav-spacing: 60px; /* 80px - space between logo and navigation menu */

  --stroke-width: 1px;
  --outline-width: 2px;
  --logo-width-max: 146px;
  --scrollbar-size: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-card:
    0 28px 20px -8px rgba(34, 34, 34, 0.25),
    0 20px 64px -8px rgba(48, 54, 60, 0.8);

  /* Container Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1360px;
  --container-3xl: 1440px;

  /* Hero Section Widths */
  --hero-headline-max-width: 896px;
  --hero-subheading-max-width: 730px;

  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* Breakpoints (for reference in CSS) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Mobile-first breakpoint */
  --breakpoint-mobile: 600px;

  /* Image Section Specific */
  --image-section-max-width: 880px;
  --invoice-overlay-width: 325px;
  --status-overlay-width: 253px;

  /* Product Showcase Specific */
  --product-showcase-title-max-width: 540px;
  --product-showcase-grid-min-height: 772px;
  --product-card-featured-padding: 33px;
  --product-card-icon-size: 32px;
  --product-card-arrow-width: 42px;
  --product-card-arrow-height: 35px;
  --product-card-arrow-icon-size: 10px;

  /* Product Card Layout Configuration */
  --product-card-content-text-width: 50%;
  --product-card-content-image-width: 50%;
  --product-card-content-gap: var(--space-4);
  --product-card-image-scale: 0.8;
  --product-card-featured-image-scale: 0.9;
  --product-card-featured-image-max-height: 400px;

  /* Alternative layout ratios (configurable) */
  --product-card-text-heavy-text-width: 60%;
  --product-card-text-heavy-image-width: 40%;
  --product-card-text-dominant-text-width: 70%;
  --product-card-text-dominant-image-width: 30%;

  /* Generic Link Card Section Specific */
  --generic-link-card-background: var(--color-background-dark);
  --generic-link-card-card-background: var(--color-card-background-dark);
  --generic-link-card-title-color: #fff;
  --generic-link-card-card-headline-color: #f2f2f2;
  --generic-link-card-card-description-color: rgba(255, 255, 255, 0.6);
  --generic-link-card-card-category-color: rgba(255, 255, 255, 0.4);
  --generic-link-card-hover-border: #accbee;
  --generic-link-card-card-border: rgba(255, 255, 255, 0.01);
  --generic-link-card-icon-background: rgba(255, 255, 255, 0.05);
  --generic-link-card-icon-border: rgba(255, 255, 255, 0.01);

  /* Generic Link Card Section Layout (typography tokens consolidated to semantic system) */

  /* Generic Link Card Section Layout */
  --generic-link-card-padding: var(--space-20) 0;
  --generic-link-card-header-gap: var(--space-10);
  --generic-link-card-grid-gap: var(--space-6);
  --generic-link-card-card-padding: var(--space-10);
  --generic-link-card-card-radius: var(--radius-xl);
  --generic-link-card-card-height: 448px;
  --generic-link-card-icon-size: 40px;

  --generic-link-card-title-max-width: 744px;

  /* How It Works Section */
  --how-it-works-max-width: 1280px;

  --how-it-works-subtitle-max-width: 520px;

  --how-it-works-video-max-width: 628px;
  --how-it-works-steps-max-width: 530px;

  --how-it-works-padding: var(--space-16) 0;
  --how-it-works-header-gap: var(--space-16);
  --how-it-works-main-gap: var(--space-4);
  --how-it-works-video-aspect-ratio: 16/9;
  --how-it-works-video-border-radius: var(--radius-xl);
  --how-it-works-steps-gap: var(--space-2);

  /* How It Works Colors */
  --color-step-number: #ffbb90;
  --how-it-works-card-background: var(--color-background-light-card);
  --how-it-works-card-border: #f3f2f7;
  --how-it-works-card-border-active: rgba(228, 228, 231, 0.5);
  --how-it-works-video-controls-bg: rgba(0, 0, 0, 0.25);
  --how-it-works-video-controls-opacity: 0.9;

  /* How It Works Layout (typography tokens consolidated to semantic system) */

  /* How It Works Spacing */
  --how-it-works-card-padding: 25px;
  --how-it-works-card-gap: var(--space-4);
  --how-it-works-step-content-gap: var(--space-2);
  --how-it-works-video-controls-size: 48px;
  --how-it-works-play-button-size: 24px;
  --how-it-works-video-min-height-mobile: 400px;
  --how-it-works-video-min-height-tablet: 300px;
  --how-it-works-video-min-height-desktop: 400px;

  /* Feature Callout (Compliance) Section */
  --feature-callout-background: #0d0e14;
  --feature-callout-text-color: var(--color-base-white);
  --feature-callout-padding-desktop: var(--space-20);
  --feature-callout-padding-mobile: var(--space-8);
  --feature-callout-border-radius: var(--radius-xl);
  --feature-callout-max-width: 1120px;
  --feature-callout-content-max-width: 576px;
  --feature-callout-body-max-width: 530px;
  --feature-callout-decoration-color: rgba(255, 255, 255, 0.25);
  --feature-callout-decoration-accent: #ecfc39;

  /* Timeline connection opacity */
  --timeline-connection-opacity: 0.15;

  /* Feature Callout Layout (typography tokens consolidated to semantic system) */

  /* Feature Callout Layout */
  --feature-callout-content-gap: var(--space-5);
  --feature-callout-section-padding: var(--space-20) 0;
  --feature-callout-content-min-height-desktop: var(--space-64);
  --feature-callout-content-min-height-mobile: var(--space-48);

  /* Market Opportunity Section */
  --market-opportunity-padding: var(--space-20) 0;
  --market-opportunity-container-gap: var(--space-6);
  --market-opportunity-max-width: 1360px;
  --market-opportunity-content-max-width: 819px;

  /* Market Opportunity Logo */
  --market-opportunity-logo-size: 70px;

  /* Market Opportunity Layout (typography tokens consolidated to semantic system) */
  --market-opportunity-headline-color: var(--color-text-primary);

  /* Market Opportunity Button */
  --market-opportunity-button-bg: rgba(13, 14, 20, 0.03);
  --market-opportunity-button-padding: 8px 12px 9px 18px;
  --market-opportunity-button-border-radius: var(--radius-xl);

  --market-opportunity-button-color: var(--color-text-primary);
  --market-opportunity-button-gap: var(--space-2);
  --market-opportunity-button-icon-size: 12px;

  /* Semantic Heading System */
  --heading-display: var(--text-7xl); /* 72px - Hero only */
  --heading-display-line-height: var(--leading-7xl);
  --heading-display-tracking: var(--tracking-mega-tight);

  --heading-section: var(--text-5xl); /* 48px - Section titles */
  --heading-section-line-height: var(--leading-5xl);
  --heading-section-tracking: var(--tracking-ultra-tight);

  --heading-subsection: var(--text-3xl); /* 32px - Cards, sub-elements */
  --heading-subsection-line-height: var(--leading-3xl);
  --heading-subsection-tracking: var(--tracking-tight);

  --heading-small: var(--text-xl); /* 20px - Small headings */
  --heading-small-line-height: var(--leading-xl);
  --heading-small-tracking: normal;

  /* Final CTA Section */
  --final-cta-background: var(--color-background-dark);
  --final-cta-padding: var(--space-20) 0;
  --final-cta-container-max-width: 1440px;
  --final-cta-content-max-width: 672px;
  --final-cta-subtext-max-width: 576px;

  /* Final CTA Layout */
  --final-cta-headline-font-size: var(--heading-section);
  --final-cta-headline-color: var(--color-base-white);
  --final-cta-subtext-color: var(--color-base-white);
  --final-cta-text-gap: var(--space-5);

  /* Final CTA Button */
  --final-cta-button-bg: var(--color-teal-400);
  --final-cta-button-color: var(--color-gray-900);
  --final-cta-button-padding: 8px 12px 8px 18px;
  --final-cta-button-border-radius: var(--radius-sm);

  --final-cta-button-gap: var(--space-2);
  --final-cta-button-icon-size: 12px;
  --final-cta-cta-margin-top: var(--space-5);

  /* Solutions Hero Specific */
  --solutions-hero-image-size: 608px;

  /* Background Overlay Problem Component */
  --background-overlay-image-size: 608px;
  --background-overlay-overlay-width: 420px;

  /* Small gaps */
  --space-1-25: 5px; /* 5px for invoice row gaps */

  /* Logo Visual Alignment */
  --logo-vertical-offset: -2px; /* Offset to visually center logo with text - adjust this value to fine-tune logo positioning relative to navigation text */

  /* Longform Heading Styles - Shifted down one level */
  /* H2 is now the main content heading (was H1) */
  --longform-h2-font-size: var(--text-3xl);
  --longform-h2-line-height: var(--leading-xl);
  --longform-h2-font-weight: var(--font-bold);
  --longform-h2-color: var(--color-text-primary);
  --longform-h2-margin-top: var(--space-10);
  --longform-h2-margin-bottom: var(--space-4);

  /* H3 is now the sub-heading (was H2) */
  --longform-h3-font-size: var(--text-2xl);
  --longform-h3-line-height: var(--leading-xl);
  --longform-h3-font-weight: var(--font-semibold);
  --longform-h3-color: var(--color-text-primary);
  --longform-h3-margin-top: var(--space-8);
  --longform-h3-margin-bottom: var(--space-4);

  /* H4 is now the minor heading (was H3) */
  --longform-h4-font-size: var(--text-xl);
  --longform-h4-line-height: var(--leading-lg);
  --longform-h4-font-weight: var(--font-semibold);
  --longform-h4-color: var(--color-text-primary);
  --longform-h4-margin-top: var(--space-6);
  --longform-h4-margin-bottom: var(--space-3);

  /* Longform Body Text */
  --longform-body-font-size: var(--text-base);
  --longform-body-line-height: var(--leading-relaxed);
  --longform-body-font-weight: var(--font-normal);
  --longform-body-color: var(--color-text-secondary);
  --longform-body-margin-bottom: var(--space-4);

  /* Longform List Styles */
  --longform-list-font-size: var(--text-base);
  --longform-list-line-height: var(--leading-relaxed);
  --longform-list-color: var(--color-text-secondary);
  --longform-list-margin-bottom: var(--space-4);
  --longform-list-item-margin-bottom: var(--space-2);

  /* Longform Link Styles */
  --longform-link-color: var(--color-teal-600);
  --longform-link-hover-color: var(--color-teal-700);
  --longform-link-underline-offset: 2px;

  /* Longform Table of Contents - Updated for shifted headings */
  --longform-toc-font-size: var(--text-sm);
  --longform-toc-line-height: var(--leading-base);
  --longform-toc-link-color: var(--color-text-secondary);
  --longform-toc-link-hover-color: var(--color-text-primary);
  --longform-toc-h2-font-weight: var(--font-medium);
  --longform-toc-h3-font-weight: var(--font-normal);
  --longform-toc-h3-font-size: var(--text-xs);
  --longform-toc-h3-color: var(--color-text-tertiary);
}

/* Mobile Typography Scaling (600px and below) */

/* Enhanced Responsive Typography System - Matches actual design intent */

@media (max-width: 600px) {
  :root {
    /* Atomic sizes - maintain 0.85 scaling for body text */
    --text-xs: 10px; /* 12px * 0.85 = 10.2 → 10px */
    --text-sm: 11px; /* 14px * 0.85 = 11.9 → 11px */
    --text-base: 13px; /* 16px * 0.85 = 13.6 → 13px */
    --text-lg: 15px; /* 18px * 0.85 = 15.3 → 15px */
    --text-xl: 17px; /* 20px * 0.85 = 17.0 → 17px */
    --text-2xl: 20px; /* 24px * 0.85 = 20.4 → 20px */

    /* Heading sizes - proper mobile hierarchy with hero as largest */
    --text-3xl: 28px; /* 32px → 28px (card titles, smaller on mobile) */
    --text-4xl: 34px; /* 40px → 34px (medium titles) */
    --text-5xl: 40px; /* 48px → 40px (section titles, smaller than hero) */
    --text-6xl: 44px; /* 56px → 44px (large headings) */
    --text-7xl: 48px; /* 72px → 48px (hero display, largest) */

    /* Responsive semantic headings - proper mobile hierarchy */
    --heading-display: var(--text-7xl); /* 72px → 48px (hero, largest) */
    --heading-section: var(
      --text-5xl
    ); /* 48px → 40px (sections, smaller than hero) */
    --heading-subsection: var(--text-3xl); /* 32px → 28px (cards, smallest) */
    --heading-small: var(--text-xl); /* 20px → 17px (auto-scaled) */

    /* Final CTA responsive scaling - 48px → 34px */
    --final-cta-headline-font-size: var(--text-4xl);
  }
}

/* Tablet Typography Scaling (600px < width ≤ 1024px) */

@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    /* Body text - moderate 0.9 scaling for better tablet readability */
    --text-base: 14px; /* 16px * 0.9 = 14.4 → 14px */
    --text-lg: 16px; /* 18px * 0.9 = 16.2 → 16px */
    --text-xl: 18px; /* 20px * 0.9 = 18.0 → 18px */
    --text-2xl: 22px; /* 24px * 0.9 = 21.6 → 22px */

    /* Heading sizes - 0.9 scaling for large headings only */
    --text-3xl: 22px; /* 32px * 0.9 = 28.8 → 29px */
    --text-4xl: 32px; /* 40px * 0.9 = 36.0 → 36px */
    --text-5xl: 40px; /* 48px * 0.9 = 43.2 → 43px */
    --text-6xl: 48px; /* 56px * 0.9 = 50.4 → 50px */
    --text-7xl: 60px; /* 72px * 0.9 = 64.8 → 65px */

    /* Keep small sizes unchanged for UI elements */
    /* --text-xs: 12px; (unchanged) */
    /* --text-sm: 14px; (unchanged) */

    /* Update semantic heading tokens */
    --heading-display: var(--text-7xl); /* 72px → 65px */
    --heading-section: var(--text-5xl); /* 48px → 43px */
    --heading-subsection: var(--text-3xl); /* 32px → 29px */
    --heading-small: var(--text-xl); /* 20px → 18px */

    /* Final CTA tablet scaling */
    --final-cta-headline-font-size: var(--text-5xl); /* 48px → 43px */
  }
}

/* Ultra-small mobile breakpoint - typography only for ≤360px screens */

@media (max-width: 360px) {
  :root {
    /* Reduced heading sizes for ultra-small screens - typography only */
    --text-3xl: 22px; /* 28px → 25px (subsection titles) */
    --text-5xl: 34px; /* 40px → 36px (section titles) */
    --text-7xl: 42px; /* 48px → 42px (hero display) */
    --text-xl: 16px; /* 17px → 16px (small headings) */

    /* Responsive semantic headings - ultra-small mobile hierarchy */
    --heading-display: var(--text-7xl); /* 48px → 42px (hero, largest) */
    --heading-section: var(--text-5xl); /* 40px → 36px (sections) */
    --heading-subsection: var(--text-3xl); /* 28px → 25px (cards) */
    --heading-small: var(--text-xl); /* 17px → 16px (small headings) */
  }
}

/* Dark theme tokens (for dark sections) */

[data-theme="dark"] {
  --color-text-primary: var(--color-base-white);
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-text-muted: rgba(255, 255, 255, 0.4);
  --color-background: var(--color-gray-800);
  --color-surface: #15161b;
  --color-border: rgba(255, 255, 255, 0.01);
}

/* Light theme tokens (default) */

:root,
[data-theme="light"] {
  --color-text-primary: var(--color-base-black);
  --color-text-secondary: var(--color-gray-500);
  --color-text-muted: var(--color-heavy-metal-light);
  --color-background: var(--color-background-light);
  --color-surface: var(--color-background-light-subtle);
  --color-border: var(--color-scheme-border);
}

/* Long-form Content Typography Tokens */

/* Dedicated tokens for longform content control */

/* Modern CSS Reset */

/* Based on Andy Bell's modern CSS reset with additions for design system */

/* Box sizing rules */

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

/* Remove default margin and padding */

* {
  margin: 0;
  padding: 0;
}

/* Prevent font size inflation */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

/* Remove default margin in favour of better control in authored CSS */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  line-height: 1.5;
  line-height: var(--leading-normal);
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  color: #1d1d1b;
  color: var(--color-text-primary);
  background-color: #fff;
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Set shorter line heights on headings and interactive elements */

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
  line-height: 1.1;
  line-height: var(--leading-xs);
}

/* Balance text wrapping on headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  font-weight: 400;
  font-weight: var(--font-normal);
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentcolor;
}

/* Make images easier to work with */

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

/* Make sure textareas without a rows attribute are not tiny */

textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */

:target {
  scroll-margin-block: 5ex;
  /* Enhanced visual feedback for targeted sections */
  animation: target-highlight 0.5s ease-in-out;
}

/* Highlight animation for targeted sections */

@keyframes target-highlight {
  0% {
    outline: 2px solid transparent;
  }
  50% {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
  }
  100% {
    outline: 2px solid transparent;
  }
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Disable target highlight animation for reduced motion */
  :target {
    animation: none;
  }
}

/* Form elements reset */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  line-height: var(--leading-form);
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

/* Remove default button styles */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* Focus styles */

:focus-visible {
  outline: 2px solid #15b79e;
  outline: 2px solid var(--color-teal-500);
  outline-offset: 2px;
}

/* Remove outline for mouse users */

:focus:not(:focus-visible) {
  outline: none;
}

/* Table reset */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Selection styles */

::selection {
  background-color: #ccfbef;
  background-color: var(--color-teal-100);
  color: #134e48;
  color: var(--color-teal-900);
}

/* Scrollbar styling for webkit browsers */

::-webkit-scrollbar {
  width: 8px;
  width: var(--scrollbar-size);
  height: 8px;
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background: #fdfdfc;
  background: var(--color-background-light-subtle);
}

::-webkit-scrollbar-thumb {
  background: #d1d0dd;
  background: var(--color-gray-300);
  border-radius: 9999px;
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: #6b6685;
  background: var(--color-gray-500);
}

/* Utilities CSS - Utility Classes for CUBE CSS */

/* Single-purpose utility classes for quick styling */

/* =====================================================
   SPACING UTILITIES
   ===================================================== */

/* Margin utilities */

.m-0 {
  margin: 0;
}

.m-1 {
  margin: 0.25rem;
  margin: var(--space-1);
}

.m-2 {
  margin: 0.5rem;
  margin: var(--space-2);
}

.m-3 {
  margin: 0.75rem;
  margin: var(--space-3);
}

.m-4 {
  margin: 1rem;
  margin: var(--space-4);
}

.m-5 {
  margin: 1.25rem;
  margin: var(--space-5);
}

.m-6 {
  margin: 1.5rem;
  margin: var(--space-6);
}

.m-8 {
  margin: 2rem;
  margin: var(--space-8);
}

.m-10 {
  margin: 2.5rem;
  margin: var(--space-10);
}

.m-12 {
  margin: 3rem;
  margin: var(--space-12);
}

/* Margin top */

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.25rem;
  margin-top: var(--space-1);
}

.mt-2 {
  margin-top: 0.5rem;
  margin-top: var(--space-2);
}

.mt-3 {
  margin-top: 0.75rem;
  margin-top: var(--space-3);
}

.mt-4 {
  margin-top: 1rem;
  margin-top: var(--space-4);
}

.mt-5 {
  margin-top: 1.25rem;
  margin-top: var(--space-5);
}

.mt-6 {
  margin-top: 1.5rem;
  margin-top: var(--space-6);
}

.mt-8 {
  margin-top: 2rem;
  margin-top: var(--space-8);
}

.mt-10 {
  margin-top: 2.5rem;
  margin-top: var(--space-10);
}

.mt-12 {
  margin-top: 3rem;
  margin-top: var(--space-12);
}

/* Margin bottom */

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.25rem;
  margin-bottom: var(--space-1);
}

.mb-2 {
  margin-bottom: 0.5rem;
  margin-bottom: var(--space-2);
}

.mb-3 {
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-3);
}

.mb-4 {
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
}

.mb-5 {
  margin-bottom: 1.25rem;
  margin-bottom: var(--space-5);
}

.mb-6 {
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
}

.mb-8 {
  margin-bottom: 2rem;
  margin-bottom: var(--space-8);
}

.mb-10 {
  margin-bottom: 2.5rem;
  margin-bottom: var(--space-10);
}

.mb-12 {
  margin-bottom: 3rem;
  margin-bottom: var(--space-12);
}

/* Padding utilities */

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.25rem;
  padding: var(--space-1);
}

.p-2 {
  padding: 0.5rem;
  padding: var(--space-2);
}

.p-3 {
  padding: 0.75rem;
  padding: var(--space-3);
}

.p-4 {
  padding: 1rem;
  padding: var(--space-4);
}

.p-5 {
  padding: 1.25rem;
  padding: var(--space-5);
}

.p-6 {
  padding: 1.5rem;
  padding: var(--space-6);
}

.p-8 {
  padding: 2rem;
  padding: var(--space-8);
}

.p-10 {
  padding: 2.5rem;
  padding: var(--space-10);
}

.p-12 {
  padding: 3rem;
  padding: var(--space-12);
}

/* Padding top */

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 0.25rem;
  padding-top: var(--space-1);
}

.pt-2 {
  padding-top: 0.5rem;
  padding-top: var(--space-2);
}

.pt-3 {
  padding-top: 0.75rem;
  padding-top: var(--space-3);
}

.pt-4 {
  padding-top: 1rem;
  padding-top: var(--space-4);
}

.pt-5 {
  padding-top: 1.25rem;
  padding-top: var(--space-5);
}

.pt-6 {
  padding-top: 1.5rem;
  padding-top: var(--space-6);
}

.pt-8 {
  padding-top: 2rem;
  padding-top: var(--space-8);
}

.pt-10 {
  padding-top: 2.5rem;
  padding-top: var(--space-10);
}

.pt-12 {
  padding-top: 3rem;
  padding-top: var(--space-12);
}

/* Padding bottom */

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 0.25rem;
  padding-bottom: var(--space-1);
}

.pb-2 {
  padding-bottom: 0.5rem;
  padding-bottom: var(--space-2);
}

.pb-3 {
  padding-bottom: 0.75rem;
  padding-bottom: var(--space-3);
}

.pb-4 {
  padding-bottom: 1rem;
  padding-bottom: var(--space-4);
}

.pb-5 {
  padding-bottom: 1.25rem;
  padding-bottom: var(--space-5);
}

.pb-6 {
  padding-bottom: 1.5rem;
  padding-bottom: var(--space-6);
}

.pb-8 {
  padding-bottom: 2rem;
  padding-bottom: var(--space-8);
}

.pb-10 {
  padding-bottom: 2.5rem;
  padding-bottom: var(--space-10);
}

.pb-12 {
  padding-bottom: 3rem;
  padding-bottom: var(--space-12);
}

/* =====================================================
   DISPLAY UTILITIES
   ===================================================== */

.hidden {
  display: none;
}

.block {
  display: block;
}

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

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

/* =====================================================
   FLEXBOX UTILITIES
   ===================================================== */

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

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

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

/* Gap utilities */

.gap-1 {
  gap: 0.25rem;
  gap: var(--space-1);
}

.gap-2 {
  gap: 0.5rem;
  gap: var(--space-2);
}

.gap-3 {
  gap: 0.75rem;
  gap: var(--space-3);
}

.gap-4 {
  gap: 1rem;
  gap: var(--space-4);
}

.gap-5 {
  gap: 1.25rem;
  gap: var(--space-5);
}

.gap-6 {
  gap: 1.5rem;
  gap: var(--space-6);
}

.gap-8 {
  gap: 2rem;
  gap: var(--space-8);
}

.gap-10 {
  gap: 2.5rem;
  gap: var(--space-10);
}

.gap-12 {
  gap: 3rem;
  gap: var(--space-12);
}

/* =====================================================
   GRID UTILITIES
   ===================================================== */

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

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

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

.col-span-full {
  grid-column: 1 / -1;
}

.row-span-1 {
  grid-row: span 1 / span 1;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

.row-span-3 {
  grid-row: span 3 / span 3;
}

.row-span-full {
  grid-row: 1 / -1;
}

/* =====================================================
   POSITIONING UTILITIES
   ===================================================== */

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

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

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

/* =====================================================
   SIZING UTILITIES
   ===================================================== */

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: fit-content;
}

.w-screen {
  width: 100vw;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-fit {
  height: fit-content;
}

.h-screen {
  height: 100vh;
}

.min-h-screen {
  min-height: 100vh;
}

.min-h-full {
  min-height: 100%;
}

.max-w-sm {
  max-width: 640px;
  max-width: var(--container-sm);
}

.max-w-md {
  max-width: 768px;
  max-width: var(--container-md);
}

.max-w-lg {
  max-width: 1024px;
  max-width: var(--container-lg);
}

.max-w-xl {
  max-width: 1280px;
  max-width: var(--container-xl);
}

.max-w-2xl {
  max-width: 1360px;
  max-width: var(--container-2xl);
}

.max-w-3xl {
  max-width: 1440px;
  max-width: var(--container-3xl);
}

.max-w-none {
  max-width: none;
}

/* =====================================================
   TYPOGRAPHY UTILITIES
   ===================================================== */

.font-light {
  font-weight: 300;
  font-weight: var(--font-light);
}

.font-normal {
  font-weight: 400;
  font-weight: var(--font-normal);
}

.font-medium {
  font-weight: 500;
  font-weight: var(--font-medium);
}

.font-semibold {
  font-weight: 600;
  font-weight: var(--font-semibold);
}

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

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

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

.text-justify {
  text-align: justify;
}

.text-xs {
  font-size: 12px;
  font-size: var(--text-xs);
  line-height: 1.43;
  line-height: var(--leading-sm);
}

.text-sm {
  font-size: 14px;
  font-size: var(--text-sm);
  line-height: 1.43;
  line-height: var(--leading-sm);
}

.text-base {
  font-size: 16px;
  font-size: var(--text-base);
  line-height: 1.5;
  line-height: var(--leading-base);
}

.text-lg {
  font-size: 18px;
  font-size: var(--text-lg);
  line-height: 1.56;
  line-height: var(--leading-lg);
}

.text-xl {
  font-size: 20px;
  font-size: var(--text-xl);
  line-height: 1.5;
  line-height: var(--leading-xl);
}

.text-2xl {
  font-size: 24px;
  font-size: var(--text-2xl);
  line-height: 1.33;
  line-height: var(--leading-2xl);
}

.text-3xl {
  font-size: 32px;
  font-size: var(--text-3xl);
  line-height: 1.3;
  line-height: var(--leading-3xl);
}

.text-4xl {
  font-size: 40px;
  font-size: var(--text-4xl);
  line-height: 1.2;
  line-height: var(--leading-4xl);
}

.text-5xl {
  font-size: 48px;
  font-size: var(--text-5xl);
  line-height: 1.2;
  line-height: var(--leading-5xl);
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.leading-tight {
  line-height: 1.43;
  line-height: var(--leading-tight);
}

.leading-snug {
  line-height: var(--leading-snug);
}

.leading-normal {
  line-height: 1.5;
  line-height: var(--leading-normal);
}

.leading-relaxed {
  line-height: var(--leading-relaxed);
}

.leading-loose {
  line-height: var(--leading-loose);
}

.tracking-tight {
  letter-spacing: -0.32px;
  letter-spacing: var(--tracking-tight);
}

.tracking-normal {
  letter-spacing: 0;
  letter-spacing: var(--tracking-normal);
}

.tracking-wide {
  letter-spacing: 1.4px;
  letter-spacing: var(--tracking-wide);
}

/* =====================================================
   COLOR UTILITIES
   ===================================================== */

/* Text colors */

.text-black {
  color: #1d1d1b;
  color: var(--color-base-black);
}

.text-white {
  color: #fff;
  color: var(--color-base-white);
}

.text-gray-500 {
  color: #6b6685;
  color: var(--color-gray-500);
}

.text-gray-700 {
  color: #383454;
  color: var(--color-gray-700);
}

.text-gray-800 {
  color: #0d0e14;
  color: var(--color-gray-800);
}

.text-teal-500 {
  color: #15b79e;
  color: var(--color-teal-500);
}

.text-teal-600 {
  color: #0f8679;
  color: var(--color-teal-600);
}

.text-primary {
  color: #1d1d1b;
  color: var(--color-text-primary);
}

.text-secondary {
  color: #6b6685;
  color: var(--color-text-secondary);
}

.text-muted {
  color: #60605f;
  color: var(--color-text-muted);
}

/* Background colors */

.bg-transparent {
  background-color: transparent;
}

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

.bg-black {
  background-color: #1d1d1b;
  background-color: var(--color-base-black);
}

.bg-gray-50 {
  background-color: #fdfdfc;
  background-color: var(--color-background-light-subtle);
}

.bg-gray-800 {
  background-color: #0d0e14;
  background-color: var(--color-gray-800);
}

.bg-teal-50 {
  background-color: #f0fdf9;
  background-color: var(--color-teal-50);
}

.bg-teal-500 {
  background-color: #15b79e;
  background-color: var(--color-teal-500);
}

.bg-surface {
  background-color: #fdfdfc;
  background-color: var(--color-background-light-subtle);
}

.bg-dark {
  background-color: #0d0e14;
  background-color: var(--color-gray-800);
}

/* =====================================================
   BORDER UTILITIES
   ===================================================== */

.border {
  border-width: 1px;
  border-style: solid;
}

.border-0 {
  border-width: 0;
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-l {
  border-left-width: 1px;
  border-left-style: solid;
}

.border-r {
  border-right-width: 1px;
  border-right-style: solid;
}

.border-gray-200 {
  border-color: #ebeaf0;
  border-color: var(--color-gray-200);
}

.border-gray-300 {
  border-color: #d1d0dd;
  border-color: var(--color-gray-300);
}

.border-teal-300 {
  border-color: #5fe9d0;
  border-color: var(--color-teal-300);
}

.border-current {
  border-color: currentcolor;
}

.border-transparent {
  border-color: transparent;
}

.rounded {
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
}

.rounded-sm {
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: 1rem;
  border-radius: var(--radius-xl);
}

.rounded-2xl {
  border-radius: 1.5rem;
  border-radius: var(--radius-2xl);
}

.rounded-full {
  border-radius: 9999px;
  border-radius: var(--radius-full);
}

/* =====================================================
   SHADOW UTILITIES
   ===================================================== */

.shadow-none {
  box-shadow: none;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-sm);
}

.shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-shadow: var(--shadow-xl);
}

/* =====================================================
   OPACITY UTILITIES
   ===================================================== */

.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

/* =====================================================
   TRANSFORM UTILITIES
   ===================================================== */

.transform {
  transform: translateX(0)
    translateY(0) rotate(0)
    skewX(0) skewY(0)
    scaleX(1) scaleY(1);
  transform: translateX(var(--tw-translate-x, 0))
    translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0))
    skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0))
    scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
}

.translate-x-0 {
  --tw-translate-x: 0;
}

.translate-y-0 {
  --tw-translate-y: 0;
}

.-translate-y-1 {
  --tw-translate-y: -0.25rem;
}

.-translate-y-2 {
  --tw-translate-y: -0.5rem;
}

.scale-95 {
  --tw-scale-x: 0.95;
  --tw-scale-y: 0.95;
}

.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}

.scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
}

/* =====================================================
   TRANSITION UTILITIES
   ===================================================== */

.transition-none {
  transition-property: none;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-75 {
  transition-duration: 75ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================
   CURSOR UTILITIES
   ===================================================== */

.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.cursor-text {
  cursor: text;
}

.cursor-move {
  cursor: move;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* =====================================================
   OVERFLOW UTILITIES
   ===================================================== */

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

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

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

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

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

/* =====================================================
   Z-INDEX UTILITIES
   ===================================================== */

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-auto {
  z-index: auto;
}

/* =====================================================
   ACCESSIBILITY UTILITIES
   ===================================================== */

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

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* =====================================================
   HOVER, FOCUS, AND ACTIVE STATES
   ===================================================== */

.hover\:bg-teal-600:hover {
  background-color: #0f8679;
  background-color: var(--color-teal-600);
}

.hover\:text-teal-500:hover {
  color: #15b79e;
  color: var(--color-teal-500);
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    0 0 #0000;
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-teal-500:focus {
  --tw-ring-color: var(--color-teal-500);
}

.active\:scale-95:active {
  --tw-scale-x: 0.95;
  --tw-scale-y: 0.95;
}

/* =====================================================
   RESPONSIVE UTILITIES
   ===================================================== */

@media (max-width: 600px) {
  .mobile\:hidden {
    display: none;
  }
  .mobile\:block {
    display: block;
  }
  .mobile\:flex {
    display: flex;
  }
  .mobile\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .mobile\:text-center {
    text-align: center;
  }
  .mobile\:px-4 {
    padding-left: 1rem;
    padding-left: var(--space-4);
    padding-right: 1rem;
    padding-right: var(--space-4);
  }
  .mobile\:py-2 {
    padding-top: 0.5rem;
    padding-top: var(--space-2);
    padding-bottom: 0.5rem;
    padding-bottom: var(--space-2);
  }
}

@media (min-width: 601px) {
  .desktop\:hidden {
    display: none;
  }
  .desktop\:block {
    display: block;
  }
  .desktop\:flex {
    display: flex;
  }
  .desktop\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .desktop\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Grid Container System */

.container-grid {
  max-width: calc(
    1280px + (6.5rem * 2)
  );
  max-width: var(--grid-container-width);
  margin: 0 auto;
  padding-left: 6.5rem;
  padding-left: var(--grid-margin);
  padding-right: 6.5rem;
  padding-right: var(--grid-margin);
}

.container-content {
  max-width: 1280px;
  max-width: var(--grid-max-width);
  margin: 0 auto;
}

.container-full {
  width: 100%;
}

/* Grid Utility Classes */

.grid-margin-left {
  margin-left: 6.5rem;
  margin-left: var(--grid-margin);
}

.grid-margin-right {
  margin-right: 6.5rem;
  margin-right: var(--grid-margin);
}

.grid-padding-x {
  padding-left: 6.5rem;
  padding-left: var(--grid-margin);
  padding-right: 6.5rem;
  padding-right: var(--grid-margin);
}

/* Responsive Grid Containers */

@media (max-width: 1024px) {
  .container-grid {
    padding-left: 3rem;
    padding-left: var(--grid-margin-tablet);
    padding-right: 3rem;
    padding-right: var(--grid-margin-tablet);
  }

  .grid-padding-x {
    padding-left: 3rem;
    padding-left: var(--grid-margin-tablet);
    padding-right: 3rem;
    padding-right: var(--grid-margin-tablet);
  }
}

@media (max-width: 600px) {
  .container-grid {
    padding-left: 1.5rem;
    padding-left: var(--grid-margin-mobile);
    padding-right: 1.5rem;
    padding-right: var(--grid-margin-mobile);
  }

  .grid-padding-x {
    padding-left: 1.5rem;
    padding-left: var(--grid-margin-mobile);
    padding-right: 1.5rem;
    padding-right: var(--grid-margin-mobile);
  }
}

/* Header Component Styles */

/* ========================================
   Base Header Structure
   ======================================== */

.header {
  background-color: #fff;
  background-color: var(--color-background-light);
  position: relative;
  width: 100%;
}

.header--dark {
  background-color: #0d0e14;
  background-color: var(--color-background-dark);
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: calc(
    1280px + (6.5rem * 2)
  );
  max-width: var(--grid-container-width);
  margin: 0 auto;
  padding: 19px 6.5rem;
  padding: var(--header-padding-y) var(--grid-margin);
  box-sizing: border-box;
}

/* ========================================
   Logo Styles
   ======================================== */

.header__logo {
  display: block;
  text-decoration: none;
}

.header__logo-svg {
  display: block;
  height: 1.5rem;
  height: var(--space-6);
  width: auto;
  transform: translateY(-2px);
  transform: translateY(var(--logo-vertical-offset));
}

/* ========================================
   Navigation Container & Menu
   ======================================== */

.header__nav {
  display: flex;
  align-items: center;
  gap: 60px;
  gap: var(--header-nav-spacing);
}

.header__menu {
  display: flex;
  gap: 2.5rem;
  gap: var(--space-10);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__menu-item {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #292524;
  color: var(--color-graywarm-800);
  text-decoration: none;
  padding: 0;
  transition: color 150ms ease-in-out;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.header__menu-item:hover {
  color: #15b79e;
  color: var(--color-button-primary-teal-hover);
}

.header__menu-item[aria-current="page"] {
  color: #15b79e;
  color: var(--color-teal-500);
}

.header--dark .header__menu-item {
  color: rgba(255, 255, 255, 0.8);
}

.header--dark .header__menu-item:hover,
.header--dark .header__menu-item[aria-current="page"] {
  color: #2ed3b7;
  color: var(--color-teal-400);
}

/* ========================================
   Header Actions & CTA Button
   ======================================== */

.header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--space-4);
}

/* ========================================
   Language Switcher (Desktop)
   ======================================== */

.header__language {
  position: relative;
  display: inline-block;
}

.header__language-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  gap: var(--space-1);
  padding: 0.25rem 1rem;
  padding: var(--space-1) var(--space-4);
  background: #fff;
  background: var(--color-background-light);
  border: 1px solid #292524;
  border: 1px solid var(--color-graywarm-800);
  border-radius: 1rem;
  border-radius: var(--radius-xl);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #292524;
  color: var(--color-graywarm-800);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.header__language-toggle[aria-expanded="true"] {
  opacity: 0;
  pointer-events: none;
}

.header--dark .header__language-toggle {
  background: #0d0e14;
  background: var(--color-background-dark);
  border-color: rgba(255, 255, 255, 0.8);
  color: rgba(255, 255, 255, 0.8);
}

.header__language-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  background: var(--color-background-light);
  border: 1px solid #292524;
  border: 1px solid var(--color-graywarm-800);
  border-radius: 1rem;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: calc(1000 + 1);
  z-index: calc(var(--z-dropdown) + 1);
  pointer-events: none;
}

.header--dark .header__language-overlay {
  background: #0d0e14;
  background: var(--color-background-dark);
  border-color: rgba(255, 255, 255, 0.8);
}

.header__language-toggle[aria-expanded="true"] + .header__language-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* adjust padding in the section below if the current language jumps when opening menu */

.header__language-current {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  gap: var(--space-1);
  padding: calc(0.25rem + 0px) 1rem;
  padding: calc(var(--space-1) + 0px) var(--space-4);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-weight: var(--font-medium);
  color: #292524;
  color: var(--color-graywarm-800);
  background: #fff;
  background: var(--color-background-light);
  border-radius: 1rem 1rem 0 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  min-height: calc(14px + 0.25rem + 0.25rem);
  min-height: calc(var(--text-sm) + var(--space-1) + var(--space-1));
  box-sizing: border-box;
  border-bottom: 1px solid #e7e5e4;
  border-bottom: 1px solid var(--color-graywarm-200);
}

.header--dark .header__language-current {
  color: rgba(255, 255, 255, 0.8);
  background: #0d0e14;
  background: var(--color-background-dark);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.header__language-check {
  flex-shrink: 0;
  width: 0.75rem;
  width: var(--space-3);
  height: 0.5rem;
  height: var(--space-2);
}

.header__language-option {
  display: flex;
  align-items: center;
  padding: calc(0.25rem + 2px) 1rem;
  padding: calc(var(--space-1) + 2px) var(--space-4);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-weight: var(--font-medium);
  color: var(--color-graywarm-700);
  background: #fff !important;
  background: var(--color-background-light) !important;
  text-decoration: none !important;
  transition:
    background-color 150ms ease-out,
    color 150ms ease-out;
  min-height: calc(14px + 0.25rem + 0.25rem);
  min-height: calc(var(--text-sm) + var(--space-1) + var(--space-1));
  box-sizing: border-box;
}

.header--dark .header__language-option {
  color: rgba(255, 255, 255, 0.7) !important;
  background: #0d0e14 !important;
  background: var(--color-background-dark) !important;
}

.header__language-option:hover,
.header__language-option:focus-visible {
  background-color: #fafaf9 !important;
  background-color: var(--color-background-light-alternate) !important;
  color: #0d0e14;
  color: var(--color-background-dark);
  outline: none;
}

.header--dark .header__language-option:hover,
.header--dark .header__language-option:focus-visible {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.95);
}

.header__language-option:last-child {
  border-radius: 0 0 calc(1rem - 1px) calc(1rem - 1px);
  border-radius: 0 0 calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px);
}

/* ========================================
   Mobile Menu Toggle
   ======================================== */

.header__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  width: var(--space-12);
  height: 3rem;
  height: var(--space-12);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.header__mobile-toggle-icon {
  color: #292524;
  color: var(--color-graywarm-800);
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  position: absolute;
}

.header--dark .header__mobile-toggle-icon {
  color: rgba(255, 255, 255, 0.8);
}

.header__mobile-toggle-icon--close {
  opacity: 0;
  transform: scale(0.8);
}

.header__mobile-toggle[aria-expanded="true"]
  .header__mobile-toggle-icon--hamburger {
  opacity: 0;
  transform: scale(0.8);
}

.header__mobile-toggle[aria-expanded="true"]
  .header__mobile-toggle-icon--close {
  opacity: 1;
  transform: scale(1);
}

/* ========================================
   Mobile Navigation - Progressive Enhancement Fallback
   ======================================== */

.header__mobile-nav-fallback {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  background: var(--color-background-light);
  border-top: 1px solid #00000026;
  border-top: 1px solid var(--color-scheme-border);
  padding: 1rem;
  padding: var(--space-4);
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--space-2);
  z-index: 1000;
  z-index: var(--z-dropdown);
}

.header--dark .header__mobile-nav-fallback {
  background: #0d0e14;
  background: var(--color-background-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.header__mobile-fallback-item {
  padding: 0.75rem 0.5rem;
  padding: var(--space-3) var(--space-2);
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: 500;
  font-weight: var(--font-medium);
  color: #292524;
  color: var(--color-graywarm-800);
  text-decoration: none;
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease-in-out;
  transition: background-color var(--transition-fast);
}

.header__mobile-fallback-item:hover,
.header__mobile-fallback-item[aria-current="page"] {
  background-color: rgba(0, 0, 0, 0.05);
  color: #15b79e;
  color: var(--color-teal-500);
}

.header--dark .header__mobile-fallback-item {
  color: rgba(255, 255, 255, 0.8);
}

.header--dark .header__mobile-fallback-item:hover,
.header--dark .header__mobile-fallback-item[aria-current="page"] {
  background-color: rgba(255, 255, 255, 0.1);
  color: #2ed3b7;
  color: var(--color-teal-400);
}

/* Mobile fallback CTA now uses .final-cta__button from design system */

/* ========================================
   Mobile Navigation - Enhanced (JavaScript Required)
   ======================================== */

.header__mobile-menu {
  background: #fff;
  background: var(--color-background-light);
  border-top: 1px solid #00000026;
  border-top: 1px solid var(--color-scheme-border);
  padding: 1.5rem 1rem;
  padding: var(--space-6) var(--space-4);
  display: none;
}

.header__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  gap: var(--space-1);
}

.header__mobile-item {
  padding: 0.75rem 0.5rem;
  padding: var(--space-3) var(--space-2);
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: 500;
  font-weight: var(--font-medium);
  color: #292524;
  color: var(--color-graywarm-800);
  text-decoration: none;
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  line-height: 1.56;
  line-height: var(--leading-lg);
  border: none;
}

.header__mobile-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.header__mobile-item[aria-current="page"] {
  background-color: #f0fdf9;
  background-color: var(--color-teal-50);
  color: #0f8679;
  color: var(--color-teal-600);
}

.header--dark .header__mobile-menu {
  background: #0d0e14;
  background: var(--color-background-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.header--dark .header__mobile-item {
  color: rgba(255, 255, 255, 0.8);
}

.header--dark .header__mobile-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.header--dark .header__mobile-item[aria-current="page"] {
  background-color: #134e48;
  background-color: var(--color-teal-900);
  color: #5fe9d0;
  color: var(--color-teal-300);
}

.header__mobile-actions {
  margin-top: 1.5rem;
  margin-top: var(--space-6);
  padding-top: 1.5rem;
  padding-top: var(--space-6);
  border-top: 1px solid #00000026;
  border-top: 1px solid var(--color-scheme-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--space-4);
}

.header--dark .header__mobile-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
   Mobile Language Switcher
   ======================================== */

.header__mobile-languages {
  display: flex;
  gap: 0.5rem;
  gap: var(--space-2);
}

.header__mobile-language {
  padding: 0.5rem 0.75rem;
  padding: var(--space-2) var(--space-3);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-weight: var(--font-medium);
  color: #292524;
  color: var(--color-graywarm-800);
  text-decoration: none;
  border: 1px solid #00000026;
  border: 1px solid var(--color-scheme-border);
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
}

.header__mobile-language:hover,
.header__mobile-language[aria-current="page"] {
  background-color: #15b79e;
  background-color: var(--color-teal-500);
  border-color: #15b79e;
  border-color: var(--color-teal-500);
  color: #fff;
  color: var(--color-base-white);
}

.header--dark .header__mobile-language {
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.header--dark .header__mobile-language:hover,
.header--dark .header__mobile-language[aria-current="page"] {
  background-color: #15b79e;
  background-color: var(--color-teal-500);
  border-color: #15b79e;
  border-color: var(--color-teal-500);
  color: #fff;
  color: var(--color-base-white);
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 1024px) {
  .header__container {
    padding: 19px 3rem;
    padding: var(--header-padding-y) var(--grid-margin-tablet);
  }
}

/* ========================================
   Header Navigation Breakpoint
   ======================================== */

/*
 * Independent breakpoint for header navigation mode switching
 * Change this value to adjust when header switches between desktop and mobile modes
 * This is separate from the global page breakpoint (600px) for fine-tuning.
 * Set by using French as language and trial-and-error... */

@media (max-width: 820px) {
  .header__container {
    padding: 19px 1.5rem;
    padding: var(--header-padding-y) var(--grid-margin-mobile);
  }

  .header__nav {
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .header__menu {
    display: none;
  }

  .final-cta__button.desktop\:block {
    display: none;
  }
  
  .btn.btn--primary.desktop\:block {
    display: none;
  }

  .header__mobile-toggle {
    display: flex;
  }

  .header__mobile-nav-fallback {
    display: flex;
    /* Hide by default to prevent flash */
    opacity: 0;
    visibility: hidden;
    /* Delayed reveal animation - only shows if JS doesn't load within 4s */
    animation: reveal-fallback-menu 0.1s linear 4s forwards;
  }

  .header__mobile-menu {
    display: block;
  }

  .header__mobile-menu[hidden] {
    display: none;
  }

  .header__language {
    display: none; /* Hide on mobile, show in mobile menu instead */
  }

  .header__actions {
    gap: 0.5rem;
    gap: var(--space-2);
  }

  /* Progressive Enhancement: Hide fallback when JS is available */
  .js-enabled .header__mobile-nav-fallback {
    display: none;
    /* Cancel animation when JS is available */
    animation: none;
  }

  .js-enabled .header__mobile-toggle {
    display: flex;
  }
}

/* ========================================
   Mobile Menu Flash Prevention Animation
   ======================================== */

@keyframes reveal-fallback-menu {
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* ========================================
   Accessibility - Focus States
   ======================================== */

.header__menu-item:focus-visible,
.final-cta__button:focus-visible {
  outline: 2px solid #15b79e;
  outline: var(--outline-width) solid var(--color-teal-500);
  outline-offset: 2px;
  outline-offset: var(--outline-width);
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
}

.header__language-toggle:focus-visible {
  outline: 2px solid #15b79e;
  outline: var(--outline-width) solid var(--color-teal-500);
  outline-offset: 2px;
  outline-offset: var(--outline-width);
  border-radius: 9999px;
  border-radius: var(--radius-full);
}

/* Mobile menu focus states - more subtle */

.header__mobile-item:focus-visible,
.header__mobile-fallback-item:focus-visible {
  background-color: #ccfbef;
  background-color: var(--color-teal-100);
  color: #0d7068;
  color: var(--color-teal-700);
  outline: none;
}

/* Ensure no focus styling on touch/click */

.header__mobile-item:focus:not(:focus-visible),
.header__mobile-fallback-item:focus:not(:focus-visible) {
  outline: none;
  background-color: transparent;
}

/* Base Layout */

.main {
  min-height: calc(
    100vh - 80px - 200px
  );
  min-height: calc(
    100vh - var(--header-height, 80px) - var(--footer-height, 200px)
  );
  padding: 2rem 0;
  padding: var(--space-8) 0;
}

.container {
  max-width: 1360px;
  max-width: var(--container-2xl);
  margin: 0 auto;
  padding: 0 1rem;
  padding: 0 var(--space-4);
}

/* Basic Typography */

h1 {
  font-size: 40px;
  font-size: var(--text-4xl);
  line-height: 1.33;
  line-height: var(--leading-2xl);
  font-weight: 700;
  font-weight: var(--font-bold);
  color: #1d1d1b;
  color: var(--color-text-primary);
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
}

h2 {
  font-size: 24px;
  font-size: var(--text-2xl);
  line-height: 1.5;
  line-height: var(--leading-base);
  font-weight: 600;
  font-weight: var(--font-semibold);
  color: #1d1d1b;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
}

p {
  font-size: 16px;
  font-size: var(--text-base);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #6b6685;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
}

/* Hero Button Styles - Component Specific */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--space-2);
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-weight: 600;
  font-weight: var(--font-semibold);
  text-decoration: none;
  border: none;
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  line-height: 1.5;
  line-height: var(--leading-normal);
  font-size: 14px;
  font-size: var(--text-sm);
  padding: 0.5rem 1rem calc(0.5rem + 1px);
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + 1px);
}

.btn--primary {
  background-color: #2ed3b7;
  background-color: var(--color-button-primary-teal);
  color: #000;
  color: var(--color-black);
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
}

.btn--primary:hover {
  background-color: #15b79e;
  background-color: var(--color-button-primary-teal-hover);
}

.btn--primary:focus-visible {
  outline: 2px solid #2ed3b7;
  outline: var(--outline-width) solid var(--color-button-primary-teal);
  outline-offset: 2px;
  outline-offset: var(--outline-width);
}

.btn--primary-black {
  background-color: #1d1d1b;
  background-color: var(--color-button-primary-black);
  color: #fff;
  color: var(--color-base-white);
}

.btn--primary-black:hover {
  background-color: #000;
  background-color: var(--color-button-primary-black-hover);
}

.btn--primary-black:focus-visible {
  outline: 2px solid #1d1d1b;
  outline: var(--outline-width) solid var(--color-button-primary-black);
  outline-offset: 2px;
  outline-offset: var(--outline-width);
}

.btn--secondary {
  background-color: rgba(13, 14, 20, 0.03);
  background-color: var(--color-button-secondary);
  color: #1d1d1b;
  color: var(--color-text-primary);
}

.btn--secondary:hover {
  background-color: rgba(13, 14, 20, 0.08);
  background-color: var(--color-button-secondary-hover);
}

/* Team Section */

.team-section {
  background: #fff;
  background: var(--color-background-light);
  padding: 5rem 0;
  padding: var(--space-20) 0;
}

.team-section__content {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  gap: var(--space-20);
}

.team-section__header {
  max-width: 768px;
  max-width: var(--container-md);
}

.team-section__title {
  font-size: 48px;
  font-size: var(--heading-section);
  font-weight: 500;
  font-weight: var(--font-medium);
  color: #1d1d1b;
  color: var(--color-base-black);
  line-height: 1.2;
  line-height: var(--leading-5xl);
  letter-spacing: -0.96px;
  letter-spacing: var(--tracking-ultra-tight);
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
}

.team-section__subtitle {
  font-size: 18px;
  font-size: var(--text-lg);
  color: #000;
  color: var(--color-black);
  line-height: 1.5;
  line-height: var(--leading-xl);
}

.team-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  gap: var(--space-12);
}

.team-member-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--space-6);
}

.team-member-card__image {
  width: 5rem;
  width: var(--space-20);
  max-width: 5rem;
  max-width: var(--space-20);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
  background: #fdfdfc;
  background: var(--color-background-light-subtle);
  align-self: flex-start;
}

.team-member-card__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--space-4);
}

.team-member-card__info {
  display: flex;
  flex-direction: column;
}

.team-member-card__name {
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 600;
  font-weight: var(--font-semibold);
  color: #000;
  color: var(--color-black);
  line-height: 1.5;
  line-height: var(--leading-xl);
}

.team-member-card__title {
  font-size: 18px;
  font-size: var(--text-lg);
  color: #000;
  color: var(--color-black);
  line-height: 1.5;
  line-height: var(--leading-xl);
}

.team-member-card__bio {
  font-size: 16px;
  font-size: var(--text-base);
  color: #000;
  color: var(--color-black);
  line-height: 1.5;
  line-height: var(--leading-xl);
}

.team-member-card__social {
  display: flex;
  gap: 0.75rem;
  gap: var(--space-3);
}

.social-icon {
  display: inline-flex;
  width: 1.5rem;
  width: var(--space-6);
  height: 1.5rem;
  height: var(--space-6);
  color: #000;
  color: var(--color-black);
  transition: color 150ms ease-in-out;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.social-icon:hover {
  color: #2ed3b7;
  color: var(--color-button-primary-teal);
}

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

/* Hiring Section */

.team-section__hiring {
  max-width: 768px;
  max-width: var(--container-md);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--space-6);
}

.team-section__hiring-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--space-4);
}

.team-section__hiring-headline {
  font-size: 32px;
  font-size: var(--text-3xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  color: #000;
  color: var(--color-black);
  line-height: 1.3;
  line-height: var(--leading-3xl);
  letter-spacing: -0.32px;
  letter-spacing: var(--tracking-tight);
}

.team-section__hiring-subtext {
  font-size: 18px;
  font-size: var(--text-lg);
  color: #000;
  color: var(--color-black);
  line-height: 1.5;
  line-height: var(--leading-xl);
}

.team-section__hiring-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto;
}

/* Responsive breakpoints */

@media (max-width: 1024px) {
  .team-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    gap: var(--space-8);
  }
}

@media (max-width: 600px) {
  .team-section__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    gap: var(--space-8);
  }

  .team-section__content {
    gap: 4rem;
    gap: var(--space-16);
  }

  .team-member-card__social {
    padding-bottom: 1.5rem;
    padding-bottom: var(--space-6);
  }

  .team-section__hiring-headline {
    font-size: 24px;
    font-size: var(--text-2xl);
  }
}

.btn--secondary:focus-visible {
  outline: 2px solid #1d1d1b;
  outline: var(--outline-width) solid var(--color-text-primary);
  outline-offset: 2px;
  outline-offset: var(--outline-width);
}

.btn--secondary-light {
  background-color: #fff;
  background-color: var(--color-background-light);
  color: #1d1d1b;
  color: var(--color-base-black);
}

.btn--secondary-light:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.btn--secondary-light:focus-visible {
  outline: 2px solid #fff;
  outline: var(--outline-width) solid var(--color-base-white);
  outline-offset: 2px;
  outline-offset: var(--outline-width);
}

/* Button Icon Styling */

.btn .icon {
  flex-shrink: 0;
}

/* Image Section - Product Showcase */

.image-section {
  padding: 3rem 0;
  padding: var(--space-12) 0;
  background-color: #fdfdfc;
  background-color: var(--color-surface);
}

.image-section__background {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-width: var(--image-section-max-width);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
}

.image-section__bg-image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3/2; /* 1536x1024 aspect ratio to prevent layout shift */
}

/* Lazy Loading Animations */

.lazy-overlay {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out;
}

.lazy-overlay.loaded {
  opacity: 1;
  transform: translateY(0);
}

.lazy-product-image {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

.lazy-product-image.loaded {
  opacity: 1;
  transform: scale(1);
}

.lazy-fade {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lazy-fade.loaded {
  opacity: 1;
}

/* Fallback for when JavaScript is disabled */

.no-js .lazy-fade {
  opacity: 1;
}

/* Overlays - Desktop/Tablet Only */

.image-section__overlays {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.image-section__overlay {
  position: absolute;
  pointer-events: auto;
}

.image-section__overlay--invoice {
  top: 42%;
  right: 4%;
  width: 325px;
  width: var(--invoice-overlay-width);
  max-width: 42%;
}

.image-section__overlay--status {
  top: 4%;
  left: 2%;
  width: 253px;
  width: var(--status-overlay-width);
  max-width: 36%;
}

.image-section__overlay-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  box-shadow: var(--shadow-xl);
}

/* Mobile - Hide overlays, show only background */

@media (max-width: 600px) {
  .image-section {
    padding: 2rem 0;
    padding: var(--space-8) 0;
  }

  .image-section__overlays {
    display: none;
  }

  .image-section__background {
    border-radius: 1rem;
    border-radius: var(--radius-xl);
  }
}

/* Product Showcase Section */

.product-showcase {
  background-color: var(--color-gray-50);
  padding: 6rem 0;
  padding: var(--space-24) 0;
}

.product-showcase__header {
  margin-bottom: 4rem;
  margin-bottom: var(--space-16);
}

.product-showcase__title {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-size: var(--heading-section);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.2;
  line-height: var(--heading-section-line-height);
  letter-spacing: -0.96px;
  letter-spacing: var(--heading-section-tracking);
  color: #1d1d1b;
  color: var(--color-text-primary);
  max-width: 540px;
  max-width: var(--product-showcase-title-max-width);
}

.product-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem;
  gap: var(--space-6);
  min-height: 772px;
  min-height: var(--product-showcase-grid-min-height);
}

/* Product Card Base Styles */

.product-card {
  background: #fafaf9;
  background: var(--color-background-card-default);
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  padding: 2rem;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 300ms ease-in-out;
  transition: all var(--transition-base);
  border: 1px solid transparent;
}

.product-card:hover {
  border: 1px solid #e7e5e4;
  border: 1px solid var(--color-border-card-hover);
  background: #f5f5f4;
  background: var(--color-background-card-hover);
}

.product-card--featured {
  grid-row: span 2;
  padding: 33px;
  padding: var(--product-card-featured-padding);
}

.product-card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 2;
}

.product-card__icon {
  width: 32px;
  width: var(--product-card-icon-size);
  height: 32px;
  height: var(--product-card-icon-size);
  margin-bottom: 2rem;
  margin-bottom: var(--space-8);
  flex-shrink: 0;
}

.product-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__header {
  width: 100%;
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
}

.product-card__content-area {
  display: flex;
  gap: 1rem;
  gap: var(--product-card-content-gap);
  align-items: flex-start;
  width: 100%;
  margin-bottom: 0;
}

/* Featured card vertical layout */

.product-card--featured .product-card__content-area {
  flex-direction: column;
  gap: 2rem;
  gap: var(--space-8);
  flex: 1 1 auto;
}

.product-card--featured .product-card__text {
  flex: 0 0 auto;
  max-width: 100%;
}

.product-card--featured .product-card__interface-container {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
}

.product-card__text {
  flex: 0 0 50%;
  flex: 0 0 var(--product-card-content-text-width);
  word-wrap: break-word;
  hyphens: auto;
  overflow-wrap: break-word;
}

.product-card__text--text-heavy {
  flex: 0 0 60%;
  flex: 0 0 var(--product-card-text-heavy-text-width);
}

.product-card__text--text-dominant {
  flex: 0 0 70%;
  flex: 0 0 var(--product-card-text-dominant-text-width);
}

/* Configurable layout variants */

.product-card--layout-60-40 .product-card__text {
  flex: 0 0 60%;
}

.product-card--layout-60-40 .product-card__interface-container {
  flex: 0 0 40%;
}

.product-card--layout-70-30 .product-card__text {
  flex: 0 0 70%;
}

.product-card--layout-70-30 .product-card__interface-container {
  flex: 0 0 30%;
}

.product-card--layout-40-60 .product-card__text {
  flex: 0 0 40%;
}

.product-card--layout-40-60 .product-card__interface-container {
  flex: 0 0 60%;
}

.product-card__title {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 32px;
  font-size: var(--heading-subsection);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.3;
  line-height: var(--heading-subsection-line-height);
  letter-spacing: -0.32px;
  letter-spacing: var(--heading-subsection-tracking);
  color: #1d1d1b;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-3);
  width: 100%;
}

.product-card__description {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #1d1d1b;
  color: var(--color-text-primary);
  opacity: 0.75;
}

.product-card__link {
  width: 42px;
  width: var(--product-card-arrow-width);
  height: 35px;
  height: var(--product-card-arrow-height);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  margin-top: 0.5rem;
  margin-top: var(--space-2);
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.product-card__link:hover {
  border-color: rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.product-card__link:focus-visible {
  outline: 2px solid #1d1d1b;
  outline: var(--outline-width) solid var(--color-text-primary);
  outline-offset: 2px;
  outline-offset: var(--outline-width);
}

.product-card__arrow {
  width: 10px;
  width: var(--product-card-arrow-icon-size);
  height: 10px;
  height: var(--product-card-arrow-icon-size);
}

.product-card__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Interface Image Container */

.product-card__interface-container {
  flex: 0 0 50%;
  flex: 0 0 var(--product-card-content-image-width);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.product-card__interface-container--text-heavy {
  flex: 0 0 40%;
  flex: 0 0 var(--product-card-text-heavy-image-width);
}

.product-card__interface-container--text-dominant {
  flex: 0 0 30%;
  flex: 0 0 var(--product-card-text-dominant-image-width);
}

.product-card__interface {
  position: relative;
  width: 100%;
  max-width: calc(100% * 0.8);
  max-width: calc(100% * var(--product-card-image-scale));
  transition: all 300ms ease-in-out;
  transition: all var(--transition-base);
}

.product-card--featured .product-card__interface {
  max-width: calc(100% * 0.9);
  max-width: calc(100% * var(--product-card-featured-image-scale));
  max-height: 400px;
  max-height: var(--product-card-featured-image-max-height);
  align-self: center;
}

.product-card__interface-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
}

.product-card--featured .product-card__interface-image {
  width: 100%;
  height: auto;
  max-height: 400px;
  max-height: var(--product-card-featured-image-max-height);
  object-fit: contain;
}

/* Visual Treatment: Shadows */

.product-card__interface--shadow-soft {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.product-card__interface--shadow-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.product-card__interface--shadow-dramatic {
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Visual Treatment: Float Animations */

.product-card__interface--float-subtle {
  animation: float-subtle 6s ease-in-out infinite;
}

.product-card__interface--float-dramatic {
  animation: float-dramatic 4s ease-in-out infinite;
}

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

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

/* Visual Treatment: Position Offsets */

.product-card__interface--offset-slight {
  transform: translate(4px, -4px);
}

.product-card__interface--offset-medium {
  transform: translate(8px, -8px);
}

/* Combined transforms for offset + float */

.product-card__interface--offset-slight.product-card__interface--float-subtle {
  animation: float-subtle-offset 6s ease-in-out infinite;
}

.product-card__interface--offset-slight.product-card__interface--float-dramatic {
  animation: float-dramatic-offset 4s ease-in-out infinite;
}

@keyframes float-subtle-offset {
  0%,
  100% {
    transform: translate(4px, -4px);
  }
  50% {
    transform: translate(4px, -8px);
  }
}

@keyframes float-dramatic-offset {
  0%,
  100% {
    transform: translate(4px, -4px);
  }
  50% {
    transform: translate(4px, -12px);
  }
}

/* Accessibility: Respect reduced motion preference */

@media (prefers-reduced-motion: reduce) {
  .product-card__interface--float-subtle,
  .product-card__interface--float-dramatic,
  .product-card__interface--offset-slight.product-card__interface--float-subtle,
  .product-card__interface--offset-slight.product-card__interface--float-dramatic {
    animation: none;
  }

  .product-card__interface--offset-slight {
    transform: translate(4px, -4px);
  }

  .product-card__interface--offset-medium {
    transform: translate(8px, -8px);
  }
}

/* Tablet Responsive (600px - 1279px) */

@media (max-width: 1279px) and (min-width: 601px) {
  .product-showcase__grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    gap: var(--space-12);
    min-height: auto;
  }

  .product-card--featured {
    grid-row: auto;
  }

  .product-card:not(.product-card--featured) .product-card__content-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    gap: var(--space-6);
    align-items: center;
  }

  .product-card:not(.product-card--featured) .product-card__text {
    order: 1;
  }

  .product-card:not(.product-card--featured)
    .product-card__interface-container {
    order: 2;
    margin-top: 0;
  }
}

/* Mobile Responsive */

@media (max-width: 600px) {
  .product-showcase {
    padding: 5rem 0;
    padding: var(--space-20) 0;
  }

  .product-showcase__header {
    margin-bottom: 3rem;
    margin-bottom: var(--space-12);
  }

  .product-showcase__grid {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    gap: var(--space-20);
    min-height: auto;
  }

  .product-card {
    padding: var(--space-7);
  }

  .product-card--featured {
    grid-row: auto;
    padding: var(--space-7);
  }

  .product-card__content-area {
    flex-direction: column;
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .product-card__text {
    flex: 1 1 auto;
  }

  .product-card__interface-container {
    flex: 1 1 auto;
    position: relative;
    margin-top: 1.5rem;
    margin-top: var(--space-6);
  }

  .product-card__interface {
    position: relative;
    max-width: 100%;
  }
}

/* Industry Solutions Section */

.generic-link-card-section {
  background-color: #0d0e14;
  background-color: var(--generic-link-card-background);
  padding: 5rem 0;
  padding: var(--generic-link-card-padding);
  position: relative;
}

.generic-link-card-section__header {
  display: flex;
  flex-direction: column-reverse;
  gap: 2.5rem;
  gap: var(--generic-link-card-header-gap);
  align-items: flex-start;
  margin-bottom: 5rem;
  margin-bottom: var(--space-20);
}

.generic-link-card-section__title-container {
  max-width: 744px;
  max-width: var(--generic-link-card-title-max-width);
}

.generic-link-card-section__title {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-size: var(--heading-section);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.2;
  line-height: var(--heading-section-line-height);
  letter-spacing: -0.96px;
  letter-spacing: var(--heading-section-tracking);
  color: #fff;
  color: var(--generic-link-card-title-color);
  margin: 0 0 1.5rem 0;
  margin: 0 0 var(--space-6) 0;
}

.generic-link-card-section__cta-container {
  align-self: flex-start;
}

.generic-link-card-section__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  gap: var(--generic-link-card-grid-gap);
}

.generic-link-card {
  background-color: #15161b;
  background-color: var(--generic-link-card-card-background);
  border-radius: 1rem;
  border-radius: var(--generic-link-card-card-radius);
  padding: 2.5rem;
  padding: var(--generic-link-card-card-padding);
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.01);
  border: 1px solid var(--generic-link-card-card-border);
  transition: all 300ms ease-in-out;
  transition: all var(--transition-base);
  align-self: stretch;
}

.generic-link-card:hover {
  border-color: #accbee;
  border-color: var(--generic-link-card-hover-border);
}

.generic-link-card__icon {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6rem;
  margin-bottom: var(--space-24);
}

.generic-link-card__icon-placeholder {
  width: 40px;
  width: var(--generic-link-card-icon-size);
  height: 40px;
  height: var(--generic-link-card-icon-size);
  background-color: rgba(255, 255, 255, 0.05);
  background-color: var(--generic-link-card-icon-background);
  border: 1px solid rgba(255, 255, 255, 0.01);
  border: 1px solid var(--generic-link-card-icon-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.generic-link-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--space-2);
  position: relative;
  z-index: 2;
  flex: 1;
}

.generic-link-card__category {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
    "Helvetica Neue", sans-serif;
  font-family: var(--font-family-secondary);
  font-size: 12px;
  font-size: var(--text-xs);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.43;
  line-height: var(--leading-sm);
  letter-spacing: 1.4px;
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.4);
  color: var(--generic-link-card-card-category-color);
  text-transform: uppercase;
  margin: 0;
}

.generic-link-card__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 32px;
  font-size: var(--heading-subsection);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.3;
  line-height: var(--heading-subsection-line-height);
  letter-spacing: -0.32px;
  letter-spacing: var(--heading-subsection-tracking);
  color: #f2f2f2;
  color: var(--generic-link-card-card-headline-color);
  margin: 0;
}

.generic-link-card__description {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: rgba(255, 255, 255, 0.6);
  color: var(--generic-link-card-card-description-color);
  margin: 0;
}

/* Mobile styles */

@media (max-width: 600px) {
  .generic-link-card-section {
    padding: 2rem 0;
    padding: var(--space-8) 0;
  }

  .generic-link-card-section__header {
    margin-bottom: 3rem;
    margin-bottom: var(--space-12);
  }

  .generic-link-card-section__grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    gap: var(--space-6);
    min-height: auto;
  }

  .generic-link-card {
    min-height: 448px;
    min-height: var(--generic-link-card-card-height);
  }
}

/* Hero Section - Using Design Tokens */

.hero {
  position: relative;
  padding: 4rem 0;
  padding: var(--space-16) 0;
  text-align: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero__headline-wrapper {
  max-width: 896px;
  max-width: var(--hero-headline-max-width);
  margin-bottom: 2.5rem;
  margin-bottom: var(--space-10);
}

.hero .hero__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif !important;
  font-family: var(--font-family-primary) !important;
  font-weight: 600 !important;
  font-weight: var(--font-semibold) !important;
  font-size: 72px !important;
  font-size: var(--heading-display) !important;
  line-height: 1.1 !important;
  line-height: var(--heading-display-line-height) !important;
  letter-spacing: -1.92px !important;
  letter-spacing: var(--heading-display-tracking) !important;
  color: #1d1d1b !important;
  color: var(--color-base-black) !important;
  margin: 0 !important;
  text-align: center;
}

.hero__subheading-wrapper {
  max-width: 730px;
  max-width: var(--hero-subheading-max-width);
  margin-bottom: 2rem;
  margin-bottom: var(--space-8);
}

.hero__subheading {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-weight: 400;
  font-weight: var(--font-normal);
  font-size: 20px;
  font-size: var(--text-xl);
  line-height: 1.5;
  line-height: var(--leading-normal);
  color: #6b6685;
  color: var(--color-gray-500);
  margin: 0;
  text-align: center;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* How It Works Section */

.how-it-works {
  padding: 4rem 0;
  padding: var(--how-it-works-padding);
  background-color: #fff;
  background-color: var(--color-background-light);
}

.how-it-works__header {
  margin-bottom: 4rem;
  margin-bottom: var(--how-it-works-header-gap);
}

.how-it-works__header-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  gap: var(--space-6);
  align-items: start;
  max-width: 1280px;
  max-width: var(--how-it-works-max-width);
}

.how-it-works__title-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--space-6);
}

.how-it-works__title {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-size: var(--heading-section);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.2;
  line-height: var(--heading-section-line-height);
  letter-spacing: -0.32px;
  letter-spacing: var(--tracking-tight);
  color: #1d1d1b;
  color: var(--color-base-black);
  margin: 0;
}

.how-it-works__subtitle-column {
  padding-top: 0;
  max-width: 520px;
  max-width: var(--how-it-works-subtitle-max-width);
}

.how-it-works__subtitle {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #6b6685;
  color: var(--color-gray-500);
  opacity: 0.75;
  margin: 0;
}

.how-it-works__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  gap: var(--space-6);
  align-items: stretch;
}

.how-it-works__video-column {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 3rem 0;
  padding: var(--space-12) 0;
}

.how-it-works__video-container {
  width: 100%;
  max-width: 628px;
  max-width: var(--how-it-works-video-max-width);
  height: 100%;
  display: flex;
  align-items: center;
}

.how-it-works__video-wrapper {
  position: relative;
  border-radius: 1rem;
  border-radius: var(--how-it-works-video-border-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 400px;
  min-height: var(--how-it-works-video-min-height-desktop);
}

.how-it-works__video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.how-it-works__video-controls {
  position: absolute;
  bottom: 1rem;
  bottom: var(--space-4);
  left: 1rem;
  left: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-it-works__play-button {
  background-color: rgba(0, 0, 0, 0.25);
  background-color: var(--how-it-works-video-controls-bg);
  opacity: 0.9;
  opacity: var(--how-it-works-video-controls-opacity);
  border: none;
  border-radius: 50%;
  width: 48px;
  width: var(--how-it-works-video-controls-size);
  height: 48px;
  height: var(--how-it-works-video-controls-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  color: var(--color-base-white);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  padding: 0.75rem;
  padding: var(--space-3);
}

.how-it-works__play-button:hover {
  opacity: 1;
  transform: scale(1.05);
}

.how-it-works__play-icon {
  width: 24px;
  width: var(--how-it-works-play-button-size);
  height: 24px;
  height: var(--how-it-works-play-button-size);
}

.how-it-works__progress-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  width: var(--how-it-works-video-controls-size);
  height: 48px;
  height: var(--how-it-works-video-controls-size);
  pointer-events: none;
  color: #fff;
  color: var(--color-base-white);
  opacity: 0.8;
}

.how-it-works__progress-circle {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.how-it-works__steps-column {
  display: flex;
  align-items: center;
  justify-content: start;
}

.how-it-works__steps-container {
  width: 100%;
  max-width: 530px;
  max-width: var(--how-it-works-steps-max-width);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--how-it-works-steps-gap);
}

/* Step Card Styles */

.step-card {
  background-color: #fff;
  background-color: var(--how-it-works-card-background);
  border: 1px solid #f3f2f7;
  border: 1px solid var(--how-it-works-card-border);
  border-radius: 1rem;
  border-radius: var(--radius-xl);
  padding: 25px;
  padding: var(--how-it-works-card-padding);
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
}

.step-card:nth-child(2) {
  border-color: rgba(228, 228, 231, 0.5);
  border-color: var(--how-it-works-card-border-active);
}

.step-card__content {
  display: flex;
  gap: 1rem;
  gap: var(--how-it-works-card-gap);
  align-items: flex-start;
}

.step-card__number {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
    "Helvetica Neue", sans-serif;
  font-family: var(--font-family-secondary);
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.56;
  line-height: var(--leading-lg);
  color: #ffbb90;
  color: var(--color-step-number);
  flex-shrink: 0;
  white-space: nowrap;
}

.step-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--how-it-works-step-content-gap);
}

.step-card__title {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-size: var(--heading-small);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.5;
  line-height: var(--heading-small-line-height);
  color: #1d1d1b;
  color: var(--color-base-black);
  margin: 0;
}

.step-card__description {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #6b6685;
  color: var(--color-gray-500);
  margin: 0;
}

/* Tablet Responsive (600px - 1023px) */

@media (max-width: 1024px) and (min-width: 601px) {
  .how-it-works__header-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .how-it-works__subtitle-column {
    max-width: none;
  }

  .how-it-works__main {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .how-it-works__video-column {
    order: 1;
    padding: 1.5rem 0;
    padding: var(--space-6) 0;
  }

  .how-it-works__video-wrapper {
    aspect-ratio: 16/9;
    height: auto;
    min-height: 300px;
    min-height: var(--how-it-works-video-min-height-tablet);
  }

  .how-it-works__steps-column {
    order: 2;
  }

  .how-it-works__steps-container {
    max-width: none;
  }
}

/* Mobile Responsive (under 600px) */

@media (max-width: 600px) {
  .how-it-works {
    padding: 2rem 0;
    padding: var(--space-8) 0;
  }

  .how-it-works__header-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .how-it-works__subtitle-column {
    max-width: none;
  }

  .how-it-works__title {
    font-size: 40px;
    font-size: var(--text-4xl);
    line-height: 1.2;
    line-height: var(--leading-4xl);
  }

  .how-it-works__main {
    grid-template-columns: 1fr;
    gap: 1rem;
    gap: var(--space-4);
  }

  .how-it-works__video-column {
    order: 1;
    padding: 1.5rem 0;
    padding: var(--space-6) 0;
  }

  .how-it-works__video-wrapper {
    /* Remove artificial aspect ratio constraint to let image display naturally */
    height: auto;
    min-height: auto;
  }

  .how-it-works__video-poster {
    border-radius: 1rem;
    border-radius: var(--how-it-works-video-border-radius);
  }

  .how-it-works__steps-column {
    order: 2;
  }

  .how-it-works__steps-container {
    max-width: none;
  }

  .step-card {
    padding: 1.25rem;
    padding: var(--space-5);
  }
}

.content {
  padding: 3rem 0;
  padding: var(--space-12) 0;
  text-align: center;
}

/* Focus States */

.button:focus-visible {
  outline: 2px solid #15b79e;
  outline: var(--outline-width) solid var(--color-teal-500);
  outline-offset: 2px;
  outline-offset: var(--outline-width);
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
}

/* Responsive Design - Mobile First */

@media (max-width: 600px) {
  .hero {
    padding: 2.5rem 0;
    padding: var(--space-10) 0;
  }

  .hero__headline-wrapper {
    margin-bottom: 1.25rem;
    margin-bottom: var(--space-5);
  }

  .hero__subheading-wrapper {
    margin-bottom: 1.5rem;
    margin-bottom: var(--space-6);
  }

  .hero__actions {
    gap: 1.5rem;
    gap: var(--space-6);
  }
}

/* High contrast mode support */

/* stylelint-disable-next-line media-feature-name-value-no-unknown */

/* Focus outline for better accessibility */

*:focus-visible {
  outline: 2px solid #15b79e;
  outline: var(--outline-width) solid var(--color-teal-500);
  outline-offset: 2px;
  outline-offset: var(--outline-width);
}

/* Feature Callout Component */

.feature-callout {
  background-color: #fff;
  background-color: var(--color-background-light);
  padding: 5rem 0;
  padding: var(--feature-callout-section-padding);
}

/* Remove feature-callout__container - now using container-grid */

.feature-callout__content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  min-height: var(--feature-callout-content-min-height-desktop);
  width: 100%;
  max-width: 1120px;
  max-width: var(--feature-callout-max-width);
  margin: 0 auto;
  background-color: #0d0e14;
  background-color: var(--feature-callout-background);
  border-radius: 1rem;
  border-radius: var(--feature-callout-border-radius);
  padding: 5rem;
  padding: var(--feature-callout-padding-desktop);
  position: relative;
}

.feature-callout__text {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  gap: var(--feature-callout-content-gap);
  text-align: center;
  max-width: 576px;
  max-width: var(--feature-callout-content-max-width);
  width: 100%;
}

.feature-callout__headline-wrapper {
  width: 100%;
}

.feature-callout__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-size: var(--heading-section);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.2;
  line-height: var(--leading-4xl);
  letter-spacing: -0.96px;
  letter-spacing: var(--heading-section-tracking);
  color: #fff;
  color: var(--feature-callout-text-color);
  margin: 0;
}

.feature-callout__body-wrapper {
  max-width: 530px;
  max-width: var(--feature-callout-body-max-width);
  width: 100%;
}

.feature-callout__body {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: 300;
  font-weight: var(--font-light);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #fff;
  color: var(--feature-callout-text-color);
  margin: 0;
}

/* Market Opportunity Section */

.market-opportunity {
  padding: 5rem 0;
  padding: var(--market-opportunity-padding);
  position: relative;
}

.market-opportunity__container {
  max-width: 1360px;
  max-width: var(--market-opportunity-max-width);
  margin: 0 auto;
  padding: 0 2.5rem;
  padding: 0 var(--space-10);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--market-opportunity-container-gap);
  align-items: center;
}

/* Logo */

.market-opportunity__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.market-opportunity__logo-wrapper {
  width: 70px;
  width: var(--market-opportunity-logo-size);
  height: 70px;
  height: var(--market-opportunity-logo-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.market-opportunity__logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Content */

.market-opportunity__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
  gap: var(--space-12);
}

.market-opportunity__headline-wrapper {
  max-width: 819px;
  max-width: var(--market-opportunity-content-max-width);
}

.market-opportunity__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-size: var(--heading-section);
  font-weight: var(--font-regular);
  line-height: 1.2;
  line-height: var(--heading-section-line-height);
  letter-spacing: -0.96px;
  letter-spacing: var(--heading-section-tracking);
  color: #1d1d1b;
  color: var(--market-opportunity-headline-color);
  margin: 0;
  text-align: center;
}

/* CTA Button */

.market-opportunity__cta {
  display: flex;
  justify-content: center;
}

.market-opportunity__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--market-opportunity-button-gap);
  padding: 8px 12px 9px 18px;
  padding: var(--market-opportunity-button-padding);
  background: rgba(13, 14, 20, 0.03);
  background: var(--market-opportunity-button-bg);
  border-radius: 1rem;
  border-radius: var(--market-opportunity-button-border-radius);
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 400;
  font-weight: var(--font-normal);
  color: #1d1d1b;
  color: var(--market-opportunity-button-color);
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.market-opportunity__button:hover {
  background: rgba(13, 14, 20, 0.06);
  transform: translateY(-1px);
}

.market-opportunity__button:focus {
  outline: 2px solid #15b79e;
  outline: 2px solid var(--color-teal-500);
  outline-offset: 2px;
}

.market-opportunity__button:active {
  transform: translateY(0);
}

.market-opportunity__button-text {
  line-height: 1.5;
  line-height: var(--leading-base);
}

.market-opportunity__button-icon {
  width: 12px;
  width: var(--market-opportunity-button-icon-size);
  height: 12px;
  height: var(--market-opportunity-button-icon-size);
  flex-shrink: 0;
}

/* Responsive */

@media (max-width: 600px) {
  .market-opportunity__container {
    padding: 0 1rem;
    padding: 0 var(--space-4);
    gap: 2rem;
    gap: var(--space-8);
  }

  .market-opportunity__content {
    gap: 2rem;
    gap: var(--space-8);
  }
}

/* Final CTA Section */

.final-cta {
  background: #0d0e14;
  background: var(--final-cta-background);
  padding: 5rem 0;
  padding: var(--final-cta-padding);
  position: relative;
}

.final-cta__container {
  max-width: 1440px;
  max-width: var(--final-cta-container-max-width);
  margin: 0 auto;
  padding: 0 2.5rem;
  padding: 0 var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.final-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 672px;
  max-width: var(--final-cta-content-max-width);
  width: 100%;
}

/* Text Content */

.final-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  gap: var(--final-cta-text-gap);
}

.final-cta__subtext {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #fff;
  color: var(--final-cta-subtext-color);
  margin: 0;
  max-width: 576px;
  max-width: var(--final-cta-subtext-max-width);
}

.final-cta__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-size: var(--final-cta-headline-font-size);
  font-weight: var(--font-regular);
  line-height: 1.2;
  line-height: var(--heading-section-line-height);
  letter-spacing: -0.96px;
  letter-spacing: var(--heading-section-tracking);
  color: #fff;
  color: var(--final-cta-headline-color);
  margin: 0;
}

/* CTA Button */

.final-cta__cta {
  margin-top: 1.25rem;
  margin-top: var(--final-cta-cta-margin-top);
  display: flex;
  justify-content: center;
}

.final-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--final-cta-button-gap);
  padding: 8px 12px 8px 18px;
  padding: var(--final-cta-button-padding);
  background: #2ed3b7;
  background: var(--final-cta-button-bg);
  border-radius: 0.25rem;
  border-radius: var(--final-cta-button-border-radius);
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.43;
  line-height: var(--leading-sm);
  color: #141028;
  color: var(--final-cta-button-color);
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.final-cta__button:hover {
  background: #15b79e;
  background: var(--color-teal-500);
  transform: translateY(-1px);
}

.final-cta__button:focus {
  outline: 2px solid #5fe9d0;
  outline: 2px solid var(--color-teal-300);
  outline-offset: 2px;
}

.final-cta__button:active {
  transform: translateY(0);
}

.final-cta__button-text {
  line-height: 1.5;
  line-height: var(--leading-base);
}

.final-cta__button-icon {
  width: 12px;
  width: var(--final-cta-button-icon-size);
  height: 12px;
  height: var(--final-cta-button-icon-size);
  flex-shrink: 0;
}

/* Responsive */

@media (max-width: 600px) {
  .final-cta__container {
    padding: 0 1rem;
    padding: 0 var(--space-4);
  }

  .final-cta__subtext {
    font-size: 16px;
    font-size: var(--text-base);
  }

  .final-cta__text {
    gap: 1.25rem;
    gap: var(--space-5);
  }

  .final-cta__cta {
    margin-top: 1.25rem;
    margin-top: var(--space-5);
  }
}

/* Responsive */

@media (max-width: 600px) {
  .feature-callout__content {
    min-height: 12rem;
    min-height: var(--feature-callout-content-min-height-mobile);
    padding: 2rem;
    padding: var(--feature-callout-padding-mobile);
  }

  .feature-callout__text {
    gap: 1rem;
    gap: var(--space-4);
  }
}

/* =============================================================================
   Solutions Hero Component
   ============================================================================= */

.solutions-hero {
  position: relative;
  padding: 5rem 0;
  padding: var(--space-20) 0;
  background-color: #fff;
  background-color: var(--color-background-light);
}

.solutions-hero__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  gap: var(--space-20);
  align-items: flex-start;
  margin-bottom: 5rem;
  margin-bottom: var(--space-20);
}

.solutions-hero__text {
  display: flex;
  flex-direction: column;
}

.solutions-hero__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-weight: 500;
  font-weight: var(--font-medium);
  font-size: 56px;
  font-size: var(--text-6xl); /* 56px */
  line-height: 1.2;
  line-height: var(--leading-6xl);
  letter-spacing: -0.96px;
  letter-spacing: var(--tracking-ultra-tight);
  color: #000;
  color: var(--color-black);
  margin: 0;
}

.solutions-hero__sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 12rem;
  padding-top: var(--space-48);
}

.solutions-hero__sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  gap: var(--space-8);
}

.solutions-hero__subheading {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-weight: 400;
  font-weight: var(--font-normal);
  font-size: 18px;
  font-size: var(--text-lg);
  line-height: 1.56;
  line-height: var(--leading-lg);
  color: #000;
  color: var(--color-black);
  margin: 0;
}

.solutions-hero__actions {
  display: flex;
  gap: 1rem;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Image Section */

.solutions-hero__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  gap: var(--space-16);
  align-items: flex-start;
}

.solutions-hero__image-primary,
.solutions-hero__image-secondary {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 608px;
  max-width: var(--solutions-hero-image-size);
}

.solutions-hero__image-secondary {
  margin-top: 6rem;
  margin-top: var(--space-24);
}

.solutions-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
}

/* Overlays - Base styles */

.solutions-hero__notification-overlay,
.solutions-hero__benefits-overlay,
.solutions-hero__invoice-overlay {
  position: absolute;
  max-width: none;
  width: auto;
  height: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Tablet Responsive */

@media (max-width: 1024px) and (min-width: 601px) {
  .solutions-hero__content {
    gap: 4rem;
    gap: var(--space-16);
  }

  .solutions-hero__images {
    gap: 3rem;
    gap: var(--space-12);
  }

  .solutions-hero__sidebar {
    padding-top: 6rem;
    padding-top: var(--space-24);
  }

  /* Tablet-specific overlay positioning */
  .solutions-hero__notification-overlay {
    bottom: 5%;
    left: 10%;
    width: 80%;
  }

  .solutions-hero__benefits-overlay {
    left: 8%;
    top: 55%;
    width: 60%;
  }

  .solutions-hero__invoice-overlay {
    left: 25%;
    top: 70%;
    width: 65%;
  }
}

/* Desktop Responsive - Explicit overlay positioning */

@media (min-width: 1024px) {
  .solutions-hero__notification-overlay {
    top: 5%;
    right: 5%;
    width: 49%;
  }

  .solutions-hero__benefits-overlay {
    left: 6%;
    top: 60%;
    width: 41%;
  }

  .solutions-hero__invoice-overlay {
    left: 26%;
    top: 75%;
    width: 43%;
  }
}

/* Mobile Responsive */

@media (max-width: 600px) {
  .solutions-hero {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .solutions-hero__content {
    grid-template-columns: 1fr;
    gap: 2rem;
    gap: var(--space-8);
    margin-bottom: 3rem;
    margin-bottom: var(--space-12);
  }

  .solutions-hero__headline {
    font-size: 40px;
    font-size: var(--text-4xl); /* 40px */
    line-height: 1.2;
    line-height: var(--heading-section-line-height);
    letter-spacing: -0.96px;
    letter-spacing: var(--heading-section-tracking);
  }

  .solutions-hero__sidebar {
    padding-top: 0;
  }

  .solutions-hero__sidebar-content {
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .solutions-hero__subheading {
    font-size: 16px;
    font-size: var(--text-base);
    line-height: 1.5;
    line-height: var(--leading-normal);
  }

  .solutions-hero__images {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .solutions-hero__image-primary,
  .solutions-hero__image-secondary {
    aspect-ratio: 1;
    max-width: none;
  }

  .solutions-hero__image-secondary {
    margin-top: 1.5rem;
    margin-top: var(--space-6);
  }

  /* Hide overlays on mobile for cleaner design */
  .solutions-hero__notification-overlay,
  .solutions-hero__benefits-overlay,
  .solutions-hero__invoice-overlay {
    display: none;
  }
}

/* =============================================================================
   Featured Solutions Slider Component
   ============================================================================= */

/* Featured Solutions Component */

.featured-solutions {
  background: #0d0e14;
  background: var(--generic-link-card-background);
  color: #fff;
  color: var(--color-base-white);
  padding: 5rem 0;
  padding: var(--space-20) 0;
}

.featured-solutions__header {
  text-align: center;
  margin-bottom: 4rem;
  margin-bottom: var(--space-16);
}

/* Header inside sticky container */

.featured-solutions-sticky .featured-solutions__header {
  text-align: center;
  padding: 1rem 6.5rem;
  padding: var(--space-4) var(--grid-margin);
  flex-shrink: 0;
}

/* Add responsive grid margins for tablet and mobile */

@media (max-width: 1024px) {
  .featured-solutions-sticky .featured-solutions__header {
    padding: 1rem 3rem;
    padding: var(--space-4) var(--grid-margin-tablet);
  }
}

@media (max-width: 600px) {
  .featured-solutions-sticky .featured-solutions__header {
    padding: 1rem 1.5rem;
    padding: var(--space-4) var(--grid-margin-mobile);
  }
}

.featured-solutions__title {
  font-size: 48px;
  font-size: var(--heading-section);
  line-height: 1.2;
  line-height: var(--heading-section-line-height);
  letter-spacing: -0.96px;
  letter-spacing: var(--heading-section-tracking);
  font-weight: 400;
  font-weight: var(--font-normal);
  max-width: 896px;
  max-width: var(--hero-headline-max-width);
  margin: 0 auto;
}

/* Mobile: Adjust title sizing to prevent overflow */

@media (max-width: 600px) {
  .featured-solutions__title {
    font-size: 40px;
    font-size: var(--text-4xl); /* 40px */
    max-width: none;
    padding: 0 0.5rem;
    padding: 0 var(--space-2);
  }

  .solution-card__title {
    font-size: 24px;
    font-size: var(--text-2xl); /* 24px instead of 32px */
  }

  .feature-callout__headline {
    font-size: 40px;
    font-size: var(--text-4xl); /* 40px instead of 48px */
  }
}

.featured-solutions__title-accent {
  color: #ffbb90;
  color: var(--color-accent-orange);
}

/* Mobile: Vertical Stack (≤600px) */

.featured-solutions__mobile {
  display: block;
}

.featured-solutions__carousel {
  display: none;
  /* Break out to full viewport width regardless of container constraints */
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* Solution Card Base Styles */

.solution-card {
  margin-bottom: 2rem;
  margin-bottom: var(--space-8);
}

.solution-card__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  gap: var(--space-6);
  padding: 1.5rem;
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.solution-card__title {
  font-size: 32px;
  font-size: var(--heading-subsection);
  line-height: 1.3;
  line-height: var(--heading-subsection-line-height);
  letter-spacing: -0.32px;
  letter-spacing: var(--heading-subsection-tracking);
  font-weight: 400;
  font-weight: var(--font-normal);
  color: #fff;
  color: var(--color-base-white);
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
}

.solution-card__description {
  font-size: 18px;
  font-size: var(--text-lg);
  line-height: 1.56;
  line-height: var(--leading-lg);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
}

.solution-card__image {
  background: #ffbb90;
  background: var(--color-accent-orange);
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  padding: var(--space-6);
  height: 334px;
  height: var(--featured-solutions-image-height);
  width: auto;
  max-width: 479px;
  max-width: var(--featured-solutions-image-max-width);
  display: flex;
  align-items: center;
  justify-content: center;
}

.solution-card__image img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
}

/* Mobile: Override image sizing to prevent overflow */

@media (max-width: 600px) {
  .featured-solutions__mobile .solution-card__image {
    width: 100%;
    height: auto;
    max-width: none;
  }
}

/* Tablet: Horizontal Carousel (601px-1023px) */

@media (min-width: 601px) and (max-width: 1024px) {
  .featured-solutions__mobile {
    display: none;
  }

  .featured-solutions__carousel {
    display: block;
  }

  .featured-solutions-outer {
    /* Height set dynamically by JavaScript */
  }

  .featured-solutions-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .featured-solutions-track-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .featured-solutions-track {
    display: flex;
    width: calc(100vw * 3);
    will-change: transform;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
  }

  .featured-solutions-track .solution-card {
    width: 100vw;
    height: 400px;
    height: var(--featured-solutions-card-min-height-tablet);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .featured-solutions-track .solution-card__content {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    gap: var(--space-8);
    max-width: 850px;
    max-width: var(--featured-solutions-card-max-width-tablet);
    width: 100%;
  }

  .featured-solutions-track .solution-card__image {
    height: 334px;
    height: var(--featured-solutions-image-height);
    width: auto;
    max-width: 479px;
    max-width: var(--featured-solutions-image-max-width);
  }

  .featured-solutions-track .solution-card__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Desktop: Full Horizontal Carousel (≥1024px) */

@media (min-width: 1024px) {
  .featured-solutions__mobile {
    display: none;
  }

  .featured-solutions__carousel {
    display: block;
  }

  .featured-solutions-outer {
    /* Height set dynamically by JavaScript */
  }

  .featured-solutions-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .featured-solutions-track-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .featured-solutions-track {
    display: flex;
    width: calc(100vw * 3);
    will-change: transform;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
  }

  .featured-solutions-track .solution-card {
    width: 100vw;
    height: 500px;
    height: var(--featured-solutions-card-min-height-desktop);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .featured-solutions-track .solution-card__content {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    gap: var(--space-16);
    max-width: 1100px;
    max-width: var(--featured-solutions-card-max-width-desktop);
    width: 100%;
  }

  .featured-solutions-track .solution-card__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .featured-solutions-track .solution-card__image {
    border-radius: 1rem;
    border-radius: var(--radius-xl);
    padding: 2rem;
    padding: var(--space-8);
    overflow: hidden;
    height: 334px;
    height: var(--featured-solutions-image-height);
    width: auto;
    max-width: 479px;
    max-width: var(--featured-solutions-image-max-width);
  }

  /* Vary card backgrounds for visual interest */
  .featured-solutions-track .solution-card:nth-child(1) .solution-card__image {
    background: #ffbb90;
    background: var(--color-accent-orange);
  }

  .featured-solutions-track .solution-card:nth-child(2) .solution-card__image,
  .featured-solutions-track .solution-card:nth-child(3) .solution-card__image {
    background: #efedff;
    background: var(--color-accent-purple-light);
  }
}

/* Very Large Desktop: Cap the maximum card width (≥1440px) */

@media (min-width: 1440px) {
  .featured-solutions-track .solution-card__content {
    max-width: 1200px;
    max-width: var(--featured-solutions-card-max-width-large);
  }
}

/* Two-Image Problem Component */

.two-image-problem {
  padding: 5rem 0;
  padding: var(--space-20) 0;
  background-color: #fff;
  background-color: var(--color-background);
}

.two-image-problem__container {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  gap: var(--space-20);
}

.two-image-problem__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--space-4);
  max-width: 768px;
  max-width: var(--container-md);
}

.two-image-problem__tagline {
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 600;
  font-weight: var(--font-semibold);
  color: #1d1d1b;
  color: var(--color-text-primary);
  line-height: 1.5;
  line-height: var(--leading-xl);
}

.two-image-problem__headline {
  font-size: 48px;
  font-size: var(--heading-section);
  font-weight: 400;
  font-weight: var(--font-normal);
  color: #1d1d1b;
  color: var(--color-text-primary);
  line-height: 1.2;
  line-height: var(--heading-section-line-height);
  letter-spacing: -0.96px;
  letter-spacing: var(--heading-section-tracking);
}

.two-image-problem__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  gap: var(--space-16);
  align-items: start;
}

.two-image-problem__images {
  display: flex;
  gap: 2rem;
  gap: var(--space-8);
  align-items: flex-start;
}

.two-image-problem__image-container {
  flex: 1;
  min-width: 0;
}

.two-image-problem__image-container--offset {
  margin-top: 5rem;
  margin-top: var(--space-20);
}

.two-image-problem__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 1.5rem;
  border-radius: var(--radius-2xl);
  object-fit: cover;
}

.two-image-problem__text-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.two-image-problem__solution {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  gap: var(--space-8);
}

.two-image-problem__solution-headline {
  font-size: 32px;
  font-size: var(--heading-subsection);
  font-weight: 400;
  font-weight: var(--font-normal);
  color: #1d1d1b;
  color: var(--color-text-primary);
  line-height: 1.3;
  line-height: var(--heading-subsection-line-height);
  letter-spacing: -0.32px;
  letter-spacing: var(--heading-subsection-tracking);
}

.two-image-problem__steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 0.5rem;
  padding: var(--space-2);
}

.two-image-problem__steps-title {
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 600;
  font-weight: var(--font-semibold);
  color: #6b6685;
  color: var(--color-gray-500);
  line-height: 1.5;
  line-height: var(--leading-xl);
}

.two-image-problem__steps-list {
  list-style: disc;
  margin-left: 2rem;
  margin-left: var(--space-8);
  color: #6b6685;
  color: var(--color-gray-500);
}

.two-image-problem__step {
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  margin-bottom: 0;
}

.two-image-problem__step:not(:last-child) {
  margin-bottom: 0;
}

.two-image-problem__actions {
  display: flex;
  gap: 1.5rem;
  gap: var(--space-6);
  align-items: center;
}

.two-image-problem__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 10px 24px;
  background-color: rgba(13, 14, 20, 0.03);
  background-color: var(--color-button-secondary);
  color: #1d1d1b;
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.5;
  line-height: var(--leading-xl);
  transition: 150ms ease-in-out;
  transition: var(--transition-fast);
}

.two-image-problem__button:hover {
  background-color: rgba(13, 14, 20, 0.08);
  background-color: var(--color-button-secondary-hover);
}

/* Tablet Responsive */

@media (max-width: 1024px) {
  .two-image-problem__content {
    grid-template-columns: 1fr;
    gap: 3rem;
    gap: var(--space-12);
  }

  .two-image-problem__images {
    order: 1;
  }

  .two-image-problem__text-content {
    order: 2;
    min-height: auto;
  }
}

/* Mobile Responsive */

@media (max-width: 600px) {
  .two-image-problem {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .two-image-problem__container {
    gap: 4rem;
    gap: var(--space-16);
  }

  .two-image-problem__content {
    grid-template-columns: 1fr;
    gap: 4rem;
    gap: var(--space-16);
  }

  .two-image-problem__images {
    order: 1;
    gap: 1rem;
    gap: var(--space-4);
  }

  .two-image-problem__text-content {
    order: 2;
    min-height: auto;
  }

  .two-image-problem__image-container--offset {
    margin-top: 1.25rem;
    margin-top: var(--space-5);
  }

  .two-image-problem__solution {
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .two-image-problem__headline {
    font-size: 40px;
    font-size: var(--text-4xl);
  }

  .two-image-problem__solution-headline {
    font-size: 24px;
    font-size: var(--text-2xl);
  }
}

/* Background Overlay Problem Component */

.background-overlay-problem {
  padding: 5rem 0;
  padding: var(--space-20) 0;
  background-color: #fff;
  background-color: var(--color-background);
}

.background-overlay-problem__container {
  display: flex;
  flex-direction: column;
}

.background-overlay-problem__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--space-4);
  max-width: 768px;
  max-width: var(--container-md);
}

.background-overlay-problem__tagline {
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 600;
  font-weight: var(--font-semibold);
  color: #1d1d1b;
  color: var(--color-text-primary);
  line-height: 1.5;
  line-height: var(--leading-xl);
}

.background-overlay-problem__headline {
  font-size: 48px;
  font-size: var(--heading-section);
  font-weight: 400;
  font-weight: var(--font-normal);
  color: #1d1d1b;
  color: var(--color-text-primary);
  line-height: 1.2;
  line-height: var(--heading-section-line-height);
  letter-spacing: -0.96px;
  letter-spacing: var(--heading-section-tracking);
}

.background-overlay-problem__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  gap: var(--space-16);
  align-items: start;
}

.background-overlay-problem__background-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  gap: var(--space-8);
}

.background-overlay-problem__background-container {
  position: relative;
  width: fit-content;
  max-width: 608px;
  max-width: var(--background-overlay-image-size);
}

.background-overlay-problem__background-image {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 1.5rem;
  border-radius: var(--radius-2xl);
  object-fit: cover;
}

.background-overlay-problem__overlay {
  position: absolute;
  bottom: 0.5rem;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  width: var(--background-overlay-overlay-width);
}

.background-overlay-problem__overlay-image {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
}

.background-overlay-problem__right-section {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  gap: var(--space-20);
  padding-top: 2rem;
  padding-top: var(--space-8);
}

.background-overlay-problem__small-images {
  display: flex;
  gap: 2rem;
  gap: var(--space-8);
  align-items: flex-start;
}

.background-overlay-problem__small-image-container {
  flex: 1;
  min-width: 0;
}

.background-overlay-problem__small-image-container--offset-large {
  margin-top: 9.25rem;
  margin-top: var(--space-37);
}

.background-overlay-problem__small-image-container--offset-medium {
  margin-top: 4.625rem;
  margin-top: var(--space-18-5);
}

.background-overlay-problem__small-image {
  width: 100%;
  height: auto;
  aspect-ratio: 288/296;
  border-radius: 1.5rem;
  border-radius: var(--radius-2xl);
  object-fit: cover;
}

.background-overlay-problem__text-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.background-overlay-problem__solution {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  gap: var(--space-8);
}

.background-overlay-problem__solution-headline {
  font-size: 32px;
  font-size: var(--heading-subsection);
  font-weight: 400;
  font-weight: var(--font-normal);
  color: #1d1d1b;
  color: var(--color-text-primary);
  line-height: 1.3;
  line-height: var(--heading-subsection-line-height);
  letter-spacing: -0.32px;
  letter-spacing: var(--heading-subsection-tracking);
}

.background-overlay-problem__steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 0.5rem;
  padding: var(--space-2);
}

.background-overlay-problem__steps-title {
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 600;
  font-weight: var(--font-semibold);
  color: #6b6685;
  color: var(--color-gray-500);
  line-height: 1.5;
  line-height: var(--leading-xl);
}

.background-overlay-problem__steps-list {
  list-style: disc;
  margin-left: 2rem;
  margin-left: var(--space-8);
  color: #6b6685;
  color: var(--color-gray-500);
}

.background-overlay-problem__step {
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  margin-bottom: 0;
}

.background-overlay-problem__actions {
  display: flex;
  gap: 1.5rem;
  gap: var(--space-6);
  align-items: center;
}

.background-overlay-problem__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 10px 24px;
  background-color: rgba(13, 14, 20, 0.03);
  background-color: var(--color-button-secondary);
  color: #1d1d1b;
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.5;
  line-height: var(--leading-xl);
  transition: 150ms ease-in-out;
  transition: var(--transition-fast);
}

.background-overlay-problem__button:hover {
  background-color: rgba(13, 14, 20, 0.08);
  background-color: var(--color-button-secondary-hover);
}

/* Tablet Responsive */

@media (max-width: 1024px) {
  .background-overlay-problem__content {
    grid-template-columns: 1fr;
    gap: 4rem;
    gap: var(--space-16);
  }

  .background-overlay-problem__background-section {
    order: 1;
  }

  .background-overlay-problem__right-section {
    order: 2;
    padding-top: 0;
  }

  .background-overlay-problem__background-container {
    width: 100%;
    max-width: 608px;
    max-width: var(--background-overlay-image-size);
  }

  .background-overlay-problem__background-image {
    width: 100%;
    aspect-ratio: 1/1;
  }

  .background-overlay-problem__overlay {
    width: min(440px, 90%);
  }
}

/* Mobile Responsive */

@media (max-width: 600px) {
  .background-overlay-problem {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .background-overlay-problem__container {
    gap: 4rem;
    gap: var(--space-16);
  }

  .background-overlay-problem__content {
    gap: 3rem;
    gap: var(--space-12);
  }

  .background-overlay-problem__right-section {
    gap: 3rem;
    gap: var(--space-12);
    padding-top: 0;
  }

  .background-overlay-problem__small-images {
    gap: 1rem;
    gap: var(--space-4);
  }

  .background-overlay-problem__small-image-container--offset-large {
    margin-top: 1.25rem;
    margin-top: var(--space-5);
  }

  .background-overlay-problem__small-image-container--offset-medium {
    margin-top: 0.5rem;
    margin-top: var(--space-2);
  }

  .background-overlay-problem__solution {
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .background-overlay-problem__headline {
    font-size: 40px;
    font-size: var(--text-4xl);
  }

  .background-overlay-problem__solution-headline {
    font-size: 24px;
    font-size: var(--text-2xl);
  }

  .background-overlay-problem__overlay {
    display: none;
  }
}

/* Comparison Table Component */

.comparison-table {
  padding: 5rem 0;
  padding: var(--space-20) 0;
  background: #fff;
  background: var(--color-background-light);
}

.comparison-table__header {
  text-align: center;
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
  max-width: 768px;
  max-width: var(--container-md);
  margin-left: auto;
  margin-right: auto;
}

.comparison-table__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-size: var(--text-5xl);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.2;
  line-height: var(--leading-5xl);
  letter-spacing: -0.96px;
  letter-spacing: var(--tracking-ultra-tight);
  color: #141028;
  color: var(--color-gray-900);
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-3);
}

.comparison-table__subheading {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #4a4767;
  color: var(--color-gray-600);
  margin: 0;
}

.comparison-table__table-container {
  max-width: 1280px;
  max-width: var(--container-xl);
  margin: 0 auto 1rem auto;
  margin: 0 auto var(--space-4) auto;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  padding-bottom: var(--space-3);
}

.comparison-table__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: #fff;
  background: var(--color-background-light);
  margin-bottom: calc(1 * 1rem);
  margin-bottom: calc(1 * var(--space-4));
}

.comparison-table__thead {
  border-bottom: 1px solid #ebeaf0;
  border-bottom: 1px solid var(--color-gray-200);
}

.comparison-table__header-row {
  height: 5rem;
  height: var(--space-20);
}

.comparison-table__header-cell {
  padding: 0 1.5rem 3rem 1.5rem;
  padding: 0 var(--space-6) var(--space-12) var(--space-6);
  vertical-align: bottom;
  border-bottom: 1px solid #ebeaf0;
  border-bottom: 1px solid var(--color-gray-200);
}

.comparison-table__header-cell--attribute {
  width: 33.333%;
}

.comparison-table__header-cell--finco,
.comparison-table__header-cell--competitor {
  width: 33.333%;
}

.comparison-table__column-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--space-2);
  height: 3rem;
  height: var(--space-12); /* 48px - close to design requirements */
}

.comparison-table__column-title {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #141028;
  color: var(--color-gray-900);
  white-space: nowrap;
}

.comparison-table__badge {
  background: #f6f5ff;
  background: var(--color-brand-50);
  border: 1px solid #efedff;
  border: 1px solid var(--color-accent-purple-light);
  border-radius: 1.5rem;
  border-radius: var(--radius-2xl);
  padding: 2px 10px;
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.43;
  line-height: var(--leading-sm);
  color: #5547c4;
  color: var(--color-brand-700);
  white-space: nowrap;
}

.comparison-table__tbody {
  background: #fff;
  background: var(--color-background-light);
}

.comparison-table__section-header-row {
  background: #fff;
  background: var(--color-background-light);
}

.comparison-table__section-header {
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-6);
  border-bottom: 1px solid #ebeaf0;
  border-bottom: 1px solid var(--color-gray-200);
  border-top: 2.5rem solid transparent;
  border-top: var(--space-10) solid transparent;
}

.comparison-table__section-header-row:first-child
  .comparison-table__section-header {
  border-top: none;
  padding-top: 0.25rem;
  padding-top: var(--space-1);
}

.comparison-table__section-title {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.43;
  line-height: var(--leading-sm);
  color: #5547c4;
  color: var(--color-brand-700);
  margin: 0;
  white-space: nowrap;
}

.comparison-table__row {
  background: #fff;
  background: var(--color-background-light);
}

.comparison-table__row--alternate {
  background: #fafaf9;
  background: var(--color-background-light-alternate);
}

.comparison-table__cell {
  padding: 0.75rem 1.5rem;
  padding: var(--space-3) var(--space-6);
  vertical-align: middle;
  border-bottom: none;
  overflow: visible;
  position: relative;
}

.comparison-table__cell--attribute {
  position: relative;
}

.comparison-table__attribute {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  gap: var(--space-1);
}

.comparison-table__help-wrapper {
  position: relative;
  display: inline-block;
}

.comparison-table__attribute-text {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.43;
  line-height: var(--leading-tight);
  color: #141028;
  color: var(--color-gray-900);
}

.comparison-table__help-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  width: var(--space-4);
  height: 1rem;
  height: var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  color: #9c98b3;
  color: var(--color-gray-400);
  padding: 0;
  margin: 0;
  transition: color 150ms ease-in-out;
  transition: color var(--transition-fast);
}

.comparison-table__help-icon:hover,
.comparison-table__help-icon:focus {
  color: #4a4767;
  color: var(--color-gray-600);
  outline: 2px solid #5547c4;
  outline: 2px solid var(--color-brand-700);
  outline-offset: 2px;
  border-radius: 2px;
}

.comparison-table__help-text {
  position: absolute;
  top: calc(100% + 0.5rem);
  top: calc(100% + var(--space-2));
  left: 1.5rem;
  left: var(--space-6);
  right: 1.5rem;
  right: var(--space-6);
  min-width: 20rem;
  min-width: var(--space-80);
  background: #141028;
  background: var(--color-gray-900);
  color: #fff;
  color: var(--color-base-white);
  padding: 0.5rem 0.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-size: var(--text-sm);
  line-height: 1.43;
  line-height: var(--leading-tight);
  white-space: normal;
  z-index: 1070;
  z-index: var(--z-tooltip);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 150ms ease-in-out,
    visibility 150ms ease-in-out;
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast);
}

.comparison-table__help-text::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0.75rem;
  left: var(--space-3);
  border: 5px solid transparent;
  border-bottom-color: #141028;
  border-bottom-color: var(--color-gray-900);
}

.comparison-table__help-icon[aria-expanded="true"]
  + .comparison-table__help-text {
  opacity: 1;
  visibility: visible;
}

.comparison-table__value {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--space-3);
}

.comparison-table__icon {
  flex-shrink: 0;
}

.comparison-table__icon--check {
  color: #5cc978;
  color: var(--color-success-400);
  border-radius: 1rem;
  border-radius: var(--radius-xl);
}

.comparison-table__icon--minus {
  color: #9c98b3;
  color: var(--color-gray-400);
}

.comparison-table__value-text {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.43;
  line-height: var(--leading-tight);
  color: #4a4767;
  color: var(--color-gray-600);
  flex: 1;
}

/* Tablet Responsive */

@media (max-width: 1024px) {
  .comparison-table {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .comparison-table__header {
    margin-bottom: 3rem;
    margin-bottom: var(--space-12);
  }

  .comparison-table__headline {
    font-size: 40px;
    font-size: var(--text-4xl);
    line-height: 1.2;
    line-height: var(--leading-4xl);
  }

  .comparison-table__subheading {
    font-size: 18px;
    font-size: var(--text-lg);
    line-height: 1.56;
    line-height: var(--leading-lg);
  }
}

/* Mobile Responsive */

@media (max-width: 600px) {
  .comparison-table {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  /* Hide competitor column on mobile */
  .comparison-table__header-cell--competitor,
  .comparison-table__cell--competitor {
    display: none;
  }

  /* Reset original width constraints first */
  .comparison-table__header-cell--finco,
  .comparison-table__header-cell--competitor,
  .comparison-table__header-cell--attribute {
    width: auto;
  }

  /* Then apply new mobile widths */
  .comparison-table__header-cell--attribute,
  .comparison-table__header-cell--finco {
    width: 50%;
  }

  .comparison-table__cell--attribute,
  .comparison-table__cell--finco {
    width: 50%;
  }

  .comparison-table__header {
    margin-bottom: 2rem;
    margin-bottom: var(--space-8);
  }

  /* Mobile table container layout consolidated below */

  .comparison-table__headline {
    font-size: 32px;
    font-size: var(--text-3xl);
    line-height: 1.3;
    line-height: var(--leading-3xl);
  }

  .comparison-table__subheading {
    font-size: 16px;
    font-size: var(--text-base);
    line-height: 1.5;
    line-height: var(--leading-base);
  }

  .comparison-table__table-container {
    margin: 0 calc(-1 * 1rem);
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 1rem;
    padding: 0 var(--space-4);
    padding-bottom: 1.5rem;
    padding-bottom: var(--space-6);
  }

  .comparison-table__header-row {
    height: auto;
    min-height: 3rem;
    min-height: var(--space-12);
  }

  .comparison-table__header-cell {
    padding: 0.5rem 0.75rem 0.75rem 0.75rem;
    padding: var(--space-2) var(--space-3) var(--space-3) var(--space-3);
  }

  .comparison-table__column-header {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    gap: var(--space-1);
  }

  .comparison-table__column-title {
    font-size: 16px;
    font-size: var(--text-base);
    line-height: 1.5;
    line-height: var(--leading-base);
  }

  .comparison-table__badge {
    font-size: 14px;
    font-size: var(--text-sm);
    line-height: 1.43;
    line-height: var(--leading-sm);
    padding: 1px 8px;
  }

  .comparison-table__row {
    height: auto;
    min-height: 3rem;
    min-height: var(--space-12);
  }

  .comparison-table__cell {
    padding: 0.75rem;
    padding: var(--space-3);
  }

  .comparison-table__section-header {
    padding: 0.5rem 0.75rem 0.25rem 0.75rem;
    padding: var(--space-2) var(--space-3) var(--space-1) var(--space-3);
    border-top: 1.5rem solid transparent;
    border-top: var(--space-6) solid transparent;
  }

  .comparison-table__section-header-row:first-child
    .comparison-table__section-header {
    border-top: none;
  }

  .comparison-table__section-title {
    font-size: 14px;
    font-size: var(--text-sm);
    line-height: 1.43;
    line-height: var(--leading-sm);
  }

  .comparison-table__attribute-text {
    font-size: 14px;
    font-size: var(--text-sm);
    line-height: 1.43;
    line-height: var(--leading-sm);
    white-space: normal;
  }

  .comparison-table__value {
    gap: 0.5rem;
    gap: var(--space-2);
  }

  .comparison-table__icon--check {
    width: 1.25rem;
    width: var(--space-5);
    height: 1.25rem;
    height: var(--space-5);
  }

  .comparison-table__icon--minus {
    width: 1rem;
    width: var(--space-4);
    height: 1rem;
    height: var(--space-4);
  }

  .comparison-table__value-text {
    font-size: 14px;
    font-size: var(--text-sm);
    line-height: 1.43;
    line-height: var(--leading-sm);
  }

  .comparison-table__help-icon {
    width: 14px;
    width: var(--text-sm);
    height: 14px;
    height: var(--text-sm);
  }

  .comparison-table__help-text {
    min-width: 17.5rem;
    min-width: var(--space-70);
    font-size: 0.75rem;
    font-size: var(--space-3);
    line-height: 1rem;
    line-height: var(--space-4);
    left: 0.75rem;
    left: var(--space-3);
    right: 0.75rem;
    right: var(--space-3);
  }

  .comparison-table__help-text::before {
    left: 0.5rem;
    left: var(--space-2);
  }
}

/* Generic Card Section Component */

.generic-card-section {
  background-color: #0d0e14;
  background-color: var(--color-background-dark);
  padding: 5rem 0;
  padding: var(--space-20) 0;
}

.generic-card-section__container {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  gap: var(--space-20);
}

.generic-card-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  gap: var(--space-6);
}

.generic-card-section__title {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
    "Helvetica Neue", sans-serif;
  font-family: var(--font-family-secondary);
  font-size: 48px;
  font-size: var(--heading-section);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.2;
  line-height: var(--heading-section-line-height);
  letter-spacing: -0.96px;
  letter-spacing: var(--heading-section-tracking);
  color: #fff;
  color: var(--color-base-white);
  max-width: 540px;
  max-width: var(--product-showcase-title-max-width);
  margin: 0;
}

.generic-card-section__subtitle {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #d1d0dd;
  color: var(--color-gray-300);
  max-width: 730px;
  max-width: var(--hero-subheading-max-width);
  margin: 0;
}

.generic-card-section__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  gap: var(--space-6);
  padding: 2.5rem 0;
  padding: var(--space-10) 0;
}

.generic-card-section__card {
  background-color: #15161b;
  background-color: var(--generic-link-card-card-background);
  border-radius: 1rem;
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--space-4);
}

.generic-card-section__badge {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
    "Helvetica Neue", sans-serif;
  font-family: var(--font-family-secondary);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 0.75rem;
  line-height: var(--space-3);
  letter-spacing: 1.4px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #ffbb90;
  color: var(--color-accent-orange);
}

.generic-card-section__card-title {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", "Roboto",
    "Helvetica Neue", sans-serif;
  font-family: var(--font-family-secondary);
  font-size: 32px;
  font-size: var(--text-3xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 2rem;
  line-height: var(--space-8);
  letter-spacing: -0.56px;
  letter-spacing: var(--tracking-tightest);
  color: #fff;
  color: var(--color-base-white);
  margin: 0;
}

.generic-card-section__card-description {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 14px;
  font-size: var(--text-sm);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.43;
  line-height: var(--leading-sm);
  color: #9c98b3;
  color: var(--color-gray-400);
  margin: 0;
  padding-top: 1rem;
  padding-top: var(--space-4);
}

/* Tablet Responsive (600px - 1023px) */

@media (max-width: 1024px) and (min-width: 601px) {
  .generic-card-section__cards {
    gap: 1.25rem;
    gap: var(--space-5);
  }

  .generic-card-section__card {
    padding: 2rem;
    padding: var(--space-8);
  }
}

/* Mobile Responsive (≤600px) */

@media (max-width: 600px) {
  .generic-card-section {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .generic-card-section__container {
    gap: 4rem;
    gap: var(--space-16);
  }

  .generic-card-section__header {
    gap: 1.25rem;
    gap: var(--space-5);
  }

  .generic-card-section__title {
    font-size: 48px;
    font-size: var(--heading-section);
    line-height: 1.2;
    line-height: var(--heading-section-line-height);
    letter-spacing: -0.96px;
    letter-spacing: var(--heading-section-tracking);
  }

  .generic-card-section__subtitle {
    text-align: center;
  }

  .generic-card-section__cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    gap: var(--space-6);
    padding: 2.5rem 0;
    padding: var(--space-10) 0;
  }

  .generic-card-section__card {
    width: 100%;
  }
}

/* About Us Hero Section */

.about-hero {
  background-color: #0d0e14;
  background-color: var(--color-background-dark);
  color: #fff;
  color: var(--color-base-white);
  padding: 5rem 0;
  padding: var(--space-20) 0;
  overflow: hidden;
}

.about-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
  gap: var(--space-20);
  position: relative;
  z-index: 2;
}

.about-hero__text {
  max-width: 768px;
  max-width: var(--container-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--space-6);
}

.about-hero__text--no-cta {
  margin-bottom: 2rem;
  margin-bottom: var(--space-8);
}

.about-hero__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 56px;
  font-size: var(--text-6xl);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.1;
  line-height: var(--leading-7xl);
  letter-spacing: -1.2px;
  letter-spacing: var(--tracking-extra-tight);
  color: #fff;
  color: var(--color-base-white);
  margin: 0;
}

.about-hero__subheading {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #fff;
  color: var(--color-base-white);
  margin: 0;
}

.about-hero__cta {
  margin-top: 2rem;
  margin-top: var(--space-8);
}

/* Image Gallery Layout */

.about-hero__gallery {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  height: calc(16.4rem * 2 + 0.75rem);
  height: calc(var(--space-66) * 2 + var(--space-3));
  margin-top: 2rem;
  margin-top: var(--space-8);
  overflow: hidden;
}

.about-hero__gallery-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  gap: var(--space-3);
}

.about-hero__gallery-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  gap: var(--space-3);
  height: 16.4rem;
  height: var(--space-66);
}

.about-hero__gallery-row--first {
  /* 11 cards - odd number naturally centers */
}

.about-hero__gallery-row--second {
  /* 12 cards - even number creates natural stagger */
}

.about-hero__gallery-image {
  width: 20rem;
  width: var(--space-80);
  height: 16.4rem;
  height: var(--space-66);
  flex-shrink: 0;
  border-radius: 32px;
  overflow: hidden;
}

.about-hero__gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Scroll animations for future use */

@keyframes scroll-left {
  0% {
    transform: translateX(calc(-13 * (20rem + 0.75rem)));
    transform: translateX(calc(-13 * (var(--space-80) + var(--space-3))));
  }
  100% {
    transform: translateX(calc(-16 * (20rem + 0.75rem)));
    transform: translateX(calc(-16 * (var(--space-80) + var(--space-3))));
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(
      calc(
        -13 * (20rem + 0.75rem) -
          (20rem + 0.75rem) / 2
      )
    );
    transform: translateX(
      calc(
        -13 * (var(--space-80) + var(--space-3)) -
          (var(--space-80) + var(--space-3)) / 2
      )
    );
  }
  100% {
    transform: translateX(
      calc(
        -10 * (20rem + 0.75rem) -
          (20rem + 0.75rem) / 2
      )
    );
    transform: translateX(
      calc(
        -10 * (var(--space-80) + var(--space-3)) -
          (var(--space-80) + var(--space-3)) / 2
      )
    );
  }
}

/* Animation keyframes ready for future scroll implementation */

.about-hero__gallery-row--first,
.about-hero__gallery-row--second {
  /* Animations disabled by default */
}

/* Tablet Responsive (601px - 1024px) */

@media (max-width: 1024px) {
  .about-hero {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .about-hero__content {
    gap: 4rem;
    gap: var(--space-16);
  }

  .about-hero__gallery {
    height: calc(13.1rem * 2 + 0.75rem);
    height: calc(var(--space-52) * 2 + var(--space-3));
  }

  .about-hero__gallery-container {
    gap: 0.75rem;
    gap: var(--space-3);
  }

  .about-hero__gallery-row {
    height: 13.1rem;
    height: var(--space-52);
  }

  /* Hide some images on tablet - maintain odd/even pattern */
  .about-hero__gallery-row--first .about-hero__gallery-image:nth-child(n + 8) {
    display: none;
  }

  .about-hero__gallery-row--second .about-hero__gallery-image:nth-child(n + 9) {
    display: none;
  }

  .about-hero__gallery-image {
    width: 16rem;
    width: var(--space-64);
    height: 13.1rem;
    height: var(--space-52);
  }

  @keyframes scroll-left-tablet {
    0% {
      transform: translateX(calc(-13 * (16rem + 0.75rem)));
      transform: translateX(calc(-13 * (var(--space-64) + var(--space-3))));
    }
    100% {
      transform: translateX(calc(-16 * (16rem + 0.75rem)));
      transform: translateX(calc(-16 * (var(--space-64) + var(--space-3))));
    }
  }

  @keyframes scroll-right-tablet {
    0% {
      transform: translateX(
        calc(
          -13 * (16rem + 0.75rem) -
            (16rem + 0.75rem) / 2
        )
      );
      transform: translateX(
        calc(
          -13 * (var(--space-64) + var(--space-3)) -
            (var(--space-64) + var(--space-3)) / 2
        )
      );
    }
    100% {
      transform: translateX(
        calc(
          -10 * (16rem + 0.75rem) -
            (16rem + 0.75rem) / 2
        )
      );
      transform: translateX(
        calc(
          -10 * (var(--space-64) + var(--space-3)) -
            (var(--space-64) + var(--space-3)) / 2
        )
      );
    }
  }
}

/* Mobile Responsive (≤600px) */

@media (max-width: 600px) {
  .about-hero {
    padding: 3rem 0;
    padding: var(--space-12) 0;
  }

  .about-hero__content {
    gap: 3rem;
    gap: var(--space-12);
  }

  .about-hero__headline {
    font-size: 48px;
    font-size: var(--text-5xl);
    line-height: 1.2;
    line-height: var(--leading-5xl);
    letter-spacing: -0.96px;
    letter-spacing: var(--tracking-ultra-tight);
  }

  .about-hero__text {
    gap: 1.25rem;
    gap: var(--space-5);
  }

  .about-hero__text--no-cta {
    margin-bottom: 1.5rem;
    margin-bottom: var(--space-6);
  }

  .about-hero__cta {
    margin-top: 1.5rem;
    margin-top: var(--space-6);
  }

  /* Simplified gallery for mobile */
  .about-hero__gallery {
    height: calc(9.8rem * 2 + 0.75rem);
    height: calc(var(--space-39) * 2 + var(--space-3));
  }

  .about-hero__gallery-container {
    gap: 0.75rem;
    gap: var(--space-3);
  }

  .about-hero__gallery-row {
    height: 9.8rem;
    height: var(--space-39);
  }

  .about-hero__gallery-row--first {
    /* Mobile: Show 3 cards (odd) */
  }

  .about-hero__gallery-row--second {
    /* Mobile: Show 4 cards (even) */
  }

  /* Hide extra images on mobile - maintain odd/even pattern */
  .about-hero__gallery-row--first .about-hero__gallery-image:nth-child(n + 4) {
    display: none;
  }

  .about-hero__gallery-row--second .about-hero__gallery-image:nth-child(n + 5) {
    display: none;
  }

  .about-hero__gallery-image {
    width: 12rem;
    width: var(--space-48);
    height: 9.8rem;
    height: var(--space-39);
  }

  @keyframes scroll-left-mobile {
    0% {
      transform: translateX(calc(-13 * (12rem + 0.75rem)));
      transform: translateX(calc(-13 * (var(--space-48) + var(--space-3))));
    }
    100% {
      transform: translateX(calc(-15 * (12rem + 0.75rem)));
      transform: translateX(calc(-15 * (var(--space-48) + var(--space-3))));
    }
  }

  @keyframes scroll-right-mobile {
    0% {
      transform: translateX(
        calc(
          -13 * (12rem + 0.75rem) -
            (12rem + 0.75rem) / 2
        )
      );
      transform: translateX(
        calc(
          -13 * (var(--space-48) + var(--space-3)) -
            (var(--space-48) + var(--space-3)) / 2
        )
      );
    }
    100% {
      transform: translateX(
        calc(
          -11 * (12rem + 0.75rem) -
            (12rem + 0.75rem) / 2
        )
      );
      transform: translateX(
        calc(
          -11 * (var(--space-48) + var(--space-3)) -
            (var(--space-48) + var(--space-3)) / 2
        )
      );
    }
  }
}

/* Headline Content Dark Component */

.headline-content-dark {
  background-color: #0d0e14;
  background-color: var(--color-background-dark);
  padding: 5rem 0;
  padding: var(--space-20) 0;
}

.headline-content-dark__container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.headline-content-dark__content {
  background-color: #15161b;
  background-color: var(--color-surface-dark);
  border-radius: 1.5rem;
  border-radius: var(--radius-2xl);
  padding: 4rem;
  padding: var(--space-16);
  max-width: 52.5rem;
  max-width: var(--content-max-width-large);
  width: 100%;
}

.headline-content-dark__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-size: var(--text-5xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.2;
  line-height: var(--leading-4xl);
  letter-spacing: -0.48px;
  letter-spacing: var(--tracking-tighter);
  color: #fff;
  color: var(--color-base-white);
  margin: 0 0 1.5rem 0;
  margin: 0 0 var(--space-6) 0;
}

.headline-content-dark__headline-muted {
  color: rgba(255, 255, 255, 0.6);
}

.headline-content-dark__body {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #a9a29d;
  color: var(--color-graywarm-400);
}

.headline-content-dark__body p {
  margin: 0 0 1.5rem 0;
  margin: 0 0 var(--space-6) 0;
  color: inherit;
}

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

/* Fallback styling for missing content */

.headline-content-dark__content--fallback {
  border: 2px dashed rgba(255, 255, 255, 0.3);
}

.headline-content-dark__content--fallback .headline-content-dark__headline {
  color: #ff6b6b;
  color: var(--color-error-fallback);
}

.headline-content-dark__content--fallback .headline-content-dark__body {
  color: rgba(255, 255, 255, 0.8);
}

/* Tablet Responsive */

@media (max-width: 1024px) {
  .headline-content-dark {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .headline-content-dark__content {
    padding: 3rem;
    padding: var(--space-12);
  }

  .headline-content-dark__headline {
    font-size: 40px;
    font-size: var(--text-4xl);
    letter-spacing: -0.32px;
    letter-spacing: var(--tracking-tight);
  }
}

/* Mobile Responsive */

@media (max-width: 600px) {
  .headline-content-dark {
    padding: 3rem 0;
    padding: var(--space-12) 0;
  }

  .headline-content-dark__content {
    padding: 2rem;
    padding: var(--space-8);
  }

  .headline-content-dark__headline {
    font-size: 32px;
    font-size: var(--text-3xl);
    letter-spacing: -0.32px;
    letter-spacing: var(--tracking-tight);
    margin-bottom: 1.25rem;
    margin-bottom: var(--space-5);
  }

  .headline-content-dark__body {
    font-size: 16px;
    font-size: var(--text-base);
  }

  .headline-content-dark__body p {
    margin-bottom: 1.25rem;
    margin-bottom: var(--space-5);
  }
}

/* Timeline Component */

.timeline {
  background-color: #fff;
  background-color: var(--color-background-light);
  padding: 5rem 0;
  padding: var(--space-20) 0;
}

.timeline__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  gap: var(--space-20);
  align-items: start;
}

.timeline__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--space-4);
}

.timeline__tagline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #1d1d1b;
  color: var(--color-base-black);
}

.timeline__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-size: var(--text-5xl);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 3.75rem;
  line-height: var(--space-15);
  letter-spacing: -0.96px;
  letter-spacing: var(--tracking-ultra-tight);
  color: #1d1d1b;
  color: var(--color-base-black);
  margin: 0;
}

.timeline__content {
  display: flex;
  flex-direction: column;
}

.timeline__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--space-4);
}

.timeline__item {
  display: flex;
  gap: 2.5rem;
  gap: var(--space-10);
  align-items: flex-start;
  position: relative;
}

.timeline__icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.timeline__icon {
  width: 3rem;
  width: var(--space-12);
  height: 3rem;
  height: var(--space-12);
  color: #1d1d1b;
  color: var(--color-base-black);
  flex-shrink: 0;
  background-color: #fff;
  background-color: var(--color-background-light);
  position: relative;
  z-index: 2;
}

.timeline__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Use CSS pseudo-element for flexible connecting line */

.timeline__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(3rem + 0.5rem);
  top: calc(var(--space-12) + var(--space-2));
  left: calc(1.5rem);
  left: calc(var(--space-6));
  width: 0.25rem;
  width: var(--space-1);
  height: calc(100% - 3rem - 0.5rem);
  height: calc(100% - var(--space-12) - var(--space-2));
  background-color: #1d1d1b;
  background-color: var(--color-base-black);
  opacity: 0.15;
  opacity: var(--timeline-connection-opacity);
  z-index: 1;
}

.timeline__item-content {
  flex: 1;
  min-width: 0;
}

.timeline__item-title {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.875rem;
  line-height: var(--space-7-5);
  color: #1d1d1b;
  color: var(--color-text-primary);
  margin: 0 0 1rem 0;
  margin: 0 0 var(--space-4) 0;
}

.timeline__item-description {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #1d1d1b;
  color: var(--color-text-primary);
  margin: 0;
}

.timeline__empty,
.timeline__fallback-message {
  padding: 2rem;
  padding: var(--space-8);
  background-color: #fafaf9;
  background-color: var(--color-background-light-alternate);
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
  border: 2px dashed #79716b;
  border: 2px dashed var(--color-graywarm-500);
}

.timeline__fallback-message p {
  margin: 0 0 1rem 0;
  margin: 0 0 var(--space-4) 0;
  color: #292524;
  color: var(--color-graywarm-800);
}

.timeline__fallback-message p:last-child {
  margin-bottom: 0;
}

/* Fallback styling for missing content */

.timeline__container--fallback {
  border: 2px dashed #79716b;
  border: 2px dashed var(--color-graywarm-500);
  padding: 2rem;
  padding: var(--space-8);
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
}

.timeline__container--fallback .timeline__tagline {
  color: #ff6b6b;
  color: var(--color-error-fallback);
}

.timeline__container--fallback .timeline__headline {
  color: #ff6b6b;
  color: var(--color-error-fallback);
}

/* 404 Page Specific Styles */

.error-404-image {
  width: 20rem;
  width: var(--space-80); /* 320px */
  max-width: 100%;
}

.error-404-spacer {
  height: 4rem;
  height: var(--space-16); /* 4rem */
}

/* Tablet Responsive */

@media (max-width: 1024px) {
  .timeline {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .timeline__container {
    gap: 4rem;
    gap: var(--space-16);
  }

  .timeline__headline {
    font-size: 40px;
    font-size: var(--text-4xl);
    letter-spacing: -0.32px;
    letter-spacing: var(--tracking-tight);
  }

  .timeline__item {
    gap: 2rem;
    gap: var(--space-8);
  }
}

/* Mobile Responsive */

@media (max-width: 600px) {
  .timeline {
    padding: 3rem 0;
    padding: var(--space-12) 0;
  }

  .timeline__container {
    grid-template-columns: 1fr;
    gap: 2rem;
    gap: var(--space-8);
  }

  .timeline__headline {
    font-size: 32px;
    font-size: var(--text-3xl);
    letter-spacing: -0.32px;
    letter-spacing: var(--tracking-tight);
    line-height: 1.3;
    line-height: var(--leading-3xl);
  }

  .timeline__item {
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .timeline__icon {
    width: 2.5rem;
    width: var(--space-10);
    height: 2.5rem;
    height: var(--space-10);
  }

  .timeline__item:not(:last-child)::after {
    top: calc(2.5rem + 0.5rem);
    top: calc(var(--space-10) + var(--space-2));
    left: 1.25rem;
    left: var(--space-5);
    height: calc(100% - 2.5rem - 0.5rem);
    height: calc(100% - var(--space-10) - var(--space-2));
  }

  .timeline__item-title {
    font-size: 18px;
    font-size: var(--text-lg);
    line-height: 1.56;
    line-height: var(--leading-lg);
  }

  .timeline__item-description {
    font-size: 14px;
    font-size: var(--text-sm);
    line-height: 1.5;
    line-height: var(--leading-base);
  }
}

/* =============================================================================
   Longform Content Layout Styles
   ============================================================================= */

.longform-page {
  /* Page-specific adjustments */
}

.longform-main {
  padding: 5rem 0;
  padding: var(--space-20) 0;
}

.longform-container {
  max-width: calc(
    1280px + (6.5rem * 2)
  );
  max-width: var(--grid-container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  padding: 0 var(--grid-margin-mobile);

  /* Mobile-first: single column */
  display: block;
}

/* Tablet */

@media (min-width: 768px) {
  .longform-container {
    padding: 0 3rem;
    padding: 0 var(--grid-margin-tablet);
  }
}

/* Desktop: two-column layout */

@media (min-width: 1024px) {
  .longform-container {
    display: block;
    padding: 0 6.5rem;
    padding: 0 var(--grid-margin);
  }
}

/* Main content area */

.longform-content {
  min-width: 0; /* Prevent grid blowout */
  width: 100%;
}

/* Desktop: Reserve space for TOC when it's visible */

@media (min-width: 1024px) {
  .longform-content {
    padding-right: calc(
      20rem + 2.5rem
    );
    padding-right: calc(
      var(--longform-toc-width) + var(--longform-toc-spacing)
    );
  }
}

.longform-header {
  margin-bottom: 2rem;
  margin-bottom: var(--space-8);
  padding-bottom: 1.5rem;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
}

.longform-title {
  font-size: 40px;
  font-size: var(--text-4xl);
  line-height: 1.33;
  line-height: var(--leading-2xl);
  font-weight: 700;
  font-weight: var(--font-bold);
  color: #1d1d1b;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
}

.longform-description {
  font-size: 20px;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: #6b6685;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
}

.longform-meta {
  font-size: 14px;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-bottom: 0;
}

.longform-meta time {
  color: #6b6685;
  color: var(--color-text-secondary);
}

/* Content body typography */

.longform-body {
  max-width: none;
  line-height: var(--leading-relaxed);
  text-align: left;
}

.longform-body h1,
.longform-body h2,
.longform-body h3,
.longform-body h4,
.longform-body h5,
.longform-body h6 {
  scroll-margin-top: calc(80px + 1rem);
  scroll-margin-top: calc(var(--header-height, 80px) + var(--space-4));
}

/* Content H1s are styled as H2s visually to maintain single H1 per page */

.longform-body h1 {
  font-size: 32px;
  font-size: var(--longform-h2-font-size);
  line-height: 1.5;
  line-height: var(--longform-h2-line-height);
  font-weight: 700;
  font-weight: var(--longform-h2-font-weight);
  color: #1d1d1b;
  color: var(--longform-h2-color);
  margin-top: 2.5rem;
  margin-top: var(--longform-h2-margin-top);
  margin-bottom: 1rem;
  margin-bottom: var(--longform-h2-margin-bottom);
  padding-top: 1.5rem;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
}

.longform-body h1:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Content H2s are styled as H3s visually */

/* Content H3s and below remain as-is */

.longform-body h3 {
  font-size: 18px;
  font-size: var(--text-lg);
  line-height: 1.5;
  line-height: var(--leading-base);
  font-weight: 600;
  font-weight: var(--font-semibold);
  color: #1d1d1b;
  color: var(--color-text-primary);
  margin-top: 1.5rem;
  margin-top: var(--space-6);
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-3);
}

.longform-body h4 {
  font-size: 20px;
  font-size: var(--longform-h4-font-size);
  line-height: 1.56;
  line-height: var(--longform-h4-line-height);
  font-weight: 600;
  font-weight: var(--longform-h4-font-weight);
  color: #1d1d1b;
  color: var(--longform-h4-color);
  margin-top: 1.5rem;
  margin-top: var(--longform-h4-margin-top);
  margin-bottom: 0.75rem;
  margin-bottom: var(--longform-h4-margin-bottom);
}

.longform-body h5,
.longform-body h6 {
  font-size: 18px;
  font-size: var(--text-lg);
  line-height: 1.5;
  line-height: var(--leading-base);
  font-weight: 600;
  font-weight: var(--font-semibold);
  color: #1d1d1b;
  color: var(--color-text-primary);
  margin-top: 1.5rem;
  margin-top: var(--space-6);
  margin-bottom: 0.75rem;
  margin-bottom: var(--space-3);
}

.longform-body p {
  font-size: 16px;
  font-size: var(--longform-body-font-size);
  line-height: var(--longform-body-line-height);
  font-weight: 400;
  font-weight: var(--longform-body-font-weight);
  color: #6b6685;
  color: var(--longform-body-color);
  margin-bottom: 1rem;
  margin-bottom: var(--longform-body-margin-bottom);
}

.longform-body p:last-child {
  margin-bottom: 0;
}

.longform-body ul,
.longform-body ol {
  margin-bottom: 1rem;
  margin-bottom: var(--longform-list-margin-bottom);
  padding-left: 1.5rem;
  padding-left: var(--space-6);
}

.longform-body li {
  font-size: 16px;
  font-size: var(--longform-list-font-size);
  line-height: var(--longform-list-line-height);
  color: #6b6685;
  color: var(--longform-list-color);
  margin-bottom: 0.5rem;
  margin-bottom: var(--longform-list-item-margin-bottom);
}

.longform-body li:last-child {
  margin-bottom: 0;
}

.longform-body ul li {
  list-style-type: disc;
}

.longform-body ol li {
  list-style-type: decimal;
}

.longform-body blockquote {
  margin: 1.5rem 0;
  margin: var(--space-6) 0;
  padding: 1rem 1.5rem;
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid #15b79e;
  border-left: 4px solid var(--color-teal-500);
  background-color: var(--color-background-secondary);
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  text-align: left;
}

.longform-body blockquote p {
  font-style: italic;
  color: #1d1d1b;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  margin-bottom: var(--space-2);
}

.longform-body blockquote p:last-child {
  margin-bottom: 0;
}

.longform-body code {
  font-family: var(--font-mono);
  font-size: 14px;
  font-size: var(--text-sm);
  background-color: var(--color-background-secondary);
  padding: 0.25rem 0.5rem;
  padding: var(--space-1) var(--space-2);
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
  color: #1d1d1b;
  color: var(--color-text-primary);
}

.longform-body pre {
  background-color: var(--color-background-secondary);
  padding: 1rem;
  padding: var(--space-4);
  border-radius: 0.5rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1rem 0;
  margin: var(--space-4) 0;
}

.longform-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 14px;
  font-size: var(--text-sm);
  line-height: 1.5;
  line-height: var(--leading-base);
}

.longform-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  margin: var(--space-6) 0;
  text-align: left;
}

.longform-body th,
.longform-body td {
  padding: 0.75rem 1rem;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.longform-body th {
  font-weight: 600;
  font-weight: var(--font-semibold);
  color: #1d1d1b;
  color: var(--color-text-primary);
  background-color: var(--color-background-secondary);
}

.longform-body td {
  color: #6b6685;
  color: var(--color-text-secondary);
}

/* Links */

.longform-body a {
  color: #0f8679;
  color: var(--longform-link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-underline-offset: var(--longform-link-underline-offset);
  transition: color 0.2s ease;
}

.longform-body a:hover {
  color: #0d7068;
  color: var(--longform-link-hover-color);
}

.longform-body a:focus {
  outline: 2px solid #15b79e;
  outline: 2px solid var(--color-teal-500);
  outline-offset: 2px;
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
}

/* Heading anchor links */

.longform-body h1 .header-anchor,
.longform-body h2 .header-anchor,
.longform-body h3 .header-anchor,
.longform-body h4 .header-anchor,
.longform-body h5 .header-anchor,
.longform-body h6 .header-anchor {
  opacity: 0;
  color: var(--color-text-tertiary);
  text-decoration: none;
  font-weight: 400;
  font-weight: var(--font-normal);
  margin-left: 0.5rem;
  margin-left: var(--space-2);
  transition: opacity 0.2s ease;
}

.longform-body h1:hover .header-anchor,
.longform-body h2:hover .header-anchor,
.longform-body h3:hover .header-anchor,
.longform-body h4:hover .header-anchor,
.longform-body h5:hover .header-anchor,
.longform-body h6:hover .header-anchor {
  opacity: 1;
}

.longform-body .header-anchor:hover {
  color: #0f8679;
  color: var(--color-teal-600);
}

/* Table of contents wrapper positioning */

.table-of-contents-wrapper {
  /* Hidden on mobile and tablet - only show on desktop */
  display: none;
}

@media (min-width: 1024px) {
  .table-of-contents-wrapper {
    display: block;
    position: fixed;
    top: calc(80px + 1.5rem);
    top: calc(var(--header-height, 80px) + var(--space-6));
    right: 6.5rem;
    right: var(--grid-margin);
    width: 20rem;
    width: var(--longform-toc-width);
    height: calc(
      100vh - 80px - 1.5rem - 1rem
    );
    height: calc(
      100vh - var(--header-height, 80px) - var(--space-6) - var(--space-4)
    );
    overflow-y: auto;
    z-index: 10;
  }
}

/* Print styles */

@media print {
  .longform-container {
    display: block;
  }

  .table-of-contents-wrapper {
    display: none;
  }

  .longform-body h2,
  .longform-body h3,
  .longform-body h4 {
    break-after: avoid;
  }

  .longform-body {
    orphans: 3;
    widows: 3;
  }
}

/* =============================================================================
   Table of Contents Component Styles
   ============================================================================= */

.table-of-contents {
  padding: 0;
  height: calc(100% - 4rem);
  height: calc(100% - var(--longform-toc-content-top-margin));
  margin-top: 4rem;
  margin-top: var(--longform-toc-content-top-margin);
}

.toc-header {
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
}

.toc-title {
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: 600;
  font-weight: var(--font-semibold);
  color: #1d1d1b;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  margin-bottom: var(--space-2);
}

.toc-description {
  font-size: 14px;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-bottom: 0;
}

.toc-nav {
  position: relative;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-item {
  margin-bottom: 0;
}

.toc-item--level-2 {
  padding-left: 1rem;
  padding-left: var(--space-4);
}

.toc-link {
  display: block;
  padding: 0.25rem 0;
  padding: var(--space-1) 0;
  font-size: 14px;
  font-size: var(--longform-toc-font-size);
  line-height: 1.5;
  line-height: var(--longform-toc-line-height);
  color: #6b6685;
  color: var(--longform-toc-link-color);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 400;
  font-weight: var(--font-normal);
}

.toc-link:hover {
  color: #1d1d1b;
  color: var(--longform-toc-link-hover-color);
  font-weight: 600;
  font-weight: var(--font-semibold);
}

.toc-link:focus {
  outline: 2px solid #15b79e;
  outline: 2px solid var(--color-teal-500);
  outline-offset: 2px;
  color: #1d1d1b;
  color: var(--color-text-primary);
}

/* No active styling - removed for reliability */

/* Level-specific styling */

.toc-item--level-1 .toc-link {
  font-weight: 500;
  font-weight: var(--longform-toc-h2-font-weight);
}

.toc-item--level-2 .toc-link {
  font-size: 12px;
  font-size: var(--longform-toc-h3-font-size);
  color: var(--longform-toc-h3-color);
  font-weight: 400;
  font-weight: var(--longform-toc-h3-font-weight);
}

.toc-item--level-2 .toc-link:hover {
  color: #1d1d1b;
  color: var(--longform-toc-link-hover-color);
}

/* Empty state */

.toc-empty {
  font-size: 14px;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  font-style: italic;
  text-align: center;
  margin: 0;
}

/* Simplified TOC styles without global resets */

/* TOC is hidden on mobile and tablet - no responsive adjustments needed */

/* Only visible on desktop (1024px+) where it has proper space */

/* TOC Print styles */

@media print {
  .table-of-contents {
    background: none;
    border: 1px solid var(--color-border-light);
    page-break-inside: avoid;
  }

  .toc-link {
    color: #1d1d1b;
    color: var(--color-text-primary);
    text-decoration: none;
  }

  .toc-link::after {
    content: " (" attr(href) ")";
    font-size: 12px;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
  }
}

/* Smooth scrolling enhancement */

html {
  scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .toc-link {
    transition: none;
  }
}

/* Info Section Component */

.info-section {
  background-color: #fff;
  background-color: var(--color-background-light);
  padding: 6rem 0 8rem 0;
  padding: var(--space-24) 0 var(--space-32) 0;
}

.info-section__header {
  text-align: center;
  margin-bottom: 4rem;
  margin-bottom: var(--space-16);
}

.info-section__header-content {
  max-width: 768px;
  max-width: var(--container-md);
  margin: 0 auto;
}

.info-section__title {
  font-size: 48px;
  font-size: var(--text-5xl);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.3;
  line-height: var(--leading-3xl);
  letter-spacing: -0.96px;
  letter-spacing: var(--tracking-ultra-tight);
  color: #141028;
  color: var(--color-gray-900);
  margin-bottom: 1.5rem;
  margin-bottom: var(--space-6);
}

.info-section__subtitle {
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #4a4767;
  color: var(--color-gray-600);
  margin: 0;
}

.info-section__image {
  margin-bottom: 4rem;
  margin-bottom: var(--space-16);
}

.info-section__image-element {
  width: 100%;
  height: auto;
  max-width: 1024px;
  max-width: var(--container-lg);
  margin: 0 auto;
  display: block;
  border-radius: var(--border-radius-lg);
}

.info-section__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  gap: var(--space-8);
  max-width: 1024px;
  max-width: var(--container-lg);
  margin: 0 auto;
}

.info-section__column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  gap: var(--space-4);
}

.info-section__icon {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
  margin-bottom: var(--space-2);
}

.info-section__icon-image {
  width: 1.5rem;
  width: var(--space-6);
  height: 1.5rem;
  height: var(--space-6);
  display: block;
}

.info-section__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--space-2);
}

.info-section__column-title {
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #141028;
  color: var(--color-gray-900);
  margin: 0;
}

.info-section__description {
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #4a4767;
  color: var(--color-gray-600);
  margin: 0;
}

.info-section__action {
  margin-top: 0.5rem;
  margin-top: var(--space-2);
}

.info-section__action-link {
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #0d0e14;
  color: var(--color-gray-800);
  text-decoration: none;
}

.info-section__action-link:hover {
  text-decoration: underline;
}

.info-section__action-text {
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #0d0e14;
  color: var(--color-gray-800);
}

/* Responsive behavior */

@media (max-width: 600px) {
  .info-section {
    padding: 4rem 0 6rem 0;
    padding: var(--space-16) 0 var(--space-24) 0;
  }

  .info-section__header {
    margin-bottom: 3rem;
    margin-bottom: var(--space-12);
  }

  .info-section__title {
    font-size: 48px;
    font-size: var(--text-5xl); /* Responsive scaling handled by tokens */
  }

  .info-section__subtitle {
    font-size: 20px;
    font-size: var(--text-xl); /* Responsive scaling handled by tokens */
  }

  .info-section__columns {
    grid-template-columns: 1fr;
    gap: 3rem;
    gap: var(--space-12);
  }

  .info-section__column {
    gap: 1.5rem;
    gap: var(--space-6);
  }

  .info-section__image {
    margin-bottom: 3rem;
    margin-bottom: var(--space-12);
  }
}

/* 404 Error Page */

.error-404-content {
  background-color: #fff;
  background-color: var(--color-background-light);
  padding-top: 5rem;
  padding-top: var(--space-20);
  padding-bottom: 4rem;
  padding-bottom: var(--space-16);
}

/* Generic Three Column Cards Component */

.generic-three-column-cards {
  padding: 5rem 0;
  padding: var(--space-20) 0;
  background-color: #15161b;
  background-color: var(--color-dark-surface);
}

.generic-three-column-cards--light {
  background-color: #fff;
  background-color: var(--color-background-light);
}

.generic-three-column-cards__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1360px;
  max-width: var(--container-2xl);
  width: 100%;
}

.generic-three-column-cards__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  width: 100%;
  max-width: 1360px;
  max-width: var(--container-2xl);
}

.generic-three-column-cards__card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--space-6);
  padding: 0.75rem 2rem;
  padding: var(--space-3) var(--space-8);
}

.generic-three-column-cards__divider {
  width: 1px;
  width: var(--stroke-width);
  background-color: #15161b;
  background-color: var(--color-dark-surface);
  align-self: stretch;
}

.generic-three-column-cards--light .generic-three-column-cards__divider {
  background-color: #f5f5f4;
  background-color: var(--color-graywarm-100);
}

.generic-three-column-cards__number {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 12px;
  font-size: var(--text-xs);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.43;
  line-height: var(--leading-tight);
  color: #ffbb90;
  color: var(--color-accent-orange);
  margin: 0;
}

.generic-three-column-cards__title {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #fff;
  color: var(--color-base-white);
  margin: 0;
}

.generic-three-column-cards--light .generic-three-column-cards__title {
  color: #1d1d1b;
  color: var(--color-text-primary);
}

.generic-three-column-cards__description {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #a9a29d;
  color: var(--color-graywarm-400);
  margin: 0;
}

.generic-three-column-cards--light .generic-three-column-cards__description {
  color: #6b6685;
  color: var(--color-text-secondary);
}

/* Responsive Styles */

@media (max-width: 1024px) and (min-width: 601px) {
  .generic-three-column-cards__card {
    padding: 0.75rem 1.5rem;
    padding: var(--space-3) var(--space-6);
  }
}

@media (max-width: 600px) {
  .generic-three-column-cards {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .generic-three-column-cards__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    gap: var(--space-8);
  }

  .generic-three-column-cards__card {
    padding: 1.5rem 0;
    padding: var(--space-6) 0;
    gap: 1rem;
    gap: var(--space-4);
  }

  .generic-three-column-cards__divider {
    display: none;
  }
}

/* Generic Headline Subhead Component */

.generic-headline-subhead {
  padding: 3rem 0;
  padding: var(--space-12) 0;
  background-color: #0d0e14;
  background-color: var(--color-background-dark);
}

.generic-headline-subhead--light {
  background-color: #fff;
  background-color: var(--color-background-light);
}

.generic-headline-subhead--hero {
  padding: 6rem 0;
  padding: var(--space-24) 0;
}

.generic-headline-subhead__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1360px;
  max-width: var(--container-2xl);
  width: 100%;
}

.generic-headline-subhead__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--space-6);
  max-width: 70%;
  width: 100%;
}

.generic-headline-subhead__category {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 12px;
  font-size: var(--text-xs);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.43;
  line-height: var(--leading-tight);
  letter-spacing: 1.4px;
  letter-spacing: var(--tracking-wide);
  color: #79716b;
  color: var(--color-graywarm-500);
  margin: 0;
  text-transform: uppercase;
}

.generic-headline-subhead--light .generic-headline-subhead__category {
  color: #79716b;
  color: var(--color-graywarm-500);
}

.generic-headline-subhead__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 48px;
  font-size: var(--heading-section);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.2;
  line-height: var(--heading-section-line-height);
  letter-spacing: -0.96px;
  letter-spacing: var(--heading-section-tracking);
  color: #fff;
  color: var(--color-base-white);
  margin: 0;
}

.generic-headline-subhead--hero .generic-headline-subhead__headline {
  font-size: 56px;
  font-size: var(--text-6xl);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.2;
  line-height: var(--leading-6xl);
  letter-spacing: -0.96px;
  letter-spacing: var(--tracking-ultra-tight);
}

.generic-headline-subhead--light .generic-headline-subhead__headline {
  color: #1d1d1b;
  color: var(--color-text-primary);
}

.generic-headline-subhead__subheading {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #a9a29d;
  color: var(--color-graywarm-400);
  margin: 0;
}

.generic-headline-subhead--light .generic-headline-subhead__subheading {
  color: #6b6685;
  color: var(--color-text-secondary);
}

/* Responsive Styles */

@media (max-width: 600px) {
  .generic-headline-subhead {
    padding: 2rem 0;
    padding: var(--space-8) 0;
  }

  .generic-headline-subhead--hero {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .generic-headline-subhead__content {
    max-width: 100%;
    gap: 1.25rem;
    gap: var(--space-5);
  }

  .generic-headline-subhead--hero .generic-headline-subhead__headline {
    font-size: 40px;
    font-size: var(--text-4xl);
    line-height: 1.2;
    line-height: var(--heading-section-line-height);
    letter-spacing: -0.96px;
    letter-spacing: var(--heading-section-tracking);
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .generic-headline-subhead__content {
    max-width: 75%;
  }
}

/* Generic Two Column Content Component */

.generic-two-column-content {
  padding: 5rem 0;
  padding: var(--space-20) 0;
  background-color: #15161b;
  background-color: var(--color-dark-surface);
}

.generic-two-column-content--light {
  background-color: #fff;
  background-color: var(--color-background-light);
}

.generic-two-column-content__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  gap: var(--space-16);
  align-items: center;
  max-width: 1360px;
  max-width: var(--container-2xl);
  width: 100%;
}

.generic-two-column-content__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--space-6);
}

.generic-two-column-content__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 32px;
  font-size: var(--text-3xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.3;
  line-height: var(--leading-3xl);
  letter-spacing: -0.32px;
  letter-spacing: var(--tracking-tight);
  color: #fff;
  color: var(--color-base-white);
  margin: 0;
}

.generic-two-column-content--light .generic-two-column-content__headline {
  color: #1d1d1b;
  color: var(--color-text-primary);
}

.generic-two-column-content__description {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 16px;
  font-size: var(--text-base);
  font-weight: 300;
  font-weight: var(--font-light);
  line-height: 1.5;
  line-height: var(--leading-base);
  color: #a9a29d;
  color: var(--color-graywarm-400);
  margin: 0;
}

.generic-two-column-content--light .generic-two-column-content__description {
  color: #6b6685;
  color: var(--color-text-secondary);
}

.generic-two-column-content__image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.generic-two-column-content__image {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  border-radius: var(--radius-lg);
}

/* Responsive Styles */

@media (max-width: 1024px) and (min-width: 601px) {
  .generic-two-column-content {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .generic-two-column-content__container {
    gap: 3rem;
    gap: var(--space-12);
  }

  .generic-two-column-content__headline {
    font-size: 24px;
    font-size: var(--text-2xl);
  }
}

@media (max-width: 600px) {
  .generic-two-column-content {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .generic-two-column-content__container {
    grid-template-columns: 1fr;
    gap: 2rem;
    gap: var(--space-8);
  }

  .generic-two-column-content__headline {
    font-size: 24px;
    font-size: var(--text-2xl);
    line-height: 1.33;
    line-height: var(--leading-2xl);
  }

  .generic-two-column-content__description {
    font-size: 14px;
    font-size: var(--text-sm);
  }
}

/* Headline Stats Component */

.headline-stats {
  padding: 5rem 0;
  padding: var(--space-20) 0;
  background-color: #15161b;
  background-color: var(--color-dark-surface);
}

.headline-stats--light {
  background-color: #fff;
  background-color: var(--color-background-light);
}

.headline-stats__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  gap: var(--space-16);
  align-items: center;
  max-width: 1360px;
  max-width: var(--container-2xl);
  width: 100%;
}

.headline-stats__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  gap: var(--space-8);
  max-width: 640px;
  max-width: var(--container-sm);
  padding-right: 2rem;
  padding-right: var(--space-8);
}

.headline-stats__headline {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 40px;
  font-size: var(--text-4xl);
  font-weight: 500;
  font-weight: var(--font-medium);
  line-height: 1.2;
  line-height: var(--leading-4xl);
  letter-spacing: -0.32px;
  letter-spacing: var(--tracking-tight);
  color: #fff;
  color: var(--color-base-white);
  margin: 0;
}

.headline-stats--light .headline-stats__headline {
  color: #1d1d1b;
  color: var(--color-text-primary);
}

.headline-stats__description {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-size: var(--text-lg);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.56;
  line-height: var(--leading-lg);
  color: #a9a29d;
  color: var(--color-graywarm-400);
  margin: 0;
}

.headline-stats--light .headline-stats__description {
  color: #6b6685;
  color: var(--color-text-secondary);
}

.headline-stats__stats {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--space-6);
  padding: 0 3rem;
  padding: 0 var(--space-12);
}

.headline-stats__stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--space-2);
  padding: 1.5rem 0;
  padding: var(--space-6) 0;
  border-top: 1px solid #15161b;
  border-top: var(--stroke-width) solid var(--color-dark-surface);
}

.headline-stats__stat:first-child {
  border-top: none;
  padding-top: 1.5rem;
  padding-top: var(--space-6);
}

.headline-stats--light .headline-stats__stat {
  border-top-color: #f5f5f4;
  border-top-color: var(--color-graywarm-100);
}

.headline-stats__stat-value {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 72px;
  font-size: var(--text-7xl);
  font-weight: 600;
  font-weight: var(--font-semibold);
  line-height: 1.1;
  line-height: var(--leading-7xl);
  letter-spacing: -1.2px;
  letter-spacing: var(--tracking-extra-tight);
  color: #fff;
  color: var(--color-base-white);
  margin: 0;
}

.headline-stats--light .headline-stats__stat-value {
  color: #1d1d1b;
  color: var(--color-text-primary);
}

.headline-stats__stat-description {
  font-family: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system,
    "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
  font-family: var(--font-family-primary);
  font-size: 20px;
  font-size: var(--text-xl);
  font-weight: 400;
  font-weight: var(--font-normal);
  line-height: 1.5;
  line-height: var(--leading-xl);
  color: #fff;
  color: var(--color-base-white);
  margin: 0;
}

.headline-stats--light .headline-stats__stat-description {
  color: #1d1d1b;
  color: var(--color-text-primary);
}

/* Responsive Styles */

@media (max-width: 1024px) and (min-width: 601px) {
  .headline-stats {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .headline-stats__container {
    gap: 3rem;
    gap: var(--space-12);
  }

  .headline-stats__headline {
    font-size: 32px;
    font-size: var(--text-3xl);
  }

  .headline-stats__stat-value {
    font-size: 56px;
    font-size: var(--text-6xl);
  }
}

@media (max-width: 600px) {
  .headline-stats {
    padding: 4rem 0;
    padding: var(--space-16) 0;
  }

  .headline-stats__container {
    grid-template-columns: 1fr;
    gap: 3rem;
    gap: var(--space-12);
  }

  .headline-stats__headline {
    font-size: 32px;
    font-size: var(--text-3xl);
    line-height: 1.3;
    line-height: var(--leading-3xl);
  }

  .headline-stats__description {
    font-size: 16px;
    font-size: var(--text-base);
  }

  .headline-stats__stat-value {
    font-size: 48px;
    font-size: var(--text-5xl);
    line-height: 1.2;
    line-height: var(--leading-5xl);
  }

  .headline-stats__stat-description {
    font-size: 18px;
    font-size: var(--text-lg);
  }

  .headline-stats__content {
    padding-right: 0;
  }

  .headline-stats__stats {
    gap: 1rem;
    gap: var(--space-4);
    padding: 0 1.5rem;
    padding: 0 var(--space-6);
  }

  .headline-stats__stat {
    padding: 1rem 0;
    padding: var(--space-4) 0;
  }

  .headline-stats__stat:first-child {
    padding-top: 1rem;
    padding-top: var(--space-4);
  }
}