/* ── Shared .px plan-card block (billing toggle · guest trial tile · the three
     plan cards). ONE source of truth powering /subscribe and /settings — rules
     lifted verbatim from the approved /subscribe design. Scoped under .px so it
     can't collide with the global stylesheet, sidebar, or header chrome.
     Markup lives in templates/_plan_cards.html. ─────────────────────────────── */

.px {
    --el:#0d1422; --bd:rgba(255,255,255,.06); --tx:#E8EEF6; --dim:#6a8aaa; --mut:#3a5070;
    --pgold:#F5A623; --pgoldd:#c47e0e; --gglow:rgba(245,166,35,.15);
    --blue:#38bdf8; --bglow:rgba(56,189,248,.14); --grn:#22C55E;
    position:relative; z-index:1; color:var(--tx);
    font-family:'DM Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Billing toggle */
.px .togrow { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:52px; }
.px .toglab { font-size:14px; color:var(--mut); font-weight:500; cursor:pointer; background:none; border:none; font-family:'DM Sans',sans-serif; padding:4px; }
.px .toglab.on { color:var(--tx); }
.px .sw { width:52px; height:28px; border-radius:99px; background:var(--el); border:1px solid rgba(255,255,255,.12); position:relative; cursor:pointer; padding:0; }
.px .dot { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--pgold); transition:left .25s cubic-bezier(.6,0,.2,1); }
.px .dot.on { left:27px; }
.px .save { font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:.12em; color:var(--grn); border:1px solid rgba(34,197,94,.3); border-radius:99px; padding:4px 10px; }

/* Guest trial tile */
.px .trial { margin-top:44px; display:flex; align-items:center; gap:36px; border:1px dashed rgba(255,255,255,.14); border-radius:16px; padding:26px 32px; background:rgba(255,255,255,.015); }
.px .tleft { flex:1; min-width:0; }
.px .teyebrow { font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:.22em; color:var(--pgoldd); }
.px .th { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:27px; margin:8px 0 6px; }
.px .tbody { font-size:13.5px; color:var(--dim); line-height:1.6; font-weight:300; max-width:560px; }
.px .tright { text-align:center; flex-shrink:0; }
.px .btn-trial { display:inline-block; background:transparent; border:1px solid rgba(255,255,255,.22); color:var(--tx); border-radius:10px; padding:13px 26px; font-size:14.5px; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; transition:border-color .2s,transform .2s; }
.px .btn-trial:hover { border-color:rgba(255,255,255,.45); transform:translateY(-1px); text-decoration:none; }
.px .tchips { font-family:'DM Mono',monospace; font-size:10.5px; color:var(--mut); margin-top:10px; letter-spacing:.04em; }

/* Plan cards: Plus · Pro (blue) · Elite (gold hero) */
.px .cards { margin-top:60px; display:grid; grid-template-columns:1fr 1fr 1.06fr; gap:20px; align-items:start; background:radial-gradient(560px 460px at 84% 42%,rgba(245,166,35,.07),transparent 70%); }
.px .card { background:var(--el); border:1px solid var(--bd); border-radius:16px; padding:30px 28px; position:relative; transition:transform .25s ease; }
.px .card:hover { transform:translateY(-2px); }
.px .card-pro { margin-top:-12px; border-color:rgba(56,189,248,.35); box-shadow:0 0 44px -14px var(--bglow); background:linear-gradient(90deg,transparent 8%,var(--blue) 50%,transparent 92%) top/100% 1px no-repeat,linear-gradient(180deg,rgba(56,189,248,.05),transparent 140px),var(--el); }
.px .card-elite { margin-top:-30px; padding:38px 32px; border-color:rgba(245,166,35,.55); background:linear-gradient(90deg,transparent 5%,var(--pgold) 50%,transparent 95%) top/100% 2px no-repeat,linear-gradient(180deg,rgba(245,166,35,.06),transparent 170px),var(--el); }
.px .cur-card { border-color:rgba(56,189,248,.6); }
.px .ribbon { position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:.16em; padding:6px 15px; border-radius:99px; white-space:nowrap; font-weight:500; }
.px .rib-blue { background:var(--blue); color:#04121f; }
.px .rib-gold { background:linear-gradient(135deg,#ffc35c,var(--pgold)); color:#1a0f00; box-shadow:0 4px 18px -4px rgba(245,166,35,.55); }
.px .ceyebrow { font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:.22em; color:var(--mut); margin-top:6px; }
.px .cname { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:40px; line-height:1; margin-top:10px; }
.px .name-blue { color:var(--blue); }
.px .name-gold { color:var(--pgold); font-size:48px; }
.px .ctag { color:var(--dim); font-size:13.5px; line-height:1.5; margin-top:8px; min-height:62px; font-weight:300; }
.px .pricebox { display:flex; align-items:baseline; margin-top:14px; }
.px .pcur { font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:22px; color:var(--dim); margin-right:2px; }
.px .pnum { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:56px; line-height:1; font-variant-numeric:tabular-nums; }
.px .price-gold { color:var(--pgold); }
.px .card-elite .pnum { font-size:64px; }
.px .permo { color:var(--mut); font-size:15px; margin-left:4px; }
.px .pnote { font-family:'DM Mono',monospace; font-size:11px; color:var(--mut); margin-top:7px; min-height:15px; letter-spacing:.02em; }
.px .note-grn { color:var(--grn); }
.px .cta { display:block; width:100%; margin-top:20px; border-radius:10px; padding:14px; font-size:15px; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; border:1px solid transparent; transition:filter .2s,transform .2s; text-align:center; }
.px .cta:hover { filter:brightness(1.12); transform:translateY(-1px); text-decoration:none; }
.px .cta-gold { background:linear-gradient(135deg,#ffb84d,var(--pgold)); color:#1a0f00; box-shadow:0 8px 26px -8px rgba(245,166,35,.5); }
.px .cta-blue { background:var(--blue); color:#04121f; }
.px .cta-line { background:transparent; border-color:rgba(255,255,255,.18); color:var(--tx); }
.px .cta-cur { background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.4); color:var(--blue); cursor:default; }
.px .cta-inc { background:transparent; border:1px dashed rgba(255,255,255,.12); color:var(--mut); cursor:default; }
.px .cta-cur:hover,.px .cta-inc:hover { filter:none; transform:none; text-decoration:none; }
.px .cdiv { height:1px; background:var(--bd); margin:24px 0 18px; }
.px .hval { font-size:14.5px; line-height:1.6; font-weight:500; color:#f3e2bd; margin-bottom:18px; }
.px .flabel { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.2em; color:var(--mut); margin-bottom:14px; }
.px .feat { display:flex; gap:10px; margin-bottom:12px; align-items:flex-start; }
.px .tick { font-size:12px; line-height:1.6; flex-shrink:0; }
.px .tick-n { color:var(--dim); } .px .tick-b { color:var(--blue); } .px .tick-g { color:var(--pgold); }
.px .ftext { font-size:13.5px; line-height:1.5; color:var(--dim); font-weight:300; }
.px .ftext.hl { color:var(--tx); font-weight:400; }
.px .fsub { display:block; font-family:'DM Mono',monospace; font-size:10.5px; color:var(--mut); margin-top:3px; letter-spacing:.03em; }

/* Load-in motion (shared rise keyframes + card stagger/breathe) */
.px .r1 { animation:pxrise .5s ease both; } .px .r2 { animation:pxrise .5s .08s ease both; } .px .r3 { animation:pxrise .5s .16s ease both; } .px .r4 { animation:pxrise .5s .24s ease both; } .px .r5 { animation:pxrise .5s .3s ease both; }
.px .card-plus { animation:pxrise .5s .34s ease both; }
.px .card-pro { animation:pxrise .5s .46s ease both; }
.px .card-elite { animation:pxrise .55s .6s ease both,pxbreathe 7s 1.5s ease-in-out infinite; }
@keyframes pxrise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes pxbreathe { 0%,100% { box-shadow:0 0 60px -12px rgba(245,166,35,.15),0 24px 60px -30px rgba(0,0,0,.8); } 50% { box-shadow:0 0 84px -8px rgba(245,166,35,.24),0 24px 60px -30px rgba(0,0,0,.8); } }
@media (prefers-reduced-motion:reduce) { .px * { animation:none !important; transition:none !important; } }

@media (max-width:1020px) { .px .cards { gap:14px; } .px .card { padding:24px 20px; } .px .card-elite { padding:30px 22px; } }
@media (max-width:760px) {
    .px .cards { grid-template-columns:1fr; gap:26px; background:none; }
    .px .card-elite { order:-1; margin-top:0; }
    .px .card-pro { margin-top:0; }
    .px .ctag { min-height:0; }
    .px .trial { flex-direction:column; align-items:flex-start; gap:20px; }
    .px .tright { text-align:left; }
}