.plan-list { display:grid; gap:var(--s5); margin-top:var(--s6); align-items:stretch;
             grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.plan { --t:var(--tone, var(--acc)); --t-rgb:var(--tone-rgb, var(--acc-rgb));
        position:relative; perspective:1400px; cursor:pointer; }
.plan .flipper { position:relative; height:100%;
                 transition:transform .9s cubic-bezier(.3,1.22,.45,1), translate .15s ease; }
.plan .face { position:relative; overflow:hidden; height:100%; display:flex; flex-direction:column; gap:var(--s2);
              padding:var(--s2); background:var(--bg1); border:var(--bd) solid var(--t); box-shadow:var(--shadow);
              -webkit-backface-visibility:hidden; backface-visibility:hidden;
              transform:perspective(900px) rotateX(0deg) rotateY(0deg);
              transition:transform .9s cubic-bezier(.22,.61,.36,1), box-shadow .15s ease; }

.plan .face.live { will-change:transform; transition:box-shadow .15s ease; }
.plan .face.live .sheen { transition:opacity .25s; }
.plan .inner { flex:1; display:flex; flex-direction:column; gap:10px; padding:var(--s3); border:1px solid rgba(var(--t-rgb),.4);
               background:linear-gradient(165deg, rgba(var(--t-rgb),.11), transparent 45%), var(--bg0); }

.plan .col { display:contents; }
.plan .hd { display:flex; align-items:center; gap:10px; }
.plan .nm { margin-right:auto; font:700 21px/1 var(--ui); color:var(--text); }
.plan .flag { padding:3px var(--s2); background:var(--ink); color:var(--t);
             font:700 var(--fs-micro)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }

.plan .art { container-type:inline-size; position:relative; height:116px; overflow:hidden;
             border:1px solid rgba(var(--t-rgb),.35);
             background:radial-gradient(120% 90% at 20% 0%, rgba(var(--t-rgb),.25), transparent 60%),
                        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px), var(--bg2); }

.plan .price { position:absolute; left:var(--s3); top:50%; transform:translateY(-50%);
               font:700 min(124px, calc(84cqi / (.58 * var(--digits, 2) + .3)),
                            calc((100cqi - 2 * var(--s3) - var(--s2) - var(--pips, 4) * 10.2px)
                                 / (.58 * var(--digits, 2) + .3)))/1 var(--ui);
               letter-spacing:-.06em; color:var(--t); text-shadow:0 0 30px rgba(var(--t-rgb),.32); }

.plan .price sup { margin-right:.1em; font-size:.4em; vertical-align:1em; letter-spacing:0; }
.plan .pips { position:absolute; right:var(--s3); top:10px; font:12px/1 var(--mono); letter-spacing:3px; color:var(--t); }
.plan .kind { display:flex; justify-content:space-between; gap:10px; margin:0; padding:6px 0; border-block:1px solid var(--line2);
              font:700 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.plan .tagline { margin:0; font:600 14px/1.4 var(--ui); color:var(--text); }
.plan .buys { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.plan .row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 10px; margin-bottom:6px; }
.plan .row > span { font:600 12.5px/1.3 var(--ui); color:var(--text); }
.plan .fig { margin-left:auto; font:500 12px/1.3 var(--ui); color:var(--muted); text-align:right; }
.plan .gauge { display:flex; gap:2px; }
.plan .gauge i { flex:1; height:5px; background:rgba(255,255,255,.07); }
.plan .gauge i.on { background:var(--t); box-shadow:0 0 6px -1px rgba(var(--t-rgb),.42); }

.plan .est { margin:0; font:italic var(--fs-micro)/1.5 var(--ui); color:var(--muted); }
.plan .est .est-m { font-style:normal; font-weight:600; color:var(--text); }

.plan .band { margin:0; padding:7px 9px; border:1px dashed var(--line2); font:800 10px/1.35 var(--mono);
              letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.plan .band.on { border:1px solid var(--red); background:rgba(var(--red-rgb),.14); color:var(--text);
                 box-shadow:0 0 14px -6px rgba(var(--red-rgb),.8); }

.plan .band.pay { border:1px solid var(--t); background:rgba(var(--t-rgb),.1); color:var(--t); }
.plan .legal { margin:auto 0 0; font:9.5px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }

@media (hover:hover) {
  .plan:hover .flipper { translate:-3px -3px; }
  .plan:hover .face { box-shadow:9px 9px 0 rgba(var(--t-rgb),.32); }
}
.plan:active .flipper { translate:2px 2px; }
.plan:active .face { box-shadow:2px 2px 0 var(--edge); }

.plan-cta { --key:color-mix(in oklab, var(--t), #000 45%);
            position:relative; z-index:1; display:block; padding:11px; text-align:center; color:var(--ink);
            background:var(--t); font:800 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
            translate:0 -3px; box-shadow:0 5px 0 var(--key);
            transition:translate .12s ease, box-shadow .12s ease, filter .12s ease; }
.plan-cta:hover { color:var(--ink); text-decoration:none; filter:brightness(1.1);
                  translate:0 -6px; box-shadow:0 8px 0 var(--key); }
.plan-cta:active { translate:0 2px; box-shadow:0 0 0 var(--key); }
@media (pointer:coarse) { .plan-cta { min-height:44px; display:flex; align-items:center;
                                      justify-content:center; } }

.plan .sheen { position:absolute; inset:-50%; pointer-events:none; mix-blend-mode:color-dodge; opacity:.21;
               transition:transform .9s cubic-bezier(.22,.61,.36,1), opacity .6s;
               background:linear-gradient(115deg, transparent 25%, rgba(var(--t-rgb),.6) 43%, rgba(255,255,255,.55) 50%,
                          rgba(var(--violet-rgb),.55) 57%, transparent 75%); }
.plan:hover .sheen { opacity:.56; }
.plan[data-flair="foil"] :is(.face, .back, .bk) { border-image:var(--foil) 1; }
.plan[data-flair="foil"] .sheen { opacity:.35;
  background:repeating-linear-gradient(115deg, rgba(var(--acc-rgb),.45) 0, rgba(69,240,216,.45) 6%,
             rgba(var(--violet-rgb),.5) 12%, rgba(108,255,182,.45) 18%, rgba(var(--acc-rgb),.45) 24%); }
.plan[data-flair="foil"]:hover .sheen { opacity:.56; }

.plan[data-flair="foil"] .plan-cta { overflow:hidden; isolation:isolate; background:none; }
.plan[data-flair="foil"] .plan-cta::before { content:""; position:absolute; inset:0 auto 0 0; z-index:-1;
  width:600%; background:var(--foil) 0 0/50% 100%; animation:plan-foil 2.5s linear infinite paused; }
.plan[data-flair="foil"]:hover .plan-cta::before { animation-play-state:running; }
@keyframes plan-foil { from { transform:translateX(-50%); } }

.plan .back { position:absolute; inset:0; display:grid; place-items:center; transform:rotateY(180deg);
              -webkit-backface-visibility:hidden; backface-visibility:hidden; border:var(--bd) solid var(--t); box-shadow:var(--shadow);
              background:repeating-linear-gradient(45deg, rgba(var(--t-rgb),.13) 0 1px, transparent 1px 14px),
                         repeating-linear-gradient(-45deg, rgba(var(--t-rgb),.13) 0 1px, transparent 1px 14px),
                         radial-gradient(80% 60% at 50% 45%, rgba(var(--t-rgb),.24), transparent 70%), var(--bg1); }
.plan .back::before { content:""; position:absolute; inset:var(--s2); border:1px solid rgba(var(--t-rgb),.45); }
.plan .bk { position:relative; display:grid; justify-items:center; gap:var(--s3); padding:22px 26px; background:var(--bg0);
            border:var(--bd) solid var(--t); box-shadow:4px 4px 0 rgba(0,0,0,.5); }
.plan .bk .pips { position:static; font-size:14px; letter-spacing:4px; }
.plan .bk-wm { padding-left:.34em; font:700 18px/1 var(--ui); letter-spacing:.34em; text-transform:uppercase; color:var(--text); }
.plan .bk-sub { font:700 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

.plans.seq .plan:not(.shown) .flipper { transform:rotateY(-180deg); }

.plans.seq .plan:not(.settled) .flipper { transform-style:preserve-3d; will-change:transform; }
.plans.seq .gauge i.on:not(.lit) { background:rgba(255,255,255,.07); box-shadow:none; }

.plans.seq .gauge i.on.lit { animation:plan-tick calc(.22s + var(--k) * 10ms) ease-out; }
@keyframes plan-tick { from { transform:scaleY(calc(1.3 + var(--k) * .047));
  filter:brightness(calc(2 + var(--k) * .085)) drop-shadow(0 0 calc(2px + var(--k) * .4px) rgba(var(--t-rgb),.9)); } }

.plans.seq .flourish .gauge i.on.lit { animation:plan-flash .5s ease-out both;
                                                    animation-delay:calc(var(--row, 0) * 70ms); }
@keyframes plan-flash { 40% { filter:brightness(1.9) drop-shadow(0 0 5px rgba(var(--t-rgb),.95)); } }
.plan::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
               box-shadow:0 0 0 2px rgba(var(--t-rgb),.45), 0 0 46px -6px rgba(var(--t-rgb),.85); }
.plan.flourish::after { animation:plan-glow 1.1s ease-out; }
@keyframes plan-glow { 30% { opacity:1; } }
.plan.flourish .sheen { animation:plan-sweep 1.45s cubic-bezier(.3,.6,.3,1); }
@keyframes plan-sweep { from { transform:translate(30%, 30%); } 34% { opacity:.77; }
                        76% { transform:translate(-30%, -30%); } to { transform:none; } }
.plan.flourish .price { animation:plan-pop .8s ease-out; }
@keyframes plan-pop { 35% { translate:0 -3px; text-shadow:0 0 44px rgba(var(--t-rgb),.9); } }

.plan .spark { position:absolute; z-index:3; width:var(--sz, 12px); height:var(--sz, 12px); translate:-50% -50%;
               pointer-events:none; filter:drop-shadow(0 0 5px rgba(var(--t-rgb),.95));
               animation:plan-spark .95s cubic-bezier(.2,.7,.3,1) both; }
.plan .spark::before { content:""; position:absolute; inset:0; background:#fff;
                       clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@keyframes plan-spark { 0% { transform:scale(0) rotate(0deg); opacity:0; }
                        35% { transform:scale(1) rotate(45deg); opacity:1; }
                        100% { transform:scale(0) rotate(90deg); opacity:0; } }

html[data-gpu="no"] .plan:hover .sheen { opacity:.21; }
html[data-gpu="no"] .plan[data-flair="foil"]:hover .sheen { opacity:.35; }
html[data-gpu="no"] .plan[data-flair="foil"]:hover .plan-cta::before { animation-play-state:paused; }

.plan.top { translate:0 calc(-1 * var(--s3)); }
@media (max-width:720px) { .plan.top { translate:none; } }

.plan.wide, .plan-kicker { grid-column:1 / -1; }
.plan.wide.top { translate:none; }

.plan.wide .back { transform:rotateX(180deg); }
.plans.seq .plan.wide:not(.shown) .flipper { transform:rotateX(-180deg); }
.plan-kicker { display:flex; align-items:center; gap:var(--s3); margin:var(--s3) 0 calc(-1 * var(--s2));
               font:700 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
               color:var(--tone, var(--acc)); }
.plan-kicker::after { content:""; flex:1; height:1px; background:currentColor; opacity:.35; }
@media (min-width:901px) {
  .plan.wide .inner { display:grid; gap:var(--s3) 22px;
                      grid-template-columns:minmax(210px,270px) minmax(0,1fr) minmax(190px,240px); }
  .plan.wide .col { display:flex; flex-direction:column; gap:10px; min-width:0; }
  .plan.wide .buys { grid-template-columns:1fr 1fr; gap:11px 22px; }
}

.plan-kicker::after { transform-origin:left; }
.fx .plan-kicker.in::after { animation:fx-grow-x .9s var(--fx-ease) calc(var(--fx-d) + .2s) backwards; }