/* ═════════════════════════════════════════════════════════════════════
   PULSE Pricing — "Instrument spec-sheet / product configurator"
   Matches the v3 landing language: near-black canvas, hairline engineering
   grids, monospace data labels (tabular numerals), Ion Cyan used ONLY as a
   live "signal" colour, corner registration ticks, restrained mechanical
   motion. Two tiers (Free / Pro) presented like a hardware configuration.

   PROGRESSIVE ENHANCEMENT (hard rule): every element is fully visible with
   no JS and under prefers-reduced-motion. Nothing is gated behind a reveal.

   Depends on shared.css (loaded first), tokens-v3.css (v3 tokens), bg.css.
   This file FULLY restyles the pricing-specific surfaces — it overrides the
   legacy shared.css pricing rules without touching shared.css itself.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Page canvas + z-order over the star-flow bg ────────────────────── */
.pricing-page {
  position: relative;
  z-index: var(--z-content);
  font-family: var(--font-display);
  color: var(--text-1);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(116px, 15vh, 168px) var(--sp-6) var(--sp-10);
  text-align: start;
}
@media (max-width: 720px) { .pricing-page { padding-inline: var(--sp-5); } }

/* ── Mono vocabulary (shared with the landing) ──────────────────────── */
.pr-mono-micro {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Eyebrow "kicker" — bracketed mono tag with a cyan channel marker */
.pr-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  position: relative;
  padding-inline-start: 18px;
  margin: 0 0 var(--sp-4);
}
.pr-kicker::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 10px; height: 1px;
  transform: translateY(-50%);
  background: var(--c-500);
}

/* ── Page header ────────────────────────────────────────────────────── */
.pr-head { max-width: 640px; margin: 0 0 var(--sp-7); }
.pr-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: var(--track-mega);
  line-height: 1.04;
  color: var(--text-1);
  margin: 0 0 var(--sp-4);
  padding-bottom: 0.06em;
  text-wrap: balance;
}
.pr-sub {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 50ch;
  margin: 0;
}

/* ── Control bar: instrument period switch + status ─────────────────── */
.pr-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin: var(--sp-7) 0 var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-1);
}

/* Precision instrument switch — a hairline track with a sliding signal */
.pricing-toggle {
  display: inline-flex;
  position: relative;
  gap: 0;
  background: oklch(0.06 0.005 250 / 0.5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: 3px;
  width: fit-content;
}
.pricing-toggle button {
  position: relative;
  z-index: 1;
  padding: 9px 22px;
  background: transparent;
  border: 0;
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out-quart);
}
.pricing-toggle button:hover { color: var(--text-1); }
.pricing-toggle button.active {
  color: #04201e;
  background: var(--c-500);
  box-shadow: var(--glow-c-sm), var(--inner-bevel);
}
@media (prefers-reduced-motion: no-preference) {
  .pricing-toggle button {
    transition: color var(--dur-2) var(--ease-out-quart),
                background var(--dur-2) var(--ease-out-quart);
  }
}

/* Mono trust signal alongside the switch */
.pr-controls-meta {
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: 0.06em;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pr-controls-meta .live-dot { transform: translateY(0); }

/* ── Error message (instrument-style alert) ─────────────────────────── */
.error-msg {
  display: none;
  margin: 0 0 var(--sp-5);
  padding: 12px 16px;
  border: 1px solid var(--red-400);
  border-radius: var(--r-2);
  background: oklch(0.66 0.24 25 / 0.08);
  font-family: var(--font-mono);
  font-size: var(--tx-xs);
  letter-spacing: 0.02em;
  color: var(--red-400);
  text-align: start;
}

/* ════════════════════════════════════════════════════════════════════
   TIER PANELS — instrument bays with corner ticks. Pro is the hero.
   ════════════════════════════════════════════════════════════════════ */
.p-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--sp-5);
  margin: 0 0 var(--sp-9);
}
@media (max-width: 820px) { .p-grid { grid-template-columns: 1fr; } }

.p-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: start;
  padding: clamp(var(--sp-6), 3vw, var(--sp-7));
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: oklch(0.08 0.006 250 / 0.5);
  box-shadow: var(--shadow-2), var(--inner-bevel);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease-out-quart);
}
/* Hairline engineering grid inside each bay */
.p-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  opacity: 0.6;
  pointer-events: none;
}
.p-card > * { position: relative; }
.p-card:hover { border-color: var(--line-accent); }

/* Pro bay — the live, signalled tier */
.p-card.pop {
  border-color: var(--line-accent);
  background: oklch(0.10 0.06 184 / 0.045);
  box-shadow: var(--shadow-3), var(--glow-c-sm), var(--inner-bevel);
}
/* Cyan top rule = "active channel" */
.p-card.pop::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-500), transparent);
  z-index: 2;
}

/* Corner registration ticks (engineering marks) */
.p-corner {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--line-accent);
  pointer-events: none;
  z-index: 3;
}
.p-corner-tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.p-corner-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.p-corner-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.p-corner-br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Bay header row: tier name + channel tag */
.p-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-1);
}
.p-tier {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  color: var(--text-1);
  margin: 0;
}
.p-tier-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  padding: 3px 8px;
}
.p-card.pop .p-tier-tag {
  color: var(--c-400);
  border-color: var(--line-accent);
  background: oklch(0.78 0.16 184 / 0.10);
}

/* Price readout — display numerals, mono unit, tabular */
.p-price {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
}
.p-price span {
  font-family: var(--font-mono);
  font-size: var(--tx-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-inline-start: 6px;
}
.p-card.pop .p-price span { color: var(--c-500); }

.p-period {
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin: var(--sp-3) 0 var(--sp-5);
}
.p-card.pop .p-period { color: var(--c-400); }

.p-desc {
  font-size: var(--tx-sm);
  line-height: 1.62;
  color: var(--text-2);
  margin: 0 0 var(--sp-5);
  max-width: 42ch;
}

/* Spec feature list — mono labels with cyan channel markers, NOT bubbles */
.p-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.p-list li {
  position: relative;
  padding-inline-start: 20px;
  font-family: var(--font-mono);
  font-size: var(--tx-xs);
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--text-2);
}
/* Cyan square "▪" channel marker for included items */
.p-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 7px; height: 7px;
  background: var(--c-500);
  box-shadow: 0 0 6px oklch(0.78 0.16 184 / 0.5);
}
/* Locked / not-included items — dim, hollow marker, struck tone */
.p-list li.dim { color: var(--text-4); }
.p-list li.dim::before {
  background: transparent;
  border: 1px solid var(--line-2);
  box-shadow: none;
}

/* ── Tier action buttons ────────────────────────────────────────────── */
.btn-w, .btn-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: var(--tx-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-2) var(--ease-out-quart),
              box-shadow var(--dur-3) var(--ease-out-quart),
              background var(--dur-2) var(--ease-out-quart),
              border-color var(--dur-2) var(--ease-out-quart),
              color var(--dur-2) var(--ease-out-quart);
}
.btn-w {
  background: var(--c-500);
  color: #04201e;
  box-shadow: var(--glow-c-sm), var(--inner-bevel);
}
.btn-w:hover {
  background: var(--c-400);
  box-shadow: var(--glow-c-md), var(--inner-bevel);
  transform: translateY(-1px);
}
.btn-w:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: var(--inner-bevel); }
.btn-g {
  background: oklch(1 0 0 / 0.02);
  border-color: var(--line-2);
  color: var(--text-1);
}
.btn-g:hover {
  background: oklch(1 0 0 / 0.05);
  border-color: var(--line-3);
  color: var(--c-400);
  transform: translateY(-1px);
}

.p-trial-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 10px;
  text-align: center;
}
.p-free-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 10px;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════════════
   EARLY-SUPPORTER EXPLAINER — instrument note panel with corner ticks
   ════════════════════════════════════════════════════════════════════ */
.es-explainer {
  position: relative;
  margin: 0 0 var(--sp-9);
  padding: clamp(var(--sp-6), 4vw, var(--sp-7));
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: oklch(0.08 0.006 250 / 0.5);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  text-align: start;
}
.es-explainer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-accent), transparent);
}
/* Mono "signal" chip — the early-supporter live marker */
.es-signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-400);
  border: 1px solid var(--line-accent);
  background: oklch(0.78 0.16 184 / 0.08);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  margin-bottom: var(--sp-4);
}
.es-explainer h2 {
  font-family: var(--font-display);
  font-size: var(--tx-xl);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1.1;
  color: var(--text-1);
  margin: 0 0 var(--sp-4);
}
.es-explainer p {
  font-size: var(--tx-sm);
  line-height: 1.7;
  color: var(--text-2);
  margin: 0 0 var(--sp-3);
  max-width: 70ch;
  overflow-wrap: anywhere;
}
.es-explainer p:last-child { margin-bottom: 0; }
.es-explainer strong { color: var(--text-1); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════
   FEATURE COMPARISON — instrument spec table
   ════════════════════════════════════════════════════════════════════ */
.compare {
  position: relative;
  z-index: var(--z-content);
  margin: 0;
}
.compare-head { margin-bottom: var(--sp-6); }
.compare h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.1;
  color: var(--text-1);
  margin: 0;
  text-wrap: balance;
}
.compare-wrap {
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: oklch(0.08 0.006 250 / 0.5);
  box-shadow: var(--shadow-2);
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.compare-table th, .compare-table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: start;
  font-size: var(--tx-sm);
  border-bottom: 1px solid var(--line-1);
}
.compare-table thead th {
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  background: oklch(1 0 0 / 0.015);
  padding-block: var(--sp-5);
}
.compare-table thead th:nth-child(2),
.compare-table thead th:nth-child(3),
.compare-table td:nth-child(2),
.compare-table td:nth-child(3) {
  text-align: center;
  width: 110px;
}
/* Pro column gets the active-channel highlight */
.compare-table thead th.is-pro {
  position: relative;
  color: var(--c-400);
  background: oklch(0.78 0.16 184 / 0.10);
}
.compare-table thead th.is-pro::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
  background: var(--c-500);
}
.compare-table tbody td:first-child {
  font-family: var(--font-display);
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.compare-table td { color: var(--text-2); font-variant-numeric: tabular-nums; }
.compare-table td.is-pro { background: oklch(0.78 0.16 184 / 0.045); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover td { background: oklch(1 0 0 / 0.012); }
.compare-table tbody tr:hover td.is-pro { background: oklch(0.78 0.16 184 / 0.08); }
/* Cyan check + hairline dash — NOT green-circle bubbles */
.compare-table .check {
  color: var(--c-400);
  font-weight: 700;
  font-family: var(--font-mono);
}
.compare-table .dash { color: var(--text-4); font-family: var(--font-mono); }

@media (max-width: 720px) {
  .compare-table th, .compare-table td { padding: var(--sp-3) var(--sp-4); font-size: var(--tx-xs); }
}

/* ════════════════════════════════════════════════════════════════════
   LIGHT MODE — flip dark glass surfaces, keep cyan brand
   ════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .pricing-toggle { background: oklch(0 0 0 / 0.025); border-color: var(--line-2); }
[data-theme="light"] .pricing-toggle button.active { color: #04201e; }
[data-theme="light"] .p-card,
[data-theme="light"] .es-explainer,
[data-theme="light"] .compare-wrap {
  background: oklch(0.99 0.003 250 / 0.7);
  border-color: oklch(0 0 0 / 0.10);
}
[data-theme="light"] .p-card.pop { background: oklch(0.78 0.16 184 / 0.05); border-color: var(--line-accent); }
[data-theme="light"] .p-card.pop .p-price span,
[data-theme="light"] .p-card.pop .p-period { color: oklch(0.42 0.14 184); }
[data-theme="light"] .p-card.pop .p-tier-tag { color: oklch(0.42 0.14 184); }
[data-theme="light"] .es-signal { color: oklch(0.42 0.14 184); }
[data-theme="light"] .btn-w { color: #04201e; }
[data-theme="light"] .btn-g {
  background: oklch(0 0 0 / 0.03);
  border-color: oklch(0 0 0 / 0.12);
  color: var(--text-1);
}
[data-theme="light"] .btn-g:hover { background: oklch(0 0 0 / 0.06); color: oklch(0.40 0.13 184); }
[data-theme="light"] .compare-table th,
[data-theme="light"] .compare-table td { border-bottom-color: oklch(0 0 0 / 0.06); }
[data-theme="light"] .compare-table thead th { background: oklch(0 0 0 / 0.025); }
[data-theme="light"] .compare-table thead th.is-pro { background: oklch(0.78 0.16 184 / 0.14); color: oklch(0.35 0.14 184); }
[data-theme="light"] .compare-table td.is-pro { background: oklch(0.78 0.16 184 / 0.07); }
[data-theme="light"] .compare-table .check { color: oklch(0.42 0.14 184); }

/* ════════════════════════════════════════════════════════════════════
   I18N / RTL / non-Latin safeguards (mirrors index-v3.css patterns)
   ════════════════════════════════════════════════════════════════════ */
.pr-title { word-break: keep-all; overflow-wrap: break-word; }
.pr-sub, .p-desc, .es-explainer p { overflow-wrap: anywhere; }

/* Numeric readouts stay LTR */
html[dir="rtl"] .p-price,
html[dir="rtl"] [data-version-display] { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .pricing-toggle { direction: ltr; }
html[dir="rtl"] .es-explainer p,
html[dir="rtl"] .es-explainer h2 { direction: rtl; unicode-bidi: isolate; }

/* Non-Latin: drop tracking/uppercase on mono labels, use the UI sans */
html[lang="ar"] .pr-kicker, html[lang="ar"] .pr-tier-tag, html[lang="ar"] .es-signal,
html[lang="ar"] .pricing-toggle button, html[lang="ar"] .compare-table thead th,
html[lang="ar"] .p-period, html[lang="ar"] .p-list li, html[lang="ar"] [data-i18n] {
  letter-spacing: 0;
  text-transform: none;
  font-family: 'Instrument Sans', 'Segoe UI', Tahoma, system-ui, sans-serif;
}
html[lang="ar"] .pr-kicker { padding-inline-start: 0; }
html[lang="ar"] .pr-kicker::before { display: none; }
html[lang="ar"] .p-list li { padding-inline-start: 20px; }

html[lang="zh"] .pr-kicker, html[lang="zh"] .pricing-toggle button, html[lang="zh"] .compare-table thead th,
html[lang="ja"] .pr-kicker, html[lang="ja"] .pricing-toggle button, html[lang="ja"] .compare-table thead th,
html[lang="ko"] .pr-kicker, html[lang="ko"] .pricing-toggle button, html[lang="ko"] .compare-table thead th,
html[lang="hi"] .pr-kicker, html[lang="hi"] .pricing-toggle button, html[lang="hi"] .compare-table thead th {
  letter-spacing: 0;
  text-transform: none;
}

/* Non-Latin vertical clearance for big display type */
html[lang="ar"] .pr-title, html[lang="hi"] .pr-title, html[lang="ja"] .pr-title,
html[lang="zh"] .pr-title, html[lang="ko"] .pr-title {
  line-height: 1.32;
  padding-bottom: 0.18em;
}

/* ════════════════════════════════════════════════════════════════════
   FOCUS — visible AA ring on the horizontally-scrollable spec table region
   (keyboard access for the overflow-x:auto wrapper) + any focusable here
   ════════════════════════════════════════════════════════════════════ */
.compare-wrap:focus-visible,
.pricing-page :focus-visible {
  outline: 2px solid var(--c-400);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER CONTRAST — scoped lift to WCAG AA on THIS page only.
   The shared.css footer uses --fg-dim (#888) / --fg-dimmer (#7d7d7d) which
   fall just under 4.5:1 on the near-black star-flow canvas. shared.css is
   off-limits (18 pages), so override the footer text tone locally instead.
   ════════════════════════════════════════════════════════════════════ */
.footer-col a,
.footer-brand,
.footer-brand span,
.footer-bottom { color: oklch(0.74 0.006 250); }
.footer-col a:hover { color: var(--text-1); }
[data-theme="light"] .footer-col a,
[data-theme="light"] .footer-brand,
[data-theme="light"] .footer-brand span,
[data-theme="light"] .footer-bottom { color: oklch(0.42 0.008 250); }
[data-theme="light"] .footer-col a:hover { color: oklch(0.20 0.010 250); }

/* ════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kill micro-motion, content fully visible
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .p-card, .btn-w, .btn-g, .pricing-toggle button { transition: none !important; }
  .btn-w:hover, .btn-g:hover { transform: none !important; }
}