/* Pricing page layer. Scoped to .pricing-* so it never leaks into other
   pages; loads after style.css. Tokens only — no literal colours.
   Sentences (hints, captions, notes, tooltips) are --fs-xs at the smallest;
   --fs-label and below are for labels only (text audit, 2026-09-24).

   Rebuilt 2026-09-23 around one global price switch, one action per card,
   and a checkout-return panel (see ARCHITECTURE.md §10.17). */

/* ---- Hero ---- */
.pricing-hero { padding: 72px 0 24px; text-align: center; position: relative; z-index: 1; }
.pricing-hero h1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h1-page); margin: 16px 0 14px; letter-spacing: var(--ls-tight-xl); text-wrap: balance; }
.pricing-hero-sub { color: var(--text-muted); max-width: 600px; margin: 0 auto; font-size: var(--fs-lead); line-height: 1.6; }

/* ---- Plans section ---- */
.pricing-cards-section { padding: 0 0 16px; }

/* ---- Checkout return panel (pricing.js unhides one of the two) ---- */
.pricing-return {
  max-width: 760px; margin: 0 auto var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.pricing-return--ok { border-color: var(--data); box-shadow: var(--shadow-card); }
.pricing-return--muted p { margin: 0; text-align: center; font-size: var(--fs-body-sm); color: var(--text-muted); }
.pricing-return-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.pricing-return-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--data-dim); color: var(--data);
}
.pricing-return-icon .icon { width: 20px; height: 20px; }
.pricing-return-title { margin: 2px 0 4px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); letter-spacing: var(--ls-tight-lg); }
.pricing-return-sub { margin: 0; font-size: var(--fs-body-sm); color: var(--text-muted); }
.pricing-next-steps {
  list-style: none; counter-reset: next; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3);
}
.pricing-next-steps li { counter-increment: next; }
.pricing-next-steps a {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: var(--sp-4); border-radius: var(--radius-md);
  border: 1px solid var(--border-hair); background: var(--bg-card);
  color: var(--text); text-decoration: none;
  transition: border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.pricing-next-steps a:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.pricing-next-steps a::before {
  content: counter(next); font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-strong);
  color: var(--voice-strong); letter-spacing: var(--ls-wide);
}
.pricing-next-steps strong { font-size: var(--fs-body-sm); font-weight: var(--fw-strong); }
.pricing-next-steps span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }

/* ---- Cards ---- */
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 400px));
  justify-content: center; gap: 22px; padding: 40px 0 20px;
}

.pricing-card {
  position: relative; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 18px;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease;
}
.pricing-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
/* The recommended plan: a gradient hairline and the page's one glow. Static,
   not spinning — the old conic animation competed with the price. */
.pricing-card.is-featured {
  border-color: transparent;
  background: linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
              linear-gradient(135deg, var(--accent), var(--voice)) border-box;
  box-shadow: var(--shadow-glow);
}
.pricing-card.is-premium { border-color: var(--border-voice); }
/* The plan the member picked before signing up (`?plan=` at the end of the
   join flow, pricing.js). Gold = "selected" in the colour semantics; it
   outranks the featured card's violet hairline because it's their choice. */
.pricing-card.is-picked,
.pricing-card.is-featured.is-picked {
  border-color: var(--voice);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-glow-voice);
}

.pricing-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--accent-strong); background: var(--bg-elevated); border: 1px solid var(--accent);
  border-radius: var(--radius-pill); padding: 5px 14px; white-space: nowrap;
}
.pricing-badge--voice { color: var(--voice-strong); border-color: var(--voice); }

.pricing-card-head { display: flex; align-items: center; gap: 12px; }
.pricing-tier-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.pricing-tier-icon .icon { width: 20px; height: 20px; }
.pricing-tier-icon--accent { background: var(--accent-soft); color: var(--accent-strong); }
.pricing-tier-icon--voice { background: var(--voice-dim); color: var(--voice-strong); }
.pricing-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pricing-tier-name { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); letter-spacing: var(--ls-tight-lg); }
.pricing-tier-tagline { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }

.pricing-price-block { display: flex; flex-direction: column; gap: 4px; }
.pricing-price-row { display: flex; align-items: baseline; gap: 4px; }
.pricing-price { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display); letter-spacing: var(--ls-normal); line-height: 1; }
.pricing-period { color: var(--text-faint); font-size: var(--fs-sm); }
.pricing-price-caption { margin: 0; font-size: var(--fs-xs); color: var(--text-faint); }
/* The new total once the add-on is ticked — under the unchanged headline. */
.pricing-price-total { color: var(--text-muted); }

/* EZPZ AI & Data add-on: one checkbox row on the card. Selected = gold, per
   the colour semantics; the row itself stays a quiet dashed panel. */
.pricing-addon {
  display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  transition: border-color var(--dur-1) ease;
}
.pricing-addon:hover { border-color: var(--voice); }
.pricing-addon:has(.pricing-addon-input:checked) { border-style: solid; border-color: var(--voice); }
.pricing-addon-input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--voice); cursor: pointer; }
.pricing-addon-input:focus-visible { outline: 2px solid var(--voice); outline-offset: 2px; }
.pricing-addon-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pricing-addon-title { font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--text); line-height: 1.4; }
.pricing-addon-price { margin-left: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--voice-strong); letter-spacing: var(--ls-normal); white-space: nowrap; }
.pricing-addon-sub { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
/* Shown instead of the checkbox to a linked EZPZ Elite member. */
.pricing-addon-included {
  display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0;
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45;
}
.pricing-addon-included .check { color: var(--data); flex-shrink: 0; }
.pricing-addon-included .check .icon { width: 16px; height: 16px; margin-top: 1px; }

/* Allowance: the only thing that differs, so it gets the only visual. */
.pricing-allowance { display: flex; flex-direction: column; gap: var(--sp-2); }
.pricing-allowance-row { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.pricing-allowance-figure {
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-strong);
  letter-spacing: var(--ls-normal); font-variant-numeric: tabular-nums; color: var(--text);
}
.pricing-allowance-unit { font-size: var(--fs-xs); color: var(--text-faint); }
.pricing-allowance-chip {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-3xs); font-weight: var(--fw-strong);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--voice-strong); background: var(--voice-dim); border: 1px solid var(--border-voice);
  border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap;
}
.pricing-allowance-bar { height: 6px; border-radius: var(--radius-pill); background: var(--bg-sunken); overflow: hidden; }
.pricing-allowance-bar span {
  display: block; height: 100%; width: var(--fill, 0%);
  border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--voice));
  transition: width var(--dur-4) var(--ease-out-expo);
}

.pricing-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pricing-features li { display: flex; gap: 10px; font-size: var(--fs-sm); color: var(--text); line-height: 1.4; }
.pricing-features li .check { color: var(--data); flex-shrink: 0; }
.pricing-features li .check .icon { width: 16px; height: 16px; margin-top: 2px; }

.pricing-ctas { display: flex; flex-direction: column; gap: var(--sp-3); }
.pricing-cta { width: 100%; justify-content: center; border-radius: var(--radius-pill); }
.pricing-card.is-featured .pricing-cta { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--text); border: none; }
.pricing-cta:disabled { opacity: .55; cursor: default; }
.pricing-cta-msg { font-size: var(--fs-xs); color: var(--data-down); margin-top: 8px; text-align: center; line-height: 1.5; }

/* The quiet alternative under the one real button. */
.pricing-stake { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pricing-stake-btn {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-emphasis);
  color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--dur-1) ease;
}
.pricing-stake-btn:hover { color: var(--voice-strong); }
.pricing-stake-btn:focus-visible { outline: 2px solid var(--voice); outline-offset: 2px; border-radius: var(--radius-sm); }
.pricing-stake-hint { margin: 0; font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.45; }

/* ---- Assurance row ---- */
.pricing-assurances {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-4) var(--sp-7);
}
.pricing-assurances li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); color: var(--text-faint); }
.pricing-assurances .icon { width: 15px; height: 15px; flex-shrink: 0; stroke: var(--data); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Add-on section (shared .section-head + .feature-grid) ---- */
.pricing-addons { padding: 48px 0 24px; }

/* ---- How it works (shared .steps-grid) ---- */
.pricing-how { padding: 64px 0 40px; }

/* ---- Compare plans (Vercel/Linear-style table) ---- */
.pricing-included { padding: 48px 0 64px; }
.pricing-compare { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Mobile plan picker: shared .pill-group; hidden once every column fits. */
.pricing-compare-picker { max-width: 360px; margin: 0 auto; }
@media (min-width: 769px) { .pricing-compare-picker { display: none; } }

/* `overflow: clip`, NOT hidden: a hidden-overflow ancestor becomes the sticky
   header's scroll container, which parks the header 120px into the body and
   hides the first rows under it (seen 2026-09-23). clip rounds the corners
   without creating a scroll container. */
.pricing-compare-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); overflow: clip; }
.pricing-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }

/* Sticky plan header: sits under the topbar + sub-nav stack so the price and
   CTA stay in view while the rows scroll. */
.pricing-compare-table thead th {
  position: sticky; top: var(--sticky-under-subnav); z-index: 1;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: bottom;
}
.pricing-compare-corner { width: 36%; }
/* The corner carries one short note instead of a control. */
.pricing-compare-corner-note { margin: 0; max-width: 300px; font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.45; }
/* Same specificity as the thead rule above, or its text-align: left wins and
   the plan name sits flush-left under a centred price (seen 2026-09-23). */
.pricing-compare-table thead th.pricing-compare-plan { text-align: center; }
/* On phones the wrapped header is ~185px; pinned under topbar + sub-nav it
   ate ~45% of the screen. The mobile plan picker already says which plan
   column is showing, so the header scrolls away normally there. */
@media (max-width: 768px), (max-height: 600px) { .pricing-compare-table thead th { position: static; } }
.pricing-compare-plan.is-featured { background: var(--accent-tint); }
/* Compact header: flag, name, price and CTA stack tightly — the rows are the
   content, the header is a label. */
.pricing-compare-flag {
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: var(--fs-3xs); font-weight: var(--fw-strong);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent-strong);
}
.pricing-compare-plan-name { display: block; font-family: var(--font-display); font-weight: var(--fw-strong); font-size: var(--fs-body); letter-spacing: var(--ls-tight); color: var(--text); }
.pricing-compare-price-row { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin: 2px 0 8px; }
.pricing-compare-price { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h4); letter-spacing: var(--ls-normal); font-variant-numeric: tabular-nums; }
.pricing-compare-period { font-size: var(--fs-xs); color: var(--text-faint); }
.pricing-compare-cta { border-radius: var(--radius-pill); max-width: 100%; }
.pricing-compare-cta:disabled { opacity: .55; cursor: default; }

/* Group bands: a real section heading in text colour, with a source-coloured
   dot (EZPZ = accent, EZRA = data, Finn = voice; neutral otherwise). */
/* A darker band than the rows (--bg-card on --bg-elevated) with a hairline
   above and below, so each group reads as a section header at a glance
   (product owner, 2026-09-23: "heading should be different bg color"). */
.pricing-compare-group-row th {
  padding: var(--sp-3) var(--sp-4); text-align: left;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.pricing-compare-group:first-of-type .pricing-compare-group-row th { border-top: none; }
.pricing-compare-group-title {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: var(--fw-strong); font-size: var(--fs-body);
  letter-spacing: var(--ls-tight); color: var(--text);
}
.pricing-compare-group-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.pricing-compare-group--accent .pricing-compare-group-title::before { background: var(--accent); }
.pricing-compare-group--data .pricing-compare-group-title::before { background: var(--data); }
.pricing-compare-group--voice .pricing-compare-group-title::before { background: var(--voice); }
/* "With EZPZ AI & Data": which groups come with the add-on (2026-09-23). */
.pricing-compare-group-note {
  margin-left: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent-strong);
}

.pricing-compare-table tbody tr { transition: background var(--dur-1) ease; }
.pricing-compare-table tbody tr:not(.pricing-compare-group-row):hover { background: var(--bg-row-hover); }
.pricing-compare-label {
  padding: 12px var(--sp-4); text-align: left; vertical-align: middle;
  font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--fs-body-sm);
  color: var(--text); border-top: 1px solid var(--border-hair);
}
.pricing-compare-label-text { vertical-align: middle; }

/* (i) tooltip: the explanation lives behind an icon, not as a line of small
   print under every label. Hover or keyboard focus reveals it. */
.pricing-compare-info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; vertical-align: middle;
  border: 1px solid var(--border-strong); border-radius: 50%;
  font-family: var(--font-mono); font-size: var(--fs-3xs); font-weight: var(--fw-strong);
  color: var(--text-faint); cursor: help;
}
.pricing-compare-info:hover, .pricing-compare-info:focus-visible { color: var(--text); border-color: var(--text-muted); outline: none; }
.pricing-compare-info::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 2;
  width: 260px; padding: 8px 10px;
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-body);
  line-height: 1.45; text-align: left; color: var(--text-muted); white-space: normal;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-1) ease;
}
.pricing-compare-info:hover::after, .pricing-compare-info:focus-visible::after,
.pricing-compare-info:focus::after { opacity: 1; } /* :focus = tap on touch screens */
/* On phones the label column is ~140–190px, so a 260px tip hung off the
   icon was clipped by the wrap's overflow: anchor it to the label cell. */
@media (max-width: 768px) {
  .pricing-compare-label { position: relative; }
  .pricing-compare-info { position: static; }
  .pricing-compare-info::after { left: var(--sp-2); width: min(260px, calc(100vw - 72px)); }
}

.pricing-compare-cell { padding: 12px var(--sp-4); text-align: center; vertical-align: middle; border-top: 1px solid var(--border-hair); }
.pricing-compare-cell.is-featured { background: var(--accent-tint); }
.pricing-compare-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--data-dim); color: var(--data);
}
.pricing-compare-tick .icon { width: 13px; height: 13px; stroke-width: 3; }
.pricing-compare-text { font-size: var(--fs-body-sm); font-weight: var(--fw-emphasis); font-variant-numeric: tabular-nums; color: var(--text); }
.pricing-compare-dash { color: var(--text-faint); }

/* One plan column at a time below 768px; the picker sets .is-shown. */
@media (max-width: 768px) {
  .pricing-compare-corner { width: 52%; }
  .pricing-compare-table [data-plan-col] { display: none; }
  .pricing-compare-table [data-plan-col].is-shown { display: table-cell; }
  .pricing-compare-info::after { width: 200px; }
}

/* Inline badge some INCLUDED_PILLARS items carry (Trading Desk-only items). */
.compare-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--fs-3xs); font-weight: var(--fw-strong);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--border-accent);
  border-radius: var(--radius-pill); padding: 2px 7px; vertical-align: middle; white-space: nowrap;
  margin-left: 6px;
}

/* ---- FAQ: the shared .faq-item accordion in a reading-width column ---- */
.pricing-faq-section { padding: 48px 0 40px; }
.pricing-faq-list { max-width: var(--prose-max); margin: 0 auto; }
.pricing-faq-list .faq-answer a { color: var(--voice-strong); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Footnote ---- */
.pricing-footnote { max-width: var(--prose-max); margin: 24px auto 64px; color: var(--text-faint); font-size: var(--fs-xs); text-align: center; line-height: 1.7; }
.pricing-footnote a { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .pricing-card, .pricing-card:hover, .pricing-next-steps a:hover { transform: none; }
  .pricing-allowance-bar span { transition: none; }
}

@media (max-width: 640px) {
  .pricing-return { padding: var(--sp-4); }
  .pricing-assurances { gap: var(--sp-3) var(--sp-5); }
  .pricing-assurances li { font-size: var(--fs-xs); }
}