/* ============================================================
   subscribe.css - plans

   A pricing page for a systematic trading service, so it is built to be
   compared rather than admired: three cards on one baseline, the same fields in
   the same order in each, and a running total pinned in view while the reader is
   still deciding. Colour is reserved for state - which plan is selected - not
   for decoration, because on this page the selected state IS the information.

   Two inherited traps from global.css, handled deliberately:
     - every bare <section> gets padding: 6rem 2rem. The reset below is
       `.sub-body section` = (0,1,1), which beats a bare `.plan` (0,1,0), so card
       padding is written as `.sub-body .plan` = (0,2,0) to outrank it.
     - .btn-primary lifts 2px on hover, which fights a bar fixed to the viewport
       edge, so the buttons here are their own class.
   ============================================================ */

.sub { background: var(--bg-base); }

/* ─── Hero ────────────────────────────────────────────────── */
.sub-hero {
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(ellipse 70% 60% at 20% 0%, rgba(59,130,246,.09), transparent 70%),
        var(--bg-base);
}
.sub-hero-in { max-width: 1180px; margin: 0 auto; padding: 4.5rem var(--space-inner) 3.5rem; }

.sub-kicker {
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent-blue); margin: 0 0 1rem;
}
.sub-hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -.035em;
    margin: 0; color: var(--text-primary); text-wrap: balance;
}
/* The only italic on the page, on the one word the offer turns on. */
.sub-hero h1 em {
    font-style: italic; color: var(--accent-blue); font-weight: 700;
}
.sub-lede {
    font-size: clamp(1rem, 1.7vw, 1.13rem); line-height: 1.65; color: var(--text-muted);
    max-width: 60ch; margin: 1.35rem 0 0;
}
.sub-lede strong { color: var(--text-primary); font-weight: 600; }

.sub-proof {
    list-style: none; margin: 2rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .6rem 2rem;
}
.sub-proof li {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .84rem; color: var(--text-muted);
}
.sub-proof i { color: var(--accent-blue); font-size: .82rem; }

/* ─── Body ────────────────────────────────────────────────── */
.sub-body {
    max-width: 1180px; margin: 0 auto;
    /* Bottom padding clears the fixed checkout bar so the last section is never
       trapped underneath it. */
    padding: 3.5rem var(--space-inner) 9rem;
    display: grid; gap: clamp(3rem, 6vw, 4.5rem);
}
.sub-body section { max-width: none; margin: 0; padding: 0; }
.sub-body > * { min-width: 0; }

.sub-body h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -.02em;
    margin: 0 0 1.75rem; color: var(--text-primary); text-wrap: balance;
}

.sub-alert {
    display: flex; align-items: center; gap: .6rem;
    background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.22);
    border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 0;
    font-size: .86rem; color: var(--text-muted);
}
.sub-alert i { color: var(--accent-blue); }

.sub-placeholder { text-align: center; color: var(--text-muted); padding: 3rem 0; font-size: .92rem; }
.sub-placeholder.err { color: #fca5a5; }

/* ─── Plans ───────────────────────────────────────────────── */
.plans {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: 1.25rem; align-items: stretch;
}

.sub-body .plan {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.9rem 1.75rem 1.75rem;
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease);
}
.sub-body .plan:hover { border-color: var(--border-hover); background: var(--bg-elevated); }
.sub-body .plan:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }

/* Selection is the page's only real state, so it gets the accent and nothing
   else does. No lift or shadow - a card that moves under the cursor makes a
   three-way comparison harder, not easier. */
.sub-body .plan.on {
    border-color: var(--accent-blue);
    background: linear-gradient(0deg, rgba(59,130,246,.06), rgba(59,130,246,.06)), var(--bg-surface);
}

.plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.plan-top h3 { font-size: 1.1rem; margin: 0; color: var(--text-primary); letter-spacing: -.01em; }
.plan-tag {
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    margin: .35rem 0 0; color: var(--text-subtle);
}
.plan.turtle .plan-tag { color: var(--accent-purple); }
.plan.ma     .plan-tag { color: var(--accent-blue); }
.plan.bundle .plan-tag { color: var(--accent-green); }

/* An empty ring until chosen: the affordance says "selectable" before it says
   "selected", which a bare tick on a hover state does not. */
.plan-check {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid var(--border); display: grid; place-items: center;
    color: transparent; font-size: .62rem;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.plan.on .plan-check { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }

.plan-price {
    font-size: 2.5rem; font-weight: 700; letter-spacing: -.04em; line-height: 1;
    color: var(--text-primary); margin: 1.5rem 0 0; font-variant-numeric: tabular-nums;
}
.plan-price .cur { font-size: 1.25rem; font-weight: 600; vertical-align: .5rem; margin-right: .1rem; }
.plan-price .per { font-size: .92rem; font-weight: 500; color: var(--text-subtle); letter-spacing: 0; }

.plan-save {
    font-size: .8rem; font-weight: 600; color: #6ee7b7; margin: .55rem 0 0;
}

.plan-pitch {
    font-size: .88rem; line-height: 1.65; color: var(--text-muted);
    margin: 1.15rem 0 0;
}

.plan-traits { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .55rem; }
.plan-traits li {
    display: flex; align-items: flex-start; gap: .55rem;
    font-size: .83rem; line-height: 1.5; color: var(--text-muted);
}
.plan-traits i { color: var(--accent-blue); font-size: .72rem; margin-top: .28rem; flex: none; }
.plan.bundle .plan-traits i { color: var(--accent-green); }

/* Pushed to the card's foot so this line sits on the same baseline across all
   three, whatever length the copy above it runs to. */
.plan-best {
    margin: auto 0 0; padding-top: 1.35rem;
    font-size: .8rem; font-style: italic; color: var(--text-subtle);
}

.plan-flag {
    position: absolute; top: -1px; right: 1.5rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: var(--accent-green); color: #04231a;
    padding: .28rem .6rem; border-radius: 0 0 var(--radius-xs) var(--radius-xs);
}
.plan-owned {
    margin-top: .9rem; align-self: flex-start;
    font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: #6ee7b7; background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.22); padding: .2rem .55rem; border-radius: var(--radius-pill);
}

/* ─── Flow ────────────────────────────────────────────────── */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: f; }
.flow li {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.15rem;
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 1.4rem 1.6rem;
}
.flow-n {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: rgba(59,130,246,.14); color: #93c5fd;
    font-size: .82rem; font-weight: 700;
}
.flow h3 { font-size: .98rem; margin: .15rem 0 .4rem; color: var(--text-primary); }
.flow p { margin: 0; font-size: .87rem; line-height: 1.65; color: var(--text-muted); max-width: 74ch; }

@media (min-width: 900px) {
    .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flow li { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
}

/* ─── Candid ──────────────────────────────────────────────── */
.candid-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem;
}
.candid-col {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 1.5rem 1.6rem;
}
.candid-col.is  { border-top: 2px solid var(--accent-green); }
.candid-col.not { border-top: 2px solid var(--accent-amber); }
.candid-h {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.candid-col.is  .candid-h { color: #6ee7b7; }
.candid-col.not .candid-h { color: #fcd34d; }
.candid-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.candid-col li {
    font-size: .86rem; line-height: 1.65; color: var(--text-muted);
    padding-left: .9rem; border-left: 2px solid var(--border);
}
.candid-col strong, .candid-col em {
    color: var(--text-primary); font-weight: 600; font-style: normal;
}
.candid-col a, .candid-foot a { color: var(--accent-blue); text-decoration: none; }
.candid-col a:hover, .candid-foot a:hover { text-decoration: underline; }
.candid-foot {
    margin: 1.25rem 0 0; font-size: .84rem; line-height: 1.65; color: var(--text-subtle);
    max-width: 82ch;
}

/* ─── Questions ───────────────────────────────────────────────
   Two answers are given in full and nine are grouped behind disclosures. The
   split is deliberate: cost and risk decide whether someone subscribes at all,
   so hiding them behind a click asks the reader to guess whether it is worth
   opening. Everything else is a detail you look up once. */
.qa-lead {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem; margin-bottom: 2rem;
}
.qa-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 1.4rem 1.5rem;
}
.qa-card:first-child { border-top: 2px solid var(--accent-blue); }
.qa-card:last-child  { border-top: 2px solid var(--accent-amber); }
.qa-k {
    display: flex; align-items: center; gap: .55rem; margin: 0 0 .8rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-subtle);
}
.qa-card:first-child .qa-k i { color: var(--accent-blue); }
.qa-card:last-child  .qa-k i { color: var(--accent-amber); }
.qa-v {
    margin: 0 0 .7rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em;
    color: var(--text-primary); line-height: 1.15;
}
.qa-v span { font-size: .85rem; font-weight: 500; color: var(--text-subtle); letter-spacing: 0; }
.qa-d { margin: 0; font-size: .85rem; line-height: 1.7; color: var(--text-muted); }
.qa-d a { color: var(--accent-blue); text-decoration: none; }
.qa-d a:hover { text-decoration: underline; }

.qa-groups {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.75rem;
    align-items: start;
}
.qa-group { display: grid; gap: .5rem; align-content: start; }
.qa-title {
    font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: var(--accent-blue); margin: 0 0 .3rem;
}

.faq { display: grid; gap: .6rem; }
.qa-group details, .faq details {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 1.05rem 1.4rem;
    transition: border-color var(--ease);
}
.qa-group details[open], .faq details[open] { border-color: var(--border-hover); }
.qa-group summary, .faq summary {
    cursor: pointer; list-style: none; font-size: .92rem; font-weight: 600;
    color: var(--text-primary); display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
}
.qa-group summary::-webkit-details-marker,
.faq summary::-webkit-details-marker { display: none; }
.qa-group summary::after, .faq summary::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: .68rem; color: var(--text-subtle); transition: transform var(--ease);
}
.qa-group details[open] summary::after,
.faq details[open] summary::after { transform: rotate(180deg); }
.qa-group details p, .faq p {
    margin: .85rem 0 0; font-size: .86rem; line-height: 1.7; color: var(--text-muted);
    max-width: 78ch;
}
.qa-group details p strong { color: var(--text-primary); font-weight: 650; }
.qa-group summary { font-size: .88rem; }
.qa-group details { padding: .9rem 1.15rem; }

/* ─── Checkout bar ────────────────────────────────────────── */
.checkout {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: rgba(13, 21, 38, .92);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 32px rgba(0,0,0,.45);
}
.checkout-in {
    max-width: 1180px; margin: 0 auto;
    padding: 1rem var(--space-inner);
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.checkout-what { flex: 1 1 220px; min-width: 0; display: grid; gap: .15rem; }
.checkout-label {
    font-size: .95rem; font-weight: 650; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.checkout-sub { font-size: .78rem; color: var(--text-subtle); }
.checkout-price { display: flex; align-items: baseline; gap: .45rem; flex: none; }
.checkout-total {
    font-size: 1.65rem; font-weight: 700; letter-spacing: -.03em;
    color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.checkout-per { font-size: .78rem; color: var(--text-subtle); }
.checkout-err {
    max-width: 1180px; margin: 0 auto; padding: 0 var(--space-inner) .9rem;
    font-size: .82rem; color: #fca5a5;
}

/* Own class: global.css lifts .btn-primary 2px on hover, which reads as a glitch
   on a control fixed to the viewport edge. */
.sub-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .8rem 1.6rem; font: inherit; font-size: .9rem; font-weight: 650;
    cursor: pointer; text-decoration: none; white-space: nowrap; flex: none;
    background: var(--bg-elevated); color: var(--text-primary);
    transition: background var(--ease), border-color var(--ease), opacity var(--ease);
}
.sub-btn.primary { background: var(--accent-blue-dk); border-color: var(--accent-blue-dk); color: #fff; }
.sub-btn.primary:hover:not(:disabled) { background: var(--accent-blue); border-color: var(--accent-blue); }
.sub-btn:disabled { opacity: .45; cursor: not-allowed; }
.sub-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .sub-hero-in { padding: 3rem 1.15rem 2.5rem; }
    .sub-body    { padding: 2.5rem 1.15rem 10rem; }
    .sub-body .plan { padding: 1.5rem 1.3rem 1.4rem; }
    .flow li { padding: 1.15rem 1.2rem; }
    .candid-col { padding: 1.25rem 1.2rem; }
    .checkout-in { padding: .85rem 1.15rem; gap: .75rem 1rem; }
    .checkout-what { flex-basis: 100%; }
    .sub-btn { flex: 1; }
    .checkout-price { margin-left: auto; }
}

/* Inline action inside the page alert - used to call off a scheduled change
   from the same sentence that reports it. */
.sub-alert-btn {
    margin-left: .5rem; padding: .3rem .7rem;
    font: inherit; font-size: .8rem; font-weight: 600;
    color: var(--accent-blue); background: transparent;
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    cursor: pointer; transition: border-color var(--ease), color var(--ease);
}
.sub-alert-btn:hover:not(:disabled) { border-color: var(--accent-blue); }
.sub-alert-btn:disabled { opacity: .6; cursor: default; }