/* Pricing page. Layout, plan cards and the upgrade tiles only: every primitive comes from the UI kit (components/ui.css). */
.pr {
  --pr-cta-radius: var(--ui-radius-field);
  --pr-pro-shadow: 0 30px 80px rgba(217, 70, 239, 0.14);
  --pr-tile-radius: 18px;
}

[data-theme="light"] .pr {
  --pr-pro-shadow: 0 24px 60px rgba(217, 70, 239, 0.18);
}

/* The plans line up with the header dock rather than the wider page container */
.pr .ui-container { max-width: calc(1120px + 2 * var(--ui-gutter)); }

.pr-glow-hero { --ui-glow-w: 980px; --ui-glow-h: 720px; }
.pr .ui-glow-right { --ui-glow-y: 620px; }

/* ---------- Hero ---------- */
.pr-top { padding-bottom: 0; }
.pr-hero .ui-hero-sub { max-width: 680px; }

.pr-hero-note {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ui-text-faint);
}

.pr-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  max-width: 560px;
  margin: 2rem auto 0;
  padding: 0.75rem 1rem;
  border-radius: var(--ui-radius-field);
  background: var(--ui-fill);
  border: 1px solid var(--ui-line-mid);
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.pr-notice > svg { flex-shrink: 0; }

/* ---------- Plans ---------- */
.pr-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: stretch;
  padding-top: 4rem;
}

.pr-plan {
  --ui-card-pad: 2.125rem 2rem;
  display: flex;
  flex-direction: column;
  min-height: 640px;
}

.pr-plan-pro { box-shadow: var(--pr-pro-shadow); }

.pr-plan-head {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.pr-plan-head-pro {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.pr-plan-name { color: var(--text-primary); }

/* The gradient badge reads as a label here, not as a status marker */
.pr-popular {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.pr-price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: 0;
}

.pr-plan-head-pro + .pr-price { margin-top: 0.875rem; }

.pr-price-amount {
  font-family: var(--ui-display);
  font-size: 3.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.pr-price-per {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ui-text-faint);
}

.pr-plan-tagline,
.pr-plan-summary {
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.pr-plan-rule { margin: 1.625rem 0; }

.pr-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pr-feat {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ui-text-soft);
}

.pr-feat > svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ui-text-faint);
}

.pr-features-pro .pr-feat > svg { color: var(--ui-accent-text); }

.pr-feat-strong {
  color: var(--text-primary);
  font-weight: 600;
}

.pr-plan-cta {
  margin-top: auto;
  padding-top: 1.75rem;
}

.pr-cta-btn { border-radius: var(--pr-cta-radius); }

.pr-plan-note {
  margin: 0.875rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ui-text-faint);
}

.pr-current {
  display: block;
  padding-bottom: 0.75rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ui-text-faint);
}

.pr-current-pro { color: var(--ui-accent-text); }

/* ---------- What changes when you upgrade ---------- */
.pr-unlock { padding-top: 5.5rem; }

.pr-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.pr-head-row .ui-section-head { margin-bottom: 0; }
.pr-head .ui-eyebrow { color: var(--ui-text-faint); }
.pr-head .ui-h2 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); }

.pr-head-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ui-text-faint);
}

.pr-jumps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.pr-jump {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-height: 152px;
  padding: 1.25rem;
  border-radius: var(--pr-tile-radius);
  background: var(--ui-surface-card);
  border: 1px solid var(--ui-line);
}

/* Desktop: label, old value, arrow and new value stack as one column */
.pr-jump-values { display: contents; }

.pr-jump-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-text-faint);
}

.pr-jump-from {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--ui-text-faint);
}

.pr-jump-arrow {
  display: inline-flex;
  color: var(--ui-text-muted);
}

.pr-jump-to {
  font-family: var(--ui-display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ui-accent-text);
}

/* ---------- FAQ ---------- */
.pr-faq {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 3.5rem;
  padding-top: 5.5rem;
}

.pr-faq .ui-section-head { margin-bottom: 0; }

.pr-faq-lead {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.pr-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pr-faq-item {
  --ui-card-pad: 1.375rem 1.5rem;
  border-radius: var(--pr-tile-radius);
}

.pr-faq-q {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.pr-faq-a {
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- Contact band ---------- */
.pr-contact { padding-top: 4.5rem; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .pr-plan { min-height: 0; }
  .pr-jumps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pr-faq { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
  .pr-hero {
    align-items: flex-start;
    text-align: left;
  }

  .pr-hero .ui-h1 { --ui-h1-size: clamp(2rem, 10.5vw, 2.5rem); }
  .pr-hero-note { text-align: left; }
  .pr-notice { margin-top: 1.5rem; }

  .pr-plans {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding-top: 1.75rem;
  }

  .pr-plan {
    --ui-card-pad: 1.5rem 1.25rem;
    border-radius: 22px;
  }

  .pr-plan-pro { order: 1; }

  .pr-plan-free {
    order: 2;
    --ui-card-pad: 1.25rem;
    border-radius: 20px;
  }

  .pr-plan-free .pr-plan-head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .pr-plan-free .pr-plan-name { font-size: 1.125rem; }

  .pr-plan-free .pr-price-amount {
    font-size: 1.625rem;
    font-weight: 700;
  }

  .pr-plan-free .pr-price-per { font-size: 0.875rem; }
  .pr-plan-free .pr-plan-tagline { margin-top: 0.5rem; }
  .pr-plan-free .pr-plan-cta { padding-top: 1rem; }

  .pr-plan-pro .pr-price-amount { font-size: 2.75rem; }
  .pr-plan-pro .pr-plan-rule { margin: 1.125rem 0; }
  .pr-plan-pro .pr-features { gap: 0.8125rem; }
  .pr-plan-pro .pr-plan-cta { padding-top: 1.375rem; }

  .pr-unlock { padding-top: 2.75rem; }
  .pr-head-row { margin-bottom: 1.125rem; }

  .pr-jumps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .pr-jump {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.5rem 1rem;
    border-radius: 14px;
  }

  .pr-jump-values {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .pr-jump-label {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
  }

  .pr-jump-from { font-size: 0.875rem; }
  .pr-jump-to { font-size: 1.0625rem; }

  .pr-faq { padding-top: 2.75rem; }
  .pr-faq-item { --ui-card-pad: 1.125rem; border-radius: 16px; }
  .pr-faq-q { font-size: 1rem; }
  .pr-faq-a { margin-top: 0.5rem; line-height: 1.55; }

  .pr-contact { padding-top: 2.5rem; }
}

/* Long headlines (fr, es, ht) keep the artboard's two-line hero */
@media (min-width: 769px) {
  html:not(:lang(en)) .pr-hero { --ui-h1-size: clamp(2.5rem, 4vw, 3.75rem); }
}