.plans { background: var(--surface); border-top: 1px solid rgba(10, 10, 10, .07); border-bottom: 1px solid rgba(10, 10, 10, .07); }

.plans-inner { padding-top: 112px; padding-bottom: 112px; display: flex; flex-direction: column; align-items: center; gap: 48px; }

.plans-head { align-items: center; text-align: center; }

.plans-grid { width: 100%; max-width: 880px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }

.plan { padding: 32px; border-radius: 28px; background: var(--bg); border: 1px solid rgba(10, 10, 10, .1); display: flex; flex-direction: column; gap: 24px; transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s; }
.plan:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(10, 10, 10, .3); }
.plan h3 { font: 600 18px/1.2 var(--sans); color: var(--title); }
.plan .btn { height: 52px; font-size: 16px; }

.plan-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font: 700 56px/1 var(--sans); letter-spacing: -2px; color: var(--title); }
.plan-price [data-config] { font-variant-numeric: tabular-nums; }
.plan-price small { font: 400 16px/1.2 var(--sans); letter-spacing: 0; color: var(--muted); }

.plan-items { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.plan-items li { display: flex; gap: 10px; font: 400 15px/1.45 var(--sans); color: #404040; }
.plan-items .ico { width: 20px; height: 20px; color: var(--brand); }

.plan-dark { background: var(--dark); border-color: var(--dark); box-shadow: 0 40px 80px -40px rgba(185, 28, 28, .55); }
.plan-dark h3, .plan-dark .plan-price { color: var(--on-dark); }
.plan-soon { font-size: 40px; letter-spacing: -1.2px; }
.plan-dark .plan-price small { font-size: 15px; color: var(--on-dark-2); }
.plan-note { font: 400 15px/1.5 var(--sans); color: #D4D4D4; }

.plans-pay { display: flex; align-items: center; gap: 6px; font: 500 14px/1 var(--sans); color: var(--text-2); }
.plans-pay .ico { width: 20px; height: 20px; color: var(--muted); }

@media (max-width: 479px) {
  .plans-inner { padding-top: 72px; padding-bottom: 72px; }
  .plan { padding: 24px; }
}

.segmented { display: none; }

@media (max-width: 819px) {
  .plans-inner { gap: 32px; }
  .segmented { position: relative; width: 100%; max-width: 360px; padding: 4px; border-radius: 14px; background: var(--container); border: 1px solid var(--line); display: flex; margin-bottom: -8px; }
  .segmented::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--surface); box-shadow: 0 2px 8px -2px rgba(10, 10, 10, .18); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .segmented[data-value="1"]::before { transform: translateX(100%); }
  .segmented button { position: relative; flex: 1; height: 44px; border: 0; border-radius: 10px; background: transparent; font: 600 15px/1 var(--sans); color: var(--text-2); cursor: pointer; transition: color .2s; }
  .segmented [aria-checked="true"] { color: var(--title); }
  .plans-grid > .is-off { display: none; }
}