/* ══════════════════════════════════════════════════════════════════════
   PLAN CARDS — shared by /pricing and the app's setup step.

   Lifted verbatim from pricing.html so the two cannot diverge. The page
   that embeds them supplies the grid; this file is only the card.
   ══════════════════════════════════════════════════════════════════════ */
.tier {
    background: #fff;
    border: 1.5px solid rgba(91, 80, 232, .14);
    border-radius: 18px;
    padding: 28px 24px;
    text-align: left;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(30, 27, 75, .02), 0 8px 24px rgba(30, 27, 75, .05);
}
.tier.featured {
    border-color: var(--violet);
    border-width: 2px;
    box-shadow: 0 16px 36px rgba(30, 27, 75, .10);
    position: relative;
}
.tier .badge {
    position: absolute; top: -13px; left: 24px;
    background: var(--violet); color: #fff;
    font-weight: 700; font-size: 12px; letter-spacing: .04em;
    padding: 5px 12px; border-radius: 999px; text-transform: uppercase;
}
.tier h2 { font-family: var(--font-display); font-size: 22px; margin: 0; }
.tier .price { font-family: var(--font-display); font-size: 34px; margin: 10px 0 2px; }
.tier .price small { font-size: 15px; font-weight: 600; color: var(--text-muted, #6b6890); }
.tier .who { color: var(--text-muted, #6b6890); font-size: 14px; margin-bottom: 10px; }
.tier .tagline { font-size: 14px; font-weight: 700; line-height: 1.5; margin-bottom: 16px; }
.tier ul.feats {
    list-style: none; padding: 0; margin: 0 0 22px;
    display: flex; flex-direction: column; gap: 10px;
}
.tier ul.feats li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.4; }
.tier ul.feats li::before {
    content: "\2713"; position: absolute; left: 0; top: 0;
    color: var(--violet); font-weight: 700;
}
.tier .cta {
    margin-top: auto; display: inline-block; text-align: center;
    font-weight: 600; font-size: 16px; padding: 13px 18px;
    border-radius: 12px; border: 0; cursor: var(--cur-point, pointer);
    text-decoration: none; width: 100%; font-family: inherit;
    transition: filter .15s ease, transform .15s ease, background .15s ease;
}
.tier .cta.primary { background: var(--violet); color: #fff; }
.tier .cta.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.tier .cta.ghost { background: rgba(91, 80, 232, .08); color: var(--violet); }
.tier .cta.ghost:hover { background: rgba(91, 80, 232, .15); transform: translateY(-1px); }

/* Lifted from pricing.html, not re-invented: the card is a solid #1D1D21
   panel with a deep shadow, and the featured tier is marked by the violet
   border alone — no coloured glow. */
[data-dark] .tier {
    background: #1D1D21;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
[data-dark] .tier.featured { border-color: var(--violet); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
[data-dark] .tier .who, [data-dark] .tier .price small { color: #85858F; }
[data-dark] .tier .cta.ghost { background: rgba(157, 148, 255, 0.14); color: #b9b2ff; }
[data-dark] .tier .cta.ghost:hover { background: rgba(157, 148, 255, .22); }

@media (prefers-reduced-motion: reduce) {
    .tier .cta, .tier .cta:hover { transition: none; transform: none; }
}

/* The monthly/annual pair. /pricing has a toggle that flips body[data-interval];
   anywhere else — the setup step — there is no toggle, so the monthly price is
   the one that shows. Without this the card prints both. */
body:not([data-interval="annual"]) .tier .p-annual { display: none; }
body[data-interval="annual"] .tier .p-monthly { display: none; }
body:not([data-interval="annual"]) .tier .annual-note.p-annual { display: none; }

/* The grid itself. pricing.html declares `display: grid` on a bare .grid in
   its own <style>; public-polish.css then sets the columns. Carried here so
   the cards lay out wherever the include is used, not only on that page. */
.public-pricing .grid { display: grid; width: 100%; }
@media (max-width: 900px) {
    .public-pricing .grid { grid-template-columns: 1fr; }
    .public-pricing .tier { border-right: 0; border-bottom: 1px solid var(--public-line); padding: 28px 0; }
    .public-pricing .tier.featured { border-right: 0; }
}