/* ══════════════════════════════════════════════════════════════════════════
   ZONTAL Design System — zontal.css
   Consolidated CSS for all ZONTAL website pages
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Custom Properties & Reset
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --green: #509E2F;
    --green-dark: #3a7a1f;
    --green-glow: rgba(80, 158, 47, 0.3);
    --navy: #0A3128;
    --navy-mid: #0f4a3d;
    --dark: #050f0c;
    --white: #ffffff;
    --off-white: #eef3ea;
    --gray-50: #fafbf9;
    --gray-100: #e8ede5;
    --gray-200: #d0dbc9;
    --gray-400: #8e9a87;
    --gray-600: #54605a;
    --gray-800: #2a332d;
    --red-problem: #e05252;
    --red-dark: #b91c1c;
    --gold: #d4a853;
    --gold-dark: #8B6914;
    --amber: #d97706;
    --amber-dark: #92400e;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --purple: #a78bfa;
    --purple-dark: #6D28D9;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --max-w: 1320px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius: 16px;
    --radius-pill: 24px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font);
    color: var(--navy);
    line-height: 1.6;
    background: var(--white);
    overflow-x: hidden;
}

main {
    overflow-x: hidden;
}

section {
    overflow-x: hidden;
}

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

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

.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 2rem;
}

h1 em,
h2 em,
h3 em {
    color: var(--green);
    font-style: normal;
}

/* ── Skip Navigation Link ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--navy);
    color: var(--white);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 1rem;
}

/* ── Header Component Styles ── */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.97);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 24px rgba(10, 49, 40, 0.08);
}

.header-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.header-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-right: auto;
}

.header-logo img {
    height: 80px;
    width: auto;
    display: block;
    margin-left: -22px;
}

/* ── Desktop header links ── */
.header-links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-links>li {
    position: relative;
}

.header-links>li>a {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.85rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #0A3128;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.header-links>li>a:hover,
.header-links>li>a:focus-visible {
    color: var(--green-dark);
    background: rgba(80, 158, 47, 0.06);
}

.header-links>li>a.active {
    color: var(--green-dark);
    font-weight: 600;
}

.header-links>li>a.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    background: #509E2F;
    border-radius: 2px;
}

/* ── Dropdown chevron ── */
.header-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.header-links>li:hover>a .header-chevron,
.header-links>li.dropdown-open>a .header-chevron {
    transform: rotate(180deg);
}

/* ── Dropdown panel ── */
.header-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 280px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(10, 49, 40, 0.10), 0 4px 12px rgba(0, 0, 0, 0.03);
    padding: 0.625rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.header-links>li:hover>.header-dropdown,
.header-links>li.dropdown-open>.header-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.header-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.header-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0A3128;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
}

.header-dropdown a:hover,
.header-dropdown a:focus-visible {
    background: rgba(80, 158, 47, 0.07);
    color: var(--green-dark);
}

.header-dropdown a.active {
    color: var(--green-dark);
    font-weight: 600;
    background: rgba(80, 158, 47, 0.04);
}

.header-dropdown-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(80, 158, 47, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-dropdown-icon img {
    border-radius: 10px;
}

.header-dropdown-text {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.header-dropdown-text span {
    font-size: 0.78rem;
    color: #6b7a72;
    font-weight: 400;
    margin-top: 2px;
    white-space: normal;
    line-height: 1.35;
}

.header-dropdown-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.07);
    margin: 0.4rem 0.75rem;
}

.header-dropdown-label {
    display: block;
    padding: 0.5rem 1rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8e9a87;
    pointer-events: none;
}

.header-dropdown--two-col .header-dropdown-label {
    grid-column: 1 / -1;
}

/* ── CTA Button ── */
.header-cta {
    flex-shrink: 0;
}

.header-cta a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.6rem;
    background: var(--green-dark);
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
    white-space: nowrap;
}

.header-cta a:hover,
.header-cta a:focus-visible {
    background: #3a7a1f;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(80, 158, 47, 0.3);
}

/* ── Hamburger toggle ── */
.header-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.header-hamburger:hover {
    background: rgba(80, 158, 47, 0.06);
}

.header-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #0A3128;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.header-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header-hamburger.open span:nth-child(2) {
    opacity: 0;
}

.header-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile overlay ── */
.header-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5, 15, 12, 0.4);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.header-mobile-overlay.visible {
    opacity: 1;
}

/* ── Mobile drawer ── */
.header-mobile {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: min(380px, 85vw);
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5rem 1.5rem 2rem;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
}

.header-mobile.open {
    transform: translateX(0);
}

.header-mobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-mobile>ul>li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.header-mobile>ul>li>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0.25rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #0A3128;
    text-decoration: none;
    transition: color 0.2s;
}

.header-mobile>ul>li>a:hover {
    color: #509E2F;
}

.header-mobile>ul>li>a.active {
    color: var(--green-dark);
}

.header-mobile>ul>li>a .header-chevron {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.header-mobile>ul>li.mobile-dropdown-open>a .header-chevron {
    transform: rotate(180deg);
}

/* Mobile sub-menu */
.header-mobile-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-mobile>ul>li.mobile-dropdown-open>.header-mobile-sub {
    max-height: 500px;
}

.header-mobile-sub a {
    display: block;
    padding: 0.6rem 1rem 0.6rem 1.25rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #54605a;
    text-decoration: none;
    border-left: 2px solid rgba(80, 158, 47, 0.15);
    transition: color 0.15s, border-color 0.15s;
}

.header-mobile-sub a:hover,
.header-mobile-sub a.active {
    color: var(--green-dark);
    border-left-color: var(--green-dark);
}

.header-mobile-cta {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: none;
}

.header-mobile>ul>li.header-mobile-cta>a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 2rem;
    background: var(--green-dark);
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background 0.25s;
}

.header-mobile>ul>li.header-mobile-cta>a:hover {
    background: #3a7a1f;
    color: #ffffff;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .header-links>li>a {
        padding: 0.5rem 0.55rem;
        font-size: 0.84rem;
    }

    .header-cta a {
        padding: 0.55rem 1.3rem;
        font-size: 0.84rem;
    }
}

@media (max-width: 960px) {

    .header-links,
    .header-cta {
        display: none;
    }

    .header-hamburger {
        display: flex;
    }

    .header-mobile-overlay,
    .header-mobile {
        display: block;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   SHARED: Hero, Badges, Buttons, Sections (from canonical source)
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: clamp(540px, 60vh, 720px);
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 40%, #0c4a1c 100%);
    display: flex;
    align-items: flex-start;
    padding: 10rem 2rem 6rem;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

.hero-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 720px;
}

.badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-green {
    background: rgba(80, 158, 47, 0.12);
    color: #2d5f1a;
}

.hero .badge-green,
.section-dark .badge-green,
.section-green .badge-green,
.resource-hero-section .badge-green {
    color: var(--green);
}

.badge-white {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.badge-outline {
    background: transparent;
    border: 1px solid var(--gray-400);
    color: var(--gray-600);
}

.badge-red {
    background: rgba(224, 82, 82, 0.12);
    color: var(--red-problem);
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin: 1.2rem 0 1.5rem;
    text-wrap: balance;
}

.hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.hero-lead strong {
    color: #fff;
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--green-dark);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--green-glow);
    background: var(--green);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.btn-ghost {
    background: transparent;
    color: var(--green);
    border: 1px solid var(--green);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    background: rgba(80, 158, 47, 0.06);
    box-shadow: 0 8px 24px var(--green-glow);
}

/* Hero stat ticker */
.hero-ticker {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2.5rem;
    backdrop-filter: blur(12px);
}

.hero-ticker h2,
.hero-ticker h3 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.ticker-number {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    color: var(--red-problem);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.ticker-label {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.ticker-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ticker-detail {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    opacity: 0;
    transform: translateX(20px);
    animation: statSlideIn 0.6s ease-out forwards;
}

.ticker-detail:nth-child(1) {
    animation-delay: 0.3s;
}

.ticker-detail:nth-child(2) {
    animation-delay: 0.45s;
}

.ticker-detail:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes statSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ticker-detail strong {
    color: #fff;
}

.ticker-detail-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--green);
    min-width: 70px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
section {
    padding: 7rem 2rem;
}

.section-light {
    background: var(--off-white);
    padding: 7rem 2rem;
}

.section-dark {
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 50%, #0c4a1c 100%);
    color: #fff;
    padding: 7rem 2rem;
}

.section-green {
    background: linear-gradient(160deg, #072e1a 0%, #0A3128 40%, #0c4a1c 100%);
    color: #fff;
    padding: 7rem 2rem;
}

.section-badge {
    text-align: center;
    margin-bottom: 1rem;
}

.section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3.5rem;
}

.section-head:last-child {
    margin-bottom: 0;
}

.section-head .hero-actions {
    justify-content: center;
    margin-top: 1.5rem;
}

.section-head--spaced {
    margin-top: 5rem;
}

.section-head h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.section-head p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
}

.section-dark .section-head p {
    color: rgba(255, 255, 255, 0.65);
}

.section-green .section-head p {
    color: rgba(255, 255, 255, 0.75);
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED: Outcome-page card components
   Reusable card patterns used across outcome / platform pages.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Challenge cards (light section, red accent) ──
   Use: .bottleneck-grid > .bottleneck-card  (already defined below)
   OR for horizontal icon-text layout:                                        */
.challenge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.challenge-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.challenge-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: all 0.3s;
}

.challenge-card--vertical {
    flex-direction: column;
    padding: 2.5rem 2rem;
    gap: 0;
}

.challenge-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--red-problem);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.challenge-card:hover::before {
    transform: scaleX(1);
}

.challenge-card:hover {
    border-color: rgba(224, 82, 82, 0.3);
    box-shadow: 0 8px 30px rgba(224, 82, 82, 0.08);
    transform: translateY(-3px);
}

.challenge-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(224, 82, 82, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.challenge-card:not(.challenge-card--vertical) .challenge-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-bottom: 0;
}

.challenge-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--red-problem);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.challenge-card:not(.challenge-card--vertical) .challenge-icon svg {
    width: 20px;
    height: 20px;
}

.challenge-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.challenge-card:not(.challenge-card--vertical) h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.challenge-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
}

.challenge-card:not(.challenge-card--vertical) p {
    font-size: 0.92rem;
    line-height: 1.65;
}

/* ── Dark-section feature cards (green accent, glass) ──
   Used for: layer overviews, workflow steps, walkthrough cards           */
.dark-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

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

.dark-card {
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dark-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.dark-card:hover::before {
    transform: scaleX(1);
}

.dark-card:hover {
    border-color: rgba(80, 158, 47, 0.25);
    background: rgba(255, 255, 255, 0.06);
}

.dark-card-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(80, 158, 47, 0.15);
    color: var(--green);
    margin-bottom: 1.25rem;
}

img.dark-card-badge {
    height: 26px;
    width: auto;
    padding: 0;
    background: none;
    vertical-align: middle;
}

.dark-card>svg {
    margin-bottom: 1rem;
}

.dark-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.dark-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.dark-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.dark-card ul li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.35rem 0 0.35rem 1.4rem;
    position: relative;
    line-height: 1.5;
}

.dark-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.dark-card .product-tag {
    margin-top: auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.04em;
}

img.product-tag {
    height: 22px;
    width: auto;
    padding: 0;
    background: none;
    vertical-align: middle;
}

/* ── Product cards (light section, green hover) ── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.product-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.product-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(80, 158, 47, 0.08);
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.product-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.product-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.product-card .product-tag {
    margin-top: auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Result stat cards (light section) ── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.stat-card {
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.stat-card .val {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.stat-card .lbl {
    font-size: 0.82rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.stat-card .desc {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* ── Unlock / feature cards (dark section, no hover) ── */
.unlock-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.unlock-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.unlock-card {
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
}

.unlock-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.unlock-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}

.section-footnote {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    margin-top: 2rem;
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section-footnote a {
    color: var(--green-400);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.section-light .section-footnote {
    color: var(--gray-600);
}

.section-light .section-footnote a {
    color: var(--green-700);
}

.unlock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(80, 158, 47, 0.12);
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.unlock-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Shared responsive for outcome-page grids ── */
@media (max-width: 1024px) {

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

@media (max-width: 768px) {

    .challenge-grid,
    .challenge-grid-2,
    .product-grid,
    .stat-grid,
    .dark-card-grid,
    .unlock-grid,
    .unlock-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTFOLIO PIVOT — Company evidence cards
   ══════════════════════════════════════════════════════════════════════════ */
.pivot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.pivot-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.pivot-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.pivot-card-company {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green-dark);
    margin-bottom: 0.75rem;
}

.pivot-card-stat {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    color: var(--navy);
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.pivot-card p {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.pivot-card-source {
    font-size: 0.72rem;
    color: var(--gray-600);
    font-weight: 500;
}

.pivot-summary {
    max-width: 800px;
    margin: 3rem auto 0;
    text-align: center;
    padding: 2rem;
    background: rgba(224, 82, 82, 0.04);
    border-radius: var(--radius);
    border: 1px solid rgba(224, 82, 82, 0.12);
}

.pivot-summary p {
    font-size: 1.1rem;
    color: var(--navy);
    line-height: 1.7;
    font-weight: 500;
}

.pivot-summary strong {
    color: var(--red-problem);
}

/* ══════════════════════════════════════════════════════════════════════════
   ORCHESTRATION SHIFT
   ══════════════════════════════════════════════════════════════════════════ */
.orch-layout {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.orch-text h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.orch-text p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.orch-text p strong {
    color: #fff;
}

.orch-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.orch-stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2rem;
    backdrop-filter: blur(8px);
    transition: all 0.3s;
}

.orch-stat-card:hover {
    border-color: rgba(80, 158, 47, 0.3);
    background: rgba(80, 158, 47, 0.06);
}

.orch-stat-val {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.orch-stat-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.orch-stat-source {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0.5rem;
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   TWO-CURVES VISUAL
   ══════════════════════════════════════════════════════════════════════════ */
.curves-layout {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.curves-text h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.curves-text p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.curves-text blockquote {
    font-size: 1rem;
    font-style: italic;
    color: var(--navy);
    line-height: 1.7;
    border-left: 3px solid var(--green);
    padding-left: 1.25rem;
    margin: 1.5rem 0;
}

.curves-text blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gray-600);
    font-style: normal;
}

.curves-visual {
    position: relative;
    background: var(--off-white);
    border-radius: var(--radius);
    padding: 2.5rem;
    border: 1px solid var(--gray-200);
    min-height: 360px;
}

.curves-canvas {
    width: 100%;
    height: 300px;
    display: block;
}

.curves-legend {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    justify-content: center;
}

.curves-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.curves-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTTLENECK CLUSTERS
   ══════════════════════════════════════════════════════════════════════════ */
.bottleneck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.bottleneck-grid .bottleneck-card:nth-child(4),
.bottleneck-grid .bottleneck-card:nth-child(5) {
    display: block;
}

.bottleneck-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2rem;
    backdrop-filter: blur(8px);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.bottleneck-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--red-problem);
}

.bottleneck-card:hover {
    border-color: rgba(224, 82, 82, 0.3);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-3px);
}

.bottleneck-card-num {
    font-size: 2rem;
    font-weight: 900;
    color: var(--red-problem);
    line-height: 1;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.bottleneck-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.bottleneck-card p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

/* Last two centered */
.bottleneck-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.bottleneck-row-2 {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    max-width: var(--max-w);
    margin: 1.5rem auto 0;
}

.bottleneck-row-2 .bottleneck-card {
    flex: 0 1 calc(33.333% - 0.75rem);
}

.section-foot-link {
    text-align: center;
    margin-top: 2.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   ADVANCEMENTS
   ══════════════════════════════════════════════════════════════════════════ */
.advancements-layout {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.advancements-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(80, 158, 47, 0.06);
    border: 1px solid rgba(80, 158, 47, 0.15);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.04em;
    margin-bottom: 2rem;
}

.advancements-layout h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.advancements-layout p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto 2rem;
}

.advancements-card {
    background: var(--off-white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 3rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
}

.advancements-icon {
    width: 100px;
    height: 100px;
    border-radius: var(--radius);
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--navy) 0%, #0c4a1c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.advancements-icon svg {
    width: 48px;
    height: 48px;
    fill: #fff;
}

.advancements-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.advancements-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.advancements-card .btn {
    font-size: 0.88rem;
    padding: 0.7rem 1.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SOFT CTA
   ══════════════════════════════════════════════════════════════════════════ */
.soft-cta-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.soft-cta-inner h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1rem;
}

.soft-cta-inner p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.soft-cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   SHARED: Footer Component
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Footer Component Styles ── */
.footer {
    background: #111A17;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
}

.footer-accent {
    height: 3px;
    background: linear-gradient(90deg, #509E2F 0%, #509E2F 60%, transparent 100%);
}

.footer a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer a:hover,
.footer a:focus-visible {
    color: #6abb44;
}

.footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ── Column Grid ── */
.footer-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2.5rem;
    padding: 2.5rem 0 3rem;
}

.footer-col h3,
.footer-col h4 {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-top: 0;
    margin-bottom: 0.85rem;
}

.footer-col ul+h3,
.footer-col ul+h4 {
    margin-top: 1.5rem;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 0.55rem;
}

.footer-col ul li a {
    font-size: 0.855rem;
    line-height: 1.55;
}

/* ── Brand Column ── */
.footer-brand-logo {
    display: inline-block;
    margin-top: -10px;
    margin-bottom: 0.5rem;
    margin-left: -16px;
    text-decoration: none;
}

.footer-brand-tagline {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
}

/* ── Social Icons ── */
.footer-social {
    display: flex;
    gap: 0.75rem;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.footer-social a:hover {
    background: rgba(106, 187, 68, 0.12);
    border-color: rgba(106, 187, 68, 0.25);
    transform: translateY(-2px);
}

.footer-social a svg {
    width: 16px;
    height: 16px;
    fill: rgba(255, 255, 255, 0.6);
    transition: fill 0.2s;
}

.footer-social a:hover svg {
    fill: #6abb44;
}

/* ── Stay Updated (inline in column) ── */
.footer-subscribe h4 {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-top: 2rem;
    margin-bottom: 0.9rem;
}

.footer-subscribe-form {
    display: flex;
    gap: 0;
}

.footer-subscribe-form input[type="email"] {
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    flex: 1;
    min-width: 0;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.footer-subscribe-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.footer-subscribe-form input[type="email"]:focus {
    border-color: #509E2F;
    background: rgba(255, 255, 255, 0.08);
}

.footer-subscribe-form button {
    padding: 0.65rem 1.2rem;
    background: var(--green-dark);
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.25s;
}

.footer-subscribe-form button:hover {
    background: #3a7a1f;
}

/* ── Compliance & Standards ── */
.footer-compliance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    flex-wrap: wrap;
}

.footer-compliance-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.footer-compliance-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-right: 0.25rem;
}

.footer-compliance-badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    padding: 0.3rem 0.75rem;
}

/* ── Bottom Bar ── */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-bottom-copy {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-legal a {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal a:hover {
    color: #6abb44;
}

.footer-bloomberg {
    text-align: center;
    padding: 0.75rem 0 2rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
}

.footer-bloomberg a {
    text-align: center;
    padding: 0.75rem 0 2rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .footer-columns {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .footer-newsletter-bar {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-newsletter-right {
        align-items: flex-start;
        width: 100%;
    }

    .footer-newsletter-actions {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .footer-subscribe-form {
        width: 100%;
    }

    .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

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

@media (max-width: 480px) {
    .footer-inner {
        padding: 0 1rem;
    }

    .footer-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-subscribe-form {
        flex-direction: column;
    }

    .footer-subscribe-form input[type="email"] {
        border-radius: var(--radius-sm);
    }

    .footer-subscribe-form button {
        border-radius: var(--radius-sm);
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED: ZONTAL Forms (zontal-forms.js states)
   ══════════════════════════════════════════════════════════════════════════ */

/* Honeypot spam trap — must be invisible but present in DOM */
.zontal-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Success confirmation */
.zontal-form-success {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: rgba(80, 158, 47, 0.08);
    border: 1px solid rgba(80, 158, 47, 0.2);
    border-radius: var(--radius-sm);
    color: var(--green-dark);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
}

.zontal-form-success p:not(.zontal-form-success-note) {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.zontal-form-success-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--green);
}

/* Success in dark / green sections */
.section-dark .zontal-form-success,
.section-green .zontal-form-success,
.footer .zontal-form-success {
    background: rgba(80, 158, 47, 0.15);
    border-color: rgba(80, 158, 47, 0.3);
    color: #fff;
}

/* Compact success for footer subscribe (inline) */
.footer-subscribe-form+.zontal-form-success {
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
}

/* Download success variant (gated content) */
.zontal-form-success:has(.zontal-download-btn) {
    flex-wrap: wrap;
}

.zontal-download-btn {
    margin-top: 0.25rem;
    flex-basis: 100%;
    width: fit-content;
}

.zontal-form-success-note {
    flex-basis: 100%;
    font-size: 0.82rem;
    font-weight: 400;
    opacity: 0.7;
    margin: 0;
}

/* Error message */
.zontal-form-error {
    padding: 0.85rem 1.25rem;
    background: rgba(224, 82, 82, 0.08);
    border: 1px solid rgba(224, 82, 82, 0.2);
    border-radius: var(--radius-sm);
    color: var(--red-problem);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.section-dark .zontal-form-error,
.section-green .zontal-form-error,
.footer .zontal-form-error {
    background: rgba(224, 82, 82, 0.15);
    border-color: rgba(224, 82, 82, 0.3);
    color: #ff8a8a;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll:nth-child(2) {
    transition-delay: 0.1s;
}

.animate-on-scroll:nth-child(3) {
    transition-delay: 0.2s;
}

.animate-on-scroll:nth-child(4) {
    transition-delay: 0.3s;
}

.animate-on-scroll:nth-child(5) {
    transition-delay: 0.35s;
}

.animate-on-scroll:nth-child(6) {
    transition-delay: 0.4s;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-ticker {
        max-width: 560px;
    }

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

    .orch-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .curves-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .curve-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

    .bottleneck-row-2 {
        flex-direction: column;
        align-items: center;
    }

    .bottleneck-row-2 .bottleneck-card {
        flex: 0 1 100%;
        max-width: calc(50% - 0.75rem);
    }

    .advancements-card {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    section {
        padding: 4rem 1.5rem;
    }

    .hero {
        padding: 9rem 1.5rem 4rem;
        min-height: clamp(480px, 60vh, 680px);
    }

    .hero h1 {
        font-size: clamp(1.8rem, 4vw, 2.4rem);
    }

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

    .bottleneck-wrap {
        grid-template-columns: 1fr;
    }

    .bottleneck-row-2 .bottleneck-card {
        max-width: 100%;
    }

    .orch-stats {
        gap: 1rem;
    }

    .curve-visual {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .hero {
        padding: 8rem 1rem 3rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .soft-cta-actions {
        flex-direction: column;
    }

    .soft-cta-actions .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: homepage
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: clamp(540px, 60vh, 720px);
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 40%, #0c4a1c 100%);
    display: flex;
    align-items: flex-start;
    padding: 10rem 2rem 6rem;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

.hero-content {
    max-width: 720px;
}

.badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-green {
    background: rgba(80, 158, 47, 0.12);
    color: #357020;
}

.badge-orange {
    background: rgba(212, 168, 83, 0.15);
    color: var(--gold);
    border: 1px solid rgba(212, 168, 83, 0.3);
}

.badge-white {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin: 1.2rem 0 1.5rem;
    text-wrap: balance;
}

.hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.hero-lead strong {
    color: #fff;
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--green-dark);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--green-glow);
    background: var(--green);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.btn-ghost {
    background: transparent;
    color: var(--green);
    border: 1px solid var(--green);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    background: rgba(80, 158, 47, 0.06);
    box-shadow: 0 8px 24px var(--green-glow);
}

.btn-dark {
    background: var(--navy);
    color: #fff;
}

.btn-dark:hover {
    transform: translateY(-2px);
}

/* Hero visual — animated industry pipeline counters */
.hero-visual {
    position: relative;
    margin-top: -1.5rem;
}

.hero-stats-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2.5rem;
    backdrop-filter: blur(12px);
}

.hero-stats-panel h2,
.hero-stats-panel h3 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

.hero-stat-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateX(20px);
    animation: statSlideIn 0.6s ease-out forwards;
}

.hero-stat-row:last-child {
    border-bottom: none;
}

.hero-stat-row:nth-child(2) {
    animation-delay: 0.15s;
}

.hero-stat-row:nth-child(3) {
    animation-delay: 0.3s;
}

.hero-stat-row:nth-child(4) {
    animation-delay: 0.45s;
}

.hero-stat-company {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green);
    min-width: 100px;
    letter-spacing: 0.02em;
}

.hero-stat-detail {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
}

.hero-stat-detail strong {
    color: #fff;
}

.hero-stat-source {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0.2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROBLEM SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.section-light {
    background: var(--off-white);
    padding: 7rem 2rem;
}

.section-dark {
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 50%, #0c4a1c 100%);
    color: #fff;
    padding: 7rem 2rem;
}

.section-green {
    background: linear-gradient(160deg, #072e1a 0%, #0A3128 40%, #0c4a1c 100%);
    color: #fff;
    padding: 7rem 2rem;
}

section {
    padding: 7rem 2rem;
}

section.section-light {
    padding: 7rem 2rem;
}

.section-badge {
    text-align: center;
    margin-bottom: 1rem;
}

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.section-head h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.section-head p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
}

/* Crisis cards */
.crisis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.crisis-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
}

.crisis-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--red-problem);
}

.crisis-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(224, 82, 82, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.crisis-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--red-problem);
    stroke-width: 2;
    fill: none;
}

.crisis-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    color: var(--navy);
}

.crisis-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOUR LAYERS
   ══════════════════════════════════════════════════════════════════════════ */
.layers-stack {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.layer-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2rem 2.5rem;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px);
}

.layer-card.visible {
    animation: fadeSlideIn 0.8s ease-out forwards;
}

.layer-card:nth-child(1).visible {
    animation-delay: 0.1s;
}

.layer-card:nth-child(2).visible {
    animation-delay: 0.25s;
}

.layer-card:nth-child(3).visible {
    animation-delay: 0.4s;
}

.layer-card:nth-child(4).visible {
    animation-delay: 0.55s;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.layer-card:hover,
.layer-card.active {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.06);
    transform: translateY(-2px);
}

.layer-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.layer-num {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1;
    min-width: 48px;
}

.layer-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.layer-subtitle {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.15rem;
}

.layer-expand-icon {
    margin-left: auto;
    width: 24px;
    height: 24px;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s, stroke 0.3s;
}

.layer-card.active .layer-expand-icon,
.layer-card:hover .layer-expand-icon {
    stroke: var(--green);
    transform: rotate(180deg);
}

.layer-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s;
    padding: 0 0 0 3.7rem;
}

.layer-card.active .layer-body {
    max-height: 300px;
    padding: 1.2rem 0 0.5rem 3.7rem;
}

.layer-body p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}

.layer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

img.layer-tag {
    height: 20px;
    width: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPOUND CURVE
   ══════════════════════════════════════════════════════════════════════════ */
.curve-section {
    background: var(--white);
}

.curve-layout {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.curve-text h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.curve-text p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.curve-visual {
    position: relative;
    background: var(--off-white);
    border-radius: var(--radius);
    padding: 2.5rem;
    border: 1px solid var(--gray-200);
    min-height: 360px;
}

.curve-canvas {
    width: 100%;
    height: 300px;
    display: block;
}

.curve-legend {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    justify-content: center;
}

.curve-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
}

.curve-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════════════════════
   PROOF STRIP
   ══════════════════════════════════════════════════════════════════════════ */
.proof-strip {
    background: var(--navy);
    padding: 4rem 2rem;
    border-radius: var(--radius);
    max-width: var(--max-w);
    margin: 0 auto;
}

.proof-strip-inner {
    max-width: var(--max-w);
    margin: 0 auto;
}

.proof-acceleration {
    text-align: center;
    margin-bottom: 3rem;
}

.proof-acceleration p {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    line-height: 1.6;
}

.proof-acceleration .highlight {
    color: var(--green);
    font-weight: 800;
}

.proof-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}

.proof-stat .val {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
}

.proof-stat .lbl {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* Stats strip — used on role pages and homepage */
.proof-stats-strip {
    background: var(--navy);
    border-top: 1px solid rgba(80, 158, 47, 0.15);
    padding: 3rem 2rem;
}

.proof-stats-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.proof-stat-card .val {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
}

.proof-stat-card .lbl {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

@media (max-width: 768px) {
    .proof-stats-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   INDUSTRY VOICES
   ══════════════════════════════════════════════════════════════════════════ */
.voices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.voice-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2rem;
    position: relative;
    transition: all 0.3s;
}

.voice-card:hover {
    border-color: var(--green);
    box-shadow: 0 8px 30px rgba(80, 158, 47, 0.06);
    transform: translateY(-3px);
}

.voice-card::before {
    content: '\201C';
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 3rem;
    color: rgba(80, 158, 47, 0.15);
    font-family: Georgia, serif;
    line-height: 1;
}

.voice-card blockquote {
    font-size: 1rem;
    font-style: italic;
    color: var(--navy);
    line-height: 1.7;
    margin-bottom: 1.2rem;
    padding-top: 1rem;
}

.voice-card cite {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gray-400);
    font-style: normal;
    display: block;
}

.voices-theme-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-600);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
    max-width: var(--max-w);
    margin-left: auto;
    margin-right: auto;
}

.voices-theme-label:first-of-type {
    margin-top: 0;
}

.voice-card .voice-card-source {
    font-size: 0.72rem;
    color: var(--gray-600);
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   OUTCOME CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.outcomes-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.outcome-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 0;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.outcome-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
}

.outcome-card-thumb {
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.4s ease;
}

.outcome-card:hover .outcome-card-thumb {
    transform: scale(1.06);
}

.outcome-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.outcome-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.outcome-card-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.outcome-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 0.5rem;
}

.outcome-card p {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.6;
    flex: 1;
}

.outcome-card-arrow {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green-dark);
    transition: gap 0.3s;
}

.outcome-card:hover .outcome-card-arrow {
    gap: 0.7rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SELF-ASSESSMENT CTA
   ══════════════════════════════════════════════════════════════════════════ */
.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.cta-inner h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1rem;
}

.cta-inner p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.cta-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.cta-tier {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.cta-tier:hover {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.08);
    transform: translateY(-3px);
}

.cta-tier h3 {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
}

.cta-tier p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .cta-tiers {
        grid-template-columns: 1fr;
    }
}

.cta-trust {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.4);
}

.cta-trust strong {
    color: rgba(255, 255, 255, 0.6);
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: platform
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Layer reference map cards ── */
.plat-ref-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.plat-ref-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    gap: 2rem;
    align-items: start;
    transition: all 0.3s;
}

.plat-ref-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.06);
}

.plat-ref-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.plat-ref-num {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #2d6a1e;
}

.plat-ref-icon {
    height: 24px;
    width: auto;
    margin-bottom: 0.25rem;
}

.plat-ref-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.plat-ref-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    transition: gap 0.3s;
}

.plat-ref-link:hover {
    gap: 0.6rem;
}

.plat-ref-col h4 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-600);
    margin-bottom: 0.8rem;
}

.plat-ref-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plat-ref-col li {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.6;
    padding: 0.3rem 0;
    padding-left: 1.2rem;
    position: relative;
}

.plat-ref-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    border-radius: 2px;
}

.plat-ref-existing li::before {
    background: var(--green);
}

.plat-ref-unlocks li::before {
    background: var(--gold);
}

.plat-ref-col li strong {
    color: var(--navy);
    font-weight: 700;
}

.plat-ref-col li a {
    color: var(--green);
    font-weight: 600;
    text-decoration: none;
}

.plat-ref-col li a:hover {
    text-decoration: underline;
}

.plat-ref-new-label {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--gold);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* ── Journey (platform full-width version) ── */
.plat-journey-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.plat-journey-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    transition: all 0.3s;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.plat-journey-card:hover {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.plat-journey-num {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green);
    margin-bottom: 0.6rem;
}

.plat-journey-card h3 {
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.plat-journey-card>p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-bottom: 1rem;
    font-style: italic;
}

.plat-journey-products {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}

.plat-journey-products strong {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.plat-journey-stage-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    margin-top: auto;
    padding-top: 1.5rem;
}

/* ── Assessment teaser ── */
.plat-assess-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.plat-assess-inner p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.plat-assess-note {
    margin-top: 1.25rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
}

.icad-link {
    color: var(--green);
    font-weight: 600;
    text-decoration: underline transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.3s;
}

.icad-link:hover {
    text-decoration-color: var(--green);
}

/* ── Inline link visibility (WCAG 1.4.1) ── */
/* The global reset (a { color: inherit; text-decoration: none }) strips browser
   defaults for navigation, buttons, and cards. But inline links inside body text
   MUST be visually distinguishable. This rule restores link styling for all <a>
   inside text-bearing elements within <main>, excluding buttons, nav links, cards,
   logos, and other non-text link patterns. */
main p a:not(.btn):not(.related-card):not(.customer-proof-card):not(.trust-logo-link),
main li a:not(.btn):not(.header-logo),
main td a:not(.btn),
main dd a:not(.btn),
main blockquote a:not(.btn),
main figcaption a:not(.btn),
main .icad-callout a,
main .hero-lead a {
    color: var(--green-dark);
    text-decoration: underline;
    text-decoration-color: rgba(58, 122, 31, 0.4);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}

main p a:not(.btn):not(.related-card):not(.customer-proof-card):not(.trust-logo-link):hover,
main li a:not(.btn):not(.header-logo):hover,
main td a:not(.btn):hover,
main dd a:not(.btn):hover,
main blockquote a:not(.btn):hover,
main figcaption a:not(.btn):hover,
main .icad-callout a:hover,
main .hero-lead a:hover {
    text-decoration-color: var(--green);
}

/* Dark sections: brighter green for contrast */
.section-dark main p a:not(.btn),
.section-dark main li a:not(.btn),
main .section-dark p a:not(.btn),
main .section-dark li a:not(.btn),
.hero p a:not(.btn),
.hero li a:not(.btn) {
    color: var(--green);
    text-decoration-color: rgba(80, 158, 47, 0.5);
}

.section-dark main p a:not(.btn):hover,
.section-dark main li a:not(.btn):hover,
main .section-dark p a:not(.btn):hover,
main .section-dark li a:not(.btn):hover,
.hero p a:not(.btn):hover,
.hero li a:not(.btn):hover {
    color: #8bc34a;
    text-decoration-color: #8bc34a;
}

/* ── Demo embeds (light section) ── */
.plat-demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.plat-demo-panel {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    background: var(--white);
    box-shadow: 0 12px 40px rgba(10, 49, 40, 0.06);
    padding-bottom: 1rem;
}

.plat-demo-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.plat-demo-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.8rem;
    border-radius: var(--radius-xs);
    background: rgba(80, 158, 47, 0.1);
    color: var(--green-dark);
    white-space: nowrap;
}

.plat-demo-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
}

.plat-demo-panel iframe {
    width: 100%;
    height: 500px;
    border: none;
    display: block;
    margin-bottom: 0;
}

/* ── Layer explore grid ── */
.plat-explore-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto 2.5rem;
}

.plat-explore-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-decoration: none;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.plat-explore-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.plat-explore-num {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1;
    margin-bottom: 0.6rem;
}

.plat-explore-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0.6rem;
    border-radius: 8px;
}

.plat-explore-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.plat-explore-card p {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-top: auto;
}

/* ── Platform responsive ── */
@media (max-width: 1024px) {
    .plat-ref-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

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

    .plat-demo-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .plat-journey-track {
        grid-template-columns: 1fr;
    }

    .plat-demo-panel iframe {
        height: 380px;
    }

    .plat-explore-grid {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   SHARED
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-green {
    background: rgba(80, 158, 47, 0.12);
    color: #357020;
}

.badge-white {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--green-dark);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--green-glow);
    background: var(--green);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.btn-ghost {
    background: transparent;
    color: var(--green);
    border: 1px solid var(--green);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    background: rgba(80, 158, 47, 0.06);
    box-shadow: 0 8px 24px var(--green-glow);
}

section {
    padding: 7rem 2rem;
}

.section-light {
    background: var(--off-white);
    padding: 7rem 2rem;
}

.section-dark {
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 50%, #0c4a1c 100%);
    color: #fff;
    padding: 7rem 2rem;
}

.section-green {
    background: linear-gradient(160deg, #072e1a 0%, #0A3128 40%, #0c4a1c 100%);
    color: #fff;
    padding: 7rem 2rem;
}

.section-badge {
    text-align: center;
    margin-bottom: 1rem;
}

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.section-head h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.section-head p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
}

.section-dark .section-head p {
    color: rgba(255, 255, 255, 0.65);
}

/* Scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll:nth-child(2) {
    transition-delay: 0.1s;
}

.animate-on-scroll:nth-child(3) {
    transition-delay: 0.2s;
}

.animate-on-scroll:nth-child(4) {
    transition-delay: 0.3s;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: clamp(540px, 60vh, 720px);
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 40%, #0c4a1c 100%);
    display: flex;
    align-items: flex-start;
    padding: 10rem 2rem 6rem;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

.hero-content {
    max-width: 720px;
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin: 1.2rem 0 1.5rem;
    text-wrap: balance;
}

.hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.hero-lead strong {
    color: #fff;
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Hero mini-layers visual */
.hero-layers-mini {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero-layer-pill {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.5rem;
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateX(30px);
    animation: heroLayerIn 0.6s ease-out forwards;
    transition: border-color 0.3s, background 0.3s;
}

.hero-layer-pill:hover {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.06);
}

.hero-layer-pill:nth-child(1) {
    animation-delay: 0.3s;
}

.hero-layer-pill:nth-child(2) {
    animation-delay: 0.45s;
}

.hero-layer-pill:nth-child(3) {
    animation-delay: 0.6s;
}

.hero-layer-pill:nth-child(4) {
    animation-delay: 0.75s;
}

@keyframes heroLayerIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-layer-num {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--green);
    min-width: 32px;
    line-height: 1;
}

.hero-layer-info {
    flex: 1;
}

.hero-layer-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.hero-layer-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.15rem;
}

.hero-layer-arrow {
    width: 20px;
    height: 20px;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    fill: none;
    transition: stroke 0.3s;
}

.hero-layer-pill:hover .hero-layer-arrow {
    stroke: var(--green);
}

/* ══════════════════════════════════════════════════════════════════════════
   INTERACTIVE FOUR-LAYER DIAGRAM
   ══════════════════════════════════════════════════════════════════════════ */
.layers-section {
    padding-bottom: 5rem;
}

.layers-stack {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.layer-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.layer-card:hover,
.layer-card.active {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.06);
}

.layer-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.8rem 2.5rem;
}

.layer-num {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1;
    min-width: 48px;
}

.layer-meta {
    flex: 1;
}

.layer-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.layer-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.15rem;
}

.layer-expand-icon {
    margin-left: auto;
    width: 28px;
    height: 28px;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s, stroke 0.3s;
    flex-shrink: 0;
}

.layer-card.active .layer-expand-icon,
.layer-card:hover .layer-expand-icon {
    stroke: var(--green);
}

.layer-card.active .layer-expand-icon {
    transform: rotate(180deg);
}

.layer-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.layer-body-inner {
    padding: 0 2.5rem 2rem 5.5rem;
}

.layer-body p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}

.layer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

img.layer-tag {
    height: 20px;
    width: auto;
}

.layer-deepdive {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green);
    transition: gap 0.3s;
}

.layer-deepdive:hover {
    gap: 0.7rem;
}

.layer-deepdive svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Connector lines between layers */
.layer-connector {
    width: 2px;
    height: 1rem;
    background: linear-gradient(to bottom, var(--green), rgba(80, 158, 47, 0.2));
    margin: 0 auto;
    border-radius: 1px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SELF-ASSESSMENT
   ══════════════════════════════════════════════════════════════════════════ */
.assessment-section {
    padding: 7rem 2rem;
}

.assessment-card {
    max-width: 860px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(10, 49, 40, 0.06);
}

.assessment-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    padding: 2.5rem 3rem;
    color: #fff;
}

.assessment-header h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.assessment-header p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
}

.assessment-progress {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.assessment-dot {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.4s;
}

.assessment-dot.active {
    background: var(--green);
}

.assessment-dot.done {
    background: rgba(80, 158, 47, 0.5);
}

.assessment-body {
    padding: 2.5rem 3rem;
}

.assessment-question {
    display: none;
}

.assessment-question.active {
    display: block;
}

.assessment-question h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.5rem;
}

.assessment-question .q-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.assessment-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.assessment-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.25s;
    background: var(--white);
}

.assessment-option:hover {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.02);
}

.assessment-option.selected {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.04);
}

.assessment-option-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--gray-200);
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.25s;
}

.assessment-option.selected .assessment-option-radio {
    border-color: var(--green);
}

.assessment-option.selected .assessment-option-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
}

.assessment-option-text {
    flex: 1;
}

.assessment-option-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--navy);
}

.assessment-option-desc {
    font-size: 0.82rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
}

.assessment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-100);
}

.assessment-header .btn {
    font-size: 0.88rem;
    padding: 0.7rem 1.8rem;
}

.btn-back {
    background: transparent;
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
}

.btn-back:hover {
    border-color: var(--gray-400);
}

/* Assessment results */
.assessment-result {
    display: none;
}

.assessment-result.active {
    display: block;
}

.result-layer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.2rem;
    border-radius: var(--radius-md);
    background: rgba(80, 158, 47, 0.08);
    margin-bottom: 1.5rem;
}

.result-layer-badge .rl-num {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--green-dark);
}

.result-layer-badge .rl-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--navy);
}

.result-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.75rem;
}

.result-desc {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.result-next {
    padding: 1.5rem;
    background: var(--off-white);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.result-next h5 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.result-next p {
    font-size: 0.92rem;
    color: var(--navy);
    line-height: 1.6;
}

.result-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 4 — TODAY / NEXT / FUTURE (legacy .horizon-grid layout)
   ══════════════════════════════════════════════════════════════════════════ */
.horizon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.horizon-grid .horizon-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.horizon-grid .horizon-status {
    margin-top: auto;
}

.horizon-grid .horizon-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.horizon-grid .horizon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.horizon-grid .horizon-card.today::before {
    background: var(--green);
}

.horizon-grid .horizon-card.next::before {
    background: var(--blue);
}

.horizon-grid .horizon-card.future::before {
    background: var(--purple);
}

.horizon-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-xs);
    margin-bottom: 1.2rem;
}

.today .horizon-tag {
    background: rgba(80, 158, 47, 0.08);
    color: var(--green);
}

.next .horizon-tag {
    background: rgba(37, 99, 235, 0.08);
    color: var(--blue);
}

.future .horizon-tag {
    background: rgba(124, 58, 237, 0.08);
    color: var(--purple);
}

.horizon-grid .horizon-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.horizon-list {
    list-style: none;
    padding: 0;
}

.horizon-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0;
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.5;
}

.horizon-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.today .horizon-list li::before {
    background: var(--green);
}

.next .horizon-list li::before {
    background: var(--blue);
}

.future .horizon-list li::before {
    background: var(--purple);
}

.horizon-grid .horizon-status {
    padding-top: 1rem;
    border-top: 1px solid var(--gray-100);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.horizon-grid .today .horizon-status {
    color: var(--green);
}

.horizon-grid .next .horizon-status {
    color: var(--blue);
}

.horizon-grid .future .horizon-status {
    color: var(--purple);
}

/* ══════════════════════════════════════════════════════════════════════════
   DEMO EMBED — Day 1 / Month 6
   ══════════════════════════════════════════════════════════════════════════ */
.demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.demo-panel {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.demo-panel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.demo-panel-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.8rem;
    border-radius: var(--radius-xs);
    background: rgba(80, 158, 47, 0.12);
    color: var(--green);
}

.demo-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.demo-panel-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: auto;
}

.demo-panel iframe {
    width: 100%;
    height: 560px;
    border: none;
    display: block;
    background: #0a0a0a;
}

/* ══════════════════════════════════════════════════════════════════════════
   EVOLUTION TIMELINE
   ══════════════════════════════════════════════════════════════════════════ */
.timeline-track {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    padding-left: 3rem;
}

.timeline-track::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--green), var(--gray-200));
}

.timeline-item {
    position: relative;
    padding: 0 0 3rem 2rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -2.95rem;
    top: 0.3rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--green);
    z-index: 1;
}

.timeline-item:last-child .timeline-dot {
    background: var(--green);
}

.timeline-item:last-child .timeline-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #fff;
}

.timeline-era {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

.timeline-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.4rem;
}

.timeline-desc {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.cta-section {
    text-align: center;
}

.cta-section h2 {
    color: #fff;
    margin-bottom: 1rem;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.65);
    max-width: 560px;
    margin: 0 auto 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: ind-acceleration
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: clamp(540px, 60vh, 720px);
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 40%, #0c4a1c 100%);
    display: flex;
    align-items: flex-start;
    padding: 10rem 2rem 6rem;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

.hero-content {
    max-width: 720px;
}

.badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-green {
    background: rgba(80, 158, 47, 0.12);
    color: #357020;
}

.badge-white {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin: 1.2rem 0 1.5rem;
    text-wrap: balance;
}

.hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.hero-lead strong {
    color: #fff;
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--green-dark);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--green-glow);
    background: var(--green);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.btn-ghost {
    background: transparent;
    color: var(--green);
    border: 1px solid var(--green);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    background: rgba(80, 158, 47, 0.06);
    box-shadow: 0 8px 24px var(--green-glow);
}

/* Hero payoff panel */
.hero-payoff {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2.5rem;
    backdrop-filter: blur(12px);
}

.hero-payoff-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2rem;
}

.payoff-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.25rem 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateX(20px);
    animation: statSlideIn 0.6s ease-out forwards;
}

.payoff-stat:last-child {
    border-bottom: none;
}

.payoff-stat:nth-child(2) {
    animation-delay: 0.15s;
}

.payoff-stat:nth-child(3) {
    animation-delay: 0.3s;
}

.payoff-stat:nth-child(4) {
    animation-delay: 0.45s;
}

.payoff-val {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
    white-space: nowrap;
}

.payoff-desc {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    align-self: center;
}

.payoff-desc strong {
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED SECTION STYLES
   ══════════════════════════════════════════════════════════════════════════ */
section {
    padding: 7rem 2rem;
}

.section-light {
    background: var(--off-white);
    padding: 7rem 2rem;
}

.section-dark {
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 50%, #0c4a1c 100%);
    color: #fff;
    padding: 7rem 2rem;
}

.section-green {
    background: linear-gradient(160deg, #072e1a 0%, #0A3128 40%, #0c4a1c 100%);
    color: #fff;
    padding: 7rem 2rem;
}

.section-badge {
    text-align: center;
    margin-bottom: 1rem;
}

.section-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3.5rem;
}


.section-head h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
    text-wrap: balance;
}

.section-head p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
}

.section-dark .section-head p {
    color: rgba(255, 255, 255, 0.65);
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTTLENECK SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.bottleneck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.section-light .bottleneck-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.section-light .bottleneck-card:hover {
    border-color: rgba(224, 82, 82, 0.3);
    box-shadow: 0 8px 30px rgba(224, 82, 82, 0.08);
    transform: translateY(-3px);
}

.section-light .bottleneck-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--red-problem);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.section-light .bottleneck-card:hover::before {
    transform: scaleX(1);
}

.bottleneck-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(224, 82, 82, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.bottleneck-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--red-problem);
    stroke-width: 2;
    fill: none;
}

.section-light .bottleneck-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    color: var(--navy);
}

.section-light .bottleneck-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
}

.bottleneck-stat {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-100);
    font-size: 0.82rem;
    color: var(--gray-400);
    line-height: 1.5;
}

.bottleneck-stat strong {
    color: var(--red-problem);
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   APPROACH / 4-STEP FLOW
   ══════════════════════════════════════════════════════════════════════════ */
.approach-flow {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
}

.approach-flow::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 10%, rgba(255, 255, 255, 0.15) 90%, transparent);
    z-index: 0;
}

.approach-step {
    text-align: center;
    position: relative;
}

.approach-step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--navy);
    border: 2px solid var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--green);
    position: relative;
    z-index: 1;
}

.approach-step h3 {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.6rem;
    letter-spacing: -0.02em;
}

.approach-step p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.approach-step-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 0.8rem;
    stroke: var(--green);
    stroke-width: 1.5;
    fill: none;
}

/* Wizard substeps */
.wizard-flow {
    max-width: 900px;
    margin: 3.5rem auto 0;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
}

.wizard-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1.5rem;
    text-align: center;
}

.wizard-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.wizard-step {
    padding: 1.2rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    transition: all 0.3s;
}

.wizard-step:hover {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.06);
}

.wizard-step-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green);
    margin-bottom: 0.5rem;
}

.wizard-step h4 {
    font-size: 0.92rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.4rem;
}

.wizard-step p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   LIVE EXPERIENCE (MOCKUP EMBED)
   ══════════════════════════════════════════════════════════════════════════ */
.mockup-section {
    background: var(--white);
}

.mockup-intro {
    max-width: 760px;
    margin: 0 auto 3rem;
    text-align: center;
}

.mockup-intro h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.mockup-intro p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
}

.mockup-embed-wrapper {
    max-width: var(--max-w);
    margin: 0 auto;
}

.mockup-embed {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: 0 20px 60px rgba(10, 49, 40, 0.08);
    position: relative;
}

.mockup-fullscreen-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.mockup-embed:hover .mockup-fullscreen-btn,
.mockup-embed:focus-within .mockup-fullscreen-btn {
    opacity: 1;
}

.mockup-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.75);
}

.mockup-fullscreen-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mockup-embed.mockup-maximized {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.mockup-embed.mockup-maximized iframe {
    height: 100vh;
}

.mockup-embed.mockup-maximized .mockup-fullscreen-btn {
    opacity: 1;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.65);
}

.mockup-embed iframe {
    width: 100%;
    height: 700px;
    border: none;
    display: block;
}

.mockup-embed img {
    width: 100%;
    height: auto;
    display: block;
}

.mockup-hint {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.6;
}

.mockup-hint svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    stroke: var(--gray-600);
    stroke-width: 2;
    fill: none;
    margin-right: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCTION SCHEMA
   ══════════════════════════════════════════════════════════════════════════ */
.schema-section {
    background: var(--off-white);
}

.schema-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.schema-table-wrapper {
    border-radius: var(--radius);
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--gray-200);
    background: var(--white);
}

.schema-table-title {
    padding: 1.2rem 1.5rem;
    background: var(--navy);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.schema-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.schema-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.schema-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-600);
    line-height: 1.5;
}

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

.schema-table td:first-child {
    font-weight: 600;
    color: var(--navy);
}

.schema-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
    font-size: 0.72rem;
    font-weight: 700;
}

.schema-tag-green {
    background: rgba(80, 158, 47, 0.1);
    color: var(--green-dark);
}

.schema-tag-blue {
    background: rgba(37, 99, 235, 0.1);
    color: var(--blue-dark);
}

.schema-tag-yellow {
    background: rgba(217, 119, 6, 0.1);
    color: var(--amber-dark);
}

.schema-tag-amber {
    background: rgba(217, 119, 6, 0.1);
    color: var(--amber-dark);
}

.schema-tag-red {
    background: rgba(224, 82, 82, 0.1);
    color: var(--red-dark);
}

.schema-tag-gray {
    background: rgba(142, 154, 135, 0.12);
    color: var(--gray-600);
}

.schema-right h3 {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--navy);
    margin-bottom: 1rem;
}

.schema-right p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.schema-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.schema-metric {
    padding: 1.2rem;
    border-radius: var(--radius-md);
    background: var(--white);
    border: 1px solid var(--gray-200);
    text-align: center;
}

.schema-metric .val {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
}

.schema-metric .lbl {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.4rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   EVIDENCE SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.compound-ai-bridge {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem 1.5rem;
    background: rgba(80, 158, 47, 0.08);
    border-left: 3px solid var(--green);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.compound-ai-bridge a {
    color: var(--green);
    font-weight: 600;
    text-decoration: none;
}

.compound-ai-bridge a:hover {
    text-decoration: underline;
}

.section-light .compound-ai-bridge {
    color: var(--navy);
}

.evidence-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
}

.evidence-card {
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.evidence-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.evidence-card:hover::before {
    transform: scaleX(1);
}

img.evidence-layer-badge {
    display: inline-block;
    height: 26px;
    width: auto;
    margin-bottom: 1.2rem;
    vertical-align: middle;
}

span.evidence-layer-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--green);
    margin-bottom: 1rem;
}

.evidence-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.evidence-card p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

.evidence-card p a {
    color: var(--green);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(80, 158, 47, 0.4);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}

.evidence-card p a:hover {
    text-decoration-color: var(--green);
}

.evidence-card ul {
    list-style: none;
    margin-top: 1rem;
    padding: 0;
}

.evidence-card ul li {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    padding: 0.4rem 0;
    padding-left: 1.2rem;
    position: relative;
}

.evidence-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--green);
}

/* ══════════════════════════════════════════════════════════════════════════
   RELATED OUTCOMES
   ══════════════════════════════════════════════════════════════════════════ */
.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.related-grid:has(> :nth-child(5)) {
    grid-template-columns: repeat(5, 1fr);
}

.related-grid:not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .related-grid {
        grid-template-columns: 1fr;
    }
}

.related-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 0;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.related-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
}

.related-card-thumb {
    width: 100%;
    height: 160px;
    overflow: hidden;
    display: block;
}

.related-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.4s ease;
}

.related-card:hover .related-card-thumb img {
    transform: scale(1.06);
}

img.related-card-thumb {
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}

.related-card:hover>img.related-card-thumb {
    transform: scale(1.06);
}

.related-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.related-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.related-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.related-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}

.related-card p {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.7;
}

.related-card-tag {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    background: rgba(80, 158, 47, 0.08);
    color: var(--green-dark);
    border-radius: var(--radius-xs);
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.cta-section {
    text-align: center;
}

.cta-section h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: data-privacy
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page Content ── */
.legal-hero {
    padding: 9rem 2rem 3rem;
    background: var(--off-white);
    border-bottom: 1px solid var(--gray-200);
}

.legal-hero .container {
    max-width: 820px;
}

.legal-hero h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: 0.5rem;
}

.legal-hero .legal-updated {
    font-size: 0.85rem;
    color: var(--gray-600);
    font-weight: 500;
}

.legal-body {
    padding: 4rem 2rem 5rem;
}

.legal-body .container {
    max-width: 820px;
}

/* ── Table of Contents ── */
.toc {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2rem 2.5rem;
    margin-bottom: 3rem;
}

.toc h2 {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-600);
    margin-bottom: 1.2rem;
}

.toc ol {
    margin: 0;
    padding: 0 0 0 1.5rem;
    columns: 2;
    column-gap: 2rem;
}

.toc li {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    color: var(--gray-600);
    break-inside: avoid;
}

.toc li a {
    color: var(--navy);
    text-decoration: none;
    transition: color 0.2s;
}

.toc li a:hover {
    color: var(--green);
}

/* ── Legal Sections ── */
.legal-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--gray-200);
    scroll-margin-top: 100px;
}

.legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.legal-body h2 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: rgba(80, 158, 47, 0.1);
    color: var(--green-dark);
    font-size: 0.82rem;
    font-weight: 800;
    flex-shrink: 0;
}

.legal-body p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-body p:last-child {
    margin-bottom: 0;
}

.legal-body ul {
    margin: 0.5rem 0 1rem 1.5rem;
    padding: 0;
    color: var(--gray-600);
    font-size: 1.05rem;
    line-height: 1.8;
}

.legal-body ul li {
    margin-bottom: 0.4rem;
}

.legal-body a.inline-link {
    color: var(--green);
    text-decoration: underline;
    text-decoration-color: rgba(80, 158, 47, 0.4);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}

.legal-body a.inline-link:hover {
    text-decoration-color: var(--green);
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: imprint
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page Content ── */
.imprint-hero {
    padding: 9rem 2rem 3rem;
    background: var(--off-white);
    border-bottom: 1px solid var(--gray-200);
}

.imprint-hero .container {
    max-width: 820px;
}

.imprint-hero h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--navy);
}

.imprint-body {
    padding: 4rem 2rem 5rem;
}

.imprint-body .container {
    max-width: 820px;
}

.imprint-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2.5rem;
}

.imprint-company {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.imprint-details {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.imprint-details li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.7;
}

.imprint-details li .imprint-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.imprint-details li .imprint-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.imprint-details li a {
    color: var(--green-dark);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.imprint-details li a:hover {
    color: var(--green-dark);
}

.imprint-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-600);
    display: block;
    margin-bottom: 0.15rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: legal-information
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page Content ── */
.legal-hero {
    padding: 9rem 2rem 3rem;
    background: var(--off-white);
    border-bottom: 1px solid var(--gray-200);
}

.legal-hero .container {
    max-width: 820px;
}

.legal-hero h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: 0.5rem;
}

.legal-hero .legal-updated {
    font-size: 0.85rem;
    color: var(--gray-600);
    font-weight: 500;
}

.legal-body {
    padding: 4rem 2rem 5rem;
}

.legal-body .container {
    max-width: 820px;
}

.legal-body h2 {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

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

.legal-body p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-body p:last-child {
    margin-bottom: 0;
}

.legal-divider {
    border: none;
    border-top: 1px solid var(--gray-200);
    margin: 2.5rem 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: terms-conditions
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page Content ── */
.legal-hero {
    padding: 9rem 2rem 3rem;
    background: var(--off-white);
    border-bottom: 1px solid var(--gray-200);
}

.legal-hero .container {
    max-width: 820px;
}

.legal-hero h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: 0.5rem;
}

.legal-hero .legal-updated {
    font-size: 0.85rem;
    color: var(--gray-600);
    font-weight: 500;
}

.legal-body {
    padding: 4rem 2rem 5rem;
}

.legal-body .container {
    max-width: 820px;
}

/* ── Table of Contents ── */
.toc {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2rem 2.5rem;
    margin-bottom: 3rem;
}

.toc h2 {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-600);
    margin-bottom: 1.2rem;
}

.toc ol {
    margin: 0;
    padding: 0 0 0 1.5rem;
    columns: 2;
    column-gap: 2rem;
}

.toc li {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    color: var(--gray-600);
    break-inside: avoid;
}

.toc li a {
    color: var(--navy);
    text-decoration: none;
    transition: color 0.2s;
}

.toc li a:hover {
    color: var(--green);
}

/* ── Legal Sections ── */
.legal-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--gray-200);
    scroll-margin-top: 100px;
}

.legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.legal-body h2 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 0.75rem;
    line-height: 1.3;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: rgba(80, 158, 47, 0.1);
    color: var(--green-dark);
    font-size: 0.82rem;
    font-weight: 800;
    flex-shrink: 0;
}

.legal-body p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-body p:last-child {
    margin-bottom: 0;
}

.legal-body ul {
    margin: 0.5rem 0 1rem 1.5rem;
    padding: 0;
    color: var(--gray-600);
    font-size: 1.05rem;
    line-height: 1.8;
}

.legal-body ul li {
    margin-bottom: 0.4rem;
}

.legal-body a.inline-link {
    color: var(--green);
    text-decoration: underline;
    text-decoration-color: rgba(80, 158, 47, 0.4);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}

.legal-body a.inline-link:hover {
    text-decoration-color: var(--green);
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: integrate
   ══════════════════════════════════════════════════════════════════════════ */

/* ── HERO — The Provocation ── */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 40%, #0c4a1c 100%);
    padding: 10rem 2rem 6rem;
    min-height: clamp(540px, 60vh, 720px);
    display: flex;
    align-items: flex-start;
}

.hero::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(80, 158, 47, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Animated grid background */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

.hero-eyebrow {
    margin-bottom: 1.5rem;
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    color: var(--white);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 1.2rem 0 1.5rem;
    text-wrap: balance;
}

.hero h1 .strike {
    text-decoration: line-through;
    opacity: 0.4;
    font-weight: 400;
}

.hero h1 em {
    color: var(--green);
    font-style: normal;
}

.hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.hero-lead strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-proof {
    margin-top: 3rem;
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.hero-proof-item {
    text-align: left;
}

@media (max-width: 600px) {
    .hero-proof {
        gap: 1.5rem 2rem;
    }

    .hero-proof-item .val {
        font-size: 1.4rem;
    }
}

.hero-proof-item .val {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
}

.hero-proof-item .lbl {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.2rem;
    letter-spacing: 0.02em;
}

.section {
    padding: 7rem 2rem;
}

.section-dark {
    background: var(--navy);
    color: var(--white);
    padding: 7rem 2rem;
}

.section-green {
    background: linear-gradient(160deg, var(--dark) 0%, #0c3a04 60%, #1e4a13 100%);
    color: var(--white);
    padding: 7rem 2rem;
}

.section-light {
    background: var(--off-white);
    padding: 7rem 2rem;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.section-header.section-header--spaced {
    margin-top: 2.5rem;
}

.section-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1.2rem;
}

.section-header h2 em {
    color: var(--green);
    font-style: normal;
}

.section-header p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--gray-600);
    max-width: 680px;
    margin: 0 auto;
}

.section-header p a,
.section-head p a {
    color: var(--green);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(80, 158, 47, 0.4);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}

.section-header p a:hover,
.section-head p a:hover {
    text-decoration-color: var(--green);
}

.section-dark .section-header p a,
.section-dark .section-head p a {
    color: var(--green);
}

.section-dark .section-header p a:hover,
.section-dark .section-head p a:hover {
    color: #8bc34a;
}

.section-dark .section-header h2 em,
.section-green .section-header h2 em {
    color: var(--green);
}

.section-dark .section-header p,
.section-green .section-header p {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Crisis / Problem Section ── */
.crisis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.crisis-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.crisis-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--red-problem);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.crisis-card:hover::before {
    transform: scaleX(1);
}

.crisis-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.crisis-number {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--gray-200);
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: -0.04em;
}

.crisis-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.7rem;
}

.crisis-card p {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* ── Shift / Two Factories ── */
.factories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

@media (max-width: 768px) {
    .factories-grid {
        grid-template-columns: 1fr;
    }
}

.factory-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.35s;
    display: flex;
    flex-direction: column;
}

.factory-card .factory-card-features {
    margin-top: auto;
}

.factory-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(80, 158, 47, 0.3);
    transform: translateY(-4px);
}

.factory-card-number {
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(80, 158, 47, 0.06);
    line-height: 1;
    pointer-events: none;
}

.factory-card-icon {
    width: 60px;
    height: 60px;
    background: rgba(80, 158, 47, 0.12);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.factory-card-icon svg {
    width: 30px;
    height: 30px;
    color: var(--green);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.factory-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 1rem;
}

.factory-card p {
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.factory-card-features {
    list-style: none;
}

.factory-card-features li {
    padding: 0.5rem 0 0.5rem 1.8rem;
    position: relative;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
}

.factory-card-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--green);
}

.factory-card-stats {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.factory-stat .fs-val {
    display: block;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--green);
}

.factory-stat .fs-lbl {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.1rem;
}

/* Section-light override for factory-card (base styles use white text for dark backgrounds) */
.section-light .factory-card {
    background: var(--white);
    border-color: rgba(0, 0, 0, 0.08);
}

.section-light .factory-card:hover {
    background: var(--white);
    border-color: rgba(80, 158, 47, 0.3);
}

.section-light .factory-card-number {
    color: rgba(80, 158, 47, 0.06);
}

.section-light .factory-card h3 {
    color: var(--dark);
}

.section-light .factory-card p {
    color: var(--gray-600);
}

.section-light .factory-card-features li {
    color: var(--gray-600);
}

.section-light .factory-stat .fs-lbl {
    color: var(--gray-600);
}

.section-light .factory-card-stats {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* ── Transformation Section — Before/After ── */
.transform {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 0;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

.transform-col {
    border-radius: var(--radius);
    padding: 2.5rem;
}

.transform-old {
    background: #fef7f7;
    border: 1px solid #f3d5d5;
}

.transform-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.transform-arrow-inner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
    box-shadow: 0 4px 20px var(--green-glow);
}

.transform-new {
    background: #f2faf0;
    border: 2px solid var(--green);
}

.transform-col h3 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.transform-old h3 {
    color: var(--red-problem);
}

.transform-new h3 {
    color: var(--green-dark);
}

.transform-col ul {
    list-style: none;
}

.transform-col li {
    padding: 0.55rem 0 0.55rem 2rem;
    position: relative;
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.5;
}

.transform-old li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: var(--red-problem);
    font-weight: 800;
}

.transform-new li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 800;
}

/* ── Metrics / Impact ── */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.metric {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s;
}

.metric:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(80, 158, 47, 0.2);
    transform: translateY(-2px);
}

.metric .m-val {
    display: block;
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1;
    letter-spacing: -0.03em;
}

.metric .m-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--white);
    margin-top: 0.6rem;
}

.metric .m-desc {
    display: block;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.4rem;
    line-height: 1.5;
}

.savings-highlight {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.savings-card {
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    background: rgba(80, 158, 47, 0.08);
    border: 1px solid rgba(80, 158, 47, 0.2);
}

.savings-card .s-amount {
    display: block;
    font-size: 3rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1;
}

.savings-card .s-tier {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    margin: 0.4rem 0 0.8rem;
}

.savings-card .s-detail {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
}

/* ── Lifecycle ── */
.lifecycle-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
    margin-bottom: 2rem;
}

.lifecycle-track::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 5%;
    right: 5%;
    height: 3px;
    background: linear-gradient(90deg, var(--green), rgba(80, 158, 47, 0.3));
    border-radius: 2px;
}

.lc-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.lc-num {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 16px var(--green-glow);
}

.lc-step h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.lc-step p {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.5;
    max-width: 160px;
    margin: 0 auto;
}

/* ── Compounding Timeline ── */
.timeline-visual {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
}

.timeline-visual::before {
    display: none;
}

.tv-phase {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s;
}

.tv-phase:hover {
    border-color: rgba(80, 158, 47, 0.3);
    transform: translateY(-3px);
}

.tv-phase .tv-num {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.tv-phase h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.tv-phase p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* ── Deliverables ── */
.deliverables {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

/* ── Connected Products ── */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

.section-dark .product-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    backdrop-filter: blur(8px);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.section-dark .product-card .factory-card-features,
.section-dark .product-card .factory-card-stats {
    margin-top: auto;
}

.section-dark .product-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(80, 158, 47, 0.3);
    transform: translateY(-3px);
}

.product-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green);
    margin-bottom: 0.8rem;
}

.section-dark .product-card h3,
.section-dark .product-card h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.section-dark .product-card p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

/* ── Deliverables ── */
.del-card {
    text-align: center;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    transition: all 0.3s;
}

.del-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border-color: var(--green);
}

.del-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1.2rem;
    background: rgba(80, 158, 47, 0.08);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.del-icon svg {
    width: 26px;
    height: 26px;
    color: var(--green);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.del-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.del-card p {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.5;
}

/* ── Integration Proof ── */
.if-cumulative-highlight .proof-strip {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    max-width: 960px;
}

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

.proof-item .pi-val {
    display: block;
    font-size: 3rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1;
}

.proof-item .pi-lbl {
    display: block;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.3rem;
    font-weight: 500;
}

/* ── Quote ── */
.quote-block {
    max-width: 900px;
    margin: 2rem auto 0;
    text-align: center;
    padding: 3rem 3rem 0;
    position: relative;
}

.quote-block::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6rem;
    font-weight: 900;
    color: rgba(80, 158, 47, 0.12);
    line-height: 1;
}

.quote-block p {
    font-size: 1.3rem;
    font-weight: 500;
    font-style: italic;
    color: var(--navy);
    line-height: 1.7;
}

.quote-block .attribution {
    margin-top: 1rem;
    font-size: 0.88rem;
    font-style: normal;
    color: var(--gray-600);
    font-weight: 600;
}

.section-dark .quote-block p {
    color: rgba(255, 255, 255, 0.85);
}

.section-dark .quote-block .attribution {
    color: rgba(255, 255, 255, 0.5);
}

.section-dark .quote-block::before {
    color: rgba(80, 158, 47, 0.2);
}

/* ── Quote Carousel ── */
.quote-carousel {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.quote-slide {
    display: none;
}

.quote-slide.active {
    display: block;
}

.quote-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.quote-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-dot::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--green);
    background: transparent;
    transition: background 0.3s;
}

.quote-dot.active::after {
    background: var(--green);
}

.quote-dot:hover::after {
    background: var(--green);
    opacity: 0.7;
}

/* ── ROI Calculator ── */
.roi-calc {
    max-width: 900px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.roi-header {
    background: var(--navy);
    color: var(--white);
    padding: 1.5rem 2.5rem;
}

.roi-header h3 {
    font-size: 1.2rem;
    font-weight: 800;
}

.roi-header p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.3rem;
}

.roi-body {
    padding: 2.5rem;
}

.roi-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.roi-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 0.4rem;
}

.roi-field input,
.roi-field select {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
    transition: border-color 0.2s;
}

.roi-field input:focus,
.roi-field select:focus {
    outline: none;
    border-color: var(--green);
}

.roi-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 2rem;
    background: #f2faf0;
    border-radius: var(--radius-md);
}

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

.roi-result .rr-val {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: var(--green);
}

.roi-result .rr-lbl {
    display: block;
    font-size: 0.82rem;
    color: var(--gray-600);
    font-weight: 500;
    margin-top: 0.2rem;
}

/* ── Getting Started ── */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.step-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-card p {
    margin-top: auto;
}

.step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.step-num {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
}

.step-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.step-card p {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Final CTA ── */
.cta-section {
    padding: 7rem 2rem;
    background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 50%, var(--navy-mid) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
}

.cta-section h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--white);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    position: relative;
}

.cta-section p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
    position: relative;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

/* ── Footer (from shared component) ── */

/* ── Layer 1 specific: Technique Applications ── */
#technique-applications {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#technique-applications .section-header {
    margin-bottom: 1rem;
}

#technique-applications p.section-header {
    margin-bottom: 2rem;
}

.int-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.int-tech-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 1.8rem 1.2rem;
    text-align: center;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.int-tech-card p {
    margin-top: auto;
}

.int-tech-card:hover {
    border-color: rgba(80, 158, 47, 0.3);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

.int-tech-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background: rgba(80, 158, 47, 0.12);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.int-tech-icon svg {
    width: 24px;
    height: 24px;
    color: var(--green);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.int-tech-card h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.25rem;
}

.int-tech-card p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* ── Layer 1 specific: Factory economics (light bg) ── */
.int-econ-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.int-econ-card {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.int-econ-card p {
    margin-top: auto;
}

.int-econ-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border-color: var(--green);
}

.int-econ-num {
    font-size: 2rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
}

.int-econ-card h4 {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0.5rem 0 0.3rem;
    color: var(--navy);
}

.int-econ-card p {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.5;
}

/* (L1 journey styles replaced by shared .platform-journey-* classes) */

/* ── Layer 1 specific: Bridge to next layer ── */
.int-bridge {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.int-bridge-from,
.int-bridge-to {
    padding: 2rem;
    border-radius: var(--radius);
    text-align: center;
}

.int-bridge-from {
    background: rgba(80, 158, 47, 0.08);
    border: 2px solid var(--green);
}

.int-bridge-to {
    background: var(--white);
    border: 1px solid var(--gray-200);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
}

.int-bridge-to:hover {
    border-color: var(--green);
    box-shadow: 0 8px 32px rgba(80, 158, 47, 0.1);
    transform: translateY(-3px);
}

.int-bridge-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.int-bridge-arrow svg {
    width: 40px;
    height: 40px;
    color: var(--green);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.int-bridge-icon {
    height: 24px;
    width: auto;
    margin-bottom: 0.5rem;
}

.int-bridge-from h3,
.int-bridge-to h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.int-bridge-from p,
.int-bridge-to p {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* ── Layer 1 specific: Responsive overrides ── */
@media (max-width: 1024px) {
    .int-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .int-tech-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .int-bridge {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .int-bridge-arrow {
        transform: rotate(90deg);
    }

    .int-econ-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .int-tech-grid {
        grid-template-columns: 1fr;
    }

    .int-econ-grid {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: contextualize
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Layer 2: Hub module grid (light and dark variants) ── */
.ctx-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.ctx-hub-grid+.ctx-hub-grid {
    margin-top: 2rem;
}

.ctx-hub-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    backdrop-filter: blur(8px);
    transition: all 0.3s;
}

.ctx-hub-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(80, 158, 47, 0.3);
    transform: translateY(-3px);
}

.ctx-hub-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1.2rem;
    background: rgba(80, 158, 47, 0.12);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctx-hub-card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--green);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.ctx-hub-card .product-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green);
    margin-bottom: 0.5rem;
}

.ctx-hub-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.ctx-hub-card p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

.ctx-hub-card .hub-affirm {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--green);
    margin-top: 1rem;
    font-style: italic;
}

.ctx-hub-card ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.ctx-hub-card li {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.3rem 0;
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.5;
}

.ctx-hub-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 2px;
}

/* Light background variant for "What Your Data Unlocks" section */
.section-light .ctx-hub-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    backdrop-filter: none;
}

.section-light .ctx-hub-card:hover {
    background: var(--white);
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
}

.section-light .ctx-hub-card h3 {
    color: var(--navy);
}

.section-light .ctx-hub-card p {
    color: var(--gray-600);
}

.section-light .ctx-hub-card li {
    color: var(--gray-600);
}

.section-light .ctx-hub-card .hub-affirm {
    color: var(--green-dark);
}

/* ── Layer 2: Unlock capability cards (2-col variant) ── */
.ctx-unlock-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* (L2 journey styles replaced by shared .platform-journey-* classes) */

/* ── Layer 2: Bridge to next layer ── */
.ctx-bridge {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 2.5rem;
}

.ctx-bridge-from,
.ctx-bridge-to {
    padding: 2rem;
    border-radius: var(--radius);
    text-align: center;
}

.ctx-bridge-from {
    background: rgba(80, 158, 47, 0.08);
    border: 2px solid var(--green);
}

.ctx-bridge-to {
    background: var(--white);
    border: 1px solid var(--gray-200);
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
}

.ctx-bridge-to:hover {
    border-color: var(--green);
    box-shadow: 0 8px 32px rgba(80, 158, 47, 0.1);
    transform: translateY(-3px);
}

.ctx-bridge-icon {
    height: 24px;
    width: auto;
    margin-bottom: 0.5rem;
}

.ctx-bridge-from h3,
.ctx-bridge-to h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.4rem;
}

.ctx-bridge-from p,
.ctx-bridge-to p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.5;
}

.ctx-bridge-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctx-bridge-arrow svg {
    width: 40px;
    height: 24px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

/* ── Responsive: Layer 2 ── */
@media (max-width: 1024px) {
    .ctx-hub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ctx-hub-grid {
        grid-template-columns: 1fr;
    }

    .ctx-unlock-grid {
        grid-template-columns: 1fr;
    }

    .ctx-bridge {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ctx-bridge-arrow svg {
        transform: rotate(90deg);
    }
}

@media (max-width: 480px) {}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: analyze
   ══════════════════════════════════════════════════════════════════════════ */

/* (L3 journey styles replaced by shared .platform-journey-* classes) */

/* ── Layer 3: "What's Already Working" product card (light bg) ── */
.alz-product-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.alz-product-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.alz-product-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.alz-product-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
}

.alz-product-card p a {
    color: var(--green);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(80, 158, 47, 0.4);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s;
}

.alz-product-card p a:hover {
    text-decoration-color: var(--green);
}

.alz-product-card ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.alz-product-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.5;
    padding: 0.3rem 0;
}

.alz-product-card li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--green);
    margin-top: 0.45rem;
}

.alz-product-affirm {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green);
    margin-top: 1.2rem;
    font-style: italic;
}

/* (L4 journey styles and L3/L4 responsive rules replaced by shared .platform-journey-* classes) */

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 40%, #0c4a1c 100%);
    padding: 10rem 2rem 6rem;
    min-height: clamp(540px, 60vh, 720px);
    display: flex;
    align-items: flex-start;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

.hero-content {
    color: var(--white);
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin: 1.2rem 0 1.5rem;
    text-wrap: balance;
}

.hero h1 em {
    color: var(--green);
    font-style: normal;
}

.hero-lead {
    font-size: 1.15rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

.hero-lead strong {
    color: #fff;
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.badge-green {
    background: rgba(80, 158, 47, 0.12);
    color: #357020;
}

.badge-white {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.badge-gold {
    background: rgba(212, 168, 83, 0.15);
    color: var(--gold-dark);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--green);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--green-glow);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08);
}

.btn-ghost {
    background: transparent;
    color: var(--green);
    border: 1.5px solid var(--green);
}

.btn-ghost:hover {
    background: rgba(80, 158, 47, 0.06);
    transform: translateY(-2px);
}

.btn-dark {
    background: var(--navy);
    color: var(--white);
}

.btn-dark:hover {
    background: var(--navy-mid);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(10, 49, 40, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.section {
    padding: 7rem 2rem;
}

/* Remove top padding when adjacent same-background sections should be flush */
.section-flush {
    padding-top: 0;
}

.section-flush-after {
    padding-bottom: 0;
}

.section-light {
    background: var(--off-white);
    padding: 7rem 2rem;
}

.section-dark {
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 60%, #0c4a1c 100%);
    color: var(--white);
    padding: 7rem 2rem;
}

.section-green {
    background: linear-gradient(160deg, #0c4a1c 0%, var(--navy) 50%, var(--dark) 100%);
    color: var(--white);
    padding: 7rem 2rem;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.section-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1.2rem;
}

.section-header h2 em {
    color: var(--green);
    font-style: normal;
}

.section-dark .section-header h2 em,
.section-green .section-header h2 em {
    color: var(--green);
}

.section-header p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--gray-600);
    max-width: 680px;
    margin: 0 auto;
}

.section-dark .section-header p,
.section-green .section-header p {
    color: rgba(255, 255, 255, 0.7);
}

/* ══════════════════════════════════════════════════════════════════════════
   PROBLEM SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.crisis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.crisis-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
}

.crisis-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--red-problem);
}

.crisis-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(224, 82, 82, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.crisis-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--red-problem);
    stroke-width: 2;
    fill: none;
}

.crisis-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.8rem;
    color: var(--navy);
}

.crisis-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gray-600);
}

/* ══════════════════════════════════════════════════════════════════════════
   CAPABILITY SECTION — The Intelligence Engine
   ══════════════════════════════════════════════════════════════════════════ */
.capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.capability-grid+.capability-grid {
    margin-top: 2rem;
}

.capability-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.capability-card:hover {
    border-color: rgba(80, 158, 47, 0.3);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.capability-num {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.capability-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.8rem;
    color: var(--white);
}

.capability-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
}

.capability-card .product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.product-tag {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    background: rgba(80, 158, 47, 0.1);
    color: var(--green-dark);
    border-radius: var(--radius-xs);
}

/* ══════════════════════════════════════════════════════════════════════════
   GENERATED EXPERIENCES SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.experience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .experience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .experience-grid {
        grid-template-columns: 1fr;
    }
}

.experience-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 0;
    border: 1px solid var(--gray-200);
    text-decoration: none;
    transition: all 0.3s;
    overflow: hidden;
}

.experience-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.4s ease;
}

.experience-card:hover .experience-thumb {
    transform: scale(1.06);
}

.experience-card-body {
    padding: 1.5rem 1.5rem 2rem;
}

.experience-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
}

.experience-role {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green);
    margin-bottom: 0.75rem;
}

.experience-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 0.8rem;
    color: var(--navy);
}

.experience-card p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 1rem;
}

.experience-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.experience-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.5;
    padding: 0.3rem 0;
}

.experience-features li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--green);
    margin-top: 0.4rem;
}

/* ── Evidence additions for layer pages (icons, hover) ── */
.evidence-card:hover {
    border-color: rgba(80, 158, 47, 0.3);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.1);
    transform: translateY(-4px);
}

.evidence-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: rgba(80, 158, 47, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

img.evidence-icon {
    background: none;
    display: block;
}

.evidence-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.icad-inline-badge {
    height: 28px;
    width: auto;
    margin-bottom: 1.25rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOCKUP EMBED
   ══════════════════════════════════════════════════════════════════════════ */
.mockup-section {
    padding: 5rem 2rem;
    background: var(--gray-50);
}

.mockup-embed {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: 0 8px 40px rgba(10, 49, 40, 0.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCTION SCHEMA
   ══════════════════════════════════════════════════════════════════════════ */
.schema-table-wrap {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.schema-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.schema-table thead th {
    background: var(--navy);
    color: var(--white);
    padding: 1rem 1.2rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.schema-table tbody td {
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-600);
    vertical-align: top;
}

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

.schema-table tbody tr:hover {
    background: rgba(80, 158, 47, 0.02);
}

.schema-table .entity-name {
    font-weight: 700;
    color: var(--navy);
}

.schema-table .entity-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.entity-badge--core {
    background: rgba(80, 158, 47, 0.1);
    color: var(--green);
}

.entity-badge--relation {
    background: rgba(37, 99, 235, 0.1);
    color: var(--blue);
}

.entity-badge--governance {
    background: rgba(212, 168, 83, 0.12);
    color: var(--gold);
}

.entity-badge--intelligence {
    background: rgba(124, 58, 237, 0.1);
    color: var(--purple);
}

/* ══════════════════════════════════════════════════════════════════════════
   ADJACENT SAME-BACKGROUND SECTION SPACING
   When two sections share the same visual background sit side-by-side,
   collapse their combined padding to avoid double white-space.
   Target: ~10rem total gap instead of the default ~14rem (224px).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Light-bg adjacency (section-light, schema-section share off-white) ── */
.section-light+.section-light,
.section.section-light+.section.section-light {
    padding-top: 5rem;
}

/* Tighten the gap from the leading section too */
.section-light:has(+.section-light),
.section.section-light:has(+.section.section-light) {
    padding-bottom: 5rem;
}

/* ── Dark-bg adjacency: only SAME class collapses ── */
/* section-dark + section-dark: same gradient, collapse */
.section-dark+.section-dark,
.section.section-dark+.section.section-dark {
    padding-top: 5rem;
}

.section-dark:has(+.section-dark),
.section.section-dark:has(+.section.section-dark) {
    padding-bottom: 5rem;
}

/* section-green + section-green: same gradient, collapse */
.section-green+.section-green {
    padding-top: 5rem;
}

.section-green:has(+.section-green) {
    padding-bottom: 5rem;
}

/* section-dark ↔ section-green: different gradients = visible transition, keep full padding */

/* ── Mockup/schema adjacency with other sections ── */
/* mockup-section (white) has a different bg from section-dark, section-light,
   and schema-section — keep full padding on all transitions.
   Only schema-section (off-white) → section-light (off-white) shares the same
   background, so that pair collapses. */

.schema-section+.section-light,
.schema-section+.section.section-light {
    padding-top: 5rem;
}

/* ── Platform cross-links (light) to layer-nav (light) ── */
#cross-links {
    padding-bottom: 4rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PLATFORM LAYER PAGE TEMPLATE — Journey Track (shared across all layer pages)
   ══════════════════════════════════════════════════════════════════════════ */
.platform-journey-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.platform-journey-track::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, var(--green), rgba(255, 255, 255, 0.12));
    border-radius: 2px;
}

/* Per-layer gradient: shows progress through the four layers */
.platform-journey-track.contextualize::before {
    background: linear-gradient(90deg, rgba(80, 158, 47, 0.4), var(--green), rgba(255, 255, 255, 0.12));
}

.platform-journey-track.analyze::before {
    background: linear-gradient(90deg, rgba(80, 158, 47, 0.4), rgba(80, 158, 47, 0.4), var(--green), rgba(255, 255, 255, 0.12));
}

.platform-journey-track.decide::before {
    background: linear-gradient(90deg, rgba(80, 158, 47, 0.4), rgba(80, 158, 47, 0.4), rgba(80, 158, 47, 0.4), var(--green));
}

.platform-journey-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.platform-journey-dot {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.5);
    background: var(--navy);
    transition: all 0.3s;
}

.platform-journey-step.active .platform-journey-dot {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
    box-shadow: 0 4px 20px var(--green-glow);
}

.platform-journey-step.done .platform-journey-dot {
    background: #0f3a20;
    border-color: var(--green);
    color: var(--green);
}

.platform-journey-step h3 {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.platform-journey-step.active h3 {
    color: var(--green);
}

.platform-journey-step.done h3 {
    color: rgba(80, 158, 47, 0.6);
}

.platform-journey-step p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.25);
    margin-top: 0.3rem;
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}

.platform-journey-step.active p {
    color: rgba(255, 255, 255, 0.6);
}

.platform-journey-step.done p {
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
    .platform-journey-track {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 0;
    }

    .platform-journey-track::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .platform-journey-track {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   LAYER HEADER
   ══════════════════════════════════════════════════════════════════════════ */
.layer-header-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.layer-header-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    background: var(--white);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.layer-header-card p {
    margin-top: auto;
}

.layer-header-card:hover {
    border-color: var(--green);
    box-shadow: 0 8px 32px rgba(80, 158, 47, 0.1);
    transform: translateY(-4px);
}

.layer-header-card.current {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.03);
}

.layer-header-num {
    font-size: 2rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.layer-header-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    border-radius: 8px;
}

.layer-header-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.4rem;
}

.layer-header-card p {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-top: auto;
}

.section-green .layer-header-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.section-green .layer-header-card:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.section-green .layer-header-card.current {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
}

.section-green .layer-header-card h3 {
    color: #fff;
}

.section-green .layer-header-card p {
    color: rgba(255, 255, 255, 0.7);
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.cta-section {
    text-align: center;
    padding: 5rem 2rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: decide
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 40%, #0c4a1c 100%);
    padding: 10rem 2rem 6rem;
    min-height: clamp(540px, 60vh, 720px);
    display: flex;
    align-items: flex-start;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

.hero-content {
    color: var(--white);
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin: 1.2rem 0 1.5rem;
    text-wrap: balance;
}

.hero h1 em {
    color: var(--green);
    font-style: normal;
}

.hero-lead {
    font-size: 1.15rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

.hero-lead strong {
    color: #fff;
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.badge-green {
    background: rgba(80, 158, 47, 0.12);
    color: #357020;
}

.badge-white {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.badge-gold {
    background: rgba(212, 168, 83, 0.15);
    color: var(--gold-dark);
}

.badge-purple {
    background: rgba(124, 58, 237, 0.12);
    color: var(--purple-dark);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--green);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--green-glow);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08);
}

.btn-ghost {
    background: transparent;
    color: var(--green);
    border: 1.5px solid var(--green);
}

.btn-ghost:hover {
    background: rgba(80, 158, 47, 0.06);
    transform: translateY(-2px);
}

/* ── Sections ── */
.section {
    padding: 7rem 2rem;
}

.section-light {
    background: var(--off-white);
    padding: 7rem 2rem;
}

.section-dark {
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 60%, #0c4a1c 100%);
    color: var(--white);
    padding: 7rem 2rem;
}

.section-green {
    background: linear-gradient(160deg, #0c4a1c 0%, var(--navy) 50%, var(--dark) 100%);
    color: var(--white);
    padding: 7rem 2rem;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.section-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1.2rem;
}

.section-header h2 em {
    color: var(--green);
    font-style: normal;
}

.section-dark .section-header h2 em,
.section-green .section-header h2 em {
    color: var(--green);
}

.section-header p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--gray-600);
    max-width: 680px;
    margin: 0 auto;
}

.section-dark .section-header p,
.section-green .section-header p {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Problem ── */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.problem-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.problem-card:hover {
    border-color: rgba(224, 82, 82, 0.3);
    box-shadow: 0 8px 30px rgba(224, 82, 82, 0.08);
    transform: translateY(-3px);
}

.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--red-problem);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.problem-card:hover::before {
    transform: scaleX(1);
}

.problem-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(224, 82, 82, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.problem-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--red-problem);
    stroke-width: 2;
    fill: none;
}

.problem-card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.8rem;
    color: var(--navy);
}

.problem-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gray-600);
}

.problem-stat {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--red-problem);
    line-height: 1.1;
    margin-bottom: 0.3rem;
}

.problem-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

/* ── Three Horizons ── */
.horizons-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.horizon-card {
    position: relative;
    padding: 3rem 2.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.3s ease;
    display: flex;
    flex-direction: column;
}

.horizon-card:last-child {
    border-right: none;
}

.horizon-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

.horizon-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
}

.horizon-label--today {
    color: var(--green);
}

.horizon-label--next {
    color: var(--gold);
}

.horizon-label--future {
    color: var(--purple);
}

.horizon-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.horizon-items {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.horizon-items li {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    padding: 0.4rem 0;
    padding-left: 1.2rem;
    position: relative;
}

.horizon-items li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    border-radius: 2px;
}

.horizon-card:nth-child(1) .horizon-items li::before {
    background: var(--green);
}

.horizon-card:nth-child(2) .horizon-items li::before {
    background: var(--gold);
}

.horizon-card:nth-child(3) .horizon-items li::before {
    background: var(--purple);
}

.horizon-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.horizon-status--live {
    background: rgba(80, 158, 47, 0.15);
    color: var(--green);
}

.horizon-status--building {
    background: rgba(212, 168, 83, 0.15);
    color: var(--gold);
}

.horizon-status--roadmap {
    background: rgba(124, 58, 237, 0.12);
    color: var(--purple);
}

.horizon-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.horizon-status--live .horizon-status-dot {
    background: var(--green);
    animation: statusBlink 2s ease-in-out infinite;
}

.horizon-status--building .horizon-status-dot {
    background: var(--gold);
}

.horizon-status--roadmap .horizon-status-dot {
    background: var(--purple);
}

@keyframes statusBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ── Capabilities ── */
.capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.capability-grid+.capability-grid {
    margin-top: 2rem;
}

.capability-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.capability-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.capability-card--full {
    grid-column: 1 / -1;
}

.capability-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.capability-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 2;
    fill: none;
}

.capability-icon--green {
    background: rgba(80, 158, 47, 0.08);
}

.capability-icon--green svg {
    stroke: var(--green);
}

.capability-icon--gold {
    background: rgba(212, 168, 83, 0.08);
}

.capability-icon--gold svg {
    stroke: var(--gold);
}

.capability-icon--purple {
    background: rgba(124, 58, 237, 0.08);
}

.capability-icon--purple svg {
    stroke: var(--purple);
}

.capability-icon--blue {
    background: rgba(37, 99, 235, 0.08);
}

.capability-icon--blue svg {
    stroke: var(--blue);
}

.capability-icon--navy {
    background: rgba(10, 49, 40, 0.08);
}

.capability-icon--navy svg {
    stroke: var(--navy);
}

.capability-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 0.8rem;
    color: var(--navy);
}

.capability-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--gray-600);
}

.capability-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.capability-tag {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    background: rgba(80, 158, 47, 0.08);
    color: var(--green-dark);
    border-radius: var(--radius-xs);
}

/* ── Supervised Autonomy ── */
.autonomy-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    align-items: stretch;
    margin-bottom: 3rem;
}

.autonomy-step {
    text-align: center;
    padding: 2.5rem 1.5rem;
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.autonomy-step:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
}

.autonomy-step:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.autonomy-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(80, 158, 47, 0.15);
    color: var(--green);
    font-weight: 900;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.autonomy-step h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.autonomy-step p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.autonomy-step-actor {
    margin-top: 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.autonomy-step-actor--ai {
    color: var(--green);
}

.autonomy-step-actor--auto {
    color: var(--gold);
}

.autonomy-step-actor--human {
    color: var(--blue);
}

.autonomy-arrow {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.3);
}

/* Data moat */
.moat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.moat-card {
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.moat-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.8rem;
}

.moat-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

.moat-card .moat-highlight {
    font-weight: 700;
    color: var(--green);
}

/* ── Evidence (light-section override for layer pages) ── */
.section .evidence-grid,
.section-light .evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.section .evidence-card,
.section-light .evidence-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
}

.section .evidence-card h3,
.section-light .evidence-card h3 {
    color: var(--gray-800);
}

.section .evidence-card p,
.section-light .evidence-card p {
    color: var(--gray-600);
}

.section .evidence-card ul li,
.section-light .evidence-card ul li {
    color: var(--gray-600);
}

.section .evidence-card a,
.section-light .evidence-card a {
    color: var(--green);
    font-weight: 600;
    text-decoration: none;
}

.section .evidence-card a:hover,
.section-light .evidence-card a:hover {
    text-decoration: underline;
}

.evidence-card blockquote {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--gray-600);
    margin-bottom: 1.2rem;
    padding: 0;
    border: none;
}

.evidence-card cite {
    font-size: 0.82rem;
    font-weight: 600;
    font-style: normal;
    color: var(--gray-600);
}

/* ── Layer Header ── */
/* (uses canonical .layer-header-card defined under LAYER HEADER section above) */

/* ── CTA ── */
.cta-section {
    text-align: center;
    padding: 5rem 2rem;
}

/* ── Decide Responsive ── */
@media (max-width: 1024px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }


    .problem-grid,
    .crisis-grid {
        grid-template-columns: 1fr;
    }

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

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

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

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

@media (max-width: 768px) {
    .horizons-container {
        grid-template-columns: 1fr;
    }

    .horizon-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .horizon-card:last-child {
        border-bottom: none;
    }

    .autonomy-flow {
        grid-template-columns: 1fr;
    }

    .autonomy-arrow {
        display: none;
    }

    .layer-header-grid {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: partner-program
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: clamp(540px, 60vh, 720px);
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 40%, #0c4a1c 100%);
    display: flex;
    align-items: flex-start;
    padding: 10rem 2rem 6rem;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

.hero-content {
    max-width: 720px;
}

.badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-green {
    background: rgba(80, 158, 47, 0.12);
    color: #357020;
}

.badge-white {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin: 1.2rem 0 1.5rem;
    text-wrap: balance;
}

.hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.hero-lead strong {
    color: #fff;
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Hero visual */
.hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--green-dark);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--green-glow);
    background: var(--green);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.btn-ghost {
    background: transparent;
    color: var(--green);
    border: 1px solid var(--green);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    background: rgba(80, 158, 47, 0.06);
    box-shadow: 0 8px 24px var(--green-glow);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.section {
    padding: 7rem 2rem;
}

.section-light {
    background: var(--off-white);
    padding: 7rem 2rem;
}

.section-dark {
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 50%, #0c4a1c 100%);
    color: #fff;
    padding: 7rem 2rem;
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.section-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════════════════
   KEY FEATURES — 3-column grid
   ══════════════════════════════════════════════════════════════════════════ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    text-align: center;
}

.feature-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.feature-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.feature-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--navy);
    margin-bottom: 0.75rem;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════════════
   PARTNER TYPES — 3 cards
   ══════════════════════════════════════════════════════════════════════════ */
.partner-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.partner-type-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.partner-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.partner-type-card:hover::before {
    transform: scaleX(1);
}

.partner-type-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.partner-type-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.partner-type-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.partner-type-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--navy);
    margin-bottom: 1rem;
}

.partner-type-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.75;
    flex: 1;
    margin-bottom: 2rem;
}

.partner-type-card .btn-ghost {
    align-self: flex-start;
    padding: 0.65rem 1.5rem;
    font-size: 0.88rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PARTNER LOGOS & CARDS
   ══════════════════════════════════════════════════════════════════════════ */
.logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border-radius: var(--radius-md);
    background: var(--white);
    border: 1px solid var(--gray-200);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gray-600);
    letter-spacing: 0.02em;
    transition: all 0.3s;
}

.logo-placeholder:hover {
    border-color: var(--green);
    box-shadow: 0 4px 16px rgba(80, 158, 47, 0.06);
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .partner-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 480px) {
    .partner-grid {
        grid-template-columns: 1fr;
    }
}

.partner-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
    background: var(--white);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
}

.partner-card:hover {
    border-color: var(--green);
    box-shadow: 0 8px 24px rgba(80, 158, 47, 0.08);
}

.partner-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top left;
    border-bottom: 1px solid var(--gray-200);
    transition: transform 0.4s ease;
}

.partner-card:hover .partner-card-img {
    transform: scale(1.06);
}

.partner-card-body {
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.partner-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}

.partner-card-type {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin: 0;
}

.partner-card-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--green);
    margin-top: 0.25rem;
}

.partner-card:hover .partner-card-link {
    color: var(--navy);
}

/* ══════════════════════════════════════════════════════════════════════════
   TRUST STRIP — Customer logo bar (scrolling banner)
   ══════════════════════════════════════════════════════════════════════════ */
.trust-strip {
    padding: 3.5rem 0;
    text-align: center;
}

/* Trust-strip adjacency — only collapse when following section shares same background */
.trust-strip.section-light+.section-light {
    padding-top: 0;
}

.trust-strip.section-dark+.section-dark,
.trust-strip.section-dark+.section-green {
    padding-top: 0;
}

.trust-strip-headline {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    line-height: 1.5;
    padding: 0 2rem;
}

.section-dark .trust-strip-headline {
    color: rgba(255, 255, 255, 0.7);
}

.trust-strip-logos {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: trust-scroll 30s linear infinite;
}

.trust-strip .container {
    overflow: hidden;
    -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);
}

.trust-strip-logos:hover {
    animation-play-state: paused;
}

@keyframes trust-scroll {
    0% {
        transform: translateX(0);
    }

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

@keyframes trust-scroll-third {
    0% {
        transform: translateX(0);
    }

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

.trust-logo {
    height: 32px;
    width: auto;
    flex-shrink: 0;
    filter: grayscale(100%) opacity(0.55);
    transition: filter 0.3s ease;
}

.trust-logo:hover {
    filter: grayscale(0%) opacity(1);
}

.section-dark .trust-logo {
    filter: grayscale(100%) brightness(2) opacity(0.5);
}

.section-dark .trust-logo:hover {
    filter: grayscale(0%) brightness(1) opacity(1);
}

.trust-strip-note {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-top: 1.5rem;
    padding: 0 2rem;
}

.section-dark .trust-strip-note {
    color: rgba(255, 255, 255, 0.4);
}

/* Compact variant — smaller logos, less padding */
.trust-strip--compact {
    padding: 2rem 0;
}

.trust-strip--compact .trust-strip-logos {
    gap: 2rem;
    animation: trust-scroll-third 30s linear infinite;
}
}

.trust-strip--compact .trust-logo {
    height: 24px;
}

@media (max-width: 768px) {
    .trust-strip {
        padding: 2.5rem 0;
    }

    .trust-strip-logos {
        gap: 2rem;
    }

    .trust-logo {
        height: 24px;
    }

    .trust-strip--compact .trust-logo {
        height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trust-strip-logos {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        padding: 0 2rem;
        max-width: var(--max-w);
        margin: 0 auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   TRUST LOGO TOOLTIPS — Hover descriptions linking to customer evidence
   ══════════════════════════════════════════════════════════════════════════ */
.trust-logo-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.trust-logo-link .trust-logo {
    pointer-events: none;
}

.trust-logo-link[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.trust-logo-link[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--dark);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.trust-logo-link[data-tooltip]:hover::after,
.trust-logo-link[data-tooltip]:hover::before,
.trust-logo-link[data-tooltip]:focus-visible::after,
.trust-logo-link[data-tooltip]:focus-visible::before {
    opacity: 1;
}

@media (max-width: 768px) {

    .trust-logo-link[data-tooltip]::after,
    .trust-logo-link[data-tooltip]::before {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   CUSTOMER PROOF CARDS — Evidence linking to WordPress customer content
   ══════════════════════════════════════════════════════════════════════════ */
.customer-proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.customer-proof-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--dark);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.customer-proof-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
}

.customer-proof-card .badge {
    align-self: flex-start;
}

.customer-proof-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--dark);
}

.customer-proof-card p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--gray-600);
    margin: 0;
}

.customer-proof-logos {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
}

.customer-proof-logos img {
    height: 20px;
    width: auto;
    filter: grayscale(100%) opacity(0.6);
    transition: filter 0.3s ease;
}

.customer-proof-card:hover .customer-proof-logos img {
    filter: grayscale(0%) opacity(1);
}

.customer-proof-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--green);
    margin-top: auto;
}

.customer-proof-link::after {
    content: "→";
    display: inline-block;
    transition: transform 0.25s;
}

.customer-proof-card:hover .customer-proof-link::after {
    transform: translateX(4px);
}

.section-dark .customer-proof-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.section-dark .customer-proof-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.12);
}

.section-dark .customer-proof-card h3 {
    color: #fff;
}

.section-dark .customer-proof-card p {
    color: rgba(255, 255, 255, 0.7);
}

.section-dark .customer-proof-logos img {
    filter: grayscale(100%) brightness(2) opacity(0.5);
}

.section-dark .customer-proof-card:hover .customer-proof-logos img {
    filter: grayscale(0%) brightness(1) opacity(1);
}

.section-dark .customer-proof-link {
    color: var(--green-light);
}

@media (max-width: 600px) {
    .customer-proof-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   EVENT STRIP — Upcoming events bar
   ══════════════════════════════════════════════════════════════════════════ */
.event-strip {
    padding: 4rem 2rem;
}

.event-strip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 2rem auto 0;
}

.event-strip-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 0;
    text-align: left;
    transition: border-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
}

a.event-strip-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.event-strip-card:hover {
    border-color: var(--green);
    box-shadow: 0 4px 16px rgba(80, 158, 47, 0.08);
}

.event-strip-card-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    background: var(--gray-100);
    transition: transform 0.4s ease;
}

.event-strip-card:hover .event-strip-card-thumb {
    transform: scale(1.06);
}

.event-strip-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.section-dark .event-strip-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.section-dark .event-strip-card:hover {
    border-color: var(--green);
}

.event-strip-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.5rem;
}

.section-dark .event-strip-card h3 {
    color: var(--white);
}

.event-strip-card .event-meta {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.6;
}

.section-dark .event-strip-card .event-meta {
    color: rgba(255, 255, 255, 0.55);
}

.event-strip-card .event-meta span {
    display: block;
}

.event-strip-cta {
    text-align: center;
    margin-top: 1.5rem;
}

.event-strip-cta a {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--navy);
}

.event-strip-cta a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .event-strip-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .event-strip-grid .event-strip-card:nth-child(n+3) {
        display: none;
    }
}

/* Events page — full grids (upcoming + past) */
.events-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Past events — horizontal scroll carousel */
.events-past-scroll-wrapper {
    position: relative;
    margin-top: 2rem;
}

.events-past-grid {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    padding-bottom: 0.5rem;
}

.events-past-grid::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.events-past-grid>.event-strip-card {
    flex: 0 0 calc((100% - 4.5rem) / 4);
    scroll-snap-align: start;
    min-width: 240px;
}

/* Scroll arrows */
.events-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--gray-300);
    background: var(--white);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background 0.2s, border-color 0.2s, opacity 0.3s;
    opacity: 0.9;
}

.events-scroll-btn:hover {
    background: var(--green);
    color: var(--white);
    border-color: var(--green);
}

.events-scroll-btn[disabled] {
    opacity: 0;
    pointer-events: none;
}

.events-scroll-btn--prev {
    left: -20px;
}

.events-scroll-btn--next {
    right: -20px;
}

.events-scroll-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1024px) {

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

    .events-past-grid>.event-strip-card {
        flex: 0 0 calc((100% - 1.5rem) / 2);
    }

    .events-scroll-btn--prev {
        left: -16px;
    }

    .events-scroll-btn--next {
        right: -16px;
    }
}

@media (max-width: 640px) {

    .events-upcoming-grid {
        grid-template-columns: 1fr;
    }

    .events-past-grid>.event-strip-card {
        flex: 0 0 85%;
    }

    .events-scroll-btn--prev {
        left: -8px;
    }

    .events-scroll-btn--next {
        right: -8px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   LATEST INSIGHTS — Resource cards on homepage
   ══════════════════════════════════════════════════════════════════════════ */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.insight-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.insight-card:hover {
    border-color: var(--green);
    box-shadow: 0 6px 24px rgba(80, 158, 47, 0.08);
}

.section-dark .insight-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.section-dark .insight-card:hover {
    border-color: var(--green);
}

.insight-card-thumb {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    background: var(--gray-100);
    transition: transform 0.4s ease;
}

.insight-card:hover .insight-card-thumb {
    transform: scale(1.06);
}

.insight-card-body {
    padding: 1.25rem;
}

.insight-card-body .badge {
    margin-bottom: 0.75rem;
}

.insight-card-body h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.4;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-dark .insight-card-body h3 {
    color: var(--white);
}

.insight-card-body .insight-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--green);
    transition: gap 0.25s;
}

.insight-card:hover .insight-link {
    gap: 0.65rem;
}

.insights-cta {
    text-align: center;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .insights-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   FAQ ACCORDION
   ══════════════════════════════════════════════════════════════════════════ */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--white);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.faq-item:hover {
    border-color: rgba(80, 158, 47, 0.3);
}

.faq-item.open {
    border-color: var(--green);
    box-shadow: 0 4px 20px rgba(80, 158, 47, 0.06);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    transition: color 0.2s;
}

.faq-question:hover {
    color: var(--green);
}

.faq-question:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}

.faq-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--gray-400);
    stroke-width: 2;
    fill: none;
    transition: transform 0.3s ease, stroke 0.3s;
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
    stroke: var(--green);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer-inner {
    padding: 0 1.5rem 1.5rem;
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.cta-section {
    text-align: center;
    padding: 6rem 2rem;
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 50%, #0c4a1c 100%);
    position: relative;
    overflow: hidden;
}

.cta-section .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

.cta-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.cta-inner h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1rem;
}

.cta-inner p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin-bottom: 2rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: sciy
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: clamp(540px, 60vh, 720px);
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 40%, #0c4a1c 100%);
    display: flex;
    align-items: flex-start;
    padding: 10rem 2rem 6rem;
    overflow: hidden;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

.hero-content {
    max-width: 720px;
}

.badge {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-green {
    background: rgba(80, 158, 47, 0.12);
    color: #357020;
}

.badge-white {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin: 1.2rem 0 1.5rem;
    text-wrap: balance;
}

.hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin-bottom: 2rem;
}

.hero-lead strong {
    color: #fff;
    font-weight: 600;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Slim page-header heroes (no right-column visual): size to content, no dead zone */
.hero:not(:has(.hero-visual)) {
    min-height: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--green-dark);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--green-glow);
    background: var(--green);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.btn-ghost {
    background: transparent;
    color: var(--green);
    border: 1px solid var(--green);
}

.btn-ghost:hover {
    transform: translateY(-2px);
    background: rgba(80, 158, 47, 0.06);
    box-shadow: 0 8px 24px var(--green-glow);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.section {
    padding: 7rem 2rem;
}

.section-light {
    background: var(--off-white);
    padding: 7rem 2rem;
}

.section-dark {
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 50%, #0c4a1c 100%);
    color: #fff;
    padding: 7rem 2rem;
}

/* Override section-modifier padding for components with their own padding */
.trust-strip.section-light,
.trust-strip.section-dark {
    padding: 3.5rem 0;
}

.camp-section.section-light,
.camp-section.section-dark,
.camp-section.section-green {
    padding: 6rem 2rem;
}

.event-strip.section-light {
    padding: 4rem 2rem;
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.section-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════════════════
   ABOUT — Two-column text
   ══════════════════════════════════════════════════════════════════════════ */
.about-content {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.about-content p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
}

.about-content strong {
    color: var(--navy);
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   SIX PILLARS — 3x2 grid
   ══════════════════════════════════════════════════════════════════════════ */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.pillar-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    text-align: center;
}

.pillar-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.pillar-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.pillar-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.pillar-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--navy);
    margin-bottom: 0.75rem;
}

.pillar-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
}

.pillars-summary {
    max-width: 800px;
    margin: 3rem auto 0;
    text-align: center;
}

.pillars-summary p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.cta-section {
    text-align: center;
    padding: 6rem 2rem;
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 50%, #0c4a1c 100%);
    position: relative;
    overflow: hidden;
}

.cta-section .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(80, 158, 47, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(80, 158, 47, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
    animation: gridPulse 8s ease-in-out infinite;
}

.cta-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.cta-inner h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1rem;
}

.cta-inner p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin-bottom: 2rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES (replacing inline style attributes)
   ══════════════════════════════════════════════════════════════════════════ */

/* Footer newsletter inline layout */
/* Footer newsletter inline layout */
.footer-newsletter-bar {
    padding: 3rem 0 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-brand-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-brand-block .footer-brand-tagline {
    margin-bottom: 0;
}

.footer-newsletter-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}

.footer-newsletter-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
}

.footer-newsletter-subtitle {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.5;
}

.footer-newsletter-min-width {
    min-width: 290px;
}

.footer-newsletter-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Footer logo image sizing */
.footer-brand-logo img {
    height: 56px;
    width: auto;
    display: block;
}

/* Visually hidden (screen reader only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Footer link reset */
.footer-link-reset {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

/* Opacity utilities */
.opacity-30 {
    opacity: 0.3;
}

.opacity-20 {
    opacity: 0.2;
}

/* Color utilities */
.text-white {
    color: #fff;
}

.text-green-em {
    color: var(--green);
    font-style: normal;
}

/* Spacing utilities */
.mt-05 {
    margin-top: 0.5rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-12 {
    margin-top: 1.2rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-3 {
    margin-top: 3rem;
}

/* Section padding */
.section-padded {
    padding: 7rem 2rem;
}

.section-padded-overflow {
    padding: 7rem 2rem;
    position: relative;
    overflow: hidden;
}

/* Flex center */
.flex-center-gap {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.flex-center-gap-2 {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

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

/* Grid 2-col center */
.grid-2-col-center {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

/* CTA shared patterns */
.cta-heading {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1.2rem;
}

.cta-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

/* Position utilities */
.pos-relative-z1 {
    position: relative;
    z-index: 1;
}

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

.nowrap {
    white-space: nowrap;
}

.field-optional {
    font-weight: 400;
    color: var(--gray-400);
}

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

.mb-3 {
    margin-bottom: 2rem;
}

/* Layer-page heading numbers */
.layer-hero-number {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
}

/* Text utilities */
.text-source {
    font-size: 0.78rem;
    color: var(--gray-400);
    margin-top: 0.3rem;
}

.text-detail-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--navy);
}

/* Noscript fallback */
.noscript-fallback {
    max-width: 920px;
    margin: 2rem auto;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
}

.noscript-chart {
    text-align: center;
    padding: 2rem;
    color: var(--gray-600);
}

.noscript-footer-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mockup iframe */
.mockup-iframe-full {
    width: 100%;
    height: 700px;
    border: none;
}

/* Schema source bar */
.schema-source-bar {
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    font-size: 0.82rem;
    color: var(--gray-600);
    border-top: 1px solid var(--gray-100);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Section overline */
.section-overline {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

.section-overline-light {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-400);
    margin-bottom: 1rem;
}

/* Hero lead variants */
.hero-lead-bold {
    font-weight: 600;
    color: #fff;
    margin-top: -0.5rem;
}

.hero-layer-lead {
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.7;
}

/* Icon sizing */
.icon-22 {
    width: 22px;
    height: 22px;
}

/* Stat display */
.stat-big-green {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--green);
    display: block;
    line-height: 1;
}

.stat-label-white {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    display: block;
    margin-top: 0.4rem;
}

.stat-source-light {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.5rem;
}

/* CTA badge */
.cta-badge-lg {
    display: inline-block;
    padding: 2rem 4rem;
    background: rgba(80, 158, 47, 0.1);
    border: 1px solid rgba(80, 158, 47, 0.25);
    border-radius: var(--radius);
    text-align: center;
}

/* Dark section subtitle */
.section-dark-subtitle {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-top: 0.3rem;
}

/* Auto-centered paragraph */
.text-centered-narrow {
    max-width: 640px;
    margin: 0 auto 2rem;
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: center;
}

.text-detail-desc {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin-top: 1rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Result summary box */
.result-summary-box {
    margin-top: 3rem;
    padding: 2.5rem;
    background: var(--off-white);
    border-radius: var(--radius);
    text-align: center;
}

/* Section mid CTA */
.section-mid-cta {
    text-align: center;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* Text note centered */
.text-note-centered {
    text-align: center;
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

/* Dark info panel */
.dark-info-panel {
    background: var(--navy);
    color: #fff;
    padding: 3rem 2rem;
    text-align: center;
}

/* Off-white panel */
.offwhite-panel-centered {
    background: var(--off-white);
    border-radius: var(--radius);
    padding: 2.5rem;
    text-align: center;
}

/* Video embed */
.video-embed-full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Misc text sizing */
.text-lg-bold {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* Badge variants */
.badge-red {
    background: rgba(224, 82, 82, 0.12);
    color: var(--red-problem);
}

.badge-orange {
    background: rgba(212, 168, 83, 0.15);
    color: var(--gold);
    border: 1px solid rgba(212, 168, 83, 0.3);
}

.section-head-dark p {
    color: rgba(255, 255, 255, 0.65);
}

/* Max-width info panel */
.info-panel-wide {
    max-width: 960px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius);
    color: rgba(255, 255, 255, 0.7);
}


/* Legend dot colors + shape differentiation (WCAG 1.4.1) */
.curve-legend-dot--red {
    background: transparent;
    border: 3px dashed var(--red-problem);
}

.curve-legend-dot--green {
    background: var(--green);
}

.curves-legend-dot--red {
    background: transparent;
    border: 3px dashed var(--red-problem);
}

.curves-legend-dot--green {
    background: var(--green);
}

/* Text color utilities */
.text-white-60 {
    color: rgba(255, 255, 255, 0.6);
}

/* Chart caption */
.chart-caption {
    text-align: center;
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-top: 0.75rem;
}

/* Shift summary centered box */
.shift-summary-centered {
    max-width: 700px;
    margin: 3rem auto 0;
    text-align: center;
}

/* Header dropdown wide variant */
.header-dropdown--wide {
    min-width: 290px;
}

/* Header dropdown two-column variant — keeps tall menus within viewport */
.header-dropdown--two-col {
    min-width: 520px;
    max-width: calc(100vw - 2rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.header-dropdown--two-col .header-dropdown-divider {
    grid-column: 1 / -1;
}

/* Header dropdown Resources variant — three explicit columns with group headers */
.header-dropdown--res-cols {
    min-width: 820px;
    max-width: calc(100vw - 2rem);
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: 0;
    padding: 0.5rem 0;
}

.header-dropdown-col {
    display: flex;
    flex-direction: column;
}

.header-dropdown-col+.header-dropdown-col {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

.header-dropdown-col .header-dropdown-label {
    padding: 0.6rem 1rem 0.35rem;
}

/* Explore column — featured image cards */
.header-dropdown-col--explore {
    padding: 0.25rem 0.5rem 0.5rem;
    gap: 0.35rem;
}

a.header-dropdown-feature {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    background: #f7faf5;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.header-dropdown-feature:hover,
.header-dropdown-feature:focus-visible {
    border-color: var(--green);
    box-shadow: 0 4px 16px rgba(80, 158, 47, 0.1);
}

.header-dropdown-feature img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.header-dropdown-feature:hover img {
    transform: scale(1.06);
}

/* Hero variant — larger image for primary featured card */
.header-dropdown-feature--hero img {
    height: 110px;
}

/* ICAD hero card — SVG banner */
.header-dropdown-feature-icad-banner {
    height: 110px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-dropdown-feature-icad-banner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.header-dropdown-feature--icad:hover .header-dropdown-feature-icad-banner img {
    transform: scale(1.04);
}

/* Compact pair — two cards side by side */
.header-dropdown-feature-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.header-dropdown-feature--compact {
    background: #f7faf5;
}

.header-dropdown-feature--compact img {
    height: 60px;
}

.header-dropdown-feature--compact .header-dropdown-feature-text {
    padding: 0.35rem 0.5rem 0.45rem;
}

.header-dropdown-feature--compact .header-dropdown-feature-text strong {
    font-size: 0.78rem;
}

.header-dropdown-feature--compact .header-dropdown-feature-text span {
    font-size: 0.7rem;
}

.header-dropdown-feature-text {
    padding: 0.55rem 0.75rem 0.65rem;
}

.header-dropdown-feature-text strong {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}

.header-dropdown-feature-text span {
    display: block;
    font-size: 0.74rem;
    color: #6b7a72;
    margin-top: 2px;
    line-height: 1.35;
}

/* Mobile sub-menu group labels */
.header-mobile-label {
    display: block;
    padding: 0.75rem 1rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-400);
    pointer-events: none;
    list-style: none;
}

.header-mobile-label:not(:first-child) {
    margin-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 0.75rem;
}

/* ── Button fixes (global overrides) ── */
.btn {
    white-space: nowrap;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE: why-zontal
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero contrast visual — side-by-side comparison */
.why-hero-contrast {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.why-contrast-side {
    flex: 1;
    text-align: center;
}

.why-contrast-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}

.why-contrast-side--them .why-contrast-label {
    color: rgba(255, 255, 255, 0.4);
}

.why-contrast-side--us .why-contrast-label {
    color: var(--green);
}

.why-contrast-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.why-contrast-box {
    padding: 1rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.9rem;
    font-weight: 600;
}

.why-contrast-layers {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.why-contrast-layer {
    padding: 0.85rem 1.25rem;
    border-radius: 8px;
    background: rgba(80, 158, 47, 0.1);
    border: 1px solid rgba(80, 158, 47, 0.25);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 600;
    animation: fadeSlideIn 0.6s ease-out backwards;
}

.why-contrast-layer:nth-child(1) {
    animation-delay: 0.3s;
}

.why-contrast-layer:nth-child(2) {
    animation-delay: 0.2s;
}

.why-contrast-layer:nth-child(3) {
    animation-delay: 0.15s;
}

.why-contrast-layer:nth-child(4) {
    animation-delay: 0.1s;
}

.why-contrast-vs {
    font-size: 0.95rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.why-contrast-note {
    margin-top: 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.why-contrast-side--them .why-contrast-note {
    color: rgba(255, 255, 255, 0.25);
}

.why-contrast-side--us .why-contrast-note {
    color: var(--green);
}

@media (max-width: 768px) {
    .why-hero-contrast {
        flex-direction: column;
        gap: 1rem;
    }

    .why-contrast-vs {
        transform: rotate(90deg);
    }
}

/* Strategic comparison rows */
.compare-grid {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}

.compare-cell {
    border-radius: var(--radius);
    padding: 2rem;
    position: relative;
}

.compare-cell--them {
    background: var(--off-white);
    border: 1px solid var(--gray-200);
}

.compare-cell--us {
    background: var(--white);
    border: 1px solid var(--green);
    box-shadow: 0 4px 20px rgba(80, 158, 47, 0.06);
}

.compare-cell-label {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.compare-cell--them .compare-cell-label {
    color: var(--gray-600);
}

.compare-cell--us .compare-cell-label {
    color: var(--green-dark);
}

.compare-cell p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.compare-cell--them p {
    color: var(--gray-600);
}

.compare-cell--us p {
    color: var(--navy);
    font-weight: 500;
}

/* Five differentiators */
.diff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.diff-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    transition: all 0.3s;
}

.diff-card:hover {
    border-color: rgba(80, 158, 47, 0.4);
    background: rgba(80, 158, 47, 0.06);
    transform: translateY(-3px);
}

.diff-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(80, 158, 47, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.diff-card-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.diff-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.diff-card p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin: 0;
}

.diff-card-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--green);
    text-decoration: none;
    transition: gap 0.25s;
}

.diff-card-link:hover {
    text-decoration: underline;
}

a.inline-link {
    color: var(--green);
    font-weight: 600;
    text-decoration: none;
}

a.inline-link:hover {
    text-decoration: underline;
}

/* Hybrid ecosystem diagram */
.ecosystem-diagram {
    max-width: 960px;
    margin: 3rem auto 0;
    position: relative;
}

.ecosystem-diagram .ecosystem-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.ecosystem-hub-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 0;
}

.ecosystem-connector {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--green), transparent);
}

.ecosystem-diagram .ecosystem-hub {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: static;
    transform: none;
    padding: 1.5rem;
    box-shadow: 0 8px 40px rgba(80, 158, 47, 0.25);
}

.ecosystem-diagram .ecosystem-hub strong {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ecosystem-diagram .ecosystem-hub span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.25rem;
    text-align: center;
}

.ecosystem-diagram .ecosystem-node {
    position: static;
    width: auto;
    height: auto;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.3s;
    animation: none;
    opacity: 1;
    transform: none;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}

.ecosystem-diagram .ecosystem-node:hover {
    border-color: var(--green);
    box-shadow: 0 6px 24px rgba(80, 158, 47, 0.08);
    transform: translateY(-2px);
}

.ecosystem-diagram .ecosystem-node strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.ecosystem-diagram .ecosystem-node span {
    font-size: 0.72rem;
    color: var(--gray-400);
}

@media (max-width: 768px) {
    .ecosystem-diagram .ecosystem-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Impact stats grid */
.impact-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.impact-stat {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--off-white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
}

.impact-stat:hover {
    border-color: var(--green);
    box-shadow: 0 8px 30px rgba(80, 158, 47, 0.06);
    transform: translateY(-3px);
}

.impact-stat .val {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
}

.impact-stat .lbl {
    font-size: 0.82rem;
    color: var(--gray-600);
    margin-top: 0.5rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Why CTA cards */
.why-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.why-cta-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: all 0.3s;
}

.why-cta-card:hover {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.08);
    transform: translateY(-3px);
}

.why-cta-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.75rem;
}

.why-cta-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .compare-row {
        grid-template-columns: 1fr;
    }

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

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

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

    .why-cta-grid {
        grid-template-columns: 1fr;
    }

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

    .ecosystem-ring {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .ecosystem-ring {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE: qc-release-throughput
   ══════════════════════════════════════════════════════════════════════════ */
.schema-tables-stacked {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.schema-grid-stacked {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .schema-grid-stacked {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE: integration-factories
   ══════════════════════════════════════════════════════════════════════════ */

/* Cumulative impact highlight */
.if-cumulative-highlight {
    text-align: center;
    margin-top: 2.5rem;
}

.if-cumulative-box {
    display: inline-block;
    padding: 2rem 4rem;
    background: rgba(80, 158, 47, 0.1);
    border: 1px solid rgba(80, 158, 47, 0.25);
    border-radius: var(--radius);
}

.if-cumulative-val {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--green);
    display: block;
    line-height: 1;
}

.if-cumulative-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    display: block;
    margin-top: 0.4rem;
}

.if-cumulative-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-top: 0.3rem;
}

/* Transform section icons */
.if-transform-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* Proof strip on light bg override */
.section-light .proof-item .pi-val {
    color: var(--green);
}

.section-light .proof-item .pi-lbl {
    color: var(--gray-600);
}

/* Compound curve canvas container */
.if-compound-canvas-wrap {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2rem;
}

.if-compound-canvas {
    width: 100%;
    height: 350px;
    display: block;
}

/* Responsive — Integration Factories */
@media (max-width: 1024px) {
    .if-cumulative-box {
        padding: 1.5rem 2.5rem;
    }
}

@media (max-width: 768px) {
    .if-cumulative-box {
        padding: 1.5rem 2rem;
    }

    .if-cumulative-val {
        font-size: 2.4rem;
    }

    .if-compound-canvas {
        height: 250px;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: integration-catalog
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero instrument grid */
.ic-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 88px);
    grid-template-rows: repeat(3, 88px);
    gap: 0.75rem;
    justify-content: center;
}

.ic-hex-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(80, 158, 47, 0.18);
    background: rgba(80, 158, 47, 0.06);
    padding: 0.75rem;
    transition: border-color 0.3s, background 0.3s;
}

.ic-hex-cell:hover {
    border-color: rgba(80, 158, 47, 0.5);
    background: rgba(80, 158, 47, 0.12);
}

.ic-hex-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ic-hex-center {
    background: rgba(80, 158, 47, 0.15);
    border-color: var(--green);
    border-width: 2px;
    flex-direction: column;
    gap: 0.1rem;
}

.ic-hex-stat {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.ic-hex-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

@media (max-width: 768px) {
    .ic-hero-grid {
        grid-template-columns: repeat(3, 72px);
        grid-template-rows: repeat(3, 72px);
        gap: 0.5rem;
    }
}

/* Factory Economics — compound curve */
.ic-economics-grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.ic-curve-canvas-wrap {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
}

.ic-curve-canvas {
    width: 100%;
    height: 320px;
    display: block;
}

.ic-class-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.ic-class-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.3s, background 0.3s;
    cursor: pointer;
}

.ic-class-card:hover,
.ic-class-card.active {
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.06);
}

.ic-class-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: rgba(80, 158, 47, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ic-class-info {
    flex: 1;
    min-width: 0;
}

.ic-class-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.15rem;
}

.ic-class-meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.ic-class-stat {
    text-align: right;
    flex-shrink: 0;
}

.ic-class-stat .val {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1;
}

.ic-class-stat .lbl {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.1rem;
}

/* 8 Core Techniques Grid */
.ic-techniques-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.ic-technique-card {
    background: var(--white);
    border: 1px solid rgba(80, 158, 47, 0.15);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
}

.ic-technique-card:hover {
    border-color: var(--green);
    box-shadow: 0 4px 16px rgba(80, 158, 47, 0.12);
    transform: translateY(-2px);
}

.ic-technique-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--slate);
    margin: 0 0 0.5rem 0;
}

.ic-technique-card p {
    font-size: 0.82rem;
    color: rgba(30, 41, 59, 0.6);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1024px) {
    .ic-techniques-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ic-techniques-grid {
        grid-template-columns: 1fr;
    }
}

/* AI Acceleration Indicators */
.ic-accel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.ic-accel-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--gray-200);
    text-align: center;
    transition: all 0.3s;
}

.ic-accel-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.ic-accel-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

.ic-accel-badge--templated {
    background: rgba(80, 158, 47, 0.1);
    color: var(--green);
}

.ic-accel-badge--ai {
    background: rgba(124, 58, 237, 0.1);
    color: var(--purple);
}

.ic-accel-badge--manual {
    background: rgba(217, 119, 6, 0.1);
    color: var(--amber);
}

.ic-accel-val {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
    margin-bottom: 0.3rem;
}

.ic-accel-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.4rem;
}

.ic-accel-desc {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.ic-accel-meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-100);
}

.ic-accel-meta-item .val {
    font-size: 1rem;
    font-weight: 900;
    color: var(--navy);
}

.ic-accel-meta-item .lbl {
    font-size: 0.68rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Search & Filter Bar */
.ic-search-bar {
    max-width: 680px;
    margin: 0 auto 1.5rem;
    position: relative;
}

.ic-search-input {
    width: 100%;
    padding: 0.9rem 1.25rem 0.9rem 3rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 0.95rem;
    color: var(--navy);
    background: var(--white);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ic-search-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-glow);
}

.ic-search-input::placeholder {
    color: var(--gray-400);
}

.ic-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke: var(--gray-400);
    stroke-width: 2;
    fill: none;
    pointer-events: none;
}

/* Filter pills */
.ic-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.ic-filter-pill {
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
}

.ic-filter-pill:hover {
    border-color: var(--green);
    color: var(--green);
}

.ic-filter-pill.active {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}

/* Catalog results count */
.ic-results-count {
    text-align: center;
    font-size: 0.82rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* Catalog grid */
.ic-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.ic-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ic-card:hover {
    border-color: var(--green);
    box-shadow: 0 8px 28px rgba(80, 158, 47, 0.08);
    transform: translateY(-3px);
}

.ic-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ic-vendor-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
    flex-shrink: 0;
}

.ic-card-title {
    flex: 1;
    min-width: 0;
}

.ic-card-title h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}

.ic-card-title span {
    font-size: 0.75rem;
    color: var(--gray-600);
    font-weight: 500;
}

.ic-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ic-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ic-tag--technique {
    background: rgba(80, 158, 47, 0.08);
    color: var(--green-dark);
}

.ic-tag--format {
    background: rgba(100, 116, 139, 0.1);
    color: var(--gray-600);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    letter-spacing: 0.02em;
}

.ic-tag--templated {
    background: rgba(80, 158, 47, 0.1);
    color: var(--green-dark);
}

.ic-tag--ai {
    background: rgba(124, 58, 237, 0.1);
    color: var(--purple-dark);
}

.ic-tag--manual {
    background: rgba(217, 119, 6, 0.1);
    color: var(--amber-dark);
}

.ic-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-100);
    margin-top: auto;
}

.ic-card-footer span {
    font-size: 0.72rem;
    color: var(--gray-400);
    font-weight: 600;
}

.ic-card-footer .ic-reuse {
    color: var(--green);
    font-weight: 800;
}

.ic-no-results {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--gray-400);
    font-size: 1rem;
    grid-column: 1 / -1;
}

/* Request form */
.ic-request-form {
    max-width: 640px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ic-request-form .ic-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ic-request-form .ic-form-group--full {
    grid-column: 1 / -1;
}

.ic-request-form label {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ic-request-form input,
.ic-request-form select,
.ic-request-form textarea {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: #ffffff;
    font-family: var(--font);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    width: 100%;
}

.ic-request-form input::placeholder,
.ic-request-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.ic-request-form input:focus,
.ic-request-form select:focus,
.ic-request-form textarea:focus {
    border-color: var(--green);
    background: rgba(255, 255, 255, 0.08);
}

.ic-request-form select option {
    background: var(--navy);
    color: #ffffff;
}

.ic-request-form textarea {
    resize: vertical;
    min-height: 80px;
}

.ic-request-form .ic-form-submit {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 0.5rem;
}

.ic-request-form .form-disclaimer {
    grid-column: 1 / -1;
}

/* Cross-link banner */
.ic-cross-link {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: all 0.3s;
}

.ic-cross-link:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-3px);
}

.ic-cross-link-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ic-cross-link-icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.ic-cross-link-text {
    flex: 1;
}

.ic-cross-link-text h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.ic-cross-link-text p {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* Responsive — Integration Catalog */
@media (max-width: 1024px) {
    .ic-class-cards {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .ic-class-cards {
        grid-template-columns: 1fr;
    }

    .ic-accel-grid {
        grid-template-columns: 1fr;
    }

    .ic-curve-canvas {
        height: 240px;
    }

    .ic-catalog-grid {
        grid-template-columns: 1fr;
    }

    .ic-cross-link {
        flex-direction: column;
        text-align: center;
    }

    .ic-request-form {
        grid-template-columns: 1fr;
    }

    .ic-request-form .ic-form-group--full {
        grid-column: 1;
    }

    .ic-request-form .ic-form-submit {
        grid-column: 1;
    }
}

@media (max-width: 480px) {
    .ic-filters {
        gap: 0.3rem;
    }

    .ic-filter-pill {
        padding: 0.35rem 0.7rem;
        font-size: 0.72rem;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE: resources
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Resource filter tabs (category navigation) ── */
.res-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.res-filter-tabs a,
.res-filter-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.15rem;
    border-radius: 100px;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--navy);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.res-filter-tabs a:hover,
.res-filter-tabs button:hover {
    border-color: var(--green);
    color: var(--green);
}

.res-filter-tabs a.active,
.res-filter-tabs button.active {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}

.res-filter-tabs .res-tab-count {
    font-size: 0.75rem;
    opacity: 0.7;
}

@media (max-width: 640px) {
    .res-filter-tabs {
        gap: 0.35rem;
    }

    .res-filter-tabs a,
    .res-filter-tabs button {
        font-size: 0.8rem;
        padding: 0.4rem 0.9rem;
    }
}

/* ── Search bar ── */
.res-search-bar {
    max-width: 480px;
    margin: 0 auto 2rem;
    position: relative;
}

.res-search-bar input {
    width: 100%;
    padding: 0.85rem 1.25rem 0.85rem 3rem;
    border: 1px solid var(--gray-200);
    border-radius: 48px;
    font-size: 0.95rem;
    font-family: var(--font);
    color: var(--navy);
    background: var(--white);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.res-search-bar input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(80, 158, 47, 0.12);
}

.res-search-bar input::placeholder {
    color: var(--gray-400);
}

.res-search-bar svg {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke: var(--gray-400);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.res-search-bar input:focus+svg {
    stroke: var(--green);
}

/* ── Result count ── */
.res-result-count {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.88rem;
    color: var(--gray-600);
    font-weight: 600;
}

/* ── Loading overlay for hybrid rendering ── */
.res-grid--loading {
    position: relative;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.res-grid--loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* ── Skeleton loading blocks ── */
.res-skeleton-block {
    background: var(--gray-100);
    animation: resSkeleton 1.4s ease-in-out infinite;
}

@keyframes resSkeleton {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .res-skeleton-block {
        animation: none;
    }

    .res-grid--loading {
        transition: none;
    }
}

/* ── No results / fallback ── */
.res-no-results,
.res-fallback {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
}

.res-no-results a,
.res-fallback a {
    color: var(--green);
    font-weight: 700;
}

/* ── Load more ── */
.res-load-more {
    display: block;
    margin: 2.5rem auto 0;
    color: var(--navy);
    border-color: var(--gray-200);
}

.res-load-more:hover {
    color: var(--green);
    border-color: var(--green);
    background: rgba(80, 158, 47, 0.04);
}

/* ── Card date ── */
.res-card-date {
    font-size: 0.72rem;
    color: var(--gray-400);
    font-weight: 600;
    line-height: 1;
}

/* ── Thumb wrap (for image zoom) ── */
.res-card-thumb-wrap {
    overflow: hidden;
}

/* ── Filter tabs ── */
.res-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 3rem;
}

.res-filter-btn {
    padding: 0.5rem 1.4rem;
    border-radius: 24px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.25s;
}

.res-filter-btn:hover {
    border-color: var(--green);
    color: var(--green);
}

.res-filter-btn.active {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}

/* ── Resource cards grid ── */
.res-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.res-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 0;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.res-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
}

.res-card-thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.res-card:hover .res-card-thumb {
    transform: scale(1.06);
}

.res-card-body {
    padding: 0.85rem 1.15rem 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.res-card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.res-card-meta .badge {
    font-size: 0.65rem;
    padding: 0.25rem 0.75rem;
    margin: 0;
}

.res-card-time {
    font-size: 0.75rem;
    color: var(--gray-600);
    font-weight: 600;
}

.res-card h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 0 0.35rem;
}

.res-card p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.55;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.res-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green);
    text-decoration: none;
    transition: gap 0.25s;
}

.res-card-link:hover,
.res-card:hover .res-card-link {
    gap: 0.7rem;
}

/* ── Coming Soon resource cards ── */
.res-card--coming-soon {
    opacity: 0.72;
    pointer-events: none;
    cursor: default;
}

.res-card--coming-soon:hover {
    border-color: var(--gray-200);
    box-shadow: none;
}

.res-card--coming-soon .res-card-thumb {
    filter: grayscale(40%) brightness(0.95);
}

.badge-coming-soon {
    background: rgba(212, 168, 83, 0.15);
    color: var(--gold);
    border: 1px solid rgba(212, 168, 83, 0.3);
}

.res-card--no-thumb-first {
    grid-column-start: 1;
}

/* ── Advancements TV featured section ── */
.res-tv-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: var(--max-w);
    margin: 0 auto;
}

.res-tv-embed {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
}

.res-tv-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.res-tv-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 50%, #0c4a1c 100%);
    cursor: pointer;
    transition: opacity 0.3s;
}

.res-tv-placeholder:hover .res-play-ring {
    transform: scale(1.1);
}

.res-play-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(80, 158, 47, 0.2);
    border: 2px solid var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.res-play-ring svg {
    width: 32px;
    height: 32px;
    fill: var(--green);
    margin-left: 4px;
}

.res-tv-content h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.res-tv-content p {
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.res-tv-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.res-tv-topics span {
    padding: 0.3rem 0.9rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(80, 158, 47, 0.12);
    color: var(--green);
    letter-spacing: 0.03em;
}

/* ── Video showcase (reusable YouTube embed section) ── */
.video-showcase {
    max-width: 960px;
    margin: 0 auto;
}

.video-showcase-frame {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
}

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

/* Lite-embed poster: thumbnail + play button shown before iframe loads */
.video-showcase-frame .video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    z-index: 0;
}

.video-showcase-frame .video-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.video-showcase-frame .video-play-btn .play-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 72px;
    border-radius: 36px;
    background: var(--green);
    padding: 0;
    width: 72px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    white-space: nowrap;
}

.video-showcase-frame .video-play-btn .play-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-showcase-frame .video-play-btn .play-icon svg {
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

.video-showcase-frame .video-play-btn .play-label {
    display: flex;
    flex-direction: column;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.25s ease 0.1s, max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
    line-height: 1.3;
    padding-right: 0;
}

.video-showcase-frame .video-play-btn .play-label strong {
    font-size: 0.95rem;
    font-weight: 600;
}

.video-showcase-frame .video-play-btn .play-label span {
    font-size: 0.78rem;
    opacity: 0.85;
}

/* Hover: expand to pill */
.video-showcase-frame .video-play-btn:hover .play-circle {
    width: 260px;
    padding-left: 18px;
    padding-right: 24px;
    justify-content: flex-start;
    background: var(--green-dark);
    box-shadow: 0 6px 28px rgba(80, 158, 47, 0.5);
}

.video-showcase-frame .video-play-btn:hover .play-label {
    opacity: 1;
    max-width: 180px;
    padding-left: 14px;
}

.video-showcase-frame .video-play-btn:focus-visible .play-circle {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Reduced motion: no expansion animation */
@media (prefers-reduced-motion: reduce) {

    .video-showcase-frame .video-play-btn .play-circle,
    .video-showcase-frame .video-play-btn .play-label {
        transition: none;
    }
}

.video-showcase h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}

.video-showcase p {
    font-size: 0.88rem;
    opacity: 0.75;
    margin: 0;
    line-height: 1.5;
}

/* ── Evidence wall ── */
.res-evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.res-evidence-item {
    padding: 2rem;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--gray-200);
    position: relative;
    transition: all 0.3s;
}

.res-evidence-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--green);
    border-radius: var(--radius) var(--radius) 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.res-evidence-item:hover::before {
    transform: scaleX(1);
}

.res-evidence-item:hover {
    box-shadow: 0 8px 32px rgba(80, 158, 47, 0.06);
    transform: translateY(-2px);
}

.res-evidence-item blockquote {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.65;
    margin: 0 0 1rem;
    padding: 0;
    border: none;
}

.res-evidence-item cite {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-400);
    letter-spacing: 0.04em;
    font-style: normal;
    text-transform: uppercase;
}

/* ── Inline newsletter ── */
.res-newsletter {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.res-newsletter h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.res-newsletter p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

.res-newsletter-form {
    display: flex;
    gap: 0.75rem;
    max-width: 480px;
    margin: 0 auto;
}

.res-newsletter-form input[type="email"] {
    flex: 1;
    padding: 0.85rem 1.2rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: var(--white);
    font-size: 0.95rem;
    font-family: var(--font);
}

.res-newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.res-newsletter-form button {
    padding: 0.85rem 2rem;
    border-radius: 10px;
    border: none;
    background: var(--green);
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--font);
    white-space: nowrap;
}

.res-newsletter-form button:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--green-glow);
}

/* ── Cross-links row ── */
.res-crosslinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.res-crosslink-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: var(--radius);
    background: var(--white);
    border: 1px solid var(--gray-200);
    text-decoration: none;
    transition: all 0.3s;
}

.res-crosslink-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.res-crosslink-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.res-crosslink-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.res-crosslink-text h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.res-crosslink-text p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.5;
}

/* ── Resources page responsive ── */
@media (max-width: 1024px) {
    .res-tv-feature {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

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

@media (max-width: 768px) {
    .res-grid {
        grid-template-columns: 1fr;
    }

    .res-evidence-grid {
        grid-template-columns: 1fr;
    }

    .res-crosslinks {
        grid-template-columns: 1fr;
    }

    .res-newsletter-form {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .res-filters {
        gap: 0.3rem;
    }

    .res-filter-btn {
        padding: 0.4rem 0.9rem;
        font-size: 0.72rem;
    }
}


/* ══════════════════════════════════════════════════════════════════
   PAGE: get-started
   ══════════════════════════════════════════════════════════════════ */

/* ── Three Paths Grid ── */
.gs-paths-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.gs-path-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}

.gs-path-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.gs-path-icon {
    width: 56px;
    height: 56px;
    background: rgba(80, 158, 47, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.gs-path-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gs-path-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
}

.gs-path-card .gs-path-sub {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

.gs-path-card>p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.gs-ai-bridge {
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    background: rgba(80, 158, 47, 0.06);
    border-left: 3px solid var(--green);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 1.5rem;
}

.gs-ai-bridge a {
    color: var(--green-dark);
    font-weight: 600;
}

/* ── Self-Assessment Quiz ── */
.gs-assessment {
    margin-top: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.gs-question {
    margin-bottom: 1.25rem;
}

.gs-question label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.gs-question select {
    width: 100%;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 0.85rem;
    color: var(--gray-600);
    background: var(--white);
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238e9a87' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.5rem;
}

.gs-question select:focus {
    border-color: var(--green);
}

.gs-assess-btn {
    margin-top: auto;
    padding-top: 0.5rem;
}

/* ── Assessment Result ── */
.gs-result {
    display: none;
    margin-top: 1.25rem;
    padding: 1.5rem;
    background: rgba(80, 158, 47, 0.06);
    border: 1px solid rgba(80, 158, 47, 0.15);
    border-radius: 12px;
}

.gs-result.visible {
    display: block;
    animation: fadeSlideIn 0.5s ease-out;
}

.gs-result-score {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.gs-result-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.gs-result-rec {
    font-size: 0.92rem;
    color: var(--navy);
    font-weight: 600;
    line-height: 1.5;
}

/* ── Pilot Timeline ── */
.gs-timeline {
    margin-top: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gs-timeline-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.gs-timeline-marker {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(80, 158, 47, 0.1);
    color: var(--green);
    font-size: 0.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gs-timeline-content h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.15rem;
}

.gs-timeline-content p {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.5;
}

/* ── AWS Benefits ── */
.gs-benefits {
    margin-top: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gs-benefit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.gs-benefit svg {
    width: 20px;
    height: 20px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2.5;
    flex-shrink: 0;
}

.gs-note {
    font-size: 0.78rem;
    color: var(--gray-600);
    font-style: italic;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-100);
}

.gs-path-cta {
    margin-top: 1.5rem;
}

/* ── Contact Form ── */
.gs-form-wrapper {
    max-width: 720px;
    margin: 0 auto;
}

.gs-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.gs-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.gs-form-group--full {
    grid-column: 1 / -1;
}

.gs-form-group label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.section-dark .gs-form-group label {
    color: rgba(255, 255, 255, 0.7);
}

.gs-form-group input,
.gs-form-group select,
.gs-form-group textarea {
    padding: 0.75rem 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    color: var(--navy);
    font-family: var(--font);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}

.gs-form-group input::placeholder,
.gs-form-group textarea::placeholder {
    color: var(--gray-400);
}

.gs-form-group input:focus,
.gs-form-group select:focus,
.gs-form-group textarea:focus {
    border-color: var(--green);
}

.gs-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.gs-form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238e9a87' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.gs-form-submit {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 0.75rem;
}

/* ── What Happens Next Steps ── */
.gs-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.gs-step {
    text-align: center;
    padding: 2rem 1.5rem;
    position: relative;
}

.gs-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.gs-step h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.gs-step p {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* ── Trust Signals ── */
.gs-trust-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.gs-trust-stat .val {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
}

.gs-trust-stat .lbl {
    font-size: 0.78rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 0.25rem;
}

.gs-trust-bloomberg {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .gs-paths-grid {
        grid-template-columns: 1fr;
        max-width: 640px;
    }

    .gs-steps-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}

@media (max-width: 768px) {
    .gs-form-grid {
        grid-template-columns: 1fr;
    }

    .gs-trust-stats {
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    .gs-path-card {
        padding: 2rem 1.5rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   PAGE: company
   ══════════════════════════════════════════════════════════════════ */

/* ── Mission Grid ── */
.co-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.co-mission-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
}

.co-mission-icon {
    width: 56px;
    height: 56px;
    background: rgba(80, 158, 47, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.co-mission-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.co-mission-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.co-mission-card p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.8;
}

/* ── Four-Layer Approach ── */
.co-layers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 960px;
    margin: 0 auto 3rem;
}

.co-layer-item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2rem;
    backdrop-filter: blur(8px);
}

.co-layer-num {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.co-layer-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
}

.co-layer-item h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

.co-layer-item p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.co-layers-cta {
    text-align: center;
}

/* ── By the Numbers ── */
.co-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.co-stat {
    text-align: center;
    padding: 2rem;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

.co-stat-val {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.co-stat-lbl {
    display: block;
    font-size: 0.82rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.co-stat-bloomberg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.co-stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.co-stat-icon svg {
    width: 36px;
    height: 36px;
    stroke: var(--green);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Global Presence ── */
.co-offices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.co-office-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    text-align: center;
    backdrop-filter: blur(8px);
}

.co-office-icon {
    width: 56px;
    height: 56px;
    background: rgba(80, 158, 47, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.co-office-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.co-office-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.3rem;
}

.co-office-type {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.co-office-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

/* ── Team Domains ── */
.co-team-domains {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto 2rem;
}

.co-team-domain {
    background: var(--white);
    border-radius: var(--radius);
    padding: 0;
    border: 1px solid var(--gray-200);
    text-align: center;
    transition: all 0.3s;
    overflow: hidden;
}

.co-team-domain-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.4s ease;
}

.co-team-domain-body {
    padding: 1.5rem 1.25rem;
}

.co-team-domain:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
}

.co-team-domain:hover .co-team-domain-img {
    transform: scale(1.06);
}

.co-team-icon {
    width: 56px;
    height: 56px;
    background: rgba(80, 158, 47, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.co-team-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.co-team-domain h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.co-team-domain p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.7;
}

.co-team-note {
    text-align: center;
    font-size: 1rem;
    color: var(--gray-400);
    font-weight: 500;
    max-width: 680px;
    margin: 0 auto;
}

/* ── Executive Profiles ── */
.exec-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.exec-card {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.exec-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.exec-card-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    display: block;
    margin: 0 auto 1.25rem;
    border: 3px solid rgba(80, 158, 47, 0.25);
    transition: border-color 0.3s;
}

.exec-card:hover .exec-card-img {
    border-color: var(--green);
}

.exec-card-body h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

.exec-card-title {
    font-size: 0.85rem;
    color: var(--green);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.exec-card-linkedin {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.3s;
    margin-top: auto;
    padding-top: 0.5rem;
}

.exec-card-linkedin:hover {
    color: var(--green);
}

/* ── Careers ── */
.co-careers-areas {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.co-career-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem 1.5rem;
}

.co-career-area svg {
    width: 22px;
    height: 22px;
    stroke: var(--green);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.co-career-area span {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--white);
}

.co-careers-openings {
    text-align: center;
    margin-bottom: 2rem;
}

.co-careers-openings p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.co-careers-openings a {
    color: var(--green);
    text-decoration: underline;
}

/* ── Partners ── */
.co-partners-content {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.co-partners-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    text-align: left;
}

.co-partners-badge svg {
    width: 40px;
    height: 40px;
    stroke: var(--green);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.co-partners-badge p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.6;
}

.co-partners-cta {
    text-align: center;
}

/* ── Contact CTA ── */
.co-contact-cta {
    text-align: center;
    padding: 2rem 0;
}

.co-contact-cta h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    color: var(--white);
    margin-bottom: 2rem;
    letter-spacing: -0.03em;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Company Page Responsive ── */
@media (max-width: 1024px) {
    .co-team-domains {
        grid-template-columns: repeat(2, 1fr);
    }

    .exec-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem 1.5rem;
    }

    .co-layers-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .co-mission-grid {
        grid-template-columns: 1fr;
    }

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

    .co-offices-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .co-team-domains {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

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

    .exec-card-img {
        width: 120px;
        height: 120px;
    }

    .co-careers-areas {
        flex-direction: column;
        align-items: center;
    }

    .co-career-area {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .co-stats-grid {
        grid-template-columns: 1fr;
    }

    .co-layer-item {
        padding: 1.5rem;
    }

    .co-partners-badge {
        flex-direction: column;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE: campaign (CDO/CIO and audience-specific landing pages)
   ══════════════════════════════════════════════════════════════════════════ */

.camp-hero .hero-inner {
    max-width: var(--max-w);
    margin: 0 auto;
}

.camp-hero .hero-content {
    max-width: 720px;
}

.camp-section {
    padding: 6rem 2rem;
}

/* ── Challenges grid ── */
.camp-challenges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.camp-challenges-grid.camp-challenges-2col {
    grid-template-columns: repeat(2, 1fr);
    max-width: 860px;
}

/* ── Four-layer visual (dark section) ── */
.camp-layers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto 2.5rem;
}

.camp-layer {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.3s, background 0.3s;
}

.camp-layer:hover {
    border-color: rgba(80, 158, 47, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

.camp-layer-num {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--green);
    min-width: 2.5rem;
    line-height: 1.3;
}

.camp-layer-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
}

.camp-layer-content h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
}

.camp-layer-content p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.camp-layer-cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* ── Cross-cutting capability callout ── */
.camp-cross-cutting {
    max-width: 800px;
    margin: 2rem auto 2.5rem;
    padding: 2rem 2.5rem;
    border: 1px dashed rgba(80, 158, 47, 0.35);
    border-radius: var(--radius);
    background: rgba(80, 158, 47, 0.04);
    text-align: center;
}

.camp-cross-cutting+.compound-ai-bridge {
    margin-top: 2.5rem;
}

.camp-cross-cutting-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.camp-cross-cutting-bar {
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: rgba(80, 158, 47, 0.3);
}

.camp-cross-cutting-tag {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--green);
}

.camp-cross-cutting h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
}

.camp-cross-cutting p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
}

/* ── Evidence metrics grid ── */
.camp-evidence-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto 1.5rem;
}

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

.camp-evidence-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--white);
    color: var(--dark);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
}

.camp-evidence-num {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 900;
    color: var(--green);
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.camp-evidence-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.camp-evidence-card p {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.6;
}

.camp-evidence-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.camp-evidence-val {
    display: block;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.camp-evidence-lbl {
    display: block;
    font-size: 0.82rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    line-height: 1.4;
}

.camp-evidence-source {
    text-align: center;
    font-size: 0.82rem;
    color: var(--gray-600);
    font-style: italic;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.section-dark .camp-evidence-source {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Outcomes grid ── */
.camp-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

/* ── Start / CTA grid ── */
.camp-start-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.camp-start-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    text-decoration: none;
    transition: all 0.3s;
    display: block;
}

.camp-start-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(80, 158, 47, 0.4);
    transform: translateY(-4px);
}

.camp-start-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(80, 158, 47, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.camp-start-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
}

.camp-start-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.camp-start-card p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

/* ── Bloomberg credibility section ── */
.camp-bloomberg {
    padding: 4rem 2rem;
}

.camp-bloomberg-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.camp-bloomberg-icon {
    width: 48px;
    height: 48px;
    stroke: var(--green);
    margin-bottom: 1rem;
}

.camp-bloomberg-inner p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.camp-bloomberg-inner p strong {
    color: #fff;
}

.section-light .camp-bloomberg-inner p {
    color: var(--text);
}

.section-light .camp-bloomberg-inner p strong {
    color: var(--dark);
}

/* ── Campaign responsive ── */
@media (max-width: 1024px) {
    .camp-evidence-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .camp-section {
        padding: 4rem 1.5rem;
    }

    .camp-challenges-grid,
    .camp-outcomes-grid,
    .camp-start-grid {
        grid-template-columns: 1fr;
    }

    .camp-evidence-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .camp-layer {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.25rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .camp-evidence-grid {
        grid-template-columns: 1fr;
    }

    .camp-bloomberg {
        padding: 3rem 1rem;
    }
}

/* ── Campaign featured outcome callout ── */
.camp-featured {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 2.5rem 2.5rem 2rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.camp-featured h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.camp-featured p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .camp-featured {
        padding: 2rem 1.5rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED: hero SVG graphics
   ══════════════════════════════════════════════════════════════════════════ */
.hero-svg-graphic {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE: careers
   ══════════════════════════════════════════════════════════════════════════ */

.careers-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.careers-value-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
}

.careers-value-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.careers-value-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.careers-value-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.careers-value-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--navy);
    margin-bottom: 0.75rem;
}

.careers-value-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
}

/* Job listings */
.careers-jobs-grid {
    display: grid;
    gap: 1.25rem;
    max-width: 960px;
    margin: 0 auto;
}

.careers-job-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 2rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s;
}

.careers-job-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--green);
    transform: translateY(-2px);
}

.careers-job-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.careers-job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.careers-job-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.careers-job-meta svg {
    width: 14px;
    height: 14px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

.careers-job-apply .btn {
    white-space: nowrap;
}

/* Benefits */
.careers-benefits-heading {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 2rem;
}

.careers-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto 2rem;
}

.careers-benefit-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--gray-200);
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    transition: all 0.3s;
}

.careers-benefit-card:hover {
    border-color: var(--green);
    box-shadow: 0 8px 32px rgba(80, 158, 47, 0.06);
}

.careers-benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.careers-benefit-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.careers-benefit-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.6;
    font-weight: 600;
}

.careers-benefits-note {
    text-align: center;
    font-size: 0.82rem;
    color: var(--gray-600);
    font-style: italic;
}

/* CTA */
.careers-cta {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.careers-cta h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1rem;
}

.careers-cta p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .careers-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .careers-values-grid {
        grid-template-columns: 1fr;
    }

    .careers-benefits-grid {
        grid-template-columns: 1fr;
    }

    .careers-job-card {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    .careers-job-apply {
        justify-self: start;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE: campaign/integration-executive
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero stat strip */
.camp-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.camp-hero-stat {
    text-align: center;
}

.camp-hero-stat .val {
    display: block;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--green);
    line-height: 1.2;
}

.camp-hero-stat .lbl {
    display: block;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: 0.25rem;
    line-height: 1.3;
}

/* Form section (2-column: copy + form) */
.camp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: var(--max-w);
    margin: 0 auto;
    align-items: start;
}

.camp-form-copy h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

.camp-form-copy>p {
    font-size: 1.05rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.camp-form-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.camp-form-trust li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.5;
}

.camp-form-trust li svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--green);
    margin-top: 2px;
}

.camp-form-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
}

.camp-form-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

.camp-form-card>p {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.camp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.camp-form-group {
    margin-bottom: 1rem;
}

.camp-form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.camp-form-group input,
.camp-form-group select,
.camp-form-group textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    font-family: var(--font);
    color: var(--navy);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.camp-form-group input:focus,
.camp-form-group select:focus,
.camp-form-group textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(80, 158, 47, 0.12);
}

.camp-form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.camp-form-submit {
    width: 100%;
    margin-top: 0.5rem;
}

.camp-form-footer {
    font-size: 0.78rem;
    color: var(--gray-600);
    text-align: center;
    margin-top: 1rem;
    line-height: 1.5;
}

/* Value props list */
.camp-value-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.camp-value-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: 1.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.camp-value-list li svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: var(--green);
    margin-top: 2px;
}

.camp-value-list li strong {
    display: block;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.camp-value-list li span {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

/* Campaign urgency CTA */
.camp-urgency {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.camp-urgency h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.camp-urgency p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .camp-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .camp-form-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .camp-form-row {
        grid-template-columns: 1fr;
    }

    .camp-value-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .camp-hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    .camp-form-card {
        padding: 1.5rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE: contact
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero SVG */
.contact-hero-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-hero-svg {
    width: 100%;
    max-width: 460px;
    height: auto;
}

/* Contact two-column layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    max-width: var(--max-w);
    margin: 0 auto;
    align-items: start;
}

/* Contact form */
.contact-form {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.contact-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact-form-group--full {
    grid-column: 1 / -1;
}

.contact-form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.35rem;
}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
    padding: 0.65rem 0.85rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    color: var(--navy);
    font-family: var(--font);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}

.contact-form-group select {
    width: 100%;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: var(--gray-400);
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
    border-color: var(--green);
    background: var(--white);
}

.contact-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form-submit {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
}

/* Form privacy disclaimer */
.form-disclaimer {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.5;
    margin: 0.75rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    grid-column: 1 / -1;
}

.form-disclaimer svg {
    flex-shrink: 0;
}

.form-disclaimer a {
    color: var(--green);
    text-decoration: underline;
}

/* Required field asterisk */
.required-star {
    color: var(--red-problem);
    font-weight: 700;
}

/* Contact sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.contact-sidebar-block h3 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.contact-sidebar-block p,
.contact-sidebar-block address {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
    font-style: normal;
}

.contact-sidebar-block a {
    color: var(--green);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-sidebar-block a:hover {
    color: var(--green-dark);
}

.contact-phone-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact-phone-list li {
    font-size: 0.95rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-phone-list .contact-phone-flag {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 1.8rem;
}

/* Location cards */
.contact-locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.contact-location-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s;
}

.contact-location-card:hover {
    border-color: var(--green);
    box-shadow: 0 12px 40px rgba(80, 158, 47, 0.08);
    transform: translateY(-4px);
}

.contact-location-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(80, 158, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.contact-location-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--green);
    stroke-width: 2;
    fill: none;
}

.contact-location-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

.contact-location-card .contact-location-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    display: inline-block;
}

.contact-location-card address {
    font-size: 0.92rem;
    color: var(--gray-600);
    line-height: 1.7;
    font-style: normal;
}

/* Responsive */
@media (max-width: 1024px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

@media (max-width: 768px) {
    .contact-form-grid {
        grid-template-columns: 1fr;
    }

    .contact-locations-grid {
        grid-template-columns: 1fr;
    }

    .contact-hero-graphic {
        max-width: 320px;
        margin: 0 auto;
    }

    .contact-form {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .contact-form {
        padding: 1.5rem 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE: technique-pages (chromatography, mass-spectrometry, nmr, flow-cytometry)
   ══════════════════════════════════════════════════════════════════════════ */

/* Challenge grid */
.tech-challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .tech-challenge-grid {
        grid-template-columns: 1fr;
    }
}

/* Layer detail: content + stats side-by-side */
.tech-layer-detail {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 3rem;
    margin-top: 3rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .tech-layer-detail {
        grid-template-columns: 1fr;
    }
}

.tech-layer-content h3 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.section-dark .tech-layer-content h3 {
    color: var(--white);
}

.tech-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.tech-list li {
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.7;
}

.section-dark .tech-list li {
    color: rgba(255, 255, 255, 0.75);
}

.tech-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--green);
}

.tech-layer-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tech-layer-stats .stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.tech-layer-stats .stat-card .val {
    color: var(--green);
    font-weight: 700;
}

.tech-layer-stats .stat-card .lbl {
    color: rgba(255, 255, 255, 0.7);
}

.tech-layer-stats .stat-card .desc {
    color: rgba(255, 255, 255, 0.65);
}

/* Context grid */
.tech-context-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .tech-context-grid {
        grid-template-columns: 1fr;
    }
}

/* Intelligence grid */
.tech-intelligence-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.section-dark .tech-intelligence-grid .feature-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

.section-dark .tech-intelligence-grid .feature-card h3 {
    color: var(--white);
}

.section-dark .tech-intelligence-grid .feature-card p {
    color: rgba(255, 255, 255, 0.85);
}

.section-dark .tech-intelligence-grid .feature-card:hover {
    border-color: var(--green);
    background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 768px) {
    .tech-intelligence-grid {
        grid-template-columns: 1fr;
    }
}

/* Vendor table */
.tech-vendor-table-wrap {
    margin-top: 3rem;
}

.tech-vendor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tech-vendor-table thead th {
    text-align: left;
    padding: 1rem 1.25rem;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-600);
    border-bottom: 2px solid var(--gray-200);
    background: var(--gray-50);
}

.tech-vendor-table tbody td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-600);
    line-height: 1.6;
}

.tech-vendor-table tbody tr:hover {
    background: rgba(80, 158, 47, 0.03);
}

@media (max-width: 640px) {
    .tech-vendor-table thead {
        display: none;
    }

    .tech-vendor-table,
    .tech-vendor-table tbody,
    .tech-vendor-table tr,
    .tech-vendor-table td {
        display: block;
        width: 100%;
    }

    .tech-vendor-table tbody tr {
        padding: 1rem 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .tech-vendor-table tbody td {
        padding: 0.3rem 0;
        border-bottom: none;
    }

    .tech-vendor-table tbody td:first-child {
        padding-top: 0.75rem;
        font-size: 1rem;
    }

    .tech-vendor-table tbody td:last-child {
        padding-bottom: 0.75rem;
    }
}

/* Crosslinks grid */
.tech-crosslinks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.tech-crosslink-card {
    text-decoration: none;
    display: block;
}

.tech-crosslink-card h3 {
    color: var(--navy);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.tech-crosslink-card p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .tech-crosslinks {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tech-crosslinks {
        grid-template-columns: 1fr;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   SECTION FLUSH — placed last to override all .section padding rules
   ══════════════════════════════════════════════════════════════════════════ */
section.section-flush,
.section.section-flush {
    padding-top: 0;
}

section.section-flush-after,
.section.section-flush-after {
    padding-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ICAD SUBPAGE — Sidebar Navigation Layout
   ══════════════════════════════════════════════════════════════════════════ */
/* Allow sticky sidebar to work — override global overflow-x:hidden on main/section */
main:has(.icad-page-layout) {
    overflow: visible;
}

.icad-page-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    min-height: 100vh;
    padding-top: 76px;
}

/* ── Sidebar ── */
.icad-sidebar {
    background: var(--navy);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.icad-sidebar-inner {
    position: sticky;
    top: 76px;
    height: calc(100vh - 76px);
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
    scrollbar-width: none;
}

.icad-sidebar-inner::-webkit-scrollbar {
    display: none;
}

.icad-sidebar-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
    letter-spacing: 0.01em;
}

.icad-sidebar-back:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
}

.icad-sidebar-back svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.icad-sidebar-group {
    margin-bottom: 0.4rem;
}

.icad-sidebar-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.1rem;
}

.icad-sidebar-group-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0;
    flex-shrink: 0;
}

/* Letter colors per principle */
.icad-sidebar-group--i .icad-sidebar-group-letter {
    background: rgba(27, 94, 53, 0.4);
    color: #6fcf97;
}

.icad-sidebar-group--c .icad-sidebar-group-letter {
    background: rgba(46, 128, 71, 0.4);
    color: #6fcf97;
}

.icad-sidebar-group--a .icad-sidebar-group-letter {
    background: rgba(68, 158, 48, 0.4);
    color: #6fcf97;
}

.icad-sidebar-group--d .icad-sidebar-group-letter {
    background: rgba(93, 184, 58, 0.4);
    color: #6fcf97;
}

.icad-sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.icad-sidebar-links li {
    margin: 0;
}

.icad-sidebar-links a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: 8px;
    line-height: 1.5;
    transition: color 0.2s, background 0.2s;
}

.icad-sidebar-links a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
}

.icad-sidebar-links a.active {
    color: var(--white);
    background: rgba(80, 158, 47, 0.15);
    font-weight: 600;
}

.icad-sidebar-id {
    font-size: 0.75rem;
    font-weight: 800;
    color: #6fcf97;
    flex-shrink: 0;
    min-width: 1.5rem;
}

.icad-sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0.35rem 0.75rem;
}

.icad-sidebar-assess {
    display: block;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #6fcf97;
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.icad-sidebar-assess:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
}

/* ── Main content area ── */
.icad-page-content {
    min-width: 0;
}

/* ── Breadcrumb ── */
.icad-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
}

.icad-breadcrumb a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
}

.icad-breadcrumb a:hover {
    color: var(--white);
}

.icad-breadcrumb-sep {
    font-size: 0.7rem;
    opacity: 0.4;
}

/* ── Principle hero (compact) ── */
.icad-sub-hero {
    background: var(--navy);
    padding: 3rem 3.5rem 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.icad-sub-hero-id {
    font-size: clamp(4rem, 6vw, 5.5rem);
    font-weight: 900;
    color: var(--green);
    opacity: 0.2;
    line-height: 0.85;
    margin-bottom: 0.5rem;
    letter-spacing: -0.04em;
}

.icad-sub-hero h1 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-wrap: balance;
}

.icad-sub-hero-definition {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
    max-width: 680px;
    font-style: italic;
}

/* ── Article body ── */
.icad-sub-body {
    padding: 3.5rem 3.5rem 4rem;
    max-width: 780px;
}

.icad-sub-body h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--navy);
    margin: 2.5rem 0 1rem;
    letter-spacing: -0.01em;
}

.icad-sub-body h2:first-child {
    margin-top: 0;
}

.icad-sub-body p {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--gray-700);
    margin: 0 0 1.25rem;
}

.icad-sub-body ul,
.icad-sub-body ol {
    padding-left: 1.5rem;
    margin: 0 0 1.5rem;
}

.icad-sub-body li {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.icad-sub-body strong {
    font-weight: 700;
    color: var(--navy);
}

/* Callout boxes in article body */
.icad-sub-callout {
    background: rgba(80, 158, 47, 0.06);
    border: 1px solid rgba(80, 158, 47, 0.15);
    border-left: 4px solid var(--green);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
}

.icad-sub-callout-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--green);
    margin-bottom: 0.75rem;
}

.icad-sub-callout p {
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0;
}

/* Example/antipattern boxes */
.icad-sub-example {
    background: var(--off-white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    margin: 1.5rem 0;
}

.icad-sub-example-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-600);
    margin-bottom: 0.75rem;
}

.icad-sub-example p,
.icad-sub-example li {
    font-size: 0.95rem;
    color: var(--gray-600);
}

/* Prev/Next navigation */
.icad-sub-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 2.5rem 3.5rem;
    border-top: 1px solid var(--gray-200);
    background: var(--off-white);
}

.icad-sub-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    text-decoration: none;
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.icad-sub-nav-link:hover {
    border-color: var(--green);
    box-shadow: 0 2px 12px rgba(80, 158, 47, 0.1);
}

.icad-sub-nav-link--next {
    text-align: right;
    grid-column: 2;
}

.icad-sub-nav-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500);
}

.icad-sub-nav-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
}

/* ── Mobile responsive ── */
@media (max-width: 1024px) {
    .icad-page-layout {
        grid-template-columns: 1fr;
    }

    .icad-sidebar {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .icad-sidebar-inner {
        position: relative;
        top: 0;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0;
        padding: 1.5rem 1rem;
        align-items: center;
        overflow-y: visible;
    }

    .icad-sidebar-back {
        margin-bottom: 0;
        margin-right: 1rem;
    }

    .icad-sidebar-group {
        margin-bottom: 0;
    }

    .icad-sidebar-group-title {
        display: none;
    }

    .icad-sidebar-divider {
        display: none;
    }

    .icad-sidebar-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .icad-sidebar-links a {
        padding: 0.35rem 0.65rem;
        font-size: 0.82rem;
    }

    .icad-sub-hero {
        padding: 2.5rem 1.5rem 2rem;
    }

    .icad-sub-body {
        padding: 2rem 1.5rem 3rem;
    }

    .icad-sub-nav {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .icad-sidebar-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .icad-sidebar-links {
        flex-direction: column;
    }

    .icad-sidebar-links a {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .icad-sub-hero-id {
        font-size: 3rem;
    }

    .icad-sub-nav {
        grid-template-columns: 1fr;
    }

    .icad-sub-nav-link--next {
        grid-column: 1;
        text-align: left;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   TRADEMARK ATTRIBUTION FOOTNOTES
   ══════════════════════════════════════════════════════════════════════════ */
.trademark-note {
    font-size: 0.7rem;
    color: var(--gray-600);
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 2rem 0;
}

.section.trademark-note-section {
    padding-top: 0;
    padding-bottom: 0;
}

.patent-note {
    font-size: 0.8rem;
    color: var(--gray-600);
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem 0.7rem;
}

.hero .patent-note {
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
    padding: 0.65rem 1rem;
    margin: 1.5rem 0 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 3px solid var(--green);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0 6px 6px 0;
    font-style: italic;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hero-patent-note {
    background: var(--navy);
    padding: 1.25rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-patent-note .patent-note {
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-style: italic;
    font-size: 0.82rem;
    line-height: 1.5;
}

.patent-note-section {
    padding-top: 0;
    padding-bottom: 0;
}

.mockup-embed+.mockup-embed {
    margin-top: 2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced Motion
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

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


/* ═══════════════════════════════════════════════════════════════
   PAGE: Resource Article / White Paper / Data Sheet
   ═══════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ── */
.resource-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 1.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.resource-breadcrumb span[aria-current] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.resource-breadcrumb a {
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s;
}

.resource-breadcrumb a:hover {
    color: var(--green);
}

.resource-breadcrumb span[aria-hidden] {
    color: var(--gray-300);
}

/* ── Hero Section ── */
.resource-hero-section {
    position: relative;
    background: linear-gradient(160deg, var(--dark) 0%, var(--navy) 40%, #0c4a1c 100%);
    display: flex;
    align-items: flex-start;
    padding: 10rem 2rem 4rem;
    overflow: hidden;
}

.resource-hero-section .container {
    max-width: var(--max-w);
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0;
}

.resource-hero {
    max-width: 780px;
    margin: 0 auto;
}

.resource-hero .badge {
    margin-bottom: 1rem;
}

.resource-hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #fff;
    margin: 1.2rem 0 1.5rem;
    text-wrap: balance;
}

.resource-hero-lead {
    font-size: 1.15rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
}

.resource-date {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}

.resource-hero-img {
    display: block;
    width: 100%;
    max-width: 780px;
    height: auto;
    border-radius: var(--radius);
    margin: 2rem auto 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* ── Article Layout (body + ToC sidebar) ── */
/* Override overflow-x:hidden on ancestors so sticky positioning works */
main:has(.resource-body-layout) {
    overflow: visible;
}

.resource-body-section:has(.resource-body-layout) {
    overflow: visible;
}

.section.resource-body-section {
    padding-top: 0 !important;
    padding-bottom: 2rem !important;
}

.section.resource-body-section + .section.resource-gate-section {
    margin-top: -2rem;
}

.resource-body-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 3rem;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}

.resource-body-layout:not(:has(.resource-toc)) {
    grid-template-columns: 1fr;
    max-width: 780px;
}

.resource-body {
    max-width: 780px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--gray-700);
    min-width: 0;
}

/* ── Sticky ToC Sidebar ── */
.resource-toc {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: none;
    padding: 1.25rem 0;
}

.resource-toc::-webkit-scrollbar {
    display: none;
}

.resource-toc-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-400);
    padding: 0 0 0.75rem;
    margin: 0;
    border-bottom: 1px solid var(--gray-200);
}

.resource-toc-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.resource-toc-list li {
    margin: 0;
}

.resource-toc-list a {
    display: block;
    padding: 0.4rem 0 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--gray-500);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.resource-toc-list a:hover {
    color: var(--navy);
}

.resource-toc-list a.active {
    color: var(--green);
    border-left-color: var(--green);
    font-weight: 600;
}

.resource-body h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy);
    margin: 2.5rem 0 1rem;
    letter-spacing: -0.01em;
    scroll-margin-top: 120px;
}

.resource-body h2:first-child {
    margin-top: 0;
}

.resource-body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    scroll-margin-top: 120px;
    color: var(--navy);
    margin: 2rem 0 0.75rem;
}

.resource-body h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
    margin: 1.5rem 0 0.5rem;
}

.resource-body p {
    margin: 0 0 1.25rem;
}

.resource-body a {
    color: var(--green);
    text-decoration: none;
    text-underline-offset: 2px;
    transition: color 0.2s, text-decoration 0.2s;
}

.resource-body a:hover {
    color: var(--green);
    text-decoration: underline;
}

.resource-body ul,
.resource-body ol {
    padding-left: 1.5rem;
    margin: 0 0 1.5rem;
}

.resource-body li {
    margin-bottom: 0.5rem;
}

.resource-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 1.5rem 0;
}

/* ── Video embeds (responsive 16:9) ── */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    margin: 1.5rem 0;
    background: var(--navy);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.resource-body strong {
    font-weight: 700;
    color: var(--navy);
}

.resource-body blockquote {
    border-left: 4px solid var(--green);
    background: rgba(80, 158, 47, 0.04);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--gray-600);
}

/* ── Inline CTA boxes in article body ── */
.resource-cta-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: linear-gradient(135deg, var(--navy) 0%, #1b5e35 60%, var(--green) 100%);
    border-radius: var(--radius);
    padding: 1.75rem 2.25rem;
    margin: 2.5rem 0;
}

.resource-cta-inline p {
    color: var(--white);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

.resource-cta-inline .btn {
    flex-shrink: 0;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 700;
}

.resource-cta-inline .btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
    text-decoration: none;
}

@media (max-width: 640px) {
    .resource-cta-inline {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 1rem;
        padding: 1.5rem;
    }

    .resource-cta-inline .btn {
        text-align: center;
        justify-content: center;
    }
}

.resource-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.resource-body th,
.resource-body td {
    border: 1px solid var(--gray-200);
    padding: 0.75rem 1rem;
    text-align: left;
}

.resource-body th {
    background: var(--off-white);
    font-weight: 700;
    color: var(--navy);
}

/* ── Gated Resource Download (wide card above body) ── */
.section.resource-gate-section {
    padding-top: 0 !important;
    padding-bottom: 2rem;
}

.resource-gate-card--wide {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2rem 2.5rem;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.resource-gate-card-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.resource-gate-info h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 0.35rem;
}

.resource-gate-info p {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.6;
}

.resource-gate-form--inline .resource-gate-form-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.resource-gate-form--inline .resource-gate-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.resource-gate-form--inline .btn {
    margin-top: 1.25rem;
}

.resource-gate-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.resource-gate-card h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 0.5rem;
}

.resource-gate-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.resource-gate-card .form-disclaimer {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.5;
    margin: 0.75rem 0 0;
}

.resource-gate-form .form-group {
    margin-bottom: 1rem;
}

.resource-gate-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 0.35rem;
}

.resource-gate-form input,
.resource-gate-form select {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--navy);
    background: var(--off-white);
    font-family: inherit;
    transition: border-color 0.2s;
}

.resource-gate-form input:focus,
.resource-gate-form select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(80, 158, 47, 0.1);
}

/* ── CTA Section ── */
.resource-cta-section {
    text-align: center;
    padding: 4rem 0;
}

.resource-cta-section h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--white);
    margin-bottom: 0.75rem;
}

.resource-cta-section p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* ── Resource page responsive ── */
@media (max-width: 1024px) {
    .resource-body-layout {
        grid-template-columns: 1fr;
    }

    .resource-toc {
        display: none;
    }

    .resource-gate-form--inline .resource-gate-form-fields {
        grid-template-columns: 1fr;
    }

    .resource-gate-form--inline .resource-gate-form-row-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .resource-hero h1 {
        font-size: 1.5rem;
    }

    .resource-hero-lead {
        font-size: 1rem;
    }

    .resource-gate-form--inline .resource-gate-form-fields {
        grid-template-columns: 1fr;
    }

    .resource-body {
        font-size: 1rem;
    }

    .resource-breadcrumb {
        font-size: 0.8rem;
    }
}
/* ══════════════════════════════════════════════════════════════════════════
   HEADER DROPDOWN — Wide layout & bridge gap
   ══════════════════════════════════════════════════════════════════════════ */

.header-dropdown--two-col .header-dropdown-group-label {
    grid-column: 1 / -1;
}

/* Invisible bridge between the link and the dropdown panel. Placed on the <li>
   so it is never clipped by overflow-y on the dropdown. */
.header-links>li::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

/* Wide dropdown for Outcomes mega-menu */
.header-dropdown--wide {
    max-height: 80vh;
    overflow-y: auto;
    left: 0;
    transform: translateX(0) translateY(4px);
}

.header-links>li:hover>.header-dropdown--wide,
.header-links>li.dropdown-open>.header-dropdown--wide {
    transform: translateX(0) translateY(0);
}

/* 2-tile CTA tier layout (centered) */
.vsub-cta-tiers {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .vsub-cta-tiers {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* Primary CTA tier emphasis */
.cta-tier--primary,
.cta-tier:first-child {
    background: rgba(80, 158, 47, 0.06);
}

.cta-tier--primary:hover,
.cta-tier:first-child:hover {
    background: rgba(80, 158, 47, 0.14);
}

/* ══════════════════════════════════════════════════════════════════════════
   EXECUTIVE PREMIUM LAYER — Global enhancements for credibility & polish
   ══════════════════════════════════════════════════════════════════════════ */

/* Refined button depth */
.hero .btn-primary {
    box-shadow: 0 2px 12px rgba(80, 158, 47, 0.2);
    font-size: 1rem;
    padding: 0.95rem 2.25rem;
}

.hero .btn-primary:hover {
    box-shadow: 0 8px 32px rgba(80, 158, 47, 0.35);
}

/* Section padding refinement — more executive breathing room */
.section-padded {
    padding: 8rem 2rem;
}

/* Light section subtle texture */
.section-light {
    position: relative;
}

/* Trust strip refinement */
.trust-strip-headline {
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Insight card premium hover */
.insight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* Quote block refinement */
.quote-block p {
    font-style: italic;
    letter-spacing: -0.01em;
}

/* Problem grid for homepage "Why Now" section */
.hp-problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
}

.hp-problem-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 2rem;
    transition: border-color 0.3s, background 0.3s;
}

.hp-problem-card:hover {
    border-color: rgba(80, 158, 47, 0.3);
    background: rgba(80, 158, 47, 0.04);
}

.hp-problem-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.hp-problem-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.hp-problem-card p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .hp-problem-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Outcomes dropdown group labels (ICAD pillars) ── */
.header-dropdown-group-label {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.25;
    color: #7b897f;
    padding: 0.7rem 1rem 0.35rem;
    pointer-events: none;
    user-select: none;
}

.header-dropdown-group-label:first-child {
    padding-top: 0.35rem;
}