/* ─────────────────────────────────────────────────────────────────────────────
   Pricing — the commercial page.

   One namespace (`.pp-*`), built only on the shared --odx-* tokens, so both
   themes work with no second palette and nothing here redefines a shared
   class. Breakpoints follow the site's own convention: 1100 / 800 / 480.

   Layout, top to bottom:
     state line · hero · the segment band (industry × size × period)
     plan cards · included on every plan · comparison table · one-time costs
     multi-location · cost structure · free tools · FAQ · company · closing
   ───────────────────────────────────────────────────────────────────────────── */

.pricing-page main { color: var(--odx-ink); }

/* ── Shared page primitives ────────────────────────────────────────────────── */

.pp-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pricing-page main h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 780;
  line-height: 1.05;
  letter-spacing: -.042em;
  text-wrap: balance;
}

.pricing-page main h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 750;
  line-height: 1.14;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.pricing-page main h3 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
}

.pricing-page main h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--odx-subtle);
}

.pricing-page main p {
  margin: 0 0 16px;
  color: var(--odx-muted);
  font-size: 16px;
  line-height: 1.7;
}

.pricing-page main p:last-child { margin-bottom: 0; }

.pricing-page main [id] { scroll-margin-top: 112px; }

.pricing-page main a:focus-visible,
.pricing-page main button:focus-visible,
.pricing-page main input:focus-visible,
.pricing-page main select:focus-visible,
.pricing-page main summary:focus-visible,
.pricing-page main [tabindex]:focus-visible {
  outline: 3px solid var(--odx-focus);
  outline-offset: 3px;
}

.pp-kicker {
  margin: 0 0 14px;
  color: var(--odx-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.pp-note { font-size: 15px !important; color: var(--odx-subtle) !important; }

.pp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-block: 8px;
  color: var(--odx-accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-underline-offset: 5px;
}
.pp-link:hover { text-decoration: underline; }

.pp-section-head { max-width: 860px; margin-bottom: 34px; }
.pp-section-head > p:last-child { margin-bottom: 0; }

.pp-card {
  padding: 26px;
  border: 1px solid var(--odx-border);
  border-radius: 18px;
  background: var(--odx-surface);
}
.pp-card h3 { font-size: 18px; }
.pp-card p { font-size: 15px; line-height: 1.7; }

/* ── 1. Ordering state ─────────────────────────────────────────────────────── */

.pp-state {
  padding-block: 14px;
  border-bottom: 1px solid var(--odx-border);
  background: var(--odx-soft);
}
.pp-state__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  color: var(--odx-ink);
  font-size: 14px;
  line-height: 1.6;
}
.pp-state__dot {
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--odx-accent);
}
.pp-state__action { margin-left: auto; }
.pp-state__action .pp-link { min-height: 40px; padding-block: 4px; font-size: 14px; }

/* ── 2. Hero ───────────────────────────────────────────────────────────────── */

.pp-hero { padding-block: 58px 40px; text-align: center; }
.pp-hero__inner { display: flex; flex-direction: column; align-items: center; }
.pp-hero .pp-lede {
  max-width: 760px;
  margin: 0 0 30px;
  color: var(--odx-muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
}
.pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 26px;
}
.pp-hero__actions .pp-link { align-self: center; }


.pp-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--odx-border);
  list-style: none;
  text-align: left;
}
.pp-facts li {
  padding-inline: 26px;
  border-left: 1px solid var(--odx-border);
}
.pp-facts li:first-child { padding-left: 0; border-left: 0; }
.pp-facts li > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--odx-ink);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.pp-facts li > span { display: block; color: var(--odx-subtle); font-size: 14px; line-height: 1.6; }

.pp-illustrative {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 760px;
  margin: 34px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--odx-border);
  border-radius: 12px;
  background: var(--odx-accent-soft);
  color: var(--odx-ink);
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}
.pp-illustrative strong { font-weight: 750; }
.pp-illustrative code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--odx-surface);
  font-size: 13px;
}
.pp-illustrative__flag {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--odx-accent);
  color: var(--odx-on-accent);
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
}

/* ── 3. The segment band: size tabs and the billing period, both centred ───── */

.pp-select { padding-block: 0 40px; }
.pp-select__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 20px 16px;
  border: 1px solid var(--odx-border);
  border-radius: 16px;
  background: var(--odx-surface);
}

.pp-sizes { width: 100%; }
.pp-sizes__scroller {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--odx-border);
  scrollbar-width: none;
}
.pp-sizes__scroller::-webkit-scrollbar { display: none; }
/* The fade appears only while there is more strip to reach. */
.pp-sizes__scroller--more {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}
.pp-sizes__list {
  display: flex;
  gap: 2px;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: -1px;
}

.pp-tabs__input,
.pp-segmented__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pp-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 11px 16px;
  border-bottom: 2px solid transparent;
  color: var(--odx-muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}
.pp-tab:hover { color: var(--odx-ink); }
.pp-tab__hint { color: var(--odx-subtle); font-size: 12px; font-weight: 500; }
.pp-tabs__input:checked + .pp-tab {
  border-bottom-color: var(--odx-accent);
  color: var(--odx-ink);
  font-weight: 750;
}
.pp-tabs__input:checked + .pp-tab .pp-tab__hint { color: var(--odx-muted); }
.pp-tabs__input:focus-visible + .pp-tab {
  border-radius: 6px;
  outline: 3px solid var(--odx-focus);
  outline-offset: 2px;
}

.pp-period {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.pp-period__note {
  max-width: 720px;
  margin: 0;
  color: var(--odx-subtle);
  font-size: 13px;
  line-height: 1.6;
}
.pp-period__note strong { color: var(--odx-ink); }

.pp-segmented {
  display: inline-flex;
  width: fit-content;
  padding: 3px;
  border: 1px solid var(--odx-border);
  border-radius: 999px;
  background: var(--odx-soft);
}
.pp-segmented__label {
  padding: 7px 22px;
  border-radius: 999px;
  color: var(--odx-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.pp-segmented__input:checked + .pp-segmented__label {
  background: var(--odx-surface);
  color: var(--odx-ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}
.pp-segmented__input:focus-visible + .pp-segmented__label {
  outline: 3px solid var(--odx-focus);
  outline-offset: 2px;
}
.pp-select__apply {
  min-height: 40px;
  padding: 9px 20px;
  border: 1px solid var(--odx-accent);
  border-radius: 999px;
  background: var(--odx-accent-soft);
  color: var(--odx-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}
html.pp-js .pp-select__apply { display: none; }

/* ── 4. Plan cards ─────────────────────────────────────────────────────────── */

.pp-plans { padding-block: 4px 72px; }

.pp-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.pp-plan {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 26px;
  border: 1px solid var(--odx-border);
  border-radius: 20px;
  background: var(--odx-surface);
}
.pp-plan--recommended {
  border-color: var(--odx-accent);
  box-shadow: var(--odx-shadow);
}
.pp-plan--contact { background: var(--odx-soft); }
.pp-plan__flag {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 28px;
  margin: 0 0 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--odx-accent);
  color: var(--odx-on-accent);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  /* The marker keeps its row on every card, visible or not, so the four cards
     stay in step when the size tab moves. */
  visibility: hidden;
}
.pp-plan__flag--on { visibility: visible; }
.pp-plan__flag-mark { font-size: 8px; line-height: 1; }
.pp-plan__name { min-height: 32px; margin: 0 0 8px; font-size: 24px; font-weight: 760; letter-spacing: -.028em; }
.pp-plan__fit {
  min-height: 68px;
  margin: 0 0 16px !important;
  color: var(--odx-muted);
  font-size: 14px !important;
  line-height: 1.6 !important;
}
/* The price area is a fixed row too, so the four CTAs below it land on one
   line whether the plan is priced, billed annually or priced in a
   conversation. */
.pp-plan__priceblock {
  min-height: 140px;
  padding-block: 14px 12px;
  border-block: 1px solid var(--odx-border);
}
.pp-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 6px !important;
}
.pp-plan__amount {
  color: var(--odx-ink);
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.pp-plan__period { color: var(--odx-subtle); font-size: 14px; font-weight: 600; }
.pp-plan__total { margin: 0 0 6px !important; color: var(--odx-muted); font-size: 13px !important; line-height: 1.55 !important; }
.pp-plan__basis { margin: 0 !important; color: var(--odx-subtle); font-size: 13px !important; line-height: 1.55 !important; }
.pp-plan__action { margin: 16px 0 0 !important; }
.pp-plan__cta { width: 100%; justify-content: center; }
.pp-plan__block { padding-top: 18px; }
.pp-plan__block + .pp-plan__block { margin-top: 18px; border-top: 1px solid var(--odx-border); }
/* One shape for all four cards, pinned to the bottom of the card so the scale
   block sits on the same line across the row whatever the ladder above it
   contains. */
.pp-plan__block--scale { margin-top: auto !important; padding-top: 16px; min-height: 132px; }

.pp-ladder { margin: 0; padding: 0; list-style: none; }
.pp-ladder__item {
  display: flex;
  gap: 9px;
  padding-block: 7px;
  color: var(--odx-ink);
  font-size: 14px;
  line-height: 1.55;
}
.pp-ladder__mark { flex: none; margin-top: 2px; color: var(--odx-accent); }
.pp-ladder__item--more { color: var(--odx-accent); font-size: 13px; font-weight: 650; }

.pp-cap { margin: 0; }
.pp-cap__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-block: 7px;
  border-bottom: 1px solid var(--odx-border);
}
.pp-cap__row:last-child { border-bottom: 0; }
.pp-cap dt { color: var(--odx-muted); font-size: 13px; line-height: 1.5; }
.pp-cap dd { margin: 0; color: var(--odx-ink); font-size: 13px; font-weight: 750; line-height: 1.5; text-align: right; }
.pp-cap__row--more { border-bottom: 0; }
.pp-cap__row--more dt { color: var(--odx-subtle); font-weight: 500; }
.pp-cap__row--more dd { font-weight: 600; }
.pp-cap__row--more .pp-link { min-height: 26px; padding-block: 0; font-size: 13px; }

.pp-plans__state {
  margin: 26px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid var(--odx-border);
  color: var(--odx-subtle);
  font-size: 13.5px !important;
  line-height: 1.7 !important;
}
.pp-plans__state strong { color: var(--odx-ink); font-weight: 700; }

/* ── 5. Included on every plan ─────────────────────────────────────────────── */

.pp-every {
  padding-block: 62px;
  background: var(--odx-soft);
}
.pp-section-head--inline { max-width: 900px; }
.pp-every__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-every__item {
  display: flex;
  gap: 10px;
  padding-block: 12px;
  color: var(--odx-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}
.pp-every__mark { flex: none; margin-top: 1px; color: var(--odx-accent); }

/* ── 6. Comparison table ───────────────────────────────────────────────────── */

.pp-compare { padding-block: 72px; }

.pp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.pp-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--odx-muted);
  font-size: 14px;
  line-height: 1.5;
}
.pp-legend strong { color: var(--odx-ink); }
.pp-legend__sample {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--odx-border);
  border-radius: 9px;
  background: var(--odx-surface);
  color: var(--odx-accent);
  font-size: 13px;
  font-weight: 750;
}
.pp-legend__sample--no { color: var(--odx-subtle); }
.pp-legend__sample--value { color: var(--odx-ink); }
.pp-legend__sample--note { color: var(--odx-accent); background: var(--odx-accent-soft); }
.pp-legend__sample--same { color: var(--odx-muted); }

.pp-table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pp-tool {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--odx-control-border);
  border-radius: 999px;
  background: var(--odx-surface);
  color: var(--odx-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}
.pp-tool:hover { border-color: var(--odx-accent); color: var(--odx-accent); }
.pp-tool[aria-pressed="true"] {
  border-color: var(--odx-accent);
  background: var(--odx-accent-soft);
  color: var(--odx-ink);
}
.pp-scroll-hint { margin: 0 !important; margin-left: auto !important; color: var(--odx-subtle); font-size: 13px !important; }

.pp-table-scroll {
  max-height: min(78vh, 900px);
  overflow: auto;
  overscroll-behavior-x: contain;
  /* The table is deliberately wider than a phone. Without paint containment
     the browser widens the whole layout viewport to fit it (measured: a 320px
     phone reported a 929px layout viewport), which breaks reflow for the
     entire page. Containment keeps the overflow inside this box, where the
     scroll belongs, and the region still sticks its own header. */
  contain: paint;
  border: 1px solid var(--odx-border);
  border-radius: 18px;
  background: var(--odx-surface);
  scroll-padding-top: 62px;
}
.pp-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: separate;
  border-spacing: 0;
}
.pp-table caption {
  padding: 14px 20px;
  border-bottom: 1px solid var(--odx-border);
  background: var(--odx-soft);
  color: var(--odx-subtle);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}
.pp-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 16px 18px;
  border-bottom: 1px solid var(--odx-border);
  background: var(--odx-surface-raised);
  text-align: center;
  vertical-align: top;
}
.pp-table__corner {
  left: 0;
  z-index: 5 !important;
  min-width: 262px;
  color: var(--odx-subtle);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left !important;
}
.pp-table__plan-name {
  display: block;
  color: var(--odx-ink);
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -.015em;
}
.pp-table__plan-price {
  display: block;
  margin-top: 5px;
  color: var(--odx-muted);
  font-size: 13px;
  font-weight: 600;
}
.pp-table__plan-cta { display: block; margin-top: 8px; }
.pp-table__plan-cta .pp-link { min-height: 36px; padding-block: 2px; font-size: 13px; }

.pp-table__group-head-row th {
  position: static;
  padding: 14px 20px;
  border-block: 1px solid var(--odx-border);
  background: var(--odx-soft);
  color: var(--odx-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
}

.pp-table__row-head {
  position: sticky;
  left: 0;
  z-index: 2;
  padding: 13px 18px;
  border-bottom: 1px solid var(--odx-border);
  background: var(--odx-surface);
  color: var(--odx-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}
.pp-table__same {
  display: block;
  margin-top: 4px;
  color: var(--odx-subtle);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pp-table__cell {
  padding: 13px 18px;
  border-bottom: 1px solid var(--odx-border);
  border-left: 1px solid var(--odx-border);
  background: var(--odx-surface);
  text-align: center;
  vertical-align: middle;
}
.pp-table tbody tr:last-child .pp-table__row-head,
.pp-table tbody tr:last-child .pp-table__cell { border-bottom: 0; }
.pp-table tbody[data-pp-differences="on"] tr[data-pp-same="1"] .pp-table__row-head,
.pp-table tbody[data-pp-differences="on"] tr[data-pp-same="1"] .pp-table__cell { background: var(--odx-soft); }

.pp-cell { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pp-cell--yes { color: var(--odx-success); }
.pp-cell--no { color: var(--odx-subtle); }
.pp-cell__dash { font-size: 16px; line-height: 1; }
.pp-cell--value .pp-cell__text,
.pp-cell--text .pp-cell__text {
  color: var(--odx-ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  text-align: left;
}
.pp-cell--text .pp-cell__text { color: var(--odx-muted); font-weight: 600; }
.pp-cell--note {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--odx-accent-soft);
  color: var(--odx-accent);
}
.pp-cell--note .pp-cell__text { font-size: 12px; font-weight: 750; line-height: 1.4; white-space: nowrap; }
.pp-cell__flag {
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--odx-accent);
  color: var(--odx-on-accent);
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
}

.pp-table-footnote {
  display: grid;
  gap: 12px 34px;
  margin-top: 22px;
  padding: 24px 26px;
  border: 1px solid var(--odx-border);
  border-radius: 18px;
  background: var(--odx-soft);
}
.pp-table-footnote p { margin: 0 !important; font-size: 14px !important; line-height: 1.7 !important; }
.pp-table-footnote strong { color: var(--odx-ink); }

/* ── 7. One-time and ongoing costs ─────────────────────────────────────────── */

.pp-onetime { padding-block: 72px; background: var(--odx-soft); }
.pp-onetime__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.pp-onetime__state {
  margin: 22px 0 0 !important;
  color: var(--odx-ink);
  font-size: 15px !important;
  font-weight: 600;
}

/* ── 8. Multiple locations ─────────────────────────────────────────────────── */

.pp-multi { padding-block: 72px; }
.pp-multi__head {
  max-width: 800px;
  margin: 0 auto 34px;
  text-align: center;
}
.pp-multi__head > p:last-child { margin-inline: auto; }
.pp-multi__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 34px;
  max-width: 1120px;
  margin: 0 auto 32px;
  padding: 0;
  list-style: none;
}
.pp-multi__list li {
  padding-top: 18px;
  border-top: 1px solid var(--odx-border);
  color: var(--odx-muted);
  font-size: 15px;
  line-height: 1.7;
}
.pp-multi__list strong {
  display: block;
  margin-bottom: 6px;
  color: var(--odx-ink);
  font-size: 15px;
  font-weight: 750;
}
.pp-multi__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 22px;
  margin: 0 !important;
}

/* ── 9. Cost structure ─────────────────────────────────────────────────────── */

.pp-why { padding-block: 72px; background: var(--odx-soft); }
.pp-why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* ── 10. Free tools ────────────────────────────────────────────────────────── */

.pp-tools { padding-block: 56px; }
.pp-tools__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 860px;
  margin-inline: auto;
  padding: 34px 40px;
  border: 1px solid var(--odx-border);
  border-radius: 20px;
  background: var(--odx-surface);
  text-align: center;
}
.pp-tools__inner > p:not(.pp-kicker):not(.pp-tools__actions) { max-width: 620px; }
.pp-tools__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 22px;
  margin: 24px 0 0 !important;
}

/* ── 11. FAQ ───────────────────────────────────────────────────────────────── */

.pp-faq { padding-block: 72px; }
.pp-faq__clusters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 20px 34px;
  align-items: start;
}
.pp-faq__cluster > h3 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--odx-border);
  font-size: 17px;
}
.pp-q { border-bottom: 1px solid var(--odx-border); }
.pp-q summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 0;
  color: var(--odx-ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.55;
  cursor: pointer;
  list-style: none;
}
.pp-q summary::-webkit-details-marker { display: none; }
.pp-q summary::after {
  content: "+";
  flex: none;
  margin-left: auto;
  color: var(--odx-accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.pp-q[open] summary::after { content: "\2013"; }
.pp-q summary:hover { color: var(--odx-accent); }
.pp-q__body { padding: 0 0 18px; }
.pp-q__body p { font-size: 15px; line-height: 1.75; }
.pp-q__body p:last-child { margin-bottom: 0; }
.pp-q__body .pp-link { min-height: 36px; padding-block: 2px; }

/* ── 12. Closing action ────────────────────────────────────────────────────── */

.pp-close { padding-block: 40px 78px; }
.pp-close__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 30px;
  align-items: center;
  padding: 38px 40px;
  border: 1px solid var(--odx-accent);
  border-radius: 22px;
  background: var(--odx-accent-soft);
}
.pp-close__inner h2 { margin-bottom: 12px; font-size: clamp(24px, 2.3vw, 34px); }
.pp-close__inner p { margin: 0; font-size: 15px; line-height: 1.7; }
.pp-close__seller {
  margin-top: 14px !important;
  color: var(--odx-subtle);
  font-size: 13px !important;
}
.pp-close__seller .pp-link { min-height: 32px; padding-block: 0; font-size: 13px; }
.pp-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 !important; }

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .pp-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-plan__fit { min-height: 0; }
  .pp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .pp-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .pp-every__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-tools__inner,
  .pp-close__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .pp-table thead th { position: static; }
  .pp-table__corner { position: static; }
  .pp-table caption { max-width: calc(100vw - 44px); }
  .pp-table-scroll { max-height: 72vh; scroll-padding-top: 12px; }
  .pp-multi__list { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; }
  .pp-multi__list li + li { margin-top: 16px; }
}

@media (max-width: 800px) {
  .pp-hero { padding-block: 40px 28px; }
  .pp-card { padding: 22px 20px; }
  .pp-ladder__item { padding-block: 6px; }
  .pp-cap__row { padding-block: 6px; }
  .pp-select { padding-block: 0 36px; }
  .pp-select__form { padding: 10px 16px 14px; }
  .pp-tab { padding: 10px 13px; }
  .pp-plan-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-plans { padding-block: 0 56px; }
  .pp-every,
  .pp-onetime,
  .pp-why { padding-block: 52px; }
  .pp-compare,
  .pp-multi,
  .pp-faq { padding-block: 52px; }
  .pp-onetime__grid,
  .pp-why__grid { grid-template-columns: minmax(0, 1fr); }
  .pp-table-scroll { margin-inline: -20px; border-radius: 0; border-inline: 0; }
  .pp-table__row-head { min-width: 190px; }
  .pp-table__corner { min-width: 0; }
  .pp-scroll-hint { margin-left: 0 !important; }
  .pp-tools__inner { padding: 22px; }
  .pp-close__inner { padding: 26px 22px; }
}

@media (max-width: 560px) {
}

@media (max-width: 480px) {
  .pp-facts { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pp-facts li { padding-inline: 0; border-left: 0; }
  .pp-facts li + li { padding-top: 18px; border-top: 1px solid var(--odx-border); }
  .pp-every__grid { grid-template-columns: minmax(0, 1fr); }
  .pp-hero__actions .btn,
  .pp-multi__actions .btn,
  .pp-tools__actions .btn,
  .pp-close__actions .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .pp-table-scroll { margin-inline: -18px; }
  .pp-table-footnote { padding: 20px 18px; }
  .pp-plan { padding: 20px 18px 22px; }
}

@media (forced-colors: active) {
  .pp-plan--recommended,
  .pp-close__inner,
  .pp-cell--note { border: 1px solid ButtonText; }
  .pp-cell--yes { color: CanvasText; }
}

@media print {
  .pp-state,
  .pp-select,
  .pp-table-tools,
  .pp-hero__actions,
  .pp-tools,
  .pp-close { display: none; }
  .pp-table-scroll { max-height: none; overflow: visible; border: 0; }
  .pp-table thead th,
  .pp-table__corner,
  .pp-table__row-head { position: static; }
  .pp-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}