/*
 * pricing.css — extracted from inline <style> in pricing.html on 2026-05-31
 * Tier 2 / P2 of docs/plans/HIGH_PERFORMANCE_CLEANUP_PROGRAM.md.
 *
 * Maintain this file directly; it is no longer regenerated from HTML.
 *
 * 2026-07-07: restyled onto the v5 public quality bar (matches about/press).
 * All colors resolve through the ll-public.css --ll-* → v5 bridge, so light/dark
 * follow the [data-theme] switch. The short [data-theme="light"] block at the end
 * only re-points the handful of bespoke rgba shadows that need a lighter value on
 * the light canvas (mirrors about.css).
 */

/* ── hero ───────────────────────────────────────────────────── */
.page-hero__kicker { font-weight: 600; font-size: 0.7rem; letter-spacing: 0.15em; margin-bottom: 0.3rem; }
.page-hero h1 { font-size: clamp(1.5rem, 3.2vw, 1.95rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.22; margin: 0; max-width: 640px; }
.page-hero__sub { margin-top: 0.7rem; max-width: 600px; font-size: 0.92rem; line-height: 1.6; }

/* ── tier cards ─────────────────────────────────────────────── */
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1rem;
  margin: 1.75rem 0 2.5rem;
}
@media (max-width: 860px) { .pricing-tiers { grid-template-columns: 1fr; } }

.pricing-tier {
  position: relative;
  border: 1px solid var(--ll-border-subtle);
  border-radius: var(--ll-radius-md);
  background: var(--ll-bg-soft);
  padding: 1.5rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.pricing-tier:hover { transform: translateY(-2px); border-color: rgba(var(--ll-accent-rgb), 0.35); }

/* Pro — the featured plan: accent ring + a subtle gradient lift */
.pricing-tier--pro {
  border-color: rgba(var(--ll-accent-rgb), 0.45);
  background:
    linear-gradient(180deg, rgba(var(--ll-accent-rgb), 0.07), rgba(var(--ll-accent-rgb), 0.015)),
    var(--ll-bg-soft);
  box-shadow: 0 0 0 1px rgba(var(--ll-accent-rgb), 0.2), 0 18px 44px -28px rgba(var(--ll-accent-rgb), 0.55);
}
.pricing-tier--pro:hover { border-color: rgba(var(--ll-accent-rgb), 0.6); }

/* Max — in development: quieter, dashed, non-buyable */
.pricing-tier--max { border-style: dashed; background: transparent; }
.pricing-tier--max:hover { transform: none; border-color: var(--ll-border-subtle); }
.pricing-tier--max .pricing-tier__amount { font-size: 1.5rem; color: var(--ll-text-muted); }
.pricing-tier--max .pricing-tier__list li { color: var(--ll-text-muted); }
.pricing-tier__soon {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: auto; padding: 0.55rem 0.9rem; align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ll-text-muted);
  border: 1px dashed var(--ll-border-subtle); border-radius: var(--ll-radius-pill, 999px);
}

.pricing-tier__name {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ll-text-muted); margin: 0 0 0.7rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.pricing-tier__badge {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.14rem 0.45rem; border-radius: var(--ll-radius-pill, 999px);
  background: rgba(var(--ll-accent-rgb), 0.14); color: var(--ll-accent);
  border: 1px solid rgba(var(--ll-accent-rgb), 0.28);
}
.pricing-tier--max .pricing-tier__badge {
  background: rgba(var(--ll-text-muted-rgb, 148, 163, 184), 0.12);
  color: var(--ll-text-muted);
  border-color: var(--ll-border-subtle);
}
.pricing-tier__price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 0 0.25rem; }
.pricing-tier__amount { font-size: 2.15rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ll-text); line-height: 1; }
.pricing-tier__period { font-size: 0.85rem; color: var(--ll-text-muted); }
.pricing-tier__note { font-size: 0.8rem; color: var(--ll-text-muted); margin: 0.35rem 0 1.1rem; line-height: 1.5; min-height: 1.1rem; }
.pricing-tier__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.6rem; }
.pricing-tier__list li { display: flex; gap: 0.55rem; font-size: 0.85rem; line-height: 1.5; color: var(--ll-text); align-items: baseline; }
.pricing-tier__check { color: var(--ll-accent); flex-shrink: 0; font-weight: 700; }
.pricing-tier--max .pricing-tier__check { color: var(--ll-text-muted); }
.pricing-tier__coming {
  display: inline-block;
  align-self: center;
  flex: 0 0 auto;
  margin-left: 0.35rem;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.08rem 0.4rem; border-radius: var(--ll-radius-pill, 999px);
  background: rgba(var(--ll-text-muted-rgb, 148, 163, 184), 0.14);
  color: var(--ll-text-muted);
  border: 1px solid var(--ll-border-subtle);
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.4;
}
.pricing-tier__cta { margin-top: auto; }
.pricing-tier__cta .btn { width: 100%; justify-content: center; }

/* ── comparison table ───────────────────────────────────────── */
.pricing-compare { margin: 0 0 2.5rem; }
.pricing-compare h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.45rem; }
.pricing-compare__intro { font-size: 0.85rem; color: var(--ll-text-muted); margin: 0 0 1.25rem; max-width: 600px; line-height: 1.6; }
.pricing-table-wrap {
  border: 1px solid var(--ll-border-subtle);
  border-radius: var(--ll-radius-md);
  background: var(--ll-bg-soft);
  overflow-x: auto;
  margin: 0 0 1rem;
}
.pricing-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; min-width: 420px; }
.pricing-table caption {
  text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ll-accent); padding: 0.95rem 1rem 0.55rem;
}
.pricing-table th, .pricing-table td {
  text-align: left; padding: 0.6rem 1rem; border-bottom: 1px solid var(--ll-border-subtle);
}
.pricing-table tbody tr:last-child td { border-bottom: none; }
.pricing-table tbody tr:hover td { background: rgba(var(--ll-accent-rgb), 0.035); }
.pricing-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ll-text-muted); font-weight: 700; }
.pricing-table td:not(:first-child), .pricing-table th:not(:first-child) { text-align: center; width: 6.5rem; }
.pricing-table .yes { color: var(--ll-accent); font-weight: 700; }
.pricing-table .no { color: var(--ll-text-muted); }
.pricing-table .lim { color: var(--ll-text-muted); font-size: 0.78rem; }
.pricing-compare__max-note { font-size: 0.85rem; color: var(--ll-text-muted); line-height: 1.6; margin: 1.25rem 0 0; max-width: 600px; }
.pricing-compare__max-note strong { color: var(--ll-text); }

/* ── faq ────────────────────────────────────────────────────── */
.pricing-faq { margin: 0 0 2.5rem; }
.pricing-faq h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 1rem; }
.pricing-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 720px) { .pricing-faq__grid { grid-template-columns: 1fr; } }
.pricing-faq__item {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--ll-border-subtle);
  border-radius: var(--ll-radius-md);
  background: var(--ll-bg-soft);
}
.pricing-faq__q { font-size: 0.9rem; font-weight: 600; color: var(--ll-text); margin: 0 0 0.4rem; letter-spacing: -0.01em; }
.pricing-faq__a { font-size: 0.85rem; color: var(--ll-text-muted); line-height: 1.6; margin: 0; }
.pricing-faq__a a { color: var(--ll-accent); text-decoration: none; }
.pricing-faq__a a:hover { text-decoration: underline; }

/* ── cta ────────────────────────────────────────────────────── */
.pricing-cta {
  border: 1px solid var(--ll-border-subtle); border-radius: var(--ll-radius-md);
  background: linear-gradient(180deg, rgba(var(--ll-accent-rgb), 0.08), rgba(var(--ll-accent-rgb), 0.02));
  padding: 2rem 1.6rem; text-align: center;
}
.pricing-cta h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 1rem; }
.pricing-cta__row { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.pricing-cta__fine { margin: 1.1rem 0 0; font-size: 0.78rem; color: var(--ll-text-muted); }

/* ── light-mode shadow fixups (bridge handles color/token switching) ── */
[data-theme="light"] .pricing-tier--pro {
  box-shadow: 0 0 0 1px rgba(var(--ll-accent-rgb), 0.22), 0 14px 34px -26px rgba(var(--ll-accent-rgb), 0.5);
}
[data-theme="light"] .pricing-tier--max { background: transparent; }