:root {
    color-scheme: dark;
    --bg: #0a0b0d;
    --bg-alt: #15171a;
    --fg: #f5f6f7;
    --border: #262930;
    --subtle: #8b929b;
    --accent: #00d964;
    --accent-soft: #0f2e1c;
    --negative: #ff4d4d;
    --negative-soft: #3a1414;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --bg-alt: #f6f7f9;
    --fg: #14161a;
    --border: #e2e4e8;
    --subtle: #666d76;
    --accent: #00a851;
    --accent-soft: #e6f9ee;
    --negative: #d92d2d;
    --negative-soft: #fdeaea;
    --shadow: 0 1px 2px rgba(20, 20, 43, 0.04), 0 8px 24px rgba(20, 20, 43, 0.06);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--fg);
    background: var(--bg);
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    padding-top: calc(1rem + env(safe-area-inset-top));
    padding-left: calc(1.5rem + env(safe-area-inset-left));
    padding-right: calc(1.5rem + env(safe-area-inset-right));
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    /* Must outrank .nav-scrim's z-index (35) at the document's top level --
       position:sticky + z-index here makes .site-header its own stacking
       context, so the mobile nav drawer's z-index:40 is scoped *inside*
       that context and never actually compared against the scrim's 35.
       From outside, the whole header (drawer included) only ever counted
       as "30", which the scrim beat -- so the scrim visually and
       functionally covered the drawer's links despite sitting behind them
       in source order and "under" them by the drawer's own local z-index. */
    z-index: 50;
}

/* backdrop-filter lives on a pseudo-element, not .site-header itself --
   backdrop-filter/filter on an element makes it a containing block for any
   position:fixed descendant, which would trap the mobile nav drawer inside
   the header's own box instead of the viewport. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
}

.site-header .brand {
    font-weight: 800;
    color: var(--fg);
    text-decoration: none;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.site-header nav a {
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.site-header nav a.btn-primary {
    color: #05170c;
}

.nav-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: block;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--fg);
    cursor: pointer;
    flex-shrink: 0;
}

.theme-toggle svg {
    width: 1.05rem;
    height: 1.05rem;
}

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

:root[data-theme="light"] .theme-toggle .icon-moon {
    display: none;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
    display: block;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--fg);
    cursor: pointer;
    flex-shrink: 0;
}

.nav-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
}

.nav-scrim {
    display: none;
}

main {
    max-width: 860px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

main:has(> .landing) {
    max-width: 1120px;
}

.subtle {
    color: var(--subtle);
    font-size: 0.9rem;
}

/* Default for inline content links (prose, list items, form help text).
   Nav/footer/badge/button links override this via more specific
   selectors -- without this rule, content links fall back to the
   browser's default blue/purple, which clashes with the brand palette. */
a {
    color: var(--accent);
}

a:hover {
    text-decoration-color: currentColor;
}

input[type="checkbox"] {
    accent-color: var(--accent);
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
}

code {
    background: color-mix(in srgb, var(--fg) 8%, var(--bg));
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}

label {
    font-size: 0.9rem;
}

input[type="text"],
input[type="number"] {
    width: 100%;
    max-width: 400px;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg);
    font-size: 1rem;
}

button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--accent);
    color: #05170c;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}

.rules-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.rules-table th,
.rules-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.rules-table tr.inactive {
    opacity: 0.5;
}

.onboarding-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.btn-primary {
    display: inline-block;
    background: var(--accent);
    color: #05170c;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    border: 1px solid var(--accent);
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--fg);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--border);
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn-nav {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.btn-sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
}

.page-header {
    margin-bottom: 1.75rem;
}

.page-header h1 {
    margin: 0 0 0.35rem;
}

.page-header p {
    margin: 0;
}

.card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    background: var(--bg-alt);
}

.card + .card {
    margin-top: 1.25rem;
}

.card h2 {
    margin-top: 0;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card h2:not(:first-child) {
    margin-top: 1.75rem;
}

.card h2 .section-icon {
    color: var(--accent);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.empty-state {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--subtle);
}

.empty-state-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 0.75rem;
    color: var(--subtle);
}

.empty-state p {
    margin: 0 0 1rem;
}

.empty-state p:last-child {
    margin-bottom: 0;
}

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--fg);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--bg-alt);
}

.quick-links a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.form-group .subtle {
    display: block;
    margin-top: 0.4rem;
}

.checkbox-row {
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}

.ticker-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    margin-top: 0.25rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
    max-width: 400px;
}

.ticker-suggestion {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    font-size: 0.85rem;
    color: var(--fg);
    cursor: pointer;
}

.ticker-suggestion:hover,
.ticker-suggestion:focus {
    background: var(--bg-alt);
}

.ticker-suggestion strong {
    color: var(--accent);
    flex-shrink: 0;
}

.ticker-suggestion span {
    color: var(--subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.5rem;
}

.checkbox-grid .checkbox-row {
    margin-bottom: 0.4rem;
}

.checkbox-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 400;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.table-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.status-pill.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.status-pill.inactive {
    background: var(--bg-alt);
    color: var(--subtle);
    border: 1px solid var(--border);
}

.learn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 2rem 0;
    list-style: none;
    padding: 0;
}

.learn-card {
    display: block;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    background: var(--bg-alt);
    text-decoration: none;
    color: var(--fg);
}

.learn-card:hover {
    border-color: var(--accent);
}

.learn-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: var(--accent);
}

.learn-card p {
    margin: 0;
    color: var(--subtle);
    font-size: 0.9rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Buy/sell signal badges -- accent (green) is reserved for "buy", negative
   (red) exclusively for "sell", never reused for brand/CTA elements so the
   color always carries the same meaning wherever it appears. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge-buy {
    background: var(--accent-soft);
    color: var(--accent);
}

.badge-sell {
    background: var(--negative-soft);
    color: var(--negative);
}

.hero {
    text-align: center;
    padding: 4rem 0 3rem;
}

.hero h1 {
    font-size: 2.75rem;
    line-height: 1.1;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.hero .tagline {
    color: var(--subtle);
    font-size: 1.2rem;
    max-width: 640px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

.hero-trust {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0;
    margin: 2rem 0 0;
    font-size: 0.85rem;
    color: var(--subtle);
}

.hero-trust li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hero-trust li::before {
    content: "\2713";
    color: var(--accent);
    font-weight: 700;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.feature-list li {
    margin-bottom: 1.25rem;
}

.feature-list strong {
    display: block;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 3rem 0;
}

.feature-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    background: var(--bg-alt);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.feature-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.feature-card p {
    color: var(--subtle);
    margin: 0;
    font-size: 0.95rem;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.why-us {
    max-width: 720px;
    margin: 3rem auto;
    text-align: center;
}

.why-us h2 {
    font-size: 1.4rem;
}

.track-record-preview {
    margin: 3rem 0;
    text-align: center;
}

.track-record-preview h2 {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
}

.track-record-preview-sub {
    max-width: 640px;
    margin: 0 auto 1.25rem;
}

.track-record-preview .table-scroll {
    text-align: left;
}

.track-record-preview-cta {
    margin-top: 1rem;
    font-weight: 600;
}

.pricing {
    margin: 4rem 0 3rem;
    text-align: center;
}

.pricing h2 {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}

.pricing-sub {
    margin-top: 0;
}

.billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.75rem 0 2.5rem;
    font-size: 0.9rem;
}

.billing-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.save-badge {
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.switch .slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background: var(--bg);
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.switch input:checked + .slider {
    background: var(--accent);
}

.switch input:checked + .slider::before {
    transform: translateX(18px);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}

.price-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    background: var(--bg);
}

.price-card--featured {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.price-ribbon {
    position: absolute;
    top: -0.75rem;
    left: 1.75rem;
    background: var(--accent);
    color: #05170c;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}

.price-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}

.price-amount {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    font-variant-numeric: tabular-nums;
}

.price-amount .price-period {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--subtle);
}

.price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

.price-features li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}

.price-features li:last-child {
    border-bottom: none;
}

.price-fineprint {
    font-size: 0.78rem;
    color: var(--subtle);
    text-align: center;
    margin: 0.75rem 0 0;
}

.price-compare {
    font-size: 0.8rem;
    color: var(--subtle);
    text-align: center;
    margin: 0.5rem 0 0;
}

.btn-block {
    display: block;
    text-align: center;
    width: 100%;
}

.site-footer {
    max-width: 1120px;
    margin: 3rem auto 0;
    padding: 1.5rem 1.5rem 2.5rem;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    text-align: center;
}

.site-footer-links {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}

.site-footer-links a {
    color: var(--subtle);
}

.site-footer-note {
    font-size: 0.78rem;
    color: var(--subtle);
    margin: 0;
}

.disclaimer {
    font-size: 0.8rem;
    color: var(--subtle);
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 2rem;
}

@media (max-width: 720px) {
    .feature-grid,
    .pricing-grid,
    .learn-grid,
    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 2rem;
    }
}

@media (max-width: 640px) {
    .nav-toggle {
        display: inline-flex;
    }

    .site-header nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(78vw, 320px);
        transform: translateX(100%);
        transition: transform 0.2s ease;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.25rem;
        background: var(--bg);
        border-left: 1px solid var(--border);
        box-shadow: var(--shadow);
        padding: calc(1.25rem + env(safe-area-inset-top)) 1.25rem 1.25rem;
        padding-right: calc(1.25rem + env(safe-area-inset-right));
        z-index: 40;
        font-size: 1rem;
        overflow-y: auto;
    }

    .site-header nav.is-open {
        transform: translateX(0);
    }

    .site-header nav a,
    .site-header nav .user-email {
        min-height: 44px;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .site-header nav .btn-nav,
    .site-header nav .btn-primary {
        display: flex;
        justify-content: center;
    }

    .site-header nav .theme-toggle {
        align-self: flex-start;
        margin-top: 0.5rem;
    }

    .nav-scrim {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        /* Below .site-header's own z-index (see that rule's comment) --
           empirically, giving .site-header a higher z-index alone did NOT
           reliably outrank this at the top level (a position:sticky
           stacking context that hasn't engaged its "stuck" state yet
           behaves inconsistently across engines), so this is pinned
           explicitly lower instead of relying on that comparison. Verified
           by clicking an actual link inside the open drawer, not just by
           reading computed z-index values. */
        z-index: 20;
    }

    .nav-scrim.is-open {
        display: block;
    }

    /* Rules list only, not every .rules-table on the site -- this one's
       rightmost column holds the Edit/Deactivate actions, so silently
       scrolling them off-screen (the plain .table-scroll behavior other
       tables use) hides the actual point of the page, not just extra
       reference data. */
    .rules-list-table thead {
        display: none;
    }

    .rules-list-table,
    .rules-list-table tbody,
    .rules-list-table tr {
        display: block;
        width: 100%;
    }

    .rules-list-table tr {
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 0.25rem 1rem;
        margin-bottom: 0.75rem;
    }

    .rules-list-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border);
        text-align: right;
    }

    .rules-list-table td:last-child {
        border-bottom: none;
    }

    .rules-list-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--subtle);
        text-align: left;
        flex-shrink: 0;
    }

    .rules-list-table .table-actions {
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 2.5rem 0 2rem;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .hero .tagline {
        font-size: 1.05rem;
    }

    .pricing-grid {
        gap: 1rem;
    }

    .price-card {
        padding: 1.5rem 1.25rem;
    }
}