/* ══════════════════════════════════════════════════════════════════
   THE PLAN CARD — one component, on the landing and in the member area

   partials/plan_card draws it; layouts/landing and layouts/member both
   load this file, after their own design system (landing.css / ui.css),
   whose tokens it reads. A floating tier mark, the name in a pill, the
   rate as a big glowing figure, a checklist, the button on the bottom
   edge; the featured plan wears a spinning ring (.pl-ring — not .ring,
   which is the member area's countdown ring).

   The layout that holds the cards (.plans on the landing, .pl-grid in
   the member area) and any size a page wants are the page's business.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* the two the landing does not name */
    --white: #FFFFFF;
    --green-hi: #8CFFB0;
    --green-lo: #14A350;
}

.pl-card { position: relative; min-width: 0; padding: 62px 28px 52px; border-radius: 30px; text-align: center; border: 2px solid color-mix(in srgb, var(--white) 50%, transparent); }
.pl-card.is-featured { border-color: transparent; padding-block: 78px 64px; box-shadow: 0 0 80px -20px color-mix(in srgb, var(--green) 50%, transparent), inset 0 1px 0 color-mix(in srgb, var(--white) 16%, transparent); }
.pl-ring { position: absolute; inset: -2px; overflow: hidden; border-radius: inherit; padding: 2px; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pl-ring::before { content: ''; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; translate: -50% -50%;
    background: conic-gradient(var(--lime), var(--green) 18%, color-mix(in srgb, var(--green) 15%, transparent) 32%, color-mix(in srgb, var(--green) 15%, transparent) 50%, var(--green) 68%, var(--lime) 82%, color-mix(in srgb, var(--green) 15%, transparent)); animation: pl-spin 6s linear infinite; }
.pl-ic { position: absolute; top: -31px; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; color: var(--on-green);
    background: radial-gradient(circle at 35% 30%, var(--green-hi), var(--green-lo)); box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px color-mix(in srgb, var(--green) 60%, transparent), 0 12px 30px color-mix(in srgb, var(--green) 45%, transparent); }
.pl-ic .ic { width: 26px; height: 26px; stroke-width: 2.1; }
.pl-name { display: inline-block; max-width: 100%; padding: 5px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--lime) 60%, transparent); color: var(--lime); font: 700 13px var(--f-head); letter-spacing: .12em; text-transform: uppercase; overflow-wrap: anywhere; }
.pl-flag { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--lime) 14%, transparent); color: var(--lime); font-size: 12px; font-weight: 700; }
.pl-rate { margin: 18px 0 4px; }
.pl-rate b { display: block; font: 800 66px/1 var(--f-head); background: linear-gradient(180deg, var(--white), var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-rate span { color: var(--ink-2); font-size: 15px; }
.pl-list { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; text-align: left; }
.pl-list li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15px; }
.pl-list b { margin-left: auto; color: var(--ink); font-family: var(--f-head); font-weight: 700; text-align: right; }
.pl-list .ic { width: 22px; height: 22px; padding: 3px; border-radius: 7px; border: 1.5px solid var(--green); color: var(--green); stroke-width: 2.4; }
.pl-btn { position: absolute; bottom: -23px; left: 50%; min-width: 156px; translate: -50% 0; box-shadow: 0 0 0 6px var(--bg), 0 10px 30px -10px color-mix(in srgb, var(--green) 65%, transparent), inset 0 1px 0 color-mix(in srgb, var(--white) 50%, transparent); }
.pl-btn:hover { box-shadow: 0 0 0 6px var(--bg), 0 16px 36px -10px color-mix(in srgb, var(--green) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--white) 50%, transparent); }

@keyframes pl-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
    .pl-ring::before { animation: none; }
}