/* ─────────────────────────────────────────────────────────────────────────
   /pricing — plan cards, the comparison table, the Salesforce callout and
   the FAQ. Built on microsite.css's tokens and primitives (.frame, .btn,
   .h2, .eyebrow); everything here is scoped to .pr-* or .pricing-page.
   ───────────────────────────────────────────────────────────────────────── */
.pricing-page .nobr { white-space: nowrap; }

/* ───────── masthead ─────────
   Floats over the hero's orbs like the homepage's bar, but never pins: this
   page has no hero buttons to scroll past. It keeps the frame edge. */
.pr-topnav:not(.is-pinned) .brand { margin-left: 0; }

/* ───────── 01 head ───────── */
.pr-hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--space-2xl) + var(--nav-h) + 40px);
  padding-bottom: var(--space-3xl);
  text-align: center;
}
/* The homepage hero's orbs: the same lagoon mesh, drawn by partners-mesh.js
   into the canvas. It runs from the top of the page, behind the masthead,
   and fades out at the bottom so the plan cards sit on plain ground. A soft
   oval veil behind the centred copy keeps the title readable over the
   brightest blob. Without WebGL2 the canvas stays empty and the page shows
   its plain background. */
.pr-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0 0 -20%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}
.pr-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(42% 46% at 50% 58%, color-mix(in oklab, var(--bg) 46%, transparent), transparent 100%);
}
.pr-hero .eyebrow { color: var(--accent); }
.pr-title {
  max-width: 22ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
/* Each sentence of the headline gets its own line. */
.pr-line { display: block; }
.pr-sub {
  max-width: 40rem;
  margin: var(--space-m) auto 0;
  color: color-mix(in oklab, var(--text-primary) 70%, var(--text-secondary));
}

/* ───────── 02 volume sliders ─────────
   Two sliders above the plan cards, open on the page ground with no panel
   or heading: each label says what it counts, so a title over them would
   repeat it. They sit in a centred band narrower than the card grid, label
   and value on one line, so the plans start higher up the page.
   pricing.js sets --p (0–1) on each slider as it moves; the track fills to
   there in the accent. The fill and the tick labels both run from half a
   thumb in from each end, which is where the thumb's centre sits at its
   first and last stop. */
/* "Customize" / "Hide customization": a plain text link centred over the
   plans. pricing.js unhides it and flips its label. */
.pr-customize-row {
  margin: 0 0 var(--space-m);
  text-align: center;
}
.pr-customize {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.pr-customize:hover { color: var(--accent); }
.pr-customize:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.pr-usage {
  max-width: 52rem;
  margin: 0 auto var(--space-l);
}
.pr-usage[hidden] { display: none; }
.pr-usage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-2xl);
}
.pr-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: 2px;
}
.pr-slider-head label { color: var(--text-secondary); font-size: var(--fs-cap); }
.pr-slider-value {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.pr-slider { --thumb: 14px; }
.pr-range {
  --track: 4px;
  --p: 0;
  display: block;
  width: 100%;
  height: var(--thumb);
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pr-range:focus { outline: none; }
.pr-range::-webkit-slider-runnable-track {
  height: var(--track);
  border-radius: 99px;
  background: linear-gradient(to right,
    var(--accent) 0 calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)),
    rgba(255, 255, 255, .12) 0);
}
.pr-range::-moz-range-track { height: var(--track); border-radius: 99px; background: rgba(255, 255, 255, .12); }
.pr-range::-moz-range-progress { height: var(--track); border-radius: 99px; background: var(--accent); }
.pr-range::-webkit-slider-thumb {
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((var(--track) - var(--thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent), 0 2px 8px rgba(0, 0, 0, .45);
  transition: box-shadow .2s var(--ease-motion), transform .2s var(--ease-motion);
  -webkit-appearance: none;
  appearance: none;
}
.pr-range::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 0;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent), 0 2px 8px rgba(0, 0, 0, .45);
  transition: box-shadow .2s var(--ease-motion), transform .2s var(--ease-motion);
}
.pr-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 36%, transparent), 0 2px 8px rgba(0, 0, 0, .45); }
.pr-range:hover::-moz-range-thumb { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 36%, transparent), 0 2px 8px rgba(0, 0, 0, .45); }
.pr-range:active::-webkit-slider-thumb { transform: scale(1.08); }
.pr-range:active::-moz-range-thumb { transform: scale(1.08); }
.pr-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.pr-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
/* zero-width ticks spread edge to edge land each label's centre on its stop */
.pr-ticks {
  display: flex;
  justify-content: space-between;
  margin: 2px calc(var(--thumb) / 2) 0;
  color: var(--text-tertiary);
  font-size: var(--fs-cap);
  font-variant-numeric: tabular-nums;
}
.pr-tick { display: flex; justify-content: center; width: 0; white-space: nowrap; transition: color .2s ease; }
.pr-tick.is-active { color: var(--text-primary); }
.pr-price [data-price] { font-variant-numeric: tabular-nums; }

@media (max-width: 800px) {
  .pr-usage-grid { grid-template-columns: minmax(0, 1fr); }
}
/* On a phone, label only 100, 500, 1k, 2k and 5k; the thumb still stops at
   all ten. */
@media (max-width: 480px) {
  .pr-tick:nth-child(2), .pr-tick:nth-child(3), .pr-tick:nth-child(5),
  .pr-tick:nth-child(7), .pr-tick:nth-child(9) { visibility: hidden; }
}

/* ───────── 02 plans ───────── */
.pr-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-s);
  align-items: stretch;
}
.pr-plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-l) var(--space-m);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: var(--surface-card);
}
/* Business carries the trial, so it is the one card that steps forward. */
.pr-plan--business {
  border-color: color-mix(in oklab, var(--accent) 70%, transparent);
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%),
    var(--surface-card);
  box-shadow: 0 1.5rem 3rem -1.5rem color-mix(in oklab, var(--accent) 35%, transparent);
}
.pr-plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); }
.pr-plan-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
}
.pr-badge {
  padding: .3em .7em;
  border-radius: 99px;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: var(--fs-cap);
  font-weight: 500;
  line-height: 1.2;
}
.pr-plan-pitch {
  min-height: 3em;
  margin-top: var(--space-2xs);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.pr-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}
.pr-from {
  flex-basis: 100%;
  margin-bottom: .35em;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-cap);
  font-weight: 400;
  letter-spacing: 0;
}
.pr-per {
  margin-left: .15em;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  letter-spacing: 0;
}
.pr-billing { margin-top: var(--space-2xs); color: var(--text-tertiary); font-size: var(--fs-cap); }
.pr-cta {
  justify-content: center;
  margin-top: var(--space-m);
  padding-block: .9em;
}
.pr-limits {
  display: grid;
  gap: .45em;
  margin: var(--space-m) 0 0;
  padding: var(--space-m) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  list-style: none;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.pr-limits strong { color: var(--text-primary); font-weight: 500; }
.pr-intro { margin-top: var(--space-m); font-size: var(--fs-small); font-weight: 500; }
.pr-features {
  display: grid;
  gap: .55em;
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: color-mix(in oklab, var(--text-primary) 78%, var(--text-secondary));
}
.pr-features li { display: grid; grid-template-columns: auto 1fr; gap: .55em; align-items: start; }
.pr-ico { width: 1.05em; height: 1.05em; margin-top: .1em; color: var(--accent); }

@media (max-width: 1200px) {
  .pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pr-plans { grid-template-columns: minmax(0, 1fr); }
  .pr-plan-pitch { min-height: 0; }
}

/* ───────── 03 compare ───────── */
.pr-compare-section { padding-bottom: 0; }
.pr-section-title { margin-bottom: var(--space-l); }
/* position: relative makes this box the containing block for the table's
   .visually-hidden labels. Without it they position against the page, sit
   out past the scroll box, and make a phone scroll the whole page sideways. */
.pr-table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
}
.pr-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pr-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.pr-table th, .pr-table td {
  padding: .9em var(--space-s);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  vertical-align: middle;
}
.pr-table td { width: 15%; text-align: center; color: color-mix(in oklab, var(--text-primary) 80%, var(--text-secondary)); }
.pr-table tbody th { font-weight: 400; text-align: left; color: var(--text-primary); }
.pr-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-card);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: center;
}
.pr-table thead th span { display: block; margin-top: .2em; color: var(--text-secondary); font-family: var(--font-body); font-size: var(--fs-cap); font-weight: 400; }
/* The feature names stay put while a phone scrolls the plan columns. */
.pr-table tbody th, .pr-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 13rem;
  background: var(--bg);
}
.pr-table thead th:first-child { z-index: 2; background: var(--surface-card); }
.pr-table .pr-group th {
  padding-top: 1.6em;
  background: var(--bg);
  color: var(--accent);
  font-size: var(--fs-eye);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pr-tag, .pr-note { display: inline-block; margin-left: .4em; color: var(--text-tertiary); font-size: var(--fs-cap); }
.pr-tag { padding: .1em .5em; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; }
.pr-note { display: block; margin-left: 0; }
.pr-footnote { margin-top: var(--space-s); color: var(--text-tertiary); font-size: var(--fs-cap); }

/* The Salesforce callout: one row, under the table. */
.pr-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-2xl);
  padding: var(--space-l);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  background: var(--surface-card);
}
.pr-callout-logo.integration-logo { width: auto; height: 34px; transform: none; }
.pr-callout-copy { flex: 1 1 18rem; }
.pr-callout-title { margin: 0 0 .2em; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; }
.pr-callout-copy p { color: var(--text-secondary); }

/* ───────── 04 FAQ ───────── */
.pr-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-2xl);
  align-items: start;
}
.pr-faq-head { position: sticky; top: var(--space-l); }
.pr-faq-sub { color: var(--text-secondary); }
.pr-faq-sub a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.pr-faq { border-top: 1px solid rgba(255, 255, 255, .1); }
.pr-faq-item { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.pr-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-lead);
  font-weight: 500;
}
.pr-faq-item summary::-webkit-details-marker { display: none; }
.pr-faq-item summary:hover { color: var(--accent); }
.pr-faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
/* a plus that turns into a minus */
.pr-faq-icon { position: relative; flex: none; width: 14px; height: 14px; }
.pr-faq-icon::before, .pr-faq-icon::after {
  content: '';
  position: absolute;
  inset: 6px 0 auto;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s var(--ease-motion);
}
.pr-faq-icon::after { transform: rotate(90deg); }
.pr-faq-item[open] .pr-faq-icon::after { transform: rotate(0deg); }
.pr-faq-answer {
  display: grid;
  gap: var(--space-xs);
  padding: 0 var(--space-xl) var(--space-m) 0;
  color: color-mix(in oklab, var(--text-primary) 70%, var(--text-secondary));
}
/* An answer nobody has decided yet. Loud on purpose, so it cannot ship by
   accident. */
.pr-tbd {
  padding: .1em .55em;
  border-radius: 6px;
  background: rgba(255, 196, 0, .16);
  color: #FFC400;
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: .06em;
}
@media (max-width: 900px) {
  .pr-faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-l); }
  .pr-faq-head { position: static; }
  .pr-faq-answer { padding-right: 0; }
}

/* ───────── 05 closing ───────── */
.pr-closing-inner { text-align: center; }
.pr-closing-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); margin-top: var(--space-l); }


/* "Not included" in the comparison table is a blank cell, not
   partners.css's red cross: a missing feature is a fact, not a warning, and
   the marks pulled the eye away from what each plan does include. The cell
   keeps its visually hidden "Not included" for screen readers. */
.pr-table .mark--no svg { display: none; }
.pr-table .mark--no { background: none; box-shadow: none; }

/* "Included" is just the green check: no tinted disc or ring behind it
   (partners.css's .mark), so the table reads as a list of ticks. */
.pr-table .mark--yes { background: none; box-shadow: none; }