:root {
  --pricing-bg: #0d1119;
  --pricing-panel: rgba(16, 19, 31, 0.88);
  --pricing-panel-strong: rgba(10, 13, 23, 0.96);
  --pricing-border: rgba(255, 255, 255, 0.1);
  --pricing-border-strong: rgba(176, 154, 255, 0.46);
  --pricing-border-soft: rgba(201, 188, 255, 0.28);
  --pricing-text: #f5f2ff;
  --pricing-muted: #b5aec8;
  --pricing-accent: #9b84ff;
  --pricing-accent-strong: #c6b7ff;
  --pricing-accent-soft: rgba(155, 132, 255, 0.18);
  --pricing-accent-wash: rgba(155, 132, 255, 0.08);
  --pricing-success: #b7ffd8;
  --pricing-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
}

/* ── Rotating ring animation ─────────────────────────────── */
@property --ctrl-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes ctrl-spin {
  to { --ctrl-angle: 360deg; }
}

[data-page="pricing"] #main-content {
  background:
    radial-gradient(circle at 8% 18%, rgba(119, 94, 255, 0.18), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(255, 228, 180, 0.08), transparent 24%),
    radial-gradient(circle at 50% 82%, rgba(85, 117, 255, 0.12), transparent 32%),
    linear-gradient(180deg, #090b11 0%, #0d1119 36%, #0b1018 100%);
}

.pricing-page {
  color: var(--pricing-text);
  padding: 2rem 0 5rem;
}

.pricing-shell {
  max-width: 1280px;
}

.pricing-hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 2.5rem;
}

.pricing-hero__ambient {
  position: absolute;
  width: 30rem;
  height: 30rem;
  border-radius: 999px;
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
}

.pricing-hero__ambient--left {
  top: -10rem;
  left: -12rem;
  background: rgba(139, 112, 255, 0.36);
}

.pricing-hero__ambient--right {
  top: -8rem;
  right: -10rem;
  background: rgba(110, 142, 255, 0.22);
}

.pricing-hero__inner {
  position: relative;
}

.pricing-card,
.compare-table-wrap,
.faq-item {
  position: relative;
  border: 1px solid var(--pricing-border);
  border-radius: 1.8rem;
  background: linear-gradient(180deg, rgba(17, 21, 33, 0.92), rgba(10, 13, 23, 0.98));
  box-shadow: var(--pricing-shadow);
  backdrop-filter: blur(18px);
}

.pricing-hero__panel {
  padding: 2rem;
  overflow: hidden;
}

/* ── Controls ring wrapper ── */
.controls-ring-wrapper {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: 2px;
  border-radius: 999px;
}

.controls-ring-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(
    from var(--ctrl-angle),
    transparent 10%,
    rgba(109, 40, 217, 0) 30%,
    #8b5cf6 47%,
    #c4b5fd 50%,
    #8b5cf6 53%,
    rgba(109, 40, 217, 0) 70%,
    transparent 90%
  );
  animation: ctrl-spin 4s linear infinite;
  z-index: 0;
}

.controls-ring-wrapper .plan-group-toggle--hero {
  position: relative;
  z-index: 1;
  background: linear-gradient(to right, rgba(19, 20, 39, 0.7), rgba(22, 22, 28, 0.7)) !important;
  border: none !important;
}

/* ── Billing controls shell ── */
.billing-controls-shell {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 2.5rem;
  padding: 1.25rem 0;
}

.billing-controls-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 120px,
      rgba(139, 92, 246, 0.05) 120px,
      rgba(139, 92, 246, 0.05) 121px
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(139, 92, 246, 0.06) 50%,
      transparent 100%
    );
  pointer-events: none;
  border-radius: 12px;
}

.billing-controls-shell::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(139, 92, 246, 0.15) 20%,
    rgba(196, 181, 253, 0.35) 50%,
    rgba(139, 92, 246, 0.15) 80%,
    transparent
  );
  pointer-events: none;
}

.billing-controls-shell .billing-group-toggle {
  position: relative;
  z-index: 1;
}

/* ── Starter card Launch treatment ── */
.pricing-card[data-plan="starter"] {
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 28px 68px rgba(62, 33, 164, 0.22);
  transform: translateY(-0.25rem) scale(1.02);
}

.pricing-card[data-plan="starter"]:hover {
  transform: translateY(-0.45rem) scale(1.028);
  border-color: rgba(196, 181, 253, 0.7);
}

.pricing-card[data-plan="starter"] .pricing-card-badge {
  background: rgba(255, 255, 255, 0.06);
  color: #e8deff;
  border: none;
  letter-spacing: normal;
}

.pricing-hero__kicker,
.pricing-group-panel__header > span,
.pricing-section-heading > span,
.pricing-card__group,
.compare-th__group {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d8cffb;
}

.pricing-hero__kicker::before,
.pricing-group-panel__header > span::before,
.pricing-section-heading > span::before,
.pricing-card__group::before,
.compare-th__group::before {
  content: "";
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f4ecff, var(--pricing-accent));
  box-shadow: 0 0 18px rgba(155, 132, 255, 0.48);
}

.pricing-hero__title {
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
  color: var(--pricing-text);
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 1.0;
  letter-spacing: -0.045em;
}

.pricing-hero__sub {
  max-width: 46rem;
  margin: 1rem auto 0;
  text-align: center;
  color: var(--pricing-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.pricing-hero__lead {
  max-width: 56rem;
  margin: 0;
  color: var(--pricing-muted);
  font-size: 1.02rem;
  line-height: 1.75;
}

.pricing-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
}

.pricing-controls--centered {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

/* ── Toggle shared base ── */
.plan-group-toggle,
.billing-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
}

/* shared button base */
.plan-group-toggle__btn,
.billing-toggle__btn {
  border: 0;
  padding: 0.6rem 1.35rem;
  border-radius: 50px;
  background: transparent;
  color: rgba(200, 190, 255, 0.45);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
  white-space: nowrap;
}

.plan-group-toggle__btn--active,
.billing-toggle__btn--active {
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.45);
}

.billing-toggle__btn--active .toggle-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.toggle-badge {
  display: inline-block;
  margin-inline-start: 0.4rem;
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

/* Un badge par groupe (Solo / Enterprise), basculé par pricing.js comme les
   titres : sans cette règle, display:inline-block l'emporte sur [hidden]. */
.toggle-badge[hidden] {
  display: none;
}

/* Hero (large) plan toggle */
.plan-group-toggle--hero {
  border: 1px solid rgba(155, 132, 255, 0.22);
  background: rgba(155, 132, 255, 0.05);
  border-radius: 50px;
  padding: 0.4rem;
}

.plan-group-toggle--hero .plan-group-toggle__btn {
  padding: 1rem 3.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  border-radius: 50px;
  letter-spacing: 0.02em;
  color: rgba(220, 210, 255, 0.6);
}

.plan-group-toggle--hero .plan-group-toggle__btn--active {
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.55);
}

.pricing-hero__microcopy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.pricing-hero__microcopy span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--pricing-muted);
  font-size: 0.88rem;
}

.pricing-cards-section {
  padding-top: 0;
}

.pricing-compare-section,
.pricing-faq-section {
  padding-top: 3.5rem;
}

/* ── Cold-violet CTAs (non-featured cards) ── */
.pricing-page .pricing-card-cta .btn-secondary {
  background: rgba(91, 87, 240, 0.12);
  border: 1px solid rgba(91, 87, 240, 0.4);
  color: #a5a2ff;
}

.pricing-page .pricing-card-cta .btn-secondary:hover {
  background: rgba(91, 87, 240, 0.24);
  border-color: rgba(91, 87, 240, 0.7);
  color: #fff;
  box-shadow: 0 4px 16px rgba(91, 87, 240, 0.35);
}

.pricing-page .pricing-card-cta .btn-primary:hover {
  background: rgba(124, 58, 237, 0.82);
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.45);
}

.pricing-group-panel__header,
.pricing-section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}

/* Extracted group headline: ring → headline → billing → cards */
.pricing-group-headline {
  text-align: center;
  margin: 2rem 0 0.5rem;
}

.pricing-group-headline__text {
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--pricing-text);
}

.pricing-group-panel__header h2,
.pricing-section-heading h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
}

.pricing-group-panel__header p,
.pricing-section-heading p {
  max-width: 48rem;
  margin: 0;
  color: var(--pricing-muted);
  line-height: 1.7;
}

.pricing-cards {
  display: grid;
  gap: 1.25rem;
}

.pricing-cards--solo {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.pricing-cards--enterprise {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
  overflow: hidden;
  padding: 1.45rem;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.pricing-card:hover {
  transform: translateY(-0.35rem) scale(1.014);
  border-color: rgba(206, 192, 255, 0.56);
  box-shadow: 0 30px 78px rgba(40, 22, 104, 0.3);
}

.pricing-card__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(155, 132, 255, 0.22), transparent 32%),
    radial-gradient(circle at bottom left, rgba(95, 124, 255, 0.14), transparent 30%);
  pointer-events: none;
}

.pricing-card--featured {
  border-color: var(--pricing-border-strong);
  box-shadow: 0 32px 84px rgba(62, 33, 164, 0.28);
  transform: translateY(-0.3rem) scale(1.03);
}

.pricing-card--featured:hover {
  transform: translateY(-0.45rem) scale(1.042);
}

.pricing-card--current {
  border-color: rgba(183, 255, 216, 0.34);
}

.pricing-card__corner,
.pricing-card__header,
.pricing-card-price,
.pricing-card__support,
.pricing-features,
.pricing-card-cta {
  position: relative;
  z-index: 1;
}

.pricing-card__corner {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(196, 181, 253, 0.5);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.55), rgba(91, 87, 240, 0.75));
  color: #fff;
  box-shadow:
    0 0 0 4px rgba(139, 92, 246, 0.15),
    0 0 18px rgba(139, 92, 246, 0.55),
    0 0 42px rgba(139, 92, 246, 0.25);
}

.pricing-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex-grow: 1;
}

.pricing-card__group {
  color: #dfd7ff;
}

.pricing-card-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #e8deff;
  font-size: 0.76rem;
  font-weight: 600;
}

.pricing-plan-name {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.05;
  text-align: center;
}

.pricing-plan-desc {
  margin: 0;
  color: var(--pricing-muted);
  line-height: 1.1;
  font-size: 0.9rem;
  text-align: center;
}

.pricing-card-price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.price-slot {
  display: inline;
  flex-direction: column;
  gap: 0.16rem;
  text-align: center;
}

.price-slot--yearly {
  display: none;
}

.billing-yearly .price-slot--monthly {
  display: none;
}

.billing-yearly .price-slot--yearly {
  display: inline;
}

.price-amount {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.price-period,
.price-note {
  color: var(--pricing-muted);
}

.pricing-card__support {
  margin: 0;
  color: #d7cff8;
  font-size: 0.9rem;
}

.pricing-features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-features--stacked {
  display: grid;
  gap: 0.72rem;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: #e8e1ff;
  line-height: 1.55;
}

.pricing-feature--yes .feature-icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--pricing-success);
}

/* Une limite, pas un avantage : même gabarit d'icône que la coche, mais un
   trait neutre et un texte en retrait — la ligne se lit comme une précision,
   sans transformer la carte Free en liste de manques. */
.pricing-feature--limited {
  color: #b9b1d4;
}

.pricing-feature--limited .feature-icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: #8d84ad;
}

/* « Le paiement en ligne ouvre très bientôt » : tant que Creem n'a pas ouvert
   les paiements live, les boutons payants ouvrent cette fenêtre plutôt que la
   page d'erreur de Creem (PAYMENTS_COMING_SOON). */
.pricing-soon {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 6, 20, 0.66);
  backdrop-filter: blur(4px);
}

.pricing-soon[hidden] {
  display: none;
}

.pricing-soon__card {
  width: 100%;
  max-width: 440px;
  padding: 1.75rem;
  border: 1px solid rgba(155, 132, 255, 0.3);
  border-radius: 20px;
  background: #15112a;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  color: #d7cff8;
  text-align: center;
}

.pricing-soon__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--pricing-accent-soft);
  color: var(--pricing-accent-strong);
}

.pricing-soon__title {
  margin: 0 0 0.75rem;
  color: #f4efff;
  font-size: 1.25rem;
  font-weight: 700;
}

.pricing-soon__card p {
  margin: 0 0 0.6rem;
  line-height: 1.55;
}

.pricing-soon__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

[data-theme="light"] .pricing-soon {
  background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .pricing-soon__card {
  border-color: rgba(109, 74, 255, 0.24);
  background: #ffffff;
  color: #475569;
}

[data-theme="light"] .pricing-soon__title {
  color: #1e1b4b;
}

[data-theme="light"] .pricing-soon__icon {
  background: rgba(109, 74, 255, 0.1);
  color: #6d4aff;
}

/* Au-delà du plan Enterprise : un échange, pas un paiement. Bandeau sous les
   cartes Enterprise, vers le formulaire de contact (« Partnership inquiries »). */
.pricing-need-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(155, 132, 255, 0.28);
  border-radius: 18px;
  background: var(--pricing-accent-wash);
}

.pricing-need-more__title {
  margin: 0 0 0.25rem;
  color: #f4efff;
  font-size: 1.15rem;
  font-weight: 700;
}

.pricing-need-more__text p {
  margin: 0;
  color: #d7cff8;
  line-height: 1.5;
}

.pricing-need-more__cta {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .pricing-need-more {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* Le support des cartes Enterprise, mis en avant : c'est ce qui distingue
   Team, Business et Enterprise, là où les cartes Solo parlent défilement. */
.pricing-feature--support {
  margin-top: 0.15rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(155, 132, 255, 0.32);
  border-radius: 12px;
  background: var(--pricing-accent-soft);
  color: #f4efff;
  font-weight: 600;
}

.pricing-feature--support .feature-icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--pricing-accent-strong);
}

.pricing-feature__label {
  margin-inline-end: 0.3rem;
  color: var(--pricing-accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pricing-card-cta {
  margin-top: auto;
  text-align: center;
}

.pricing-card-cta .btn {
  min-height: 3rem;
}

.compare-table-wrap {
  overflow-x: auto;
  padding: 0.5rem;
}

.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.compare-table thead th,
.compare-table tbody th,
.compare-table td {
  padding: 1rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.compare-table thead th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--pricing-text);
  font-size: 0.82rem;
  text-align: start;
  vertical-align: top;
}

.compare-table thead th:first-child {
  width: 18rem;
}

.compare-th {
  position: relative;
}

.compare-th--featured {
  background: rgba(155, 132, 255, 0.12);
}

.compare-th__name {
  display: block;
  margin-top: 0.55rem;
  font-size: 1rem;
  font-weight: 700;
}

.compare-th__price {
  display: block;
  margin-top: 0.35rem;
  color: var(--pricing-muted);
  font-size: 0.9rem;
}

.compare-th__price--yearly {
  display: none;
}

.billing-yearly .compare-th__price--monthly {
  display: none;
}

.billing-yearly .compare-th__price--yearly {
  display: block;
}

.compare-th__price-note {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.76rem;
}

.compare-table tbody th {
  color: #ece6ff;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: start;
}

.compare-table td {
  color: var(--pricing-muted);
  font-size: 0.92rem;
}

/* ── Compare table rows — dark mode (default) ── */

/* All data rows: uniform transparent */
.compare-table tbody tr th,
.compare-table tbody tr td {
  background: transparent;
}

/* Category header rows */
.compare-row--category th,
.compare-row--category td {
  padding-top: 1.6rem;
  padding-bottom: 0.55rem;
  border-bottom: none;
  background: rgba(109, 72, 255, 0.22) !important;
}

.compare-row--category + tr th,
.compare-row--category + tr td {
  border-top: none;
}

.compare-category-header {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c4b5fd !important;
}

/* Hover: never on category rows */
.compare-table tbody tr:not(.compare-row--category):hover th,
.compare-table tbody tr:not(.compare-row--category):hover td {
  background: rgba(255, 255, 255, 0.05) !important;
}

.pricing-faq {
  display: grid;
  gap: 0.9rem;
}

.faq-item {
  overflow: hidden;
}

.faq-item[open] {
  border-color: var(--pricing-border-soft);
}

.faq-question {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 1.25rem;
  font-weight: 600;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-answer {
  padding: 0 1.25rem 1.25rem;
}

.faq-answer p {
  margin: 0;
  color: var(--pricing-muted);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .pricing-hero__panel {
    padding: 1.7rem;
  }


}

@media (max-width: 760px) {
  .pricing-page {
    padding-top: 1rem;
  }

  .pricing-hero__title {
    max-width: none;
  }

  .pricing-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .plan-group-toggle,
  .pricing-toggle {
    justify-content: center;
    flex-wrap: wrap;
  }

  .pricing-cards--solo,
  .pricing-cards--enterprise {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-card,
  .pricing-card--featured,
  .pricing-card:hover,
  .pricing-card--featured:hover {
    transform: none;
  }

  .compare-table-wrap {
    padding: 0.35rem;
  }

  .compare-table {
    min-width: 680px;
  }
}

.compare-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.06);
}

.pricing-faq {
  display: grid;
  gap: 0.8rem;
}

.faq-item {
  padding: 1rem 1.1rem;
}

.faq-question {
  cursor: pointer;
  font-weight: 600;
}

.faq-answer {
  color: var(--pricing-muted);
  line-height: 1.7;
}

.faq-answer p {
  margin: 0.85rem 0 0;
}

.pricing-group-panel[hidden] {
  display: none !important;
}

[data-theme="light"] #main-content[data-page="pricing"],
[data-theme="light"] [data-page="pricing"] #main-content {
  background:
    radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.14), transparent 25%),
    radial-gradient(circle at 85% 18%, rgba(249, 115, 22, 0.12), transparent 28%),
    linear-gradient(180deg, #eef4fb 0%, #f5f8fc 40%, #ebf2f9 100%);
}

[data-theme="light"] .pricing-page {
  color: #0f172a;
}

[data-theme="light"] .pricing-note-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .compare-table-wrap,
[data-theme="light"] .faq-item,
[data-theme="light"] .pricing-toggle,
[data-theme="light"] .plan-group-toggle {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .pricing-plan-desc,
[data-theme="light"] .pricing-note-card p,
[data-theme="light"] .pricing-section-heading p,
[data-theme="light"] .pricing-group-panel__header p,
[data-theme="light"] .faq-answer,
[data-theme="light"] .compare-table tbody td,
[data-theme="light"] .toggle-label,
[data-theme="light"] .pricing-card__stats span {
  color: #526275;
}

/* Small uppercase labels — #7a8fa4 read at 3.1:1 on the light background,
   under the 4.5:1 AA floor for text this size. #5b7085 clears it at 4.8:1. */
[data-theme="light"] .pricing-hero__eyebrow,
[data-theme="light"] .pricing-section-heading span,
[data-theme="light"] .pricing-note-card__label,
[data-theme="light"] .pricing-card__group {
  color: #5b7085;
}

[data-theme="light"] .pricing-plan-name,
[data-theme="light"] .price-amount,
[data-theme="light"] .pricing-note-card strong,
[data-theme="light"] .pricing-group-panel__header h2,
[data-theme="light"] .pricing-section-heading h2,
[data-theme="light"] .pricing-card__stats strong,
[data-theme="light"] .faq-question,
[data-theme="light"] .compare-table thead th,
[data-theme="light"] .compare-table tbody th,
[data-theme="light"] .toggle-label.active,
[data-theme="light"] .plan-group-toggle__btn--active {
  color: #0f172a;
}

[data-theme="light"] .pricing-card-badge,
[data-theme="light"] .pricing-meta-pill {
  background: rgba(15, 23, 42, 0.06);
  color: #34506b;
}

[data-theme="light"] .pricing-card__stats {
  background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .pricing-hero__title {
  color: #0f172a;
}

[data-theme="light"] .pricing-group-headline__text {
  color: #0f172a;
}

/* Light theme sits on a near-white gradient (#eef4fb → #ebf2f9): the lavender
   used on the dark background rendered at ~1.3:1 here — technically present,
   practically invisible. Slate-600 reads at ~7:1 against that same background. */
[data-theme="light"] .pricing-hero__sub,
[data-theme="light"] .pricing-hero__lead,
[data-theme="light"] .pricing-hero__microcopy span {
  color: #475569;
}

[data-theme="light"] .pricing-feature {
  color: #1e293b;
}

[data-theme="light"] .pricing-feature--yes .feature-icon {
  color: #0f9f6e;
}

[data-theme="light"] .pricing-feature--limited {
  color: #64748b;
}

[data-theme="light"] .pricing-feature--limited .feature-icon {
  color: #94a3b8;
}

[data-theme="light"] .pricing-need-more {
  border-color: rgba(109, 74, 255, 0.24);
  background: rgba(109, 74, 255, 0.05);
}

[data-theme="light"] .pricing-need-more__title {
  color: #1e1b4b;
}

[data-theme="light"] .pricing-need-more__text p {
  color: #475569;
}

[data-theme="light"] .pricing-feature--support {
  border-color: rgba(109, 74, 255, 0.28);
  background: rgba(109, 74, 255, 0.07);
  color: #1e1b4b;
}

[data-theme="light"] .pricing-feature--support .feature-icon,
[data-theme="light"] .pricing-feature__label {
  color: #6d4aff;
}

[data-theme="light"] .plan-group-toggle__btn {
  color: #64748b;
}

[data-theme="light"] .billing-toggle__btn {
  color: #64748b;
}

[data-theme="light"] .plan-group-toggle,
[data-theme="light"] .billing-group-toggle {
  border-color: rgba(15, 23, 42, 0.1);
  background: linear-gradient(to right, rgba(229, 240, 248, 0.7), rgba(237, 232, 232, 0.7));
}

[data-theme="light"] .controls-ring-wrapper .plan-group-toggle--hero {
  background: linear-gradient(to right, rgba(229, 240, 248, 0.7), rgba(237, 232, 232, 0.7)) !important;
}

[data-theme="light"] .plan-group-toggle__btn--active,
[data-theme="light"] .billing-toggle__btn--active {
  color: #fff;
}

[data-theme="light"] .toggle-badge {
  background: rgba(22, 163, 74, 0.15);
  color: #ffffff;
}

[data-theme="light"] .pricing-page .pricing-card-cta .btn-secondary {
  background: rgba(91, 87, 240, 0.07);
  border-color: rgba(91, 87, 240, 0.3);
  color: #5b57f0;
}

[data-theme="light"] .compare-table th,
[data-theme="light"] .compare-table td {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* ── Compare table rows — light mode ── */
[data-theme="light"] .compare-table tbody tr th,
[data-theme="light"] .compare-table tbody tr td {
  background: transparent;
}

[data-theme="light"] .compare-row--category th,
[data-theme="light"] .compare-row--category td {
  background: rgba(99, 78, 210, 0.1) !important;
}

[data-theme="light"] .compare-category-header {
  color: #4c3bb5 !important;
}

[data-theme="light"] .compare-table tbody tr:not(.compare-row--category):hover th,
[data-theme="light"] .compare-table tbody tr:not(.compare-row--category):hover td {
  background: rgba(15, 23, 42, 0.04) !important;
}

@media (max-width: 1180px) {
  .pricing-cards--4up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-cards--3up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .pricing-hero {
    padding-top: 3.5rem;
  }

  .pricing-controls,
  .pricing-hero__notes {
    grid-template-columns: 1fr;
    display: grid;
  }

  .pricing-cards--4up,
  .pricing-cards--3up {
    grid-template-columns: 1fr;
  }

  .pricing-card__stats {
    grid-template-columns: 1fr;
  }

  .compare-table {
    min-width: 640px;
  }
}
/* ── "What one request buys" / "What it takes to start" ───────────────────────
   The two context blocks, in a `.compare-table-wrap` panel placed AFTER the
   comparison table (pages/pricing.html). Only the panel padding and the rhythm
   between the two blocks live here: the titles reuse `.pricing-section-heading`,
   the panel chrome and its light theme come from `.compare-table-wrap`. */
.pricing-unit-wrap {
  /* .compare-table-wrap ships `overflow-x: auto` + a 0.5rem padding for the
     table; this panel holds prose, so it needs room and no scroll axis. */
  overflow-x: visible;
  margin-top: 2rem;
  padding: 2.25rem 1.75rem 1.75rem;
}

.pricing-unit-wrap .pricing-section-heading {
  margin-bottom: 0;
}

.pricing-unit-wrap .pricing-section-heading + .pricing-section-heading {
  margin-top: 2.25rem;
}

/* The secondary line under the first block: same column, one notch quieter. */
.pricing-section-heading .pricing-unit-note {
  font-size: 0.95rem;
  opacity: 0.85;
}

/* ── Row alignment across cards ───────────────────────────────────────────────
   The price line used to sit at a different height on every card: the card is a
   flex column, so a two-line description pushed the amount up and a three-line
   one pushed it down — and description length changes with the language, so no
   hand-tuned min-height survives 22 locales.

   `subgrid` makes the four blocks (header / price / features / CTA) share the
   same four row tracks across the whole row, so each track is as tall as its
   tallest card and every amount lands on the same line whatever the copy says.

   Declared at the very end because `.pricing-card { display: flex }` sits
   further down than the grid definitions and @supports adds no specificity —
   written next to `.pricing-cards`, the switch to grid was simply overridden.
   The @supports guard keeps the original flex layout where subgrid is missing. */
@supports (grid-template-rows: subgrid) {
  .pricing-cards {
    /* header · price · features (absorbs the slack) · CTA */
    grid-template-rows: auto auto 1fr auto;
  }

  .pricing-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }

  /* The header now fills a row sized by the longest description, so its own
     content must stay pinned to the top instead of spreading. */
  .pricing-card__header {
    align-content: start;
  }

  /* The features row is the one that absorbs the height difference between
     cards. Without this a card with three bullets spreads them over the space
     a four-bullet card needs, so the ticks stop lining up sideways. */
  .pricing-features--stacked {
    align-content: start;
  }
}

/* Who sells — shown under the plans when payment is live (not during the beta). */
.pricing-mor-note {
  max-width: 760px;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--pricing-muted);
}
.pricing-mor-note a {
  color: inherit;
  text-decoration: underline;
}