/*
 * VolumeLogic shared site system
 * Load after page-specific styles so these shared primitives stay consistent.
 * No font, image or framework requests: the layer is intentionally lightweight.
 */

:root {
    color-scheme: dark;
    --vl-bg: #000;
    --vl-surface: #0a0a0a;
    --vl-surface-raised: #141414;
    --vl-surface-hover: #1a1a1a;
    --vl-text: #fff;
    --vl-text-soft: #d9e1ea;
    --vl-text-muted: #a3a3a3;
    --vl-border: #292929;
    --vl-border-strong: #3a3a3a;
    --vl-brand: #0096ff;
    --vl-brand-hover: #35adff;
    --vl-brand-ink: #00131f;
    --vl-success: #22c55e;
    --vl-focus: #66c2ff;

    --vl-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --vl-text-xs: 0.78rem;
    --vl-text-sm: 0.9rem;
    --vl-text-base: 1rem;
    --vl-text-lg: clamp(1.05rem, 1.5vw, 1.18rem);
    --vl-heading-3: clamp(1.15rem, 2vw, 1.4rem);
    --vl-heading-2: clamp(1.55rem, 3.2vw, 2.35rem);
    --vl-heading-1: clamp(2.25rem, 6.2vw, 4.75rem);

    --vl-space-1: 0.25rem;
    --vl-space-2: 0.5rem;
    --vl-space-3: 0.75rem;
    --vl-space-4: 1rem;
    --vl-space-5: 1.5rem;
    --vl-space-6: 2rem;
    --vl-space-7: 3rem;
    --vl-space-8: 4.5rem;
    --vl-radius-sm: 8px;
    --vl-radius-md: 12px;
    --vl-radius-lg: 16px;
    --vl-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.3);
    --vl-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.42);

    --vl-shell: 1180px;
    --vl-content-wide: 1120px;
    --vl-content-editorial: 940px;
    --vl-content-reading: 760px;
    --vl-gutter: 16px;

    /* Backwards-compatible aliases for existing pages. */
    --bg: var(--vl-bg);
    --surface: var(--vl-surface);
    --card: var(--vl-surface-raised);
    --text: var(--vl-text);
    --text-muted: var(--vl-text-muted);
    --muted: var(--vl-text-muted);
    --border: var(--vl-border);
    --brand: var(--vl-brand);
    --brand-strong: var(--vl-brand-hover);
    --radius: var(--vl-radius-sm);
    --shadow-sm: var(--vl-shadow-sm);
    --shadow-md: var(--vl-shadow-lg);
}

html[data-theme="light"] {
    color-scheme: light;
    --vl-bg: #f3f8ff;
    --vl-surface: #ffffff;
    --vl-surface-raised: #edf5ff;
    --vl-surface-hover: #e3eef9;
    --vl-text: #0b1725;
    --vl-text-soft: #3e5164;
    --vl-text-muted: #5f7285;
    --vl-border: #d7e2ed;
    --vl-border-strong: #bdccda;
    --vl-brand: #0073b7;
    --vl-brand-hover: #005f98;
    --vl-brand-ink: #ffffff;
    --vl-success: #0d9956;
    --vl-focus: #0079c2;
    --vl-shadow-sm: 0 10px 28px rgba(30, 73, 112, 0.09);
    --vl-shadow-lg: 0 24px 64px rgba(30, 73, 112, 0.13);

    /* Common names used by page-specific styles. */
    --panel: var(--vl-surface-raised);
    --panel-strong: #e4eef8;
    --card-strong: #e4eef8;
    --soft: var(--vl-text-soft);
    --brand-dark: var(--vl-brand-hover);
    --shadow: var(--vl-shadow-lg);
}

html {
    scroll-padding-top: 5rem;
    background: var(--vl-bg);
}

body {
    min-width: 320px;
    font-family: var(--vl-font-sans);
    color: var(--vl-text);
    background-color: var(--vl-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html[data-theme="dark"] body {
    background:
        linear-gradient(180deg, rgba(0, 150, 255, 0.08) 0, rgba(0, 150, 255, 0) 420px),
        linear-gradient(180deg, #000000 0%, var(--vl-bg) 100%);
}

html[data-theme="light"] body {
    background:
        linear-gradient(180deg, rgba(0, 142, 219, 0.08) 0, rgba(0, 142, 219, 0) 420px),
        linear-gradient(180deg, #ffffff 0%, var(--vl-bg) 100%);
}

img,
svg {
    max-width: 100%;
}

/* One outer alignment for every page; content can narrow inside it. */
.site-shell {
    width: min(var(--vl-shell), calc(100% - (var(--vl-gutter) * 2)));
    margin-inline: auto;
}

/*
 * Existing pages intentionally use different content measures (for example
 * 760px FAQ copy and 940px guides). Keep those measures, but let the shared
 * navigation break out to the same site-wide alignment as the homepage.
 */
.site-page-shell {
    margin-inline: auto;
}

.site-page-shell > .site-nav {
    width: min(var(--vl-shell), calc(100vw - (var(--vl-gutter) * 2)));
    margin-left: 50%;
    transform: translateX(-50%);
}

.content-wide,
.content-editorial,
.content-reading {
    width: 100%;
    margin-inline: auto;
}

.content-wide { max-width: var(--vl-content-wide); }
.content-editorial { max-width: var(--vl-content-editorial); }
.content-reading { max-width: var(--vl-content-reading); }

.section-space {
    padding-block: clamp(var(--vl-space-7), 7vw, var(--vl-space-8));
}

.flow > * { margin-block: 0; }
.flow > * + * { margin-block-start: var(--flow-space, var(--vl-space-4)); }

/* Type roles keep headings consistent without overriding SEO-friendly semantics. */
.display-title,
.page-title {
    max-width: 18ch;
    margin: 0;
    font-size: var(--vl-heading-1);
    font-weight: 760;
    line-height: 0.99;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.section-title {
    margin: 0;
    font-size: var(--vl-heading-2);
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.card-title {
    margin: 0;
    font-size: var(--vl-heading-3);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.lead {
    max-width: 65ch;
    color: var(--vl-text-soft);
    font-size: var(--vl-text-lg);
    line-height: 1.65;
}

.eyebrow {
    color: #c9e9ff;
    font-size: var(--vl-text-xs);
    font-weight: 760;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

html[data-theme="light"] .eyebrow {
    color: #006fae;
}

/* Accessible interaction defaults. */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--vl-focus);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: var(--vl-space-3);
    left: var(--vl-space-3);
    padding: 0.65rem 0.9rem;
    border-radius: var(--vl-radius-sm);
    color: var(--vl-brand-ink);
    background: var(--vl-brand-hover);
    font-weight: 750;
    transform: translateY(calc(-100% - 2rem));
}

.skip-link:focus { transform: translateY(0); }

/* Shared navigation: quiet text links, with one optional conversion action. */
.site-nav {
    display: flex;
    position: relative;
    z-index: 100;
    align-items: center;
    justify-content: space-between;
    gap: var(--vl-space-5);
    min-height: 68px;
    margin: 0;
    padding-block: var(--vl-space-3);
}

.site-nav .brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.6rem;
    color: var(--vl-text);
    font-size: 1rem;
    font-weight: 760;
    text-decoration: none;
    letter-spacing: -0.015em;
}

.site-nav .brand img {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

.site-nav .brand-app-icons {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 3px;
    border: 1px solid var(--vl-border);
    border-radius: 10px;
    background: var(--vl-surface-raised);
}

.site-nav .brand-app-icons img {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.site-nav .brand-label {
    white-space: nowrap;
}

.site-nav .menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.1rem;
    margin-left: auto;
}

.site-nav .nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.55rem 0.72rem;
    border: 0;
    border-radius: var(--vl-radius-sm);
    color: var(--vl-text-soft);
    background: transparent;
    font: inherit;
    font-size: var(--vl-text-sm);
    font-weight: 650;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease;
}

.site-nav .nav-item:hover,
.site-nav .nav-item[aria-current="page"] {
    color: var(--vl-text);
    background: rgba(255, 255, 255, 0.07);
}

html[data-theme="light"] .site-nav .nav-item:hover,
html[data-theme="light"] .site-nav .nav-item[aria-current="page"],
html[data-theme="light"] .site-nav .nav-group[open] > summary.nav-item {
    background: rgba(0, 90, 150, 0.08);
}

.site-nav .nav-item[aria-current="page"] {
    box-shadow: inset 0 -2px var(--vl-brand);
}

.site-nav .nav-cta,
.site-nav .nav-download,
.site-nav [data-nav-cta] {
    margin-left: 0.35rem;
    padding-inline: 1rem;
    color: var(--vl-brand-ink);
    background: var(--vl-brand);
    font-weight: 780;
}

.site-nav .nav-cta:hover,
.site-nav .nav-download:hover,
.site-nav [data-nav-cta]:hover {
    color: var(--vl-brand-ink);
    background: var(--vl-brand-hover);
}

.site-nav summary.nav-item {
    list-style: none;
}

.site-nav summary.nav-item::-webkit-details-marker { display: none; }

.site-nav summary.nav-item::after {
    content: "";
    width: 0.38rem;
    height: 0.38rem;
    margin: -0.2rem 0 0 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.site-nav .nav-group { position: relative; }

.site-nav .nav-group[open] > summary.nav-item {
    color: var(--vl-text);
    background: rgba(255, 255, 255, 0.07);
}

.site-nav .nav-group > summary.has-current-page {
    color: var(--vl-text);
    background: rgba(255, 255, 255, 0.07);
}

.site-nav .nav-group[open] > summary.nav-item::after {
    margin-top: 0.2rem;
    transform: rotate(225deg);
}

.site-nav .nav-drop {
    display: flex;
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 250px;
    max-height: min(70vh, 480px);
    padding: var(--vl-space-2);
    overflow-y: auto;
    border: 1px solid var(--vl-border-strong);
    border-radius: var(--vl-radius-md);
    background: rgba(14, 14, 14, 0.98);
    box-shadow: var(--vl-shadow-lg);
}

html[data-theme="light"] .site-nav .nav-drop {
    background: rgba(255, 255, 255, 0.98);
}

.site-nav .nav-drop a {
    padding: 0.62rem 0.72rem;
    border-radius: 7px;
    color: var(--vl-text-soft);
    font-size: var(--vl-text-sm);
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav .nav-drop a:hover,
.site-nav .nav-drop a[aria-current="page"] {
    color: var(--vl-text);
    background: rgba(0, 150, 255, 0.13);
}

/* The navigation is rendered from site-nav.js so every page uses one menu and one shell. */
.site-nav.vl-nav-unified {
    position: sticky !important;
    top: 12px !important;
    z-index: 100 !important;
    min-height: 62px !important;
    margin-top: 12px !important;
    margin-bottom: 24px !important;
    padding: 7px 9px 7px 14px !important;
    border: 1px solid var(--vl-border-strong) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--vl-surface) 84%, transparent) !important;
    box-shadow: var(--vl-shadow-sm) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.site-nav.vl-nav-unified .menu {
    gap: 0.1rem !important;
    flex-wrap: nowrap !important;
}

.site-nav.vl-nav-unified .nav-item {
    min-height: 42px !important;
    padding: 0.55rem 0.72rem !important;
    border: 0 !important;
    border-radius: 11px !important;
    color: var(--vl-text-soft) !important;
    background: transparent !important;
    font-size: var(--vl-text-sm) !important;
    font-weight: 650 !important;
}

.site-nav.vl-nav-unified .nav-item:hover,
.site-nav.vl-nav-unified .nav-item[aria-current="page"],
.site-nav.vl-nav-unified .nav-group > summary.has-current-page,
.site-nav.vl-nav-unified .nav-group[open] > summary.nav-item {
    color: var(--vl-text) !important;
    background: color-mix(in srgb, var(--vl-text) 7%, transparent) !important;
}

.site-nav.vl-nav-unified .nav-item[aria-current="page"] {
    box-shadow: none !important;
}

.site-nav.vl-nav-unified .nav-download {
    min-height: 44px !important;
    margin-left: 4px !important;
    padding-inline: 19px !important;
    border: 1px solid var(--vl-text) !important;
    border-radius: 12px !important;
    color: var(--vl-bg) !important;
    background: var(--vl-text) !important;
    font-weight: 780 !important;
}

.site-nav.vl-nav-unified .nav-download:hover {
    color: var(--vl-bg) !important;
    background: var(--vl-text-soft) !important;
}

.site-nav .menu-toggle {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--vl-border-strong);
    border-radius: var(--vl-radius-sm);
    color: var(--vl-text);
    background: var(--vl-surface-raised);
    cursor: pointer;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-width: 44px;
    min-height: 42px;
    padding: 0.55rem 0.72rem;
    border: 1px solid var(--vl-border);
    border-radius: var(--vl-radius-sm);
    color: var(--vl-text-soft);
    background: var(--vl-surface-raised);
    font: inherit;
    font-size: var(--vl-text-xs);
    font-weight: 720;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease,
        border-color 160ms ease;
}

.theme-toggle:hover {
    color: var(--vl-text);
    border-color: var(--vl-border-strong);
    background: var(--vl-surface-hover);
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle__moon,
html[data-theme="light"] .theme-toggle__sun {
    display: none;
}

html[data-theme="light"] .theme-toggle__moon {
    display: block;
}

.theme-toggle--floating {
    position: fixed;
    z-index: 1000;
    top: 16px;
    right: 16px;
    box-shadow: var(--vl-shadow-sm);
}

.site-nav__mobile-actions {
    display: contents;
}

.theme-toggle--mobile {
    display: none;
}

.site-nav .menu-toggle span,
.site-nav .menu-toggle::before,
.site-nav .menu-toggle::after {
    content: "";
    position: absolute;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
}

.site-nav .menu-toggle::before { transform: translateY(-6px); }
.site-nav .menu-toggle::after { transform: translateY(6px); }
.site-nav.is-open .menu-toggle span { opacity: 0; }
.site-nav.is-open .menu-toggle::before { transform: rotate(45deg); }
.site-nav.is-open .menu-toggle::after { transform: rotate(-45deg); }

/* Shared conversion controls. */
.button,
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.72rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--vl-radius-sm);
    color: var(--vl-brand-ink);
    background: var(--vl-brand);
    font: inherit;
    font-weight: 780;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease,
        border-color 160ms ease;
}

.button:hover,
.cta:hover {
    color: var(--vl-brand-ink);
    background: var(--vl-brand-hover);
    transform: translateY(-1px);
}

.button.secondary,
.cta.secondary {
    border-color: rgba(0, 150, 255, 0.45);
    color: var(--vl-text);
    background: rgba(0, 150, 255, 0.12);
}

.button.secondary:hover,
.cta.secondary:hover {
    color: var(--vl-text);
    background: rgba(0, 150, 255, 0.22);
}

.store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vl-space-3);
}

.store-btn {
    display: inline-flex;
    align-items: center;
    min-width: 174px;
    min-height: 58px;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--vl-border-strong);
    border-radius: var(--vl-radius-sm);
    color: var(--vl-text);
    background: #050505;
    box-shadow: var(--vl-shadow-sm);
    text-decoration: none;
    transition: transform 160ms ease, background-color 160ms ease,
        border-color 160ms ease;
}

.store-btn:hover {
    color: var(--vl-text);
    border-color: rgba(0, 150, 255, 0.72);
    background: var(--vl-surface-raised);
    transform: translateY(-1px);
}

.store-btn svg {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-right: 0.75rem;
    fill: currentColor;
}

.store-btn > div {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.store-btn span {
    margin-bottom: 0.16rem;
    font-size: 0.64rem;
    line-height: 1;
}

.store-btn strong {
    font-size: 1rem;
    font-weight: 720;
    line-height: 1;
}

.store-note {
    color: var(--vl-text-muted);
    font-size: var(--vl-text-sm);
}

/*
 * Page families predate the shared theme tokens and still contain a few
 * dark-only backgrounds. These overrides keep their visual hierarchy while
 * translating every reading, comparison, guide and calculator surface.
 */
html[data-theme="light"] :where(
    .hero,
    .header,
    .section,
    .verdict,
    .download-panel,
    .tool-shell,
    .tool-toolbar,
    .results-panel,
    .blog-card,
    .guide-card,
    .program-card,
    .feature-card,
    .info-card,
    .metric-card,
    .example-card,
    .calculator-card,
    .card,
    .callout,
    .quick-answer,
    .model-caveat,
    .wns-assumptions,
    .wns-result-card,
    .wns-breakdown div,
    .wns-comparison,
    .answer-box,
    .check-item,
    .mini-card,
    .table-wrap,
    .faq-list details,
    .toc a,
    .quick-links a,
    .hero-links a,
    .resource-links a,
    .related-grid a,
    .related-links a,
    details.faq-item
) {
    color: var(--vl-text);
    border-color: var(--vl-border);
    background: var(--vl-surface);
    box-shadow: var(--vl-shadow-sm);
}

html[data-theme="light"] .section > details {
    color: var(--vl-text);
    border-color: var(--vl-border);
    background: var(--vl-surface-raised);
    box-shadow: none;
}

html[data-theme="light"] .section > details > summary {
    color: var(--vl-text);
}

html[data-theme="light"] .section > details > p {
    color: var(--vl-text-soft);
}

html[data-theme="light"] .faq-list details {
    color: var(--vl-text);
    border-color: var(--vl-border);
    background: var(--vl-surface-raised);
    box-shadow: none;
}

html[data-theme="light"] .faq-list summary {
    color: var(--vl-text);
}

html[data-theme="light"] .faq-list details p {
    color: var(--vl-text-soft);
}

html[data-theme="light"] .faq-item {
    border-color: var(--vl-border);
}

html[data-theme="light"] :where(
    .toc a,
    .quick-links a,
    .hero-links a,
    .resource-links a,
    .related-grid a,
    .related-links a
) {
    color: var(--vl-text);
    border-color: var(--vl-border);
    background: var(--vl-surface-raised);
    box-shadow: none;
}

html[data-theme="light"] :where(
    .toc a span,
    .related-grid a span
) {
    color: var(--vl-text-muted);
}

html[data-theme="light"] :where(
    .toc a:hover,
    .quick-links a:hover,
    .hero-links a:hover,
    .resource-links a:hover,
    .related-grid a:hover,
    .related-links a:hover
) {
    color: #ffffff;
    border-color: var(--vl-brand);
    background: var(--vl-brand);
}

/* Page-level accordion rules must never paint the navigation details element. */
.site-nav .nav-group {
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html[data-theme="light"] :where(
    .hero p,
    .hero-lede,
    .lede,
    .section p,
    .section li,
    .verdict p,
    .download-panel p,
    .card p,
    .card li,
    .callout,
    .hint
) {
    color: var(--vl-text-soft);
}

/*
 * Older page families used fixed near-white values for body copy. A semantic
 * text baseline prevents those values from becoming low-contrast gray when
 * the surrounding surface is translated to light mode.
 */
html[data-theme="light"] body :where(
    p,
    li,
    dd,
    dt,
    figcaption,
    small
) {
    color: var(--vl-text-soft);
}

html[data-theme="light"] body :where(
    .result-main,
    .metric-card strong,
    .standard-cell strong,
    .quick-answer strong,
    .example-card .calc-result,
    .model-caveat strong,
    .wns-program legend,
    .wns-result-card strong,
    .wns-breakdown dd,
    .wns-comparison strong,
    .formula-list strong,
    .signal-grid strong,
    .proof-points strong,
    summary
) {
    color: var(--vl-text);
}

html[data-theme="light"] body :where(
    .band-header p,
    .copy p,
    .copy li,
    .result-sub,
    .metric-card span,
    .info-card p,
    .example-card p,
    .volume-legend li,
    .quick-answer,
    .model-caveat,
    .wns-result-card span,
    .wns-comparison p,
    .formula-list,
    .decision-list li,
    .proof-points li,
    details p
) {
    color: var(--vl-text-soft);
}

html[data-theme="light"] :where(a) {
    color: var(--vl-brand);
}

html[data-theme="light"] :where(a:hover) {
    color: var(--vl-brand-hover);
}

html[data-theme="light"] :where(
    input,
    select,
    textarea,
    .segmented,
    .filter-button,
    .read-link,
    .back-link
) {
    color: var(--vl-text);
    border-color: var(--vl-border);
    background: var(--vl-surface);
}

html[data-theme="light"] :where(th, td) {
    color: var(--vl-text);
    border-color: var(--vl-border);
}

html[data-theme="light"] table,
html[data-theme="light"] tbody,
html[data-theme="light"] tbody tr,
html[data-theme="light"] tbody th,
html[data-theme="light"] tbody td {
    color: var(--vl-text);
    background: var(--vl-surface);
}

html[data-theme="light"] tbody tr:nth-child(even) th,
html[data-theme="light"] tbody tr:nth-child(even) td {
    background: #f6f9fc;
}

html[data-theme="light"] .section-divider,
html[data-theme="light"] .content-band {
    border-color: var(--vl-border);
}

html[data-theme="light"] .section-divider::after {
    background: linear-gradient(90deg, var(--vl-border-strong), transparent);
}

html[data-theme="light"] .table-wrap {
    scrollbar-color: #8fa6ba transparent;
}

html[data-theme="light"] .table-wrap::-webkit-scrollbar-thumb {
    background: #8fa6ba;
}

html[data-theme="light"] :where(th) {
    background: var(--vl-surface-raised);
}

html[data-theme="light"] :where(
    .pill-link,
    .neutral-badge,
    .filter-button
) {
    color: var(--vl-text-soft);
    border-color: var(--vl-border);
    background: var(--vl-surface-raised);
}

html[data-theme="light"] .filter-button[aria-pressed="true"],
html[data-theme="light"] .filter-button:hover,
html[data-theme="light"] .read-link:hover,
html[data-theme="light"] .back-link:hover,
html[data-theme="light"] .pill-link:hover,
html[data-theme="light"] .related-links a:hover {
    color: #ffffff;
    border-color: var(--vl-brand);
    background: var(--vl-brand);
}

html[data-theme="light"] .share-btn {
    color: #005b8f;
    border-color: #1688c8;
    background: #e5f3ff;
}

html[data-theme="light"] .share-btn:hover {
    color: #ffffff;
    border-color: var(--vl-brand-hover);
    background: var(--vl-brand-hover);
}

html[data-theme="light"] .cta.primary {
    color: #ffffff;
    border-color: var(--vl-brand);
    background: var(--vl-brand);
}

html[data-theme="light"] .cta.primary:hover {
    color: #ffffff;
    border-color: var(--vl-brand-hover);
    background: var(--vl-brand-hover);
}

html[data-theme="light"] .status.yes,
html[data-theme="light"] .winner-badge,
html[data-theme="light"] .volume-badge.is-optimal,
html[data-theme="light"] .wns-live-label {
    color: #087243;
}

html[data-theme="light"] .status.no,
html[data-theme="light"] .volume-badge.is-losing {
    color: #b42318;
}

html[data-theme="light"] .status.partial,
html[data-theme="light"] .volume-badge.is-maintaining {
    color: #7a4600;
}

html[data-theme="light"] .volume-badge.is-growing {
    color: #005b8f;
}

html[data-theme="light"] .volume-badge.is-junk {
    color: #5b21b6;
}

html[data-theme="light"] :where(
    label,
    .label,
    .tool-title,
    h1,
    h2,
    h3,
    h4,
    strong
) {
    color: var(--vl-text);
}

html[data-theme="light"] :where(
    .related-list a,
    .footer-links a
) {
    color: #006fae;
}

html[data-theme="light"] :where(
    .related-list a:hover,
    .footer-links a:hover
) {
    color: #005b8f;
}

html[data-theme="light"] .store-btn {
    color: #ffffff;
    border-color: #30363d;
    background: #050505;
}

/* The broad light-theme `strong` rule above would otherwise darken the badge's
   second line to near-black on the black badge. Both lines follow the button. */
html[data-theme="light"] .store-btn span,
html[data-theme="light"] .store-btn strong {
    color: inherit;
}

html[data-theme="light"] :where(
    .contact-row a:not(.secondary),
    .store-row a,
    .hero-actions a:first-child
) {
    color: #ffffff;
    border-color: var(--vl-brand);
    background: var(--vl-brand);
}

html[data-theme="light"] :where(
    .contact-row a:not(.secondary):hover,
    .store-row a:hover,
    .hero-actions a:first-child:hover
) {
    color: #ffffff;
    border-color: var(--vl-brand-hover);
    background: var(--vl-brand-hover);
}

html[data-theme="light"] .contact-row a.secondary {
    color: #00649f;
    border-color: #1688c8;
    background: #ffffff;
}

html[data-theme="light"] .contact-row a.secondary:hover {
    color: #ffffff;
    border-color: var(--vl-brand-hover);
    background: var(--vl-brand-hover);
}

html[data-theme="light"] .hero-actions a:last-child {
    color: #00649f;
    border-color: #9fc8e4;
    background: #eaf5fd;
}

html[data-theme="light"] .program-key {
    color: #ffffff;
}

html[data-theme="light"] .segmented button[aria-pressed="true"] {
    color: #ffffff;
}

html[data-theme="light"] .wns-result-card {
    border-color: #9fc8e4;
    background: #eaf5fd;
}

html[data-theme="light"] .wns-result-card.is-b {
    border-color: #c5b5e8;
    background: #f3efff;
}

html[data-theme="light"] .wns-result-card small {
    color: var(--vl-text-muted);
}

html[data-theme="light"] .attention-callout {
    color: #5c3b00;
    border-left-color: #a96e00;
    background: #fff6cf;
}

html[data-theme="light"] .app-preview img {
    border-color: var(--vl-border-strong);
}

main.container .hint {
    color: var(--vl-text-soft);
    border-color: var(--vl-border);
    background: var(--vl-surface-raised);
}

@media (max-width: 1100px) {
    :root { --vl-gutter: 12px; }

    .site-page-shell > .site-nav {
        width: 100%;
        margin-left: 0;
        transform: none;
    }

    html.vl-nav-ready { overflow-x: hidden; }
    html.vl-nav-ready .site-nav .menu-toggle {
        z-index: 110;
        display: inline-flex;
    }

    /*
     * A backdrop filter makes fixed descendants use the sticky navbar as their
     * containing block in mobile Safari. Disable it so the drawer can occupy
     * the full device viewport instead of being clipped to the navbar.
     */
    .site-nav.vl-nav-unified {
        background: var(--vl-surface) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .site-nav__mobile-actions {
        display: flex;
        align-items: center;
        gap: var(--vl-space-2);
        margin-left: auto;
    }

    .site-nav .theme-toggle--mobile {
        display: inline-flex;
        flex: 0 0 auto;
        width: 44px;
        min-width: 44px;
        padding: 0;
    }

    .site-nav .theme-toggle--mobile .theme-toggle__label {
        display: none;
    }

    html.vl-nav-ready .site-nav .menu {
        display: flex;
        position: fixed;
        z-index: 105;
        top: 0;
        right: 0;
        bottom: auto;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--vl-space-2);
        width: min(86vw, 340px);
        margin: 0;
        padding: 5.25rem var(--vl-space-4) var(--vl-space-5);
        overscroll-behavior: contain;
        overflow-x: hidden;
        overflow-y: auto;
        border-left: 1px solid var(--vl-border);
        background: rgba(7, 7, 7, 0.99);
        box-shadow: -18px 0 48px rgba(0, 0, 0, 0.55);
        transform: translateX(104%);
        visibility: hidden;
        transition: transform 200ms ease, visibility 200ms step-end;
    }

    html[data-theme="light"].vl-nav-ready .site-nav .menu {
        background: rgba(248, 251, 255, 0.99);
        box-shadow: -18px 0 48px rgba(30, 73, 112, 0.18);
    }

    html.vl-nav-ready .site-nav .menu > * {
        flex: 0 0 auto;
        min-width: 0;
    }

    html.vl-nav-ready .site-nav.is-open .menu {
        transform: translateX(0);
        visibility: visible;
        transition: transform 200ms ease, visibility 0ms step-start;
    }

    .site-nav .nav-item {
        justify-content: space-between;
        width: 100%;
        min-height: 46px;
        padding-inline: var(--vl-space-3);
        background: rgba(255, 255, 255, 0.04);
    }

    html[data-theme="light"] .site-nav .nav-item {
        background: rgba(0, 90, 150, 0.06);
    }

    .site-nav .menu .theme-toggle {
        justify-content: flex-start;
        width: 100%;
        min-height: 46px;
        padding-inline: var(--vl-space-3);
    }

    .site-nav .nav-item[aria-current="page"] {
        background: rgba(0, 150, 255, 0.13);
        box-shadow: inset 3px 0 var(--vl-brand);
    }

    .site-nav .nav-cta,
    .site-nav .nav-download,
    .site-nav [data-nav-cta] {
        margin: var(--vl-space-2) 0 0;
        color: var(--vl-brand-ink);
        background: var(--vl-brand);
    }

    .site-nav .nav-group {
        position: static;
        width: 100%;
    }

    .site-nav .nav-drop {
        position: static;
        width: 100%;
        min-width: 0;
        max-height: none;
        margin-top: var(--vl-space-1);
        border-color: var(--vl-border);
        background: rgba(255, 255, 255, 0.025);
        box-shadow: none;
    }

    .site-nav .nav-drop a { white-space: normal; }

    body.vl-menu-open { overflow: hidden; }

    .store-badges { width: 100%; }
    .store-btn { flex: 1 1 174px; }
    :where(.hero-download, .download-actions) .store-badges {
        gap: var(--vl-space-2);
    }
    :where(.hero-download, .download-actions) .store-btn {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    :where(.button, .cta, .store-btn):hover { transform: none; }
}