/* ============================================================================
   PRICING PAGE — extends the shared landing.css component system.
   The hero, value props, FAQ and CTA reuse landing.css (lp-* components) so the
   page stays consistent with the homepage, about page and dashboard shell in
   both themes. Page-specific pieces live here: the billing toggle, the pricing
   cards (pc-plan — a dedicated component so the homepage's lp-plan is untouched)
   and a slim liquid-glass comparison panel. Everything references the shared
   monochrome tokens — one ink accent that inverts automatically per theme.
   ========================================================================= */

/* ════════════════════════════════════════════════════════════════════════
   HERO ↔ PLANS RHYTHM — the billing switcher lives at the bottom of the hero
   and controls the plan cards directly below it, so they need to read as one
   connected group. landing.css spaces both with the full section rhythm
   (var(--lp-section-y) ≈ 64–112px on each side); that opens too large a gap
   here. Tighten just the hero's lower padding and the plans' upper padding so
   the control sits close to what it drives. Scoped to this file, which only
   loads on the pricing page, so the homepage rhythm is untouched.
   ════════════════════════════════════════════════════════════════════════ */
.lp-hero {
  padding-bottom: clamp(var(--space-6), 3vw, var(--space-7));
}

#plans.lp-section {
  padding-top: clamp(var(--space-7), 4vw, var(--space-8));
}

/* ════════════════════════════════════════════════════════════════════════
   BILLING TOGGLE — professional segmented control with sliding indicator
   ════════════════════════════════════════════════════════════════════════ */
.pc-billing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.pc-billing__opts {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface);
  box-shadow: 
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.02);
}

.pc-billing__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-full, 999px);
  background: transparent;
  color: var(--color-text-soft);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-spring);
  -webkit-user-select: none;
  user-select: none;
}

.pc-billing__opt:hover:not(.is-active) {
  color: var(--color-text);
}

.pc-billing__opt:active {
  transform: scale(0.98);
}

.pc-billing__opt:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.pc-billing__opt.is-active {
  color: var(--color-on-accent);
  background: var(--color-accent);
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08);
}

/* "2 months free" badge inside Annual button */
.pc-billing__save {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  margin-left: var(--space-1);
  border-radius: var(--radius-full, 999px);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pc-billing__opt.is-active .pc-billing__save {
  background: color-mix(in srgb, var(--color-on-accent) 20%, transparent);
  color: var(--color-on-accent);
}

/* Annual opportunity caption — revealed only when annual is selected */
.pc-billing__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  color: var(--color-success);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  animation: pc-hint-in var(--duration-normal) var(--ease-spring);
}

.pc-billing__hint svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pc-billing__hint[hidden] {
  display: none;
}

@keyframes pc-hint-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dark mode refinements */
:root[data-theme="dark"] .pc-billing__opts {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .pc-billing__opt:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .pc-billing__opt.is-active {
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ════════════════════════════════════════════════════════════════════════
   PRICING CARDS (pc-plan) — migrated to components/pricing-card.css so the
   pricing page and the homepage pricing teaser share one card component.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   COMPARISON — slim liquid-glass panel (functional frosted surface)
   ════════════════════════════════════════════════════════════════════════ */
.pc-compare {
  margin-top: var(--lp-block-gap, clamp(32px, 5vw, 56px));
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 62%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    var(--shadow-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:root[data-theme="dark"] .pc-compare {
  border-color: rgba(255, 255, 255, 0.12);
  background: color-mix(in srgb, var(--color-surface) 46%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    var(--shadow-lg);
}

.pc-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.pc-table thead th {
  padding: var(--space-5);
  text-align: center;
  vertical-align: bottom;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

.pc-table thead th:first-child {
  text-align: left;
}

.pc-col__eyebrow {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}

.pc-col__name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.pc-col__price {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-feature-settings: "tnum";
  color: var(--color-muted);
}

/* Featured (Pro) column — faint ink wash, no gradient */
.pc-col--featured {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.pc-table tbody tr {
  border-top: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.pc-table tbody tr:hover {
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}

.pc-table td {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  vertical-align: middle;
  color: var(--color-text-soft);
}

.pc-cell--feature {
  text-align: left;
  font-weight: 500;
  color: var(--color-text);
}

.pc-table tbody td.pc-col--featured {
  color: var(--color-text);
  font-weight: 600;
}

.pc-value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-feature-settings: "tnum";
}

.pc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full, 999px);
}

.pc-mark svg {
  width: 14px;
  height: 14px;
}

.pc-mark--yes {
  background: var(--color-accent-bg);
  color: var(--color-text);
}

.pc-mark--no {
  color: var(--color-muted);
}

.pc-mark--no svg {
  width: 12px;
  height: 12px;
}

.pc-compare__hint {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-align: center;
}

@media (min-width: 760px) {
  .pc-compare__hint {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
  .pc-billing {
    width: 100%;
  }

  .pc-billing__opts {
    width: 100%;
    max-width: 340px;
  }

  .pc-billing__opt {
    flex: 1;
    padding: 0 var(--space-4);
    min-height: 42px;
    font-size: 13px;
  }

  .pc-billing__save {
    font-size: 9px;
    padding: 2px 6px;
  }

  .pc-table td,
  .pc-table thead th {
    padding-inline: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-billing__hint {
    animation: none;
  }
}

/* ── Screen-reader-only utility (used by comparison marks & caption) ────── */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}