/* ==========================================================================
   TrackE5 — Pricing
   Requires assets/site.css (which also carries the shared .compare table)
   ========================================================================== */

/* ==========================================================================
   HERO
   Short and centred on purpose: the plans are the content, and a tall hero
   would push them below the fold on a laptop.
   ========================================================================== */

.price-hero {
    padding-block: clamp(140px, 18vh, 210px) clamp(40px, 5vw, 70px);
    background:
        radial-gradient(52% 46% at 78% 12%, rgb(var(--accent-rgb) / 0.20), transparent 68%),
        radial-gradient(44% 40% at 10% 60%, rgb(var(--teal-rgb) / 0.09), transparent 72%),
        var(--cream);
    text-align: center;
}
.price-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* 22ch keeps "Two plans. No hidden costs." to 2 lines at every size. */
.price-hero .h-display { font-size: clamp(2.6rem, 5.4vw, 4.4rem); max-width: 22ch; }
.price-hero .lede { max-width: 54ch; }

/* ==========================================================================
   CURRENCY TOGGLE
   Two real <button>s in a group, not a styled checkbox: each state is directly
   selectable, so nobody has to work out which way the switch points.
   ========================================================================== */

.cur-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--white);
}
.cur-toggle button {
    padding: 8px 20px;
    border: none;
    border-radius: var(--radius-full);
    background: none;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.cur-toggle button:hover:not(.is-on) { color: var(--olive); }
.cur-toggle button.is-on { background: var(--olive); color: #fff; }

/* ==========================================================================
   PLANS
   Two equal columns. Two cards in two tracks is inherently gapless — there is
   no dead cell to engineer around.
   ========================================================================== */

.plans-section { padding-top: clamp(30px, 4vw, 50px); }

.plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: stretch;
}

.plan {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(30px, 3.2vw, 48px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--white);
}

/* The paid card carries the emphasis, but through contrast rather than a
   "Most popular" ribbon — there are only two plans, so a badge would be
   telling the reader something they can already see. */
.plan--pro {
    background: linear-gradient(165deg, #2f3d2e, var(--olive-deep));
    border-color: transparent;
    color: rgba(255,255,255,0.72);
}

.plan-head { display: flex; flex-direction: column; gap: 10px; }

.plan-name {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--olive-muted);
}
.plan--pro .plan-name { color: var(--lime); }

.plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--olive);
}
.plan--pro .plan-price { color: #fff; }

.plan-amount {
    font-size: clamp(2.6rem, 4.4vw, 3.6rem);
    font-weight: 550;
    letter-spacing: -0.045em;
    line-height: 1;
}
.plan-from {
    font-size: 0.95rem;
    font-weight: 450;
    letter-spacing: 0;
    color: var(--text-muted);
}
.plan--pro .plan-from { color: rgba(255,255,255,0.6); }
.plan-period { font-size: 1rem; color: var(--text-muted); }
.plan--pro .plan-period { color: rgba(255,255,255,0.6); }

.plan-note { font-size: 0.92rem; color: var(--text-muted); }
.plan--pro .plan-note { color: rgba(255,255,255,0.6); }

.plan-for {
    font-size: 0.98rem;
    line-height: 1.6;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}
.plan--pro .plan-for { border-bottom-color: rgba(255,255,255,0.14); }

.plan-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.97rem;
    line-height: 1.5;
}
.plan-list li {
    position: relative;
    padding-left: 30px;
}
.plan-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 3px;
    width: 17px; height: 17px;
    background: var(--olive);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plan--pro .plan-list li::before { background: var(--lime); }

/* margin-top:auto pins the button to the card's bottom edge, so both cards'
   CTAs line up however unevenly the feature lists wrap. */
.plan-cta { margin-top: auto; align-self: flex-start; }
.plan--pro .plan-cta { background: var(--lime); color: var(--olive-deep); }
.plan--pro .plan-cta:hover { background: #d3ea52; }

.plans-footnote {
    margin-top: 22px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 62ch;
}

@media (max-width: 820px) {
    .plans { grid-template-columns: 1fr; }
    .plan-cta { align-self: stretch; text-align: center; justify-content: center; }
}

/* ==========================================================================
   COMPARISON
   .compare / .compare-wrap live in site.css — shared with features.html.
   Only the third column, which this page adds, needs styling here.
   ========================================================================== */

.compare-section { padding-top: clamp(40px, 5vw, 70px); }
.compare thead th:nth-child(3) { color: var(--olive); }
.compare td { color: var(--text-body); }