@import url('/css/keplerworks-tokens.css');

/* Theme toggle + light-mode chrome overrides (palette: keplerworks-tokens.css) */

/* Filled accent controls — contrast-safe label (black on white btn in dark, white on black in light) */
.nav-cta,
a.nav-cta,
button.nav-cta,
.nav-upgrade-btn,
button.nav-upgrade-btn,
.btn-primary,
button.btn-primary,
.btn-primary-diagram,
.btn-nav,
.btn-auth,
.auth-submit,
button.auth-submit,
.quota-upgrade-btn,
.tier-upgrade-btn,
button.tier-upgrade-btn,
.tier-card.recommended .recommended-badge,
.tier-card.recommended .card-cta,
.tier-card .card-cta.tier-upgrade-primary,
.downgrade-confirm-card .btn-confirm,
.diff-check,
.btn-primary-tour,
.onboarding-coach button.ob-btn-primary,
.onboarding-cta,
.checkout-topnav .nav-cta,
.checkout-topnav .nav-upgrade-btn,
.checkout-main .btn,
.tier-badge:not(.badge-current),
body.diagram-phase1 .btn-primary,
body.diagram-phase1 .btn-primary-diagram,
body.diagram-phase1 .tier-card.recommended .recommended-badge,
body.diagram-phase1 .tier-card.recommended .card-cta,
body.diagram-phase1 .tier-card .card-cta.tier-upgrade-primary,
body.diagram-phase2 .nav-cta,
body.diagram-phase2 .nav-upgrade-btn,
body.diagram-phase2 .btn-primary,
body.diagram-phase2 .quota-upgrade-btn,
body.diagram-phase2 .tier-upgrade-btn {
    color: var(--accent-fg) !important;
}

.nav-cta:hover,
a.nav-cta:hover,
button.nav-cta:hover,
.nav-upgrade-btn:hover,
.btn-primary:hover,
button.btn-primary:hover,
.btn-primary-diagram:hover,
.btn-nav:hover,
.auth-submit:hover,
.quota-upgrade-btn:hover,
.tier-upgrade-btn:hover,
.tier-card.recommended .card-cta:hover:not(:disabled),
.tier-card .card-cta.tier-upgrade-primary:hover:not(:disabled),
.btn-primary-tour:hover,
.onboarding-cta:hover,
.checkout-topnav .nav-cta:hover,
.checkout-topnav .nav-upgrade-btn:hover,
.checkout-main .btn:hover,
body.diagram-phase1 .btn-primary:hover,
body.diagram-phase1 .btn-primary-diagram:hover,
body.diagram-phase2 .nav-cta:hover,
body.diagram-phase2 .nav-upgrade-btn:hover,
body.diagram-phase2 .btn-primary:hover,
body.diagram-phase2 .quota-upgrade-btn:hover,
body.diagram-phase2 .tier-upgrade-btn:hover {
    color: var(--accent-fg) !important;
}

/* ── Nav logo — contained top-left, no CSS scale (prevents blur + click blocking) ── */
nav,
nav.keplerworks-nav {
    overflow: visible;
}

nav .logo,
.checkout-topnav .logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    max-width: min(220px, 40vw);
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

nav .nav-links {
    position: relative;
    z-index: 2;
    overflow: visible;
}

nav .logo-mark,
.checkout-topnav .logo-mark {
    height: 32px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.logo-mark--dark,
.footer-logo-mark--dark {
    display: none;
}

html[data-theme="dark"] .logo-mark--light,
html[data-theme="dark"] .footer-logo-mark--light {
    display: none;
}

html[data-theme="dark"] .logo-mark--dark,
html[data-theme="dark"] .footer-logo-mark--dark {
    display: block;
}

@media (max-width: 768px) {
    nav .logo,
    .checkout-topnav .logo {
        max-width: min(160px, 46vw);
    }

    nav .logo-mark,
    .checkout-topnav .logo-mark {
        height: 26px;
    }
}

/* ── Footer logo — compact, non-overlapping ── */
.keplerworks-footer .footer-logo {
    display: inline-flex;
    align-items: center;
    max-width: min(200px, 55vw);
    overflow: hidden;
}

.keplerworks-footer .footer-logo-mark {
    height: 24px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* ── Toggle button ── */
.nav-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    margin: 0 0.15rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.nav-theme-toggle:hover {
    color: var(--accent);
}

html[data-theme="dark"] .nav-theme-toggle {
    border: none;
    background: transparent;
}

html[data-theme="dark"] .nav-theme-toggle:hover {
    border: none;
    background: transparent;
    color: var(--accent);
}

.nav-theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-theme-toggle .theme-icon-sun,
.nav-theme-toggle .theme-icon-moon {
    display: none;
}

html[data-theme="dark"] .nav-theme-toggle .theme-icon-sun {
    display: block;
}

html[data-theme="light"] .nav-theme-toggle .theme-icon-moon {
    display: block;
}

html[data-theme="light"] .nav-theme-toggle {
    background: transparent;
    border: none;
    color: var(--slate, #1e1e1e);
}

html[data-theme="light"] .nav-theme-toggle:hover {
    border: none;
    background: transparent;
    color: var(--accent);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.28));
}

html[data-theme="dark"] .nav-theme-toggle:hover {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35));
}

/* ── Light mode nav ── */
html[data-theme="light"] nav.keplerworks-nav {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--mist, #e4e2dd) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-theme="light"] nav.keplerworks-nav .logo {
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] nav.keplerworks-nav .nav-link {
    color: var(--slate, #1e1e1e) !important;
}

html[data-theme="light"] nav.keplerworks-nav .nav-link:hover,
html[data-theme="light"] nav.keplerworks-nav .nav-link.active {
    color: var(--accent) !important;
}

html[data-theme="light"] nav.keplerworks-nav .nav-user,
html[data-theme="light"] nav.keplerworks-nav button.nav-user {
    background: var(--mist, #e4e2dd);
    border-color: var(--mist, #e4e2dd);
    color: var(--ink, #000000);
}

/* Mobile nav colours: --nav-mobile-* tokens in keplerworks-tokens.css + site-nav.css */

@media (max-width: 900px) {
    /* Beat diagram-phase desktop link colours inside the mobile drawer */
    html[data-theme="light"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-link,
    html[data-theme="light"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-link:hover,
    html[data-theme="light"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-link.active,
    html[data-theme="light"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-link,
    html[data-theme="light"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-link:hover,
    html[data-theme="light"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-link.active {
        color: var(--nav-mobile-link-fg) !important;
        background: transparent !important;
    }

    html[data-theme="dark"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-link,
    html[data-theme="dark"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-link:hover,
    html[data-theme="dark"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-link.active,
    html[data-theme="dark"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-link,
    html[data-theme="dark"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-link:hover,
    html[data-theme="dark"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-link.active {
        color: var(--nav-mobile-link-fg) !important;
        background: transparent !important;
    }

    html[data-theme="light"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-dropdown-link,
    html[data-theme="light"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-dropdown-link,
    html[data-theme="dark"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-dropdown-link,
    html[data-theme="dark"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-dropdown-link {
        color: var(--nav-mobile-link-fg) !important;
    }

    html[data-theme="light"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-theme-toggle,
    html[data-theme="light"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-theme-toggle,
    html[data-theme="dark"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-theme-toggle,
    html[data-theme="dark"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-theme-toggle {
        color: var(--nav-mobile-link-fg) !important;
    }

    /* Account dropdown in mobile drawer — match panel tokens per theme */
    html[data-theme="light"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-user-dropdown,
    html[data-theme="light"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-user-dropdown {
        background: var(--nav-mobile-dropdown-bg) !important;
        border-color: var(--nav-mobile-dropdown-border) !important;
        box-shadow: var(--nav-mobile-dropdown-shadow) !important;
    }

    html[data-theme="dark"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-user-dropdown,
    html[data-theme="dark"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-user-dropdown {
        background: var(--nav-mobile-dropdown-bg) !important;
        border-color: var(--nav-mobile-dropdown-border) !important;
        box-shadow: var(--nav-mobile-dropdown-shadow) !important;
    }

    html[data-theme="light"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-user-dropdown .nav-logout,
    html[data-theme="light"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-user-dropdown .nav-logout,
    html[data-theme="dark"] body.diagram-phase1 nav.keplerworks-nav.is-mobile-nav-open .nav-user-dropdown .nav-logout,
    html[data-theme="dark"] body.diagram-phase2 nav.keplerworks-nav.is-mobile-nav-open .nav-user-dropdown .nav-logout {
        color: var(--nav-mobile-link-fg) !important;
    }
}

/* ── Light mode footer ── */
html[data-theme="light"] .keplerworks-footer {
    background: rgba(255, 255, 255, 0.88);
    border-top-color: var(--mist, #e4e2dd) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-theme="light"] .keplerworks-footer .footer-logo {
    color: var(--ink, #000000);
}

html[data-theme="light"] .keplerworks-footer .footer-tagline,
html[data-theme="light"] .keplerworks-footer .footer-links a,
html[data-theme="light"] .keplerworks-footer .footer-links span {
    color: var(--slate, #1e1e1e);
}

html[data-theme="light"] .keplerworks-footer .footer-col h4 {
    color: var(--ink, #000000);
}

html[data-theme="light"] .keplerworks-footer .footer-bottom {
    border-top-color: var(--mist, #e4e2dd);
}

html[data-theme="light"] .keplerworks-footer .footer-bottom small {
    color: var(--concrete, #1e1e1e);
}

html[data-theme="light"] .keplerworks-footer .social-link {
    border-color: var(--mist, #e4e2dd);
    color: var(--slate, #1e1e1e);
}

/* ── Light mode checkout topnav ── */
html[data-theme="light"] body.keplerworks-deep-space .checkout-topnav {
    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: var(--mist, #e4e2dd);
}

html[data-theme="light"] body.keplerworks-deep-space .checkout-topnav .logo {
    color: var(--ink, #000000);
}

html[data-theme="light"] body.keplerworks-deep-space .checkout-topnav .nav-link {
    color: var(--slate, #1e1e1e);
}

html[data-theme="light"] body.keplerworks-deep-space .checkout-topnav .nav-agent {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--mist, #e4e2dd);
    color: var(--ink, #000000);
}

/* ── Light mode phase pages: ensure body uses base tokens ── */
html[data-theme="light"] body.diagram-phase1,
html[data-theme="light"] body.diagram-phase2 {
    background: var(--chalk, #f6f4f0);
    color: var(--ink, #000000);
}

html[data-theme="light"] body.diagram-phase1 nav,
html[data-theme="light"] body.diagram-phase2 nav {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--mist, #e4e2dd) !important;
}

/* ── Light mode phase 1 glass panels ── */
html[data-theme="light"] body.diagram-phase1 .agent-card,
html[data-theme="light"] body.diagram-phase1 .tier-card,
html[data-theme="light"] body.diagram-phase1 .step,
html[data-theme="light"] body.diagram-phase1 .benefit-card,
html[data-theme="light"] body.diagram-phase1 .trust-item,
html[data-theme="light"] body.diagram-phase1 .feature-card,
html[data-theme="light"] body.diagram-phase1 .stat-card,
html[data-theme="light"] body.diagram-phase1 .close-section,
html[data-theme="light"] body.diagram-phase1 .diff,
html[data-theme="light"] body.diagram-phase1 section[class*="section"] {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: var(--mist, #e4e2dd) !important;
    color: var(--ink, #000000) !important;
    box-shadow: 0 8px 32px rgba(10, 15, 26, 0.06) !important;
}

html[data-theme="light"] body.diagram-phase1 h1,
html[data-theme="light"] body.diagram-phase1 h2,
html[data-theme="light"] body.diagram-phase1 h3,
html[data-theme="light"] body.diagram-phase1 .hero-sub,
html[data-theme="light"] body.diagram-phase1 .diff-list li,
html[data-theme="light"] body.diagram-phase1 p {
    color: inherit;
}

html[data-theme="light"] body.diagram-phase1 .page-hero h1,
html[data-theme="light"] body.diagram-phase1 .pricing-hero h1,
html[data-theme="light"] body.diagram-phase1 .hero h1 {
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .page-hero h1 em,
html[data-theme="light"] body.diagram-phase1 .pricing-hero h1 em,
html[data-theme="light"] body.diagram-phase1 .hero h1 em {
    color: var(--accent, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .page-hero .lead,
html[data-theme="light"] body.diagram-phase1 .page-hero .eyebrow,
html[data-theme="light"] body.diagram-phase1 .pricing-hero .lead {
    color: var(--slate, #1e1e1e) !important;
}

html[data-theme="light"] body.diagram-phase1 .page-hero .eyebrow {
    color: var(--accent, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .nav-link {
    color: var(--slate, #1e1e1e) !important;
}

html[data-theme="light"] body.diagram-phase1 .nav-link:hover,
html[data-theme="light"] body.diagram-phase1 .nav-link.active {
    color: var(--accent) !important;
}

/* ── Light mode phase 2 dashboard panels ── */
html[data-theme="light"] body.diagram-phase2 .upload-zone,
html[data-theme="light"] body.diagram-phase2 .results-panel,
html[data-theme="light"] body.diagram-phase2 .dashboard-card,
html[data-theme="light"] body.diagram-phase2 .auth-card,
html[data-theme="light"] body.diagram-phase2 .team-card,
html[data-theme="light"] body.diagram-phase2 .account-card,
html[data-theme="light"] body.diagram-phase2 .glass-panel,
html[data-theme="light"] body.diagram-phase2 .onboarding-panel {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: var(--mist, #e4e2dd) !important;
    color: var(--ink, #000000) !important;
}

/* Light mode: restore dark onboarding text tokens (the diagram-phase2 base sets
   them near-white for the dark dashboard, which is illegible on the light panel). */
html[data-theme="light"] body.diagram-phase2 .onboarding-panel {
    --ob-ink: #000000;
    --ob-slate: #1e1e1e;
    --ob-concrete: #5a6a78;
    --ob-muted: #5a6a78;
    --ob-rule: var(--mist, #e4e2dd);
    --ob-surface: rgba(255, 255, 255, 0.96);
    --ob-ghost-bg: #ffffff;
}

/* Light mode: Manage Account country combobox (popover was dark-themed for phase2) */
html[data-theme="light"] body.account-page #accountLocationCard.team-card {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: var(--mist, #e4e2dd) !important;
}

html[data-theme="light"] body.account-page .account-country-trigger {
    background: #ffffff !important;
    border-color: var(--mist, #e4e2dd) !important;
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.account-page .account-country-chevron {
    border-top-color: var(--slate, #1e1e1e) !important;
}

html[data-theme="light"] body.account-page .account-country-popover {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--mist, #e4e2dd) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14) !important;
}

html[data-theme="light"] body.account-page .account-country-options .account-country-group {
    color: var(--concrete, #5a6a78) !important;
}

html[data-theme="light"] body.account-page .account-country-options [role="option"] {
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.account-page .account-country-options [role="option"]:hover,
html[data-theme="light"] body.account-page .account-country-options [role="option"][data-active="true"] {
    background: var(--mist, #e4e2dd) !important;
    color: var(--accent) !important;
}

html[data-theme="light"] body.diagram-phase2 .nav-link {
    color: var(--slate, #1e1e1e) !important;
}

/* ── Light mode: Carbon dashboard readable text (diagram-phase2 forces light-on-dark tokens) ── */
html[data-theme="light"] body.diagram-phase2 .section-header h2,
html[data-theme="light"] body.diagram-phase2 .breakdown-section h3,
html[data-theme="light"] body.diagram-phase2 .detail-header,
html[data-theme="light"] body.diagram-phase2 .summary-card .card-value,
html[data-theme="light"] body.diagram-phase2 .summary-card .card-label,
html[data-theme="light"] body.diagram-phase2 .card-rating,
html[data-theme="light"] body.diagram-phase2 .history-item .hi-name,
html[data-theme="light"] body.diagram-phase2 .opportunity-card .opp-element,
html[data-theme="light"] body.diagram-phase2 .opportunity-card .opp-saving,
html[data-theme="light"] body.diagram-phase2 .opportunity-card .opp-region,
html[data-theme="light"] body.diagram-phase2 .opportunity-card .opp-intensity,
html[data-theme="light"] body.diagram-phase2 .modal-box h2,
html[data-theme="light"] body.diagram-phase2 .modal-box h3,
html[data-theme="light"] body.diagram-phase2 .upgrade-tier h3,
html[data-theme="light"] body.diagram-phase2 .upgrade-tier .tier-price,
html[data-theme="light"] body.diagram-phase2 .upload-zone h3,
html[data-theme="light"] body.diagram-phase2 .empty-state h3 {
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.diagram-phase2 .section-desc,
html[data-theme="light"] body.diagram-phase2 .upload-sub,
html[data-theme="light"] body.diagram-phase2 .progress-text,
html[data-theme="light"] body.diagram-phase2 .quota-usage-text,
html[data-theme="light"] body.diagram-phase2 .card-unit,
html[data-theme="light"] body.diagram-phase2 .history-item .hi-meta,
html[data-theme="light"] body.diagram-phase2 .share-pct,
html[data-theme="light"] body.diagram-phase2 .opportunity-card .opp-detail,
html[data-theme="light"] body.diagram-phase2 .element-count,
html[data-theme="light"] body.diagram-phase2 .modal-box .modal-msg,
html[data-theme="light"] body.diagram-phase2 .demo-prompt,
html[data-theme="light"] body.diagram-phase2 .demo-prompt a {
    color: var(--slate, #1e1e1e) !important;
}

html[data-theme="light"] body.diagram-phase2 .data-table td {
    color: var(--ink, #000000) !important;
    border-top-color: var(--mist, #e4e2dd) !important;
}

html[data-theme="light"] body.diagram-phase2 .data-table th {
    background: var(--accent-pale, rgba(0, 0, 0, 0.06)) !important;
    color: var(--accent, #000000) !important;
    border-bottom-color: var(--mist, #e4e2dd) !important;
}

html[data-theme="light"] body.diagram-phase2 .data-table tbody tr:hover {
    background: var(--accent-pale, rgba(0, 0, 0, 0.06)) !important;
}

html[data-theme="light"] body.diagram-phase2 .table-wrap,
html[data-theme="light"] body.diagram-phase2 .summary-card,
html[data-theme="light"] body.diagram-phase2 .history-item,
html[data-theme="light"] body.diagram-phase2 .opportunity-card,
html[data-theme="light"] body.diagram-phase2 .empty-state {
    box-shadow: 0 8px 24px rgba(10, 15, 26, 0.06) !important;
}

html[data-theme="light"] body.diagram-phase2 .history-item .history-delete {
    color: var(--slate, #1e1e1e) !important;
    background: var(--mist, #e4e2dd) !important;
    border-color: var(--mist, #e4e2dd) !important;
}

html[data-theme="light"] body.diagram-phase2 footer {
    color: var(--concrete, #1e1e1e) !important;
    border-top-color: var(--mist, #e4e2dd) !important;
}

/* ── Light mode: methodology modals (dark panel; do not inherit page h2 ink) ── */
html[data-theme="light"] body.diagram-phase1 .ms-modal__title {
    color: #ffffff !important;
}

html[data-theme="light"] body.diagram-phase1 .ms-modal__lede {
    color: rgba(226, 232, 240, 0.68) !important;
}

html[data-theme="light"] body.diagram-phase1 .ms-modal__content {
    color: rgba(226, 232, 240, 0.84) !important;
}

html[data-theme="light"] body.diagram-phase1 .ms-modal__content h3 {
    color: var(--accent, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .ms-modal__content .ms-muted {
    color: rgba(226, 232, 240, 0.58) !important;
}

html[data-theme="light"] body.diagram-phase1 .ms-modal__close {
    color: rgba(226, 232, 240, 0.88) !important;
}

/* ── Light mode: problem panel + emphasis text ── */
html[data-theme="light"] body.diagram-phase1 .problem {
    background: rgba(5, 6, 12, 0.58) !important;
}

html[data-theme="light"] body.diagram-phase1 .problem h2,
html[data-theme="light"] body.diagram-phase1 .problem-text {
    color: rgba(246, 244, 240, 0.92) !important;
}

html[data-theme="light"] body.diagram-phase1 .problem h2 em {
    color: #f6f4f0 !important;
    font-weight: 700;
}

/* ── Light mode: card / agent hover glow ── */
html[data-theme="light"] body.diagram-phase1 .step:hover,
html[data-theme="light"] body.diagram-phase1 .agent-card:hover,
html[data-theme="light"] body.diagram-phase1 .problem .problem-item:hover {
    border-color: rgba(0, 0, 0, 0.2) !important;
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.1),
        0 0 24px rgba(0, 0, 0, 0.16) !important;
}

html[data-theme="light"] body.diagram-phase1 a.nav-agent:not(.nav-agent-soon):not(.is-active):hover,
html[data-theme="light"] body.diagram-phase2 a.nav-agent:not(.nav-agent-soon):not(.is-active):hover {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="light"] body.diagram-phase1 .nav-agent,
html[data-theme="light"] body.diagram-phase2 .nav-agent {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--mist, #e4e2dd) !important;
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .nav-agent.nav-agent-soon,
html[data-theme="light"] body.diagram-phase2 .nav-agent.nav-agent-soon {
    background: #eceff1 !important;
    color: var(--concrete, #1e1e1e) !important;
    opacity: 0.85;
}

html[data-theme="light"] .keplerworks-footer .footer-links a:hover {
    color: var(--ink, #000000);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] .keplerworks-footer .social-link:hover {
    border-color: rgba(0, 0, 0, 0.22);
    color: var(--ink, #000000);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.14);
}

/* ── Light mode: orbital visual — darker, more visible ── */
html[data-theme="light"] body.diagram-phase1 .diagram-solar .sun {
    mix-blend-mode: normal;
    opacity: 0.82;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 48%),
        radial-gradient(circle at 55% 60%, rgba(180, 130, 20, 1), rgba(90, 60, 8, 0.95) 62%),
        radial-gradient(circle at 50% 50%, rgba(120, 85, 10, 0.35), rgba(0, 0, 0, 0) 70%);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.18),
        0 0 48px rgba(0, 0, 0, 0.22),
        0 0 90px rgba(120, 85, 10, 0.28);
    filter: saturate(1.05) brightness(0.88);
}

html[data-theme="light"] body.diagram-phase1 .diagram-solar .orbit-ring {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
    opacity: 0.95;
}

html[data-theme="light"] body.diagram-phase1 .diagram-solar .planet {
    mix-blend-mode: normal;
    opacity: 0.88;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.14),
        0 0 24px rgba(0, 0, 0, 0.18);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 56%),
        radial-gradient(circle at 60% 60%, rgba(40, 40, 40, 0.88), rgba(0, 0, 0, 0.35) 72%);
}

html[data-theme="light"] body.diagram-phase1 .diagram-solar .planet-saturn::after {
    border-color: rgba(30, 30, 30, 0.42);
    box-shadow: 0 0 10px rgba(30, 30, 30, 0.14);
}

/* ── Light mode: legal pages (terms, privacy) ── */
html[data-theme="light"] body.diagram-phase1 .legal-title,
html[data-theme="light"] body.diagram-phase1 .legal-card h2,
html[data-theme="light"] body.diagram-phase1 .legal-card p,
html[data-theme="light"] body.diagram-phase1 .legal-card li,
html[data-theme="light"] body.diagram-phase1 .legal-sub,
html[data-theme="light"] body.diagram-phase1 .last-updated {
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .legal-card {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: var(--mist, #e4e2dd) !important;
}

/* ── Light mode: 404 not-found card ── */
html[data-theme="light"] body.diagram-phase1 .not-found-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--mist, #e4e2dd) !important;
    box-shadow: 0 12px 40px rgba(10, 15, 26, 0.08) !important;
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .not-found-card .code,
html[data-theme="light"] body.diagram-phase1 .not-found-card h1,
html[data-theme="light"] body.diagram-phase1 .not-found-card p {
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .not-found-card p {
    color: var(--slate, #1e1e1e) !important;
}

html[data-theme="light"] body.diagram-phase1 .not-found-card .btn-outline {
    border-color: var(--ink, #000000) !important;
    color: var(--ink, #000000) !important;
    background: transparent !important;
}

html[data-theme="light"] body.diagram-phase1 .not-found-card .btn-outline:hover {
    background: var(--mist, #e4e2dd) !important;
    color: var(--ink, #000000) !important;
}

/* ── Dark mode: 404 not-found card (glass panel) ── */
html[data-theme="dark"] body.diagram-phase1 .not-found-card {
    background: rgba(20, 20, 20, 0.88) !important;
    border-color: rgba(228, 226, 221, 0.18) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35) !important;
    color: var(--kw-white, #ffffff) !important;
}

html[data-theme="dark"] body.diagram-phase1 .not-found-card .code {
    color: var(--accent, #ffffff) !important;
}

html[data-theme="dark"] body.diagram-phase1 .not-found-card h1 {
    color: var(--kw-white, #ffffff) !important;
}

html[data-theme="dark"] body.diagram-phase1 .not-found-card p {
    color: rgba(242, 244, 248, 0.88) !important;
}

html[data-theme="dark"] body.diagram-phase1 .not-found-card .btn-outline {
    border-color: rgba(228, 226, 221, 0.35) !important;
    color: var(--kw-white, #ffffff) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] body.diagram-phase1 .not-found-card .btn-outline:hover {
    border-color: rgba(228, 226, 221, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--kw-white, #ffffff) !important;
}

/* ── Light mode: about audience (WHO IT'S FOR) ── */
html[data-theme="light"] body.diagram-phase1 .audience {
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .audience h2,
html[data-theme="light"] body.diagram-phase1 .audience .section-label,
html[data-theme="light"] body.diagram-phase1 .audience-card h4,
html[data-theme="light"] body.diagram-phase1 .audience-card p {
    color: #000000 !important;
}

html[data-theme="light"] body.diagram-phase1 .audience-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--mist, #e4e2dd) !important;
}

/* ── Light mode: about problem section (match index panel) ── */
html[data-theme="light"] body.diagram-phase1 .problem h2,
html[data-theme="light"] body.diagram-phase1 .problem .section-label,
html[data-theme="light"] body.diagram-phase1 .problem-item h4,
html[data-theme="light"] body.diagram-phase1 .problem-item p {
    color: rgba(246, 244, 240, 0.92) !important;
}

html[data-theme="light"] body.diagram-phase1 .problem .problem-item {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(246, 244, 240, 0.14) !important;
}

/* ── Light mode: pricing billing toggle ── */
html[data-theme="light"] body.diagram-phase1 .billing-toggle {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--mist, #e4e2dd) !important;
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .toggle-track {
    background: var(--mist, #e4e2dd) !important;
}

html[data-theme="light"] body.diagram-phase1 .save-badge {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    border: 1px solid #a5d6a7 !important;
}

/* ── Light mode: onboarding package card ── */
html[data-theme="light"] body.diagram-phase1 .onboarding-card,
html[data-theme="light"] body.diagram-phase1 .onboarding-card h2,
html[data-theme="light"] body.diagram-phase1 .onboarding-card .ob-lede,
html[data-theme="light"] body.diagram-phase1 .onboarding-card .ob-meta,
html[data-theme="light"] body.diagram-phase1 .onboarding-card .ob-price,
html[data-theme="light"] body.diagram-phase1 .onboarding-card .ob-price-note {
    color: #f6f4f0 !important;
}

html[data-theme="light"] body.diagram-phase1 .onboarding-card .onboarding-cta {
    background: transparent !important;
    border: 1.5px solid #f6f4f0 !important;
    color: #f6f4f0 !important;
}

html[data-theme="light"] body.diagram-phase1 .onboarding-card .onboarding-cta:hover {
    background: rgba(246, 244, 240, 0.1) !important;
    border-color: #f6f4f0 !important;
    color: #f6f4f0 !important;
    box-shadow:
        0 0 18px rgba(246, 244, 240, 0.35),
        0 0 36px rgba(246, 244, 240, 0.18) !important;
}

/* ── Light mode: about proof / founder section ── */
html[data-theme="light"] body.diagram-phase1 .proof {
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .proof h2,
html[data-theme="light"] body.diagram-phase1 .proof p,
html[data-theme="light"] body.diagram-phase1 .proof .section-label,
html[data-theme="light"] body.diagram-phase1 .proof .design-partners p,
html[data-theme="light"] body.diagram-phase1 .proof .design-partners strong {
    color: #000000 !important;
}

html[data-theme="light"] body.diagram-phase1 .proof .design-partners {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--mist, #e4e2dd) !important;
}

/* ── Dark mode: pricing billing toggle (softer thumb) ── */
html[data-theme="dark"] body.diagram-phase1 .toggle-thumb {
    background: #e4e2dd !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* ── Light mode: pricing comparison table ── */
html[data-theme="light"] body.diagram-phase1 .comparison-section h2 {
    color: var(--ink, #000000) !important;
}

html[data-theme="light"] body.diagram-phase1 .comparison-table,
html[data-theme="light"] body.diagram-phase1 .comparison-table th,
html[data-theme="light"] body.diagram-phase1 .comparison-table td {
    color: #000000 !important;
}

html[data-theme="light"] body.diagram-phase1 .comparison-table th {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: var(--mist, #e4e2dd) !important;
}

html[data-theme="light"] body.diagram-phase1 .comparison-table td {
    border-bottom-color: var(--mist, #e4e2dd) !important;
}

html[data-theme="light"] body.diagram-phase1 .comparison-table th.col-recommended,
html[data-theme="light"] body.diagram-phase1 .comparison-table td.col-recommended {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #000000 !important;
}

html[data-theme="light"] body.diagram-phase1 .comparison-table th.col-recommended small {
    color: var(--concrete, #1e1e1e) !important;
}

html[data-theme="light"] body.diagram-phase1 .comparison-table tbody tr:hover td {
    background: rgba(0, 0, 0, 0.03) !important;
}

html[data-theme="light"] body.diagram-phase1 .comparison-table tbody tr:hover td.col-recommended {
    background: rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="light"] body.diagram-phase1 .comparison-table tr.tg-section td {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #000000 !important;
    border-bottom-color: var(--mist, #e4e2dd) !important;
}

/* ── Carbon tool nav pill hover (non-active + current page) ── */
html[data-theme="light"] body.diagram-phase1 a.nav-agent.nav-agent-carbon:not(.nav-agent-soon):not(.is-active):hover,
html[data-theme="light"] body.diagram-phase2 a.nav-agent.nav-agent-carbon:not(.nav-agent-soon):not(.is-active):hover {
    color: var(--ink, #000000) !important;
    border-color: rgba(0, 0, 0, 0.38) !important;
    box-shadow: none !important;
}

html[data-theme="light"] a.nav-agent.nav-agent-carbon.is-active:hover,
html[data-theme="light"] body.diagram-phase1 a.nav-agent.nav-agent-carbon.is-active:hover,
html[data-theme="light"] body.diagram-phase2 a.nav-agent.nav-agent-carbon.is-active:hover {
    background: rgba(255, 255, 255, 0.98) !important;
    color: var(--ink, #000000) !important;
    border-color: rgba(0, 0, 0, 0.38) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] a.nav-agent.nav-agent-carbon.is-active:hover,
html[data-theme="dark"] body.diagram-phase1 a.nav-agent.nav-agent-carbon.is-active:hover,
html[data-theme="dark"] body.diagram-phase2 a.nav-agent.nav-agent-carbon.is-active:hover {
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    border-color: var(--accent-border) !important;
    box-shadow: none !important;
}

/* ── Carbon tool: sample IFC button hover (match Upload outline) ── */
html[data-theme="light"] body.diagram-phase2 .btn-outline:hover,
html[data-theme="light"] body.diagram-phase2 .btn-sample-demo:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

html[data-theme="dark"] body.diagram-phase2 .btn-outline:hover,
html[data-theme="dark"] body.diagram-phase2 .btn-sample-demo:hover {
    border-color: var(--accent-light) !important;
    color: var(--accent) !important;
}