/* ==========================================================================
   GLOBAL DESIGN TOKENS (Variables)
   ========================================================================== */
@import url('./fonts.css');
@import url('../apps/salespages/businesspage/assets/animatedIcons.css');
@import url('../apps/salespages/businesspage/assets/animations.css');

:root {
    /* --- Colors (Finalized) --- */
    --color-black: #111111;
    --color-midnight: #2E2E2E;
    --color-grey: #54545c;
    --color-white: #FFFFFF;
    --color-platinum: #B4B4B4;

    --color-pearl: #f5f5f5;
    --color-blue: #5170FF;

    /* --- Typography --- */
    --font-family: 'Inter', sans-serif;

    /* Font Weights */
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-mediumPlus: 550;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Font Sizes (Fluid sizing via clamp for smooth responsiveness) */
    --text-128: clamp(36.495px, 5.474vw, 72.990px);
    --text-112: clamp(32.846px, 5.018vw, 65.691px);
    --text-96: clamp(29.196px, 4.562vw, 58.392px);
    --text-80: clamp(24.634px, 4.106vw, 49.269px);
    --text-72: clamp(21.897px, 3.649vw, 43.794px);
    --text-64: clamp(18.248px, 3.193vw, 36.495px);
    --text-56: clamp(16.423px, 2.737vw, 29.196px);
    --text-52: clamp(15.510px, 2.509vw, 25.547px);
    --text-48: clamp(14.598px, 2.281vw, 21.897px);
    --text-40: clamp(11.861px, 1.825vw, 18.248px);
    --text-32: clamp(10.036px, 1.537vw, 14.598px);
    --text-24: clamp(9.124px, 1.248vw, 12.773px);
    --text-20: clamp(8.211px, 1.056vw, 10.949px);
    --text-16: 14.598px;
    --text-14: 12.773px;

    /* Line Heights */
    --line-height-3xs: 1;
    --line-height-tight: 1.0;
    --line-height-xs: 1.125;
    --line-height-normal: 1.2;
    --line-height-sm: 1.375;
    --line-height-base: 1.5;
    --line-height-lg: 1.625;

    /* Letter Spacing */
    --letter-spacing-xs: -0.025em;
    --letter-spacing-sm: -0.0125em;
    --letter-spacing-base: 0em;
    --letter-spacing-lg: 0.0125em;

    /* --- Spacing & Layout --- */
    --capw: 412px;
    --spacing-3xs: min(0.8vw, calc(var(--capw) * 0.008));
    --spacing-2xs: min(1.7vw, calc(var(--capw) * 0.017));
    --spacing-xs: min(2.6vw, calc(var(--capw) * 0.026));
    --spacing-sm: min(3.5vw, calc(var(--capw) * 0.035));
    --spacing-base: min(4.4vw, calc(var(--capw) * 0.044));
    --spacing-md: min(4.9vw, calc(var(--capw) * 0.048));
    --spacing-lg: min(5.3vw, calc(var(--capw) * 0.053));
    --spacing-xl: min(6.2vw, calc(var(--capw) * 0.062));
    --spacing-2xl: min(7.1vw, calc(var(--capw) * 0.071));
    --spacing-3xl: min(8vw, calc(var(--capw) * 0.08));
    --spacing-4xl: min(12vw, calc(var(--capw) * 0.12));

    /* --- Border Radius --- */
    --radius-3xs: 0.1rem;
    --radius-2xs: 0.2rem;
    --radius-xs: 0.3rem;
    --radius-sm: 0.4rem;
    --radius-base: 0.5rem;
    --radius-lg: 0.6rem;
    --radius-xl: 0.7rem;
    --radius-2xl: 0.8rem;
    --radius-3xl: 0.9rem;
    --radius-full: 50%;
    --radius-none: 0;
}


/* ==========================================================================
   CSS RESET & BASE
   ========================================================================== */
/* global * reset removed */

::selection {
    background: transparent;
    color: inherit;
}

::-moz-selection {
    background: transparent;
    color: inherit;
}

img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

div {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* Strict Rule: No default browser font weights */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: inherit;
}

/* html reset removed */

/* body reset removed */

/* ==========================================================================
   THEME MAPPING (Semantic Variables scoped to Section)
   ========================================================================== */
.dark-theme {
    --bg-page: var(--color-black);
    --bg-card: var(--color-midnight);
    --text-main: var(--color-white);
    --text-desc: var(--color-platinum);
    /* Dimmer description for contrast in dark theme */
    --text-dimmed: var(--color-grey);
    --text-link: var(--color-platinum);
    /* #B4B4B4 for dark theme */
    --icon-bg: var(--color-grey);
    --icon-bg-outlined: var(--color-grey);
    --line-color: var(--color-grey);
}

.light-theme {
    --bg-page: var(--color-white);
    --bg-card: var(--color-pearl);
    --text-main: var(--color-midnight);
    --text-desc: var(--color-grey);
    /* Grey for descriptions on light theme */
    --text-dimmed: var(--color-grey);
    --text-link: var(--color-blue);
    /* #5170FF for light theme */
    --icon-bg: var(--color-white);
    /* White for second-order boxes */
    --icon-bg-outlined: var(--color-pearl);
    /* Pearl for outlined variants on white background */
    --line-color: var(--color-platinum);
}

/* Dynamic Body Background based on Theme */
.sp-page-root {
    background-color: var(--bg-page, #111111);
    color: var(--text-main, #ffffff);
    width: 100%;
    min-height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.sp-page-root * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ==========================================================================
   Section 1: Boxed Single Brief Card
   ========================================================================== */

/* Shared Section Container */
.section-container {
    width: 100%;
    /* Reduced padding to match the tight edges in inspiration */
    padding: var(--spacing-xl) var(--spacing-base);
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    /* Apply Section-Level Theme Variables */
    background-color: var(--bg-page);
    color: var(--text-main);
}

.brief-cards.variant-boxed.layout-single {
    /* Reduced gap between section heading and card */
    gap: var(--spacing-lg);
}

.brief-cards.variant-boxed.layout-single .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.brief-cards.variant-boxed.layout-single .cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.brief-cards.variant-boxed.layout-single .brief-card {
    background-color: var(--bg-card);
    /* Reduced padding inside card to match inspiration */
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    /* Tighter gap inside the card */
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
}

.brief-cards.variant-boxed.layout-single .icon-container {
    /* Increased icon container size to match inspiration */
    width: clamp(48px, 8vw, 64px);
    height: clamp(48px, 8vw, 64px);
    background-color: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
}

.brief-cards.variant-boxed.layout-single .icon-container svg {
    width: clamp(24px, 4vw, 32px);
    height: clamp(24px, 4vw, 32px);
}

.brief-cards.variant-boxed.layout-single .card-heading {
    font-size: var(--text-72);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
}

.brief-cards.variant-boxed.layout-single .card-description {
    font-size: var(--text-48);
    /* Whiter and heavier weight as explicitly requested to match inspiration */
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .section-container {
        padding: 96px 48px;
        max-width: 1200px;
    }

    .brief-cards.variant-boxed.layout-single {
        gap: 64px;
    }

    .brief-cards.variant-boxed.layout-single .cards-wrapper {
        gap: 64px;
    }

    .brief-cards.variant-boxed.layout-single .brief-card {
        padding: 64px;
        max-width: 700px;
        gap: 32px;
    }
}

/* ==========================================================================
   Section 2: Outlined Single Brief Card
   ========================================================================== */
.brief-cards.variant-outlined.layout-single {
    /* Reduced gap to match inspiration */
    gap: var(--spacing-lg);
}

.brief-cards.variant-outlined.layout-single .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.brief-cards.variant-outlined.layout-single .cards-wrapper {
    display: flex;
    flex-direction: column;
}

.brief-cards.variant-outlined.layout-single .brief-card {
    background-color: transparent;
    /* No color */
    padding: var(--spacing-xl) 0;
    /* Padding top and bottom, no padding on sides */
    border-top: 1px solid var(--line-color);
    display: flex;
    flex-direction: column;
    /* Tighter gap inside the card */
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
}

.brief-cards.variant-outlined.layout-single .icon-container {
    width: clamp(48px, 8vw, 64px);
    height: clamp(48px, 8vw, 64px);
    background-color: var(--icon-bg-outlined);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
}

.brief-cards.variant-outlined.layout-single .icon-container svg {
    width: clamp(24px, 4vw, 32px);
    height: clamp(24px, 4vw, 32px);
}

.brief-cards.variant-outlined.layout-single .card-heading {
    font-size: var(--text-72);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
}

.brief-cards.variant-outlined.layout-single .card-description {
    font-size: var(--text-48);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .brief-cards.variant-outlined.layout-single {
        gap: 64px;
    }

    .brief-cards.variant-outlined.layout-single .brief-card {
        padding: 64px 0;
        max-width: 700px;
        gap: 32px;
    }
}

/* ==========================================================================
   Section 3: Boxed Double Brief Cards
   ========================================================================== */
.brief-cards.variant-boxed.layout-double {
    /* Reduced gap to match inspiration */
    gap: var(--spacing-lg);
}

.brief-cards.variant-boxed.layout-double .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.brief-cards.variant-boxed.layout-double .cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.brief-cards.variant-boxed.layout-double .brief-card {
    background-color: var(--bg-card);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
    flex: 1;
    /* Stretch evenly on desktop */
}

.brief-cards.variant-boxed.layout-double .icon-container {
    width: clamp(48px, 8vw, 64px);
    height: clamp(48px, 8vw, 64px);
    background-color: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
}

.brief-cards.variant-boxed.layout-double .icon-container svg {
    width: clamp(24px, 4vw, 32px);
    height: clamp(24px, 4vw, 32px);
}

.brief-cards.variant-boxed.layout-double .card-heading {
    font-size: var(--text-72);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
}

.brief-cards.variant-boxed.layout-double .card-description {
    font-size: var(--text-48);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .brief-cards.variant-boxed.layout-double {
        gap: 64px;
        max-width: 100% !important;
        /* Stretch all the way across */
        padding-left: 16px !important;
        /* Minimal outer edges */
        padding-right: 16px !important;
    }

    .brief-cards.variant-boxed.layout-double .cards-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .brief-cards.variant-boxed.layout-double .brief-card {
        /* Absolute minimal padding inside card to maximize text width */
        padding: 24px;
        gap: 24px;
    }
}

/* ==========================================================================
   Section 4: Outlined Double Brief Cards
   ========================================================================== */
.brief-cards.variant-outlined.layout-double {
    /* Reduced gap to match inspiration */
    gap: var(--spacing-lg);
}

.brief-cards.variant-outlined.layout-double .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.brief-cards.variant-outlined.layout-double .cards-wrapper {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    gap: 0;
}

.brief-cards.variant-outlined.layout-double .brief-card {
    background-color: transparent;
    padding: var(--spacing-xl) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
    border-bottom: 1px solid var(--line-color);
}

.brief-cards.variant-outlined.layout-double .brief-card:last-child {
    border-bottom: none;
}

.brief-cards.variant-outlined.layout-double .icon-container {
    width: clamp(48px, 8vw, 64px);
    height: clamp(48px, 8vw, 64px);
    background-color: var(--icon-bg-outlined);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
}

.brief-cards.variant-outlined.layout-double .icon-container svg {
    width: clamp(24px, 4vw, 32px);
    height: clamp(24px, 4vw, 32px);
}

.brief-cards.variant-outlined.layout-double .card-heading {
    font-size: var(--text-72);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
}

.brief-cards.variant-outlined.layout-double .card-description {
    font-size: var(--text-48);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .brief-cards.variant-outlined.layout-double {
        gap: 64px;
    }

    .brief-cards.variant-outlined.layout-double .cards-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .brief-cards.variant-outlined.layout-double .brief-card {
        padding: 64px 0;
        gap: 32px;
        border-bottom: 1px solid var(--line-color);
    }

    .brief-cards.variant-outlined.layout-double .brief-card:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .brief-cards.variant-outlined.layout-double .brief-card:nth-child(odd) {
        border-right: 1px solid var(--line-color);
        padding-right: 48px;
    }

    .brief-cards.variant-outlined.layout-double .brief-card:nth-child(even) {
        padding-left: 48px;
    }
}

/* ==========================================================================
   Section 5: Boxed Single Detailed Cards
   ========================================================================== */
.detailed-cards.variant-boxed.layout-single.icon-top {
    gap: var(--spacing-lg);
}

.detailed-cards.variant-boxed.layout-single.icon-top .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.detailed-cards.variant-boxed.layout-single.icon-top .cards-wrapper {
    display: flex;
    flex-direction: column;
    /* ALWAYS stacked vertically */
    gap: var(--spacing-sm);
}

.detailed-cards.variant-boxed.layout-single.icon-top .detailed-card {
    background-color: var(--bg-card);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    /* gap between items in card */
    border-radius: var(--radius-none);
}

.detailed-cards.variant-boxed.layout-single.icon-top .icon-container {
    /* Reduced by 1 notch */
    width: clamp(36px, 6vw, 48px);
    height: clamp(36px, 6vw, 48px);
    background-color: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    margin-bottom: var(--spacing-xs);
    /* a bit of extra space below icon */
}

.detailed-cards.variant-boxed.layout-single.icon-top .icon-container svg {
    /* Scaled down icon to match container */
    width: clamp(20px, 3vw, 24px);
    height: clamp(20px, 3vw, 24px);
}

.detailed-cards.variant-boxed.layout-single.icon-top .card-heading {
    /* Adjusted to new intermediate size */
    font-size: var(--text-52);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: var(--line-height-tight);
}

.detailed-cards.variant-boxed.layout-single.icon-top .card-description {
    /* Increased font size */
    font-size: var(--text-52);
    color: var(--text-main);
    /* White in dark mode, matching inspiration image */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    margin-bottom: var(--spacing-xs);
    /* space before link */
}

.detailed-cards.variant-boxed.layout-single.icon-top .card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Increased font size */
    font-size: var(--text-48);
    color: var(--text-link);
    /* Use new theme-aware link color */
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color 0.2s ease;
}

.detailed-cards.variant-boxed.layout-single.icon-top .card-link:hover {
    color: var(--text-main);
}

.detailed-cards.variant-boxed.layout-single.icon-top .card-link svg {
    width: 0.9em;
    height: 0.9em;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .detailed-cards.variant-boxed.layout-single.icon-top {
        gap: 64px;
    }

    .detailed-cards.variant-boxed.layout-single.icon-top .cards-wrapper {
        gap: 32px;
    }

    .detailed-cards.variant-boxed.layout-single.icon-top .detailed-card {
        padding: 64px;
        max-width: 700px;
        /* Restrict width so it doesn't stretch too wide */
        gap: 24px;
    }
}

/* ==========================================================================
   Section 6: Outlined Single Detailed Cards
   ========================================================================== */
.detailed-cards.variant-outlined.layout-single.icon-top {
    gap: var(--spacing-lg);
}

.detailed-cards.variant-outlined.layout-single.icon-top .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.detailed-cards.variant-outlined.layout-single.icon-top .cards-wrapper {
    display: flex;
    flex-direction: column;
    /* ALWAYS stacked vertically */
    /* No gap because border-top separates them */
}

.detailed-cards.variant-outlined.layout-single.icon-top .detailed-card {
    background-color: transparent;
    /* Outlined, no background */
    padding: var(--spacing-xl) 0;
    /* Top and bottom padding */
    border-top: 1px solid var(--line-color);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border-radius: var(--radius-none);
}

.detailed-cards.variant-outlined.layout-single.icon-top .icon-container {
    width: clamp(36px, 6vw, 48px);
    height: clamp(36px, 6vw, 48px);
    background-color: var(--icon-bg-outlined);
    /* specifically mapped for outlined mode */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    margin-bottom: var(--spacing-xs);
}

.detailed-cards.variant-outlined.layout-single.icon-top .icon-container svg {
    width: clamp(20px, 3vw, 24px);
    height: clamp(20px, 3vw, 24px);
}

.detailed-cards.variant-outlined.layout-single.icon-top .card-heading {
    font-size: var(--text-52);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: var(--line-height-tight);
    max-width: 700px;
}

.detailed-cards.variant-outlined.layout-single.icon-top .card-description {
    font-size: var(--text-52);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    margin-bottom: var(--spacing-xs);
    max-width: 700px;
}

.detailed-cards.variant-outlined.layout-single.icon-top .card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-48);
    color: var(--text-link);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color 0.2s ease;
}

.detailed-cards.variant-outlined.layout-single.icon-top .card-link:hover {
    color: var(--text-main);
}

.detailed-cards.variant-outlined.layout-single.icon-top .card-link svg {
    width: 0.9em;
    height: 0.9em;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .detailed-cards.variant-outlined.layout-single.icon-top {
        gap: 64px;
    }

    .detailed-cards.variant-outlined.layout-single.icon-top .detailed-card {
        padding: 64px 0;
        gap: 24px;
    }
}

/* ==========================================================================
   Section 7: Boxed Single Detailed Left Cards
   ========================================================================== */
.detailed-cards.variant-boxed.layout-single.icon-left {
    gap: var(--spacing-lg);
}

.detailed-cards.variant-boxed.layout-single.icon-left .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.detailed-cards.variant-boxed.layout-single.icon-left .cards-wrapper {
    display: flex;
    flex-direction: column;
    /* ALWAYS stacked vertically */
    gap: var(--spacing-sm);
}

.detailed-cards.variant-boxed.layout-single.icon-left .detailed-card {
    background-color: var(--bg-card);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: row;
    /* Horizontal layout for icon and text */
    align-items: flex-start;
    /* Align icon and text at top */
    gap: var(--spacing-md);
    border-radius: var(--radius-none);
}

.detailed-cards.variant-boxed.layout-single.icon-left .card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    /* Reduced gap to pull description up slightly */
    flex: 1;
    /* Allow content to fill remaining space */
    margin-top: 2px;
    /* Subtle push down so S starts explicitly below icon top */
}

.detailed-cards.variant-boxed.layout-single.icon-left .icon-container {
    width: clamp(36px, 6vw, 48px);
    height: clamp(36px, 6vw, 48px);
    background-color: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    flex-shrink: 0;
    /* Prevent icon container from squishing */
}

.detailed-cards.variant-boxed.layout-single.icon-left .icon-container svg {
    width: clamp(20px, 3vw, 24px);
    height: clamp(20px, 3vw, 24px);
}

.detailed-cards.variant-boxed.layout-single.icon-left .card-heading {
    font-size: var(--text-48);
    /* Scaled down so it fits nicely next to the 48px box */
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: var(--line-height-tight);
}

.detailed-cards.variant-boxed.layout-single.icon-left .card-description {
    font-size: var(--text-40);
    /* Scaled down */
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    margin-bottom: var(--spacing-xs);
}

.detailed-cards.variant-boxed.layout-single.icon-left .card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-48);
    color: var(--text-link);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color 0.2s ease;
}

.detailed-cards.variant-boxed.layout-single.icon-left .card-link:hover {
    color: var(--text-main);
}

.detailed-cards.variant-boxed.layout-single.icon-left .card-link svg {
    width: 0.9em;
    height: 0.9em;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .detailed-cards.variant-boxed.layout-single.icon-left {
        gap: 64px;
    }

    .detailed-cards.variant-boxed.layout-single.icon-left .cards-wrapper {
        gap: 32px;
    }

    .detailed-cards.variant-boxed.layout-single.icon-left .detailed-card {
        padding: 64px;
        max-width: 700px;
        gap: 32px;
    }
}

/* ==========================================================================
   Section 8: Outlined Single Detailed Left Cards
   ========================================================================== */
.detailed-cards.variant-outlined.layout-single.icon-left {
    gap: var(--spacing-lg);
}

.detailed-cards.variant-outlined.layout-single.icon-left .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.detailed-cards.variant-outlined.layout-single.icon-left .cards-wrapper {
    display: flex;
    flex-direction: column;
    /* ALWAYS stacked vertically */
    /* No gap because border-top separates them */
}

.detailed-cards.variant-outlined.layout-single.icon-left .detailed-card {
    background-color: transparent;
    /* Outlined, no background */
    padding: var(--spacing-xl) 0;
    /* Top and bottom padding only */
    border-top: 1px solid var(--line-color);
    display: flex;
    flex-direction: row;
    /* Horizontal layout for icon and text */
    align-items: flex-start;
    /* Align icon and text at top */
    gap: var(--spacing-md);
    border-radius: var(--radius-none);
}

.detailed-cards.variant-outlined.layout-single.icon-left .card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    /* Reduced gap to pull description up slightly */
    flex: 1;
    /* Allow content to fill remaining space */
    margin-top: 2px;
    /* Subtle push down so S starts explicitly below icon top */
}

.detailed-cards.variant-outlined.layout-single.icon-left .icon-container {
    width: clamp(36px, 6vw, 48px);
    height: clamp(36px, 6vw, 48px);
    background-color: var(--icon-bg-outlined);
    /* specifically mapped for outlined mode */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    flex-shrink: 0;
    /* Prevent icon container from squishing */
}

.detailed-cards.variant-outlined.layout-single.icon-left .icon-container svg {
    width: clamp(20px, 3vw, 24px);
    height: clamp(20px, 3vw, 24px);
}

.detailed-cards.variant-outlined.layout-single.icon-left .card-heading {
    font-size: var(--text-48);
    /* Scaled down */
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: var(--line-height-tight);
    max-width: 700px;
}

.detailed-cards.variant-outlined.layout-single.icon-left .card-description {
    font-size: var(--text-40);
    /* Scaled down */
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    margin-bottom: var(--spacing-xs);
    max-width: 700px;
}

.detailed-cards.variant-outlined.layout-single.icon-left .card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-48);
    color: var(--text-link);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color 0.2s ease;
}

.detailed-cards.variant-outlined.layout-single.icon-left .card-link:hover {
    color: var(--text-main);
}

.detailed-cards.variant-outlined.layout-single.icon-left .card-link svg {
    width: 0.9em;
    height: 0.9em;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .detailed-cards.variant-outlined.layout-single.icon-left {
        gap: 64px;
    }

    .detailed-cards.variant-outlined.layout-single.icon-left .detailed-card {
        padding: 64px 0;
        gap: 32px;
    }
}

/* ==========================================================================
   Section 9: Boxed Double Detailed Cards
   ========================================================================== */
.detailed-cards.variant-boxed.layout-double.icon-top {
    gap: var(--spacing-lg);
}

.detailed-cards.variant-boxed.layout-double.icon-top .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.detailed-cards.variant-boxed.layout-double.icon-top .cards-wrapper {
    display: flex;
    flex-direction: row;
    /* Side-by-side ALWAYS as requested */
    gap: var(--spacing-sm);
}

.detailed-cards.variant-boxed.layout-double.icon-top .detailed-card {
    background-color: var(--bg-card);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    /* gap between items in card */
    border-radius: var(--radius-none);
    flex: 1;
    /* Stretch evenly */
}

.detailed-cards.variant-boxed.layout-double.icon-top .icon-container {
    width: clamp(36px, 6vw, 48px);
    height: clamp(36px, 6vw, 48px);
    background-color: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    margin-bottom: var(--spacing-xs);
    /* a bit of extra space below icon */
}

.detailed-cards.variant-boxed.layout-double.icon-top .icon-container svg {
    width: clamp(20px, 3vw, 24px);
    height: clamp(20px, 3vw, 24px);
}

.detailed-cards.variant-boxed.layout-double.icon-top .card-heading {
    font-size: var(--text-52);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: var(--line-height-tight);
}

.detailed-cards.variant-boxed.layout-double.icon-top .card-description {
    font-size: var(--text-52);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    margin-bottom: var(--spacing-xs);
    /* space before link */
}

.detailed-cards.variant-boxed.layout-double.icon-top .card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-48);
    color: var(--text-link);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color 0.2s ease;
}

.detailed-cards.variant-boxed.layout-double.icon-top .card-link:hover {
    color: var(--text-main);
}

.detailed-cards.variant-boxed.layout-double.icon-top .card-link svg {
    width: 0.9em;
    height: 0.9em;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .detailed-cards.variant-boxed.layout-double.icon-top {
        gap: 64px;
        max-width: 100% !important;
        /* Stretch all the way across */
        padding-left: 16px !important;
        /* Minimal outer edges */
        padding-right: 16px !important;
    }

    .detailed-cards.variant-boxed.layout-double.icon-top .cards-wrapper {
        /* Minimal gap between cards */
        gap: 12px;
    }

    .detailed-cards.variant-boxed.layout-double.icon-top .detailed-card {
        /* Absolute minimal padding inside card to maximize text width */
        padding: 24px;
        gap: 24px;
    }
}

/* ==========================================================================
   Section 10: Outlined Double Detailed Cards
   ========================================================================== */
.detailed-cards.variant-outlined.layout-double.icon-top {
    gap: var(--spacing-lg);
}

.detailed-cards.variant-outlined.layout-double.icon-top .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.detailed-cards.variant-outlined.layout-double.icon-top .cards-wrapper {
    display: flex;
    flex-direction: row;
    /* Always side-by-side */
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    /* Gap is zero so the vertical border works as a clean separator */
    gap: 0;
}

.detailed-cards.variant-outlined.layout-double.icon-top .detailed-card {
    background-color: transparent;
    /* No color */
    padding: var(--spacing-xl) 0;
    /* Top and bottom padding */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border-radius: var(--radius-none);
    flex: 1;
    /* Stretch evenly */
}

/* Clean padding on sides relative to the vertical line */
.detailed-cards.variant-outlined.layout-double.icon-top .detailed-card:first-child {
    padding-right: var(--spacing-md);
    border-right: 1px solid var(--line-color);
    /* The vertical divider */
}

.detailed-cards.variant-outlined.layout-double.icon-top .detailed-card:last-child {
    padding-left: var(--spacing-md);
}

.detailed-cards.variant-outlined.layout-double.icon-top .icon-container {
    width: clamp(36px, 6vw, 48px);
    height: clamp(36px, 6vw, 48px);
    background-color: var(--icon-bg-outlined);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    margin-bottom: var(--spacing-xs);
}

.detailed-cards.variant-outlined.layout-double.icon-top .icon-container svg {
    width: clamp(20px, 3vw, 24px);
    height: clamp(20px, 3vw, 24px);
}

.detailed-cards.variant-outlined.layout-double.icon-top .card-heading {
    font-size: var(--text-52);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: var(--line-height-tight);
}

.detailed-cards.variant-outlined.layout-double.icon-top .card-description {
    font-size: var(--text-52);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sm);
    margin-bottom: var(--spacing-xs);
}

.detailed-cards.variant-outlined.layout-double.icon-top .card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-48);
    color: var(--text-link);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color 0.2s ease;
}

.detailed-cards.variant-outlined.layout-double.icon-top .card-link:hover {
    color: var(--text-main);
}

.detailed-cards.variant-outlined.layout-double.icon-top .card-link svg {
    width: 0.9em;
    height: 0.9em;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .detailed-cards.variant-outlined.layout-double.icon-top {
        gap: 64px;
    }

    .detailed-cards.variant-outlined.layout-double.icon-top .detailed-card {
        /* On desktop we match the vertical padding of the boxed cards */
        padding: 64px 0;
        gap: 24px;
    }

    .detailed-cards.variant-outlined.layout-double.icon-top .detailed-card:first-child {
        padding-right: 64px;
    }

    .detailed-cards.variant-outlined.layout-double.icon-top .detailed-card:last-child {
        padding-left: 64px;
    }
}

/* ==========================================================================
   Section 11: Boxed Bottom Media Brief Card
   ========================================================================== */
.media-cards.variant-boxed.media-bottom.card-brief {
    gap: var(--spacing-lg);
}

.media-cards.variant-boxed.media-bottom.card-brief .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.media-cards.variant-boxed.media-bottom.card-brief .cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.media-cards.variant-boxed.media-bottom.card-brief .brief-card {
    background-color: var(--bg-card);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
}

.media-cards.variant-boxed.media-bottom.card-brief .card-heading {
    font-size: var(--text-72);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
}

.media-cards.variant-boxed.media-bottom.card-brief .card-description {
    font-size: var(--text-48);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.media-cards.variant-boxed.media-bottom.card-brief .media-wrapper {
    position: relative;
    width: 100%;
    margin-top: var(--spacing-md);
    background-color: #111;
    /* dark background for video/image before load */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.media-cards.variant-boxed.media-bottom.card-brief .media-wrapper video,
.media-cards.variant-boxed.media-bottom.card-brief .media-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.media-cards.variant-boxed.media-bottom.card-brief .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.media-cards.variant-boxed.media-bottom.card-brief .play-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

.media-cards.variant-boxed.media-bottom.card-brief .play-button svg {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px;
    /* visually center the triangle */
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .media-cards.variant-boxed.media-bottom.card-brief {
        gap: 64px;
    }

    .media-cards.variant-boxed.media-bottom.card-brief .cards-wrapper {
        gap: 64px;
    }

    .media-cards.variant-boxed.media-bottom.card-brief .brief-card {
        padding: 64px;
        max-width: 700px;
        gap: 32px;
    }

    .media-cards.variant-boxed.media-bottom.card-brief .media-wrapper {
        margin-top: 32px;
    }
}

/* ==========================================================================
   Section 12: Outlined Bottom Media Brief Card
   ========================================================================== */
.media-cards.variant-outlined.media-bottom.card-brief {
    gap: var(--spacing-lg);
}

.media-cards.variant-outlined.media-bottom.card-brief .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.media-cards.variant-outlined.media-bottom.card-brief .cards-wrapper {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    gap: 0;
}

.media-cards.variant-outlined.media-bottom.card-brief .brief-card:not(:last-child) {
    border-bottom: 1px solid var(--line-color);
}

.media-cards.variant-outlined.media-bottom.card-brief .brief-card {
    background-color: transparent;
    padding: var(--spacing-xl) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
}

.media-cards.variant-outlined.media-bottom.card-brief .card-heading {
    font-size: var(--text-72);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
}

.media-cards.variant-outlined.media-bottom.card-brief .card-description {
    font-size: var(--text-48);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.media-cards.variant-outlined.media-bottom.card-brief .media-wrapper {
    position: relative;
    width: 100%;
    margin-top: var(--spacing-md);
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.media-cards.variant-outlined.media-bottom.card-brief .media-wrapper video,
.media-cards.variant-outlined.media-bottom.card-brief .media-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.media-cards.variant-outlined.media-bottom.card-brief .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.media-cards.variant-outlined.media-bottom.card-brief .play-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

.media-cards.variant-outlined.media-bottom.card-brief .play-button svg {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .media-cards.variant-outlined.media-bottom.card-brief {
        gap: 64px;
    }

    .media-cards.variant-outlined.media-bottom.card-brief .brief-card {
        padding: 64px 0;
        max-width: 700px;
        gap: 32px;
    }

    .media-cards.variant-outlined.media-bottom.card-brief .media-wrapper {
        margin-top: 32px;
    }
}

/* ==========================================================================
   Section 13: Boxed Top Media Brief Card
   ========================================================================== */
.media-cards.variant-boxed.media-top.card-brief {
    gap: var(--spacing-lg);
}

.media-cards.variant-boxed.media-top.card-brief .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.media-cards.variant-boxed.media-top.card-brief .cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.media-cards.variant-boxed.media-top.card-brief .brief-card {
    background-color: var(--bg-card);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
}

.media-cards.variant-boxed.media-top.card-brief .card-heading {
    font-size: var(--text-72);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
}

.media-cards.variant-boxed.media-top.card-brief .card-description {
    font-size: var(--text-48);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.media-cards.variant-boxed.media-top.card-brief .media-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-md);
    background-color: #111;
    /* dark background for video/image before load */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.media-cards.variant-boxed.media-top.card-brief .media-wrapper video,
.media-cards.variant-boxed.media-top.card-brief .media-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.media-cards.variant-boxed.media-top.card-brief .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.media-cards.variant-boxed.media-top.card-brief .play-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

.media-cards.variant-boxed.media-top.card-brief .play-button svg {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px;
    /* visually center the triangle */
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .media-cards.variant-boxed.media-top.card-brief {
        gap: 64px;
    }

    .media-cards.variant-boxed.media-top.card-brief .cards-wrapper {
        gap: 64px;
    }

    .media-cards.variant-boxed.media-top.card-brief .brief-card {
        padding: 64px;
        max-width: 700px;
        gap: 32px;
    }

    .media-cards.variant-boxed.media-top.card-brief .media-wrapper {
        margin-bottom: 32px;
    }
}

/* ==========================================================================
   Section 14: Outlined Top Media Brief Card
   ========================================================================== */
.media-cards.variant-outlined.media-top.card-brief {
    gap: var(--spacing-lg);
}

.media-cards.variant-outlined.media-top.card-brief .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.media-cards.variant-outlined.media-top.card-brief .cards-wrapper {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    gap: 0;
}

.media-cards.variant-outlined.media-top.card-brief .brief-card:not(:last-child) {
    border-bottom: 1px solid var(--line-color);
}

.media-cards.variant-outlined.media-top.card-brief .brief-card {
    background-color: transparent;
    padding: var(--spacing-xl) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
}

.media-cards.variant-outlined.media-top.card-brief .card-heading {
    font-size: var(--text-72);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
}

.media-cards.variant-outlined.media-top.card-brief .card-description {
    font-size: var(--text-48);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.media-cards.variant-outlined.media-top.card-brief .media-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-md);
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.media-cards.variant-outlined.media-top.card-brief .media-wrapper video,
.media-cards.variant-outlined.media-top.card-brief .media-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.media-cards.variant-outlined.media-top.card-brief .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.media-cards.variant-outlined.media-top.card-brief .play-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

.media-cards.variant-outlined.media-top.card-brief .play-button svg {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .media-cards.variant-outlined.media-top.card-brief {
        gap: 64px;
    }

    .media-cards.variant-outlined.media-top.card-brief .brief-card {
        padding: 64px 0;
        max-width: 700px;
        gap: 32px;
    }

    .media-cards.variant-outlined.media-top.card-brief .media-wrapper {
        margin-bottom: 32px;
    }
}

/* ==========================================================================
   Section 15: Boxed Bottom Media Detailed Card
   ========================================================================== */
.media-cards.variant-boxed.media-bottom.card-detailed {
    gap: var(--spacing-lg);
}

.media-cards.variant-boxed.media-bottom.card-detailed .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.media-cards.variant-boxed.media-bottom.card-detailed .cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.media-cards.variant-boxed.media-bottom.card-detailed .detailed-card {
    background-color: var(--bg-card);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
}

.media-cards.variant-boxed.media-bottom.card-detailed .card-heading {
    font-size: var(--text-96);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
    font-weight: var(--font-weight-medium);
}

.media-cards.variant-boxed.media-bottom.card-detailed .card-description {
    font-size: var(--text-56);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.media-cards.variant-boxed.media-bottom.card-detailed .card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-48);
    font-weight: var(--font-weight-medium);
    color: var(--text-link);
    text-decoration: none;
    margin-top: 8px;
    /* a small bump in separation */
    transition: opacity 0.2s ease;
}

.media-cards.variant-boxed.media-bottom.card-detailed .card-link:hover {
    opacity: 0.8;
}

.media-cards.variant-boxed.media-bottom.card-detailed .card-link .link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-cards.variant-boxed.media-bottom.card-detailed .card-link svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.media-cards.variant-boxed.media-bottom.card-detailed .card-link:hover svg {
    transform: translateX(4px);
}

.media-cards.variant-boxed.media-bottom.card-detailed .media-wrapper {
    position: relative;
    width: 100%;
    margin-top: var(--spacing-lg);
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.media-cards.variant-boxed.media-bottom.card-detailed .media-wrapper video,
.media-cards.variant-boxed.media-bottom.card-detailed .media-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.media-cards.variant-boxed.media-bottom.card-detailed .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.media-cards.variant-boxed.media-bottom.card-detailed .play-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

.media-cards.variant-boxed.media-bottom.card-detailed .play-button svg {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .media-cards.variant-boxed.media-bottom.card-detailed {
        gap: 64px;
    }

    .media-cards.variant-boxed.media-bottom.card-detailed .cards-wrapper {
        gap: 64px;
    }

    .media-cards.variant-boxed.media-bottom.card-detailed .detailed-card {
        padding: 64px;
        max-width: 700px;
        gap: 32px;
    }

    .media-cards.variant-boxed.media-bottom.card-detailed .card-link {
        margin-top: 0px;
    }

    .media-cards.variant-boxed.media-bottom.card-detailed .media-wrapper {
        margin-top: 32px;
    }
}

/* ==========================================================================
   Section 16: Outlined Bottom Media Detailed Card
   ========================================================================== */
.media-cards.variant-outlined.media-bottom.card-detailed {
    gap: var(--spacing-lg);
}

.media-cards.variant-outlined.media-bottom.card-detailed .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.media-cards.variant-outlined.media-bottom.card-detailed .cards-wrapper {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    gap: 0;
}

.media-cards.variant-outlined.media-bottom.card-detailed .detailed-card:not(:last-child) {
    border-bottom: 1px solid var(--line-color);
}

.media-cards.variant-outlined.media-bottom.card-detailed .detailed-card {
    background-color: transparent;
    padding: var(--spacing-xl) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
}

.media-cards.variant-outlined.media-bottom.card-detailed .card-heading {
    font-size: var(--text-96);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
    font-weight: var(--font-weight-medium);
}

.media-cards.variant-outlined.media-bottom.card-detailed .card-description {
    font-size: var(--text-56);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.media-cards.variant-outlined.media-bottom.card-detailed .card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-48);
    font-weight: var(--font-weight-medium);
    color: var(--text-link);
    text-decoration: none;
    margin-top: 8px;
    transition: opacity 0.2s ease;
}

.media-cards.variant-outlined.media-bottom.card-detailed .card-link:hover {
    opacity: 0.8;
}

.media-cards.variant-outlined.media-bottom.card-detailed .card-link .link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-cards.variant-outlined.media-bottom.card-detailed .card-link svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.media-cards.variant-outlined.media-bottom.card-detailed .card-link:hover svg {
    transform: translateX(4px);
}

.media-cards.variant-outlined.media-bottom.card-detailed .media-wrapper {
    position: relative;
    width: 100%;
    margin-top: var(--spacing-lg);
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.media-cards.variant-outlined.media-bottom.card-detailed .media-wrapper video,
.media-cards.variant-outlined.media-bottom.card-detailed .media-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.media-cards.variant-outlined.media-bottom.card-detailed .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.media-cards.variant-outlined.media-bottom.card-detailed .play-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

.media-cards.variant-outlined.media-bottom.card-detailed .play-button svg {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .media-cards.variant-outlined.media-bottom.card-detailed {
        gap: 64px;
    }

    .media-cards.variant-outlined.media-bottom.card-detailed .detailed-card {
        padding: 64px 0;
        max-width: 700px;
        gap: 32px;
    }

    .media-cards.variant-outlined.media-bottom.card-detailed .card-link {
        margin-top: 0px;
    }

    .media-cards.variant-outlined.media-bottom.card-detailed .media-wrapper {
        margin-top: 32px;
    }
}

/* ==========================================================================
   Section 17: Boxed Top Media Detailed Card
   ========================================================================== */
.media-cards.variant-boxed.media-top.card-detailed {
    gap: var(--spacing-lg);
}

.media-cards.variant-boxed.media-top.card-detailed .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.media-cards.variant-boxed.media-top.card-detailed .cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.media-cards.variant-boxed.media-top.card-detailed .detailed-card {
    background-color: var(--bg-card);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
}

.media-cards.variant-boxed.media-top.card-detailed .card-heading {
    font-size: var(--text-96);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
    font-weight: var(--font-weight-medium);
}

.media-cards.variant-boxed.media-top.card-detailed .card-description {
    font-size: var(--text-56);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.media-cards.variant-boxed.media-top.card-detailed .card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-48);
    font-weight: var(--font-weight-medium);
    color: var(--text-link);
    text-decoration: none;
    margin-top: 8px;
    transition: opacity 0.2s ease;
}

.media-cards.variant-boxed.media-top.card-detailed .card-link:hover {
    opacity: 0.8;
}

.media-cards.variant-boxed.media-top.card-detailed .card-link .link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-cards.variant-boxed.media-top.card-detailed .card-link svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.media-cards.variant-boxed.media-top.card-detailed .card-link:hover svg {
    transform: translateX(4px);
}

.media-cards.variant-boxed.media-top.card-detailed .media-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-lg);
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.media-cards.variant-boxed.media-top.card-detailed .media-wrapper video,
.media-cards.variant-boxed.media-top.card-detailed .media-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.media-cards.variant-boxed.media-top.card-detailed .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.media-cards.variant-boxed.media-top.card-detailed .play-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

.media-cards.variant-boxed.media-top.card-detailed .play-button svg {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .media-cards.variant-boxed.media-top.card-detailed {
        gap: 64px;
    }

    .media-cards.variant-boxed.media-top.card-detailed .cards-wrapper {
        gap: 64px;
    }

    .media-cards.variant-boxed.media-top.card-detailed .detailed-card {
        padding: 64px;
        max-width: 700px;
        gap: 32px;
    }

    .media-cards.variant-boxed.media-top.card-detailed .card-link {
        margin-top: 0px;
    }

    .media-cards.variant-boxed.media-top.card-detailed .media-wrapper {
        margin-bottom: 32px;
    }
}

/* ==========================================================================
   Section 18: Outlined Top Media Detailed Card
   ========================================================================== */
.media-cards.variant-outlined.media-top.card-detailed {
    gap: var(--spacing-lg);
}

.media-cards.variant-outlined.media-top.card-detailed .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.media-cards.variant-outlined.media-top.card-detailed .cards-wrapper {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    gap: 0;
}

.media-cards.variant-outlined.media-top.card-detailed .detailed-card:not(:last-child) {
    border-bottom: 1px solid var(--line-color);
}

.media-cards.variant-outlined.media-top.card-detailed .detailed-card {
    background-color: transparent;
    padding: var(--spacing-xl) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base);
    border-radius: var(--radius-none);
}

.media-cards.variant-outlined.media-top.card-detailed .card-heading {
    font-size: var(--text-96);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
    font-weight: var(--font-weight-medium);
}

.media-cards.variant-outlined.media-top.card-detailed .card-description {
    font-size: var(--text-56);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.media-cards.variant-outlined.media-top.card-detailed .card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-48);
    font-weight: var(--font-weight-medium);
    color: var(--text-link);
    text-decoration: none;
    margin-top: 8px;
    transition: opacity 0.2s ease;
}

.media-cards.variant-outlined.media-top.card-detailed .card-link:hover {
    opacity: 0.8;
}

.media-cards.variant-outlined.media-top.card-detailed .card-link .link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-cards.variant-outlined.media-top.card-detailed .card-link svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.media-cards.variant-outlined.media-top.card-detailed .card-link:hover svg {
    transform: translateX(4px);
}

.media-cards.variant-outlined.media-top.card-detailed .media-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-lg);
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.media-cards.variant-outlined.media-top.card-detailed .media-wrapper video,
.media-cards.variant-outlined.media-top.card-detailed .media-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.media-cards.variant-outlined.media-top.card-detailed .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.media-cards.variant-outlined.media-top.card-detailed .play-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

.media-cards.variant-outlined.media-top.card-detailed .play-button svg {
    width: 32px;
    height: 32px;
    color: white;
    margin-left: 4px;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .media-cards.variant-outlined.media-top.card-detailed {
        gap: 64px;
    }

    .media-cards.variant-outlined.media-top.card-detailed .detailed-card {
        padding: 64px 0;
        max-width: 700px;
        gap: 32px;
    }

    .media-cards.variant-outlined.media-top.card-detailed .card-link {
        margin-top: 0px;
    }

    .media-cards.variant-outlined.media-top.card-detailed .media-wrapper {
        margin-bottom: 32px;
    }
}

/* ==========================================================================
   Section 19: Boxed Center Statistics
   ========================================================================== */
.statistics.variant-boxed.alignment-center {
    gap: var(--spacing-lg);
    text-align: center;
}

.statistics.variant-boxed.alignment-center .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.statistics.variant-boxed.alignment-center .cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.statistics.variant-boxed.alignment-center .stat-card {
    background-color: var(--bg-card);
    padding: 40px var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: var(--radius-none);
    align-items: center;
    justify-content: center;
}

.statistics.variant-boxed.alignment-center .stat-heading {
    font-size: var(--text-96);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
    font-weight: var(--font-weight-medium);
}

.statistics.variant-boxed.alignment-center .stat-description {
    font-size: var(--text-56);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    max-width: 600px;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .statistics.variant-boxed.alignment-center {
        gap: 64px;
    }

    .statistics.variant-boxed.alignment-center .cards-wrapper {
        gap: 32px;
    }

    .statistics.variant-boxed.alignment-center .stat-card {
        padding: 68px 64px;
        gap: 16px;
    }
}

/* ==========================================================================
   Section 20: Outlined Center Statistics
   ========================================================================== */
.statistics.variant-outlined.alignment-center {
    gap: var(--spacing-lg);
    text-align: center;
}

.statistics.variant-outlined.alignment-center .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
}

.statistics.variant-outlined.alignment-center .cards-wrapper {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    gap: 0;
}

.statistics.variant-outlined.alignment-center .stat-card:not(:last-child) {
    border-bottom: 1px solid var(--line-color);
}

.statistics.variant-outlined.alignment-center .stat-card {
    background-color: transparent;
    padding: 40px var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: var(--radius-none);
    align-items: center;
    justify-content: center;
}

.statistics.variant-outlined.alignment-center .stat-heading {
    font-size: var(--text-96);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
    font-weight: var(--font-weight-medium);
}

.statistics.variant-outlined.alignment-center .stat-description {
    font-size: var(--text-56);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    max-width: 600px;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .statistics.variant-outlined.alignment-center {
        gap: 64px;
    }

    .statistics.variant-outlined.alignment-center .stat-card {
        padding: 68px 64px;
        gap: 16px;
    }
}

/* ==========================================================================
   Section 21: Boxed Left Statistics
   ========================================================================== */
.statistics.variant-boxed.alignment-left {
    gap: var(--spacing-lg);
}

.statistics.variant-boxed.alignment-left .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
    text-align: left;
}

.statistics.variant-boxed.alignment-left .cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.statistics.variant-boxed.alignment-left .stat-card {
    background-color: var(--bg-card);
    padding: 40px var(--spacing-lg);
    display: flex;
    flex-direction: row;
    position: relative;
    border-radius: var(--radius-none);
    overflow: hidden;
}

.statistics.variant-boxed.alignment-left .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 2;
    max-width: 65%;
}

.statistics.variant-boxed.alignment-left .stat-heading {
    font-size: var(--text-96);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
    font-weight: var(--font-weight-medium);
}

.statistics.variant-boxed.alignment-left .stat-description {
    font-size: var(--text-56);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.statistics.variant-boxed.alignment-left .graphic-wrapper {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 160px;
    height: 160px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    color: var(--text-desc);
    pointer-events: none;
}

.statistics.variant-boxed.alignment-left .graphic-wrapper img,
.statistics.variant-boxed.alignment-left .graphic-wrapper svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .statistics.variant-boxed.alignment-left {
        gap: 64px;
    }

    .statistics.variant-boxed.alignment-left .cards-wrapper {
        gap: 32px;
    }

    .statistics.variant-boxed.alignment-left .stat-card {
        padding: 68px 64px;
    }

    .statistics.variant-boxed.alignment-left .content-wrapper {
        gap: 16px;
    }

    .statistics.variant-boxed.alignment-left .graphic-wrapper {
        right: -40px;
        bottom: -40px;
        width: 280px;
        height: 280px;
    }
}

/* ==========================================================================
   Section 22: Outlined Left Statistics
   ========================================================================== */
.statistics.variant-outlined.alignment-left {
    gap: var(--spacing-lg);
}

.statistics.variant-outlined.alignment-left .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
    text-align: left;
}

.statistics.variant-outlined.alignment-left .cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.statistics.variant-outlined.alignment-left .stat-card {
    background-color: transparent;
    border: 1px solid var(--line-color);
    padding: 40px var(--spacing-lg);
    display: flex;
    flex-direction: row;
    position: relative;
    border-radius: var(--radius-none);
    overflow: hidden;
}

.statistics.variant-outlined.alignment-left .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 2;
    max-width: 65%;
}

.statistics.variant-outlined.alignment-left .stat-heading {
    font-size: var(--text-96);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
    font-weight: var(--font-weight-medium);
}

.statistics.variant-outlined.alignment-left .stat-description {
    font-size: var(--text-56);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.statistics.variant-outlined.alignment-left .graphic-wrapper {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 160px;
    height: 160px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    color: var(--text-desc);
    pointer-events: none;
}

.statistics.variant-outlined.alignment-left .graphic-wrapper img,
.statistics.variant-outlined.alignment-left .graphic-wrapper svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .statistics.variant-outlined.alignment-left {
        gap: 64px;
    }

    .statistics.variant-outlined.alignment-left .cards-wrapper {
        gap: 32px;
    }

    .statistics.variant-outlined.alignment-left .stat-card {
        padding: 68px 64px;
    }

    .statistics.variant-outlined.alignment-left .content-wrapper {
        gap: 16px;
    }

    .statistics.variant-outlined.alignment-left .graphic-wrapper {
        right: -40px;
        bottom: -40px;
        width: 280px;
        height: 280px;
    }
}

/* ==========================================================================
   Section 23: Numbered Timeline
   ========================================================================== */
.numbered-timeline {
    gap: var(--spacing-lg);
}

.numbered-timeline .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
    text-align: left;
}

.numbered-timeline .timeline-wrapper {
    display: flex;
    flex-direction: column;
}

.numbered-timeline .timeline-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 32px 0;
    border-top: 1px solid var(--line-color);
}

.numbered-timeline .timeline-number {
    font-size: var(--text-96);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
    width: 60px;
    flex-shrink: 0;
    line-height: var(--line-height-tight);
}

.numbered-timeline .timeline-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.numbered-timeline .timeline-title {
    font-size: var(--text-96);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.numbered-timeline .timeline-desc {
    font-size: var(--text-56);
    color: var(--text-main);
    line-height: var(--line-height-normal);
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .numbered-timeline {
        gap: 64px;
    }

    .numbered-timeline .timeline-item {
        padding: 64px 0;
    }

    .numbered-timeline .timeline-number {
        width: 120px;
    }

    .numbered-timeline .timeline-content {
        gap: 24px;
    }
}

/* ==========================================================================
   Section 24: Split Two Column Table
   ========================================================================== */
.split-two-column-table {
    gap: var(--spacing-lg);
}

.split-two-column-table .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
    text-align: left;
    margin-bottom: var(--spacing-md);
}

.split-two-column-table .table-wrapper {
    display: flex;
    flex-direction: column;
}

.split-two-column-table .table-header-row {
    display: flex;
    flex-direction: row;
    padding-bottom: 16px;
    font-size: var(--text-56);
    font-weight: var(--font-weight-medium);
    color: var(--text-main);
}

.split-two-column-table .table-row {
    display: flex;
    flex-direction: row;
    padding: 32px 0;
    border-top: 1px solid var(--line-color);
    align-items: flex-start;
}

.split-two-column-table .table-row:last-child {
    border-bottom: 1px solid var(--line-color);
}

.split-two-column-table .col-left {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding-right: 16px;
}

.split-two-column-table .col-right {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.split-two-column-table .row-title {
    font-size: var(--text-80);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.split-two-column-table .row-desc {
    font-size: var(--text-56);
    color: var(--text-main);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-medium);
}

.split-two-column-table.even-fonts .row-title {
    font-size: var(--text-56);
    line-height: var(--line-height-normal);
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .split-two-column-table {
        gap: 64px;
    }

    .split-two-column-table .section-heading {
        margin-bottom: 48px;
    }

    .split-two-column-table .table-header-row {
        padding-bottom: 24px;
    }

    .split-two-column-table .table-row {
        padding: 48px 0;
    }

    .split-two-column-table .col-left {
        padding-right: 32px;
    }

    .split-two-column-table .col-right {
        width: 50%;
    }
}

/* ==========================================================================
   Section 25: Categorized Accordion
   ========================================================================== */
.categorized-accordion {
    gap: var(--spacing-lg);
}

.categorized-accordion .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
    text-align: left;
}

.categorized-accordion .categories-wrapper {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.categorized-accordion .categories-wrapper::-webkit-scrollbar {
    display: none;
}

.categorized-accordion .category-btn {
    padding: 16px 24px;
    border-radius: var(--radius-none);
    background-color: transparent;
    color: var(--text-desc);
    font-size: var(--text-56);
    font-weight: var(--font-weight-medium);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-family);
}

.categorized-accordion .category-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
}

.light-theme .categorized-accordion .category-btn:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.categorized-accordion .category-btn:active {
    transform: scale(0.97);
}

.categorized-accordion .category-btn.active {
    background-color: var(--bg-card);
    color: var(--text-main);
}

.categorized-accordion .accordion-wrapper {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-color);
}

.categorized-accordion .accordion-item {
    border-bottom: 1px solid var(--line-color);
}

.categorized-accordion .accordion-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    cursor: pointer;
    color: var(--text-main);
    transition: color 0.3s;
}

.categorized-accordion .accordion-title {
    font-size: var(--text-64);
    font-weight: var(--font-weight-semibold);
    margin-right: 16px;
    line-height: var(--line-height-tight);
}

.categorized-accordion .accordion-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--text-desc);
}

.categorized-accordion .accordion-item.active .accordion-icon {
    transform: rotate(180deg);
    color: var(--text-main);
}

.categorized-accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.categorized-accordion .accordion-item.active .accordion-content {
    max-height: 800px;
    padding-bottom: 24px;
}

.categorized-accordion .accordion-desc {
    font-size: var(--text-56);
    color: var(--text-main);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-medium);
}

@media (min-width: 768px) {
    .categorized-accordion {
        gap: 64px;
    }

    .categorized-accordion .categories-wrapper {
        padding-bottom: 16px;
    }

    .categorized-accordion .accordion-header {
        padding: 40px 0;
    }

    .categorized-accordion .accordion-item.active .accordion-content {
        padding-bottom: 40px;
    }
}

/* ==========================================================================
   Section 26: Boxed Accordion
   ========================================================================== */
.boxed-accordion {
    gap: var(--spacing-lg);
}

.boxed-accordion .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
    text-align: left;
    margin-bottom: var(--spacing-md);
}

.boxed-accordion .accordion-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.boxed-accordion .accordion-item {
    background-color: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-none);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.boxed-accordion .accordion-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.boxed-accordion .header-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.boxed-accordion .item-date {
    font-size: var(--text-48);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
}

.boxed-accordion .item-title {
    font-size: var(--text-56);
    color: var(--text-main);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.boxed-accordion .accordion-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--text-desc);
}

.boxed-accordion .accordion-item.active .accordion-icon {
    transform: rotate(180deg);
    color: var(--text-main);
}

.boxed-accordion .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, margin-top 0.4s ease;
    margin-top: 0;
}

.boxed-accordion .accordion-item.active .accordion-content {
    max-height: 800px;
    margin-top: 16px;
}

.boxed-accordion .accordion-desc {
    font-size: var(--text-56);
    color: var(--text-main);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-medium);
}

@media (min-width: 768px) {
    .boxed-accordion {
        gap: 64px;
    }

    .boxed-accordion .section-heading {
        margin-bottom: 48px;
    }

    .boxed-accordion .accordion-item {
        padding: 32px;
    }

    .boxed-accordion .accordion-item.active .accordion-content {
        margin-top: 24px;
    }
}

/* ==========================================================================
   Section 27: Blog List
   ========================================================================== */
.blog-list {
    gap: var(--spacing-lg);
}

.blog-list .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
    text-align: left;
    margin-bottom: var(--spacing-md);
}

.blog-list .blog-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-list .blog-card {
    background-color: var(--bg-card);
    padding: 24px;
    border-radius: var(--radius-none);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: background-color 0.3s ease;
}

.blog-list .blog-card:hover {
    background-color: var(--line-color);
}

.blog-list .blog-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-list .blog-date {
    font-size: var(--text-48);
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
}

.blog-list .blog-title {
    font-size: var(--text-64);
    color: var(--text-main);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.blog-list .blog-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.blog-list .author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-list .author-info {
    font-size: var(--text-48);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
}

.blog-list .author-info span {
    color: var(--text-desc);
}

@media (min-width: 768px) {
    .blog-list {
        gap: 64px;
    }

    .blog-list .section-heading {
        margin-bottom: 48px;
    }

    .blog-list .blog-card {
        padding: 32px;
    }
}

/* ==========================================================================
   Section 28: Business CTA
   ========================================================================== */
.business-cta {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.business-cta .tagline {
    font-size: var(--text-48);
    color: var(--text-main);
    font-weight: var(--font-weight-semibold);
}

.business-cta .heading {
    font-size: var(--text-96);
    color: var(--text-main);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-xs);
}

.business-cta .description {
    font-size: var(--text-56);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.business-cta .buttons-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.business-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    /* Reduced from 16px 32px to prevent easy wrapping */
    font-size: var(--text-56);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-none);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.business-cta .btn:active {
    transform: translateY(0) scale(0.98);
}

.business-cta .btn svg {
    margin-left: 8px;
    width: 20px;
    height: 20px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.business-cta .btn:hover svg {
    transform: translateX(3px);
}

/* Light Theme overrides for buttons */
.light-theme.business-cta .btn-primary {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}

.light-theme.business-cta .btn-primary:hover {
    background-color: #242424;
    border-color: #242424;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.light-theme.business-cta .btn-secondary {
    background-color: var(--color-platinum);
    color: var(--color-black);
    border-color: var(--color-platinum);
}

.light-theme.business-cta .btn-secondary:hover {
    background-color: #A3A3A3;
    border-color: #A3A3A3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Dark Theme overrides for buttons */
.dark-theme.business-cta .btn-primary {
    background-color: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}

.dark-theme.business-cta .btn-primary:hover {
    background-color: #ECECEC;
    border-color: #ECECEC;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.16);
}

.dark-theme.business-cta .btn-secondary {
    background-color: var(--bg-card);
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark-theme.business-cta .btn-secondary:hover {
    background-color: #383838;
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
    .business-cta {
        gap: 32px;
    }
}

/* ==========================================================================
   Section 29: Image Carousel
   ========================================================================== */
.image-carousel {
    gap: var(--spacing-lg);
    overflow: hidden;
}

.image-carousel .section-heading {
    font-size: var(--text-96);
    letter-spacing: var(--letter-spacing-xs);
    line-height: var(--line-height-tight);
    text-align: left;
    margin-bottom: var(--spacing-md);
}

.image-carousel .carousel-wrapper {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 24px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.image-carousel .carousel-wrapper::-webkit-scrollbar {
    display: none;
}

.image-carousel .carousel-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: calc(50% - 8px);
    width: calc(50% - 8px);
    scroll-snap-align: start;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.image-carousel .carousel-card:hover {
    opacity: 0.9;
}

.image-carousel .card-image-block {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    background-color: var(--bg-card);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-none);
}

.image-carousel .card-image-block::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.image-carousel .card-logo-overlay {
    position: absolute;
    bottom: 16px;
    left: 16px;
    font-size: var(--text-56);
    /* slightly smaller for the 2-column layout */
    color: var(--color-white);
    font-weight: var(--font-weight-black);
    z-index: 2;
}

.image-carousel .card-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.image-carousel .card-title {
    font-size: var(--text-52);
    /* Adjusted for 2-column layout */
    color: var(--text-main);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.image-carousel .card-link {
    display: flex;
    align-items: center;
    font-size: var(--text-40);
    /* Adjusted for 2-column layout */
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
}

.image-carousel .card-link svg {
    width: 16px;
    height: 16px;
    margin-left: 4px;
}

@media (min-width: 768px) {
    .image-carousel {
        gap: 64px;
    }

    .image-carousel .section-heading {
        margin-bottom: 48px;
    }

    .image-carousel .card-title {
        font-size: var(--text-56);
    }

    .image-carousel .card-link {
        font-size: var(--text-48);
    }
}

/* ==========================================================================
   Section 30: Center Boxed Multi-Quote
   ========================================================================== */
.multi-quote.variant-boxed.alignment-center {}

.multi-quote.variant-boxed.alignment-center .multi-quote-card {
    background-color: var(--bg-card);
    display: flex;
    flex-direction: column;
    text-align: center;
    border-radius: var(--radius-none);
    width: 100%;
    margin: 0 auto;
}

.multi-quote.variant-boxed.alignment-center .multi-quote-content {
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.multi-quote.variant-boxed.alignment-center .company-logo {
    font-size: var(--text-64);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
}

.multi-quote.variant-boxed.alignment-center .quote-text {
    font-size: var(--text-80);
    color: var(--text-main);
    font-weight: var(--font-weight-mediumPlus);
    line-height: var(--line-height-normal);
    max-width: 800px;
    margin: 0 auto;
}

.multi-quote.variant-boxed.alignment-center .quote-author {
    font-size: var(--text-56);
    color: var(--text-main);
}

.multi-quote.variant-boxed.alignment-center .quote-author span {
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
}

.multi-quote.variant-boxed.alignment-center .multi-quote-tabs {
    border-top: 1px solid var(--line-color);
    padding: 24px 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.multi-quote.variant-boxed.alignment-center .tab-btn {
    background: none;
    border: none;
    font-size: var(--text-56);
    font-weight: var(--font-weight-semibold);
    color: var(--text-desc);
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    padding: 8px 16px;
}

.multi-quote.variant-boxed.alignment-center .tab-btn:hover {
    color: var(--text-main);
    transform: translateY(-1px);
}

.multi-quote.variant-boxed.alignment-center .tab-btn:active {
    transform: scale(0.97);
}

.multi-quote.variant-boxed.alignment-center .tab-btn.active {
    color: var(--text-main);
}

@media (min-width: 768px) {
    .multi-quote.variant-boxed.alignment-center .multi-quote-content {
        padding: 48px 32px;
        gap: 32px;
    }

    .multi-quote.variant-boxed.alignment-center .multi-quote-tabs {
        padding: 32px 32px;
        gap: 64px;
    }

    .multi-quote.variant-boxed.alignment-center .quote-text {
        font-size: var(--text-112);
        max-width: 1000px;
        /* give it more room on desktop so text fits nicely */
    }

    .multi-quote.variant-boxed.alignment-center .company-logo {
        font-size: var(--text-72);
    }

    .multi-quote.variant-boxed.alignment-center .quote-author {
        font-size: var(--text-64);
    }

    .multi-quote.variant-boxed.alignment-center .tab-btn {
        font-size: var(--text-64);
    }
}

/* ==========================================================================
   Section 31: Center Outlined Multi-Quote
   ========================================================================== */
.multi-quote.variant-outlined.alignment-center {}

.multi-quote.variant-outlined.alignment-center .multi-quote-card {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-radius: var(--radius-none);
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
}

.multi-quote.variant-outlined.alignment-center .multi-quote-content {
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.multi-quote.variant-outlined.alignment-center .company-logo {
    font-size: var(--text-64);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
}

.multi-quote.variant-outlined.alignment-center .quote-text {
    font-size: var(--text-80);
    color: var(--text-main);
    font-weight: var(--font-weight-mediumPlus);
    line-height: var(--line-height-normal);
    max-width: 800px;
    margin: 0 auto;
}

.multi-quote.variant-outlined.alignment-center .quote-author {
    font-size: var(--text-56);
    color: var(--text-main);
}

.multi-quote.variant-outlined.alignment-center .quote-author span {
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
}

.multi-quote.variant-outlined.alignment-center .multi-quote-tabs {
    border-top: 1px solid var(--line-color);
    padding: 24px 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.multi-quote.variant-outlined.alignment-center .tab-btn {
    background: none;
    border: none;
    font-size: var(--text-56);
    font-weight: var(--font-weight-semibold);
    color: var(--text-desc);
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    padding: 8px 16px;
}

.multi-quote.variant-outlined.alignment-center .tab-btn:hover {
    color: var(--text-main);
    transform: translateY(-1px);
}

.multi-quote.variant-outlined.alignment-center .tab-btn:active {
    transform: scale(0.97);
}

.multi-quote.variant-outlined.alignment-center .tab-btn.active {
    color: var(--text-main);
}

@media (min-width: 768px) {
    .multi-quote.variant-outlined.alignment-center .multi-quote-content {
        padding: 48px 32px;
        gap: 32px;
    }

    .multi-quote.variant-outlined.alignment-center .multi-quote-tabs {
        padding: 32px 32px;
        gap: 64px;
    }

    .multi-quote.variant-outlined.alignment-center .quote-text {
        font-size: var(--text-112);
        max-width: 1000px;
    }

    .multi-quote.variant-outlined.alignment-center .company-logo {
        font-size: var(--text-72);
    }

    .multi-quote.variant-outlined.alignment-center .quote-author {
        font-size: var(--text-64);
    }

    .multi-quote.variant-outlined.alignment-center .tab-btn {
        font-size: var(--text-64);
    }
}

/* ==========================================================================
   Section 32: Left Boxed Multi-Quote
   ========================================================================== */
.multi-quote.variant-boxed.alignment-left {}

.multi-quote.variant-boxed.alignment-left .multi-quote-card {
    background-color: var(--bg-card);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-none);
    width: 100%;
    margin: 0 auto;
}

.multi-quote.variant-boxed.alignment-left .multi-quote-content {
    padding: 32px 0 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.multi-quote.variant-boxed.alignment-left .quote-body-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.multi-quote.variant-boxed.alignment-left .quote-text-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1 1 73%;
}

.multi-quote.variant-boxed.alignment-left .quote-graphic-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 27%;
    max-width: 27%;
}

.multi-quote.variant-boxed.alignment-left .quote-graphic-col img,
.multi-quote.variant-boxed.alignment-left .quote-graphic-col svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.multi-quote.variant-boxed.alignment-left .quote-graphic-col img {
    border-radius: var(--radius-sm);
}

.multi-quote.variant-boxed.alignment-left .quote-graphic-col svg {
    fill: currentColor;
    color: var(--text-desc);
}

.multi-quote.variant-boxed.alignment-left .company-logo {
    font-size: var(--text-64);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
}

.multi-quote.variant-boxed.alignment-left .quote-text {
    font-size: var(--text-80);
    color: var(--text-main);
    font-weight: var(--font-weight-mediumPlus);
    line-height: var(--line-height-normal);
}

.multi-quote.variant-boxed.alignment-left .quote-author {
    font-size: var(--text-56);
    color: var(--text-main);
}

.multi-quote.variant-boxed.alignment-left .quote-author span {
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
}

.multi-quote.variant-boxed.alignment-left .multi-quote-tabs {
    border-top: 1px solid var(--line-color);
    padding: 24px 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}

.multi-quote.variant-boxed.alignment-left .tab-btn {
    background: none;
    border: none;
    font-size: var(--text-56);
    font-weight: var(--font-weight-semibold);
    color: var(--text-desc);
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    padding: 8px 16px 8px 0;
}

.multi-quote.variant-boxed.alignment-left .tab-btn:hover {
    color: var(--text-main);
    transform: translateY(-1px);
}

.multi-quote.variant-boxed.alignment-left .tab-btn:active {
    transform: scale(0.97);
}

.multi-quote.variant-boxed.alignment-left .tab-btn.active {
    color: var(--text-main);
}

@media (min-width: 768px) {
    .multi-quote.variant-boxed.alignment-left .multi-quote-content {
        padding: 48px 0 48px 32px;
        gap: 32px;
    }

    .multi-quote.variant-boxed.alignment-left .quote-body-row {
        gap: 32px;
    }

    .multi-quote.variant-boxed.alignment-left .multi-quote-tabs {
        padding: 32px 32px;
        gap: 48px;
    }

    .multi-quote.variant-boxed.alignment-left .quote-text {
        font-size: var(--text-112);
    }

    .multi-quote.variant-boxed.alignment-left .company-logo {
        font-size: var(--text-72);
    }

    .multi-quote.variant-boxed.alignment-left .quote-author {
        font-size: var(--text-64);
    }

    .multi-quote.variant-boxed.alignment-left .tab-btn {
        font-size: var(--text-64);
    }
}

/* ==========================================================================
   Section 33: Left Outlined Multi-Quote
   ========================================================================== */
.multi-quote.variant-outlined.alignment-left {}

.multi-quote.variant-outlined.alignment-left .multi-quote-card {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-none);
    width: 100%;
    margin: 0 auto;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
}

.multi-quote.variant-outlined.alignment-left .multi-quote-content {
    padding: 32px 0 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.multi-quote.variant-outlined.alignment-left .quote-body-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.multi-quote.variant-outlined.alignment-left .quote-text-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1 1 73%;
}

.multi-quote.variant-outlined.alignment-left .quote-graphic-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 27%;
    max-width: 27%;
}

.multi-quote.variant-outlined.alignment-left .quote-graphic-col img,
.multi-quote.variant-outlined.alignment-left .quote-graphic-col svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.multi-quote.variant-outlined.alignment-left .quote-graphic-col img {
    border-radius: var(--radius-sm);
}

.multi-quote.variant-outlined.alignment-left .quote-graphic-col svg {
    fill: currentColor;
    color: var(--text-desc);
}

.multi-quote.variant-outlined.alignment-left .company-logo {
    font-size: var(--text-64);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
}

.multi-quote.variant-outlined.alignment-left .quote-text {
    font-size: var(--text-80);
    color: var(--text-main);
    font-weight: var(--font-weight-mediumPlus);
    line-height: var(--line-height-normal);
}

.multi-quote.variant-outlined.alignment-left .quote-author {
    font-size: var(--text-56);
    color: var(--text-main);
}

.multi-quote.variant-outlined.alignment-left .quote-author span {
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
}

.multi-quote.variant-outlined.alignment-left .multi-quote-tabs {
    border-top: 1px solid var(--line-color);
    padding: 24px 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
}

.multi-quote.variant-outlined.alignment-left .tab-btn {
    background: none;
    border: none;
    font-size: var(--text-56);
    font-weight: var(--font-weight-semibold);
    color: var(--text-desc);
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    padding: 8px 16px 8px 0;
}

.multi-quote.variant-outlined.alignment-left .tab-btn:hover {
    color: var(--text-main);
    transform: translateY(-1px);
}

.multi-quote.variant-outlined.alignment-left .tab-btn:active {
    transform: scale(0.97);
}

.multi-quote.variant-outlined.alignment-left .tab-btn.active {
    color: var(--text-main);
}

@media (min-width: 768px) {
    .multi-quote.variant-outlined.alignment-left .multi-quote-content {
        padding: 48px 0 48px 32px;
        gap: 32px;
    }

    .multi-quote.variant-outlined.alignment-left .quote-body-row {
        gap: 32px;
    }

    .multi-quote.variant-outlined.alignment-left .multi-quote-tabs {
        padding: 32px 32px;
        gap: 48px;
    }

    .multi-quote.variant-outlined.alignment-left .quote-text {
        font-size: var(--text-112);
    }

    .multi-quote.variant-outlined.alignment-left .company-logo {
        font-size: var(--text-72);
    }

    .multi-quote.variant-outlined.alignment-left .quote-author {
        font-size: var(--text-64);
    }

    .multi-quote.variant-outlined.alignment-left .tab-btn {
        font-size: var(--text-64);
    }
}

/* ==========================================================================
   Section 34: Single Quotes (New Layout)
   ========================================================================== */

/* Base Layout for Single Quote Card */
.multi-quote.layout-single .multi-quote-card {
    border-radius: var(--radius-none);
    width: 100%;
    margin: 0 auto;
}

.multi-quote.variant-boxed.layout-single .multi-quote-card {
    background-color: var(--bg-card);
    padding: var(--spacing-xl);
}

.multi-quote.variant-outlined.layout-single .multi-quote-card {
    background-color: transparent;
    padding: var(--spacing-xl) 0;
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
}

.multi-quote.layout-single .sq-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.multi-quote.layout-single .sq-left-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 60%;
}

.multi-quote.layout-single .quote-text {
    font-size: var(--text-80);
    color: var(--text-main);
    font-weight: var(--font-weight-mediumPlus);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
}

.multi-quote.layout-single .quote-author {
    font-size: var(--text-48);
    color: var(--text-main);
}

.multi-quote.layout-single .quote-author span {
    color: var(--text-desc);
    font-weight: var(--font-weight-medium);
}

/* Big gap between author and company info to let graphic span higher */
.multi-quote.layout-single .sq-company-info {
    margin-top: 140px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
}

.multi-quote.layout-single .sq-logo-box {
    width: clamp(48px, 8vw, 64px);
    height: clamp(48px, 8vw, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
}

.multi-quote.variant-boxed.layout-single .sq-logo-box {
    background-color: var(--icon-bg);
}

.multi-quote.variant-outlined.layout-single .sq-logo-box {
    background-color: var(--icon-bg-outlined);
}

.multi-quote.layout-single .sq-logo-box svg {
    width: clamp(24px, 4vw, 32px);
    height: clamp(24px, 4vw, 32px);
}

.multi-quote.layout-single .sq-company-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.multi-quote.layout-single .sq-company-name {
    font-size: var(--text-48);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: var(--line-height-tight);
}

.multi-quote.layout-single .sq-company-sub {
    font-size: var(--text-32);
    color: var(--text-desc);
    line-height: var(--line-height-normal);
}

/* Right Column Graphic */
.multi-quote.layout-single .sq-right-col {
    display: flex;
    align-items: flex-end;
    /* This aligns the graphic to the very bottom */
    width: 35%;
}

.multi-quote.layout-single .sq-right-col img,
.multi-quote.layout-single .sq-right-col svg {
    width: 100%;
    height: auto;
    object-fit: contain;
    fill: currentColor;
    color: var(--text-desc);
}

/* Desktop Adjustments */
@media (min-width: 768px) {
    .multi-quote.layout-single .quote-text {
        font-size: var(--text-96);
    }

    .multi-quote.layout-single .quote-author {
        font-size: var(--text-56);
    }

    .multi-quote.variant-boxed.layout-single .multi-quote-card {
        padding: 64px;
    }

    .multi-quote.variant-outlined.layout-single .multi-quote-card {
        padding: 64px 0;
    }

    .multi-quote.layout-single .sq-company-name {
        font-size: var(--text-56);
    }

    .multi-quote.layout-single .sq-company-sub {
        font-size: var(--text-40);
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .multi-quote.layout-single .sq-row {
        flex-direction: column;
    }

    .multi-quote.layout-single .sq-left-col,
    .multi-quote.layout-single .sq-right-col {
        max-width: 100%;
        width: 100%;
    }

    .multi-quote.layout-single .sq-company-info {
        margin-top: var(--spacing-xl);
    }

    .multi-quote.layout-single .sq-right-col {
        margin-top: var(--spacing-lg);
        justify-content: flex-start;
    }

    .multi-quote.layout-single .sq-right-col img,
    .multi-quote.layout-single .sq-right-col svg {
        max-width: 250px;
    }
}

/* ==========================================================================
   Section 35: Immersive Graphic Component
   ========================================================================== */

.immersive-graphic-section .cards-wrapper.layout-stacked {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.immersive-graphic-section .immersive-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-none);
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.immersive-graphic-section.variant-boxed .immersive-card {
    background-color: var(--bg-card);
}

.immersive-graphic-section.variant-outlined .immersive-card {
    background-color: transparent;
    border: 1px solid var(--line-color);
}

.immersive-graphic-section .content-wrapper {
    padding: clamp(32px, 5vw, 64px);
    padding-bottom: 0;
    position: relative;
    z-index: 2;
}

/* Relevant text shadow for readability over immersive graphics */
.immersive-graphic-section .card-heading {
    font-size: var(--text-56);
    color: var(--text-main);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
    text-shadow: 0px 4px 32px rgba(0, 0, 0, 0.8);
    position: relative;
}

.light-theme .immersive-graphic-section .card-heading {
    text-shadow: 0px 4px 32px rgba(255, 255, 255, 0.9);
}

.immersive-graphic-section .card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--text-24);
    color: var(--text-desc);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    text-shadow: 0px 4px 24px rgba(0, 0, 0, 0.8);
    transition: color 0.3s ease;
    position: relative;
}

.light-theme .immersive-graphic-section .card-link {
    text-shadow: 0px 4px 24px rgba(255, 255, 255, 0.9);
}

.immersive-graphic-section .card-link:hover {
    color: var(--text-main);
}

.immersive-graphic-section .link-icon svg {
    width: 1em;
    height: 1em;
}

.immersive-graphic-section .graphic-wrapper {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-top: 16px;
}

.immersive-graphic-section .graphic-wrapper img,
.immersive-graphic-section .graphic-wrapper svg {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .immersive-graphic-section .card-heading {
        font-size: var(--text-40);
    }
}

/* ==========================================================================
   Section: Pricing Cards
   ========================================================================== */

.pricing-section .section-heading {
    text-align: center;
    margin-bottom: var(--spacing-4xl);
}

.pricing-section .cards-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
}

@media (min-width: 768px) {
    .pricing-section .cards-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--spacing-xl);
    }
}

.pricing-plan-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    padding: clamp(24px, 4vw, 32px);
    background-color: var(--bg-card);
    border: 1px solid var(--line-color);
    border-radius: var(--radius-xl);
}

.pricing-section.variant-boxed .pricing-plan-card {
    border: none;
}

.pricing-plan-card .plan-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: var(--spacing-lg);
    width: 100%;
}

.pricing-plan-card .plan-header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.pricing-plan-card .plan-icon-wrapper {
    width: clamp(40px, 10vw, 48px);
    height: clamp(40px, 10vw, 48px);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-main);
    box-sizing: border-box;
    border: 1px solid var(--line-color);
}

.pricing-plan-card .plan-icon-wrapper .plan-svg {
    width: 60%;
    height: 60%;
    display: block;
}

.pricing-plan-card .plan-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.pricing-plan-card .plan-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.pricing-plan-card .plan-title {
    margin: 0;
    font-size: var(--text-52);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: var(--line-height-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pricing-plan-card .plan-subtitle {
    font-size: var(--text-40);
    font-weight: var(--font-weight-medium);
    color: var(--text-dimmed);
    line-height: var(--line-height-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pricing-plan-card .plan-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-color);
    border-radius: var(--radius-full);
    padding: 6px 12px;
    flex-shrink: 0;
    margin-top: 2px;
    background-color: var(--bg-card);
}

.pricing-plan-card .plan-badge span {
    font-size: var(--text-40);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: 1;
    white-space: nowrap;
}

.pricing-plan-card .plan-price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.pricing-plan-card .plan-price {
    font-size: clamp(34.2px, 4.75vw, 45.6px);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    line-height: var(--line-height-tight);
}

.pricing-plan-card .plan-period {
    font-size: var(--text-48);
    font-weight: var(--font-weight-medium);
    color: var(--text-dimmed);
}

.pricing-plan-card .plan-description {
    margin: 0 0 var(--spacing-lg) 0;
    font-size: var(--text-48);
    line-height: var(--line-height-base);
    color: var(--text-desc);
    font-weight: var(--font-weight-regular);
}

.pricing-plan-card .plan-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--spacing-xl);
}

.pricing-plan-card .plan-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--text-48);
    color: var(--text-main);
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-medium);
}

.pricing-plan-card .plan-feature-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--text-main);
}

.pricing-plan-card .plan-cta-wrapper {
    margin-top: auto;
    display: flex;
}

.pricing-plan-card .plan-cta-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 20px;
    border-radius: var(--radius-base);
    font-size: var(--text-48);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-plan-card .plan-cta-button.style-primary {
    background-color: var(--text-main);
    color: var(--bg-page);
    border-color: var(--text-main);
}

.pricing-plan-card .plan-cta-button.style-primary:hover {
    background-color: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.88);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.12);
}

.light-theme .pricing-plan-card .plan-cta-button.style-primary:hover {
    background-color: #222222;
    border-color: #222222;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.pricing-plan-card .plan-cta-button.style-secondary {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--line-color);
}

.pricing-plan-card .plan-cta-button.style-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--text-desc);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.light-theme .pricing-plan-card .plan-cta-button.style-secondary:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: var(--text-main);
}

.pricing-plan-card .plan-cta-button:active {
    transform: translateY(0) scale(0.98);
}

/* ============================================
   PRICING SECTION STYLES
   ============================================ */
.pricing-section {
    padding: clamp(40px, 8vw, 80px) 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.pricing-section .section-heading {
    text-align: center;
    margin-bottom: clamp(32px, 6vw, 48px);
}

.pricing-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
    max-width: 1200px;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--line-color);
    border-radius: var(--radius-lg, 16px);
    padding: clamp(20px, 4vw, 28px);
    box-sizing: border-box;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-card.highlighted {
    border: 2px solid #5170ff;
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.pricing-highlight-label {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #5170ff;
    color: #ffffff;
    font-size: 12.35px;
    font-weight: var(--font-weight-semibold);
    padding: 4px 16px;
    border-radius: 100px;
    white-space: nowrap;
    z-index: 10;
}

/* Header */
.pricing-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(16px, 4vw, 24px);
    width: 100%;
}

.pricing-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.pricing-icon-wrapper {
    width: clamp(40px, 10vw, 48px);
    height: clamp(40px, 10vw, 48px);
    border-radius: 8px;
    background-color: var(--bg-secondary, rgba(81, 112, 255, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: #5170ff;
}

.pricing-icon-svg {
    width: 60%;
    height: 60%;
    display: block;
}

.pricing-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pricing-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.pricing-title {
    margin: 0;
    font-size: clamp(15.2px, 3.325vw, 17.1px);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pricing-subtitle {
    font-size: clamp(11.4px, 2.375vw, 12.35px);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pricing-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-color);
    border-radius: 100px;
    padding: 4px 10px;
    flex-shrink: 0;
    background-color: var(--bg-card);
    margin-top: 2px;
}

.pricing-badge span {
    font-size: 11.4px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

/* Price Section */
.pricing-price-wrapper {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.pricing-price {
    font-size: clamp(26.6px, 5.7vw, 34.2px);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
}

.pricing-period {
    font-size: clamp(13.3px, 2.85vw, 14.25px);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}

/* Description */
.pricing-description {
    margin: 0 0 clamp(16px, 3.5vw, 20px) 0;
    font-size: clamp(13.3px, 2.85vw, 14.25px);
    line-height: var(--line-height-base);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

/* Features List */
.pricing-features-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: clamp(24px, 5vw, 32px);
}

.pricing-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: clamp(13.3px, 2.85vw, 14.25px);
    color: var(--text-primary);
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-medium);
}

.pricing-checkmark {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    color: #5170ff;
}

/* CTA Container */
.pricing-cta-container {
    margin-top: auto;
    width: 100%;
}

.pricing-cta-btn {
    width: 100%;
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--line-color);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14.25px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.pricing-cta-btn:hover {
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.06));
    border-color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dark-theme .pricing-cta-btn:hover {
    background-color: var(--bg-hover, rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.pricing-cta-btn:active {
    transform: translateY(0) scale(0.98);
}

.highlighted .pricing-cta-btn {
    background-color: #5170ff;
    color: #ffffff;
    border-color: #5170ff;
}

.highlighted .pricing-cta-btn:hover {
    background-color: #4361ee;
    border-color: #4361ee;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(81, 112, 255, 0.4);
}

.highlighted .pricing-cta-btn:active {
    transform: translateY(0) scale(0.98);
}

/* ============================================
   COMPARISON SECTION STYLES
   ============================================ */
.comparison-section {
    padding: clamp(40px, 8vw, 80px) 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.comparison-section .section-heading {
    text-align: center;
    margin-bottom: 8px;
}

.comparison-section .section-subheading {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: clamp(24px, 5vw, 32px);
    font-size: clamp(14.25px, 2.85vw, 16.15px);
}

/* Toggle Tabs */
.comparison-toggle-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--bg-hover, #f3f4f6);
    border-radius: 12px;
    padding: 6px;
    margin: 0 auto clamp(24px, 5vw, 40px) auto;
    width: fit-content;
    max-width: 100%;
}

.dark-theme .comparison-toggle-wrapper {
    background-color: var(--bg-hover, rgba(255, 255, 255, 0.05));
}

.comparison-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14.25px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    white-space: nowrap;
}

.comparison-toggle-btn:not(.active):hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.07);
}

.light-theme .comparison-toggle-btn:not(.active):hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.comparison-toggle-btn:active {
    transform: scale(0.97);
}

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

.comparison-toggle-btn.active {
    background-color: var(--bg-card, #ffffff);
    color: #5170ff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-theme .comparison-toggle-btn.active {
    background-color: var(--bg-card, #1e1e1e);
    color: #ffffff;
}

/* Table Mode */
.comparison-table-container {
    width: 100%;
    max-width: 1000px;
    overflow-x: auto;
    border: 1px solid var(--line-color);
    border-radius: var(--radius-xl, 16px);
    background-color: var(--bg-card);
    scrollbar-width: thin;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.comparison-table th,
.comparison-table td {
    padding: clamp(16px, 3vw, 20px);
    text-align: center;
    border-bottom: 1px solid var(--line-color);
}

.comparison-table th {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-size: 15.2px;
    background-color: var(--bg-card);
}

.comparison-table th:not(:first-child),
.comparison-table td:not(:first-child) {
    border-left: 1px solid var(--line-color);
}

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

.comparison-feature-name {
    text-align: left !important;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    font-size: 14.25px;
}

.comparison-table tr:hover {
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.02));
}

.dark-theme .comparison-table tr:hover {
    background-color: var(--bg-hover, rgba(255, 255, 255, 0.02));
}

.comparison-table td {
    color: var(--text-secondary);
    font-size: 14.25px;
    font-weight: var(--font-weight-medium);
}

.comparison-icon {
    display: block;
    margin: 0 auto;
    width: 22px;
    height: 22px;
}

.comparison-icon.check {
    color: #5170ff;
}

.comparison-icon.cross {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* List Mode */
.comparison-list-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 800px;
}

.comparison-list-card {
    background-color: var(--bg-card);
    border: 1px solid var(--line-color);
    border-radius: var(--radius-lg, 12px);
    padding: clamp(16px, 4vw, 24px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.comparison-list-header {
    font-size: 15.2px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 8px;
}

.comparison-list-items {
    display: flex;
    flex-direction: column;
}

.comparison-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-color);
    gap: 16px;
}

.comparison-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comparison-item-label {
    font-size: 14.25px;
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.comparison-item-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14.25px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-align: right;
}

.comparison-item-value .comparison-icon {
    margin: 0;
}

/* ==========================================================================
   Section 26: Infinite Marquee
   ========================================================================== */
.infinite-marquee-section {
    width: 100%;
    overflow: hidden;
    padding: 0 0;
}

.infinite-marquee-section.layout-horizontal .marquee-wrapper {
    display: flex;
    flex-direction: column;
}

.infinite-marquee-section.layout-horizontal .marquee-row {
    display: flex;
    width: 100%;
}

.infinite-marquee-section.layout-horizontal .marquee-track {
    display: flex;
    width: max-content;
    align-items: stretch;
    /* Cards will stretch to match the tallest image in the row */
}

/* Horizontal Animations */
.infinite-marquee-section.layout-horizontal .marquee-track.moving-left {
    animation: marqueeLeft var(--marquee-duration, 40s) linear infinite;
}

.infinite-marquee-section.layout-horizontal .marquee-track.moving-right {
    animation: marqueeRight var(--marquee-duration, 40s) linear infinite;
}

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

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marqueeRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Vertical Layout (Pinterest/Masonry style) */
.infinite-marquee-section.layout-vertical {
    height: 95vh;
    display: flex;
    flex-direction: column;
}

.infinite-marquee-section.layout-vertical .marquee-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--columns-desktop, 4), 1fr);
    gap: var(--marquee-gap, 16px);
    flex-grow: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
}

.infinite-marquee-section.layout-vertical .marquee-col {
    display: flex;
    flex-direction: column;
    height: max-content;
}

.infinite-marquee-section.layout-vertical .marquee-track {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Vertical Animations */
.infinite-marquee-section.layout-vertical .marquee-track.moving-up {
    animation: marqueeUp var(--marquee-duration, 40s) linear infinite;
}

.infinite-marquee-section.layout-vertical .marquee-track.moving-down {
    animation: marqueeDown var(--marquee-duration, 40s) linear infinite;
}

@keyframes marqueeUp {
    0% {
        transform: translateY(0);
    }

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

@keyframes marqueeDown {
    0% {
        transform: translateY(-50%);
    }

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

/* Base Card Styling */
.infinite-marquee-section .marquee-card {
    display: flex;
    flex-direction: column;
    height: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--bg-card);
    border: 1px solid var(--line-color);
}

/* Horizontal Card Width */
.infinite-marquee-section.layout-horizontal .marquee-card {
    /* To show exactly items-visible across 100vw */
    width: calc((100vw - ((var(--items-visible-mobile) - 1) * var(--marquee-gap))) / var(--items-visible-mobile));
}

/* Vertical Card Width */
.infinite-marquee-section.layout-vertical .marquee-card {
    width: 100%;
}

.infinite-marquee-section.variant-outlined .marquee-card {
    background-color: transparent;
}

.infinite-marquee-section .marquee-card-image {
    width: 100%;
    flex-grow: 1;
    /* Stretch to fill card if others in row are taller */
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.infinite-marquee-section .marquee-card-image img {
    width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.infinite-marquee-section .marquee-card-title {
    font-size: var(--text-56);
    color: var(--text-main);
    font-weight: var(--font-weight-medium);
    padding: 16px;
    text-align: center;
    line-height: var(--line-height-normal);
}

/* Desktop Adjustments for layout */
@media (min-width: 768px) {
    .infinite-marquee-section.layout-horizontal .marquee-card {
        width: calc((100vw - ((var(--items-visible-desktop) - 1) * var(--marquee-gap))) / var(--items-visible-desktop));
    }
}

@media (max-width: 768px) {
    .infinite-marquee-section.layout-vertical .marquee-wrapper {
        grid-template-columns: repeat(var(--columns-mobile, 2), 1fr);
    }
}

/* ==========================================================================
   Section 27: 3D Rolling Carousel
   ========================================================================== */
.rolling-3d-section {
    overflow: hidden;
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-page, #111111);
    color: var(--text-main, #ffffff);
}

.dark-theme.rolling-3d-section,
.dark-theme .rolling-3d-section {
    background-color: var(--bg-page, #111111);
}

.carousel-scene {
    width: 100%;
    height: calc(var(--item-width) * var(--ratio-multiplier, 1.5));
    perspective: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Mask the edges to elegantly fade out items moving left/right */
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    position: relative;
}

.carousel-cylinder {
    position: relative;
    width: var(--item-width);
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}


.carousel-item {
    position: absolute;
    width: var(--item-width);
    height: 100%;
    top: 0;
    left: 0;

    /* 3D Math: Spread evenly around the circle, push outwards by radius */
    transform: rotateY(calc((360deg / var(--total)) * var(--index))) translateZ(var(--radius));

    /* VERY IMPORTANT: Hides items when they rotate to the back of the cylinder */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--line-color);
    background-color: #f9f9f9;
}


.carousel-item-fg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
}



/* ==========================================================================
   Business CTA overrides
   ========================================================================== */
.business-cta .heading-large {
    font-size: clamp(40px, 9.4vw, 79.8px);
    line-height: var(--line-height-tight, 1.1);
    letter-spacing: var(--letter-spacing-sm, -0.02em);
}

/* Ensure button text stays on a single line */
.buttons-wrapper .btn,
.business-cta .btn {
    white-space: nowrap !important;
}

/* ==========================================================================
   Brief Cards: Icon Bottom Right Layout
   ========================================================================== */
.brief-cards.icon-pos-bottom-right .brief-card {
    position: relative;
    overflow: hidden;
}

.brief-cards.icon-pos-bottom-right .card-heading,
.brief-cards.icon-pos-bottom-right .card-description {
    position: relative;
    z-index: 2;
    /* Let the text breathe but avoid overlapping the icon */
    padding-right: clamp(90px, 18vw, 150px);
    max-width: 100%;
}

.brief-cards.icon-pos-bottom-right .icon-container {
    position: absolute !important;
    bottom: 5% !important;
    right: 2.5% !important;
    width: clamp(110px, 22vw, 200px) !important;
    height: clamp(110px, 22vw, 200px) !important;
    background-color: transparent !important;
    color: var(--text-desc) !important;
    opacity: 0.7 !important;
    z-index: 1 !important;
    margin: 0 !important;
    /* mix-blend-mode: overlay !important; */
    /* mix-blend-mode: soft-light !important; */
}

.brief-cards.icon-pos-bottom-right .icon-container svg,
.brief-cards.icon-pos-bottom-right .icon-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}


.brief-cards.icon-pos-bottom-right .icon-container svg,
.brief-cards.icon-pos-bottom-right .icon-container svg * {
    vector-effect: non-scaling-stroke;
}

/* ==========================================================================
   Header Component
   ========================================================================== */

.site-header {
    width: 100%;
    background-color: var(--bg-page);
    color: var(--text-main);
    padding: var(--spacing-md) var(--spacing-base);
    position: sticky;
    top: 0;
    z-index: 100;
    /* Ensure header sits above other content */
    border-bottom: 1px solid var(--line-color);
}

.site-header.header-compact {
    padding: var(--spacing-2xs) var(--spacing-base);
}

.site-header.header-compact .header-logo {
    width: 28px;
    height: 28px;
}

.site-header.header-compact .header-business-name {
    font-size: var(--text-48);
}

.site-header.header-compact .header-hamburger {
    width: 36px;
    height: 36px;
}

.site-header.header-compact .header-hamburger svg {
    width: 24px;
    height: 24px;
}

.site-header.light-theme {
    background-color: var(--color-white);
    --line-color: #eaeaea;
}

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

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

.header-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 100%;
}

.header-business-name {
    font-size: var(--text-20);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    margin: 0;
    line-height: var(--line-height-tight);
}

.header-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text-main);
    cursor: default;
    /* Per instructions: don't respond to touches/clicks yet */
}

.header-hamburger svg {
    width: 24px;
    height: 24px;
}

/* Desktop Breakpoint */
@media (min-width: 768px) {
    .site-header {
        padding: var(--spacing-lg) var(--spacing-xl);
    }

    .site-header.header-compact {
        padding: var(--spacing-xs) var(--spacing-xl);
    }

    .site-header.header-compact .header-logo {
        width: 32px;
        height: 32px;
    }

    .site-header.header-compact .header-business-name {
        font-size: var(--text-52);
    }

    .site-header.header-compact .header-hamburger {
        width: 40px;
        height: 40px;
    }

    .site-header.header-compact .header-hamburger svg {
        width: 28px;
        height: 28px;
    }

    .header-logo {
        width: 40px;
        height: 40px;
    }

    .header-business-name {
        font-size: var(--text-24);
    }

    .header-hamburger svg {
        width: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   Footer Component
   ========================================================================== */

.footer {
    width: 100%;
    background-color: var(--bg-main);
    color: var(--text-main);
    padding: var(--spacing-xl) 0 var(--spacing-lg) 0;
}

.footer.light-theme {
    background-color: var(--color-white);
    --line-color: #eaeaea;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-base);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.footer-top {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.footer-brand {
    font-size: var(--text-72);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin: 0;
    line-height: var(--line-height-tight);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg) var(--spacing-sm);
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-contact-col {
    grid-column: 1 / -1;
    margin-top: var(--spacing-base);
}

.footer-col-title {
    font-size: var(--text-48);
    font-weight: var(--font-weight-semibold);
    color: var(--text-desc);
    margin: 0;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-list li,
.footer-list a {
    font-size: var(--text-48);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    text-decoration: none;
    line-height: var(--line-height-normal);
}

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

/* Social Buttons */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--line-color);
    border-radius: 30px;
    background-color: transparent;
    color: var(--text-main);
    text-decoration: none;
    font-size: var(--text-20);
    font-weight: var(--font-weight-medium);
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--text-desc);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.light-theme .social-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: var(--text-main);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.social-btn:active {
    transform: translateY(0) scale(0.96);
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.footer-divider {
    border: none;
    border-top: 1px solid var(--line-color);
    margin: 0;
}

/* Bottom Section */
.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: center;
    text-align: center;
}

.footer-policy-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
}

.footer-policy-links a {
    font-size: var(--text-20);
    font-weight: var(--font-weight-semibold);
    color: var(--text-desc);
    text-decoration: none;
}

.footer-policy-links a:hover {
    color: var(--text-main);
}

.footer-copyright-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-base);
    width: 100%;
}

.footer-copyright {
    font-size: var(--text-16);
    font-weight: var(--font-weight-semibold);
    color: var(--text-desc);
}

.footer-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line-color);
    border-radius: 6px;
    font-size: var(--text-14);
    font-weight: var(--font-weight-semibold);
    color: var(--text-desc);
}

.footer-badge svg {
    width: 14px;
    height: 14px;
}

/* Desktop Breakpoint */
@media (min-width: 768px) {
    .footer-top {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer-grid {
        display: flex;
        gap: 64px;
    }

    .footer-contact-col {
        margin-top: 0;
    }

    .footer-copyright-row {
        flex-direction: row;
        justify-content: space-between;
    }

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

/* ==========================================================================
   PLATFORM SHOWCASE (Wrapper that constrains the sticky tab bar)
   ========================================================================== */
.platform-showcase {
    position: relative;
    /* Establishes positioning context for sticky child */
}

/* ==========================================================================
   PLATFORM TAB BAR (Sticky navigation for platform showcase)
   The tab bar sticks below the site header while the user scrolls through
   the platform showcase. It naturally unsticks when the .platform-showcase
   wrapper scrolls out of view, because sticky is constrained by its parent.
   ========================================================================== */
.platform-tab-bar {
    position: -webkit-sticky;
    /* Safari support */
    position: sticky;
    top: 0;
    /* Will be adjusted by JS to match actual header height */
    z-index: 90;
    background-color: var(--bg-page);
    border-bottom: 1px solid var(--line-color);
    padding: var(--spacing-xs) var(--spacing-base);
    transition: box-shadow 0.3s ease;
}

.platform-tab-bar.light-theme {
    background-color: var(--color-white);
    --line-color: #eaeaea;
}

.platform-tab-bar.dark-theme {
    background-color: var(--color-black);
}

.platform-tab-bar.is-stuck {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    background-color: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.dark-theme .platform-tab-bar.is-stuck {
    background-color: rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.platform-scroll-progress {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 0%;
    background-color: var(--text-dimmed);
    z-index: 10;
    pointer-events: none;
}

.platform-tabs {
    display: flex;
    gap: var(--spacing-2xs);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: var(--capw);
    margin: 0 auto;
    position: relative;
}

.platform-tabs::-webkit-scrollbar {
    display: none;
}

.platform-tab-pill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(81, 112, 255, 0.08);
    border-radius: var(--radius-base);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 0;
    pointer-events: none;
}

.platform-tab {
    flex: 1;
    padding: var(--spacing-2xs) var(--spacing-xs);
    border-radius: var(--radius-base);
    font-family: var(--font-family);
    font-size: var(--text-40);
    font-weight: var(--font-weight-medium);
    color: var(--text-dimmed);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: all 0.3s ease;
    letter-spacing: var(--letter-spacing-sm);
    position: relative;
    z-index: 1;
}

.platform-tab:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

.platform-tab:hover {
    color: var(--text-main);
}

.platform-tab.active {
    color: var(--color-blue);
    background: transparent !important;
    font-weight: var(--font-weight-semibold);
}

/* Scene label for subtabs */
.platform-scene-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xs);
    padding: var(--spacing-2xs) var(--spacing-base) var(--spacing-2xs);
    max-width: var(--capw);
    margin: 0 auto;
}

.platform-scene-label .scene-line {
    flex: 0 0 24px;
    height: 1px;
    background: var(--line-color);
}

.platform-scene-label .scene-name {
    font-family: var(--font-family);
    font-size: var(--text-40);
    font-weight: var(--font-weight-semibold);
    color: var(--text-main);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.platform-scene-label .scene-line-end {
    flex: 1;
    height: 1px;
    background: var(--line-color);
}

/* Platform screenshot wrapper — generous, cinematic treatment */
.platform-screenshot-scene {
    padding: 0 var(--spacing-base) var(--spacing-xl);
    max-width: var(--capw);
    margin: 0 auto;
}

.platform-screenshot-scene .scene-screenshot {
    width: 100%;
    border-radius: var(--radius-2xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    display: block;
}

.platform-screenshot-scene .scene-benefit {
    padding: var(--spacing-xs) 0 var(--spacing-xs) 0;
    font-family: var(--font-family);
    font-size: var(--text-48);
    font-weight: var(--font-weight-medium);
    color: var(--text-main);
    line-height: var(--line-height-sm, 1.4);
    letter-spacing: var(--letter-spacing-sm);
}

/* ==========================================================================
   PLATFORM SLIDESHOW
   ========================================================================== */
.platform-slideshow-container {
    padding: 0 var(--spacing-base);
    max-width: var(--capw);
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Apple-style rectangular pill container for dots */
.slideshow-controls {
    background: #ececec;
    border-radius: 100px;
    padding: 8px 16px;
    display: flex;
    width: max-content;
    align-items: center;
    gap: 7px;
    margin: 0 auto var(--spacing-xs) auto;
}

.dark-theme .slideshow-controls {
    background: rgba(255, 255, 255, 0.12);
}

.slideshow-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: #c4c4c4;
    cursor: pointer;
    transition: width 0.3s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    /* For progress bar clipping */
}

.slideshow-dot.active {
    width: 28px;
    /* Base pill remains light, inner progress bar is dark */
}

.slideshow-dot.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #636366;
    border-radius: 4px;
    /* 5 seconds matches the JS setInterval */
    animation: slideshow-progress 5s linear forwards;
}

/* Pause animation when the user interacts (handled via a class added in JS) */
.slideshow-controls.is-paused .slideshow-dot.active::after {
    animation-play-state: paused;
}

@keyframes slideshow-progress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* Scroll snap track */
.slideshow-track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    /* No gap — slides must be exactly 100% width for accurate index calculation */
}

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

.slideshow-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.slideshow-slide .scene-screenshot {
    width: 100%;
    border-radius: var(--radius-2xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    display: block;
}

@media (min-width: 768px) {
    .platform-tab {
        font-size: var(--text-48);
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .platform-scene-label .scene-name {
        font-size: var(--text-48);
    }
}


.platform-device-mockup {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 2rem auto;
    border: 2px solid #2a2a2a;
    border-radius: 20px;
    background: #000;
    box-shadow: 0 0 0 1px #444, 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Physical Hardware Buttons on Right Side */
.platform-device-mockup::before,
.platform-device-mockup::after {
    content: '';
    position: absolute;
    right: -5px;
    /* Protrude outside the border */
    width: 3px;
    background: #444;
    /* Subtle metallic edge */
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.1);
}

/* Top Button (Volume Up) */
.platform-device-mockup::before {
    top: 80px;
    height: 24px;
}

/* Bottom Button (Volume Down/Power) */
.platform-device-mockup::after {
    top: 116px;
    height: 36px;
}

.dark-theme .platform-device-mockup {
    box-shadow: 0 0 0 1px #444, 0 20px 40px rgba(0, 0, 0, 0.4);
}



.device-mockup-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-color);
}

.platform-device-mockup .scene-screenshot {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.platform-device-mockup .platform-slideshow-container {
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
}


/* ==========================================================================
   DESKTOP FIX: CLEAN ARTICLE LAYOUT (APPROACH 1)
   ========================================================================== */
@media (min-width: 768px) {
    /* 1. Center the app and give it a comfortable reading width */
    /* #app override removed */

    /* 2. Lock typography to 800px equivalent sizes so they don't blow up on wide monitors */
    :root {
        --text-128: 45.6px !important;
        --text-112: 41.8px !important;
        --text-96: 38px !important;
        --text-80: 34.2px !important;
        --text-72: 30.4px !important;
        --text-64: 26.6px !important;
        --text-56: 22.8px !important;
        --text-52: 20.9px !important;
        --text-48: 19px !important;
        --text-40: 15.2px !important;
        --text-32: 13.3px !important;
        --text-24: 11.4px !important;
        --text-20: 10.45px !important;
        --text-16: 15.2px !important;
        --text-14: 13.3px !important;
    }

    /* 3. Ensure full-width elements inside #app respect the new max-width */
    .site-header {
        max-width: 800px !important;
    }

    /* 4. Provide nice desktop padding for sections */
    .section-container {
        padding: 96px 48px !important;
    }
}