/* ==========================================================================
   sneck /pricing - the public comparison page (plans lane, v2 makeover).
   --------------------------------------------------------------------------
   The landing page's twin: same chrome-less storefront pattern (own nav +
   footer, self-linked from PricingLive, zero JS), same poster doctrine -
   THE PRICING PAGE IS BRAND, DARK BY DESIGN. The block re-pins every
   color token it consumes back to the dark values (mirroring landing.css)
   so the storefront reads the same for every visitor regardless of the
   app's localStorage theme.

   v2 depth ladder (makeover contract §3): the page bed is bg-0, the FAQ
   and the callout ride panels (bg-1, --r-md), and every PLAN CARD is a
   raised card on the bed - bg-2 + --shadow-1 + the stronger outline
   (rule 1: a card on the bed is always bg-2 + shadow-1). The recommended
   tier carries the accent outline; nothing else shouts.

   Spacing, radii, motion and type reference the v2 tokens with contract
   fallbacks (--sp-*, --r-*, --dur-*, --ease, --size-*), so this sheet is
   correct standalone and defers to :root once M1 lands them.
   ========================================================================== */

/* The poster pins dark on itself - and the body behind it must not leak
   light around the edges (the landing's E2E lesson): pin the bed there
   too while it hosts the page. */
body:has(.pricing) {
  --bg-0: #0b0d10;
  background: var(--bg-0);
}

.pricing {
  /* -- pinned dark tokens (mirrors :root in app.css) ------------------------- */
  --bg-0: #0b0d10;
  --bg-1: #101318;
  --bg-2: #151a21;
  --bg-3: #1c222c;
  --border: #232936;
  --border-strong: #313a4a;
  --text: #e9edf3;
  --text-2: #b9c2ce;
  --muted: #8791a1;
  --faint: #5e6877;
  --accent: #3fdd9a;
  --accent-bright: #66e9b3;
  --accent-dim: #2a6b52;
  --accent-ink: #06231a;
  --accent-soft: rgba(63, 221, 154, 0.09);
  --lift: white;
  --focus-halo: rgba(63, 221, 154, 0.18);
  --hero-glow: rgba(63, 221, 154, 0.045);
  --hero-glow-strong: rgba(63, 221, 154, 0.07);
  /* The v2 elevation ladder (matches :root in app.css - the pin exists
  so the light theme can't re-point the poster) */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.28);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.34);
  color-scheme: dark;
  /* -- /pinned tokens --------------------------------------------------------- */

  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(1200px 540px at 50% -140px, var(--hero-glow-strong), transparent 65%),
    var(--bg-0);
}

/* -- nav (the landing's, pricing-prefixed) -------------------------------------- */

.pricing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 22px 0;
}

.pricing-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  text-decoration: none;
  color: var(--text);
}

/* The brand-mark recipe from app.css, storefront-sized */
.pricing-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-sm, 6px);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.pricing-word {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.pricing-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
}

/* Buttons are the app.css .btn recipes, storefront-sized (the landing's
   treatment - one notch taller than in-app chrome). */
.pricing .btn {
  height: 36px;
  padding: 0 16px;
  font-size: var(--size-base, 13.5px);
  border-radius: var(--r-sm, 6px);
}

/* -- hero (the type scale: one display line, one --text-md sub) ------------------ */

.pricing-main {
  flex: 1;
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.pricing-hero {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 72px) 0 var(--sp-7, 32px);
}

.pricing-headline {
  margin: 0 0 var(--sp-4, 16px);
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.pricing-sub {
  margin: 0 auto;
  max-width: 560px;
  font-size: var(--size-md, 15px);
  line-height: 1.6;
  color: var(--text-2);
}

/* -- the plan cards (raised: bg-2 + shadow-1 on the bed) ------------------------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3, 12px);
  align-items: stretch;
  padding-bottom: var(--sp-7, 32px);
}

.pricing-card {
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md, 10px);
  padding: var(--sp-4, 16px) var(--sp-4, 16px) var(--sp-5, 20px);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  transition: border-color var(--dur-fast, 120ms) var(--ease, ease),
    transform var(--dur-base, 200ms) var(--ease, ease),
    box-shadow var(--dur-base, 200ms) var(--ease, ease);
}

.pricing-card:hover {
  border-color: var(--muted);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.pricing-card.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-1);
}

/* The recommended tier: the accent outline IS the affordance (rule 4 -
   accent marks the primary; a whisper of the soft wash, never a fill). */
.pricing-card.is-recommended {
  border-color: var(--accent-dim);
  background:
    radial-gradient(340px 120px at 50% -40px, var(--accent-soft), transparent 70%),
    var(--bg-2);
  box-shadow: 0 0 0 1px var(--accent-dim), var(--shadow-1);
}

.pricing-card.is-recommended:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-2);
}

.pricing-tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2, 8px);
}

.pricing-tier-name {
  font-family: var(--font-display);
  font-size: var(--size-base, 13.5px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pricing-badge {
  font-size: var(--size-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-dim);
  border-radius: var(--r-pill, 999px);
  padding: 1px var(--sp-2, 8px);
  white-space: nowrap;
}

.pricing-price {
  font-family: var(--font-display);
  font-size: var(--size-xl, 22px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pricing-price-note {
  margin: var(--sp-1, 4px) 0 0;
  color: var(--muted);
  font-size: var(--size-sm, 12.5px);
  line-height: 1.5;
}

/* The plan pitch reuses .pricing-sub's class inside the card - restate
   the reading there: left-aligned, one size down, no auto margins. */
.pricing-card .pricing-sub {
  margin: 0;
  max-width: none;
  text-align: left;
  font-size: var(--size-sm, 12.5px);
  color: var(--muted);
  line-height: 1.55;
}

.pricing-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 4px);
  font-size: var(--size-sm, 12.5px);
  line-height: 1.5;
  color: var(--text-2);
}

.pricing-features li {
  display: flex;
  gap: var(--sp-2, 8px);
  align-items: baseline;
}

.pricing-features li > span {
  color: var(--accent);
  flex-shrink: 0;
}

.pricing-features .no {
  color: var(--muted);
}

.pricing-features .no > span {
  color: var(--faint);
}

.pricing-cta {
  margin-top: auto;
  padding-top: var(--sp-3, 12px);
}

.pricing-cta .btn {
  width: 100%;
}

/* -- the always-free callout (a quiet panel, not a shout) ------------------------- */

.pricing-callout {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md, 10px);
  background: var(--bg-1);
  padding: var(--sp-4, 16px) var(--sp-5, 20px);
  margin-bottom: var(--sp-8, 40px);
  text-align: center;
  color: var(--text-2);
  font-size: var(--size-sm, 12.5px);
  line-height: 1.6;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.pricing-callout strong {
  color: var(--text);
}

.pricing-callout em {
  color: var(--text);
  font-style: italic;
}

/* -- the FAQ (quieter: bg-1 panels, small caps heads, --text-sm answers) ---------- */

.pricing-section-head {
  margin: 0 0 var(--sp-4, 16px);
  font-size: var(--size-lg, 18px);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: center;
}

.pricing-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3, 12px);
  padding-bottom: var(--sp-8, 40px);
}

.pricing-faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  padding: var(--sp-4, 16px);
  background: var(--bg-1);
}

.pricing-faq-item h3 {
  margin: 0 0 var(--sp-2, 8px);
  font-size: var(--size-base, 13.5px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.pricing-faq-item p {
  margin: 0;
  color: var(--muted);
  font-size: var(--size-sm, 12.5px);
  line-height: 1.6;
}

/* -- footer (the landing's) -------------------------------------------------------- */

.pricing-footer {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: var(--sp-5, 20px) 0 var(--sp-7, 32px);
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
  font-size: var(--size-sm, 12.5px);
}

.pricing-footer p {
  margin: var(--sp-1, 4px) 0;
}

.pricing-footer p + p {
  color: var(--faint);
  font-size: var(--size-xs, 11px);
  font-style: italic;
}

/* -- motion + focus (§3 rules 2-3: one ring, two durations, one curve) ------------- */

.pricing .btn:focus-visible,
.pricing-brand:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent));
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .pricing .btn {
    transition-duration: 0.01ms;
  }
}

/* -- responsive ------------------------------------------------------------------------ */

@media (max-width: 640px) {
  .pricing-nav,
  .pricing-main,
  .pricing-footer {
    width: calc(100% - 32px);
  }

  .pricing-nav {
    padding: 16px 0;
  }

  .pricing-hero {
    padding-top: 40px;
  }

  .pricing-headline {
    font-size: clamp(26px, 8vw, 34px);
  }

  .pricing-sub {
    font-size: var(--size-base, 13.5px);
  }
}