
.period{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;background-color:var(--ds-surface-2);border-radius:var(--ds-radius-sm)}
.period button{position:relative;z-index:1;min-height:44px;padding:0 20px;border:0;background:transparent;font:600 .9375rem var(--ds-font-body);color:var(--ds-text-2);cursor:pointer;transition:color var(--ds-dur-2) ease-out}
.period button[aria-pressed="true"]{color:var(--ds-text)}
.thumb{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc(50% - 4px);background-color:var(--ds-raised);border-radius:var(--ds-radius-xs);box-shadow:0 1px 3px rgb(12 20 19/.16);transition:transform var(--ds-dur-3) var(--ds-ease-out)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.plan{border:1px solid var(--ds-border);border-radius:var(--ds-radius);padding:32px 28px;display:grid;gap:20px;background-color:var(--ds-surface);min-width:0;animation:rise var(--ds-dur-4) var(--ds-ease-out) both;transition:transform var(--ds-dur-3) var(--ds-ease-out),box-shadow var(--ds-dur-3) var(--ds-ease-out)}
.plan:nth-child(2){animation-delay:90ms}.plan:nth-child(3){animation-delay:180ms}
.plan:hover{transform:translateY(-4px);box-shadow:var(--ds-shadow-float)}
.ptop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan>h3,.ptop{min-height:34px}
.tag{font-size:.8125rem;font-weight:600;color:var(--ds-ink);background-color:var(--ds-ink-accent);padding:2px 10px;border-radius:99px}
.for{color:var(--ds-text-2);font-size:.9375rem;min-height:3.4em}
.price{font:600 clamp(2.75rem,2rem + 2vw,3.75rem)/1 var(--ds-font-display);font-variant-numeric:tabular-nums}
.price small{display:block;font:400 .9375rem/1.6 var(--ds-font-body);color:var(--ds-text-2);margin-top:10px}
.swap{animation:rise var(--ds-dur-3) var(--ds-ease-out) both}
.limits{list-style:none;margin:0;padding:14px 0;border-block:1px solid var(--ds-border);display:grid;gap:5px;font-size:.9375rem}
.limits li{display:flex;justify-content:space-between;gap:12px}.limits span{color:var(--ds-text-2)}.limits b{font-weight:600;font-variant-numeric:tabular-nums}
.inc{font-weight:600;font-size:.9375rem;margin-bottom:-10px}
.trial{font-size:.875rem;color:var(--ds-text-3)}
.plan.rec{background-color:var(--ds-ink);border-color:var(--ds-ink);color:var(--ds-ink-text);position:relative;overflow:hidden;isolation:isolate;box-shadow:0 44px 80px -40px rgb(7 17 15/.7)}
.plan.rec::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 45% at 50% 0,rgb(45 212 191/.24),transparent 75%)}
.rec .for,.rec .limits span,.rec .price small,.rec .trial,.rec .feats{color:var(--ds-ink-text-2)}
.rec .limits{border-color:var(--ds-ink-line)}
.rec .feats li::before{border-color:var(--ds-ink-accent)}
.ent{margin-top:16px;border:1px solid var(--ds-border);border-radius:var(--ds-radius);padding:24px 28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.ent p{color:var(--ds-text-2);margin-top:4px}
.yy{color:var(--ds-accent);font-weight:700}
@media (max-width:1020px){.plans{grid-template-columns:minmax(0,1fr)}.for{min-height:0}}

