:root {
    --subpage-paper: rgba(255,255,255,.006);
    --subpage-paper-strong: rgba(255,255,255,.006);
    --subpage-paper-soft: rgba(255,255,255,.006);
    --subpage-paper-border: rgba(232,246,255,.34);
    --subpage-paper-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        inset 0 -1px 0 rgba(255,255,255,.08),
        0 24px 70px rgba(0,0,0,.22);
    --subpage-surface-ink: #f2f7ff;
    --subpage-surface-muted: #bdd1e8;
    --subpage-link: #8fc7ff;
    --subpage-pill-bg: rgba(255,255,255,.035);
    --subpage-pill-border: rgba(232,246,255,.24);
    --subpage-pill-ink: #d6e9ff;
}

main :is(
    .hero,
    .hero-panel,
    .meta-panel,
    .section-panel,
    .info-panel,
    .channel-card,
    .form-panel,
    .list-panel,
    .cta-panel,
    .panel,
    .card,
    .plan,
    .compare-card,
    .subscribe-dialog,
    .access-popup-card,
    .formula-card,
    .meta-card,
    .status-box,
    .glass-panel,
    .metric-card,
    .research-card,
    .insight-card,
    .team-member,
    .newsletter,
    .tile,
    .box,
    .result,
    .formula
) {
    background: var(--subpage-paper) !important;
    border: 1px solid var(--subpage-paper-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--subpage-paper-shadow) !important;
    color: var(--subpage-surface-ink);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    -webkit-backdrop-filter: blur(10px) brightness(1.02) contrast(1.04) saturate(1.04);
    backdrop-filter: blur(10px) brightness(1.02) contrast(1.04) saturate(1.04);
}

main :is(
    .hero,
    .hero-panel,
    .info-panel,
    .cta-panel,
    .formula-card,
    .meta-card,
    .section-panel
) {
    background: var(--subpage-paper-strong) !important;
}

main :is(
    .panel,
    .card,
    .plan,
    .compare-card,
    .status-box,
    .channel-card,
    .list-panel,
    .glass-panel,
    .metric-card,
    .newsletter,
    .tile,
    .box,
    .result,
    .formula
) {
    background: var(--subpage-paper) !important;
}

main :is(
    .hero,
    .hero-panel,
    .meta-panel,
    .section-panel,
    .info-panel,
    .channel-card,
    .form-panel,
    .list-panel,
    .cta-panel,
    .panel,
    .card,
    .plan,
    .compare-card,
    .subscribe-dialog,
    .access-popup-card,
    .formula-card,
    .meta-card,
    .status-box,
    .glass-panel,
    .metric-card,
    .research-card,
    .insight-card,
    .team-member,
    .newsletter,
    .tile,
    .box,
    .result,
    .formula
)::before,
main :is(
    .hero,
    .hero-panel,
    .meta-panel,
    .section-panel,
    .info-panel,
    .channel-card,
    .form-panel,
    .list-panel,
    .cta-panel,
    .panel,
    .card,
    .plan,
    .compare-card,
    .subscribe-dialog,
    .access-popup-card,
    .formula-card,
    .meta-card,
    .status-box,
    .glass-panel,
    .metric-card,
    .research-card,
    .insight-card,
    .team-member,
    .newsletter,
    .tile,
    .box,
    .result,
    .formula
)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}

main :is(
    .hero,
    .hero-panel,
    .meta-panel,
    .section-panel,
    .info-panel,
    .channel-card,
    .form-panel,
    .list-panel,
    .cta-panel,
    .panel,
    .card,
    .plan,
    .compare-card,
    .subscribe-dialog,
    .access-popup-card,
    .formula-card,
    .meta-card,
    .status-box,
    .glass-panel,
    .metric-card,
    .research-card,
    .insight-card,
    .team-member,
    .newsletter,
    .tile,
    .box,
    .result,
    .formula
)::before {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.46),
        inset 1px 0 0 rgba(255,255,255,.08),
        inset -1px 0 0 rgba(255,255,255,.06),
        inset 0 -1px 0 rgba(255,255,255,.1);
}

main :is(
    .hero,
    .hero-panel,
    .meta-panel,
    .section-panel,
    .info-panel,
    .channel-card,
    .form-panel,
    .list-panel,
    .cta-panel,
    .panel,
    .card,
    .plan,
    .compare-card,
    .subscribe-dialog,
    .access-popup-card,
    .formula-card,
    .meta-card,
    .status-box,
    .glass-panel,
    .metric-card,
    .research-card,
    .insight-card,
    .team-member,
    .newsletter,
    .tile,
    .box,
    .result,
    .formula
)::after {
    background:
        radial-gradient(120% 70% at 7% 0%, rgba(255,255,255,.14), transparent 30%),
        linear-gradient(118deg, transparent 0 44%, rgba(255,255,255,.035) 50%, transparent 58%);
    opacity: .42;
    mix-blend-mode: screen;
}

main :is(
    .hero,
    .hero-panel,
    .meta-panel,
    .section-panel,
    .info-panel,
    .channel-card,
    .form-panel,
    .list-panel,
    .cta-panel,
    .panel,
    .card,
    .plan,
    .compare-card,
    .subscribe-dialog,
    .access-popup-card,
    .formula-card,
    .meta-card,
    .status-box,
    .glass-panel,
    .metric-card,
    .research-card,
    .insight-card,
    .team-member,
    .newsletter,
    .tile,
    .box,
    .result,
    .formula
) > * {
    position: relative;
    z-index: 1;
}

main :is(
    .hero,
    .hero-panel,
    .meta-panel,
    .section-panel,
    .info-panel,
    .channel-card,
    .form-panel,
    .list-panel,
    .cta-panel,
    .panel,
    .card,
    .plan,
    .compare-card,
    .subscribe-dialog,
    .access-popup-card,
    .formula-card,
    .meta-card,
    .status-box,
    .glass-panel,
    .metric-card,
    .research-card,
    .insight-card,
    .team-member,
    .newsletter,
    .tile,
    .box,
    .result,
    .formula
) :is(h1, h2, h3, h4, strong, .v, .status-value, .hero-title, .panel-title, .list-title, .plan-price, .value, .title) {
    color: var(--subpage-surface-ink) !important;
}

main :is(
    .hero,
    .hero-panel,
    .meta-panel,
    .section-panel,
    .info-panel,
    .channel-card,
    .form-panel,
    .list-panel,
    .cta-panel,
    .panel,
    .card,
    .plan,
    .compare-card,
    .subscribe-dialog,
    .access-popup-card,
    .formula-card,
    .meta-card,
    .status-box,
    .glass-panel,
    .metric-card,
    .research-card,
    .insight-card,
    .team-member,
    .newsletter,
    .tile,
    .box,
    .result,
    .formula
) :is(p, li, dd, dt, label, small, .lead, .muted, .meta, .note, .footnote, .source, .status-note, .k, .subtitle, .hero-copy, .panel-copy, .hero-meta, .read, .axis-label) {
    color: var(--subpage-surface-muted) !important;
}

main :is(
    .hero-kicker,
    .panel-kicker,
    .channel-kicker,
    .list-kicker,
    .pill,
    .eyebrow,
    .tag
) {
    background: var(--subpage-pill-bg) !important;
    border: 1px solid var(--subpage-pill-border) !important;
    color: var(--subpage-pill-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

main :is(.status-label, .overline, .section-label) {
    color: var(--subpage-pill-ink) !important;
}

main :is(.hero, .hero-panel, .panel, .card, .plan, .compare-card, .form-panel, .cta-panel, .formula-card, .meta-card, .list-panel, .channel-card, .result, .formula) a:not(.btn):not(.button):not(.cta-button):not(.pill-btn) {
    color: var(--subpage-link) !important;
}

main :is(.hero, .hero-panel, .panel, .card, .plan, .compare-card, .form-panel, .cta-panel, .formula-card, .meta-card, .list-panel, .channel-card) :is(input, select, textarea) {
    background: rgba(7,14,27,.62) !important;
    color: var(--subpage-surface-ink) !important;
    border: 1px solid rgba(166,206,255,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

main :is(.hero, .hero-panel, .panel, .card, .plan, .compare-card, .form-panel, .cta-panel, .formula-card, .meta-card, .list-panel, .channel-card) :is(input, select, textarea)::placeholder {
    color: rgba(195,213,236,.52) !important;
}

main :is(.btn.secondary, .button.secondary, .cta-button.secondary) {
    background: rgba(255,255,255,.035) !important;
    color: var(--subpage-surface-ink) !important;
    border-color: rgba(232,246,255,.24) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 10px 24px rgba(0,0,0,.18);
}

main :is(.btn, .button, .cta-button, .pill-btn):not(.secondary):not(.ghost):not(.outline) {
    color: #fff !important;
}

main :is(table th, table td, .compare-table th, .compare-table td) {
    border-color: rgba(232,246,255,.18) !important;
    color: var(--subpage-surface-ink);
}
