.pricing-page {
  background:
    radial-gradient(circle at 78% 8%, rgba(88, 237, 194, .12), transparent 29rem),
    radial-gradient(circle at 18% 24%, rgba(157, 124, 255, .12), transparent 34rem),
    var(--bg);
}

.pricing-hero {
  position: relative;
  min-height: min(820px, calc(100svh - var(--header-height)));
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(5rem, 9vw, 8rem);
  border-bottom: 1px solid var(--line);
}

.pricing-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
}

.pricing-hero__copy { max-width: 760px; }
.pricing-hero h1 {
  max-width: 760px;
  margin: .9rem 0 1.35rem;
  font-size: clamp(3.35rem, 6.8vw, 6.7rem);
  line-height: .94;
  letter-spacing: -.065em;
}
.pricing-hero__copy > p {
  max-width: 670px;
  color: var(--text-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
}
.pricing-hero__actions, .pricing-final > div > div {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}
.pricing-verified {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.25rem;
  color: var(--text-muted) !important;
  font-size: .85rem !important;
}
.pricing-verified span { color: var(--mint); }

.pricing-orb {
  position: absolute;
  width: 30rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .32;
  pointer-events: none;
}
.pricing-orb--one { top: -14rem; right: -7rem; background: radial-gradient(circle, var(--mint), transparent 68%); }
.pricing-orb--two { bottom: -20rem; left: 18%; background: radial-gradient(circle, var(--violet), transparent 68%); }

.credit-visual {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 4vw, 2.8rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.credit-visual::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, rgba(88, 237, 194, .12), transparent 42%, rgba(157, 124, 255, .12));
  content: "";
}
.credit-visual__top { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.credit-visual__top span { color: var(--text-soft); }
.credit-visual__top strong { font-size: clamp(4rem, 8vw, 7.4rem); line-height: .82; letter-spacing: -.08em; }
.credit-visual__meter { height: 8px; margin: 2rem 0; overflow: hidden; background: rgba(255,255,255,.08); border-radius: 999px; }
.credit-visual__meter span { display:block; width: 45%; height:100%; background: linear-gradient(90deg, var(--mint), var(--violet)); border-radius:inherit; transition: width .45s ease; }
.credit-visual__grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.credit-visual__grid div { min-height: 110px; padding: 1rem; border:1px solid var(--line); background:rgba(4,11,18,.42); border-radius:16px; }
.credit-visual__grid strong, .credit-visual__grid span { display:block; }
.credit-visual__grid strong { font-size: 1.65rem; color:var(--mint); }
.credit-visual__grid span { color:var(--text-soft); font-size:.9rem; }

.pricing-controls {
  display:grid;
  grid-template-columns: auto auto 1fr;
  align-items:end;
  gap:1rem;
  margin-bottom:2rem;
  padding:1rem;
  border-radius:22px;
}
.segmented-control, .billing-toggle { display:flex; padding:.3rem; background:rgba(4,11,18,.65); border:1px solid var(--line); border-radius:14px; }
.segmented-control button, .billing-toggle button, .credit-options button {
  min-height:44px;
  padding:.65rem .9rem;
  color:var(--text-soft);
  border:0;
  background:transparent;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.segmented-control button.is-active, .billing-toggle button.is-active, .credit-options button.is-active {
  color:#052118;
  background:var(--mint);
}
.billing-toggle span { display:block; font-size:.68rem; }
.credit-options { min-width:0; margin:0; padding:0; border:0; }
.credit-options legend { margin:0 0 .35rem; color:var(--text-muted); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.credit-options > div { display:grid; grid-template-columns:repeat(6, minmax(58px,1fr)); gap:.4rem; }
.credit-options button { border:1px solid var(--line); }
[hidden] { display:none !important; }

.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:stretch; }
.plan-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:clamp(1.4rem,3vw,2.2rem);
  border:1px solid var(--line);
  background:rgba(7,19,31,.76);
  border-radius:24px;
}
.plan-card--featured { border-color:rgba(88,237,194,.58); box-shadow:0 24px 70px rgba(25,185,141,.13); transform:translateY(-10px); }
.plan-card__tag { align-self:flex-start; padding:.35rem .65rem; color:var(--mint); background:rgba(88,237,194,.08); border:1px solid rgba(88,237,194,.22); border-radius:999px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.plan-card h3 { margin:1.2rem 0 .4rem; font-size:1.55rem; }
.plan-price { display:flex; align-items:flex-start; margin:.45rem 0; }
.plan-price span { margin:.55rem .2rem 0 0; color:var(--text-soft); font-size:1.25rem; }
.plan-price strong { font-size:clamp(3rem,5vw,4.9rem); line-height:1; letter-spacing:-.06em; }
.plan-price--word strong { margin-top:.6rem; font-size:2.4rem; }
.plan-cycle { min-height:2.6rem; color:var(--text-muted); }
.plan-card ul { flex:1; margin:1.25rem 0 1.8rem; padding:0; list-style:none; }
.plan-card li { position:relative; margin:.68rem 0; padding-left:1.35rem; color:var(--text-soft); }
.plan-card li::before { position:absolute; left:0; color:var(--mint); content:"✓"; }
.plan-card .btn-primary-ui, .plan-card .btn-secondary-ui { width:100%; }
.pricing-note { max-width:800px; margin:1.4rem auto 0; color:var(--text-muted); text-align:center; }

.pricing-band { border-block:1px solid var(--line); background:rgba(4,11,18,.38); }
.usage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.usage-grid article { padding:1.5rem; border:1px solid var(--line); background:var(--surface-soft); border-radius:20px; }
.usage-grid article > span { color:var(--mint); font-family:ui-monospace,monospace; font-weight:800; }
.usage-grid h3 { margin:1.25rem 0 .5rem; }
.usage-grid p { margin:0; color:var(--text-soft); }

.table-scroll { overflow:auto; border:1px solid var(--line); border-radius:22px; }
.pricing-table { width:100%; min-width:820px; border-collapse:collapse; background:rgba(4,11,18,.34); }
.pricing-table th, .pricing-table td { padding:1rem 1.2rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.pricing-table thead th { color:var(--mint); background:rgba(255,255,255,.04); }
.pricing-table tbody th { color:var(--text); }
.pricing-table td { color:var(--text-soft); }
.pricing-table tr:last-child > * { border-bottom:0; }

.workflow-split { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(2rem,7vw,7rem); align-items:start; }
.workflow-split h2 { margin:.8rem 0 1rem; font-size:var(--heading-2); letter-spacing:-.045em; line-height:1.04; }
.workflow-split > div p { color:var(--text-soft); }
.pricing-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:0; padding:0; list-style:none; }
.pricing-steps li { display:flex; gap:1rem; min-height:180px; padding:1.35rem; border:1px solid var(--line); background:var(--surface-soft); border-radius:20px; }
.pricing-steps li > span { display:grid; flex:0 0 2.4rem; width:2.4rem; height:2.4rem; place-items:center; color:#052118; background:var(--mint); border-radius:50%; font-weight:800; }
.pricing-steps h3 { margin:.2rem 0 .5rem; font-size:1.08rem; }
.pricing-steps p { margin:0; color:var(--text-soft); }

.faq-layout { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(2rem,7vw,7rem); align-items:start; }
.faq-intro { position:sticky; top:calc(var(--header-height) + 2rem); }
.faq-intro p { color:var(--text-soft); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { display:flex; justify-content:space-between; gap:1rem; padding:1.4rem 0; cursor:pointer; color:var(--text); font-size:1.08rem; font-weight:750; list-style:none; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { color:var(--mint); font-size:1.4rem; transition:transform .2s ease; }
.faq-list details[open] summary span { transform:rotate(45deg); }
.faq-list details p { max-width:760px; margin:0 0 1.5rem; color:var(--text-soft); }

.pricing-final { padding-block:clamp(5rem,10vw,9rem); text-align:center; border-top:1px solid var(--line); background:radial-gradient(circle at 50% 100%,rgba(88,237,194,.14),transparent 55%); }
.pricing-final .container-xxl { max-width:980px; }
.pricing-final h2 { margin:.8rem 0 1rem; font-size:var(--heading-2); line-height:1.03; letter-spacing:-.045em; }
.pricing-final p { max-width:720px; margin-inline:auto; color:var(--text-soft); }
.pricing-final > div > div { justify-content:center; }

@media (max-width: 1080px) {
  .pricing-hero__inner { grid-template-columns:1fr; }
  .credit-visual { max-width:720px; }
  .pricing-controls { grid-template-columns:1fr 1fr; }
  .credit-options { grid-column:1/-1; }
  .plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan-card:last-child { grid-column:1/-1; }
  .usage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .pricing-hero { min-height:auto; padding-block:4.5rem; }
  .pricing-hero h1 { font-size:clamp(3rem,14vw,4.4rem); }
  .credit-visual__top { align-items:center; }
  .credit-visual__top strong { font-size:4rem; }
  .pricing-controls, .plan-grid, .workflow-split, .faq-layout { grid-template-columns:1fr; }
  .plan-card:last-child { grid-column:auto; }
  .plan-card--featured { transform:none; }
  .segmented-control, .billing-toggle { width:100%; }
  .segmented-control button, .billing-toggle button { flex:1; }
  .credit-options > div { display:flex; overflow-x:auto; padding-bottom:.4rem; scroll-snap-type:x mandatory; }
  .credit-options button { min-width:76px; scroll-snap-align:start; }
  .pricing-steps { grid-template-columns:1fr; }
  .pricing-steps li { min-height:0; }
  .faq-intro { position:static; }
}

@media (max-width: 520px) {
  .pricing-hero__actions, .pricing-final > div > div { flex-direction:column; }
  .pricing-hero__actions a, .pricing-final a { width:100%; }
  .credit-visual__grid, .usage-grid { grid-template-columns:1fr; }
  .credit-visual__grid div { min-height:90px; }
  .pricing-controls { padding:.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .credit-visual__meter span, .faq-list summary span { transition:none; }
}