/* ─────────────────────────────────────────────────────────────
   CapraSEO — get tokens (upgrade) page
   Subscription plans + one-time top-up packs.
   ───────────────────────────────────────────────────────────── */

/* On this page we let the window scroll like a normal website
   (sidebar stays put via position: sticky) instead of confining
   scroll to .center.center-scroll. The pricing list further down
   has its own internal scroll. */
html:has(body[data-page="get-tokens"]),
body[data-page="get-tokens"] { height: auto; }
body[data-page="get-tokens"] {
  overflow-y: auto;
  min-height: 100vh;
}
body[data-page="get-tokens"] .app {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  align-items: flex-start;
}
body[data-page="get-tokens"] .sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  /* Same reason as the body rule in main.css: 100vh is the toolbar-HIDDEN
     height, so on a phone or tablet with the URL bar showing this sticky
     column is taller than the screen and its foot is cut off. The other
     100vh values on this page are harmless because it scrolls normally. */
  height: 100dvh;
}
body[data-page="get-tokens"] .stage {
  overflow: visible;
  min-height: 100vh;
}

.center.center-scroll {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 36px 40px;
  overflow: visible;
  gap: 28px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

/* ── Billing cycle slider ──────────────────────────────────── */
.billing-cycle {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  margin: 20px 0 -4px;
}

.bc-segments {
  --seg-w: 132px;
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(4, var(--seg-w));
  padding: 4px;
  background: rgba(var(--well-rgb), var(--well-a28));
  border: 1px solid rgba(var(--wash-rgb), 0.06);
  border-radius: 12px;
}
.bc-segment-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: var(--seg-w);
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.12) 0%, rgba(var(--wash-rgb), 0.04) 100%);
  border: 1px solid rgba(var(--wash-rgb), 0.16);
  border-radius: 9px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.20),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 24px -10px rgba(0,0,0,0.55);
  transform: translateX(calc(var(--i, 0) * var(--seg-w)));
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.bc-segment {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  white-space: nowrap;
  border-radius: 9px;
  transition: color 0.18s ease;
}
.bc-segment:hover { color: var(--text); }
.bc-segment.is-active { color: var(--text); }
.bc-segment:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bc-seg-label {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.bc-seg-cut {
  font-size: 10.5px;
  color: var(--accent-text);
  font-weight: 500;
  min-height: 13px;
  line-height: 13px;
}
.bc-segment:not(.is-active) .bc-seg-cut { opacity: 0.75; }

@media (max-width: 720px) {
  .bc-segments { --seg-w: 96px; }
  .bc-seg-label { font-size: 11.5px; }
}

/* On phones the 4-across slider is too wide to fit and the taps are tiny.
   Drop to a 2×2 grid of full-width pills and retire the sliding indicator —
   the active segment paints its own background (JS still toggles .is-active). */
@media (max-width: 560px) {
  .billing-cycle { display: block; }
  .bc-segments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
  }
  .bc-segment-pill { display: none; }
  .bc-segment {
    padding: 11px 8px;
    border: 1px solid transparent;
  }
  .bc-seg-label { font-size: 12.5px; }
  .bc-segment.is-active {
    background: linear-gradient(180deg, rgba(var(--wash-rgb), 0.12) 0%, rgba(var(--wash-rgb), 0.04) 100%);
    border-color: rgba(var(--wash-rgb), 0.16);
  }
}

/* ── Section heads (shared by plans + packs) ───────────────── */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px 4px;
}
.section-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-hi);
  letter-spacing: -0.005em;
}
.section-head p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.current-plan-note {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-text);
}

/* ── Plans grid ────────────────────────────────────────────── */
.plans-section { display: flex; flex-direction: column; gap: 14px; }

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.plan-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.025) 0%, rgba(var(--wash-rgb), 0) 55%, rgba(0,0,0,0.08) 100%),
    linear-gradient(180deg, rgba(var(--glass-hi-rgb),0.55) 0%, rgba(var(--glass-lo-rgb),0.6) 100%);
  border: 1px solid rgba(var(--wash-rgb), 0.05);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.05),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 12px 36px -16px rgba(0,0,0,0.55);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.plan-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--wash-rgb), 0.10);
}

.plan-card.is-featured {
  border-color: rgba(var(--accent-rgb),0.45);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.06),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 0 0 1px rgba(var(--accent-rgb),0.10),
    0 18px 48px -18px rgba(var(--accent-rgb),0.18),
    0 12px 36px -16px rgba(0,0,0,0.55);
  transform: translateY(-2px);
}
.plan-card.is-featured:hover {
  transform: translateY(-3px);
}

/* The account's active tier — outlined so it reads as "you're here". */
.plan-card.is-current {
  border-color: rgba(var(--accent-rgb),0.55);
  box-shadow:
    inset 0 1px 0 rgba(var(--wash-rgb), 0.06),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 0 0 1px rgba(var(--accent-rgb),0.18),
    0 12px 36px -16px rgba(0,0,0,0.55);
}

.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #0a1f12;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: var(--r-chip);
  box-shadow: 0 6px 16px -6px rgba(var(--accent-rgb),0.55);
  white-space: nowrap;
}

.plan-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}
.plan-tagline {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 4px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.plan-price .pp-amount {
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.plan-price .pp-suffix {
  font-size: 13px;
  color: var(--muted);
}
.plan-price .pp-original {
  font-size: 13px;
  color: var(--muted-2);
  text-decoration: line-through;
  margin-left: 4px;
}
.plan-price .pp-original[hidden] { display: none; }

.plan-billed {
  font-size: 12px;
  color: var(--muted);
  margin-top: -2px;
}
/* The real up-front charge on non-monthly cycles ("One payment of $327.60
   per year") — a footnote under the billed label, a step dimmer. */
.plan-total {
  font-size: 12px;
  color: var(--muted-2);
  margin-top: 2px;
}
.plan-total[hidden] { display: none; }

.plan-divider {
  height: 1px;
  background: rgba(var(--wash-rgb), 0.06);
  margin: 10px 0 6px;
}

.plan-tokens {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}
.plan-rate {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.plan-save {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 10px;
  padding: 6px 11px;
  border-radius: var(--r-chip);
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.18) 0%, rgba(var(--accent-rgb),0.08) 100%);
  border: 1px solid rgba(var(--accent-rgb),0.32);
  font-size: 12px;
  white-space: nowrap;
}
.plan-save .ps-amount {
  color: var(--accent-text);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.plan-save .ps-suffix {
  color: var(--muted);
}
.plan-save.plan-save-base {
  background: rgba(var(--wash-rgb), 0.04);
  border-color: rgba(var(--wash-rgb), 0.08);
  color: var(--muted-2);
  font-weight: 500;
}

.plan-cta {
  margin-top: 18px;
  width: 100%;
  justify-content: center;
}

.plans-note {
  margin: 4px 4px 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  text-align: center;
}

/* ── One-time packs ────────────────────────────────────────── */
.packs-section { display: flex; flex-direction: column; gap: 14px; }

.packs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pack-tile {
  position: relative;
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.02) 0%, rgba(var(--wash-rgb), 0) 55%, rgba(0,0,0,0.06) 100%),
    linear-gradient(180deg, rgba(var(--dk10-rgb),0.5) 0%, rgba(var(--dk11-rgb),0.55) 100%);
  border: 1px solid rgba(var(--wash-rgb), 0.05);
  border-radius: 12px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.pack-tile:hover {
  border-color: rgba(var(--wash-rgb), 0.10);
  transform: translateY(-1px);
}
.pack-tile.is-best {
  border-color: rgba(230,196,122,0.30);
}

.pack-tile .pt-flag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(230,196,122,0.12);
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(230,196,122,0.25);
}

.pack-tile .pt-tokens {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}
.pack-tile .pt-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: -2px;
}
.pack-tile .pt-price {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
/* Effective rate — mirrors the subscription cards' .plan-rate line so the
   two purchase options read side by side. */
.pack-tile .pt-rate {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.pack-tile .btn {
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}

/* ── Auto top-up ───────────────────────────────────────────── */
.autotopup-card {
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.02) 0%, rgba(var(--wash-rgb), 0) 55%, rgba(0,0,0,0.06) 100%),
    linear-gradient(180deg, rgba(var(--dk10-rgb),0.5) 0%, rgba(var(--dk11-rgb),0.55) 100%);
  border: 1px solid rgba(var(--wash-rgb), 0.05);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.autotopup-card.is-on {
  border-color: rgba(var(--accent-rgb),0.25);
}

.at-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.at-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.at-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 560px;
}
.at-desc strong { color: var(--text); font-weight: 500; }

.at-toggle {
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1px solid rgba(var(--wash-rgb), 0.12);
  background: rgba(var(--wash-rgb), 0.06);
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.at-toggle .at-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s ease, background 0.18s ease;
}
.at-toggle[aria-checked="true"] {
  background: rgba(var(--accent-rgb),0.25);
  border-color: rgba(var(--accent-rgb),0.45);
}
.at-toggle[aria-checked="true"] .at-knob {
  transform: translateX(18px);
  background: var(--accent);
}
.at-toggle:disabled { opacity: 0.55; cursor: wait; }

.at-options {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.at-options-label {
  font-size: 12px;
  color: var(--muted);
}
.at-packs { display: inline-flex; gap: 8px; }
.at-pack {
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: rgba(var(--wash-rgb), 0.03);
  border: 1px solid rgba(var(--wash-rgb), 0.08);
  border-radius: var(--r-chip);
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.at-pack:hover { border-color: rgba(var(--wash-rgb), 0.16); color: var(--text); }
.at-pack[aria-checked="true"] {
  color: var(--text);
  background: rgba(var(--accent-rgb),0.10);
  border-color: rgba(var(--accent-rgb),0.40);
}

.at-status {
  margin: 0;
  font-size: 12px;
  color: var(--muted-2);
}
.at-status.is-error { color: var(--gold); }

/* ── Pay with crypto (Solana) ──────────────────────────────── */
/* Divider between the card-paid blocks above and crypto below. */
.crypto-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 6px 0;
  color: var(--muted-2);
}
.crypto-divider::before,
.crypto-divider::after {
  content: "";
  flex: 1;
  height: 1px;
}
.crypto-divider::before {
  background: linear-gradient(90deg, rgba(var(--wash-rgb), 0), rgba(var(--wash-rgb), 0.10));
}
.crypto-divider::after {
  background: linear-gradient(90deg, rgba(var(--wash-rgb), 0.10), rgba(var(--wash-rgb), 0));
}
.crypto-divider svg { display: block; flex: 0 0 auto; }

.crypto-card {
  background:
    linear-gradient(180deg, rgba(var(--wash-rgb), 0.02) 0%, rgba(var(--wash-rgb), 0) 55%, rgba(0,0,0,0.06) 100%),
    linear-gradient(180deg, rgba(var(--dk10-rgb),0.5) 0%, rgba(var(--dk11-rgb),0.55) 100%);
  border: 1px solid rgba(var(--wash-rgb), 0.05);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.cc-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 560px;
}
.cc-desc strong { color: var(--text); font-weight: 500; }

.cc-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.cc-amount-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.cc-usd {
  width: 120px;
  background: rgba(var(--well-rgb), var(--well-a28));
  border: 1px solid rgba(var(--wash-rgb), 0.08);
  border-radius: 9px;
  padding: 8px 12px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.cc-usd:focus { border-color: rgba(var(--wash-rgb), 0.18); }

.cc-token-toggle { display: inline-flex; gap: 8px; padding-bottom: 2px; }
.cc-token {
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: rgba(var(--wash-rgb), 0.03);
  border: 1px solid rgba(var(--wash-rgb), 0.08);
  border-radius: var(--r-chip);
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.cc-token:hover { border-color: rgba(var(--wash-rgb), 0.16); color: var(--text); }
.cc-token[aria-checked="true"] {
  color: var(--text);
  background: rgba(var(--accent-rgb),0.10);
  border-color: rgba(var(--accent-rgb),0.40);
}

.cc-preview {
  font-size: 13px;
  color: var(--muted);
  padding-bottom: 8px;
  min-width: 220px;
}
.cc-preview strong { color: var(--text); font-weight: 600; }
.cc-preview.is-invalid { color: var(--gold); }
.cc-start { white-space: nowrap; }

.cc-pay {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.cc-qr {
  width: 168px;
  height: 168px;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-qr svg { width: 100%; height: 100%; }
.cc-qr-fallback { font-size: 11px; color: #444; text-align: center; margin: 0; }

.cc-pay-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
  flex: 1;
}
.cc-line {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cc-line strong { color: var(--text); font-weight: 600; }
.cc-address {
  font-size: 11.5px;
  color: var(--text);
  background: rgba(var(--well-rgb), var(--well-a28));
  border: 1px solid rgba(var(--wash-rgb), 0.08);
  border-radius: 7px;
  padding: 5px 8px;
  word-break: break-all;
}
.cc-copy {
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  background: rgba(var(--wash-rgb), 0.04);
  border: 1px solid rgba(var(--wash-rgb), 0.10);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.cc-copy:hover { color: var(--text); border-color: rgba(var(--wash-rgb), 0.18); }
.cc-wallet { align-self: flex-start; }

.cc-countdown {
  font-size: 12px;
  color: var(--muted-2);
}
.cc-status {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.cc-status.is-error { color: var(--gold); }
.cc-footnote {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted-2);
}
.cc-cancel {
  align-self: flex-start;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-cancel:hover { color: var(--text); }

/* ── Footnote ──────────────────────────────────────────────── */
.tokens-footnote {
  text-align: center;
  font-size: 12px;
  color: var(--muted-2);
  margin: 8px 0 4px;
}

/* ── External API pricing list ─────────────────────────────── */
.api-pricing-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.ap-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 2px;
}

.ap-search {
  flex: 1;
  min-width: 200px;
  background: rgba(var(--well-rgb), var(--well-a28));
  border: 1px solid rgba(var(--wash-rgb), 0.08);
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.ap-search::placeholder { color: var(--muted); }
.ap-search:focus {
  border-color: rgba(var(--wash-rgb), 0.22);
  background: rgba(var(--well-rgb), var(--well-a36));
}

.ap-tabs {
  display: inline-flex;
  padding: 4px;
  background: rgba(var(--well-rgb), var(--well-a28));
  border: 1px solid rgba(var(--wash-rgb), 0.06);
  border-radius: 10px;
  gap: 2px;
}
.ap-tab {
  background: none;
  border: 0;
  padding: 7px 12px;
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.ap-tab:hover { color: var(--text); }
.ap-tab.is-active {
  color: var(--text);
  background: rgba(var(--wash-rgb), 0.08);
}
.ap-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ap-list {
  display: flex;
  flex-direction: column;
  background: rgba(var(--well-rgb), var(--well-a28));
  border: 1px solid rgba(var(--wash-rgb), 0.06);
  border-radius: 10px;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ap-list[hidden] { display: none; }
.ap-list::-webkit-scrollbar { width: 10px; }
.ap-list::-webkit-scrollbar-thumb {
  background: rgba(var(--wash-rgb), 0.10);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.ap-list::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--wash-rgb), 0.18);
  background-clip: padding-box;
}
.ap-list::-webkit-scrollbar-track { background: transparent; }

.ap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid rgba(var(--wash-rgb), 0.04);
}
.ap-row:first-child { border-top: 0; }
.ap-row.is-hidden { display: none; }

.ap-row-name { min-width: 0; }
.ap-row-title {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-row-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}
.ap-row-price {
  flex: none;
  font-size: 12.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ap-row.is-variable .ap-row-price {
  color: var(--muted);
  font-style: italic;
  font-variant-numeric: normal;
}

.ap-group-head {
  padding: 8px 14px;
  background: rgba(var(--wash-rgb), 0.03);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid rgba(var(--wash-rgb), 0.04);
}
.ap-group-head:first-child { border-top: 0; }
.ap-group-head.is-hidden { display: none; }

.ap-empty {
  margin: 0;
  padding: 16px 14px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.ap-list.is-empty-filter::after {
  content: 'No matches.';
  display: block;
  padding: 16px 14px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.ap-updated {
  margin: 0;
  padding: 0 2px;
  font-size: 11.5px;
  color: var(--muted-2);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 980px) {
  .plans-grid { grid-template-columns: 1fr; }
  .plan-card.is-featured { transform: none; }
  .packs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* Restore the global off-canvas drawer. This page's desktop override
     pins the sidebar with `position: sticky` (see top of file), which
     out-specifies main.css's mobile `position: fixed` and leaves the
     sidebar reserving a phantom in-flow column while transformed off-screen
     — shoving all content into a cramped right-hand strip. Re-assert the
     drawer here so the hamburger slides it in over the content as intended. */
  body[data-page="get-tokens"] .sidebar {
    position: fixed;
    height: 100vh;
    height: 100dvh;
  }
}

@media (max-width: 720px) {
  .center.center-scroll { padding: 0 18px 28px; }
  .ap-controls { flex-direction: column; align-items: stretch; }
  .ap-tabs { align-self: flex-start; }
}

/* Crypto moved to the page bottom — its own section, same stack rhythm. */
.crypto-section { display: flex; flex-direction: column; gap: 14px; }