/* Page styles for templates/pricing.html — extracted 2026-07-02.
   Page-specific rules only; shared patterns belong in styles.css. */

/* ── Plan intent banner ───────────────────────────────────────────────────
   Carries a plan choice across the sign-up round trip, and explains which
   limit a 402 hit. Filled by static/billing.js; `hidden` until it has
   something to say.

   `display: flex` rather than block because [hidden] loses to an author
   `display:` rule — the repo has shipped that bug into production twice. The
   :not([hidden]) guard has to live in the same rule that sets display, or the
   banner is permanently visible and empty on every cold load. */
.plan-intent:not([hidden]) {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--accent);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--accent-light);
}
/* Amber is a literal here by the same convention as the batch status dots:
   there is no --warning token, and a translucent fill tracks both themes
   without one. --warn-text is a real token and is contrast-tuned. */
.plan-intent.is-warn:not([hidden]) {
  border-color: var(--accent-warm);
  background: rgba(217, 119, 6, 0.1);
}
.plan-intent.is-warn .plan-intent-text { color: var(--warn-text); }
.plan-intent-text { margin: 0; font-size: var(--text-md); line-height: 1.5; }

/* The plan they picked before leaving for sign-up. Coming back to an unchanged
   grid of four is what makes the round trip feel lost. Doubles the featured
   ring rather than replacing it, so "chosen" reads as louder than "recommended"
   instead of competing with it. */
.pricing-card.is-chosen {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light), 0 0 0 4px var(--accent);
}

.pricing-fallback { display: none; }
.pricing-fallback.visible { display: block; }
.pricing-grid {
  display: grid;
  /* 220px, not 260px: the content column is ~950px once the sidebar is out, and
     4 × 260 + 3 × gap overflows that, so auto-fit fell back to 3 columns and
     orphaned the fourth plan alone on row 2. 4 × 220 + 3 × 20 = 940 fits. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
}
/* 2026-08 rework card: flatter frame, larger radius, price in ink (the old
   var(--accent) price fails 4.5:1 as text on --surface in the new dark
   palette), featured plan ringed with --accent-border + --accent-light. */
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--surface);
}
/* Reserves the absolutely-positioned tag's line so a longer translation cannot
   land on .pricing-tier's baseline — mirrors .mk-plan-featured. */
.pricing-card.featured {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-light);
  padding-top: calc(var(--space-6) + 26px);
}
.pricing-plan-tag {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  margin: 0;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-light);
  padding: 4px 9px;
  border-radius: 6px;
}
.pricing-tier { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); margin: 0 0 var(--space-2); }
.pricing-name { font-size: var(--text-lg); font-weight: 600; margin: 0 0 var(--space-2); }
.pricing-price { font-size: var(--text-display); font-weight: 700; letter-spacing: -0.035em; color: var(--ink); margin: 0 0 var(--space-1); }
.pricing-price span { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }
.pricing-desc { font-size: var(--text-md); color: var(--ink-soft); margin: 0 0 var(--space-4); }
.pricing-features { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.pricing-features li { font-size: var(--text-md); color: var(--ink-soft); padding: 5px 0; display: flex; gap: var(--space-2); align-items: flex-start; }
.pricing-features li::before { content: "✓"; color: var(--success-text); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.pricing-cta {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 11px var(--space-4);
  background: var(--accent-cta);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.pricing-cta:hover { background: var(--accent-cta-hover); }
.pricing-cta.secondary {
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  color: var(--ink);
}
.pricing-cta.secondary:hover { background: var(--surface-soft-hover); }
.pricing-trial-note {
  text-align: center;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent-light);
  border-radius: 10px;
  padding: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
}
.pricing-coins-note {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
/* Differentiators section */
.pricing-differentiators {
  max-width: 720px;
  margin: var(--space-8) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}
/* Same shape as the differentiators block above, with a divider that can
   actually be seen: --border-light resolves to something invisible against the
   surface in BOTH themes, so the rule above draws no line at all. Using
   --border here rather than "fixing" the neighbour, which is a separate change
   with its own before/after to check. */
.pricing-billing-detail {
  max-width: 720px;
  margin: var(--space-8) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.pricing-diff-heading {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-5);
  text-align: center;
}
.pricing-diff-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pricing-diff-list li {
  font-size: var(--text-md);
  line-height: 1.6;
  padding-left: var(--space-5);
  position: relative;
}
.pricing-diff-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.billing-env-notice {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--surface-soft);
  margin-bottom: var(--space-4);
}

.billing-consent-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.billing-consent-dialog::backdrop {
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(2px);
}
.billing-consent-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
}
.billing-consent-card h2,
.billing-consent-card p { margin: 0; }
.billing-consent-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  line-height: 1.5;
  cursor: pointer;
}
.billing-consent-check input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.billing-consent-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

@media (max-width: 560px) {
  .billing-consent-dialog {
    width: calc(100vw - 16px);
    margin-bottom: 8px;
  }
  .billing-consent-actions {
    flex-direction: column-reverse;
  }
  .billing-consent-actions button { width: 100%; }
}