/* ================================================================
   Pricing section — shared by index.html and mobile.html.
   Extracted from the inline <style> in the desktop handoff so the
   mobile page can render pricing too.
   ================================================================ */

.pricing {
  padding: 80px 0;
  background: var(--bg-0);
  border-top: 1px solid var(--line-1);
  position: relative;
  /* Sticky nav lives at top:16px and is ~60px tall — give the section a
     scroll offset so anchor jumps from the nav don't bury the heading. */
  scroll-margin-top: 100px;
}
.pricing-head { text-align: center; max-width: 880px; margin: 0 auto; padding: 0 18px; }
.pricing-head .eyebrow { display: inline-block; margin-bottom: 20px; }
.pricing-head h2 {
  font-family: Horizon, var(--ff-display, sans-serif);
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 20px;
  text-transform: uppercase;
  color: var(--ink-1);
  font-weight: 400;
}
.pricing-head h2 .dot { color: var(--ink-1); }
.pricing-sub {
  font-family: Montserrat, var(--ff-sans, sans-serif);
  font-size: clamp(13px, 2.8vw, 16px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 560px;
  margin: 0 auto 24px;
  letter-spacing: 0;
}

/* --- Billing toggle --- */
.pricing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-2);
  margin: 0 auto;
}
.pricing-toggle-opt {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.pricing-toggle-opt.is-active {
  background: var(--acid);
  color: var(--on-acid-1, #0a0a0a);
}
.pricing-toggle-opt .save {
  font-size: 9px;
  margin-left: 6px;
  opacity: 0.65;
}
.pricing-toggle-wrap { text-align: center; }

/* --- Grid --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
  margin: 56px auto 0;
  max-width: 1240px;
  padding: 0 18px;
}
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pricing-grid { grid-template-columns: 1fr; gap: 12px; } }

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md, 8px);
  padding: 28px 22px 24px;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.price-card:hover { background: var(--bg-3); border-color: var(--line-3); }
.price-card--featured {
  border-color: var(--acid);
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--acid), 0 0 40px -12px rgba(200, 252, 11, 0.25);
}
.price-card--featured:hover { border-color: var(--acid); background: var(--bg-3); }

.price-card-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
}
.price-card-eyebrow .popular-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--acid);
  color: var(--on-acid-1, #0a0a0a);
  font-size: 9px;
  letter-spacing: 0.24em;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
}
.price-card-eyebrow .popular-chip .dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--on-acid-1, #0a0a0a);
  display: inline-block;
}

.price-card-name {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: 0.16em;
  margin: 0 0 14px;
  text-transform: uppercase;
  color: var(--ink-1);
}
.price-card-name .dot { color: var(--acid); }

.price-card-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}
.price-card-amount .num {
  font-family: var(--ff-sans, sans-serif);
  font-weight: 600;
  font-size: clamp(32px, 6vw, 40px);
  line-height: 1;
  color: var(--ink-1);
  letter-spacing: -0.02em;
}
.price-card-amount .per {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.price-card--custom .num { font-size: clamp(24px, 5vw, 28px); text-transform: uppercase; letter-spacing: 0.02em; }

.price-card-desc {
  font-family: Montserrat, var(--ff-sans, sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-1);
  letter-spacing: 0;
}
/* On desktop we keep a min-height so cards align; on narrow we don't. */
@media (min-width: 641px) { .price-card-desc { min-height: 64px; } }

.price-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.price-card-features li {
  font-family: Montserrat, var(--ff-sans, sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  letter-spacing: 0;
}
.price-card-features li::before {
  content: "";
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--acid);
  flex-shrink: 0;
  margin-top: 7px;
}
.price-card-features li strong {
  color: var(--ink-1);
  font-weight: 600;
}
/* Negative bullet (Starter's ❌ items) — dimmed, struck, "×" marker. */
.price-card-features li.no {
  color: var(--ink-4);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.18);
}
.price-card-features li.no::before {
  content: "×";
  width: auto; height: auto;
  background: transparent;
  color: var(--ink-4);
  font-family: var(--ff-mono);
  font-size: 13px;
  line-height: 1;
  margin-top: 2px;
  min-width: 5px;
  text-align: center;
}

.price-card-cta {
  width: 100%;
  justify-content: center;
  padding: 14px 20px;
  font-size: 11px;
  letter-spacing: 0.22em;
}
.price-card-trust {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
  margin-top: 12px;
}

/* ── Credit-tier dropdown ──────────────────────────────────────────────
   A fully custom picker (button + listbox) because native <select>'s
   option menu is rendered by the OS and can't be styled cross-browser.
   The original <select> stays in the DOM as a hidden form backstop so
   form semantics / keyboard fallback keep working if JS fails — the
   JS in home.js builds .credit-picker next to it and hides the native
   control once it's taken over. */
.price-card-credit-row {
  margin: 4px 0 18px;
  position: relative;
}
.price-card-credit-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px;
}

/* When JS has upgraded the select, the native control is taken out of
   the tab order and visually hidden but still reachable by form code
   and by screen readers if they prefer the native control. */
.price-card-credit-select.is-upgraded {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

/* Shared styling for the closed-state button and each open-menu item so
   the font, letter-spacing, and uppercase treatment never drift. */
.credit-picker {
  position: relative;
  width: 100%;
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.credit-picker-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background-color: var(--bg-3, #181818);
  color: var(--ink-1);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
  text-align: left;
}
.credit-picker-toggle:hover,
.credit-picker-toggle:focus-visible {
  border-color: rgba(200, 252, 11, 0.55);
  outline: none;
}
.credit-picker[data-open="true"] .credit-picker-toggle {
  border-color: var(--acid);
  background-color: rgba(200, 252, 11, 0.04);
}
.price-card--featured .credit-picker-toggle {
  border-color: rgba(200, 252, 11, 0.35);
}

.credit-picker-chevron {
  flex-shrink: 0;
  color: var(--acid);
  transition: transform 0.18s ease;
}
.credit-picker[data-open="true"] .credit-picker-chevron {
  transform: rotate(180deg);
}

/* Menu: absolute-positioned under the toggle. Rounded, elevated with a
   soft shadow, acid-green hairline so it reads as a brand surface and
   not an OS chrome. */
.credit-picker-menu {
  list-style: none;
  margin: 6px 0 0;
  padding: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--bg-3, #181818);
  border: 1px solid rgba(200, 252, 11, 0.25);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 252, 11, 0.04) inset;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
.credit-picker[data-open="true"] .credit-picker-menu {
  display: block;
}

.credit-picker-option {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--ink-2);
  padding: 10px 14px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.credit-picker-option:hover,
.credit-picker-option.is-highlighted {
  background: rgba(200, 252, 11, 0.10);
  color: var(--ink-1);
}
.credit-picker-option[aria-selected="true"] {
  background: rgba(200, 252, 11, 0.16);
  color: var(--acid);
}
.credit-picker-option[aria-selected="true"]::before {
  content: "✓";
  color: var(--acid);
  font-weight: 700;
  margin-right: 2px;
}
.credit-picker-option:focus-visible {
  outline: none;
  background: rgba(200, 252, 11, 0.10);
}