/* ── Inter, self-hosted ──
   Was loaded from fonts.googleapis.com on every page, which sent each
   visitor's IP to Google before any consent — a transfer the privacy policy's
   sub-processor table did not disclose, on a site selling compliance tooling.
   Serving it ourselves removes the transfer entirely rather than declaring it,
   and drops two DNS lookups plus two TLS handshakes from every page load.

   One variable file per subset: Google returns the same woff2 for all six
   weights, so the weight range is declared rather than duplicating files. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* @property for animated gradient borders */
@property --border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* ============================================
   DIGITALZOO.AI — Design System
   Inspired by dark space/cosmic aesthetic
   ============================================ */

/* ── CSS Variables ── */
:root {
    /* Backgrounds */
    --bg-primary: #050510;
    --bg-secondary: #080818;
    --bg-card: rgba(10, 10, 30, 0.8);
    --bg-card-hover: rgba(18, 28, 50, 0.8);
    --bg-card-border: rgba(0, 204, 255, 0.1);

    /* Accent Colors */
    --teal: #00ccff;
    --teal-dim: rgba(0, 204, 255, 0.15);
    --blue: #7733ff;
    --blue-dim: rgba(119, 51, 255, 0.15);
    --purple: #ff33aa;
    --purple-dim: rgba(255, 51, 170, 0.15);
    --orange: #ff5544;
    --orange-dim: rgba(255, 85, 68, 0.15);

    /* Text — brighter for better contrast on dark backgrounds */
    --text-primary: #f0f4ff;
    --text-secondary: rgba(220, 230, 245, 0.8);
    --text-muted: rgba(200, 215, 235, 0.5);

    /* Layout — viewport-responsive, fills screen on large monitors */
    --container-max: min(1400px, 90vw);
    --section-padding: 120px;
    --border-radius: 16px;
    --border-radius-sm: 10px;
    --border-radius-xs: 6px;

    /* Typography */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Scroll Reveal Animations ── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.animate-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

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

/* Stagger delays */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }

.animate-in[data-delay="100"] { animation-delay: 0.1s; }
.animate-in[data-delay="200"] { animation-delay: 0.2s; }
.animate-in[data-delay="300"] { animation-delay: 0.3s; }
.animate-in[data-delay="400"] { animation-delay: 0.4s; }
.animate-in[data-delay="500"] { animation-delay: 0.5s; }

/* ── Gradient Text ── */
.gradient-text {
    background: linear-gradient(135deg, #00ccff, #ff33aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
}

.navbar.scrolled {
    background: rgba(5, 5, 16, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(0, 204, 255, 0.06);
}

.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.logo-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.logo-dot {
    color: var(--teal);
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-links a {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: color 0.2s;
}

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

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #00ccff, #7733ff);
    color: #050510;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 30px rgba(0, 204, 255, 0.3);
    filter: brightness(1.1);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: transparent;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
}

.btn-lg {
    padding: 14px 28px;
    font-size: 0.95rem;
}

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

/* Mobile menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

/* ============================================
   HERO
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 100px;
    padding-bottom: 40px;
    overflow: hidden;
    background: url('assets/hero-bg.jpg') center top / cover no-repeat;
}

.hero-bg-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5, 5, 16, 0.2) 0%,
        rgba(5, 5, 16, 0.4) 30%,
        rgba(5, 5, 16, 0.7) 60%,
        rgba(5, 5, 16, 0.95) 80%,
        #050510 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* ── SPOTLIGHT BEAMS FROM TOP-LEFT OF BROWSER ──
   These are FULL hero-section overlays that originate from the very
   top-left corner (0,0) and fan outward diagonally toward the
   dashboard. They start narrow at the source and spread wide.
   Multiple beams at different angles + timing = cloud-filtered light */

/* Beam 1 — primary bright ray, narrow at origin, wide at target */
.spotlight-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(100, 170, 255, 0.30) 0%,
        rgba(70, 140, 255, 0.15) 10%,
        rgba(40, 110, 255, 0.08) 25%,
        rgba(20, 80, 255, 0.03) 40%,
        transparent 55%
    );
    animation: beam1Move 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Beam 2 — secondary ray, slightly different angle */
.spotlight-beam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        140deg,
        rgba(80, 150, 255, 0.20) 0%,
        rgba(50, 120, 255, 0.10) 12%,
        rgba(30, 90, 255, 0.05) 28%,
        transparent 48%
    );
    animation: beam2Move 11s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Beam 3 via pseudo-element — thinner, faster, creates flicker */
.spotlight-rays::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        128deg,
        rgba(120, 180, 255, 0.18) 0%,
        rgba(60, 130, 255, 0.08) 8%,
        rgba(30, 100, 255, 0.03) 20%,
        transparent 38%
    );
    animation: beam3Move 9s ease-in-out infinite;
}

/* Beam 4 via pseudo-element — widest spread */
.spotlight-beam::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        148deg,
        rgba(60, 120, 255, 0.12) 0%,
        rgba(40, 100, 255, 0.06) 15%,
        rgba(20, 70, 200, 0.02) 35%,
        transparent 50%
    );
    animation: beam4Move 14s ease-in-out infinite;
}

/* Ambient glow wash from top-left corner */
.spotlight-rays::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(
        ellipse at 0% 0%,
        rgba(80, 140, 255, 0.15) 0%,
        rgba(40, 100, 255, 0.06) 40%,
        transparent 70%
    );
    animation: ambientGlow 6s ease-in-out infinite;
}

/* Each beam drifts independently — like light through moving clouds */
@keyframes beam1Move {
    0%   { opacity: 0.4; transform: rotate(0deg); }
    25%  { opacity: 1.0; transform: rotate(0.5deg); }
    50%  { opacity: 0.5; transform: rotate(-0.3deg); }
    75%  { opacity: 0.8; transform: rotate(0.2deg); }
    100% { opacity: 0.4; transform: rotate(0deg); }
}

@keyframes beam2Move {
    0%   { opacity: 0.3; transform: rotate(0deg); }
    30%  { opacity: 0.7; transform: rotate(-0.4deg); }
    60%  { opacity: 0.2; transform: rotate(0.3deg); }
    85%  { opacity: 0.6; transform: rotate(-0.2deg); }
    100% { opacity: 0.3; transform: rotate(0deg); }
}

@keyframes beam3Move {
    0%   { opacity: 0.2; transform: rotate(0deg); }
    20%  { opacity: 0.6; transform: rotate(0.3deg); }
    45%  { opacity: 0.1; transform: rotate(-0.2deg); }
    70%  { opacity: 0.8; transform: rotate(0.4deg); }
    100% { opacity: 0.2; transform: rotate(0deg); }
}

@keyframes beam4Move {
    0%   { opacity: 0.3; transform: rotate(0deg); }
    40%  { opacity: 0.5; transform: rotate(-0.3deg); }
    70%  { opacity: 0.2; transform: rotate(0.2deg); }
    100% { opacity: 0.3; transform: rotate(0deg); }
}

@keyframes ambientGlow {
    0%, 100% { opacity: 0.6; }
    40% { opacity: 1; }
    70% { opacity: 0.5; }
}

#starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 1;
}

.hero-glow-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 204, 255, 0.12) 0%, transparent 70%);
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    animation: glowFloat 8s ease-in-out infinite;
}

.hero-glow-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(119, 51, 255, 0.1) 0%, transparent 70%);
    top: 200px;
    right: -100px;
    animation: glowFloat 10s ease-in-out infinite reverse;
}

.hero-glow-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 51, 170, 0.08) 0%, transparent 70%);
    bottom: 200px;
    left: -50px;
    animation: glowFloat 12s ease-in-out infinite;
}

@keyframes glowFloat {
    0%, 100% { transform: translateY(0) translateX(-50%); }
    50% { transform: translateY(-30px) translateX(-50%); }
}

.hero-glow-2 {
    animation-name: glowFloat2;
}

@keyframes glowFloat2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px) translateX(-20px); }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: min(1400px, 90vw);
    margin: 0 auto;
    padding: 0 24px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--teal-dim);
    border: 1px solid rgba(0, 204, 255, 0.15);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--teal);
    margin-bottom: 16px;
}

.badge-dot {
    width: 6px;
    height: 6px;
    background: var(--teal);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero-title {
    font-size: clamp(1.65rem, 3.15vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}

.hero-subtitle {
    font-size: clamp(0.95rem, 1.3vw, 1.2rem);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
    width: 130%;
    margin-left: -15%;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Dashboard Preview ── */
.hero-dashboard {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(1400px, 90vw);
    margin: 36px auto 0;
    padding: 0 24px;
}

.dashboard-frame {
    position: relative;
    background: rgba(10, 10, 30, 0.92);
    border: 1px solid rgba(60, 140, 255, 0.45);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow:
        0 0 15px rgba(60, 140, 255, 0.12),
        0 0 40px rgba(60, 140, 255, 0.06),
        inset 0 0 30px rgba(0, 0, 0, 0.4);
}

/* ── UNIVERSAL CARD GLOW SYSTEM ──
   Every card gets a soft glow aura on ALL four sides.
   Dashboard gets an extra-strong version + spotlight sweep.
   ──────────────────────────────────────────────────── */

/* Base glow mixin — applied via .glow-card class or directly */
.bento-card-inner,
.pricing-card-inner,
.feature-mock-card,
.step-card,
.dash-stat-card,
.feature-tip {
    position: relative;
}

/* All-sides glow for every card */
.bento-card-inner::after,
.pricing-card-inner::after,
.feature-mock-card::after,
.step-card::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: calc(var(--border-radius) + 12px);
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(0, 204, 255, 0.08) 0%,
        rgba(255, 51, 170, 0.06) 40%,
        transparent 70%
    );
    filter: blur(16px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

/* Stronger glow on hover */
.bento-card-inner:hover::after,
.pricing-card-inner:hover::after,
.feature-mock-card:hover::after,
.step-card:hover::after {
    opacity: 1;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(0, 204, 255, 0.14) 0%,
        rgba(255, 51, 170, 0.10) 40%,
        transparent 70%
    );
}

/* Featured pricing card gets extra glow */
.pricing-card.featured .pricing-card-inner::after {
    inset: -18px;
    border-radius: calc(var(--border-radius) + 18px);
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(0, 204, 255, 0.15) 0%,
        rgba(255, 51, 170, 0.10) 40%,
        transparent 70%
    );
    opacity: 1;
}

/* ── DASHBOARD GLOW — using box-shadow for reliable rendering ──
   box-shadow renders ON the element, no z-index stacking issues.
   Multiple layered shadows create the wide blue aura on ALL sides. */
.dashboard-glow-wrapper {
    position: relative;
    padding: 2px;
    border-radius: calc(var(--border-radius) + 2px);
    /* THE GLOW — multiple box-shadows stacked for depth */
    box-shadow:
        /* Tight bright border glow — 1px offset all sides */
        0 0 2px 1px rgba(60, 140, 255, 0.4),
        /* Medium spread — visible blue aura */
        0 0 15px 5px rgba(40, 120, 255, 0.25),
        /* Wide ambient glow — soft halo */
        0 0 40px 15px rgba(30, 100, 255, 0.15),
        /* Extra wide bloom */
        0 0 80px 30px rgba(20, 80, 255, 0.08),
        /* Top-bright — where the spotlight hits */
        0 -10px 50px 10px rgba(60, 140, 255, 0.12);
    animation: dashGlowPulse 6s ease-in-out infinite;
}

/* Glow pulses with the spotlight — brighter when light hits */
@keyframes dashGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 2px 1px rgba(60, 140, 255, 0.3),
            0 0 15px 5px rgba(40, 120, 255, 0.18),
            0 0 40px 15px rgba(30, 100, 255, 0.10),
            0 0 80px 30px rgba(20, 80, 255, 0.05),
            0 -10px 50px 10px rgba(60, 140, 255, 0.08);
    }
    30% {
        box-shadow:
            0 0 3px 2px rgba(70, 150, 255, 0.5),
            0 0 20px 8px rgba(50, 130, 255, 0.30),
            0 0 50px 20px rgba(40, 110, 255, 0.20),
            0 0 100px 40px rgba(30, 90, 255, 0.10),
            0 -15px 60px 15px rgba(70, 150, 255, 0.18);
    }
    60% {
        box-shadow:
            0 0 2px 1px rgba(60, 140, 255, 0.35),
            0 0 18px 6px rgba(40, 120, 255, 0.22),
            0 0 45px 18px rgba(30, 100, 255, 0.14),
            0 0 90px 35px rgba(20, 80, 255, 0.07),
            0 -12px 55px 12px rgba(60, 140, 255, 0.14);
    }
}

/* Dashboard frame inner glow — top edge brighter from spotlight */
/* ── SPOTLIGHT SWEEP across dashboard body ──
   A wide diagonal light beam that sweeps across the
   entire dashboard surface, illuminating content as it passes */

.dashboard-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(0, 204, 255, 0.06) 42%,
        rgba(255, 51, 170, 0.10) 48%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 51, 170, 0.10) 52%,
        rgba(0, 204, 255, 0.06) 58%,
        transparent 65%,
        transparent 100%
    );
    animation: spotlightSweep 6s ease-in-out infinite;
    z-index: 10;
    pointer-events: none;
}

/* Edge highlight line that follows the spotlight */
.dashboard-frame::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -100%;
    width: 50%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 204, 255, 0.5),
        rgba(255, 51, 170, 0.8),
        rgba(119, 51, 255, 0.5),
        transparent
    );
    animation: spotlightSweep 6s ease-in-out infinite;
    z-index: 11;
    pointer-events: none;
    filter: blur(1px);
}

@keyframes spotlightSweep {
    0% { left: -120%; }
    50% { left: 120%; }
    100% { left: 120%; }  /* pause at end before restarting */
}

/* Dashboard animated bars grow in */
.dash-bar, .mini-bar {
    transform-origin: bottom;
    animation: barGrow 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

@keyframes barGrow {
    0% { transform: scaleY(0); opacity: 0; }
    100% { transform: scaleY(1); opacity: 1; }
}

.dash-bar:nth-child(1) { animation-delay: 0.8s; }
.dash-bar:nth-child(2) { animation-delay: 0.9s; }
.dash-bar:nth-child(3) { animation-delay: 1.0s; }
.dash-bar:nth-child(4) { animation-delay: 1.1s; }
.dash-bar:nth-child(5) { animation-delay: 1.2s; }
.dash-bar:nth-child(6) { animation-delay: 1.3s; }
.dash-bar:nth-child(7) { animation-delay: 1.4s; }

.mini-bar:nth-child(1) { animation-delay: 0.3s; }
.mini-bar:nth-child(2) { animation-delay: 0.4s; }
.mini-bar:nth-child(3) { animation-delay: 0.5s; }
.mini-bar:nth-child(4) { animation-delay: 0.6s; }
.mini-bar:nth-child(5) { animation-delay: 0.7s; }
.mini-bar:nth-child(6) { animation-delay: 0.8s; }

/* Stat fill bars animated */
.dash-stat-fill {
    width: 0 !important;
    animation: fillGrow 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 1s;
}

@keyframes fillGrow {
    to { width: var(--fill-width); }
}

/* Pulsing agent status dots */
.agent-status.online {
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 4px var(--teal); }
    50% { box-shadow: 0 0 10px var(--teal), 0 0 20px rgba(0, 204, 255, 0.3); }
}

/* Animated donut ring for focus-style indicator in dashboard */
.dash-donut {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(var(--teal) 0deg, var(--teal) calc(var(--donut-pct) * 3.6deg), rgba(255,255,255,0.06) calc(var(--donut-pct) * 3.6deg));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dash-donut::after {
    content: '';
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-card);
    position: absolute;
}

.dash-donut-val {
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--teal);
}

/* Animated gradient border shimmer for featured elements */
.shimmer-border {
    position: relative;
    overflow: hidden;
}

.shimmer-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 204, 255, 0.05),
        rgba(255, 51, 170, 0.08),
        rgba(0, 204, 255, 0.05),
        transparent
    );
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.dashboard-topbar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.dashboard-dots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot.red { background: #ff5f57; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #28c840; }

.dashboard-url {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dashboard-body {
    display: grid;
    grid-template-columns: 160px 1fr 240px;
    min-height: 360px;
}

/* Sidebar */
.dash-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px 12px;
}

.dash-logo-sm {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 10px;
    margin-bottom: 20px;
    color: var(--teal);
}

.dash-nav-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dash-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--border-radius-xs);
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: default;
    transition: background 0.2s;
}

.dash-nav-item.active {
    background: var(--teal-dim);
    color: var(--teal);
}

.dash-nav-item svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.dash-nav-item.active svg {
    opacity: 1;
}

/* Main dashboard content */
.dash-main {
    padding: 20px;
}

.dash-greeting {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.dash-avatar {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--teal-dim);
    border-radius: 50%;
}

.dash-welcome {
    font-size: 0.9rem;
    font-weight: 600;
}

.dash-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dash-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.dash-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--border-radius-sm);
    padding: 14px;
}

.dash-stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.dash-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.dash-stat-value.teal { color: var(--teal); }
.dash-stat-value.blue { color: var(--blue); }
.dash-stat-value.purple { color: var(--purple); }

.dash-stat-unit {
    font-size: 0.8rem;
    font-weight: 400;
}

.dash-stat-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    margin-top: 10px;
    overflow: hidden;
}

.dash-stat-fill {
    height: 100%;
    background: var(--teal);
    border-radius: 3px;
    transition: width 1.5s ease;
}

.dash-stat-fill.blue { background: var(--blue); }
.dash-stat-fill.purple { background: var(--purple); }

/* Chart area */
.dash-chart-area {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--border-radius-sm);
    padding: 14px;
}

.dash-chart-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-bottom: 14px;
}

.dash-chart-period {
    color: var(--text-muted);
    font-size: 0.65rem;
}

.dash-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 80px;
}

.dash-bar {
    flex: 1;
    background: var(--blue-dim);
    border-radius: 3px 3px 0 0;
    transition: background 0.3s;
    min-height: 4px;
}

.dash-bar.active {
    background: var(--teal);
}

.dash-chart-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* Right panel */
.dash-right {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dash-right-panel {
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 10px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow:
        0 0 12px rgba(59, 130, 246, 0.08),
        0 0 30px rgba(59, 130, 246, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dash-right-agents {
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow:
        0 0 12px rgba(59, 130, 246, 0.1),
        0 0 30px rgba(59, 130, 246, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dash-right-insights {
    border-color: rgba(45, 212, 191, 0.3);
    box-shadow:
        0 0 12px rgba(45, 212, 191, 0.08),
        0 0 30px rgba(45, 212, 191, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dash-panel-title {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.dash-agent-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-agent {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--border-radius-xs);
}

.agent-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.agent-status.online { background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.agent-status.idle { background: var(--orange); }

.agent-badge {
    margin-left: auto;
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--teal-dim);
    color: var(--teal);
}

.agent-badge.idle {
    background: var(--orange-dim);
    color: var(--orange);
}

/* ── Rich Dashboard Styles ── */
.dashboard-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px;
    padding: 6px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.55);
}

.dashboard-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: default;
}

.avatar-btn {
    font-size: 0.6rem;
    font-weight: 700;
    color: #00ccff;
    background: rgba(0,204,255,0.1);
    border-color: rgba(0,204,255,0.15);
}

.dash-logo-sm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 16px;
}

.dash-logo-icon { font-size: 1.1rem; }
.dash-logo-text { font-size: 0.75rem; font-weight: 700; color: #00ccff; }

.dash-nav-section { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 12px 0; }
.dash-nav-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); padding: 4px 10px; }

.nav-count {
    margin-left: auto;
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 100px;
    background: rgba(0,204,255,0.1);
    color: #00ccff;
}

.dash-avatar-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, #00ccff, #7733ff);
}

.dash-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: #0a0a1e;
    border-radius: 50%;
}

/* Gradient stat cards — diagonal gradient like OrbitAI */
.gradient-card-1 {
    background: linear-gradient(135deg, rgba(0,204,255,0.08) 0%, rgba(10,10,30,0.9) 50%, rgba(0,204,255,0.04) 100%) !important;
    border-color: rgba(0,204,255,0.12) !important;
}
.gradient-card-2 {
    background: linear-gradient(135deg, rgba(119,51,255,0.08) 0%, rgba(10,10,30,0.9) 50%, rgba(119,51,255,0.04) 100%) !important;
    border-color: rgba(119,51,255,0.12) !important;
}
.gradient-card-3 {
    background: linear-gradient(135deg, rgba(255,51,170,0.08) 0%, rgba(10,10,30,0.9) 50%, rgba(255,51,170,0.04) 100%) !important;
    border-color: rgba(255,51,170,0.12) !important;
}

/* Light-theme overrides for gradient cards */
.dashboard-frame.light-theme .gradient-card-1,
.dashboard-frame.light-theme .gradient-card-2,
.dashboard-frame.light-theme .gradient-card-3 {
    background: #f0f2f5 !important;
    border-color: #e0e0e0 !important;
    color: #212121;
}

.dashboard-frame.light-theme .gradient-card-1 .dash-stat-label,
.dashboard-frame.light-theme .gradient-card-2 .dash-stat-label,
.dashboard-frame.light-theme .gradient-card-3 .dash-stat-label {
    color: #666;
}

.dashboard-frame.light-theme .gradient-card-1 .dash-stat-change,
.dashboard-frame.light-theme .gradient-card-2 .dash-stat-change,
.dashboard-frame.light-theme .gradient-card-3 .dash-stat-change {
    color: #888;
}

.dash-stat-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0,204,255,0.1);
    color: #00ccff;
    margin-bottom: 10px;
}
.dash-stat-icon.blue { background: rgba(119,51,255,0.1); color: #7733ff; }
.dash-stat-icon.purple { background: rgba(255,51,170,0.1); color: #ff33aa; }

.dash-stat-change {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.55);
    margin-top: 8px;
}
.dash-stat-change.up { color: #00ccff; }
.dash-stat-change.up::before { content: '\2191  '; }

/* Chart tabs */
.dash-chart-tabs {
    display: flex;
    gap: 4px;
}
.chart-tab {
    font-size: 0.6rem;
    padding: 2px 8px;
    border-radius: 4px;
    color: rgba(255,255,255,0.55);
    cursor: default;
}
.chart-tab.active {
    background: rgba(0,204,255,0.1);
    color: #00ccff;
}

/* Bottom row — chart + focus side by side */
.dash-bottom-row {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 12px;
}

/* Focus panel */
.dash-focus-panel {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.focus-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #00ccff;
    margin-bottom: 12px;
}

.focus-timer {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.focus-ring {
    position: absolute;
    width: 100%;
    height: 100%;
}

.focus-time {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.focus-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.55);
    margin-top: 8px;
}

/* Agent info layout */
.agent-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.agent-name { font-size: 0.7rem; }
.agent-task { font-size: 0.6rem; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Insights mini panel */
.insight-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.insight-val {
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    font-size: 0.75rem;
}
.insight-val.teal { color: #00ccff; }
.insight-unit { font-size: 0.6rem; font-weight: 400; color: rgba(255,255,255,0.4); }

.dash-right .dash-panel-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================
   ORBIT / "BUILT FOR" SECTION
   ============================================ */
.orbit-section {
    padding: var(--section-padding) 0;
    position: relative;
    background: var(--bg-secondary);
}

.orbit-section .section-title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 60px;
}

.orbit-visual {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 500px;
    margin: 0 auto;
}

#orbCanvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    z-index: 1;
}

.orbit-center-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, var(--teal) 0%, rgba(0, 204, 255, 0.3) 40%, transparent 70%);
    border-radius: 50%;
    z-index: 2;
    animation: orbGlow 3s ease-in-out infinite;
}

@keyframes orbGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.orbit-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.orbit-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    z-index: 3;
}

.orbit-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.orbit-dot.teal { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.orbit-dot.blue { background: var(--blue); box-shadow: 0 0 8px var(--blue); }
.orbit-dot.purple { background: var(--purple); box-shadow: 0 0 8px var(--purple); }

.orbit-label-tl { top: 60px; left: 40px; }
.orbit-label-tr { top: 60px; right: 40px; }
.orbit-label-bl { bottom: 60px; left: 40px; }
.orbit-label-br { bottom: 60px; right: 40px; }

.orbit-tagline {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 40px;
    font-style: italic;
}

/* ============================================
   FEATURES BENTO GRID
   ============================================ */
.features-section {
    padding: var(--section-padding) 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 20px;
}

.bento-card {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.bento-card-inner {
    height: 100%;
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.bento-card-inner:hover {
    border-color: rgba(0, 204, 255, 0.15);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.bento-large {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-medium {
    grid-column: span 1;
    grid-row: span 2;
}

.bento-small {
    grid-column: span 1;
}

.bento-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--teal-dim);
    color: var(--teal);
    margin-bottom: 20px;
}

.bento-icon.blue { background: var(--blue-dim); color: var(--blue); }
.bento-icon.purple { background: var(--purple-dim); color: var(--purple); }
.bento-icon.teal { background: var(--teal-dim); color: var(--teal); }
.bento-icon.orange { background: var(--orange-dim); color: var(--orange); }

.bento-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.bento-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Bento Mock UIs */
.bento-mock {
    margin-top: 24px;
}

.mock-agent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.mock-agent {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--border-radius-sm);
    padding: 16px;
    text-align: center;
}

.mock-agent-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.mock-agent-name {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.mock-agent-status {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--teal-dim);
    color: var(--teal);
    display: inline-block;
}

.mock-agent-status.idle {
    background: var(--orange-dim);
    color: var(--orange);
}

/* Workflow mock */
.mock-workflow {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mock-wf-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.8rem;
    border-radius: var(--border-radius-xs);
}

.mock-wf-step.active {
    background: rgba(0, 204, 255, 0.05);
}

.mock-wf-step.dim {
    opacity: 0.4;
}

.wf-num {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.wf-num.active {
    background: var(--teal-dim);
    color: var(--teal);
}

.wf-check {
    margin-left: auto;
    color: var(--teal);
    font-weight: 600;
}

.wf-spinner {
    margin-left: auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--teal-dim);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.mock-wf-line {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    margin-left: 23px;
}

.mock-wf-line.dim {
    opacity: 0.3;
}

/* Mini bars */
.mock-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
}

.mini-bar {
    flex: 1;
    background: var(--purple-dim);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: background 0.3s;
}

.mini-bar.active {
    background: var(--purple);
}

/* Shield */
.mock-shield {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 80px;
}

.shield-pulse {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(0, 204, 255, 0.15);
    animation: shieldPulse 2s ease-in-out infinite;
}

@keyframes shieldPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.4); opacity: 0; }
}

/* Rhythm blocks */
.mock-rhythm {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rhythm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.rhythm-row span:first-child {
    width: 28px;
}

.rhythm-blocks {
    display: flex;
    gap: 3px;
}

.rb {
    width: 20px;
    height: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
}

.rb.filled {
    background: var(--teal-dim);
}

.rb.filled.high {
    background: var(--teal);
}

/* ============================================
   STATS
   ============================================ */
.stats-section {
    padding: 80px 0;
    background: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.stat-number {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #00ccff, #ff33aa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* ============================================
   HOW IT WORKS
   ============================================ */
.how-section {
    padding: var(--section-padding) 0;
}

.steps-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.step-card {
    flex: 1;
    max-width: 300px;
    text-align: center;
    padding: 40px 30px;
}

.step-number {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.step-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border-radius: 16px;
    background: var(--teal-dim);
    color: var(--teal);
    border: 1px solid rgba(0, 204, 255, 0.1);
}

.step-icon.blue {
    background: var(--blue-dim);
    color: var(--blue);
    border-color: rgba(119, 51, 255, 0.1);
}

.step-icon.purple {
    background: var(--purple-dim);
    color: var(--purple);
    border-color: rgba(255, 51, 170, 0.1);
}

.step-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.step-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.step-connector {
    display: flex;
    align-items: center;
    padding-top: 90px;
}

/* ============================================
   DEEP FEATURES
   ============================================ */
.deep-features {
    padding: var(--section-padding) 0;
    background: var(--bg-secondary);
}

.deep-features .section-title {
    text-align: center;
    margin-bottom: 80px;
}

.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 100px;
}

.feature-row.reverse {
    direction: rtl;
}

.feature-row.reverse > * {
    direction: ltr;
}

.feature-pill {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 100px;
    background: var(--teal-dim);
    color: var(--teal);
    border: 1px solid rgba(0, 204, 255, 0.15);
    margin-bottom: 20px;
}

.feature-pill.blue {
    background: var(--blue-dim);
    color: var(--blue);
    border-color: rgba(119, 51, 255, 0.15);
}

.feature-text h3 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.feature-text > p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 20px;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.feature-list li svg {
    flex-shrink: 0;
}

.feature-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 24px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.tip-icon {
    font-size: 1rem;
}

/* Feature Terminal */
.feature-terminal {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-sm);
    padding: 16px 20px;
    margin-top: 16px;
}

.terminal-prompt {
    font-size: 0.75rem;
    color: var(--teal);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.terminal-input {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

.terminal-cursor {
    color: var(--teal);
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Feature Mock Cards */
.feature-visual {
    display: flex;
    justify-content: center;
}

.feature-mock-card {
    width: 100%;
    max-width: 480px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.fmc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
    font-weight: 600;
}

.fmc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 8px var(--teal);
}

.fmc-dot.blue {
    background: var(--blue);
    box-shadow: 0 0 8px var(--blue);
}

.fmc-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fmc-stat {
    padding: 16px;
    background: var(--bg-card);
    text-align: center;
}

.fmc-stat-val {
    font-size: 1.3rem;
    font-weight: 700;
}

.fmc-stat-val.teal { color: var(--teal); }

.fmc-stat-lbl {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.fmc-agent-rows {
    padding: 12px;
}

.fmc-agent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--border-radius-xs);
    font-size: 0.8rem;
    transition: background 0.2s;
}

.fmc-agent-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.fmc-time {
    color: var(--text-muted);
    font-size: 0.7rem;
    width: 50px;
}

.fmc-task {
    flex: 1;
}

.fmc-badge {
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 600;
    background: var(--teal-dim);
    color: var(--teal);
}

.fmc-badge.medium {
    background: var(--orange-dim);
    color: var(--orange);
}

/* Workflow steps in feature card */
.fmc-workflow-steps {
    padding: 20px;
}

.fmc-wf-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--border-radius-xs);
    font-size: 0.85rem;
}

.fmc-wf-step.done {
    color: var(--text-secondary);
}

.fmc-wf-step.active {
    background: rgba(0, 204, 255, 0.06);
    color: var(--teal);
}

.fmc-wf-step.pending {
    opacity: 0.35;
}

.fmc-wf-icon {
    width: 24px;
    text-align: center;
    font-size: 0.85rem;
}

.fmc-wf-icon.spin {
    animation: spin 2s linear infinite;
    color: var(--teal);
}

.fmc-wf-connector {
    width: 1px;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    margin-left: 27px;
}

.fmc-wf-connector.dim {
    opacity: 0.3;
}

/* ============================================
   PRICING
   ============================================ */
.pricing-section {
    padding: var(--section-padding) 0;
}

.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 50px;
}

.toggle-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-label.active {
    color: var(--text-primary);
}

.save-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--teal-dim);
    color: var(--teal);
}

.toggle-switch {
    width: 48px;
    height: 26px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    position: relative;
    transition: background 0.3s;
}

.toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-primary);
    transition: transform 0.3s;
}

.toggle-switch.yearly .toggle-knob {
    transform: translateX(22px);
}

.toggle-switch.yearly {
    background: var(--teal-dim);
    border-color: rgba(0, 204, 255, 0.2);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.pricing-card {
    border-radius: var(--border-radius);
}

.pricing-card-inner {
    padding: 36px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    backdrop-filter: blur(12px);
    transition: border-color 0.3s, box-shadow 0.3s;
    position: relative;
}

.pricing-card-inner:hover {
    border-color: rgba(0, 204, 255, 0.12);
}

.pricing-card.featured .pricing-card-inner {
    border-color: rgba(0, 204, 255, 0.2);
    box-shadow: 0 0 60px rgba(0, 204, 255, 0.08);
    background: rgba(10, 10, 30, 0.9);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    background: linear-gradient(135deg, #00ccff, #7733ff);
    color: #050510;
    border-radius: 100px;
}

.pricing-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.pricing-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.pricing-amount {
    margin-bottom: 28px;
}

.price {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.price-period {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pricing-features {
    margin-bottom: 28px;
}

.pricing-features li {
    padding: 8px 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-features li::before {
    content: '✓';
    color: var(--teal);
    font-size: 0.75rem;
    font-weight: 700;
}

.pricing-features-2col {
    columns: 2;
    column-gap: 32px;
}

.pricing-features-2col li {
    break-inside: avoid;
}

@media (max-width: 600px) {
    .pricing-features-2col {
        columns: 1;
    }
}

/* ============================================
   CTA
   ============================================ */
.cta-section {
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}

.cta-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 204, 255, 0.1) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
}

.cta-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.cta-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta-content p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-brand .nav-logo {
    margin-bottom: 16px;
}

.footer-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 260px;
}

.footer-links-col h4 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.footer-links-col a {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 6px 0;
    transition: color 0.2s;
}

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

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-bottom p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-socials {
    display: flex;
    gap: 16px;
}

.footer-socials a {
    color: var(--text-muted);
    transition: color 0.2s;
}

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

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

/* Large / high-res displays — scale everything up to fill viewport */
@media (min-width: 1600px) {
    :root {
        --container-max: min(1600px, 88vw);
        font-size: clamp(16px, 1.1vw, 22px);
    }

    .hero-title {
        font-size: clamp(2.6rem, 4.1vw, 4.5rem);
    }

    .hero-dashboard {
        max-width: min(1600px, 88vw);
    }

    .hero-content {
        max-width: min(1600px, 88vw);
    }

    .section-title {
        font-size: clamp(2.5rem, 4.5vw, 4rem);
    }

    .bento-card h3 {
        font-size: 1.4rem;
    }

    .btn-primary, .btn-ghost {
        padding: 14px 28px;
        font-size: 1rem;
    }

    .nav-links a {
        font-size: 1rem;
    }
}

/* Extra-large 4K+ displays */
@media (min-width: 2200px) {
    :root {
        --container-max: min(1900px, 85vw);
        font-size: clamp(18px, 1.2vw, 26px);
    }

    .hero-title {
        font-size: clamp(3rem, 3.75vw, 5.25rem);
    }

    .hero-dashboard {
        max-width: min(1800px, 85vw);
    }

    .hero-content {
        max-width: min(1800px, 85vw);
    }
}

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

    .bento-large {
        grid-column: span 2;
        grid-row: span 1;
    }

    .bento-medium {
        grid-column: span 1;
        grid-row: span 1;
    }

    .feature-row,
    .feature-row.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
        direction: ltr;
    }

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

    .dash-sidebar,
    .dash-right {
        display: none;
    }

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

@media (max-width: 768px) {
    :root {
        --section-padding: 80px;
    }

    .nav-links,
    .nav-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .hero-title {
        font-size: 1.65rem;
    }

    .hero-subtitle br {
        display: none;
    }

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

    .bento-large,
    .bento-medium {
        grid-column: span 1;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .steps-grid {
        flex-direction: column;
        align-items: center;
    }

    .step-connector {
        transform: rotate(90deg);
        padding-top: 0;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

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

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .orbit-visual {
        height: 400px;
    }

    .orbit-label {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .hero {
        padding-top: 120px;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }

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

/* ── Typed Text Animation ── */
.typed-text {
    display: inline;
    border-right: none;
}

/* Hexagonal grid background pattern */
.hex-bg {
    position: relative;
}

.hex-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(60deg, rgba(0, 204, 255, 0.03) 25%, transparent 25%, transparent 75%, rgba(0, 204, 255, 0.03) 75%),
        linear-gradient(120deg, rgba(255, 51, 170, 0.03) 25%, transparent 25%, transparent 75%, rgba(255, 51, 170, 0.03) 75%);
    background-size: 60px 104px;
    background-position: 0 0, 30px 52px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* Floating hexagon decorations */
.hex-float {
    position: absolute;
    width: 60px;
    height: 60px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    opacity: 0.08;
    animation: hexFloat 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.hex-float-1 {
    background: linear-gradient(135deg, #00ccff, #7733ff);
    top: 15%;
    left: 5%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.hex-float-2 {
    background: linear-gradient(135deg, #ff33aa, #ff5544);
    top: 40%;
    right: 8%;
    width: 50px;
    height: 50px;
    animation-delay: -3s;
}

.hex-float-3 {
    background: linear-gradient(135deg, #7733ff, #ff33aa);
    bottom: 20%;
    left: 12%;
    width: 70px;
    height: 70px;
    animation-delay: -6s;
}

.hex-float-4 {
    background: linear-gradient(135deg, #00ccff, #ff33aa);
    top: 60%;
    right: 15%;
    width: 40px;
    height: 40px;
    animation-delay: -9s;
}

@keyframes hexFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.08; }
    25% { transform: translateY(-15px) rotate(15deg); opacity: 0.12; }
    50% { transform: translateY(-5px) rotate(30deg); opacity: 0.06; }
    75% { transform: translateY(-20px) rotate(15deg); opacity: 0.10; }
}

/* ============================================
   NEW SHARED COMPONENTS — Multi-Page
   ============================================ */

/* ── Narrative Section (Mission/Story blocks) ── */
.narrative-section {
    padding: var(--section-padding) 0;
    position: relative;
}

.narrative-section .container {
    max-width: 900px;
}

.narrative-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
    text-align: center;
}

.narrative-body {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.85;
    color: var(--text-secondary);
    text-align: left;
}

.narrative-body p {
    margin-bottom: 24px;
}

.narrative-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

.narrative-closing {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-top: 48px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.narrative-strapline {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 800;
    text-align: center;
    margin-top: 48px;
    letter-spacing: -0.02em;
}

/* ── Dashboard Severity Bar ── */
.dash-severity-bar {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 12px;
    padding: 0 4px;
}

.severity-segment {
    height: 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.severity-segment.critical { background: linear-gradient(90deg, #ff3366, #ff5577); }
.severity-segment.high { background: linear-gradient(90deg, #ff8844, #ffaa55); }
.severity-segment.medium { background: linear-gradient(90deg, #ffcc33, #ffdd66); }
.severity-segment.low { background: linear-gradient(90deg, #2dd4bf, #44eedd); }

.severity-labels {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    padding: 0 4px;
}

.severity-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.55rem;
    color: var(--text-muted);
}

.severity-label .severity-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.severity-dot.critical { background: #ff3366; }
.severity-dot.high { background: #ff8844; }
.severity-dot.medium { background: #ffcc33; }
.severity-dot.low { background: #2dd4bf; }

/* ── Dashboard Recent Alerts ── */
.dash-recent-alerts {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dash-alert-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    color: var(--text-muted);
    padding: 4px 6px;
    border-radius: var(--border-radius-xs);
    background: rgba(255, 255, 255, 0.02);
}

.dash-alert-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    flex-shrink: 0;
}

.dash-alert-icon.critical {
    background: rgba(255, 51, 102, 0.2);
    color: #ff3366;
}

.dash-alert-icon.warning {
    background: rgba(255, 136, 68, 0.2);
    color: #ff8844;
}

.dash-alert-icon.info {
    background: rgba(0, 204, 255, 0.15);
    color: var(--teal);
}

.dash-alert-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-alert-time {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

/* ── Pricing Callout ── */
.pricing-callout {
    max-width: 800px;
    margin: 0 auto 48px;
    padding: 28px 32px;
    background: rgba(0, 204, 255, 0.04);
    border: 1px solid rgba(0, 204, 255, 0.12);
    border-radius: var(--border-radius);
    text-align: center;
}

.pricing-callout h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.pricing-callout p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ── Nav Product Links ── */
.nav-product-links {
    display: flex;
    gap: 20px;
}

/* ── Hero Minimal (text-only, no dashboard) ── */
.hero-minimal {
    min-height: 60vh;
    padding-top: 160px;
    padding-bottom: 80px;
}

/* ── Styled Tables (Mission/Corvus) ── */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
    font-size: 0.85rem;
}

.styled-table thead {
    border-bottom: 2px solid rgba(0, 204, 255, 0.2);
}

.styled-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.styled-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}

.styled-table tbody tr {
    transition: background 0.2s ease;
}

.styled-table tbody tr:hover {
    background: rgba(0, 204, 255, 0.03);
}

.styled-table .cost-high {
    color: #ff5577;
    font-weight: 600;
}

.styled-table .cost-low {
    color: var(--teal);
    font-weight: 600;
}

/* ── Belief / Principle Cards ── */
.beliefs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.belief-card {
    display: flex;
    gap: 20px;
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    transition: border-color 0.3s, transform 0.3s;
}

.belief-card:hover {
    border-color: rgba(0, 204, 255, 0.15);
    transform: translateX(4px);
}

.belief-number {
    font-size: 2rem;
    font-weight: 800;
    color: rgba(0, 204, 255, 0.15);
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
}

.belief-content h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.belief-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── Differentiator Grid (Corvus) ── */
.differentiator-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.differentiator-grid .bento-card:first-child {
    grid-row: span 2;
}

/* ── Tab Group Cards (Corvus Intelligence Coverage) ── */
.tab-group-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.tab-group-grid-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tab-group-card {
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.tab-group-card:hover {
    border-color: rgba(0, 204, 255, 0.15);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.tab-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.tab-pill {
    padding: 4px 10px;
    font-size: 0.6rem;
    font-weight: 500;
    border-radius: 20px;
    background: rgba(0, 204, 255, 0.08);
    color: var(--teal);
    border: 1px solid rgba(0, 204, 255, 0.15);
}

.tab-group-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.tab-group-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.tab-group-stat {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.75rem;
    color: var(--teal);
    font-weight: 500;
}

/* ── Doctrine Grid (Corvus) ── */
.doctrine-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.doctrine-card {
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    transition: border-color 0.3s, transform 0.3s;
    position: relative;
}

.doctrine-card:hover {
    border-color: rgba(0, 204, 255, 0.15);
    transform: translateY(-2px);
}

.doctrine-card:nth-child(1),
.doctrine-card:nth-child(4) {
    grid-row: span 1;
    min-height: 200px;
}

.doctrine-number {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(0, 204, 255, 0.06);
    position: absolute;
    top: 16px;
    right: 20px;
    line-height: 1;
}

.doctrine-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    padding-right: 40px;
}

.doctrine-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── Framework Badge Grid (GRCxAI) ── */
.framework-section {
    margin-bottom: 40px;
}

.framework-category {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.framework-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.framework-badge {
    padding: 8px 16px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: 20px;
    color: var(--text-secondary);
    transition: border-color 0.3s, color 0.3s;
}

.framework-badge:hover {
    border-color: rgba(0, 204, 255, 0.25);
    color: var(--teal);
}

/* ── Integration Grid (GRCxAI) ── */
.integration-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.integration-card {
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    text-align: center;
    transition: border-color 0.3s, transform 0.3s;
}

.integration-card:hover {
    border-color: rgba(0, 204, 255, 0.15);
    transform: translateY(-2px);
}

.integration-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 204, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 1.2rem;
}

.integration-card h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.integration-card p {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Role Cards (GRCxAI) ── */
.role-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.role-card {
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    transition: border-color 0.3s, transform 0.3s;
}

.role-card:hover {
    border-color: rgba(0, 204, 255, 0.15);
    transform: translateY(-2px);
}

.role-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
}

.role-icon.teal { background: var(--teal-dim); }
.role-icon.blue { background: var(--blue-dim); }
.role-icon.purple { background: var(--purple-dim); }

.role-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.role-card ul {
    list-style: none;
    padding: 0;
}

.role-card ul li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 6px 0;
    padding-left: 18px;
    position: relative;
}

.role-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    transform: translateY(-50%);
    opacity: 0.5;
}

/* ── Pain Point Cards ── */
.pain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pain-card {
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 85, 68, 0.1);
    border-radius: var(--border-radius);
    transition: border-color 0.3s, transform 0.3s;
}

.pain-card:hover {
    border-color: rgba(255, 85, 68, 0.25);
    transform: translateY(-2px);
}

.pain-card .pain-icon {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.pain-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.pain-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── Platform Cards (2-up layout) ── */
.platform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.platform-card {
    padding: 36px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    transition: border-color 0.3s, transform 0.3s;
}

.platform-card:hover {
    border-color: rgba(0, 204, 255, 0.15);
    transform: translateY(-2px);
}

.platform-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.platform-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.platform-card .btn-ghost {
    margin-top: 20px;
    display: inline-flex;
}

/* ── Responsive for new components ── */
@media (max-width: 1024px) {
    .differentiator-grid { grid-template-columns: 1fr; }
    .differentiator-grid .bento-card:first-child { grid-row: span 1; }
    .tab-group-grid { grid-template-columns: 1fr; }
    .tab-group-grid-bottom { grid-template-columns: 1fr 1fr; }
    .doctrine-grid { grid-template-columns: 1fr; }
    .integration-grid { grid-template-columns: repeat(2, 1fr); }
    .role-grid { grid-template-columns: 1fr; }
    .pain-grid { grid-template-columns: 1fr; }
    .platform-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .tab-group-grid-bottom { grid-template-columns: 1fr; }
    .integration-grid { grid-template-columns: repeat(2, 1fr); }
    .styled-table { font-size: 0.75rem; }
    .styled-table th, .styled-table td { padding: 10px 10px; }
    .beliefs-grid { gap: 16px; }
    .belief-card { flex-direction: column; gap: 12px; padding: 20px; }
    .fw-visual-grid { grid-template-columns: 1fr; }
    .module-showcase { grid-template-columns: 1fr; }
}

/* ============================================
   GRCXAI PAGE — Rich Visual Components
   ============================================ */

/* ── Framework Visual Grid (replacing plain badges) ── */
.fw-visual-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.fw-visual-card {
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.fw-visual-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.fw-visual-card.cat-iso::before { background: linear-gradient(90deg, var(--teal), #3b82f6); }
.fw-visual-card.cat-reg::before { background: linear-gradient(90deg, #7733ff, #ff33aa); }
.fw-visual-card.cat-uk::before { background: linear-gradient(90deg, #3b82f6, var(--teal)); }
.fw-visual-card.cat-esg::before { background: linear-gradient(90deg, #4caf50, #66bb6a); }

.fw-visual-card:hover {
    border-color: rgba(0, 204, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.fw-card-count {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
}

.fw-card-count.teal { color: var(--teal); }
.fw-card-count.purple { color: var(--blue); }
.fw-card-count.blue { color: #3b82f6; }
.fw-card-count.green { color: #66bb6a; }

.fw-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.fw-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.fw-card-tag {
    font-size: 0.55rem;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Module Showcase (alternating tall/wide cards) ── */
.module-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 16px;
}

.module-card {
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    transition: border-color 0.3s, transform 0.3s;
    position: relative;
    overflow: hidden;
}

.module-card:hover {
    border-color: rgba(0, 204, 255, 0.15);
    transform: translateY(-2px);
}

.module-card.span-2 {
    grid-column: span 2;
}

.module-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-bottom: 12px;
}

.module-card-icon.risk { background: rgba(255, 85, 68, 0.12); }
.module-card-icon.compliance { background: rgba(59, 130, 246, 0.12); }
.module-card-icon.ai { background: rgba(139, 92, 246, 0.12); }
.module-card-icon.vendor { background: rgba(255, 136, 68, 0.12); }
.module-card-icon.bcp { background: rgba(0, 204, 255, 0.12); }
.module-card-icon.esg { background: rgba(76, 175, 80, 0.12); }
.module-card-icon.docs { background: rgba(255, 213, 79, 0.12); }
.module-card-icon.core { background: rgba(158, 158, 158, 0.12); }
.module-card-icon.admin { background: rgba(120, 144, 156, 0.12); }

.module-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.module-card .module-count {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.module-card p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ── Screenshot with caption overlay ── */
.screenshot-card {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--bg-card-border);
    transition: transform 0.3s, box-shadow 0.3s;
}

.screenshot-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
}

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

.screenshot-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}

.screenshot-caption h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

.screenshot-caption p {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

@media (max-width: 1024px) {
    .fw-visual-grid { grid-template-columns: repeat(2, 1fr); }
    .module-showcase { grid-template-columns: 1fr 1fr; }
    .module-card.span-2 { grid-column: span 1; }
}

/* ── Light-Themed Dashboard Variant (GRCxAI) ── */
.dashboard-frame.light-theme {
    background: #f5f7fa;
    border-color: rgba(33, 150, 243, 0.3);
}

.dashboard-frame.light-theme .dashboard-topbar {
    background: linear-gradient(90deg, #0d47a1, #1565c0);
}

.dashboard-frame.light-theme .dashboard-search span {
    color: rgba(255, 255, 255, 0.7);
}

.dashboard-frame.light-theme .dashboard-body {
    background: #f5f7fa;
}

.dashboard-frame.light-theme .dash-sidebar {
    background: linear-gradient(180deg, #1565c0, #0d47a1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-frame.light-theme .dash-sidebar .dash-logo-sm {
    color: white;
}

.dashboard-frame.light-theme .dash-sidebar .dash-logo-text {
    color: white;
}

.dashboard-frame.light-theme .dash-sidebar .dash-nav-item {
    color: rgba(255, 255, 255, 0.7);
}

.dashboard-frame.light-theme .dash-sidebar .dash-nav-item.active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.dashboard-frame.light-theme .dash-sidebar .dash-nav-item svg {
    opacity: 0.8;
}

.dashboard-frame.light-theme .dash-sidebar .dash-nav-item.active svg {
    opacity: 1;
}

.dashboard-frame.light-theme .dash-sidebar .dash-nav-label {
    color: rgba(255, 255, 255, 0.4);
}

.dashboard-frame.light-theme .dash-sidebar .dash-nav-divider {
    background: rgba(255, 255, 255, 0.1);
}

.dashboard-frame.light-theme .dash-sidebar .nav-count {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.dashboard-frame.light-theme .dash-main {
    background: #f0f2f5;
    color: #212121;
}

.dashboard-frame.light-theme .dash-welcome {
    color: #212121;
}

.dashboard-frame.light-theme .dash-sub {
    color: #666;
}

.dashboard-frame.light-theme .dash-sub strong {
    color: #333;
}

.dashboard-frame.light-theme .dash-stat-card {
    background: white;
    border-color: #e0e0e0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.dashboard-frame.light-theme .dash-stat-label {
    color: #888;
}

.dashboard-frame.light-theme .dash-stat-value {
    color: #1565c0;
}

.dashboard-frame.light-theme .dash-stat-value.teal { color: #0097a7; }
.dashboard-frame.light-theme .dash-stat-value.blue { color: #1565c0; }
.dashboard-frame.light-theme .dash-stat-value.purple { color: #7b1fa2; }

.dashboard-frame.light-theme .dash-stat-bar {
    background: #e8eaf0;
}

.dashboard-frame.light-theme .dash-stat-change {
    color: #888;
}

.dashboard-frame.light-theme .dash-stat-change.up {
    color: #2e7d32;
}

.dashboard-frame.light-theme .dash-chart-area {
    background: white;
    border-color: #e0e0e0;
}

.dashboard-frame.light-theme .dash-chart-header span {
    color: #333;
}

.dashboard-frame.light-theme .chart-tab {
    color: #999;
    background: #f0f0f0;
}

.dashboard-frame.light-theme .chart-tab.active {
    background: #1565c0;
    color: white;
}

.dashboard-frame.light-theme .dash-bar {
    background: rgba(21, 101, 192, 0.2);
}

.dashboard-frame.light-theme .dash-bar.active {
    background: #1565c0;
}

.dashboard-frame.light-theme .dash-chart-labels span {
    color: #999;
}

.dashboard-frame.light-theme .dash-focus-panel {
    background: white;
    border-color: #e0e0e0;
}

.dashboard-frame.light-theme .focus-title {
    color: #333;
}

.dashboard-frame.light-theme .focus-time {
    color: #1565c0;
}

.dashboard-frame.light-theme .focus-label {
    color: #888;
}

.dashboard-frame.light-theme .severity-labels .severity-label {
    color: #888;
}

.dashboard-frame.light-theme .dash-alert-item {
    background: white;
    border: 1px solid #eee;
    color: #555;
}

.dashboard-frame.light-theme .dash-alert-text {
    color: #444;
}

.dashboard-frame.light-theme .dash-alert-time {
    color: #bbb;
}

.dashboard-frame.light-theme .dash-right {
    background: #f5f7fa;
    border-left: 1px solid #e0e0e0;
}

.dashboard-frame.light-theme .dash-right-panel {
    background: white;
    border-color: rgba(21, 101, 192, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.dashboard-frame.light-theme .dash-right-insights {
    border-color: rgba(21, 101, 192, 0.15);
}

.dashboard-frame.light-theme .dash-panel-title {
    color: #333;
}

.dashboard-frame.light-theme .dash-agent {
    background: #f8f9fb;
    border: 1px solid #eee;
}

.dashboard-frame.light-theme .agent-name {
    color: #333;
}

.dashboard-frame.light-theme .agent-task {
    color: #888;
}

.dashboard-frame.light-theme .agent-badge {
    background: rgba(21, 101, 192, 0.1);
    color: #1565c0;
}

.dashboard-frame.light-theme .agent-badge.idle {
    background: rgba(255, 152, 0, 0.1);
    color: #e65100;
}

.dashboard-frame.light-theme .insight-row {
    color: #888;
    border-bottom-color: #eee;
}

.dashboard-frame.light-theme .insight-val {
    color: #333;
}

.dashboard-frame.light-theme .insight-val.teal {
    color: #0097a7;
}

.dashboard-frame.light-theme .insight-unit {
    color: #aaa;
}

/* ============================================
   ZOO PAGE
   ============================================ */

/* Animal story cards — alternating image/text layout */
.zoo-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 80px;
    padding: 48px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    backdrop-filter: blur(12px);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.zoo-card:hover {
    border-color: rgba(0, 204, 255, 0.15);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.3);
}

.zoo-card:last-child {
    margin-bottom: 0;
}

.zoo-card-reverse {
    grid-template-columns: 1fr 280px;
}

.zoo-card-reverse .zoo-card-image {
    order: 2;
}

.zoo-card-reverse .zoo-card-content {
    order: 1;
}

.zoo-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoo-animal {
    width: 220px;
    height: auto;
    filter: drop-shadow(0 0 30px rgba(0, 204, 255, 0.2));
    transition: transform 0.4s, filter 0.4s;
}

.zoo-card:hover .zoo-animal {
    transform: scale(1.05);
    filter: drop-shadow(0 0 40px rgba(0, 204, 255, 0.35));
}

.zoo-card-label {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
}

.zoo-card-label.teal {
    background: rgba(0, 204, 255, 0.1);
    color: var(--teal);
}

.zoo-card-label.blue {
    background: rgba(119, 51, 255, 0.1);
    color: var(--blue);
}

.zoo-card-label.purple {
    background: rgba(255, 51, 170, 0.1);
    color: var(--purple);
}

.zoo-card-label.orange {
    background: rgba(255, 85, 68, 0.1);
    color: var(--orange);
}

.zoo-card-content h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.zoo-card-ref {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    font-weight: 500;
}

.zoo-card-content p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}

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

/* Philosophy grid — small cards with animal thumbnails */
.zoo-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.zoo-philosophy-card {
    text-align: center;
    padding: 32px 24px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    backdrop-filter: blur(12px);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.zoo-philosophy-card:hover {
    border-color: rgba(0, 204, 255, 0.15);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
}

.zoo-philosophy-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(0, 204, 255, 0.2));
}

.zoo-philosophy-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.zoo-philosophy-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ── Zoo page responsive ── */
@media (max-width: 1024px) {
    .zoo-philosophy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .zoo-card {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px;
        text-align: center;
    }

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

    .zoo-card-reverse .zoo-card-image {
        order: 0;
    }

    .zoo-card-reverse .zoo-card-content {
        order: 0;
    }

    .zoo-animal {
        width: 160px;
    }

    .zoo-card-content h3 {
        font-size: 1.4rem;
    }

    .zoo-philosophy-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   VISUAL EFFECTS
   ============================================ */

/* ── 1. Animated Gradient Borders ── */
@keyframes gradient-border-spin {
    to { --border-angle: 360deg; }
}

.bento-card-inner::before,
.pricing-card-inner::before,
.module-card::before,
.zoo-card::before,
.zoo-philosophy-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--border-radius) + 1px);
    background: conic-gradient(
        from var(--border-angle),
        transparent 40%,
        rgba(0, 204, 255, 0.4) 50%,
        rgba(119, 51, 255, 0.4) 55%,
        transparent 65%
    );
    z-index: -1;
    opacity: 0;
    animation: gradient-border-spin 4s linear infinite;
    transition: opacity 0.4s;
}

.bento-card-inner:hover::before,
.pricing-card-inner:hover::before,
.module-card:hover::before,
.zoo-card:hover::before,
.zoo-philosophy-card:hover::before {
    opacity: 1;
}

/* Override bento-card overflow so gradient border is visible */
.bento-card {
    overflow: visible;
}

/* ── 2. 3D Card Tilt + Shine ── */
.bento-grid,
.pricing-grid,
.module-grid,
.zoo-philosophy-grid {
    perspective: 800px;
}

.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
}

.tilt-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 255, 255, 0.08) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
}

.tilt-card:hover .tilt-shine {
    opacity: 1;
}

/* ── Hero Logo ── */
.hero-logo {
    width: 200px;
    height: 200px;
    object-fit: contain;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 30px rgba(0, 204, 255, 0.3));
}

/* ── Hero Flanking Logos ── */
.hero-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: nowrap;
}

.hero-title-row .hero-title {
    flex: 1 1 0;
    min-width: 0;
}

.hero-flank-logo {
    width: 320px;
    height: 320px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0, 204, 255, 0.25));
    opacity: 0.85;
    flex-shrink: 0;
}

.hero-flank-left {
    animation: float-left 6s ease-in-out infinite;
}

.hero-flank-right {
    animation: float-right 6s ease-in-out infinite;
}

@keyframes float-left {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes float-right {
    0%, 100% { transform: translateY(-5px) rotate(2deg); }
    50% { transform: translateY(5px) rotate(-2deg); }
}

@media (max-width: 1024px) {
    .hero-title-row {
        margin-left: 0;
        margin-right: 0;
    }
    .hero-flank-logo {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .hero-flank-logo {
        display: none;
    }
    .hero-title-row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ── 3. (reserved) ── */

/* ── 4. Cursor Spotlight ── */
.cursor-spotlight {
    position: relative;
}

.cursor-spotlight-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 204, 255, 0.06) 0%, transparent 70%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s;
}

.cursor-spotlight:hover .cursor-spotlight-glow {
    opacity: 1;
}

/* ── 5. Magnetic Buttons ── */
.magnetic-btn {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================
   GRCxAI ADDITIONS
   Everything above this line is the DigitalZoo
   design system, unmodified. Everything below
   adds what the GRCxAI menu and content need.
   ============================================ */

/* ── Nav dropdowns (DigitalZoo has none — GRCxAI needs 2) ── */
.nav-links {
    align-items: center;
    gap: 28px;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nav-dropdown > a::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    opacity: 0.55;
    transition: transform 0.25s, opacity 0.2s;
}

.nav-dropdown:hover > a::after,
.nav-dropdown:focus-within > a::after {
    transform: rotate(-135deg) translate(-2px, -2px);
    opacity: 1;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    margin-top: 14px;
    min-width: 260px;
    padding: 10px;
    background: rgba(8, 8, 24, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(0, 204, 255, 0.05),
                0 0 40px rgba(0, 204, 255, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
    z-index: 1001;
}

/* Hover bridge so the pointer can cross the gap without the menu closing */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 20px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: 9px 14px;
    border-radius: var(--border-radius-xs);
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, padding-left 0.18s;
}

.nav-dropdown-menu a:hover {
    background: rgba(0, 204, 255, 0.08);
    color: var(--text-primary);
    padding-left: 18px;
}

.nav-dropdown-menu .dropdown-divider {
    height: 1px;
    margin: 8px 6px;
    background: rgba(255, 255, 255, 0.07);
}

.nav-dropdown-menu .dropdown-label {
    padding: 8px 14px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.nav-links a.active {
    color: var(--text-primary);
}

.nav-links a.active::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--teal), var(--blue));
}

.nav-links > a {
    position: relative;
}

/* ── Mobile slide-in panel ──
   DigitalZoo's mobile button just toggles display on the desktop row.
   That works for 6 short links; it breaks with dropdowns. Real panel: */
.mobile-panel {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    background: rgba(5, 5, 16, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mobile-panel.open {
    display: block;
    animation: mobilePanelIn 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.mobile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    position: sticky;
    top: 0;
    background: rgba(5, 5, 16, 0.98);
    z-index: 1;
}

.mobile-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    transition: border-color 0.2s, background 0.2s;
}

.mobile-panel-close:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
}

.mobile-panel-links {
    padding: 12px 16px 40px;
}

.mobile-panel-links > a,
.mobile-acc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 12px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: color 0.2s;
}

.mobile-panel-links > a:hover,
.mobile-acc-toggle:hover {
    color: var(--teal);
}

.mobile-acc-toggle::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.5;
    transition: transform 0.28s, opacity 0.2s;
}

.mobile-acc.open .mobile-acc-toggle::after {
    transform: rotate(-135deg);
    opacity: 1;
}

.mobile-acc.open .mobile-acc-toggle {
    color: var(--teal);
}

.mobile-acc-menu {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-acc.open .mobile-acc-menu {
    grid-template-rows: 1fr;
}

.mobile-acc-menu-inner {
    overflow: hidden;
}

.mobile-acc-menu a {
    display: block;
    padding: 13px 12px 13px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.92rem;
    color: var(--text-secondary);
    transition: color 0.2s, padding-left 0.2s;
}

.mobile-acc-menu a:hover {
    color: var(--text-primary);
    padding-left: 32px;
}

.mobile-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 12px 0;
}

.mobile-panel-actions .btn-primary,
.mobile-panel-actions .btn-ghost {
    justify-content: center;
    padding: 15px 24px;
    font-size: 1rem;
}

body.menu-open {
    overflow: hidden;
}

/* GRCxAI's nav is denser than DigitalZoo's (6 items + 2 dropdowns + 2 CTAs),
   so it needs to collapse earlier than the base 768px breakpoint. */
@media (max-width: 968px) {
    .nav-links,
    .nav-actions {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }
}

@media (min-width: 969px) {
    .mobile-panel {
        display: none !important;
    }
}

/* Tighten nav spacing in the band just above the breakpoint */
@media (max-width: 1180px) and (min-width: 969px) {
    .nav-links {
        gap: 18px;
    }

    .nav-links a {
        font-size: 0.82rem;
    }

    .nav-actions .btn-primary,
    .nav-actions .btn-ghost {
        padding: 9px 16px;
        font-size: 0.8rem;
    }
}

/* ── FAQ accordion (DigitalZoo has none) ── */
.faq-list {
    max-width: 860px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.25s, background 0.25s;
}

.faq-item:hover {
    border-color: rgba(0, 204, 255, 0.22);
}

.faq-item.open {
    border-color: rgba(0, 204, 255, 0.3);
    background: var(--bg-card-hover);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.faq-question::after {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faq-item.open .faq-question::after {
    transform: rotate(-135deg) translateY(-2px);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer-inner {
    overflow: hidden;
}

.faq-answer p {
    padding: 0 24px 22px;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.94rem;
}

.faq-answer p + p {
    padding-top: 12px;
}

/* ── Data tables: sticky header, sticky first column, INTERNAL scroll ──
   Comparison tables and the feature matrix must never stretch the page.
   No overflow:hidden ancestor, or sticky silently stops working. */
.data-table-wrap {
    position: relative;
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius-sm);
    background: rgba(8, 8, 22, 0.6);
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.86rem;
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 14px 16px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: #0d0d22;
    border-bottom: 2px solid rgba(0, 204, 255, 0.28);
    white-space: nowrap;
}

.data-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    padding: 13px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--text-primary);
    background: #0a0a1c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.data-table thead th:first-child {
    left: 0;
    z-index: 4;
    background: #0d0d22;
}

.data-table td {
    padding: 13px 16px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: top;
}

.data-table tbody tr:hover td,
.data-table tbody tr:hover th {
    background: rgba(0, 204, 255, 0.045);
}

.data-table .col-us {
    background: rgba(0, 204, 255, 0.05);
    color: var(--text-primary);
}

.data-table tbody tr:hover .col-us {
    background: rgba(0, 204, 255, 0.1);
}

/* Group header row inside a long table */
.data-table tr.group-row th,
.data-table tr.group-row td {
    position: static;
    padding: 16px;
    background: rgba(119, 51, 255, 0.1);
    color: var(--text-primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(119, 51, 255, 0.25);
}

/* Yes / no / partial markers */
.mk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.mk-yes {
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
}

.mk-no {
    background: rgba(255, 85, 68, 0.15);
    color: #ff7766;
}

.mk-partial {
    background: rgba(255, 179, 71, 0.15);
    color: #ffb347;
}

.table-note {
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Where a comparison table's claims come from ──
   This was one run-on paragraph carrying five unrelated facts: the row count,
   the research date, the re-check date, two symbol keys and a pricing caveat.
   Split into labelled lines so a reader can find the one they want. */
/* Sized down to sit under an 11px table: supporting notes must not out-shout
   the data they annotate. Set on the block so the note variant inherits it
   rather than falling back to the 1rem body size. */
.table-basis {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--surface-2, #f6f8fc);
    border: 1px solid var(--line-soft, #e4e8f0);
    border-radius: 10px;
    /* px, not rem: the table this annotates sets its cells in px (11.5px), and
       the root font-size is whatever the visitor's browser says — 26px on a
       large-text setup, which turned 0.76rem into a 19.8px note shouting over
       an 11.5px table. Matching the component keeps the pairing correct. */
    font-size: 12px;
    line-height: 1.55;
}

.table-basis-h {
    margin: 0 0 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft, #444d68);
}

.table-basis ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.table-basis li {
    position: relative;
    padding-left: 14px;
    color: var(--text-muted);
}

/* The G-Cloud citation is a single paragraph, not a list — same card, same
   type size, so it reads as a footnote rather than a second headline. */
.table-basis-note {
    margin-top: 10px;
}

.table-basis-note b {
    color: var(--ink, #10162b);
}

.table-basis li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand, #2f5fd8);
    opacity: 0.5;
}

.table-basis b {
    color: var(--ink, #10162b);
    font-weight: 650;
}

.table-basis .key {
    display: inline-block;
    min-width: 1.1em;
    font-weight: 700;
    color: var(--ink, #10162b);
}

/* ── Long-form prose (MSA, privacy, blog posts) ── */
.prose-wrap {
    max-width: 820px;
    margin: 0 auto;
}

.prose {
    color: var(--text-secondary);
    line-height: 1.78;
    font-size: 1rem;
}

.prose h2 {
    margin: 48px 0 16px;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    scroll-margin-top: 100px;
}

.prose h3 {
    margin: 32px 0 12px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    scroll-margin-top: 100px;
}

.prose h2:first-child,
.prose h3:first-child {
    margin-top: 0;
}

.prose p {
    margin: 0 0 18px;
}

.prose ul,
.prose ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.prose li {
    margin-bottom: 9px;
}

.prose li::marker {
    color: var(--teal);
}

.prose strong {
    color: var(--text-primary);
    font-weight: 600;
}

.prose a {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

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

.prose blockquote {
    margin: 24px 0;
    padding: 16px 24px;
    border-left: 3px solid var(--teal);
    background: rgba(0, 204, 255, 0.04);
    border-radius: 0 var(--border-radius-xs) var(--border-radius-xs) 0;
    color: var(--text-secondary);
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

.prose code {
    padding: 2px 6px;
    background: rgba(0, 204, 255, 0.09);
    border-radius: 4px;
    font-size: 0.88em;
    color: var(--teal);
}

.prose hr {
    margin: 40px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Legal document chrome */
.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.doc-meta-item {
    padding: 6px 14px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: 100px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.doc-meta-item strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.doc-toc {
    padding: 24px 28px;
    margin-bottom: 40px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius-sm);
}

.doc-toc h4 {
    margin: 0 0 14px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.doc-toc ol {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 32px;
}

.doc-toc li {
    margin-bottom: 7px;
    break-inside: avoid;
}

.doc-toc a {
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.doc-toc a:hover {
    color: var(--teal);
}

@media (max-width: 600px) {
    .doc-toc ol {
        columns: 1;
    }
}

/* ── Interior page hero (shorter than the homepage's full-viewport hero) ── */
.page-hero {
    position: relative;
    padding: 170px 0 70px;
    overflow: hidden;
    background: var(--bg-primary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.page-hero .container {
    position: relative;
    z-index: 2;
}

.page-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    margin-bottom: 22px;
    background: rgba(0, 204, 255, 0.08);
    border: 1px solid rgba(0, 204, 255, 0.2);
    border-radius: 100px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--teal);
}

.page-hero h1 {
    max-width: 900px;
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin: 0 0 20px;
}

.page-hero-sub {
    max-width: 720px;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
}

.page-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

/* Breadcrumbs */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.breadcrumb a {
    color: var(--text-muted);
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--teal);
}

.breadcrumb span[aria-current] {
    color: var(--text-secondary);
}

/* ── Legal documents (MSA + archives) ──
   The source documents carry their own semantic classes (.clause, .num,
   .body, .sub-clause, .marker, .def, .term, .meaning …). The markup is
   ported verbatim so the legal wording is untouched; only these styles
   change to suit the dark theme. */
.legal-doc {
    /* 1160px: matches the widest element on these pages (the feature tables)
       so prose, headings, cards and tables all share one left edge. Kept in
       sync with .wh-inner.solo so the hero aligns with the body copy too. */
    max-width: 1160px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 0.97rem;
    line-height: 1.75;
}

.legal-doc .cover {
    padding: 36px 32px;
    margin-bottom: 36px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
}

/* The document's own cover title is an h2 (the page h1 sits above it, and one
   page gets one h1). Reset the clause-heading rule's rule-off and spacing —
   this is a cover, not a numbered clause. */
.legal-doc .cover h1,
.legal-doc .cover h2 {
    margin: 14px 0 10px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.legal-doc .brand {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.legal-doc .registry {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.legal-doc .product {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--teal), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.legal-doc .tagline {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.legal-doc .metadata,
.legal-doc .notice,
.legal-doc .important-callout {
    padding: 22px 26px;
    margin-bottom: 28px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius-sm);
}

.legal-doc .important-callout {
    border-left: 3px solid var(--teal);
    background: rgba(0, 204, 255, 0.045);
}

.legal-doc .metadata dl {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: 8px 20px;
    margin: 0;
}

.legal-doc .metadata dt {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.legal-doc .metadata dd {
    margin: 0;
    color: var(--text-secondary);
}

.legal-doc h2 {
    margin: 46px 0 18px;
    padding-bottom: 10px;
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(0, 204, 255, 0.18);
    scroll-margin-top: 100px;
}

.legal-doc h3 {
    margin: 30px 0 12px;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text-primary);
    scroll-margin-top: 100px;
}

.legal-doc p {
    margin: 0 0 14px;
}

/* Numbered clauses: hanging number, indented body */
.legal-doc .clause,
.legal-doc .sub-clause {
    display: grid;
    grid-template-columns: minmax(46px, auto) 1fr;
    gap: 4px 14px;
    margin-bottom: 14px;
    scroll-margin-top: 100px;
}

.legal-doc .sub-clause {
    grid-template-columns: minmax(34px, auto) 1fr;
    margin-left: 22px;
}

.legal-doc .num,
.legal-doc .marker {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--teal);
}

.legal-doc .clause > .body,
.legal-doc .sub-clause > .body {
    margin: 0;
}

/* Definitions list */
.legal-doc .definitions {
    padding: 24px 26px;
    margin: 20px 0 28px;
    background: rgba(8, 8, 24, 0.55);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius-sm);
}

.legal-doc .def {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-doc .def:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.legal-doc .term {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--text-primary);
}

.legal-doc .meaning {
    margin: 0;
}

.legal-doc .schedule-divider {
    margin: 56px 0 32px;
    padding: 18px 24px;
    text-align: center;
    background: rgba(119, 51, 255, 0.09);
    border: 1px solid rgba(119, 51, 255, 0.25);
    border-radius: var(--border-radius-sm);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.legal-doc table {
    width: 100%;
    margin: 22px 0;
    border-collapse: collapse;
    font-size: 0.88rem;
}

/* NOTE: tables deliberately do NOT break out of the text column. An earlier
   revision widened only .data-table-wrap, which left the prose at 860px and
   the table at 1160px — two different left edges down the same page. The
   whole document column is 1160px instead, so text and tables share an edge. */

.legal-doc th {
    padding: 11px 14px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: rgba(0, 204, 255, 0.07);
    border-bottom: 2px solid rgba(0, 204, 255, 0.22);
}

.legal-doc td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: top;
}

.legal-doc a {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-doc a:hover {
    color: var(--text-primary);
}

.legal-doc strong {
    color: var(--text-primary);
    font-weight: 650;
}

.legal-doc ul,
.legal-doc ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.legal-doc li {
    margin-bottom: 8px;
}

.legal-doc li::marker {
    color: var(--teal);
}

/* Inline conspicuous-notice highlight — this sits mid-sentence, so it must
   stay an inline box: vertical padding/margin on an inline element overflows
   the line box instead of reserving space. Clone the decoration so a wrap
   paints a clean highlight on every fragment. */
.legal-doc .disclaimer-strong {
    padding: 0.1em 0.35em;
    font-weight: 600;
    background: rgba(255, 85, 68, 0.12);
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: var(--text-primary);
}

.legal-doc .doc-footer {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.legal-doc .label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Legal docs are long — let the whole document breathe on small screens */
@media (max-width: 600px) {
    .legal-doc .clause,
    .legal-doc .sub-clause {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .legal-doc .sub-clause {
        margin-left: 12px;
    }

    .legal-doc .metadata dl {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .legal-doc .metadata dd {
        margin-bottom: 12px;
    }
}

/* ============================================
   PROVISION 29 ASSESSMENT WIZARD
   provision-29-assessment.js is ported verbatim, so these class names
   are fixed by that script — it generates the wizard markup at runtime.
   Changing a name here breaks the tool silently.
   ============================================ */
.assessment-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Base .btn — the wizard's generated buttons use it */
.legal-doc .btn,
.assessment-container .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 100px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.btn-wizard-next,
.btn-submit-assessment {
    background: linear-gradient(135deg, #00ccff, #7733ff);
    color: #050510;
    border: none;
}

.btn-wizard-next:hover:not(:disabled),
.btn-submit-assessment:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 30px rgba(0, 204, 255, 0.3);
    filter: brightness(1.08);
}

.btn-wizard-next:disabled,
.btn-submit-assessment:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-wizard-prev {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.btn-wizard-prev:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.04);
}

/* ── Progress ── */
.progress-wrapper {
    padding: 24px 28px;
    margin-bottom: 28px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius-sm);
}

.progress-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    font-size: 0.88rem;
}

#progress-label {
    font-weight: 650;
    color: var(--text-primary);
}

#progress-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.progress-track {
    height: 6px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--teal), var(--blue));
    transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.progress-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.progress-step {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border-radius: var(--border-radius-xs);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.progress-step.active {
    background: rgba(0, 204, 255, 0.12);
    border-color: rgba(0, 204, 255, 0.3);
    color: var(--teal);
}

/* The script adds .completed (not .complete) — match it exactly. */
.progress-step.completed {
    background: rgba(45, 212, 191, 0.1);
    color: #2dd4bf;
}

/* ── Sections & questions ── */
.assessment-section {
    display: none;
}

.assessment-section.active {
    display: block;
    animation: fadeUp 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.section-intro {
    padding: 22px 26px;
    margin-bottom: 26px;
    background: rgba(0, 204, 255, 0.05);
    border: 1px solid rgba(0, 204, 255, 0.16);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    line-height: 1.7;
}

.section-intro h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.question-block {
    padding: 26px 28px;
    margin-bottom: 18px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius-sm);
}

.question-number {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--teal);
}

.question-text {
    margin: 0 0 20px;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--text-primary);
}

/* ── Answer cards ── */
.answer-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.answer-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.answer-card:hover {
    border-color: rgba(0, 204, 255, 0.32);
    background: rgba(0, 204, 255, 0.04);
}

.answer-card.selected {
    border-color: var(--teal);
    background: rgba(0, 204, 255, 0.09);
}

.answer-indicator {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    transition: border-color 0.2s, background 0.2s;
}

.answer-card.selected .answer-indicator {
    border-color: var(--teal);
    background: var(--teal);
}

.answer-dot,
.answer-check {
    opacity: 0;
    transition: opacity 0.2s;
}

.answer-card.selected .answer-dot,
.answer-card.selected .answer-check {
    opacity: 1;
}

.answer-check {
    color: #050510;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

.answer-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #050510;
}

.answer-content {
    min-width: 0;
}

.answer-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.answer-desc {
    display: block;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ── Wizard nav ── */
.wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 22px;
    margin-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Email capture ── */
.email-capture,
.results-section {
    display: none;
}

.email-capture.active,
.results-section.active {
    display: block;
    animation: fadeUp 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.capture-card {
    padding: 30px 32px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
}

.capture-card h3 {
    margin: 0 0 8px;
    font-size: 1.35rem;
    color: var(--text-primary);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 22px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--border-radius-xs);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s;
}

.form-group input::placeholder {
    color: rgba(200, 215, 235, 0.35);
}

.form-group input:focus {
    outline: none;
    border-color: var(--teal);
    background: rgba(0, 204, 255, 0.05);
}

#email-error {
    display: none;
    margin-top: 8px;
    font-size: 0.84rem;
    color: #ff7766;
}

#email-error.visible {
    display: block;
}

/* ── Results ── */
.results-hero-card {
    padding: 40px 32px;
    margin-bottom: 32px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius);
    box-shadow: 0 0 60px rgba(0, 204, 255, 0.08);
}

.results-score {
    font-size: clamp(3rem, 8vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--teal), var(--blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.results-max {
    font-size: 0.36em;
    font-weight: 600;
    -webkit-text-fill-color: var(--text-muted);
    color: var(--text-muted);
}

.results-band {
    margin-top: 14px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.results-band-desc {
    max-width: 560px;
    margin: 10px auto 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.section-scores-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
}

/* Structure fixed by the script:
   .section-score-row > [ .section-score-label , .section-score-bar-wrapper >
   [ .section-score-bar-track > .section-score-bar-fill , .section-score-value ] ] */
.section-score-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 2fr;
    align-items: center;
    gap: 20px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius-sm);
}

.section-score-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-score-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.section-score-bar-track {
    flex: 1;
    min-width: 0;
    height: 8px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.section-score-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--teal), var(--blue));
    transition: width 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Per-section band, set by the script as green / amber / red */
.section-score-bar-fill.green {
    background: linear-gradient(90deg, #2dd4bf, #00ccff);
}

.section-score-bar-fill.amber {
    background: linear-gradient(90deg, #ffb347, #ff8c42);
}

.section-score-bar-fill.red {
    background: linear-gradient(90deg, #ff7766, #ff5544);
}

.section-score-value {
    flex-shrink: 0;
    min-width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.gaps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}

.gap-item {
    padding: 18px 22px;
    background: rgba(255, 85, 68, 0.055);
    border: 1px solid rgba(255, 85, 68, 0.2);
    border-left: 3px solid #ff5544;
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    line-height: 1.65;
}

.gap-item strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-primary);
}

.report-notice {
    margin-top: 18px;
    font-size: 0.84rem;
    color: var(--text-muted);
    text-align: center;
}

.spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(5, 5, 16, 0.25);
    border-top-color: #050510;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

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

    .section-score-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wizard-nav .btn {
        flex: 1 1 100%;
    }

    .progress-step {
        flex: 1 1 30%;
        font-size: 0.66rem;
    }
}

/* ── Feature matrix: collapsible groups ──
   The original page was one long scroll of 15 tables. Collapsing by default
   keeps the page navigable; each table still scrolls inside its own wrap. */
.matrix-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
}

.matrix-group {
    background: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    transition: border-color 0.25s;
}

.matrix-group:hover {
    border-color: rgba(0, 204, 255, 0.22);
}

.matrix-group.open {
    border-color: rgba(0, 204, 255, 0.3);
}

.matrix-group-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.matrix-group-title {
    flex: 1;
    min-width: 0;
}

.matrix-group-count {
    flex-shrink: 0;
    padding: 3px 11px;
    background: rgba(0, 204, 255, 0.12);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--teal);
}

.matrix-group-toggle::after {
    content: '';
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.matrix-group.open .matrix-group-toggle::after {
    transform: rotate(-135deg) translateY(-2px);
}

.matrix-group-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.matrix-group.open .matrix-group-panel {
    grid-template-rows: 1fr;
}

.matrix-group-panel-inner {
    overflow: hidden;
}

.matrix-group-panel .data-table-wrap {
    max-height: 60vh;
    margin: 0 18px 18px;
    border-radius: var(--border-radius-xs);
}

/* ── FIX: hero subtitle clipped at narrow widths ──
   The base rule is `.hero-subtitle { width:130%; margin-left:-15% }` — a
   desktop trick letting the subtitle run wider than its column. With a long
   subtitle that 15% overhang crosses the viewport edge, and the hero's
   overflow:hidden silently cuts the words off. Measured clipping at 375px
   (left -3px) and 768px (left -33px, right +16px). Cancel it below desktop. */
@media (max-width: 1024px) {
    .hero-subtitle {
        width: 100%;
        margin-left: 0;
    }
}

/* Very narrow: the hero needs real side padding so nothing touches the edge */
@media (max-width: 480px) {
    .hero-content {
        padding: 0 20px;
        max-width: 100%;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .page-hero {
        padding: 140px 0 56px;
    }
}

/* ── FIX: dashboard mock internals overflow at phone widths ──
   The base theme hides the sidebar and right panel at ≤768px but leaves the
   stat cards and chart row multi-column, so their labels ("Frameworks
   Active") ran past the viewport and were clipped by the hero. */
@media (max-width: 600px) {
    .dash-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .dash-bottom-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dash-main {
        padding: 14px;
    }

    .severity-labels {
        flex-wrap: wrap;
        gap: 6px 14px;
    }

    .dash-alert-item {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .dash-alert-text {
        flex: 1 1 100%;
        order: 3;
    }

    .dash-chart-labels {
        font-size: 0.6rem;
    }
}

/* ── FIX: grid/flex children refusing to shrink below min-content ──
   A grid item defaults to `min-width: auto`, so it will not shrink below its
   content's min-content width — the track then computes WIDER than the grid
   itself and the content overflows the viewport. Measured on features/tprm.html
   at 375px: .feature-row was 290px wide with a 499px column.
   `min-width: 0` is the horizontal counterpart of the `min-height: 0` rule for
   scrolling flex children. */
.feature-row > *,
.feature-text,
.feature-visual,
.module-showcase > *,
.platform-grid > *,
.role-grid > *,
.pain-grid > *,
.bento-grid > *,
.fw-visual-grid > *,
.integration-grid > *,
.beliefs-grid > *,
.stats-grid > *,
.pricing-grid > * {
    min-width: 0;
}

/* Long tokens (URLs, code, hyphen-free compounds) must break rather than
   push a column wide. */
.feature-text,
.module-card,
.platform-card,
.role-card,
.pain-card,
.prose,
.legal-doc,
.faq-answer {
    overflow-wrap: break-word;
}

/* Mock cards are decorative desktop UI — let them scroll rather than stretch */
@media (max-width: 700px) {
    .feature-mock-card {
        overflow-x: auto;
    }

    .fmc-stats-row {
        gap: 10px;
    }
}

/* ── FIX: wide tables inside verbatim-ported legal documents ──
   The MSA markup is ported unchanged, so its tables cannot be wrapped in a
   scroll container. Making the table itself a scrollable block achieves the
   same thing without touching the document markup. */
@media (max-width: 760px) {
    .legal-doc table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .legal-doc table tbody,
    .legal-doc table thead {
        display: table;
        width: 100%;
        min-width: 520px;
    }
}

/* ── FIX: decorative glows escaping their sections ──
   .hero-glow and .cta-glow are 400–600px absolutely-positioned blurs. On a
   narrow viewport they extend past the section box and add page scroll.
   `overflow-x: clip` contains them WITHOUT creating a scroll container, so
   the sticky table headers inside .data-table-wrap keep working
   (`overflow: hidden` would break them). */
.cta-section,
.page-hero,
.deep-features,
.features-section,
.narrative-section,
.pricing-section,
.stats-section {
    overflow-x: clip;
}

/* ⚠️ DO NOT add `overflow-x: clip/hidden` to html or body.
   Per spec, when one axis is clip/hidden the other axis's `visible` computes
   to `auto` — which makes <body> the scroll container instead of the document.
   That silently kills every window scroll listener on the site: the starfield
   stops painting, scroll-reveal never fires, counters never animate, lazy
   images never load and the nav never gains .scrolled. Verified by breaking
   it exactly this way on 2026-08-11.
   The per-section `overflow-x: clip` rules above already contain the glows. */

/* ── FIX: tables inside ported article prose ──
   Blog articles are ported verbatim, so their tables cannot be wrapped.
   Same treatment as the legal documents. */
@media (max-width: 760px) {
    .prose table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .prose table thead,
    .prose table tbody {
        display: table;
        width: 100%;
        min-width: 480px;
    }
}

/* ═══════════════════════════════════════════════════════════
   LIGHT SURFACE LAYER
   The site opens dark (hero + product mock) then transitions to
   a light, spacious body — clean cards, generous whitespace, one
   clear action per card. Everything below is the light half.
   ═══════════════════════════════════════════════════════════ */
:root {
    --ink: #10162b;
    --ink-soft: #444d68;
    --ink-mute: #5d6782;
    --line: #e3e7ef;
    --line-soft: #eef1f6;
    --surface: #ffffff;
    --surface-tint: #f5f8fd;
    --surface-blue: #e9f1fc;
    --brand: #2f5fd8;
    --brand-dark: #234ab0;
    --brand-soft: #eaf0fe;
}

/* ── The transition: dark hero melts into the light body ── */
.fade-to-light {
    height: 220px;
    margin-top: -1px;
    background: linear-gradient(to bottom,
        #050510 0%,
        #0a1024 26%,
        #1c2b52 52%,
        #7d8fc4 78%,
        var(--surface) 100%);
}

/* ── Light sections ── */
.light {
    background: var(--surface);
    color: var(--ink);
    padding: 96px 0;
}

.light.tint {
    background: var(--surface-tint);
}

.light.blue {
    background: var(--surface-blue);
}

.light .container {
    max-width: min(1320px, 92vw);
    margin: 0 auto;
    padding: 0 24px;
}

.light h2 {
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0 0 16px;
}

.light h3 {
    font-size: 1.3rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 10px;
}

.light p {
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 0 0 16px;
}

.light .lead {
    font-size: 1.15rem;
    max-width: 720px;
}

.light-head {
    margin-bottom: 52px;
}

.light-head.centred {
    text-align: center;
}

.light-head.centred .lead {
    margin-left: auto;
    margin-right: auto;
}

.light-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand);
}

/* ── The 4-wide card row ── */
.card-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

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

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

.pcard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.pcard:hover {
    transform: translateY(-3px);
    border-color: #cdd6e6;
    box-shadow: 0 12px 32px rgba(16, 22, 43, 0.1);
}

.light.tint .pcard,
.light.blue .pcard {
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(16, 22, 43, 0.06);
}

.pcard-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-tint);
}

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

.pcard-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 26px;
}

.pcard-body h3 {
    margin-bottom: 10px;
}

.pcard-body p {
    font-size: 0.95rem;
    margin-bottom: 22px;
}

/* Button pinned to the bottom so a row of cards aligns */
.pcard-body .btn-ms {
    margin-top: auto;
    align-self: flex-start;
}

/* ── Buttons on light ── */
.btn-ms {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.btn-ms:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.btn-ms-ghost {
    background: transparent;
    color: var(--brand);
    border-color: #c3d0ea;
}

.btn-ms-ghost:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-dark);
}

/* Quiet inline link with a chevron, as used under MS heroes */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}

.link-arrow::after {
    content: '›';
    font-size: 1.25em;
    line-height: 1;
    transition: transform 0.2s;
}

.link-arrow:hover {
    color: var(--brand-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-arrow:hover::after {
    transform: translateX(3px);
}

/* ── Floating quick-link cards, overlapping the hero fade ──
   Replaces a row of plain underlined links, which read as an
   afterthought. These sit on the seam between dark and light. */
/* White band the cards sit on, so no dark body shows through
   between the hero fade and the first light section. */
.quicklinks-band {
    background: var(--surface);
}

/* Spacing above the cards is padding, not margin: the band has no padding or
   border of its own, so a top margin would collapse through it and drag the
   white band down off the fade, exposing a strip of the dark hero. */
.quicklinks {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: min(1320px, 92vw);
    margin: 0 auto;
    padding: 56px 24px 0;
}

.quicklink {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 24px 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(10, 16, 36, 0.16);
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.quicklink:hover {
    transform: translateY(-4px);
    border-color: #c6d2ea;
    box-shadow: 0 24px 56px rgba(10, 16, 36, 0.2);
}

.ql-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eaf0fe, #dbe6fb);
}

.ql-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--brand);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quicklink:nth-child(2) .ql-icon { background: linear-gradient(135deg, #e6f7f3, #d3f0e8); }
.quicklink:nth-child(2) .ql-icon svg { stroke: #0d9488; }
.quicklink:nth-child(3) .ql-icon { background: linear-gradient(135deg, #f1ecfe, #e6dcfd); }
.quicklink:nth-child(3) .ql-icon svg { stroke: #7c3aed; }
.quicklink:nth-child(4) .ql-icon { background: linear-gradient(135deg, #fef3e2, #fde8cc); }
.quicklink:nth-child(4) .ql-icon svg { stroke: #d97706; }

.ql-body {
    min-width: 0;
}

.ql-title {
    display: block;
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: 5px;
}

.ql-desc {
    display: block;
    font-size: 0.87rem;
    line-height: 1.5;
    color: var(--ink-mute);
}

.ql-go {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--brand);
}

.ql-go::after {
    content: '\2192';
    transition: transform 0.2s;
}

.quicklink:hover .ql-go::after {
    transform: translateX(4px);
}

@media (max-width: 1100px) {
    .quicklinks {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 44px;
    }
}

@media (max-width: 620px) {
    .quicklinks {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ── Split feature block: text one side, visual the other ── */
.split {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 72px;
    align-items: center;
}

.split.flip > .split-media {
    order: -1;
}

.split-text > *:last-child {
    margin-bottom: 0;
}

.split-media {
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
}

.split-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Benefit list with ticks, on light ── */
.benefit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.benefit-list li {
    position: relative;
    padding: 0 0 14px 32px;
    color: var(--ink-soft);
    line-height: 1.6;
}

.benefit-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' stroke='%232f5fd8' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

.benefit-list li strong {
    color: var(--ink);
    font-weight: 650;
}

/* ── Stat strip on light ── */
.light-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.light-stat .n {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--brand);
}

.light-stat .l {
    margin-top: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink-mute);
}

/* Reconciles a stat with a wider count stated elsewhere on the site — a
   figure that counts a subset needs the subset named where it is read. */
.stats-note {
    max-width: 720px;
    margin: 26px auto 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-mute);
}

.stats-note a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Nav: transparent over the dark hero, solid white once scrolled ── */
.navbar.on-light.scrolled {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 var(--line), 0 4px 20px rgba(16, 22, 43, 0.06);
}

.navbar.on-light.scrolled .nav-logo,
.navbar.on-light.scrolled .nav-links > a,
.navbar.on-light.scrolled .nav-dropdown > a {
    color: var(--ink);
}

.navbar.on-light.scrolled .logo-dot {
    color: var(--brand);
}

.navbar.on-light.scrolled .nav-links a:hover,
.navbar.on-light.scrolled .nav-dropdown:hover > a {
    color: var(--brand);
}

.navbar.on-light.scrolled .btn-ghost {
    color: var(--ink);
    border-color: #cbd4e4;
}

.navbar.on-light.scrolled .btn-ghost:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-dark);
}

.navbar.on-light.scrolled .btn-primary {
    background: var(--brand);
    color: #fff;
}

.navbar.on-light.scrolled .btn-primary:hover {
    background: var(--brand-dark);
    box-shadow: 0 8px 24px rgba(47, 95, 216, 0.28);
}

.navbar.on-light.scrolled .mobile-menu-btn span {
    background: var(--ink);
}

.navbar.on-light.scrolled .nav-links a.active::before {
    background: var(--brand);
}

/* Dropdown panels stay readable on a white bar */
.navbar.on-light.scrolled .nav-dropdown-menu {
    background: rgba(255, 255, 255, 0.99);
    border-color: var(--line);
    box-shadow: 0 20px 50px rgba(16, 22, 43, 0.14);
}

.navbar.on-light.scrolled .nav-dropdown-menu a {
    color: var(--ink-soft);
}

.navbar.on-light.scrolled .nav-dropdown-menu a:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.navbar.on-light.scrolled .dropdown-label {
    color: var(--ink-mute);
}

.navbar.on-light.scrolled .dropdown-divider {
    background: var(--line);
}

/* ── Light CTA band ── */
.light-cta {
    padding: 88px 0;
    background: linear-gradient(135deg, #16305f 0%, #2f5fd8 100%);
    color: #fff;
    text-align: center;
}

.light-cta h2 {
    color: #fff;
    margin-bottom: 14px;
}

.light-cta p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto 32px;
}

.light-cta .btn-ms {
    background: #fff;
    color: var(--brand-dark);
    border-color: #fff;
    padding: 14px 30px;
    font-size: 0.98rem;
}

.light-cta .btn-ms:hover {
    background: #eef3ff;
    color: var(--brand-dark);
}

.light-cta .btn-ms-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.light-cta .btn-ms-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ── Light footer ── */
.footer.light-footer {
    background: #0d1225;
    border-top: none;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .card-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .split.flip > .split-media {
        order: 0;
    }
}

@media (max-width: 760px) {
    .light {
        padding: 64px 0;
    }

    .card-row,
    .card-row.three,
    .card-row.two {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .light-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 20px;
    }

    .quicklinks {
        gap: 28px 20px;
        padding: 36px 0 4px;
    }

    .quicklink {
        max-width: 140px;
        font-size: 0.85rem;
    }

    .fade-to-light {
        height: 140px;
    }

    .light-head {
        margin-bottom: 36px;
    }
}

/* ═══════════════════════════════════════════════════════════
   SIMULATED PRODUCT SCREENSHOTS (.ui)
   Recreated from the real application UI. The sidebar is
   generated from product-nav.json (read out of the product's
   Sidebar.tsx), so these cannot drift from the shipping nav.
   ═══════════════════════════════════════════════════════════ */
.ui {
    --ui-side: #1b2a4d;
    --ui-side-2: #16233f;
    --ui-line: #e4e8f0;
    --ui-ink: #1a2138;
    --ui-mute: #6c7590;
    --ui-blue: #2f5fd8;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8dfeb;
    box-shadow: 0 24px 70px rgba(16, 22, 43, 0.18);
    font-size: 13px;
    line-height: 1.45;
    color: var(--ui-ink);
}

/* On the dark hero the mock gets a glow instead of a shadow */
.hero .ui {
    border-color: rgba(120, 150, 220, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 204, 255, 0.14),
                0 30px 90px rgba(0, 0, 0, 0.55),
                0 0 90px rgba(0, 204, 255, 0.16);
}

.ui-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    background: #f7f9fc;
    border-bottom: 1px solid var(--ui-line);
}

.ui-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.ui-dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f57;
}

.ui-dots i:nth-child(2) { background: #febc2e; }
.ui-dots i:nth-child(3) { background: #28c840; }

.ui-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    color: #97a0b5;
    font-size: 12px;
}

.ui-search svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.ui-search span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ui-tool {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    background: #fff;
    color: var(--ui-mute);
    font-size: 13px;
}

.ui-avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ui-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.ui-body {
    display: grid;
    grid-template-columns: 208px 1fr;
    min-height: 420px;
}

/* ── Sidebar ── */
.ui-side {
    background: linear-gradient(180deg, var(--ui-side) 0%, var(--ui-side-2) 100%);
    color: #cbd6ee;
    padding: 14px 0 18px;
    overflow: hidden;
}

.ui-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px 14px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.ui-brand-mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, #00ccff, #7733ff);
    color: #08122b;
    font-size: 13px;
    font-weight: 800;
}

.ui-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ui-item,
.ui-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: 12.5px;
    color: #b9c6e4;
    white-space: nowrap;
}

.ui-item svg,
.ui-group svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.85;
}

.ui-item span,
.ui-group span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-item.active,
.ui-group.active {
    background: rgba(94, 148, 255, 0.2);
    color: #fff;
    box-shadow: inset 2px 0 0 #4d8dff;
}

.ui-group {
    font-weight: 600;
    color: #d5deF3;
}

.ui-group span:first-of-type {
    flex: 1;
}

.ui-chev {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.55;
}

.ui-group.open .ui-chev {
    transform: rotate(45deg);
}

.ui-prem {
    flex-shrink: 0;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 190, 60, 0.2);
    color: #ffc960;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.ui-sub {
    padding: 6px 14px 6px 39px;
    font-size: 12px;
    color: #93a4c8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-sub.active {
    background: rgba(94, 148, 255, 0.24);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 2px 0 0 #4d8dff;
}

.ui-sep {
    height: 1px;
    margin: 9px 14px;
    background: rgba(255, 255, 255, 0.1);
}

/* ── Main content area ── */
.ui-main {
    padding: 18px 20px;
    background: #fafbfe;
    min-width: 0;
    overflow: hidden;
}

.ui-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.ui-h h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ui-ink);
}

.ui-h p {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--ui-mute);
}

.ui-pills {
    display: flex;
    gap: 6px;
}

.ui-pill {
    padding: 4px 10px;
    border: 1px solid var(--ui-line);
    border-radius: 5px;
    background: #fff;
    font-size: 11px;
    color: var(--ui-mute);
}

.ui-pill.on {
    background: var(--ui-blue);
    border-color: var(--ui-blue);
    color: #fff;
    font-weight: 600;
}

/* Stat cards */
.ui-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ui-stat {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
}

.ui-stat .k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ui-mute);
}

.ui-stat .v {
    margin-top: 5px;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ui-blue);
}

.ui-stat .v.teal { color: #0d9488; }
.ui-stat .v.purple { color: #7c3aed; }
.ui-stat .v.amber { color: #d97706; }
.ui-stat .v.red { color: #dc2626; }

.ui-stat .d {
    margin-top: 4px;
    font-size: 11px;
    color: var(--ui-mute);
}

/* Panels */
.ui-cols {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.ui-cols.c2 { grid-template-columns: 1fr 1fr; }
.ui-cols.c3 { grid-template-columns: repeat(3, 1fr); }
.ui-cols.wide-left { grid-template-columns: 1.7fr 1fr; }
.ui-cols.wide-right { grid-template-columns: 1fr 1.7fr; }

.ui-panel {
    padding: 13px 14px;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 8px;
    min-width: 0;
}

.ui-panel-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--ui-ink);
}

/* Bar chart */
.ui-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 92px;
}

.ui-bars i {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: #dbe3f5;
}

.ui-bars i.on {
    background: linear-gradient(180deg, #5b8bf0, var(--ui-blue));
}

.ui-xlabels {
    display: flex;
    gap: 7px;
    margin-top: 6px;
}

.ui-xlabels span {
    flex: 1;
    text-align: center;
    font-size: 9.5px;
    color: var(--ui-mute);
}

/* Table */
.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.ui-table th {
    padding: 7px 9px;
    text-align: left;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-mute);
    border-bottom: 1px solid var(--ui-line);
    white-space: nowrap;
}

.ui-table td {
    padding: 8px 9px;
    border-bottom: 1px solid #f1f4f9;
    color: #38415c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.ui-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
}

.ui-tag.red { background: #fee2e2; color: #b91c1c; }
.ui-tag.amber { background: #fef3c7; color: #b45309; }
.ui-tag.green { background: #d1fae5; color: #047857; }
.ui-tag.blue { background: #dbeafe; color: #1d4ed8; }
.ui-tag.grey { background: #eef1f6; color: #566080; }
.ui-tag.purple { background: #ede9fe; color: #6d28d9; }

/* 5x5 heat map */
.ui-heat {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
}

.ui-heat i {
    aspect-ratio: 1.5;
    border-radius: 3px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    font-style: normal;
}

.ui-heat i.g1 { background: #34d399; }
.ui-heat i.g2 { background: #a3e635; color: #3f4a1a; }
.ui-heat i.g3 { background: #fbbf24; color: #4a3410; }
.ui-heat i.g4 { background: #fb923c; }
.ui-heat i.g5 { background: #ef4444; }
.ui-heat i.e { background: #f2f5fa; }

/* Progress rows */
.ui-prog {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    font-size: 11.5px;
}

.ui-prog span:first-child {
    flex: 0 0 92px;
    color: #38415c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-prog .track {
    flex: 1;
    height: 6px;
    border-radius: 100px;
    background: #eaeef7;
    overflow: hidden;
}

.ui-prog .fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, #5b8bf0, var(--ui-blue));
}

.ui-prog .fill.teal { background: linear-gradient(90deg, #2dd4bf, #0d9488); }
.ui-prog .fill.amber { background: linear-gradient(90deg, #fbbf24, #d97706); }
.ui-prog .fill.red { background: linear-gradient(90deg, #f87171, #dc2626); }

.ui-prog .pct {
    flex: 0 0 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ui-ink);
}

/* Donut */
.ui-donut {
    display: grid;
    place-items: center;
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto;
}

.ui-donut svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ui-donut .val {
    position: absolute;
    font-size: 21px;
    font-weight: 750;
    color: var(--ui-ink);
}

/* Activity/alert rows */
.ui-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ui-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-radius: 6px;
    font-size: 11.5px;
}

.ui-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
}

.ui-dot.amber { background: #fbbf24; }
.ui-dot.red { background: #ef4444; }
.ui-dot.grey { background: #cbd3e2; }

.ui-row .t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #38415c;
}

.ui-row .m {
    flex-shrink: 0;
    font-size: 10.5px;
    color: var(--ui-mute);
}

/* Segmented status bar */
.ui-seg {
    display: flex;
    height: 7px;
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 8px;
}

.ui-seg i.red { background: #ef4444; }
.ui-seg i.amber { background: #f59e0b; }
.ui-seg i.yellow { background: #fbbf24; }
.ui-seg i.green { background: #34d399; }

.ui-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 10.5px;
    color: var(--ui-mute);
}

.ui-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ui-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

/* Caption under a screenshot */
.ui-caption {
    margin-top: 14px;
    font-size: 0.82rem;
    color: var(--ink-mute);
    text-align: center;
}

/* ── Dashboard mock: fill the frame ──
   The sidebar is ~40 rows tall, so a short main column left a white tail
   under the content. Making the main column a flex stack and letting the
   briefing row take the slack means the content always reaches the bottom,
   clipping like a real page cut off by the viewport, whatever the nav height. */
.ui-main-fill {
    display: flex;
    flex-direction: column;
}

.ui-fill {
    flex: 1;
    min-height: 0;
}

.ui-tabs {
    display: flex;
    gap: 22px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ui-line);
}

.ui-tabs span {
    padding: 0 2px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ui-mute);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ui-tabs span.on {
    color: var(--ui-blue);
    border-bottom-color: var(--ui-blue);
}

.ui-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

/* AI briefing panel — long-form generated prose, clipped with a soft fade */
.ui-brief {
    position: relative;
    overflow: hidden;
}

.ui-brief::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
    pointer-events: none;
}

.ui-brief h5 {
    margin: 13px 0 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ui-ink);
}

.ui-brief p {
    margin: 0 0 6px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #4a5470;
}

.ui-brief b {
    color: var(--ui-ink);
    font-weight: 650;
}

.ui-brief code {
    padding: 1px 4px;
    border-radius: 3px;
    background: #f1f4fa;
    color: #4c5ba8;
    font-size: 10.5px;
}

.ui-brief-t {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ui-brief-t svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--ui-blue);
}

.ui-brief-m {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ui-when {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ui-mute);
}

.ui-panel.alert {
    border-left: 3px solid #ef4444;
}

/* Compact heat map: the dashboard's right column is wide, so the default
   1.5 aspect made 90×60px cells with 10px numerals. Scoped modifier so the
   risk and ESG mocks keep the larger grid they were designed around. */
.ui-heat.compact i {
    aspect-ratio: 2.4;
    font-size: 12.5px;
}

.ui-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 10px;
    color: var(--ui-mute);
}

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

.ui-li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 11px;
    border-top: 1px solid #f0f3f9;
}

.ui-li:first-child {
    border-top: 0;
}

.ui-li .c {
    flex-shrink: 0;
    font-weight: 650;
    color: #6d28d9;
}

.ui-li .t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #38415c;
}

.ui-li .m {
    flex-shrink: 0;
    font-size: 10.5px;
    color: #c2410c;
}

/* Mocks are dense desktop UI — scroll rather than squash on small screens */
@media (max-width: 900px) {
    .ui-body {
        grid-template-columns: 1fr;
    }

    .ui-side {
        display: none;
    }

    .ui-cols.c2,
    .ui-cols.c3,
    .ui-cols.wide-left,
    .ui-cols.wide-right {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   WHITE PAGES — every page except the homepage
   Header · hero · title, then light sections throughout.
   ═══════════════════════════════════════════════════════════ */
body.page-light {
    background: var(--surface);
}

/* Nav is solid white from the very top on these pages */
body.page-light .navbar {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 var(--line);
}

body.page-light .nav-logo,
body.page-light .nav-links > a,
body.page-light .nav-dropdown > a {
    color: var(--ink);
}

body.page-light .logo-dot {
    color: var(--brand);
}

body.page-light .nav-links a:hover,
body.page-light .nav-dropdown:hover > a {
    color: var(--brand);
}

body.page-light .btn-ghost {
    color: var(--ink);
    border-color: #cbd4e4;
}

body.page-light .btn-ghost:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-dark);
}

body.page-light .btn-primary {
    background: var(--brand);
    color: #fff;
}

body.page-light .btn-primary:hover {
    background: var(--brand-dark);
    box-shadow: 0 8px 24px rgba(47, 95, 216, 0.28);
}

body.page-light .mobile-menu-btn span {
    background: var(--ink);
}

body.page-light .nav-dropdown-menu {
    background: rgba(255, 255, 255, 0.99);
    border-color: var(--line);
    box-shadow: 0 20px 50px rgba(16, 22, 43, 0.14);
}

body.page-light .nav-dropdown-menu a {
    color: var(--ink-soft);
}

body.page-light .nav-dropdown-menu a:hover {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

body.page-light .dropdown-label {
    color: var(--ink-mute);
}

body.page-light .dropdown-divider {
    background: var(--line);
}

body.page-light .mobile-panel {
    background: rgba(255, 255, 255, 0.99);
}

body.page-light .mobile-panel-header {
    background: #fff;
    border-bottom-color: var(--line);
}

body.page-light .mobile-panel-links > a,
body.page-light .mobile-acc-toggle {
    color: var(--ink);
    border-bottom-color: var(--line-soft);
}

body.page-light .mobile-acc-menu a {
    color: var(--ink-soft);
    border-bottom-color: var(--line-soft);
}

body.page-light .mobile-panel-close {
    color: var(--ink);
    border-color: var(--line);
}

/* ── The white hero ── */
.wh {
    padding: 150px 0 72px;
    background: linear-gradient(170deg, #f3f7fd 0%, #ffffff 68%);
    border-bottom: 1px solid var(--line-soft);
}

.wh .container {
    max-width: min(1320px, 92vw);
    margin: 0 auto;
    padding: 0 24px;
}

.wh-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
}

.wh-inner.solo {
    grid-template-columns: 1fr;
    /* Must match .legal-doc's max-width so the hero shares a left edge with
       the body copy below it. Both are centred; without the auto margin the
       hero sat 206px left of its own content on every solo page. */
    max-width: 1160px;
    margin: 0 auto;
}

/* Document pages are dense reading, not marketing sections: the standard
   72px + 96px section rhythm left ~200px of dead space between the hero and
   the first line of content. Scoped to solo heroes / .legal-doc so the 38
   two-column marketing heroes keep the roomier spacing. */
.wh:has(.wh-inner.solo) {
    padding-bottom: 48px;
}

.light:has(> .container > .legal-doc) {
    padding-top: 56px;
}

/* Specificity matters here: `.wh .lead` below is also (0,2,0) and comes later,
   so a bare `.wh-text > *:last-child` LOSES the tie and the lead keeps its
   30px bottom margin. Scoping with .wh makes this (0,3,0) so the reset wins. */
.wh .wh-text > *:last-child {
    margin-bottom: 0;
}

.wh h1 {
    font-size: clamp(2.3rem, 4.4vw, 3.7rem);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0 0 20px;
}

.wh-accent {
    color: var(--brand);
}

.wh .lead {
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 620px;
    margin-bottom: 30px;
}

/* On document pages the lead is the only thing that would still be 620px in a
   1160px column, so it reads as a stray narrow block. Marketing heroes keep
   the 620px cap — there the narrow lead sits beside a media panel. */
.wh-inner.solo .lead {
    max-width: none;
}

.wh-media {
    min-width: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(16, 22, 43, 0.12);
}

.wh-media img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

/* Breadcrumb on white */
body.page-light .breadcrumb,
.wh .breadcrumb {
    color: var(--ink-mute);
    margin-bottom: 20px;
}

.wh .breadcrumb a {
    color: var(--ink-mute);
}

.wh .breadcrumb a:hover {
    color: var(--brand);
}

/* ── Module blocks on the super features page ── */
.mod {
    padding: 44px 0;
    border-top: 1px solid var(--line);
}

.mod:first-of-type {
    border-top: none;
    padding-top: 0;
}

.mod-head {
    display: grid;
    grid-template-columns: 108px 1fr auto;
    gap: 24px;
    align-items: center;
    margin-bottom: 28px;
}

.mod-icon {
    width: 108px;
    height: 78px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-tint);
}

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

.mod-head h3 {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 5px;
}

.mod-sub {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-mute);
}

.mod-tag {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: 100px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Column count follows the item count so a row never ends ragged.
   Five capabilities render as five across, not 3 + 2. */
.mod-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.mod-grid[data-count="1"] { grid-template-columns: repeat(1, 1fr); max-width: 460px; margin-inline: auto; }
.mod-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
.mod-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.mod-grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.mod-grid[data-count="5"] { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mod-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
.mod-grid[data-count="7"] { grid-template-columns: repeat(4, 1fr); }
.mod-grid[data-count="8"] { grid-template-columns: repeat(4, 1fr); }
.mod-grid[data-count="9"] { grid-template-columns: repeat(3, 1fr); }
.mod-grid[data-count="10"] { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mod-grid[data-count="14"] { grid-template-columns: repeat(4, 1fr); }

/* Tighter type where five sit side by side */
.mod-grid[data-count="5"] .mod-page,
.mod-grid[data-count="10"] .mod-page {
    padding: 20px 18px 22px 20px;
}

.mod-grid[data-count="5"] .mod-page h4,
.mod-grid[data-count="10"] .mod-page h4 {
    font-size: 0.97rem;
    padding-right: 30px;
}

.mod-grid[data-count="5"] .mod-page p,
.mod-grid[data-count="10"] .mod-page p {
    font-size: 0.855rem;
}

.mod-grid[data-count="5"] .mod-page::after,
.mod-grid[data-count="10"] .mod-page::after {
    font-size: 1.2rem;
    top: 14px;
    right: 14px;
}

/* Capability cards lead with their own generated graphic, matching the
   module cards on the homepage. */
.mod-page {
    padding: 0 0 22px;
}

.mod-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-tint);
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 18px;
}

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

.mod-page h4,
.mod-page p {
    padding-inline: 20px;
}

.mod-page::after {
    top: auto;
    bottom: 18px;
    right: 18px;
    font-size: 1.25rem;
}


/* Capability cards — a numbered accent rail and a real card surface,
   instead of flat text blocks floating on a tint. */
.mod-page {
    position: relative;
    counter-increment: modpage;
    padding: 24px 24px 26px 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    min-width: 0;
    overflow: hidden;
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.mod-page::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), #7c3aed);
    opacity: 0;
    transition: opacity 0.22s;
}

.mod-page:hover::before {
    opacity: 1;
}

.mod-page::after {
    content: counter(modpage, decimal-leading-zero);
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #eef2fa;
    line-height: 1;
}

.mod-page:hover {
    transform: translateY(-3px);
    border-color: #c9d5ec;
    box-shadow: 0 14px 34px rgba(16, 22, 43, 0.1);
}

.mod-page h4 {
    margin: 0 0 9px;
    padding-right: 42px;
    font-size: 1.04rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.mod-page p {
    margin: 0;
    font-size: 0.91rem;
    line-height: 1.62;
    color: var(--ink-soft);
}

.mod-grid {
    counter-reset: modpage;
}

@media (max-width: 1240px) {
    .mod-grid[data-count="5"],
    .mod-grid[data-count="10"],
    .mod-grid[data-count="14"],
    .mod-grid[data-count="7"],
    .mod-grid[data-count="8"],
    .mod-grid[data-count="4"] {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 1100px) {
    .wh-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .wh-media {
        order: -1;
    }

    .mod-grid,
    .mod-grid[data-count="1"],
    .mod-grid[data-count="2"],
    .mod-grid[data-count="3"],
    .mod-grid[data-count="4"],
    .mod-grid[data-count="5"],
    .mod-grid[data-count="6"],
    .mod-grid[data-count="7"],
    .mod-grid[data-count="8"],
    .mod-grid[data-count="9"],
    .mod-grid[data-count="10"],
    .mod-grid[data-count="14"] {
        grid-template-columns: repeat(2, 1fr);
        max-width: none;
    }
}

@media (max-width: 760px) {
    .wh {
        padding: 120px 0 52px;
    }

    .mod-head {
        grid-template-columns: 72px 1fr;
        gap: 16px;
    }

    .mod-icon {
        width: 72px;
        height: 56px;
    }

    .mod-head .btn-ms {
        grid-column: 1 / -1;
    }

    .mod-grid,
    .mod-grid[data-count="1"],
    .mod-grid[data-count="2"],
    .mod-grid[data-count="3"],
    .mod-grid[data-count="4"],
    .mod-grid[data-count="5"],
    .mod-grid[data-count="6"],
    .mod-grid[data-count="7"],
    .mod-grid[data-count="8"],
    .mod-grid[data-count="9"],
    .mod-grid[data-count="10"],
    .mod-grid[data-count="14"] {
        grid-template-columns: 1fr;
    }
}

/* ── Legal documents on white ── */
body.page-light .legal-doc {
    color: var(--ink-soft);
}

body.page-light .legal-doc .cover,
body.page-light .legal-doc .metadata,
body.page-light .legal-doc .notice,
body.page-light .legal-doc .definitions,
body.page-light .legal-doc .doc-toc {
    background: var(--surface-tint);
    border-color: var(--line);
}

body.page-light .legal-doc .cover h1,
body.page-light .legal-doc h2,
body.page-light .legal-doc h3,
body.page-light .legal-doc .brand,
body.page-light .legal-doc .term,
body.page-light .legal-doc strong {
    color: var(--ink);
}

body.page-light .legal-doc .registry,
body.page-light .legal-doc .tagline,
body.page-light .legal-doc .metadata dt,
body.page-light .legal-doc .label,
body.page-light .legal-doc .doc-footer {
    color: var(--ink-mute);
}

body.page-light .legal-doc h2 {
    border-bottom-color: var(--line);
}

body.page-light .legal-doc .num,
body.page-light .legal-doc .marker,
body.page-light .legal-doc a,
body.page-light .legal-doc li::marker {
    color: var(--brand);
}

body.page-light .legal-doc .def {
    border-bottom-color: var(--line-soft);
}

body.page-light .legal-doc .important-callout {
    background: var(--brand-soft);
    border-left-color: var(--brand);
}

body.page-light .legal-doc .schedule-divider {
    background: var(--brand-soft);
    border-color: #c8d6f5;
    color: var(--brand-dark);
}

body.page-light .legal-doc th {
    background: var(--brand-soft);
    border-bottom-color: #c8d6f5;
    color: var(--ink);
}

body.page-light .legal-doc td {
    border-bottom-color: var(--line-soft);
}

body.page-light .legal-doc .disclaimer-strong {
    background: #fee2e2;
    color: var(--ink);
}

body.page-light .legal-doc .doc-footer {
    border-top-color: var(--line);
}

/* ── Prose, FAQ, tables and cards on white ── */
body.page-light .prose { color: var(--ink-soft); }
body.page-light .prose h2,
body.page-light .prose h3,
body.page-light .prose strong { color: var(--ink); }
body.page-light .prose a { color: var(--brand); }
body.page-light .prose li::marker { color: var(--brand); }
body.page-light .prose blockquote {
    background: var(--surface-tint);
    border-left-color: var(--brand);
}
body.page-light .prose code {
    background: var(--brand-soft);
    color: var(--brand-dark);
}
body.page-light .prose hr { border-top-color: var(--line); }
body.page-light .doc-meta-item {
    background: var(--surface-tint);
    border-color: var(--line);
    color: var(--ink-mute);
}
body.page-light .doc-meta-item strong { color: var(--ink); }
body.page-light .doc-toc h4 { color: var(--ink-mute); }
body.page-light .doc-toc a { color: var(--ink-soft); }
body.page-light .doc-toc a:hover { color: var(--brand); }

body.page-light .faq-item {
    background: #fff;
    border-color: var(--line);
}
body.page-light .faq-item:hover { border-color: #c9d5ec; }
body.page-light .faq-item.open {
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 10px 28px rgba(16, 22, 43, 0.08);
}
body.page-light .faq-question { color: var(--ink); }
body.page-light .faq-question::after { border-color: var(--brand); }
body.page-light .faq-answer p { color: var(--ink-soft); }
body.page-light .faq-answer a { color: var(--brand); }

body.page-light .data-table-wrap {
    background: #fff;
    border-color: var(--line);
}
body.page-light .data-table thead th {
    background: var(--surface-tint);
    color: var(--ink);
    border-bottom-color: #c8d6f5;
}
body.page-light .data-table tbody th {
    background: #fff;
    color: var(--ink);
    border-bottom-color: var(--line-soft);
    border-right-color: var(--line-soft);
}
body.page-light .data-table td {
    color: var(--ink-soft);
    border-bottom-color: var(--line-soft);
}
body.page-light .data-table tbody tr:hover td,
body.page-light .data-table tbody tr:hover th { background: var(--surface-tint); }
body.page-light .data-table .col-us { background: var(--brand-soft); color: var(--ink); }
body.page-light .data-table tr.group-row th,
body.page-light .data-table tr.group-row td {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-bottom-color: #c8d6f5;
}
body.page-light .table-note { color: var(--ink-mute); }
body.page-light .table-note a { color: var(--brand); }

body.page-light .section-title,
body.page-light .narrative-title,
body.page-light .light h2 { color: var(--ink); }
body.page-light .section-subtitle,
body.page-light .narrative-body p,
body.page-light .narrative-strapline { color: var(--ink-soft); }
body.page-light .narrative-body strong { color: var(--ink); }
body.page-light .gradient-text,
body.page-light .wh-accent {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--brand);
}

body.page-light .module-card,
body.page-light .platform-card,
body.page-light .role-card,
body.page-light .pain-card,
body.page-light .belief-card,
body.page-light .fw-visual-card,
body.page-light .integration-card,
body.page-light .pricing-card,
body.page-light .pricing-callout,
body.page-light .feature-mock-card,
body.page-light .capture-card,
body.page-light .question-block,
body.page-light .progress-wrapper,
body.page-light .results-hero-card,
body.page-light .section-score-row {
    background: #fff;
    border-color: var(--line);
    box-shadow: 0 1px 3px rgba(16, 22, 43, 0.05);
}

body.page-light .module-card h3,
body.page-light .platform-card h3,
body.page-light .role-card h3,
body.page-light .pain-card h3,
body.page-light .belief-content h3,
body.page-light .pricing-card h3,
body.page-light .pricing-callout h3,
body.page-light .fw-card-label,
body.page-light .integration-card h4,
body.page-light .question-text,
body.page-light .answer-label { color: var(--ink); }

body.page-light .module-card p,
body.page-light .platform-card p,
body.page-light .role-card li,
body.page-light .pain-card p,
body.page-light .belief-content p,
body.page-light .pricing-desc,
body.page-light .pricing-callout p,
body.page-light .pricing-features li,
body.page-light .integration-card p,
body.page-light .feature-list li,
body.page-light .answer-desc { color: var(--ink-soft); }

body.page-light .module-count,
body.page-light .belief-number,
body.page-light .light-eyebrow,
body.page-light .feature-pill,
body.page-light .fw-card-count,
body.page-light .price { color: var(--brand); }

body.page-light .fw-card-tag {
    background: var(--brand-soft);
    color: var(--brand-dark);
    border-color: transparent;
}

body.page-light .feature-pill {
    background: var(--brand-soft);
    border-color: transparent;
}

/* The dark-theme .stat-number paints a cyan→magenta gradient CLIPPED TO THE
   TEXT, with -webkit-text-fill-color: transparent. On a light page that is
   near-invisible (~1.9:1 against #f5f8fd), and setting `color` alone does
   not help — text-fill-color overrides it. Both the fill and the clipped
   background have to be unwound, not just the colour. */
body.page-light .stat-number {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--brand);
    color: var(--brand);
}
body.page-light .stat-label { color: var(--ink-mute); }

body.page-light .price-period,
body.page-light .light .lead { color: var(--ink-soft); }

body.page-light .popular-badge {
    background: var(--brand);
    color: #fff;
}

body.page-light .answer-card {
    background: #fff;
    border-color: var(--line);
}
body.page-light .answer-card:hover { border-color: var(--brand); background: var(--brand-soft); }
body.page-light .answer-card.selected { border-color: var(--brand); background: var(--brand-soft); }
body.page-light .answer-indicator { border-color: #c3cee3; }
body.page-light .answer-card.selected .answer-indicator { border-color: var(--brand); background: var(--brand); }
body.page-light .answer-check, body.page-light .answer-dot { color: #fff; }
body.page-light .answer-dot { background: #fff; }
body.page-light .section-intro {
    background: var(--brand-soft);
    border-color: #c8d6f5;
    color: var(--ink-soft);
}
body.page-light .section-intro h3 { color: var(--ink); }
body.page-light .form-group input {
    background: #fff;
    border-color: #c3cee3;
    color: var(--ink);
}
body.page-light .form-group label { color: var(--ink-soft); }
body.page-light .progress-track,
body.page-light .section-score-bar-track { background: #e6ebf5; }
body.page-light .progress-step { background: var(--surface-tint); color: var(--ink-mute); }
body.page-light .progress-step.active { background: var(--brand-soft); color: var(--brand-dark); border-color: #c8d6f5; }
body.page-light .results-score { color: var(--brand); -webkit-text-fill-color: var(--brand); background: none; }
body.page-light .results-band { color: var(--ink); }
body.page-light .results-band-desc,
body.page-light .section-score-value { color: var(--ink-soft); }
body.page-light .section-score-label { color: var(--ink); }
body.page-light .gap-item {
    background: #fff5f5;
    border-color: #fecaca;
    border-left-color: #dc2626;
    color: var(--ink-soft);
}
body.page-light .gap-item strong { color: var(--ink); }
body.page-light .btn-wizard-prev { color: var(--ink-soft); border-color: #c3cee3; }
body.page-light .report-notice { color: var(--ink-mute); }
body.page-light .wizard-nav { border-top-color: var(--line); }

body.page-light .styled-table th { color: var(--ink-mute); }
body.page-light .styled-table td { color: var(--ink-soft); }
body.page-light .styled-table tbody tr:hover { background: var(--surface-tint); }
body.page-light .styled-table thead { border-bottom-color: #c8d6f5; }

body.page-light .breadcrumb,
body.page-light .breadcrumb a { color: var(--ink-mute); }
body.page-light .breadcrumb a:hover { color: var(--brand); }
body.page-light .breadcrumb span[aria-current] { color: var(--ink-soft); }

body.page-light .mk-yes { background: #d1fae5; color: #047857; }
body.page-light .mk-no { background: #fee2e2; color: #b91c1c; }
body.page-light .mk-partial { background: #fef3c7; color: #b45309; }

/* ── Simulated screenshots on small screens ──
   These depict a desktop application. Squashing one to 375px would
   misrepresent the product, so the shot keeps a sensible minimum width
   and scrolls inside its own frame instead. */
@media (max-width: 900px) {
    .ui {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ui-bar,
    .ui-body {
        min-width: 620px;
    }
}

/* ── FIX: benefit/feature lists forcing a grid column wide ──
   .feature-list items mix an inline SVG with long bold runs. Inside a grid
   whose items default to min-width:auto, the longest unbreakable run sets
   the column width and pushes past the viewport. Same class of bug as the
   .feature-row fix — applied to the list and its children too. */
.feature-list,
.feature-list li,
.feature-list li strong,
.benefit-list,
.benefit-list li,
.benefit-list li strong,
.split-text,
.split-text > * {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}

/* NOTE: do NOT make .feature-list li a flex container. Each item is
   "<svg> <strong>Lead-in.</strong> continuing sentence" — as flex items the
   bold run and the text after it become separate columns and break mid-word.
   Keep it a block; the icon floats inline. */
.feature-list li {
    display: block;
    position: relative;
    padding-left: 30px;
}

.feature-list li svg {
    position: absolute;
    left: 0;
    top: 4px;
    flex-shrink: 0;
}


/* ── Mock cards on white pages ──
   .feature-mock-card and its .fmc-* internals were designed against the dark
   surface. On a light page the dark header/stat band and the pale grade
   labels fell below usable contrast. */
body.page-light .feature-mock-card {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(16, 22, 43, 0.08);
    overflow: hidden;
}

body.page-light .fmc-header {
    background: var(--surface-tint);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-weight: 650;
}

body.page-light .fmc-dot {
    background: var(--brand);
}

body.page-light .fmc-stats-row {
    background: var(--surface-tint);
    border-bottom: 1px solid var(--line);
}

body.page-light .fmc-stat {
    background: transparent;
    border-color: var(--line);
}

body.page-light .fmc-stat-val {
    color: var(--ink);
}

body.page-light .fmc-stat-val.teal {
    color: #0d9488;
}

body.page-light .fmc-stat-lbl {
    color: var(--ink-mute);
}

body.page-light .fmc-agent-row {
    border-bottom: 1px solid var(--line-soft);
}

body.page-light .fmc-agent-row:last-child {
    border-bottom: none;
}

/* The grade column was light grey on white — now a legible mono badge */
body.page-light .fmc-time {
    display: inline-block;
    min-width: 34px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

body.page-light .fmc-task {
    color: var(--ink-soft);
}

body.page-light .fmc-badge {
    background: #e6f7f3;
    color: #047857;
    font-weight: 650;
}

body.page-light .fmc-badge.medium {
    background: #fef3c7;
    color: #b45309;
}

/* ── Featured pricing card on white ──
   .pricing-card.featured carries a dark gradient + glow from the dark theme.
   On a light page that rendered dark-on-dark and was unreadable. */
body.page-light .pricing-card.featured,
body.page-light .pricing-card.featured .pricing-card-inner {
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 16px 44px rgba(47, 95, 216, 0.16);
}

body.page-light .pricing-card.featured::before,
body.page-light .pricing-card.featured::after,
body.page-light .pricing-card::before,
body.page-light .pricing-card::after {
    display: none;
}

body.page-light .pricing-card .pricing-card-inner {
    background: #fff;
}

body.page-light .pricing-card h3,
body.page-light .pricing-card .price {
    color: var(--ink);
}

body.page-light .pricing-card .price {
    color: var(--brand);
}

body.page-light .pricing-features li {
    color: var(--ink-soft);
}

body.page-light .pricing-features li::before,
body.page-light .pricing-features li::marker {
    color: var(--brand);
}

body.page-light .popular-badge {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 14px rgba(47, 95, 216, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   ROOT FIX for dark-theme colour leaking onto light pages.

   Components inherited from the dark design system reference
   --text-primary / --text-secondary / --text-muted / --bg-card etc.
   On a white page those resolve to near-white text on white — which is
   how the MSA metadata values, the mock card grades and several other
   spots ended up invisible. Patching each component one at a time was
   losing; redefining the tokens fixes every component at once, including
   any added later.
   ═══════════════════════════════════════════════════════════ */
body.page-light {
    --text-primary: #10162b;
    --text-secondary: #444d68;
    --text-muted: #5d6782;
    --bg-primary: #ffffff;
    --bg-secondary: #f5f8fd;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f8fd;
    --bg-card-border: #e3e7ef;
    --teal: #2f5fd8;
    --blue: #2f5fd8;
    --purple: #7c3aed;
}

/* The gradient-text treatment reads as a smear on white — flatten it */
body.page-light .gradient-text {
    background: none;
    -webkit-text-fill-color: var(--brand);
    color: var(--brand);
}

/* …but the closing CTA band is DARK, and brand blue on that navy gradient
   is 2.3:1 — the accent phrase vanished while the rest of the heading
   stayed white. Light pages are not uniformly light: the one dark band on
   them needs the accent inverted, not flattened. */
body.page-light .light-cta .gradient-text,
body.page-light .light-cta .wh-accent {
    -webkit-text-fill-color: #a9c6ff;
    color: #a9c6ff;
}

/* Same failure in the MSA header: a teal→blue gradient clipped to text,
   1.5:1 against the page. */
body.page-light .legal-doc .product {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--brand);
    color: var(--brand);
}

/* Legal document metadata: the values were the worst offender */
body.page-light .legal-doc .metadata dd,
body.page-light .legal-doc .meaning,
body.page-light .legal-doc p,
body.page-light .legal-doc .body {
    color: var(--ink-soft);
}

body.page-light .legal-doc .metadata dt {
    color: var(--ink-mute);
}

/* ── Footer stays dark on light pages ──
   The footer was built for a dark surface. When light pages redefined the
   colour tokens, its background went white while its text stayed pale —
   leaving it almost invisible. A dark footer under a white page is the
   intended look anyway, so re-assert the dark surface AND restore the dark
   token values inside it. */
body.page-light .footer {
    --text-primary: #f0f4ff;
    --text-secondary: rgba(220, 230, 245, 0.85);
    --text-muted: rgba(200, 215, 235, 0.68);
    background: #0d1225;
    border-top: none;
    color: var(--text-secondary);
}

body.page-light .footer .nav-logo,
body.page-light .footer h4 {
    color: #f0f4ff;
}

body.page-light .footer .logo-dot {
    color: #00ccff;
}

body.page-light .footer-desc,
body.page-light .footer-bottom p {
    color: rgba(200, 215, 235, 0.72);
}

body.page-light .footer-links-col a {
    color: rgba(220, 230, 245, 0.82);
}

body.page-light .footer-links-col a:hover {
    color: #fff;
}

body.page-light .footer h4 {
    color: rgba(200, 215, 235, 0.62);
}

body.page-light .footer-socials a {
    color: rgba(220, 230, 245, 0.75);
}

body.page-light .footer-socials a:hover {
    color: #fff;
}

body.page-light .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════
   LEGAL DOCUMENT — two inherited-style bugs
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Clause headings rendered at 54.9px.
      `.legal-doc h2 {font-size:1.32rem}` (line ~5077) and
      `.light h2 {font-size:clamp(2rem,3.4vw,3rem)}` (line ~6156) have the
      SAME specificity (0,1,1), and the legal doc sits inside
      <section class="light"> — so the later marketing-hero rule won and
      every numbered contract clause got hero sizing. Adding the ancestor
      makes the contract rule specific enough to hold. */
.light .legal-doc h2 {
    font-size: 1.32rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.light .legal-doc h3 {
    font-size: 1.02rem;
    line-height: 1.4;
    letter-spacing: -0.005em;
}

/* 2. Whole schedules rendered ALL CAPS, centred and bold.
      `.schedule-divider` was written as a small uppercase LABEL, but the
      source MSA nests the entire schedule inside that section — 49 child
      elements here — so every paragraph, list item and table cell
      inherited text-transform, letter-spacing, text-align and weight.
      The decorative treatment belongs to the schedule TITLE alone; the
      section itself must be a neutral container.
      NB: fixed in CSS deliberately. The MSA body is ported verbatim and
      the build asserts text identity against the source, so the markup
      is not ours to change. */
.legal-doc .schedule-divider {
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 0.95rem;
    padding: 30px 34px 34px;
}

.legal-doc .schedule-divider > h2:first-child {
    margin: 0 0 26px;
    padding-bottom: 14px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.light .legal-doc .schedule-divider > h2:first-child {
    font-size: 1.16rem;
}

/* Part headings inside a schedule ("Part A — Core Platform") read as
   dividers rather than clause titles. */
.legal-doc .schedule-divider > h3 {
    text-align: left;
    letter-spacing: 0.01em;
}

/* 3. Table headers were SMALLER than the body text they label
      (0.72rem header vs 0.88rem cell). Reversed, and cells left-aligned
      now that the inherited centring is gone. */
.legal-doc th {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.legal-doc td {
    font-size: 0.86rem;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    line-height: 1.55;
}

.legal-doc .schedule-divider table {
    margin: 20px 0 26px;
}

/* The schedule panel sets color:var(--brand-dark) for its title, which the
   table cells then inherit — schedule body text came out brand blue while
   the surrounding clauses were ink grey. Both pass contrast, but they must
   match: one document, one body colour. Keep the blue on the title only. */
body.page-light .legal-doc .schedule-divider {
    color: var(--ink-soft);
}

body.page-light .legal-doc .schedule-divider > h2:first-child,
body.page-light .legal-doc .schedule-divider > h3 {
    color: var(--ink);
}

/* The privacy policy is a legal document too, but it uses .prose rather
   than .legal-doc — so `.prose h2 {1.6rem}` lost to `.light h2` in exactly
   the same specificity tie, and its numbered clauses ("1. Who we are")
   rendered at 44px. Same fix, same reason: a contract clause is not a
   marketing headline. */
.light .prose h2 {
    font-size: 1.32rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.light .prose h3 {
    font-size: 1.02rem;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   CAPABILITY LIST — collapsible sidebar-shaped feature table
   ═══════════════════════════════════════════════════════════════════ */
.cap-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.cap-note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-mute);
}

.cap-actions {
    display: flex;
    gap: 10px;
}

.cap-actions .btn-ms {
    padding: 9px 16px;
    font-size: 0.85rem;
}

.cap-group {
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--bg-card-border);
    border-radius: 12px;
    overflow: hidden;
}

.cap-group > summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
    background: var(--brand-soft);
    border-bottom: 1px solid transparent;
    transition: background 0.15s ease;
}

.cap-group[open] > summary {
    border-bottom-color: var(--bg-card-border);
}

.cap-group > summary:hover { background: #dfe8fb; }
.cap-group > summary::-webkit-details-marker { display: none; }

/* Disclosure caret, drawn rather than an emoji or a font glyph */
.cap-group > summary::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
    margin-left: 3px;
}

.cap-group[open] > summary::before { transform: rotate(45deg); }

.cap-group-name {
    flex: 1;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.cap-count {
    flex: none;
    padding: 4px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #c8d6f5;
    font-size: 0.76rem;
    font-weight: 650;
    color: var(--brand-dark);
    white-space: nowrap;
}

/* Cross-cutting capabilities belong to no module and have no page in the 73
   (the forensic audit trail lives in Admin, which this page does not
   enumerate). They still get a card, or the headline count would exceed the
   chips on the page by exactly those. Same shell, no <summary>. */
.cap-group-flat > .cap-caps {
    border-bottom: 0;
}

/* The middle tier of the rollup: module -> capabilities -> pages. A page is
   not a capability in either direction, so the two counts in the summary are
   different measurements, not two names for one. See capability_map.py. */
.cap-caps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    background: #fbfcfe;
    border-bottom: 1px solid #eef1f7;
}

.cap-caps-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-mute);
    margin-right: 4px;
}

.cap-chip {
    padding: 5px 11px;
    border-radius: 999px;
    background: #f4f7fc;
    border: 1px solid #e1e8f5;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-mute);
}

.cap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.cap-table thead th {
    padding: 11px 22px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-mute);
    background: #fbfcfe;
    border-bottom: 1px solid var(--bg-card-border);
}

.cap-table tbody th {
    /* min-width:0 is deliberate: a grid/table cell defaults to min-content,
       which lets a long capability name force the table wider than the page. */
    min-width: 0;
    width: 33%;
    padding: 15px 22px;
    text-align: left;
    font-weight: 650;
    color: var(--ink);
    vertical-align: top;
}

.cap-table tbody td {
    padding: 15px 22px 15px 0;
    color: var(--ink-soft);
    line-height: 1.6;
    vertical-align: top;
}

.cap-table tbody tr + tr th,
.cap-table tbody tr + tr td {
    border-top: 1px solid #eef1f7;
}

.cap-table tbody tr:hover th,
.cap-table tbody tr:hover td { background: #fafbfe; }

.cap-tick {
    width: 19px;
    height: 19px;
    flex: none;
    margin-right: 10px;
    vertical-align: -4px;
}

@media (max-width: 720px) {
    .cap-toolbar { flex-direction: column; align-items: flex-start; }

    /* Stack each row: the two-column table is unreadable at 375px. */
    .cap-table thead { display: none; }
    .cap-table, .cap-table tbody, .cap-table tr { display: block; width: 100%; }

    .cap-table tbody th,
    .cap-table tbody td {
        display: block;
        width: auto;
        padding: 0 18px;
    }

    .cap-table tbody th { padding-top: 16px; }
    .cap-table tbody td { padding-bottom: 16px; }
    .cap-table tbody tr + tr th { border-top: 1px solid #eef1f7; padding-top: 16px; }
    .cap-table tbody tr + tr td { border-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   BRAND LOGO
   Replaces the placeholder shield + wordmark with the real asset.
   ═══════════════════════════════════════════════════════════════════ */
.logo-img {
    height: 34px;
    width: auto;
    display: block;
    /* The source is 305×88; height drives it, so the intrinsic width
       attribute exists only to reserve space and avoid layout shift. */
}

.mobile-panel-header .logo-img { height: 30px; }
.footer .logo-img { height: 38px; }

/* The wordmark is dark navy with light bevel highlights — perfect on white,
   but it sinks into the dark homepage hero. Lifting brightness there keeps
   one asset serving both backgrounds instead of shipping two files.
   The homepage nav also flips to a WHITE bar (.on-light) once it scrolls
   over the light sections, so the lift has to come back off there or the
   logo washes out — that state is excluded, not just .scrolled. */
body:not(.page-light) .navbar .logo-img,
.footer .logo-img {
    filter: brightness(1.9) saturate(1.15);
}

/* The bar only actually turns WHITE when both classes are present —
   .on-light alone is set at load and says nothing about the backdrop.
   Checked in the browser: at scrollY 0 the nav is already .on-light while
   still sitting on the dark hero, so keying off that class alone dropped
   the lift exactly where it was needed. */
body:not(.page-light) .navbar.on-light.scrolled .logo-img {
    filter: none;
}

.mobile-panel .logo-img {
    filter: none;
}

@media (max-width: 768px) {
    .logo-img { height: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════
   WHY GRCxAI — module blocks with capability list + proof chips
   ═══════════════════════════════════════════════════════════════════ */
.why-modules {
    display: grid;
    gap: 20px;
}

/* Commercial claims sit apart from the capability grid: they are pricing and
   packaging, not features, and folding them in is how the old count came to
   include four pricing rows. Same card shell as .why-module so it reads as
   part of the same set, minus the media column. */
.why-commercial {
    margin-top: 20px;
    padding: 24px 28px;
    background: #fff;
    border: 1px solid var(--bg-card-border);
    border-radius: 14px;
}

.why-commercial h3 {
    margin: 0 0 16px;
    font-size: 1.05rem;
}

.why-commercial .why-list {
    margin-bottom: 0;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.why-module {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--bg-card-border);
    border-radius: 14px;
    overflow: hidden;
}

.why-module-media {
    /* min-width:0 so a wide image cannot push the track past the container */
    min-width: 0;
    background: var(--brand-soft);
}

.why-module-media img {
    width: 100%;
    height: 100%;
    min-height: 210px;
    object-fit: cover;
    display: block;
}

.why-module-body {
    min-width: 0;
    padding: 28px 30px 30px;
}

.why-module-body h3 {
    margin: 0 0 18px;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.why-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.why-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.why-list .cap-tick {
    margin: 1px 0 0;
    flex: none;
}

.why-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: 1px solid #eef1f7;
}

.why-chip {
    padding: 5px 11px;
    border-radius: 999px;
    background: #f4f7fc;
    border: 1px solid #e1e8f5;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-mute);
    white-space: nowrap;
}

@media (max-width: 860px) {
    .why-module { grid-template-columns: 1fr; }
    .why-module-media img { min-height: 160px; max-height: 200px; }
    .why-module-body { padding: 22px 20px 24px; }
    .why-chip { white-space: normal; }
    .why-commercial { padding: 20px; }
    .why-commercial .why-list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPARISON TABLES — an exact reproduction of the deck's table
   These are not approximations. Every value was read from getComputedStyle
   on the live presentation page (table.comp.dense) and is reproduced here
   verbatim, then diffed back against it:

     header      8px 10px · 12px · 600 · #fff · 135deg #1565C0 → #0D47A1
     our header  8px 10px · 12px · 700 · #fff · 135deg #b8860b → #996515
     cells       5px 10px · 11.5px · 600 · rgb(33,33,33)
     row height  25px          radius 16px      wrap max-width 1200px
     marks       tick 14px #4caf50 · minus 12.5px #ff9800 · cross 12.5px #ccc

   Note the cells are 11.5px: small for a web page, but the brief was a
   100% copy, and the deck's density is what makes it read as one block.
   Nothing here inherits from the site's type scale — that inheritance is
   exactly what made earlier attempts drift.
   ═══════════════════════════════════════════════════════════════════ */
.cmp-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 1200px;
    margin: 0 auto;
}

.cmp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    background: #fff;
}

.cmp-table thead th {
    padding: 8px 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    color: #fff;
    background: linear-gradient(135deg, #1565C0, #0D47A1);
}

.cmp-table thead th:first-child { text-align: left; }

.cmp-table thead th.cmp-us {
    font-weight: 700;
    background: linear-gradient(135deg, #b8860b, #996515);
}

.cmp-table tbody th,
.cmp-cell {
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: normal;
    color: #212121;
    border-bottom: 1px solid #f0f0f0;
}

.cmp-table tbody th { text-align: left; }
.cmp-cell { text-align: center; vertical-align: middle; }

.cmp-table tbody th,
.cmp-cell { line-height: 14px; }

.cmp-table tbody tr:nth-child(even) th,
.cmp-table tbody tr:nth-child(even) td { background: #fafbfe; }

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: none; }

.cmp-cell.cmp-us { background: rgba(33, 150, 243, 0.05) !important; }

.cmp-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 0;
}

.cmp-mark svg { display: block; width: 14px; height: 14px; }
.cmp-cell.part .cmp-mark svg,
.cmp-cell.no .cmp-mark svg { width: 12.5px; height: 12.5px; }

/* "Not established by our research" — a plain dash, deliberately quieter than
   the cross, because it is not a claim about the vendor. */
.cmp-cell.unknown .cmp-mark svg { width: 11px; height: 11px; opacity: 0.75; }

.cmp-cell sup {
    font-size: 8.5px;
    color: #9aa0ad;
    margin-left: 1px;
    vertical-align: super;
}

.cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: center;
}

.cmp-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.cmp-legend-item svg { width: 14px; height: 14px; }

@media (max-width: 720px) {
    .cmp-legend { gap: 14px; }
}

/* Competitor pages carry sentences, not just marks, so those cells read
   left-aligned prose rather than centred glyphs. The mark still leads our
   cell where the source table had a tick. */
.cmp-text {
    padding: 8px 12px;
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
    color: #212121;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
    white-space: normal;
}

.cmp-table.cmp-wide tbody th { white-space: normal; max-width: 230px; }
.cmp-table.cmp-wide { min-width: 720px; }

.cmp-text.cmp-us {
    background: rgba(33, 150, 243, 0.05) !important;
    font-weight: 600;
}

.cmp-text .cmp-mark { margin-right: 5px; }
.cmp-text .cmp-mark svg { width: 13px; height: 13px; }

.cmp-table tbody tr:nth-child(even) .cmp-text { background: #fafbfe; }
.cmp-table tbody tr:last-child .cmp-text { border-bottom: none; }
.cmp-table tbody tr:hover .cmp-text { background: #f2f6fd; }