/* ============================================================
 * Pricing page styles.
 *
 * A separate stylesheet rather than a <style> block inside the component,
 * because this page is one long file and the CSS is ~600 lines — the same
 * split hero-cinematic.css and film-lightbox.css already use.
 *
 * Everything resolves through the tokens in styles.css. No colour is
 * hard-coded except white-on-dark inside the two dark bands, where the
 * surface is deliberately not a themeable token.
 * ============================================================ */

.pr-hero,
.pr-editions,
.pr-modules,
.pr-compare,
.pr-always,
.pr-how,
.pr-cta {
  --e: cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-head { margin-bottom: 56px; }

/* ---------------- hero ---------------- */

.pr-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-elev-1);
  border-bottom: 1px solid var(--hairline);
}
.pr-hero-glow {
  position: absolute;
  top: -260px; left: 56%;
  width: 900px; height: 640px;
  background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}
.pr-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.pr-assur {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 30px;
}
.pr-assur-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-3);
}
.pr-assur-item svg { color: var(--accent); flex-shrink: 0; }

/* edition finder */
.pr-finder {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
}
.pr-finder-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-elev-2);
}
.pr-finder-head svg { color: var(--accent); }
.pr-finder-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pr-finder-live {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.pr-finder-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pr-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes pr-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.25); }
}
/* The pulse is the one always-on motion on the page. It is the "live"
   indicator on a control that genuinely recomputes as you touch it, so it
   is reporting state rather than decorating. It still stops for anyone who
   has asked motion to stop. */
@media (prefers-reduced-motion: reduce) {
  .pr-finder-dot { animation: none; }
}

.pr-finder-body {
  padding: 20px 20px 4px;
  display: flex; flex-direction: column; gap: 18px;
}
.pr-label {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 9px;
}

.pr-seg {
  display: flex; gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--hairline);
}
.pr-seg-btn {
  flex: 1; height: 32px;
  border: none; border-radius: 9px;
  background: transparent;
  color: var(--ink-3);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: background 260ms var(--e), color 260ms var(--e);
}
.pr-seg-btn.on { background: var(--bg); color: var(--ink); }
.pr-seg-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

.pr-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 260ms var(--e), background 260ms var(--e), opacity 260ms var(--e);
  opacity: 0.62;
}
.pr-chip.on { border-color: var(--accent); background: var(--accent-glow); opacity: 1; }
.pr-chip:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
/* ChannelChip renders its own padded pill, so the wrapper only supplies
   the ring — otherwise the padding doubles. */
.pr-chip > .chip { border: none; background: none; padding: 0 12px; }
.pr-chip-mod {
  padding: 0 13px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--ink-3);
}
.pr-chip-mod svg { color: var(--ink-3); }
.pr-chip-mod.on { color: var(--ink); }
.pr-chip-mod.on svg { color: var(--accent); }

.pr-finder-foot { padding: 20px; }
.pr-rec {
  position: relative;
  border-radius: 14px;
  padding: 16px 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #211a22, #171318);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pr-rec-glow {
  position: absolute; inset: 0;
  background: radial-gradient(120% 160% at 100% 0%, var(--accent-glow), transparent 60%);
  pointer-events: none;
}
.pr-rec-top { position: relative; display: flex; align-items: flex-start; gap: 14px; }
.pr-rec-eyebrow {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.pr-rec-name {
  font-family: var(--f-display);
  font-size: 28px; letter-spacing: -0.02em; color: #fff;
  margin-top: 4px;
  animation: pr-word 450ms var(--e) both;
}
@keyframes pr-word {
  from { opacity: 0; filter: blur(3px); }
  to { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pr-rec-name { animation: none; }
}
.pr-rec-blurb {
  font-size: 12.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 4px;
}
.pr-rec-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--accent);
  background: var(--accent-glow);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em;
  color: #fff;
}
.pr-rec-stats {
  position: relative;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: flex; gap: 18px; flex-wrap: wrap;
}
.pr-rec-k {
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.pr-rec-v {
  font-family: var(--f-mono);
  font-size: 14px; font-weight: 500; color: #fff;
  margin-top: 2px;
}
.pr-rec-link {
  align-self: flex-end;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--accent); text-decoration: none;
}
/* Ticking four modules and watching the edition hold still would otherwise
   read as a dead control. It is the answer, so it says so. */
.pr-rec-foot {
  position: relative;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 11.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------------- editions ---------------- */

.pr-editions { background: var(--bg); }
.pr-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: start;
}
.pr-plan-cell { display: flex; height: 100%; }
.pr-plan {
  flex: 1;
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-elev-1);
}
.pr-plan.featured {
  background: linear-gradient(170deg, #211a22 0%, #171318 100%);
  border-color: #2c2330;
}
.pr-plan-flag {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px;
  background: var(--accent);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
}
.pr-plan-head {
  padding: 28px 26px 22px;
  border-bottom: 1px solid var(--hairline);
}
.pr-plan.featured .pr-plan-head { border-bottom-color: rgba(255, 255, 255, 0.09); }
/* Only the featured card renders .pr-plan-flag (34px). Reserve the same
   space here so all three CTA buttons land on the same line regardless of
   which card has the ribbon. */
.pr-plan:not(.featured) .pr-plan-head { padding-top: 62px; }
.pr-plan-tag {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.pr-plan-name {
  font-family: var(--f-display);
  font-size: 38px; letter-spacing: -0.025em; line-height: 1;
  color: var(--ink);
  margin-top: 8px;
}
.pr-plan.featured .pr-plan-name { color: #fff; }
.pr-plan-line {
  font-size: 14px; line-height: 1.55; color: var(--ink-3);
  margin: 12px 0 0;
  min-height: 44px;
}
.pr-plan.featured .pr-plan-line { color: rgba(255, 255, 255, 0.66); }
/* min-height covers the 2-row case (Enterprise's chips wrap; Core's and
   Signature's don't) — same reasoning as .pr-plan-line's min-height above,
   so the CTA button doesn't shift per-card based on how much chip text wraps. */
.pr-plan-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; min-height: 62px; }
.pr-plan-meta span {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.06em;
  padding: 5px 9px; border-radius: 6px;
  border: 1px solid var(--hairline);
  background: var(--bg-elev-2);
  color: var(--ink-3);
}
.pr-plan.featured .pr-plan-meta span {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
}
.pr-plan-basis {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px dashed var(--hairline);
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-3);
}
.pr-plan.featured .pr-plan-basis {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.6);
}
.pr-plan-basis svg { color: var(--accent); }
.pr-plan-cta { width: 100%; justify-content: center; margin-top: 16px; }

.pr-plan-body {
  padding: 22px 26px 30px;
  display: flex; flex-direction: column; gap: 20px;
}
.pr-plan-gh {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.pr-plan.featured .pr-plan-gh { color: rgba(255, 255, 255, 0.42); }
.pr-plan-list { list-style: none; margin: 11px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pr-plan-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.pr-plan-list svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pr-plan.featured .pr-plan-list li { color: rgba(255, 255, 255, 0.82); }

.pr-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 34px; padding: 16px 22px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--bg-elev-1);
}
.pr-strip svg { color: var(--accent); flex-shrink: 0; }
.pr-strip-main { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.pr-strip-meta { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }

/* ---------------- modules ---------------- */

.pr-modules { background: var(--bg-elev-1); border-top: 1px solid var(--hairline); }
.pr-mod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pr-mod-cell { display: flex; height: 100%; }
.pr-mod {
  flex: 1;
  position: relative;
  padding: 24px 24px 26px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--bg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 420ms var(--e), transform 420ms var(--e);
}
.pr-mod:hover { border-color: var(--accent-glow); transform: translateY(-3px); }
.pr-mod-rule {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 520ms var(--e);
}
.pr-mod:hover .pr-mod-rule { transform: scaleX(1); }
.pr-mod-head { display: flex; align-items: flex-start; gap: 13px; }
.pr-mod-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-glow);
  border: 1px solid var(--hairline);
  color: var(--accent);
}
.pr-mod-icon.core { background: var(--accent); border-color: var(--accent); color: #fff; }
.pr-mod-kind {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.pr-mod-name {
  font-family: var(--f-display);
  font-size: 24px; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink); margin-top: 3px;
}
.pr-mod-line { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; margin: 14px 0 0; }
.pr-mod-feats {
  list-style: none; margin: 16px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 8px;
}
.pr-mod-feats li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.pr-mod-dot {
  margin-top: 6px; flex-shrink: 0;
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--accent);
}
.pr-mod-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 15px;
  border-top: 1px dashed var(--hairline);
}
.pr-mod-in {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
/* Replaced the three edition dots. They read as "included in these plans",
   i.e. a gate — and modules are not gated by edition, they are bought, one
   at a time if that is all a group wants. */
.pr-mod-solo {
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 5px;
  border: 1px solid var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}

.pr-addons { margin-top: 68px; }
.pr-addons-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.pr-addons-meta { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.pr-addon-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
}
.pr-addon { background: var(--bg); padding: 22px 22px 24px; }
.pr-addon svg { color: var(--accent); }
.pr-addon-h { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 12px; letter-spacing: -0.01em; }
.pr-addon-b { font-size: 13px; color: var(--ink-3); line-height: 1.55; margin: 7px 0 0; }

/* ---------------- comparison matrix ---------------- */

.pr-compare { background: var(--bg); border-top: 1px solid var(--hairline); }
/* Wide content scrolls inside its own container — the page body must never
   scroll sideways on a phone. Nothing signalled that scrolling was possible,
   and the feature-name column scrolled away with the rest of the row, so
   bringing the Enterprise column into view meant losing all context for
   what you were even looking at. Pin the label column horizontally, and
   fade the right edge as a permanent "there's more" cue.

   The rounded-corner clipping has to live on THIS element, not on .pr-mx:
   position:sticky resolves against the nearest ancestor with its own
   scroll container, and an intervening overflow:hidden on .pr-mx (even
   though .pr-mx itself never scrolls) was silently winning that role over
   .pr-mx-scroll, so the sticky label just rode along with the horizontal
   scroll instead of staying put.

   overflow-x:auto on THIS element is also the scroll container .pr-mx-header's
   own position:sticky;top:64px resolves against — and .pr-mx-scroll never
   scrolls vertically (overflow-y is only there to clip, scrollHeight always
   equals clientHeight), so the header's "sticky" degenerated into a constant
   flow-position + 64px nudge that never tracked the page's real scroll and,
   as a side effect, sat 64px into the row below it, burying the first
   group's divider and eating the top padding off "Knowledge entries". It
   only needs to be a scroll container at all below 800px, the width where
   .pr-mx's 720px min-width actually forces horizontal scrolling — above
   that, overflow stays visible so the header's sticky targets the real
   viewport and works. */
.pr-mx-scroll {
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 800px) {
  .pr-mx-scroll {
    overflow-x: auto; overflow-y: hidden;
    border-radius: 18px;
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black calc(100% - 28px), transparent 100%);
  }
}
.pr-mx {
  min-width: 720px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--bg-elev-1);
  box-shadow: 0 1px 2px rgba(20, 14, 12, 0.03);
}
.pr-mx-header,
.pr-mx-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}

/* Featured column gets a continuous accent-toned rail rather than a
   per-cell wash, so 35 rows of pink don't read as striping — one column,
   one border, one intent: this is the one we'd pick for you. */
.pr-mx-hcol.featured,
.pr-mx-cell.featured {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev-1));
  border-left: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.pr-mx-row:hover .pr-mx-cell.featured { background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev-1)); }

.pr-mx-header {
  position: sticky; top: 64px; z-index: 5;
  background: var(--bg-elev-1);
  border-bottom: 1px solid var(--hairline);
}
/* Both header cells stretch to the row's full height by default grid
   behaviour, but neither declared how to sit inside that box — the label
   fell to plain block flow (top-aligned) while nothing forced the tier
   names to match it, so the two drifted out of sync. Center both the
   same way, deliberately, instead of leaving it to chance. */
.pr-mx-hcell {
  position: sticky; left: 0; z-index: 6;
  display: flex; align-items: center;
  padding: 22px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-elev-1);
}
.pr-mx-hcol {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 22px 14px;
  text-align: center;
  border-left: 1px solid var(--hairline);
  position: relative;
}
.pr-mx-hcol.featured { padding-top: 40px; }
.pr-mx-hcol.featured::before {
  content: ""; position: absolute; top: 0; left: -1px; right: -1px; height: 3px;
  background: var(--accent);
  border-radius: 0 0 3px 3px;
}
.pr-mx-badge {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.pr-mx-hname { font-family: var(--f-display); font-size: 22px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.pr-mx-hcol.featured .pr-mx-hname { color: var(--accent); }
.pr-mx-hsub {
  font-family: var(--f-mono);
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}

.pr-mx-group {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 22px;
  background: var(--bg-elev-2);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pr-mx-group svg { color: var(--accent); flex-shrink: 0; }
.pr-mx-group span {
  font-family: var(--f-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2);
}

.pr-mx-row { border-bottom: 1px solid var(--hairline); transition: background 200ms var(--e); }
.pr-mx-row:last-child { border-bottom: none; }
.pr-mx-row:hover { background: var(--bg-elev-2); }
.pr-mx-label {
  position: sticky; left: 0; z-index: 2;
  display: flex; align-items: center;
  padding: 15px 22px;
  font-size: 13.5px; color: var(--ink);
  background: var(--bg-elev-1);
  transition: background 200ms var(--e);
}
.pr-mx-row:hover .pr-mx-label { background: var(--bg-elev-2); }
.pr-mx-cell {
  padding: 15px 12px; text-align: center;
  border-left: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
}
.pr-mx-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.pr-mx-check svg { color: var(--accent); }
.pr-mx-txt { font-size: 12.5px; color: var(--ink-2); }
.pr-mx-no { display: block; width: 10px; height: 1.5px; background: var(--hairline); border-radius: 1px; }
.pr-mx-cta { display: flex; justify-content: center; margin-top: 28px; }

/* ---------------- always included ---------------- */

.pr-always {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #211a22 0%, #171318 65%);
}
.pr-always-glow {
  position: absolute; top: -180px; left: 50%;
  width: 1000px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 62%);
  filter: blur(40px);
  pointer-events: none;
}
.pr-always .container { position: relative; }
.pr-always-head { text-align: center; margin-bottom: 44px; }
.pr-always-head .eyebrow { justify-content: center; }
.pr-always-head h2 { color: #fff; }
.pr-always-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
}
.pr-always-cell { background: rgba(255, 255, 255, 0.022); padding: 24px 22px 26px; height: 100%; }
.pr-always-cell svg { color: var(--accent); }
.pr-always-h { font-size: 15px; font-weight: 600; color: #fff; margin-top: 12px; letter-spacing: -0.01em; }
.pr-always-b { font-size: 13px; color: rgba(255, 255, 255, 0.6); line-height: 1.55; margin: 7px 0 0; }

/* ---------------- how scoping works ---------------- */

.pr-how { background: var(--bg-elev-1); border-top: 1px solid var(--hairline); }
.pr-how-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.pr-how-box {
  margin-top: 26px; padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.pr-how-box-h { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.pr-how-box-h svg { color: var(--accent); }
.pr-how-box-v {
  font-family: var(--f-mono);
  font-size: 26px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--accent);
  margin-top: 8px;
}
.pr-steps { list-style: none; margin: 0; padding: 0; }
.pr-step { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding-bottom: 26px; }
.pr-step-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pr-step-n {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent);
  background: var(--accent-glow);
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  color: var(--accent);
}
.pr-step-line { flex: 1; width: 1px; background: var(--hairline); }
.pr-step-h { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.012em; padding-top: 5px; }
.pr-step-b { font-size: 14px; color: var(--ink-3); line-height: 1.6; margin: 7px 0 0; max-width: 480px; }

/* ---------------- FAQ ---------------- */

/* grid-template-rows 0fr → 1fr animates to the answer's OWN height. A
   max-height guess either clips a long answer or spends the tail of the
   transition travelling through empty space on a short one. */

@media (prefers-reduced-motion: reduce) {
  .pr-seg-btn, .pr-chip {
    transition-duration: 1ms !important;
  }
}

/* ---------------- CTA ---------------- */

.pr-cta {
  position: relative; overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}
.pr-cta-glow {
  position: absolute; top: -120px; left: 50%;
  width: 780px; height: 520px; transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 62%);
  filter: blur(50px);
  pointer-events: none;
}
.pr-cta-note {
  font-family: var(--f-mono);
  font-size: 11px; color: var(--ink-3);
  margin-top: 24px;
}

/* ---------------- responsive ---------------- */

/* Same 800px line as .pr-mx-scroll's overflow-x above — below it,
   .pr-mx-scroll is a horizontal-scroll container again, which breaks
   .pr-mx-header's vertical sticky the same way. Rather than ship a header
   whose "sticky" secretly means "sits 64px lower than it should and
   buries the row under it" (see the comment above .pr-mx-scroll), drop
   the sticky outright below 800px — a header that just sits in flow is
   correct; one that fakes stickiness and eats the first row is not. Has
   to come after the base .pr-mx-header rule: same specificity, and the
   later declaration wins regardless of which media query is active. */
@media (max-width: 800px) {
  .pr-mx-header { position: static; }
}

@media (max-width: 1080px) {
  .pr-hero-grid,
  .pr-how-grid,
  .pr-plan-grid { grid-template-columns: 1fr; }
  .pr-mod-grid { grid-template-columns: repeat(2, 1fr); }
  .pr-addon-grid,
  .pr-always-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .pr-mod-grid,
  .pr-addon-grid,
  .pr-always-grid { grid-template-columns: 1fr; }
  .pr-hero-glow { display: none; }
}