/* === SITE FONTS (3) ============================================
   Sora                -> display / headlines
   Bricolage Grotesque -> body / UI text
   Space Grotesk       -> labels / pills / mono-style accents
                          (replaced JetBrains Mono on 2026-06-24)
   ============================================================ */
/* ============================================
   ORBIT AUTOMATION: CUSTOM STYLES V2
   Space theme, glassmorphism, 3D planets, animations
   ============================================ */

/* ---- Base ---- */
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, 0.5) transparent;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: rgba(124, 58, 237, 0.08);
}
::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.5);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.8);
}

::selection {
    background: #7C3AED60;
    color: white;
}

/* ---- Glassmorphism Cards ---- */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(124, 58, 237, 0.3);
    transform: translateY(-4px);
    box-shadow:
        0 20px 60px rgba(124, 58, 237, 0.1),
        0 0 40px rgba(124, 58, 237, 0.05);
}

/* ---- Navbar ---- */
#navbar {
    background: transparent;
    transition: all 0.4s ease;
}

#navbar.scrolled {
    background: #0e0b16;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Nav link hover gradient */
nav .nav-link {
    transition: all 0.3s ease;
}
nav .nav-link:hover {
    background: linear-gradient(to right, #7C3AED, #b9a3f5, #22b8cf);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 6s ease infinite;
}

/* ---- Resources Dropdown ---- */
.nav-dropdown-toggle .nav-dropdown-caret {
    transition: transform 0.3s ease;
}
.nav-dropdown[data-open="true"] .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown-panel {
    transform-origin: top right;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.nav-dropdown[data-open="true"] .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

.nav-dropdown-item:hover span.flex-1 > span:first-child {
    background: linear-gradient(to right, #7C3AED, #b9a3f5, #22b8cf);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 6s ease infinite;
}

/* Mobile dropdown accordion */
.mobile-dropdown-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.mobile-dropdown[data-open="true"] .mobile-dropdown-panel {
    max-height: 400px;
}
.mobile-dropdown[data-open="true"] .mobile-dropdown-caret {
    transform: rotate(180deg);
}
.mobile-dropdown-caret {
    transition: transform 0.3s ease;
}

/* ---- Ghost (gradient-outline) Button ----
   Uses the canonical "double-background + transparent border" trick:
   inner padding-box gets a translucent dark fill, outer border-box gets
   the gradient ring. Reliable across all evergreen browsers. */
.ghost-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image:
        linear-gradient(rgba(10, 10, 26, 0.55), rgba(10, 10, 26, 0.55)),
        linear-gradient(90deg, #7C3AED, #b9a3f5, #22b8cf);
    background-size: auto, 200% 200%;
    animation: gradient-shift 6s ease infinite;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease;
}
.ghost-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(124, 58, 237, 0.4);
    /* On hover, fill the ENTIRE box (including the 2px border area) with ONE
       solid gradient clipped to border-box, so there is no outline, ring, or
       seam at all - it just becomes the solid gradient. */
    background-image: linear-gradient(90deg, rgba(124, 58, 237, 0.95), rgba(34, 184, 207, 0.95));
    background-clip: border-box;
    background-origin: border-box;
    background-size: auto;
    animation: none;
}

/* ---- Range Slider (orbit themed, cross-browser) ----
   Used by ROI calculator and any future widget with a slider input.
   Track: dark glass with a purple->cyan gradient fill behind the thumb.
   Thumb: animated gradient circle with glow. */
input[type="range"].orbit-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    background: transparent;
    cursor: pointer;
    outline: none;
}
/* Webkit track */
input[type="range"].orbit-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 9999px;
    background:
        linear-gradient(90deg, #7C3AED 0%, #b9a3f5 50%, #22b8cf 100%) 0 / var(--orbit-range-fill, 50%) 100% no-repeat,
        rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Webkit thumb */
input[type="range"].orbit-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #c4b5fd 0%, #7C3AED 50%, #22b8cf 100%);
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 0 12px rgba(124, 58, 237, 0.7),
        0 0 28px rgba(34, 184, 207, 0.35);
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
input[type="range"].orbit-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow:
        0 0 18px rgba(124, 58, 237, 0.9),
        0 0 40px rgba(34, 184, 207, 0.5);
}
input[type="range"].orbit-range::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}
/* Firefox track */
input[type="range"].orbit-range::-moz-range-track {
    height: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
input[type="range"].orbit-range::-moz-range-progress {
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #7C3AED 0%, #b9a3f5 50%, #22b8cf 100%);
    background-size: 200% 200%;
    animation: gradient-shift 6s ease infinite;
}
/* Firefox thumb */
input[type="range"].orbit-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #c4b5fd 0%, #7C3AED 50%, #22b8cf 100%);
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 0 12px rgba(124, 58, 237, 0.7),
        0 0 28px rgba(34, 184, 207, 0.35);
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
input[type="range"].orbit-range::-moz-range-thumb:hover {
    transform: scale(1.15);
}
input[type="range"].orbit-range:focus-visible::-webkit-slider-thumb,
input[type="range"].orbit-range:focus-visible::-moz-range-thumb {
    outline: 2px solid rgba(185, 163, 245, 0.8);
    outline-offset: 3px;
}

/* Mobile menu hamburger animation */
#mobile-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}
#mobile-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}
#mobile-toggle.active .hamburger-line:nth-child(3) {
    width: 1.5rem;
    transform: translateY(-4px) rotate(-45deg);
}

/* ---- CSS Orbit System ---- */
.orbit-system {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Square so the rings stay circular; sized to fit its container. */
    width: min(100%, 80vh);
    aspect-ratio: 1 / 1;
    max-width: 760px;
    z-index: 1;
    pointer-events: none;
}

.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform-style: preserve-3d;
}

.orbit-ring-1 {
    width: 38%;
    height: 38%;
    transform: translate(-50%, -50%) rotateX(65deg);
    border: 1.5px solid rgba(124, 58, 237, 0.5);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.12), inset 0 0 20px rgba(124, 58, 237, 0.12);
}

.orbit-ring-2 {
    width: 55%;
    height: 55%;
    transform: translate(-50%, -50%) rotateX(65deg);
    border: 1.5px solid rgba(34, 184, 207, 0.48);
    box-shadow: 0 0 25px rgba(34, 184, 207, 0.11), inset 0 0 25px rgba(34, 184, 207, 0.11);
}

.orbit-ring-3 {
    width: 78%;
    height: 78%;
    transform: translate(-50%, -50%) rotateX(65deg);
    border: 1.5px solid rgba(185, 163, 245, 0.46);
    box-shadow: 0 0 30px rgba(185, 163, 245, 0.1), inset 0 0 30px rgba(185, 163, 245, 0.1);
}

.orbit-ring-4 {
    width: 46%;
    height: 46%;
    transform: translate(-50%, -50%) rotateX(65deg);
    border: 1.5px solid rgba(236, 72, 153, 0.48);
    box-shadow: 0 0 22px rgba(236, 72, 153, 0.1), inset 0 0 22px rgba(236, 72, 153, 0.1);
}

.orbit-ring-5 {
    width: 66%;
    height: 66%;
    transform: translate(-50%, -50%) rotateX(65deg);
    border: 1.5px solid rgba(56, 189, 248, 0.46);
    box-shadow: 0 0 28px rgba(56, 189, 248, 0.1), inset 0 0 28px rgba(56, 189, 248, 0.1);
}

/* Planets: orbital position driven by JS via --orbit-x / --orbit-y. */
.planet {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    --orbit-x: 0px;
    --orbit-y: 0px;
    transform: translate(calc(-50% + var(--orbit-x)), calc(-50% + var(--orbit-y)));
    will-change: transform;
}

.planet-1 {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 30% 25%, #c4b5fd 0%, #7C3AED 45%, #4c1d95 100%);
    box-shadow:
        0 0 20px rgba(124, 58, 237, 0.7),
        0 0 50px rgba(124, 58, 237, 0.3),
        inset -3px -3px 6px rgba(0, 0, 0, 0.4);
}

.planet-2 {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 30% 25%, #a5f3fc 0%, #22b8cf 45%, #0e7490 100%);
    box-shadow:
        0 0 15px rgba(34, 184, 207, 0.7),
        0 0 40px rgba(34, 184, 207, 0.3),
        inset -2px -2px 5px rgba(0, 0, 0, 0.4);
}

.planet-3 {
    width: 23px;
    height: 23px;
    background: radial-gradient(circle at 30% 25%, #e0d5ff 0%, #b9a3f5 45%, #7c3aed 100%);
    box-shadow:
        0 0 12px rgba(185, 163, 245, 0.7),
        0 0 30px rgba(185, 163, 245, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.4);
}

.planet-4 {
    width: 15px;
    height: 15px;
    background: radial-gradient(circle at 30% 25%, #fbb6ce 0%, #ec4899 45%, #be185d 100%);
    box-shadow:
        0 0 14px rgba(236, 72, 153, 0.7),
        0 0 35px rgba(236, 72, 153, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.4);
}

.planet-5 {
    width: 32px;
    height: 32px;
    background: radial-gradient(circle at 30% 25%, #bae6fd 0%, #38bdf8 45%, #0284c7 100%);
    box-shadow:
        0 0 10px rgba(56, 189, 248, 0.7),
        0 0 25px rgba(56, 189, 248, 0.3),
        inset -2px -2px 4px rgba(0, 0, 0, 0.4);
}

/* Central Orb: warm gold star at center of orbits */
.orbit-center-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.97) 0%, rgba(251, 191, 36, 0.8) 34%, rgba(245, 158, 11, 0.34) 64%, transparent 100%);
    border-radius: 50%;
    box-shadow:
        0 0 26px rgba(251, 191, 36, 0.55),
        0 0 65px rgba(251, 191, 36, 0.3),
        0 0 130px rgba(245, 158, 11, 0.14);
    animation: center-pulse 4s ease-in-out infinite alternate;
}

.orbit-center-glow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.07) 0%, transparent 70%);
    border-radius: 50%;
}

@keyframes center-pulse {
    0% { box-shadow: 0 0 26px rgba(251,191,36,0.55), 0 0 65px rgba(251,191,36,0.3), 0 0 130px rgba(245,158,11,0.14); }
    100% { box-shadow: 0 0 38px rgba(251,191,36,0.66), 0 0 85px rgba(251,191,36,0.4), 0 0 165px rgba(245,158,11,0.2); }
}

/* Mobile: scale down planets + orb only (rings are % based, auto-scale) */
@media (max-width: 768px) {
    .planet-1 { width: 9px; height: 9px; }
    .planet-2 { width: 14px; height: 14px; }
    .planet-3 { width: 16px; height: 16px; }
    .planet-4 { width: 11px; height: 11px; }
    .planet-5 { width: 23px; height: 23px; }
    .orbit-center-glow { width: 30px; height: 30px; }
}

@media (max-width: 480px) {
    .planet-1 { width: 7px; height: 7px; }
    .planet-2 { width: 11px; height: 11px; }
    .planet-3 { width: 12px; height: 12px; }
    .planet-4 { width: 8px; height: 8px; }
    .planet-5 { width: 17px; height: 17px; }
    .orbit-center-glow { width: 22px; height: 22px; }
}

/* ---- Star Field ---- */
#star-field {
    background:
        radial-gradient(1px 1px at 8% 15%, rgba(255,255,255,0.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 55%, rgba(255,255,255,0.12) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 8%, rgba(255,255,255,0.18) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 35%, rgba(255,255,255,0.10) 0%, transparent 100%),
        radial-gradient(1px 1px at 82% 72%, rgba(255,255,255,0.14) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 20%, rgba(255,255,255,0.12) 0%, transparent 100%),
        radial-gradient(1px 1px at 18% 88%, rgba(255,255,255,0.10) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 65%, rgba(255,255,255,0.08) 0%, transparent 100%),
        radial-gradient(1px 1px at 72% 90%, rgba(255,255,255,0.12) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 15% 40%, rgba(124,58,237,0.15) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 80% 25%, rgba(34, 184, 207,0.12) 0%, transparent 100%);
}

#star-field::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1px 1px at 5% 42%, rgba(255,255,255,0.10) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 78%, rgba(255,255,255,0.08) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 18%, rgba(255,255,255,0.12) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 55%, rgba(255,255,255,0.10) 0%, transparent 100%),
        radial-gradient(1px 1px at 48% 92%, rgba(255,255,255,0.08) 0%, transparent 100%);
    animation: twinkle 10s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ---- Integration Logo Strip ---- */
.logo-item {
    transition: all 0.3s ease;
}
.logo-item:hover {
    background: linear-gradient(to right, #7C3AED, #b9a3f5, #22b8cf);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 6s ease infinite;
}

.logo-strip-wrapper {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-strip {
    animation: logo-scroll 90s linear infinite;
    width: max-content;
}

@keyframes logo-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.logo-strip:hover {
    animation-play-state: paused;
}

/* ---- About Section Animations ---- */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

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

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

/* ---- Why Orbit: Orbiting Planets ---- */
.about-orbit-path {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.about-orbit-path-1 { animation: spin-slow 20s linear infinite; }
.about-orbit-path-2 { animation: spin-slow 28s linear infinite; }
.about-orbit-path-3 { animation: spin-slow 35s linear infinite; }

.about-planet {
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.about-planet-1 {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 30% 25%, #c4b5fd 0%, #7C3AED 60%);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.7), 0 0 30px rgba(124, 58, 237, 0.3);
}

.about-planet-2 {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 30% 25%, #a5f3fc 0%, #22b8cf 60%);
    box-shadow: 0 0 10px rgba(34, 184, 207, 0.7), 0 0 25px rgba(34, 184, 207, 0.3);
}

.about-planet-3 {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 25%, #e0d5ff 0%, #b9a3f5 60%);
    box-shadow: 0 0 8px rgba(185, 163, 245, 0.7), 0 0 20px rgba(185, 163, 245, 0.3);
}

@media (max-width: 768px) {
    .about-planet-1 { width: 10px; height: 10px; }
    .about-planet-2 { width: 8px; height: 8px; }
    .about-planet-3 { width: 6px; height: 6px; }
}

/* ---- Gradient Text Shimmer ---- */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

h1 .bg-gradient-to-r,
h2 .bg-gradient-to-r,
.gradient-text {
    background-size: 200% 200%;
    animation: gradient-shift 6s ease infinite;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .about-visual {
        width: 260px !important;
        height: 260px !important;
    }
}

/* ---- Smooth Anchor Offset (for sticky nav) ---- */
[id] {
    scroll-margin-top: 80px;
}

/* ---- Cursor Glow Effect (desktop only) ---- */
.cursor-glow {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

@media (hover: none) {
    .cursor-glow { display: none; }
}

/* Hide scroll indicator on short viewports to prevent overlap */
@media (max-height: 650px) {
    #dash-hero > .absolute {
        display: none;
    }
}

/* Tighten hero on small screens */
@media (max-width: 640px) {
    #dash-hero .pt-20 {
        padding-top: 5rem;
    }
    #dash-hero .pb-28 {
        padding-bottom: 5rem;
    }
}

/* ---- Scroll Hint Animation (centered bounce) ---- */
@keyframes scroll-hint {
    0%, 100% { transform: translateY(6px); }
    50% { transform: translateY(-6px); }
}

/* ---- Mobile Polish ---- */

/* Disable hover transforms on touch devices (prevents sticky hover on tap) */
@media (hover: none) {
    .glass-card:hover {
        transform: none;
        box-shadow: none;
    }
}


/* ---- Orbit Logo System ---- */
.orbit-logo {
    display: inline-block;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    position: relative;
}

/* Animated gradient for purple elements: O, i-dot, period */
.orbit-logo .orbit-O,
.orbit-logo .orbit-dot {
    background: linear-gradient(to right, #7C3AED, #b9a3f5, #22b8cf);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 6s ease infinite;
}

/* The i: white stem with gradient dot on top */
.orbit-logo .orbit-i {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    -webkit-text-fill-color: transparent;
}
/* Full white "i" as the base layer */
.orbit-logo .orbit-i::before {
    content: 'i';
    position: absolute;
    top: 0; left: 0;
    -webkit-text-fill-color: white;
}
/* Gradient overlay clipped to just the dot (top 30%) */
.orbit-logo .orbit-i::after {
    content: 'i';
    position: absolute;
    top: 0; left: 0;
    background: linear-gradient(to right, #7C3AED, #b9a3f5, #22b8cf);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 6s ease infinite;
    clip-path: inset(0 0 70% 0);
}

/* Brand suffix: plain white "Dashboard" appended after the animated "Orbit." wordmark */
.orbit-logo-suffix {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    margin-left: 0.18em;
}

/* ============================================
   MISSION LOG SHELL: used by Documents (and Dispatches)
   Sticky-sidebar layout, TOC scroll-progress, prose
   styles for rendered markdown.
   ============================================ */

.mission-log-toc .toc-link {
    transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
}
.mission-log-toc .toc-link:hover {
    color: #fff;
    border-left-color: rgba(185, 163, 245, 0.4);
}
.mission-log-toc .toc-link.is-active {
    color: #fff;
    border-left-color: #b9a3f5;
    padding-left: 0.875rem;
}

/* ---- Glossary cross-link spans (rendered by render-docs from glossary: links) ---- */
.glossary-term {
    border-bottom: 1px dashed rgba(185, 163, 245, 0.5);
    cursor: help;
    color: #c4b5fd;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}
.glossary-term:hover {
    color: #fff;
    border-bottom-color: #22b8cf;
}
.glossary-term:focus-visible {
    outline: 2px solid rgba(124, 58, 237, 0.65);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- Prose styles for rendered markdown body ---- */
.prose-mission {
    color: rgb(209, 213, 219); /* gray-300 */
    font-size: 1.0625rem;
    line-height: 1.75;
}
.prose-mission > * + * {
    margin-top: 1.25rem;
}
.prose-mission h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.25;
    color: #fff;
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.prose-mission h2:first-child { margin-top: 0; }
.prose-mission h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.prose-mission h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 1.0625rem;
    color: #e5e7eb;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.prose-mission p {
    color: rgb(209, 213, 219);
}
.prose-mission strong {
    color: #fff;
    font-weight: 600;
}
.prose-mission em { color: #e5e7eb; }
.prose-mission a {
    color: #b9a3f5;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(185, 163, 245, 0.35);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.prose-mission a:hover {
    color: #fff;
    text-decoration-color: #22b8cf;
}
.prose-mission ul,
.prose-mission ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}
.prose-mission ul { list-style: disc; }
.prose-mission ol { list-style: decimal; }
.prose-mission li { margin: 0.4rem 0; color: rgb(209, 213, 219); }
.prose-mission li::marker { color: #b9a3f5; }
.prose-mission ul li input[type="checkbox"] {
    margin-right: 0.5rem;
    accent-color: #7C3AED;
}
.prose-mission blockquote {
    border-left: 3px solid #7C3AED;
    background: rgba(124, 58, 237, 0.06);
    padding: 0.75rem 1rem;
    margin: 1.25rem 0;
    color: #e5e7eb;
    border-radius: 0 0.5rem 0.5rem 0;
}
.prose-mission code {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
    color: #c4b5fd;
    font-family: 'Space Grotesk', sans-serif;
}
.prose-mission pre {
    background: rgba(6, 6, 15, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}
.prose-mission pre code {
    background: transparent;
    border: none;
    padding: 0;
    color: #e5e7eb;
}
.prose-mission hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 2.5rem 0;
}
.prose-mission table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    overflow: hidden;
}
.prose-mission thead {
    background: rgba(124, 58, 237, 0.08);
}
.prose-mission th,
.prose-mission td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.prose-mission th {
    color: #fff;
    font-weight: 600;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}
.prose-mission tbody tr:last-child td { border-bottom: none; }
.prose-mission img {
    max-width: 100%;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Reset margin on direct children of the not-prose callout so prose-mission
   rules don't bleed into the "What's next?" card or download buttons. */
.prose-mission .not-prose,
.prose-mission .not-prose * {
    margin-top: 0;
}

/* ---- Document hub cards: keep glass-card transform but stronger
   border emphasis on the colored accent. ---- */
.doc-card {
    text-decoration: none;
}
.doc-card[data-status="drafting"] {
    cursor: not-allowed;
}
.doc-card[data-status="drafting"]:hover {
    transform: translateY(-2px);
}

/* ============================================
   TOOLS PAGES (Phase 10.3+)
   Shared input + result patterns across every tool page.
   ============================================ */

/* ---- Inputs ---- */
.tool-input {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.625rem;
    padding: 0.625rem 0.875rem;
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    transition: border-color 200ms, background 200ms;
    outline: none;
}
.tool-input:hover {
    border-color: rgba(58,166,174,0.3);
}
.tool-input:focus {
    border-color: rgba(14,124,134,0.6);
    background: rgba(14,124,134,0.05);
}
.tool-input::-webkit-outer-spin-button,
.tool-input::-webkit-inner-spin-button {
    opacity: 0.4;
}

.tool-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: #7C3AED;
    cursor: pointer;
}

/* ---- Result cards ---- */
.tool-result-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(14,124,134,0.12), transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(58,166,174,0.08), transparent 60%),
        var(--card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: border-color 300ms;
}
.tool-result-card.roi-positive {
    border-color: rgba(52, 211, 153, 0.5);
}
.tool-result-card.roi-positive #roi-out-net-annual {
    background: linear-gradient(90deg, #34d399, var(--card));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.tool-result-card.roi-negative {
    border-color: rgba(248, 113, 113, 0.5);
}
.tool-result-card.roi-negative #roi-out-net-annual {
    color: #dc2626;
}

/* ---- Token Cost: per-row bar chart ---- */
.tc-row {
    transition: border-color 200ms, transform 200ms;
}
.tc-row:hover {
    border-color: rgba(58,166,174,0.3);
    transform: translateY(-1px);
}
.tc-row-highlight {
    border-color: rgba(14,124,134,0.5) !important;
    background:
        linear-gradient(90deg, rgba(14,124,134,0.08), transparent 80%),
        var(--card);
}
.tc-bar-track {
    height: 6px;
    background: var(--line-soft);
    border-radius: 999px;
    overflow: hidden;
}
.tc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--card), #3aa6ae, var(--card));
    border-radius: 999px;
    transition: width 350ms ease-out;
}

/* ---- Token Cost: vendor filter chips ---- */
.tc-vendor-chip {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    transition: border-color 200ms, color 200ms, background 200ms;
}
.tc-vendor-chip:hover {
    border-color: rgba(58,166,174,0.4);
    color: var(--text);
}
.tc-vendor-chip-active {
    border-color: rgba(14,124,134,0.6);
    background: linear-gradient(90deg, rgba(14,124,134,0.18), rgba(58,166,174,0.12));
    color: var(--text);
}

/* ---- Readiness Quiz: option pills ---- */
.rq-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.rq-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 200ms, background 200ms, color 200ms;
}
.rq-option:hover {
    border-color: rgba(58,166,174,0.4);
    color: var(--text);
}
.rq-option input {
    accent-color: #7C3AED;
}
.rq-option:has(input:checked) {
    border-color: rgba(14,124,134,0.65);
    background: linear-gradient(90deg, rgba(14,124,134,0.16), rgba(58,166,174,0.10));
    color: var(--text);
}
.rq-option:focus-within {
    outline: 2px solid rgba(14,124,134,0.65);
    outline-offset: 2px;
}
.bvb-option:focus-within {
    outline: 2px solid rgba(14,124,134,0.65);
    outline-offset: 2px;
}
.rq-bar-track {
    height: 6px;
    background: var(--line-soft);
    border-radius: 999px;
    overflow: hidden;
}
.rq-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--card), #3aa6ae, var(--card));
    border-radius: 999px;
    transition: width 350ms ease-out;
}
/* Fixed reading-progress hairline for dispatches on mobile/tablet.
   Desktop (lg+) uses the sticky TOC sidebar instead, so this is hidden there. */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}
.reading-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #7C3AED, #b9a3f5, #22b8cf);
    border-radius: 0 999px 999px 0;
    transition: width 200ms ease-out;
}
@media (min-width: 1024px) {
    .reading-progress { display: none; }
}
/* Use-case FEATURES rhythm (centralized so spacing is one-edit tunable). */
.uc-features {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.uc-feature-stack > * + * {
    margin-top: 6rem;
}
@media (min-width: 768px) {
    .uc-features {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .uc-feature-stack > * + * {
        margin-top: 8rem;
    }
}
.rq-score-ring {
    width: 96px;
    height: 96px;
    border-radius: 999px;
    border: 2px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- Build vs Buy: option cards ---- */
.bvb-option {
    display: block;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    transition: border-color 200ms, background 200ms, transform 200ms;
}
.bvb-option:hover {
    border-color: rgba(58,166,174,0.4);
    transform: translateY(-1px);
}
.bvb-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.bvb-option:has(input:checked) {
    border-color: rgba(14,124,134,0.65);
    background: linear-gradient(135deg, rgba(14,124,134,0.14), rgba(58,166,174,0.08));
}
.bvb-option-body {
    display: block;
}
.bvb-spectrum-track {
    position: relative;
    height: 8px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.4), rgba(14,124,134,0.4) 50%, rgba(58,166,174,0.4));
    border-radius: 999px;
}
.bvb-spectrum-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, #f59e0b, var(--card) 50%, var(--card));
    border-radius: 999px;
    transition: width 400ms ease-out;
}
.bvb-spectrum-marker {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid var(--line);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px rgba(58,166,174,0.6);
    transition: left 400ms ease-out;
}

/* ---- Context Window Visualizer: bars ---- */
.cw-bar-track {
    position: relative;
    height: 22px;
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}
.cw-bar-zone {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: rgba(14,124,134,0.18);
    border-right: 1px dashed rgba(58,166,174,0.5);
}
.cw-bar-doc {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, var(--card), #3aa6ae);
    border-radius: 8px 0 0 8px;
    transition: width 350ms ease-out;
    z-index: 1;
}
.cw-bar-doc-overflow {
    background: linear-gradient(90deg, #f87171, #fbbf24);
    border-radius: 8px;
}

/* ---- Workflow Mapper ---- */
.wm-tag-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.wm-tag-manual    { background: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.5); }
.wm-tag-rule      { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
.wm-tag-judgment  { background: var(--card); box-shadow: 0 0 8px rgba(58,166,174,0.5); }
.wm-tag-decision  { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.wm-legend-row {
    border: 1px solid var(--line-soft);
    background: var(--card);
    border-radius: 12px;
    padding: 12px;
}
.wm-step {
    transition: border-color 200ms, transform 200ms, opacity 200ms;
}
.wm-step:hover {
    border-color: rgba(58,166,174,0.3);
}
.wm-step[draggable="true"] .wm-handle:active {
    cursor: grabbing;
}
.wm-remove:focus-visible {
    outline: 2px solid rgba(248, 113, 113, 0.6);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- Data Sensitivity Classifier ---- */
.ds-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--card);
    cursor: pointer;
    transition: border-color 200ms, background 200ms;
}
.ds-check:hover {
    border-color: rgba(58,166,174,0.35);
}
.ds-check input[type="checkbox"] {
    margin-top: 2px;
    accent-color: #7C3AED;
    flex-shrink: 0;
}
.ds-check:has(input:checked) {
    border-color: rgba(14,124,134,0.6);
    background: linear-gradient(90deg, rgba(14,124,134,0.14), rgba(58,166,174,0.08));
}
.ds-check:focus-within {
    outline: 2px solid rgba(14,124,134,0.65);
    outline-offset: 2px;
}
.ds-check-body { flex: 1; min-width: 0; }
.ds-check-compact { padding: 8px 10px; }

.ds-framework-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(14,124,134,0.4);
    background: rgba(14,124,134,0.1);
    color: var(--text);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    text-decoration: none;
    transition: border-color 200ms, background 200ms, color 200ms;
}
.ds-framework-pill:hover {
    border-color: rgba(58,166,174,0.6);
    background: rgba(58,166,174,0.12);
    color: var(--teal-deep);
}

.ds-deploy-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--line-soft);
    background: var(--card);
}
.ds-deploy-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-top: 6px;
    flex-shrink: 0;
}
.ds-deploy-dot.bg-emerald-400 { box-shadow: 0 0 10px rgba(52, 211, 153, 0.55); }
.ds-deploy-dot.bg-amber-400   { box-shadow: 0 0 10px rgba(251, 191, 36, 0.55); }
.ds-deploy-dot.bg-red-400     { box-shadow: 0 0 10px rgba(248, 113, 113, 0.55); }

.ds-practice-check {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ---- Tools hub: card states ---- */
.tool-card {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: border-color 300ms, transform 300ms;
}
.tool-card[data-status="planned"] {
    cursor: not-allowed;
    opacity: 0.85;
}
.tool-card[data-status="planned"]:hover {
    transform: translateY(-2px);
}
.tool-card[data-status="live"]:hover {
    transform: translateY(-3px);
}

/* ============================================
   DISPATCHES (blog): hub cards + post styles
   ============================================ */
.dispatch-card {
    text-decoration: none;
    transition: border-color 300ms, transform 300ms;
}
.dispatch-card:hover {
    transform: translateY(-2px);
    border-color: rgba(185, 163, 245, 0.4);
}

/* ---- Glossary inline tooltip (overlay positioned via JS) ---- */
.glossary-tooltip {
    position: absolute;
    z-index: 80;
    pointer-events: auto;
    width: 360px;
    max-width: min(360px, calc(100vw - 1.5rem));
    background: rgba(10, 10, 26, 0.96);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(185, 163, 245, 0.4);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(124, 58, 237, 0.15);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease;
}
.glossary-tooltip.glossary-tooltip-visible {
    opacity: 1;
    transform: translateY(0);
}
.glossary-tooltip-term {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 0.875rem;
    margin-bottom: 6px;
}
.glossary-tooltip-short {
    color: #c4b5fd;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 8px;
}
.glossary-tooltip-long {
    color: #d1d5db;
    font-size: 0.75rem;
    line-height: 1.55;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 8px;
}

/* ---- Before/After Email widget ---- */
.before-after-email {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 16px;
    overflow: hidden;
}
.bae-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(14,124,134,0.05);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.bae-toolbar-spacer { flex: 1; }
.bae-tablist {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.bae-tab {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    transition: border-color 200ms, background 200ms, color 200ms;
}
.bae-tab:hover {
    border-color: rgba(58,166,174,0.4);
    color: var(--text);
}
.bae-tab-active {
    border-color: rgba(14,124,134,0.65);
    background: linear-gradient(90deg, rgba(14,124,134,0.18), rgba(58,166,174,0.12));
    color: var(--text);
}
.bae-tab:focus-visible {
    outline: 2px solid rgba(14,124,134,0.65);
    outline-offset: 2px;
}
.bae-tab-notes .bae-notes-icon {
    color: var(--teal-deep);
    margin-left: 4px;
}

.bae-panels { padding: 16px 18px; }
.bae-panel-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 8px;
}
.bae-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
.bae-dot-before { background: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.5); }
.bae-dot-after  { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }

.bae-email {
    background: rgba(6, 6, 15, 0.7);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 14px 16px;
    overflow-x: auto;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ink-2);
    margin: 0;
}
.bae-email code {
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    display: block;
}
.bae-line {
    display: block;
    border-radius: 4px;
    padding: 0 4px;
    margin: 0 -4px;
    transition: background 200ms ease;
}
.bae-line-highlight {
    background: rgba(58,166,174,0.2);
    box-shadow: inset 3px 0 0 #3aa6ae;
}

.bae-panel-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 900px) {
    .bae-panel-pair {
        grid-template-columns: 1fr 1fr;
    }
}
.bae-pair-col { min-width: 0; }

.bae-notes {
    border-top: 1px solid var(--line);
    background: rgba(14,124,134,0.04);
    padding: 16px 18px;
}
.bae-notes-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 0.875rem;
    margin: 0 0 10px;
}
.bae-notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bae-notes-hint {
    font-size: 0.75rem;
    color: var(--muted);
    margin: -4px 0 12px;
    line-height: 1.5;
}
.bae-notes-list li {
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 0.8125rem;
    line-height: 1.55;
    cursor: pointer;
    transition: background 200ms, border-color 200ms, box-shadow 200ms;
    border: 1px solid transparent;
    position: relative;
}
.bae-notes-list li + li { margin-top: 6px; }
.bae-notes-list li:hover {
    background: rgba(14,124,134,0.08);
    border-color: rgba(58,166,174,0.18);
}
.bae-notes-list li:focus-visible {
    outline: 2px solid rgba(58,166,174,0.55);
    outline-offset: 2px;
}
.bae-notes-list li.bae-note-active {
    background: rgba(14,124,134,0.18);
    border-color: rgba(58,166,174,0.55);
    box-shadow: 0 0 0 1px rgba(58,166,174,0.25), 0 6px 18px rgba(14,124,134,0.18);
    color: var(--text);
}
.bae-notes-list li.bae-note-active::before {
    content: '';
    position: absolute;
    left: -1px; top: -1px; bottom: -1px;
    width: 3px;
    border-radius: 8px 0 0 8px;
    background: linear-gradient(180deg, #3aa6ae, var(--card));
}
.bae-notes-list li strong { color: var(--text); }

/* ============================================
   Inline ROI Calc (mini)
   ============================================ */
.roi-calc-mini { display: block; margin: 0; }
.rcm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
}
@media (min-width: 700px) {
    .rcm-grid { grid-template-columns: 1.2fr 1fr; }
}
.rcm-inputs { display: flex; flex-direction: column; gap: 12px; }
.rcm-field { display: flex; flex-direction: column; gap: 6px; }
.rcm-label {
    font-size: 0.75rem;
    color: var(--muted);
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rcm-input {
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color 200ms;
}
.rcm-input:focus {
    outline: none;
    border-color: rgba(58,166,174,0.55);
}
.rcm-output {
    background: linear-gradient(135deg, rgba(14,124,134,0.12), rgba(58,166,174,0.10));
    border: 1px solid rgba(58,166,174,0.25);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rcm-output-label {
    font-size: 0.7rem;
    color: var(--teal-deep);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: 8px;
}
.rcm-output-value {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    color: var(--text);
    line-height: 1.05;
    background: linear-gradient(90deg, #3aa6ae, var(--card));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rcm-output-sub {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 6px;
}

/* ============================================
   Inline Token Cost (mini)
   ============================================ */
.token-cost-mini { display: block; margin: 0; }
.tcm-card { display: flex; flex-direction: column; gap: 14px; }
.tcm-inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 640px) {
    .tcm-inputs { grid-template-columns: 1fr 1fr; }
    .tcm-toggle { grid-column: 1 / -1; }
}
.tcm-field { display: flex; flex-direction: column; gap: 5px; }
.tcm-label {
    font-size: 0.7rem;
    color: var(--muted);
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tcm-input {
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 0.9rem;
    transition: border-color 200ms;
    width: 100%;
}
.tcm-input:focus { outline: none; border-color: rgba(58,166,174,0.55); }
.tcm-toggle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
}
.tcm-toggle input { accent-color: #7C3AED; }
.tcm-results { display: flex; flex-direction: column; gap: 10px; }
.tcm-row {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
}
.tcm-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.tcm-row-name {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
}
.tcm-row-cost {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: var(--text);
    font-size: 1rem;
}
.tcm-row-unit { color: var(--muted); font-weight: 500; font-size: 0.7rem; margin-left: 2px; }
.tcm-bar-track {
    height: 4px;
    background: var(--line-soft);
    border-radius: 4px;
    margin: 6px 0;
    overflow: hidden;
}
.tcm-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--card), var(--card));
    transition: width 300ms ease;
}
.tcm-row-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--muted);
    font-family: 'Space Grotesk', sans-serif;
}
.tcm-saved {
    color: #047857;
    border: 1px solid rgba(52,211,153,0.3);
    background: rgba(52,211,153,0.08);
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.65rem;
}
.tcm-loading, .tcm-error { font-size: 0.85rem; color: var(--muted); }
.tcm-error { color: #dc2626; }
.tcm-footer {
    font-size: 0.7rem;
    color: var(--muted);
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tcm-link { color: var(--teal-deep); text-decoration: none; transition: color 150ms; }
.tcm-link:hover { color: var(--teal-deep); }

/* ============================================
   Inline Poll
   ============================================ */
.inline-poll { display: block; margin: 0; }
.poll-eyebrow {
    font-size: 0.65rem;
    color: var(--teal-deep);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: 8px;
}
.poll-question {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 1.05rem;
    margin: 0 0 14px;
}
.poll-body { display: flex; flex-direction: column; gap: 8px; }
.poll-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--ink-2);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 200ms, border-color 200ms, transform 100ms;
}
.poll-option:hover {
    background: rgba(14,124,134,0.08);
    border-color: rgba(58,166,174,0.35);
    color: var(--text);
}
.poll-option:focus-visible {
    outline: 2px solid rgba(58,166,174,0.6);
    outline-offset: 2px;
}
.poll-option:active { transform: scale(0.99); }
.poll-option-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(58,166,174,0.45);
    flex-shrink: 0;
}
.poll-option:hover .poll-option-dot { border-color: #3aa6ae; box-shadow: 0 0 8px rgba(58,166,174,0.5); }
.poll-result {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
}
.poll-result-voted {
    background: rgba(14,124,134,0.12);
    border-color: rgba(58,166,174,0.45);
}
.poll-result-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.poll-result-label { font-size: 0.875rem; color: var(--ink-2); font-weight: 500; }
.poll-result-pct {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: var(--text);
    font-size: 1rem;
}
.poll-result-track {
    height: 6px;
    background: var(--line-soft);
    border-radius: 6px;
    overflow: hidden;
}
.poll-result-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--card), var(--card));
    transition: width 500ms ease;
}
.poll-result-count {
    font-size: 0.7rem;
    color: var(--muted);
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-block;
    margin-top: 4px;
}
.poll-check { color: var(--teal-deep); font-weight: 700; }
.poll-footer {
    margin-top: 12px;
    font-size: 0.7rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.poll-disclaimer {
    color: var(--muted);
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6rem;
}

/* ============================================
   Workflow Diagram (Manual vs. Automated)
   ============================================ */
.workflow-diagram { display: block; margin: 0; }
.wd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
@media (min-width: 820px) {
    .wd-grid {
        grid-template-columns: 1fr auto 1fr;
        gap: 18px;
    }
}
.wd-col { display: flex; flex-direction: column; gap: 10px; }
.wd-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--muted);
    margin-bottom: 4px;
}
.wd-col-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wd-col-dot-manual { background: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.5); }
.wd-col-dot-auto { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
.wd-step {
    display: flex;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 500ms ease, transform 500ms ease;
}
.wd-step-manual { transform: translateX(-12px); }
.wd-step-auto { transform: translateX(12px); }
.wd-visible .wd-step { opacity: 1; transform: translateX(0); }
.wd-visible .wd-step-manual:nth-child(2) { transition-delay: 0ms; }
.wd-visible .wd-step-manual:nth-child(3) { transition-delay: 80ms; }
.wd-visible .wd-step-manual:nth-child(4) { transition-delay: 160ms; }
.wd-visible .wd-step-manual:nth-child(5) { transition-delay: 240ms; }
.wd-visible .wd-step-manual:nth-child(6) { transition-delay: 320ms; }
.wd-visible .wd-step-auto:nth-child(2) { transition-delay: 200ms; }
.wd-visible .wd-step-auto:nth-child(3) { transition-delay: 280ms; }
.wd-visible .wd-step-auto:nth-child(4) { transition-delay: 360ms; }
.wd-visible .wd-step-auto:nth-child(5) { transition-delay: 440ms; }
.wd-visible .wd-step-auto:nth-child(6) { transition-delay: 520ms; }
.wd-step-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(58,166,174,0.15);
    color: var(--teal-deep);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wd-step-body { flex: 1; min-width: 0; }
.wd-step-actor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #dc2626;
    border: 1px solid rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.08);
    padding: 2px 6px;
    border-radius: 999px;
    margin-bottom: 6px;
}
.wd-step-actor-bot {
    color: #047857;
    border-color: rgba(52, 211, 153, 0.3);
    background: rgba(52, 211, 153, 0.08);
}
.wd-step-text { font-size: 0.85rem; color: var(--ink-2); line-height: 1.45; }
.wd-step-saved {
    display: inline-block;
    margin-top: 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--teal-deep);
    border: 1px solid rgba(58,166,174,0.4);
    background: rgba(58,166,174,0.08);
    padding: 2px 8px;
    border-radius: 999px;
}
.wd-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 6px;
}
@media (max-width: 819px) {
    .wd-arrow { flex-direction: row; padding: 8px 0; }
}
.wd-arrow-track {
    width: 4px;
    height: 80px;
    background: var(--line-soft);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
@media (max-width: 819px) {
    .wd-arrow-track { width: 100%; max-width: 200px; height: 4px; }
}
.wd-arrow-pulse {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, var(--card) 50%, transparent 100%);
    transform: translateY(-100%);
    transition: transform 1200ms ease;
}
@media (max-width: 819px) {
    .wd-arrow-pulse { background: linear-gradient(90deg, transparent 0%, var(--card) 50%, transparent 100%); transform: translateX(-100%); }
}
.wd-visible .wd-arrow-pulse { animation: wd-pulse 1800ms ease-in-out 600ms infinite; }
@keyframes wd-pulse {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}
@media (max-width: 819px) {
    @keyframes wd-pulse {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
}
.wd-arrow-label {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.6rem;
    color: var(--teal-deep);
}
.wd-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
@media (min-width: 600px) {
    .wd-summary { grid-template-columns: 1fr 1fr; gap: 14px; }
}
.wd-summary-row {
    background: linear-gradient(135deg, rgba(14,124,134,0.08), rgba(58,166,174,0.06));
    border: 1px solid rgba(58,166,174,0.2);
    border-radius: 10px;
    padding: 10px 14px;
}
.wd-summary-label {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6rem;
    color: var(--teal-deep);
    margin-bottom: 4px;
}
.wd-summary-val { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; color: var(--text); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
    .wd-step { transition: none; }
    .wd-arrow-pulse { animation: none; opacity: 0.5; }
}

/* ============================================
   Architecture Diagram (Animated timeline)
   ============================================ */
.architecture-diagram { display: block; margin: 0; }
.ad-wrap { padding: 6px 0; }
.ad-track-label {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
    color: var(--teal-deep);
    margin-bottom: 14px;
}
.ad-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.ad-line {
    position: absolute;
    left: 17px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: var(--line-soft);
    border-radius: 2px;
    overflow: hidden;
}
.ad-line-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--card), #3aa6ae, var(--card));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1400ms ease;
}
.ad-visible .ad-line-fill { transform: scaleY(1); }
.ad-stage {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms ease, transform 500ms ease;
}
.ad-visible .ad-stage { opacity: 1; transform: translateY(0); }
.ad-visible .ad-stage:nth-child(2) { transition-delay: 100ms; }
.ad-visible .ad-stage:nth-child(3) { transition-delay: 250ms; }
.ad-visible .ad-stage:nth-child(4) { transition-delay: 400ms; }
.ad-visible .ad-stage:nth-child(5) { transition-delay: 550ms; }
.ad-visible .ad-stage:nth-child(6) { transition-delay: 700ms; }
.ad-visible .ad-stage:nth-child(7) { transition-delay: 850ms; }
.ad-visible .ad-stage:nth-child(8) { transition-delay: 1000ms; }
.ad-stage-marker {
    flex-shrink: 0;
    width: 36px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4px;
    z-index: 1;
}
.ad-stage-dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--card), var(--card));
    border: 2px solid rgba(58,166,174,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px rgba(14,124,134,0.06), 0 0 20px rgba(14,124,134,0.25);
}
.ad-stage-num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--teal-deep);
    font-size: 0.85rem;
}
.ad-stage-card { flex: 1; min-width: 0; }
.ad-stage-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.ad-stage-month {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6rem;
    color: var(--teal-deep);
}
.ad-stage-tag {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.55rem;
    color: var(--teal-deep);
    border: 1px solid rgba(58,166,174,0.3);
    background: rgba(58,166,174,0.06);
    padding: 1px 6px;
    border-radius: 999px;
}
.ad-stage-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
    margin: 2px 0 4px;
}
.ad-stage-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin: 0; }
@media (prefers-reduced-motion: reduce) {
    .ad-stage { transition: none; }
    .ad-line-fill { transition: none; }
}

/* ============================================
   Decision Tree
   ============================================ */
.decision-tree { display: block; margin: 0; }
.dt-progress {
    height: 4px;
    background: var(--line-soft);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 14px;
}
.dt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--card), #3aa6ae, var(--card));
    transition: width 350ms ease;
}
.dt-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 8px;
}
.dt-back, .dt-restart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.7rem;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 200ms, border-color 200ms, color 200ms;
}
.dt-back:hover:not(:disabled), .dt-restart:hover {
    background: rgba(58,166,174,0.08);
    border-color: rgba(58,166,174,0.3);
    color: var(--text);
}
.dt-back:disabled { opacity: 0.4; cursor: not-allowed; }
.dt-stage { min-height: 200px; }
.dt-step-num {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6rem;
    color: var(--teal-deep);
    margin-bottom: 8px;
}
.dt-question {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 1.15rem;
    margin: 0 0 8px;
    line-height: 1.35;
}
.dt-hint {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 14px;
    line-height: 1.5;
}
.dt-options { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dt-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
    transition: background 200ms, border-color 200ms, transform 100ms;
    font-size: 0.9rem;
}
.dt-option:hover {
    background: rgba(14,124,134,0.08);
    border-color: rgba(58,166,174,0.4);
    color: var(--text);
}
.dt-option:focus-visible {
    outline: 2px solid rgba(58,166,174,0.6);
    outline-offset: 2px;
}
.dt-option:active { transform: scale(0.99); }
.dt-option-marker {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: rgba(58,166,174,0.15);
    color: var(--teal-deep);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dt-option-label { flex: 1; }
.dt-option-chev {
    width: 14px; height: 14px;
    color: var(--muted);
    transition: transform 200ms;
}
.dt-option:hover .dt-option-chev { transform: translateX(4px); color: var(--teal-deep); }
.dt-result {
    border-radius: 12px;
    padding: 18px;
    border: 1px solid rgba(58,166,174,0.2);
    background: linear-gradient(135deg, rgba(14,124,134,0.06), rgba(58,166,174,0.04));
}
.dt-result-positive { border-color: rgba(52, 211, 153, 0.35); background: linear-gradient(135deg, rgba(52, 211, 153, 0.07), rgba(58,166,174,0.04)); }
.dt-result-caution  { border-color: rgba(251, 191, 36, 0.35); background: linear-gradient(135deg, rgba(251, 191, 36, 0.07), rgba(14,124,134,0.04)); }
.dt-result-negative { border-color: rgba(248, 113, 113, 0.35); background: linear-gradient(135deg, rgba(248, 113, 113, 0.07), rgba(14,124,134,0.04)); }
.dt-result-eyebrow {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6rem;
    color: var(--teal-deep);
    margin-bottom: 4px;
}
.dt-result-positive .dt-result-eyebrow { color: #047857; }
.dt-result-caution  .dt-result-eyebrow { color: #b45309; }
.dt-result-negative .dt-result-eyebrow { color: #dc2626; }
.dt-result-verdict {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: var(--text);
    font-size: 1.4rem;
    margin: 0 0 10px;
    line-height: 1.25;
}
.dt-result-rationale { color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; margin: 0 0 14px; }
.dt-result-steps h5 {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    color: var(--teal-deep);
    margin: 0 0 8px;
}
.dt-result-steps ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dt-result-steps li {
    color: var(--ink-2);
    font-size: 0.85rem;
    line-height: 1.5;
    padding-left: 18px;
    position: relative;
}
.dt-result-steps li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #3aa6ae;
}
.dt-result-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 18px;
    background: linear-gradient(90deg, var(--card), var(--card));
    color: var(--text);
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: transform 200ms, box-shadow 200ms;
}
.dt-result-cta:hover {
    transform: scale(1.04);
    box-shadow: 0 0 30px rgba(14,124,134,0.35);
}
.dt-path { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.dt-path-label {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6rem;
    color: var(--muted);
    margin-bottom: 6px;
}
.dt-path-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dt-path-list li {
    font-size: 0.7rem;
    color: var(--muted);
    background: var(--card);
    border: 1px solid var(--line);
    padding: 3px 10px;
    border-radius: 999px;
}
.dt-share { margin-top: 14px; }
.dt-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.7rem;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 200ms, color 200ms;
}
.dt-share-btn:hover { background: rgba(58,166,174,0.08); color: var(--text); }

/* ============================================
   Live Prompt Compare
   ============================================ */
.live-prompt-compare { display: block; margin: 0; }
.lpc-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #fde68a;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.78rem;
    line-height: 1.5;
    margin-bottom: 14px;
}
.lpc-banner svg { color: #b45309; flex-shrink: 0; margin-top: 2px; }
.lpc-banner strong { color: var(--text); }
.lpc-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
}
.lpc-tab {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 200ms;
}
.lpc-tab:hover {
    background: rgba(58,166,174,0.08);
    border-color: rgba(58,166,174,0.4);
    color: var(--text);
}
.lpc-tab:focus-visible {
    outline: 2px solid rgba(58,166,174,0.6);
    outline-offset: 2px;
}
.lpc-tab-active {
    background: rgba(14,124,134,0.15);
    border-color: rgba(58,166,174,0.55);
    color: var(--text);
}
.lpc-prompt-block {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.lpc-prompt-label {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6rem;
    color: var(--teal-deep);
    margin-bottom: 6px;
}
.lpc-prompt-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.lpc-responses {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 900px) {
    .lpc-responses { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.lpc-response {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lpc-tone-purple { border-color: rgba(58,166,174,0.25); }
.lpc-tone-cyan   { border-color: rgba(58,166,174,0.25); }
.lpc-tone-amber  { border-color: rgba(251, 191, 36, 0.25); }
.lpc-tone-emerald{ border-color: rgba(52, 211, 153, 0.25); }
.lpc-response-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.lpc-vendor-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.lpc-vendor-dot-purple  { background: #3aa6ae; box-shadow: 0 0 8px rgba(58,166,174,0.5); }
.lpc-vendor-dot-cyan    { background: var(--card); box-shadow: 0 0 8px rgba(58,166,174,0.5); }
.lpc-vendor-dot-amber   { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.lpc-vendor-dot-emerald { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
.lpc-vendor-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
}
.lpc-rating { display: inline-flex; gap: 1px; }
.lpc-star { color: var(--text); font-size: 0.85rem; }
.lpc-star-on { color: var(--teal-deep); }
.lpc-response-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--ink-2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
}
.lpc-response-notes {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}
.lpc-response-notes strong { color: var(--ink-2); font-style: normal; }

/* ============================================
   Cost Lab + Performance Lab (shared cl-* and pl-* classes)
   ============================================ */
.cl-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}
.cl-tab {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 200ms;
    font-family: 'Bricolage Grotesque', sans-serif;
}
.cl-tab:hover {
    background: rgba(58,166,174,0.08);
    border-color: rgba(58,166,174,0.4);
    color: var(--text);
}
.cl-tab:focus-visible { outline: 2px solid rgba(58,166,174,0.6); outline-offset: 2px; }
.cl-tab-active {
    background: rgba(14,124,134,0.15);
    border-color: rgba(58,166,174,0.55);
    color: var(--text);
}
.cl-panel { display: block; }
.cl-panel.hidden { display: none; }
.cl-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.cl-field { display: flex; flex-direction: column; gap: 5px; }
.cl-label {
    font-size: 0.7rem;
    color: var(--muted);
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cl-input, .cl-select {
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 0.9rem;
    transition: border-color 200ms;
    width: 100%;
}
.cl-input:focus, .cl-select:focus { outline: none; border-color: rgba(58,166,174,0.55); }
.cl-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
}
.cl-toggle input { accent-color: #7C3AED; }
.cl-vendor-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.cl-chip {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 200ms;
}
.cl-chip:hover { background: rgba(58,166,174,0.08); color: var(--text); }
.cl-chip-active {
    background: rgba(14,124,134,0.15);
    border-color: rgba(58,166,174,0.5);
    color: var(--text);
}
.cl-results { display: flex; flex-direction: column; gap: 10px; }
.cl-row {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
}
.cl-row-highlight { border-color: rgba(58,166,174,0.5); background: rgba(14,124,134,0.06); }
.cl-row-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}
.cl-row-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; color: var(--text); font-size: 0.95rem; }
.cl-row-cost { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; color: var(--text); font-size: 1.05rem; }
.cl-row-unit { color: var(--muted); font-weight: 500; font-size: 0.7rem; margin-left: 3px; }
.cl-orbit-default {
    margin-left: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--teal-deep);
    border: 1px solid rgba(58,166,174,0.4);
    background: rgba(58,166,174,0.08);
    padding: 1px 6px;
    border-radius: 999px;
}
.cl-bar-track {
    height: 4px;
    background: var(--line-soft);
    border-radius: 4px;
    margin: 6px 0;
    overflow: hidden;
}
.cl-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--card), var(--card));
    transition: width 300ms ease;
}
.cl-row-foot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--muted);
}
.cl-saved { color: #047857; font-weight: 600; }
.cl-headline {
    background: linear-gradient(135deg, rgba(14,124,134,0.1), rgba(58,166,174,0.06));
    border: 1px solid rgba(58,166,174,0.25);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    color: var(--ink-2);
    line-height: 1.55;
}
.cl-c-amt { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; color: var(--text); font-size: 1.4rem; }
.cl-c-pct { color: #047857; font-weight: 600; }
.cl-f-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.cl-f-summary-row {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-f-summary-row span {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6rem;
    color: var(--teal-deep);
}
.cl-f-summary-row strong { font-family: 'Bricolage Grotesque', sans-serif; color: var(--text); font-size: 1.05rem; }
.cl-f-row {
    display: grid;
    grid-template-columns: 36px 1fr 80px;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
}
.cl-f-month {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
}
.cl-f-bar-track {
    height: 12px;
    background: var(--line-soft);
    border-radius: 4px;
    overflow: hidden;
}
.cl-f-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--card), #3aa6ae, var(--card));
    transition: width 400ms ease;
}
.cl-f-cost {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 0.85rem;
    text-align: right;
}
.cl-e-dim {
    margin-left: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--teal-deep);
    border: 1px solid rgba(58,166,174,0.3);
    padding: 1px 6px;
    border-radius: 999px;
}
.cl-stamp-line {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    color: var(--muted);
    margin-top: 12px;
}

/* Performance Lab specific */
.pl-fit-row { padding: 10px 12px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; }
.pl-fit-ok { border-color: rgba(52, 211, 153, 0.3); }
.pl-fit-warn { border-color: rgba(251, 191, 36, 0.35); }
.pl-fit-over { border-color: rgba(248, 113, 113, 0.35); }
.pl-fit-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.pl-fit-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; color: var(--text); font-size: 0.95rem; }
.pl-fit-window {
    margin-left: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--muted);
}
.pl-fit-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.pl-fit-ok .pl-fit-badge   { color: #047857; }
.pl-fit-warn .pl-fit-badge { color: #b45309; }
.pl-fit-over .pl-fit-badge { color: #dc2626; }
.pl-fit-track {
    position: relative;
    height: 10px;
    background: var(--line-soft);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.pl-fit-reliable {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(52, 211, 153, 0.10);
}
.pl-fit-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #34d399, #fbbf24, #f87171);
    transition: width 350ms ease;
}
.pl-fit-foot {
    font-size: 0.7rem;
    color: var(--muted);
    font-family: 'Space Grotesk', sans-serif;
}
.pl-fit-summary {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    color: var(--ink-2);
    font-size: 0.85rem;
    line-height: 1.55;
}
.pl-fit-summary strong { color: var(--text); }

/* ============================================
   Hallucination Risk Scorecard
   ============================================ */
.hr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 920px) {
    .hr-grid { grid-template-columns: 1fr 360px; align-items: start; }
    .hr-results { position: sticky; top: 24px; }
}
.hr-checks { display: flex; flex-direction: column; gap: 14px; }
.hr-group {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0;
}
.hr-group-label {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
    color: var(--teal-deep);
    padding: 0 4px;
}
.hr-group-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hr-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 6px;
    transition: background 150ms;
}
.hr-check:hover { background: rgba(58,166,174,0.05); }
.hr-check input { position: absolute; opacity: 0; pointer-events: none; }
.hr-check-box {
    width: 18px; height: 18px;
    border: 1.5px solid var(--line);
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: border-color 200ms, background 200ms;
}
.hr-check input:checked + .hr-check-box {
    border-color: #3aa6ae;
    background: linear-gradient(135deg, var(--card), var(--card));
}
.hr-check input:checked + .hr-check-box::after {
    content: '';
    position: absolute;
    left: 4px; top: 0px;
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.hr-check input:focus-visible + .hr-check-box {
    outline: 2px solid rgba(58,166,174,0.55);
    outline-offset: 2px;
}
.hr-check-label { font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; }
.hr-results { display: flex; flex-direction: column; gap: 14px; }
.hr-score-card {
    background: linear-gradient(135deg, rgba(14,124,134,0.06), rgba(58,166,174,0.04));
    border: 1px solid rgba(58,166,174,0.2);
    border-radius: 12px;
    padding: 18px;
    transition: border-color 350ms;
}
.hr-tier-strong   { border-color: rgba(52, 211, 153, 0.45); background: linear-gradient(135deg, rgba(52, 211, 153, 0.1), rgba(58,166,174,0.04)); }
.hr-tier-good     { border-color: rgba(58,166,174,0.45); }
.hr-tier-warn     { border-color: rgba(251, 191, 36, 0.45); background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(14,124,134,0.04)); }
.hr-tier-critical { border-color: rgba(248, 113, 113, 0.45); background: linear-gradient(135deg, rgba(248, 113, 113, 0.07), rgba(14,124,134,0.04)); }
.hr-score-eyebrow {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6rem;
    color: var(--teal-deep);
    margin-bottom: 6px;
}
.hr-tier-strong .hr-score-eyebrow { color: #047857; }
.hr-tier-warn .hr-score-eyebrow   { color: #b45309; }
.hr-tier-critical .hr-score-eyebrow { color: #dc2626; }
.hr-score-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: var(--text);
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 10px;
}
.hr-score-bar {
    height: 6px;
    background: var(--line-soft);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.hr-score-fill {
    height: 100%;
    background: linear-gradient(90deg, #f87171, #fbbf24, #3aa6ae, #34d399);
    transition: width 400ms ease;
}
.hr-score-tier {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}
.hr-rec-block {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
}
.hr-rec-title {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    color: var(--teal-deep);
    margin: 0 0 12px;
}
.hr-rec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.hr-rec { display: flex; gap: 10px; align-items: flex-start; }
.hr-rec-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(14,124,134,0.15);
    color: var(--teal-deep);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.hr-rec-head {
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 4px;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hr-rec-head strong { color: var(--text); }
.hr-rec-impact { color: var(--teal-deep); }
.hr-rec-text { font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; margin: 0; }
.hr-rec-empty { color: #047857; font-size: 0.9rem; line-height: 1.5; }



/* ============================================
   Case Study Badges
   ============================================ */
.cs-badge-nda {
    background: rgba(124, 58, 237, 0.15);
    color: #b9a3f5;
}
.cs-badge-research {
    background: rgba(34, 184, 207, 0.12);
    color: #22b8cf;
}

/* ============================================
   Case Study: Consulting Prep Saver widget
   ============================================ */
.cs-prep-saver { display: block; margin: 0; }
.cps-label {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: 10px;
}
.cps-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--line);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}
.cps-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--card), var(--card));
    cursor: pointer;
    box-shadow: 0 0 0 4px rgba(14,124,134,0.15);
}
.cps-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--card), var(--card));
    cursor: pointer;
    border: none;
}
.cps-value {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--ink-2);
}
.cps-value span { color: var(--text); font-weight: 600; }
.cps-output {
    background: rgba(14,124,134,0.05);
    border: 1px solid rgba(14,124,134,0.20);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}
.cps-output-eyebrow {
    font-size: 0.7rem;
    color: var(--teal-deep);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: 8px;
}
.cps-output-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 2.75rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--card), var(--card));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 8px 0 12px;
}
.cps-output-secondary {
    font-size: 0.95rem;
    color: var(--ink-2);
    line-height: 1.5;
}
.cps-output-secondary span { color: var(--text); font-weight: 600; }
.cps-disclaimer {
    margin-top: 14px;
    font-size: 0.7rem;
    color: var(--muted);
    line-height: 1.5;
    font-style: italic;
}

/* ============================================
   Case Study: Wellness Velocity widget
   ============================================ */
.cs-wellness-velocity { display: block; margin: 0; }
.cwv-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: 0.75rem;
    color: var(--muted);
}
.cwv-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.cwv-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.cwv-swatch.cwv-pre { background: rgba(248, 113, 113, 0.45); }
.cwv-swatch.cwv-post {
    background: linear-gradient(135deg, var(--card), var(--card));
}
.cwv-chart-wrap {
    position: relative;
    width: 100%;
}
.cwv-chart { width: 100%; height: auto; display: block; }
.cwv-bar { transition: opacity 200ms; cursor: pointer; }
.cwv-bar:hover, .cwv-bar:focus { opacity: 0.85; outline: none; }
.cwv-bar-pre { fill: #dc2626; }
.cwv-bar-post { fill: url(#g1); }
.cwv-tooltip {
    position: absolute;
    transform: translate(-50%, -100%);
    background: rgba(10, 10, 26, 0.95);
    border: 1px solid rgba(14,124,134,0.35);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.75rem;
    color: var(--ink-2);
    pointer-events: none;
    min-width: 180px;
    max-width: 240px;
    z-index: 5;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.cwv-tooltip-sprint {
    color: var(--teal-deep);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.cwv-tooltip-count { color: var(--text); margin-bottom: 4px; }
.cwv-tooltip-shipped { color: var(--muted); line-height: 1.4; font-size: 0.7rem; }
.cwv-disclaimer {
    margin-top: 14px;
    font-size: 0.7rem;
    color: var(--muted);
    line-height: 1.5;
    font-style: italic;
}

/* ============================================
   Case Study: Port Congestion Heatmap widget
   ============================================ */
.cs-port-congestion { display: block; margin: 0; }
.cpc-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    font-size: 0.7rem;
    color: var(--muted);
}
.cpc-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cpc-swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.cpc-swatch.cpc-low { background: rgba(52, 211, 153, 0.35); border: 1px solid rgba(52, 211, 153, 0.55); }
.cpc-swatch.cpc-med { background: rgba(251, 191, 36, 0.35); border: 1px solid rgba(251, 191, 36, 0.55); }
.cpc-swatch.cpc-high { background: rgba(248, 113, 113, 0.4); border: 1px solid rgba(248, 113, 113, 0.6); }
.cpc-swatch.cpc-crit { background: rgba(220, 38, 38, 0.55); border: 1px solid rgba(220, 38, 38, 0.85); }
.cpc-grid-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    padding: 8px;
}
.cpc-grid { display: flex; flex-direction: column; gap: 4px; min-width: 720px; }
.cpc-row {
    display: grid;
    grid-template-columns: 130px repeat(14, minmax(36px, 1fr));
    gap: 4px;
    align-items: center;
}
.cpc-row-header { color: var(--muted); font-size: 0.7rem; }
.cpc-cell-port {
    font-size: 0.78rem;
    color: var(--ink-2);
    padding: 6px 4px;
    text-align: right;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 500;
}
.cpc-cell-port-header { color: transparent; }
.cpc-cell-day-header {
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 0;
}
.cpc-cell {
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 120ms, border-color 120ms;
    background: rgba(52, 211, 153, 0.18);
    padding: 0;
}
.cpc-cell-low { background: rgba(52, 211, 153, 0.25); border-color: rgba(52, 211, 153, 0.35); }
.cpc-cell-med { background: rgba(251, 191, 36, 0.30); border-color: rgba(251, 191, 36, 0.45); }
.cpc-cell-high { background: rgba(248, 113, 113, 0.35); border-color: rgba(248, 113, 113, 0.55); }
.cpc-cell-crit { background: rgba(220, 38, 38, 0.55); border-color: rgba(220, 38, 38, 0.8); }
.cpc-cell:hover, .cpc-cell:focus {
    transform: scale(1.08);
    border-color: var(--line);
    outline: none;
    z-index: 1;
}
.cpc-detail {
    margin-top: 18px;
    background: rgba(14,124,134,0.05);
    border: 1px solid rgba(14,124,134,0.2);
    border-radius: 12px;
    padding: 18px 20px;
    min-height: 140px;
}
.cpc-detail-empty { color: var(--muted); font-size: 0.85rem; font-style: italic; }
.cpc-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.cpc-detail-port {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 1.1rem;
}
.cpc-detail-day {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.85rem;
}
.cpc-detail-prob {
    margin-top: 4px;
    color: var(--ink-2);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cpc-detail-prob strong { color: var(--text); }
.cpc-tier-pill {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
}
.cpc-tier-low { background: rgba(52, 211, 153, 0.15); color: #047857; }
.cpc-tier-med { background: rgba(251, 191, 36, 0.15); color: #b45309; }
.cpc-tier-high { background: rgba(248, 113, 113, 0.15); color: #dc2626; }
.cpc-tier-crit { background: rgba(220, 38, 38, 0.20); color: #dc2626; }
.cpc-detail-conf {
    color: var(--muted);
    font-size: 0.75rem;
    font-family: 'Space Grotesk', sans-serif;
}
.cpc-detail-factors-label {
    font-size: 0.7rem;
    color: var(--teal-deep);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: 6px;
}
.cpc-detail-factors ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cpc-detail-factors li {
    font-size: 0.85rem;
    color: var(--ink-2);
    padding-left: 16px;
    position: relative;
}
.cpc-detail-factors li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--card), var(--card));
}
.cpc-disclaimer {
    margin-top: 14px;
    font-size: 0.7rem;
    color: var(--muted);
    line-height: 1.5;
    font-style: italic;
}

/* ============================================================
   Orbit design-system reconciliation - cohesion with the app.
   The new brand palette + fonts are already applied above via the
   token sweep. This block removes the AI-slop tells the locked
   design calls out: animated gradient-text, neon glow-as-scheme,
   and decorative glassmorphism on static cards.
   ============================================================ */

/* 1) Kill the animated gradient-text. Emphasized heading words and
      hover states read as a solid lavender accent, not a moving rainbow. */
@keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } }
h1 .bg-gradient-to-r,
h2 .bg-gradient-to-r,
.gradient-text,
nav .nav-link:hover,
.nav-dropdown-item:hover span.flex-1 > span:first-child,
.logo-item:hover {
    background: none !important;
    -webkit-text-fill-color: #b9a3f5 !important;
    color: #b9a3f5 !important;
    animation: none !important;
}

/* 2) Brand wordmark keeps its identity but stops shimmering. */
.orbit-logo .orbit-O,
.orbit-logo .orbit-dot,
.orbit-logo .orbit-i::before,
.orbit-logo .orbit-i::after { animation: none !important; }

/* 3) Static cards become real surfaces (tinted --card), not decorative glass:
      drop the heavy blur and make the fill opaque so they read as solid panels. */
.glass-card {
    background: rgba(26, 22, 38, 0.82) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(236, 233, 242, 0.10) !important;
}
/* The sticky nav + dropdown stay glassy - they sit OVER real content. */
#navbar.scrolled { background: rgba(20, 16, 31, 0.72) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }
.nav-dropdown-panel .glass-card { background: rgba(20, 16, 31, 0.92) !important; }

/* 4) Restrained elevation instead of neon glow halos on CTAs. */
.ghost-btn:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45) !important; transform: translateY(-2px) !important; }

/* ---- Dispatch listing topic filter pills ---- */
.df-pill {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    border: 1px solid var(--line);
    background: var(--card);
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.df-pill:hover { color: var(--text); border-color: rgba(58,166,174,0.45); }
.df-pill.is-active { color: var(--text); border-color: transparent; background: linear-gradient(to right, var(--card), var(--card)); }

/* ============================================
   Reduced Motion (accessibility)
   Honor prefers-reduced-motion globally: stop infinite/decorative
   animation + smooth scroll, but keep state changes instant so
   functional transitions (menus, accordions) still work.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .cursor-glow { display: none; }
}

/* ============================================
   Skip-to-content link: visually hidden until keyboard focus
   (clip pattern: off-screen until focused, then pinned top-left)
   ============================================ */
.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.75rem;
    z-index: 200;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.6rem 1rem;
    overflow: visible;
    clip: auto;
    border-radius: 0.5rem;
    background: #7C3AED;
    color: #fff;
    font-weight: 600;
    font-family: 'Bricolage Grotesque', sans-serif;
    text-decoration: none;
    outline: 2px solid #b9a3f5;
    outline-offset: 2px;
}

/* ============================================
   Comparison table (How We Compare) - Orbit column highlighted,
   everything visible (no hover). Desktop = 4-col table; mobile =
   one stacked card per attribute. Single source of markup reflows.
   ============================================ */
.cmp {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.015);
}
.cmp-head,
.cmp-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.cmp-row { border-top: 1px solid var(--line); }
.cmp-head > *,
.cmp-row > * {
    padding: 0.95rem 1.15rem;
    display: flex;
    align-items: center;
}
.cmp-h {
    justify-content: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    font-weight: 600;
}
.cmp-attr {
    font-weight: 500;
    color: var(--ink-2);
    font-size: 0.9rem;
}
.cmp-val {
    justify-content: center;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    flex-direction: column;
    gap: 0.1rem;
}
.cmp-val .cmp-lbl { display: none; }
/* Orbit highlighted column (continuous via aligned per-cell side borders) */
.cmp-orbit {
    justify-content: center;
    text-align: center;
    background: rgba(14,124,134,0.08);
    border-left: 1px solid rgba(14,124,134,0.28);
    border-right: 1px solid rgba(14,124,134,0.28);
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
}
.cmp-orbit-h {
    justify-content: center;
    background: rgba(14,124,134,0.15);
    border-left: 1px solid rgba(14,124,134,0.32);
    border-right: 1px solid rgba(14,124,134,0.32);
    font-family: 'Bricolage Grotesque', sans-serif;
}
.cmp-orbit-h .grad {
    background: linear-gradient(to right, #3aa6ae, var(--card));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .cmp {
        border: 0;
        border-radius: 0;
        background: transparent;
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
    }
    .cmp-head { display: none; }
    .cmp-row {
        grid-template-columns: 1fr 1fr;
        border: 1px solid var(--line);
        border-radius: 0.85rem;
        background: var(--card);
        overflow: hidden;
    }
    .cmp-row > * { padding: 0.7rem 0.9rem; }
    .cmp-attr {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--line);
        font-weight: 600;
        color: var(--text);
    }
    .cmp-orbit {
        grid-column: 1 / -1;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(14,124,134,0.22);
        justify-content: flex-start;
        text-align: left;
    }
    .cmp-orbit::before {
        content: "Orbit";
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--teal-deep);
        font-weight: 700;
        margin-right: 0.5rem;
    }
    .cmp-val {
        align-items: flex-start;
        text-align: left;
    }
    .cmp-val .cmp-lbl {
        display: block;
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        font-weight: 600;
    }
}

/* ============================================
   Shooting stars (ported from the orbitautomation.co hero) - spawned by
   js/main.js into #shooting-stars; per-star --angle/--dist/--bright inline.
   ============================================ */
.shooting-star {
    position: absolute;
    width: 80px;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.6), transparent);
    border-radius: 1px;
    opacity: 0;
    pointer-events: none;
}
@keyframes shoot {
    0%   { opacity: 0; transform: rotate(var(--angle)) translateX(0); }
    1.5% { opacity: var(--bright); }
    4%   { opacity: 0; transform: rotate(var(--angle)) translateX(var(--dist)); }
    100% { opacity: 0; }
}

/* Live orbital system scoped to the bottom CTA: smaller, parked on the right.
   The .orbit-system / .orbit-ring-* / .planet-* / .orbit-center-glow rules
   above are shared with the (unused) hero treatment; this only resizes + places
   it. setupOrbits() in main.js scales the planet radii to clientWidth. */
.cta-orbit {
    position: absolute;
    right: clamp(1rem, 3.5vw, 2.5rem);   /* sits toward the right, dynamic margin */
    top: 50%;
    transform: translateY(-50%);
    width: clamp(240px, 30vw, 400px);
    aspect-ratio: 1 / 1;
    pointer-events: none;
}
.cta-orbit .orbit-system {
    width: 100%;
    height: 100%;
    max-width: none;
}
@media (max-width: 768px) {
    /* On mobile let it spill off the right + fade so it never fights the copy */
    .cta-orbit { width: clamp(200px, 58vw, 280px); right: clamp(-5rem, -13vw, -3rem); opacity: 0.42; }
}

/* Orbital adapted to the centered glass CTA (Style B pages): tucked into the
   bottom-right so it reads as an accent and never sits behind the centered copy.
   Placed at z-[-1] inside an isolated card, so it floats above the card bg but
   below the text without needing a content wrapper. */
.cta-orbit-corner {
    position: absolute;
    right: clamp(-3.5rem, -3vw, -1.5rem);
    bottom: clamp(-4.5rem, -5vw, -2.5rem);
    width: clamp(230px, 32vw, 340px);
    aspect-ratio: 1 / 1;
    pointer-events: none;
}
.cta-orbit-corner .orbit-system {
    width: 100%;
    height: 100%;
    max-width: none;
}
@media (max-width: 768px) {
    .cta-orbit-corner { width: clamp(180px, 50vw, 240px); right: -3rem; bottom: -3.5rem; opacity: 0.5; }
}