/* Pricing — shares variables with app.css. The plan grid is four
   columns on desktop, stacks on mobile. Annual prices swap in via
   a vanilla <input> radio toggle (no JS needed for the visual).  */

.pricing-hero {
  padding: 72px 0 40px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.pricing-hero h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 18px;
}
.pricing-hero h1 em { font-style: italic; color: var(--gold-deep); }
.pricing-hero p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--ink-2);
  font-size: 17px;
}

/* Segmented control — same pattern Stripe / Linear / Vercel use on
   their pricing pages. Rounded pill frame, active option takes the
   full dark fill, inactive sits muted on the paper background. The
   radios themselves live outside this container (see pricing.html)
   so they can drive both the active-state highlight here and the
   price-label swap further down the page, both via `:checked ~`. */
.period-toggle {
  display: inline-flex;
  align-items: stretch;
  margin: 36px auto 0;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  gap: 2px;
}
.period-input { display: none; }
.period-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
  user-select: none;
}
.period-option:hover { color: var(--ink); }

/* Active state: the radio that's :checked above is a sibling of
   .period-toggle; walk into the toggle and find the label whose
   `for=` matches the checked id. */
#period-monthly:checked ~ .period-toggle [for="period-monthly"],
#period-annual:checked ~ .period-toggle [for="period-annual"] {
  background: var(--ink);
  color: var(--paper);
}
#period-monthly:checked ~ .period-toggle [for="period-monthly"]:hover,
#period-annual:checked ~ .period-toggle [for="period-annual"]:hover {
  color: var(--paper);
}

/* The "2 months free" badge inside the annual label. Muted on an
   inactive label, inherits the paper color when the annual pill is
   the active one. */
.period-save {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.7;
}
#period-annual:checked ~ .period-toggle [for="period-annual"] .period-save {
  opacity: 1;
}

/* Keyboard focus: the native focus ring lives on the <input>, which
   is visually hidden. Mirror it onto the corresponding label so
   keyboard users get the usual outline they expect. */
#period-monthly:focus-visible ~ .period-toggle [for="period-monthly"],
#period-annual:focus-visible ~ .period-toggle [for="period-annual"] {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 48px 0 64px;
}
.plan {
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}
.plan.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.plan .tier {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.plan.featured .tier { color: var(--eu-yellow); }
.plan h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 4px;
}
.plan .price {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
  margin: 14px 0 2px;
  letter-spacing: -0.01em;
}
.plan .price small {
  font-size: 14px;
  color: var(--ink-3);
  margin-left: 6px;
}
.plan.featured .price small { color: rgba(244, 241, 234, 0.6); }
.plan .byline {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 22px;
  min-height: 36px;
}
.plan.featured .byline { color: rgba(244, 241, 234, 0.75); }
.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 14px;
}
.plan li {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.plan.featured li { border-bottom-color: rgba(244, 241, 234, 0.14); }
.plan .cta {
  margin-top: auto;
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-size: 14px;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.plan.featured .cta { background: var(--gold); border-color: var(--gold); }
.plan .cta:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

/* Auth-aware CTA states. Signed-in viewers see badge-style treatments
   instead of links on their current plan, and a portal-form button
   for downgrades. */
.plan .cta-current,
.plan .cta-disabled {
  cursor: default;
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border-color: var(--rule-strong) !important;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 16px;
}
.plan.featured .cta-current,
.plan.featured .cta-disabled {
  background: var(--paper) !important;
}
.plan form { margin-top: auto; }
.plan form .cta-portal {
  appearance: none;
  font-family: var(--sans);
  display: block;
  width: 100%;
  cursor: pointer;
}

/* Price swap via :checked — no JS. The "annual" radio is the default
   unchecked state; checking it hides monthly figures and reveals the
   annual variants underneath. */
.price-annual, .byline-annual { display: none; }
#period-annual:checked ~ .plan-grid .price-monthly,
#period-annual:checked ~ .plan-grid .byline-monthly { display: none; }
#period-annual:checked ~ .plan-grid .price-annual,
#period-annual:checked ~ .plan-grid .byline-annual { display: block; }

@media (max-width: 1100px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .plan-grid { grid-template-columns: 1fr; }
}