/* ===================================
   Payment (/Payment/Start) — fake flow for now
   =================================== */

.cortex-payment-wrapper {
    max-width: 560px;
    margin: 2rem auto 3rem;
    color: var(--cortex-text);
}

.cortex-payment-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.cortex-payment-brand-2cc {
    width: 70px;
    height: 70px;
    background-image: url('/assets/2card-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 14px rgba(175, 0, 0, 0.55));
}

.cortex-payment-brand-cortex {
    width: 110px;
    height: 110px;
    background-image: url('/assets/cortex-red-transparent-v2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 14px rgba(175, 0, 0, 0.45));
}

.cortex-payment-header {
    margin-bottom: 1.5rem;
}

.cortex-payment-title {
    font-family: var(--cortex-font-brand);
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--cortex-cyan);
    letter-spacing: 0.05em;
}

.cortex-payment-subtitle {
    margin: 0;
    color: var(--cortex-text-muted);
    font-size: 0.9rem;
}

.cortex-payment-form {
    background: var(--cortex-surface);
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    backdrop-filter: blur(6px);
}

.cortex-payment-legend {
    font-family: var(--cortex-font-brand);
    font-size: 0.8rem;
    color: var(--cortex-cyan);
    letter-spacing: 0.06em;
    padding: 0;
    margin: 0 0 0.5rem;
    float: none;
    width: auto;
}

.cortex-payment-cadence {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cortex-payment-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--cortex-border);
    border-radius: 10px;
    background: rgba(20, 22, 27, 0.5);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cortex-payment-option:hover {
    border-color: rgba(175, 0, 0, 0.45);
}

.cortex-payment-option:has(input:checked) {
    border-color: var(--cortex-cyan);
    box-shadow: inset 0 0 0 1px rgba(175, 0, 0, 0.35), 0 0 10px rgba(175, 0, 0, 0.15);
}

.cortex-payment-option input[type="radio"] {
    accent-color: var(--cortex-cyan);
    width: 16px;
    height: 16px;
}

.cortex-payment-option-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.cortex-payment-option-label {
    font-size: 0.95rem;
}

.cortex-payment-option-tag {
    font-size: 0.7rem;
    color: var(--cortex-text-muted);
    letter-spacing: 0.03em;
    margin-left: 0.35rem;
    padding: 2px 6px;
    border: 1px solid var(--cortex-border);
    border-radius: 999px;
}

.cortex-payment-option-price {
    font-variant-numeric: tabular-nums;
    color: var(--cortex-text-muted);
}

.cortex-payment-stripe-slot {
    border: 1px dashed var(--cortex-border);
    border-radius: 10px;
    padding: 1rem;
    color: var(--cortex-text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.cortex-payment-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.cortex-payment-submit {
    font-weight: 600;
}

.cortex-payment-smallprint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--cortex-text-muted);
    line-height: 1.4;
}

/* Founder first-annual disclosure: struck standard price next to the billed first-year
   amount, and the renewal note under the summary (terms §6(4) — the standard-price
   renewal must be visible at the point of sale). */
.cortex-payment-price-standard {
    margin-right: 0.4rem;
    color: var(--cortex-text-muted);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.cortex-payment-founder-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--cortex-text-muted);
    line-height: 1.4;
}

/* "Why are you here" banner shown when a Free user is gated from a PRO solve.
   Mirrors .cortex-settings-info; centered to sit above the tier grid. */
.cortex-payment-info {
    margin: 0 auto 1rem;
    max-width: 640px;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: rgba(175, 0, 0, 0.08);
    border: 1px solid var(--cortex-border);
    color: var(--cortex-cyan);
    font-size: 0.9rem;
    text-align: center;
}

.cortex-payment-info a {
    color: var(--cortex-cyan);
    text-decoration: underline;
}

/* ===================================
   Payment Plans — FREE / PRO / FOUNDER tier grid
   =================================== */
.cortex-tier-wrapper {
    max-width: 1040px;
}

.cortex-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
    align-items: stretch;
}

.cortex-tier-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.5rem 1.35rem 1.35rem;
    background: #14161b;
    border: 1px solid var(--cortex-border);
    border-radius: 14px;
}

.cortex-tier-card--featured {
    border-color: var(--cortex-cyan);
    box-shadow: 0 0 24px rgba(175, 0, 0, 0.18);
}

/* Tier preselected by a landing-page pricing CTA (?plan= carried through the signup
   funnel onto /Payment/PostflopPlans): a solid accent ring so the earlier choice is
   obvious. Declared after --featured so it wins when PRO is both. */
.cortex-tier-card--preselected {
    border-color: var(--cortex-cyan);
    box-shadow: 0 0 0 2px var(--cortex-cyan), 0 0 32px rgba(175, 0, 0, 0.3);
}

/* FOUNDER tier — shiny gold frame with a slightly matte glow that animates on
   hover. Attribute-scoped so it covers the card on both the Plans page and the
   post-registration ThankYou page (both render data-tier="FOUNDER") without any
   extra markup, and without touching PRO's red --featured highlight. The tier
   name and bullet markers go gold too, so no red accents bleed inside the frame. */
.cortex-tier-card[data-tier="FOUNDER"] {
    border-color: var(--cortex-gold);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.12);
    transition: box-shadow 240ms ease, border-color 240ms ease;
}

.cortex-tier-card[data-tier="FOUNDER"] .cortex-tier-name,
.cortex-tier-card[data-tier="FOUNDER"] .cortex-tier-bullets li::before {
    color: var(--cortex-gold);
}

.cortex-tier-card[data-tier="FOUNDER"]:hover {
    border-color: var(--cortex-gold-bright);
    box-shadow: 0 0 26px rgba(212, 175, 55, 0.35);
}

/* Reduced-motion users keep the static brighter glow above; everyone else gets
   the gentle breathing pulse on hover. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes cortex-gold-pulse {
        0%, 100% { box-shadow: 0 0 18px rgba(212, 175, 55, 0.28); }
        50%      { box-shadow: 0 0 30px rgba(212, 175, 55, 0.45); }
    }

    .cortex-tier-card[data-tier="FOUNDER"]:hover {
        animation: cortex-gold-pulse 2.2s ease-in-out infinite;
    }
}

/* Founder reward badge on the postflop tiers (PostflopPlans page). Gold-tinted
   pill shown only when the signed-in user owns the Founder feature. Presentation
   only — the real discounted price is wired with Stripe later. */
.cortex-founder-badge {
    margin: 0.1rem 0 0.4rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.08);
    color: var(--cortex-gold-bright);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

/* Renewal-price disclosure under the founder-discounted annual CTA: the discount is
   first-year-only, so the auto-renewal price must be stated where the purchase starts. */
.cortex-founder-renewal-note {
    margin: 0.15rem 0 0;
    color: var(--cortex-text-dim, rgba(255, 255, 255, 0.55));
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: center;
}

.cortex-tier-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cortex-tier-name {
    font-family: var(--cortex-font-brand);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.18em;
    color: var(--cortex-cyan);
    margin: 0;
}

.cortex-tier-tagline {
    margin: 0;
    color: var(--cortex-text);
    font-size: 0.9rem;
}

.cortex-tier-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cortex-tier-bullets li {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #fff;
    padding-left: 1.1rem;
    position: relative;
}

.cortex-tier-bullets li::before {
    content: "\25B8";
    color: var(--cortex-cyan);
    position: absolute;
    left: 0;
    top: 0;
}

.cortex-tier-cta-stack {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cortex-tier-cta-stack .cortex-payment-plan-form {
    margin: 0;
}

.cortex-tier-cta {
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-family: var(--cortex-font-brand);
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    color: var(--cortex-cyan);
    border: 1px solid var(--cortex-cyan);
    background: transparent;
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.cortex-tier-cta:hover,
.cortex-tier-cta:focus {
    background: var(--cortex-cyan);
    color: #fff;
    box-shadow: 0 0 18px rgba(175, 0, 0, 0.35);
}

/* FOUNDER CTA matches the card's gold frame (Plans page only — the ThankYou
   FOUNDER card has no .cortex-tier-cta). Hover fills gold with dark text for
   legible contrast instead of the white-on-fill used by the red CTAs. */
.cortex-tier-card[data-tier="FOUNDER"] .cortex-tier-cta {
    color: var(--cortex-gold);
    border-color: var(--cortex-gold);
}

.cortex-tier-card[data-tier="FOUNDER"] .cortex-tier-cta:hover,
.cortex-tier-card[data-tier="FOUNDER"] .cortex-tier-cta:focus {
    background: var(--cortex-gold);
    color: #1a1a1a;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

.cortex-tier-status {
    font-size: 0.8rem;
    color: var(--cortex-text-muted);
    font-style: italic;
    text-align: center;
    padding: 0.65rem 0;
    border: 1px dashed var(--cortex-border);
    border-radius: 10px;
}

/* Hint that a phrase carries a native title tooltip (e.g. the "Standard" caveat).
   Shared by the Plans page and the post-registration Thank You page. */
.cortex-tier-tooltip {
    border-bottom: 1px dotted var(--cortex-text-muted);
    cursor: help;
}

/* ─── Postflop payment page layout ──────────────────────────────────────────
   Bespoke 3-column grid: FREE + PREFLOP stacked small on the left, POSTFLOP CORE
   (middle) and POSTFLOP PRO (right) as the focus. Scoped to this page's grid modifier
   so the legacy /Payment/Plans layout is untouched. Frameless for now — the only frame
   is the gold one on a discounted founder annual CTA (below). */
.cortex-tier-grid--postflop {
    grid-template-columns: 0.8fr 1.15fr 1.15fr;
    grid-template-areas:
        "free    core pro"
        "preflop core pro";
    /* Stretch so CORE/PRO fill their full two-row span — i.e. match the combined height of
       the stacked FREE + PREFLOP column — instead of shrinking to content. Their cta-stack
       (margin-top:auto) then drops to the bottom for a consistent aligned footer. */
    align-items: stretch;
}

.cortex-tier-grid--postflop [data-tier="FREE"]           { grid-area: free; }
.cortex-tier-grid--postflop [data-tier="PREFLOP"]        { grid-area: preflop; }
.cortex-tier-grid--postflop [data-tier="POSTFLOP_CORE"] { grid-area: core; }
.cortex-tier-grid--postflop [data-tier="POSTFLOP_PRO"]   { grid-area: pro; }

/* The supporting left column is frameless; the two postflop tiers keep the red frame so the
   eye lands on them. */
.cortex-tier-grid--postflop [data-tier="FREE"],
.cortex-tier-grid--postflop [data-tier="PREFLOP"] {
    border-color: transparent;
    box-shadow: none;
}

.cortex-tier-grid--postflop [data-tier="POSTFLOP_CORE"],
.cortex-tier-grid--postflop [data-tier="POSTFLOP_PRO"] {
    border-color: var(--cortex-cyan);
    box-shadow: 0 0 24px rgba(175, 0, 0, 0.18);
}

/* The left column is the supporting act: smaller, tighter, slightly dimmed so the eye
   lands on the two postflop tiers. */
.cortex-tier-grid--postflop [data-tier="FREE"],
.cortex-tier-grid--postflop [data-tier="PREFLOP"] {
    padding: 1.1rem 1.1rem 1.15rem;
    filter: brightness(0.82); /* dim without opacity so the panel stays opaque */
}

.cortex-tier-grid--postflop [data-tier="FREE"] .cortex-tier-name,
.cortex-tier-grid--postflop [data-tier="PREFLOP"] .cortex-tier-name {
    font-size: 1rem;
}

.cortex-tier-grid--postflop [data-tier="FREE"] .cortex-tier-bullets,
.cortex-tier-grid--postflop [data-tier="PREFLOP"] .cortex-tier-bullets {
    font-size: 0.85rem;
}

/* Stack to a single column on narrow viewports — postflop tiers first (they're the focus). */
@media (max-width: 900px) {
    .cortex-tier-grid--postflop {
        grid-template-columns: 1fr;
        grid-template-areas:
            "core"
            "pro"
            "free"
            "preflop";
    }
}

/* Founder gold frame on a discounted annual CTA — the same treatment as the FOUNDER card
   CTA on the preflop Plans page, applied to the single discounted price button. Appended
   after .cortex-tier-cta so it wins on equal specificity. */
.cortex-tier-cta--founder {
    color: var(--cortex-gold);
    border-color: var(--cortex-gold);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.18);
}

.cortex-tier-cta--founder:hover,
.cortex-tier-cta--founder:focus {
    background: var(--cortex-gold);
    color: #1a1a1a;
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

/* ─── Postflop payment page v2 (2026-07-07): cycle toggle, per-cycle price rows,
   tooltips, PRO accent + ribbon, comparison accordion, fine print ─────────────── */

/* Billing-cycle toggle above the grid. The rebate chips ride on the labels so the
   price rows stay clean. */
.cortex-cycle-toggle {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin: 1.25rem auto 0;
    padding: 0.25rem;
    width: fit-content;
    border: 1px solid var(--cortex-border);
    border-radius: 12px;
    background: rgba(20, 22, 27, 0.5);
}

.cortex-cycle-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--cortex-text-muted);
    font-family: var(--cortex-font-brand);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.cortex-cycle-toggle-btn.is-active {
    background: var(--cortex-cyan);
    color: #fff;
}

.cortex-cycle-chip {
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(175, 0, 0, 0.75);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    white-space: nowrap;
}

.cortex-cycle-toggle-btn.is-active .cortex-cycle-chip {
    background: rgba(0, 0, 0, 0.35);
}

.cortex-cycle-chip--gold {
    background: var(--cortex-gold);
    color: #1a1a1a;
}

.cortex-cycle-toggle-btn.is-active .cortex-cycle-chip--gold {
    background: var(--cortex-gold);
    color: #1a1a1a;
}

/* Cycle visibility: the grid carries data-cycle (server-rendered "annual" default,
   flipped by billing-cycle-toggle.js) and CSS hides the other cycle's blocks — the
   page stays functional without JS. */
.cortex-tier-grid--postflop[data-cycle="annual"] [data-cycle-block="monthly"],
.cortex-tier-grid--postflop[data-cycle="monthly"] [data-cycle-block="annual"] {
    display: none;
}

.cortex-tier-cycle {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Price row: optional crossed-out base + big effective price + unit. */
.cortex-tier-price {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}

/* Readable strike-through: normal muted text with a thin diagonal red line drawn by
   ::after — standard line-through made the price illegible at this size. */
.cortex-tier-price-base {
    position: relative;
    color: var(--cortex-text-muted);
    font-size: 0.95rem;
}

.cortex-tier-price-base::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    top: 50%;
    height: 1.5px;
    background: var(--cortex-cyan);
    transform: rotate(-8deg);
    opacity: 0.9;
}

.cortex-tier-price-now {
    color: var(--cortex-text);
    font-family: var(--cortex-font-brand);
    font-weight: 700;
    font-size: 1.55rem;
    line-height: 1;
}

.cortex-tier-price-unit {
    color: var(--cortex-text-muted);
    font-size: 0.78rem;
    margin-left: 0.25rem;
}

/* "= $41.67 / month" under annual, "cancel anytime" under monthly. */
.cortex-tier-price-equiv {
    margin: 0;
    color: var(--cortex-text-muted);
    font-size: 0.75rem;
    text-align: center;
}

/* Info tooltip on a limit bullet: a real <button>, so :focus shows the bubble on
   mobile/keyboard without JS. */
.cortex-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 0.35rem;
    padding: 0;
    border: 1px solid var(--cortex-text-muted);
    border-radius: 50%;
    background: none;
    color: var(--cortex-text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    cursor: help;
    position: relative;
    vertical-align: 1px;
}

.cortex-tip:hover,
.cortex-tip:focus {
    border-color: var(--cortex-cyan);
    color: var(--cortex-cyan);
    outline: none;
}

.cortex-tip-bubble {
    visibility: hidden;
    opacity: 0;
    transition: opacity 120ms ease;
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--cortex-border);
    border-radius: 8px;
    /* Deliberately opaque: the bubble overlays neighbouring bullets, and the shared
       --cortex-surface token is 65% transparent, which let the text underneath bleed
       through and made the tooltip unreadable (2026-08-24). */
    background: #14161b;
    color: var(--cortex-text);
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    z-index: 20;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.cortex-tip:hover .cortex-tip-bubble,
.cortex-tip:focus .cortex-tip-bubble {
    visibility: visible;
    opacity: 1;
}

/* PRO is the flagship: brighter 2px frame, stronger glow, subtle red wash and the
   ribbon anchor. Scoped to this page's grid so the shared .cortex-tier-card--featured
   (ThankYou pages, legacy Plans) is untouched. */
.cortex-tier-grid--postflop [data-tier="POSTFLOP_PRO"] {
    position: relative;
    border-width: 2px;
    box-shadow: 0 0 36px rgba(175, 0, 0, 0.3);
    background:
        linear-gradient(180deg, rgba(175, 0, 0, 0.07), rgba(175, 0, 0, 0) 45%),
        #14161b;
}

.cortex-tier-ribbon {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    border-radius: 6px;
    background: var(--cortex-cyan);
    color: #fff;
    font-family: var(--cortex-font-brand);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* One-line unit definition under the cards — muted, no warning box. */
/* 14-day satisfaction guarantee. Reassurance copy, so it sits above the fine print and
   reads at body size rather than fine-print size - but it is a contractual promise
   (terms § 11), not a marketing claim, so it stays visually calm. Only rendered when the
   V2 terms are published (PostflopPricingPanelViewModel.PostflopTermsPublished). */
.cortex-tier-guarantee {
    margin: -0.5rem auto 1rem;
    max-width: 46rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius, 12px);
    color: var(--cortex-text);
    font-size: 0.84rem;
    text-align: center;
    line-height: 1.55;
}

.cortex-tier-guarantee a {
    color: var(--cortex-cyan);
}

/* Per-CTA guarantee line inside a cycle block, directly under the purchase button.
   Same contractual-promise-not-badge restraint as .cortex-tier-guarantee: muted,
   fine-print sized, no border. Never rendered under Upgrade/status CTAs (§ 11 covers
   the first paid subscription only) — see RenderCtaGuarantee in the panel view. */
.cortex-tier-cta-guarantee {
    margin: 0.4rem 0 0;
    color: var(--cortex-text-muted);
    font-size: 0.72rem;
    text-align: center;
    line-height: 1.4;
}

.cortex-tier-fineprint {
    margin: -0.75rem 0 1.5rem;
    color: var(--cortex-text-muted);
    font-size: 0.76rem;
    text-align: center;
    line-height: 1.5;
}

/* "Compare all plans in detail" accordion. */
.cortex-plan-compare {
    margin: 0 0 2rem;
    border: 1px solid var(--cortex-border);
    border-radius: var(--cortex-radius, 12px);
    background: #14161b;
}

.cortex-plan-compare summary {
    padding: 0.9rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--cortex-text);
    list-style: none;
}

.cortex-plan-compare summary::-webkit-details-marker {
    display: none;
}

.cortex-plan-compare summary::before {
    content: "\25B8";
    color: var(--cortex-cyan);
    display: inline-block;
    margin-right: 0.6rem;
    transition: transform 150ms ease;
}

.cortex-plan-compare[open] summary::before {
    transform: rotate(90deg);
}

.cortex-plan-compare-inner {
    padding: 0.25rem 1.25rem 1.25rem;
    overflow-x: auto;
}

.cortex-plan-compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.cortex-plan-compare-table th,
.cortex-plan-compare-table td {
    padding: 0.55rem 0.85rem;
    text-align: center;
    border-bottom: 1px solid var(--cortex-border);
    color: var(--cortex-text-muted);
}

.cortex-plan-compare-table th {
    font-family: var(--cortex-font-brand);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cortex-cyan);
}

.cortex-plan-compare-table th:first-child,
.cortex-plan-compare-table td:first-child {
    text-align: left;
    color: var(--cortex-text);
}

.cortex-plan-compare-sub {
    display: block;
    font-size: 0.7rem;
    color: var(--cortex-text-muted);
}

.cortex-plan-compare-notes {
    margin: 1rem 0 0;
    color: var(--cortex-text-muted);
    font-size: 0.78rem;
    line-height: 1.65;
}

.cortex-plan-compare-notes b {
    color: var(--cortex-text);
    font-weight: 600;
}

/* ─── Pricing stages v3 (2026-08-01): stage callout, per-price stage labels,
   price-lock + planned-next-price lines ──────────────────────────────────── */

/* Stage callout between the header and the cycle toggle. Deliberately plain: a
   statement of what the stage is — no countdown, no urgency animation, no
   percentage claims. */
.cortex-stage-callout {
    margin: 1.15rem auto 0;
    padding: 0.9rem 1.1rem;
    max-width: 640px;
    border: 1px solid var(--cortex-cyan);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(175, 0, 0, 0.10), rgba(175, 0, 0, 0.02));
    text-align: center;
}

.cortex-stage-callout-title {
    margin: 0 0 0.3rem;
    font-family: var(--cortex-font-brand);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cortex-cyan);
}

.cortex-stage-callout-body {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--cortex-text);
}

.cortex-stage-callout-body b {
    color: #fff;
    font-weight: 600;
}

/* Per-card stage label sitting directly above the price. During the Founding 50
   stage the label is the loudest thing in the price block, so it gets the bright
   red and a soft glow (.is-limited); later stages calm down to the brand cyan. */
.cortex-stage-label {
    margin: 0;
    text-align: center;
    font-family: var(--cortex-font-brand);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--cortex-cyan);
}

.cortex-stage-label.is-limited {
    font-size: 0.84rem;
    letter-spacing: 0.13em;
    color: #ff3b3b;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(255, 59, 59, 0.45);
}

/* Plain-language second line. The stage name is a label; this is the explanation,
   so it drops the brand font, the caps and the glow. */
.cortex-stage-label-note {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--cortex-font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    color: var(--cortex-text-muted);
}

.cortex-stage-label.is-limited .cortex-stage-label-note {
    color: #ff6b6b;
}

/* Price-lock statement + next planned price. Muted, one line each, no countdown
   and no urgency styling. */
.cortex-price-lock {
    margin: 0.1rem 0 0;
    text-align: center;
    font-size: 0.73rem;
    line-height: 1.45;
    color: var(--cortex-text-muted);
}

.cortex-price-lock b {
    color: var(--cortex-text);
    font-weight: 600;
}

.cortex-next-price {
    margin: 0.15rem 0 0;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.4;
    color: rgba(133, 153, 169, 0.75);
}

/* Pricing FAQ. Reuses the compare accordion's shell so the two sections read as a
   pair; each question is its own nested <details>. */
.cortex-faq {
    margin: 0 0 2rem;
}

.cortex-faq-list {
    padding: 0.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
}

.cortex-faq-item {
    border-bottom: 1px solid var(--cortex-border);
}

.cortex-faq-item:last-child {
    border-bottom: none;
}

.cortex-faq-item summary {
    padding: 0.7rem 0 0.7rem 1.4rem;
    position: relative;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cortex-text);
    list-style: none;
}

.cortex-faq-item summary::-webkit-details-marker {
    display: none;
}

.cortex-faq-item summary::before {
    content: "\25B8";
    color: var(--cortex-cyan);
    position: absolute;
    left: 0;
    top: 0.7rem;
    transition: transform 150ms ease;
}

.cortex-faq-item[open] summary::before {
    transform: rotate(90deg);
}

.cortex-faq-answer {
    margin: 0 0 0.85rem;
    padding-left: 1.4rem;
    color: var(--cortex-text-muted);
    font-size: 0.82rem;
    line-height: 1.65;
}

.cortex-faq-answer b {
    color: var(--cortex-text);
    font-weight: 600;
}

.cortex-faq-answer + .cortex-faq-answer {
    margin-top: -0.5rem;
}

/* Roadmap strip inside the FAQ answer. Plain, no dates. */
.cortex-roadmap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0.55rem 0 0.15rem;
    padding-left: 1.4rem;
}

.cortex-roadmap-step {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--cortex-border);
    border-radius: 8px;
    background: rgba(20, 22, 27, 0.6);
    font-size: 0.75rem;
    color: var(--cortex-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cortex-roadmap-step.is-current {
    border-color: var(--cortex-cyan);
    color: var(--cortex-text);
}

.cortex-roadmap-step b {
    display: block;
    font-family: var(--cortex-font-brand);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cortex-cyan);
    font-weight: 700;
}

.cortex-roadmap-arrow {
    color: var(--cortex-border);
    font-size: 0.8rem;
}

/* ---- Personal rebate offer -------------------------------------------------------------
   The per-customer discount block above the tier grid. Only ever rendered for a signed-in
   user carrying an unconsumed offer, so these rules are dead weight for almost every visit —
   kept here rather than in a file of their own because the block only exists on this page,
   which already loads payment.css. */

.cortex-rebate-offer {
    max-width: 640px;
    margin: 0 auto 1.75rem;
    padding: 1.1rem 1.3rem 1.25rem;
    border: 1px solid var(--cortex-cyan);
    border-radius: 12px;
    background: rgba(20, 22, 27, 0.75);
}

.cortex-rebate-offer-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.cortex-rebate-offer-badge {
    flex: none;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    background: var(--cortex-cyan);
    color: #10131a;
    font-family: var(--cortex-font-brand);
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cortex-rebate-offer-title {
    margin: 0;
    font-family: var(--cortex-font-brand);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cortex-cyan);
}

.cortex-rebate-offer-plan {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    color: var(--cortex-text);
}

.cortex-rebate-offer-pricing {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.cortex-rebate-offer-was {
    text-decoration: line-through;
    color: var(--cortex-text-muted);
    font-variant-numeric: tabular-nums;
}

.cortex-rebate-offer-now {
    font-family: var(--cortex-font-brand);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--cortex-text);
    font-variant-numeric: tabular-nums;
}

.cortex-rebate-offer-cadence {
    font-size: 0.8rem;
    color: var(--cortex-text-muted);
}

.cortex-rebate-offer-note {
    margin: 0.5rem 0 0.9rem;
    font-size: 0.8rem;
    color: var(--cortex-text-muted);
}