/*
  Contentstack Canoe: pricing page (/pricing/). Owner: page-pricing (WP-E, UX pass 2026-09-27).
  Parts: hero, plan cards (phones: the shared .snap-row plus jump tabs; 768: Free and Growth side by side with an
  Enterprise band; 1024 and up: three columns on a subgrid), "On every plan" strip with the #fair-use footnote,
  prompts and add-ons band, comparison table (3 plan columns at every width; phones show the Usage group until
  "Show all features"), FAQ (shared .faq-layout), final CTA.
  State set by /assets/js/pricing.js: [data-pricing-ready] on main, aria-current on .pricing-tab and
  [data-collapsed] on [data-compare] (phones only). Without JS: the plan row still swipes, no tabs, full table.
  Colours come from tokens only. .fn-ref and .fn-note are shared (site.css).
*/

/* ---------------------------------------------------------------- hero */
.pricing-hero h1 { max-width: 19ch; }
.pricing-hero .lead { text-wrap: balance; }
/* Centred on desktop only (plan S4); left-aligned below 768 like every other hero */
@media (max-width: 767px) {
  .pricing-hero { text-align: left; }
  .pricing-hero h1, .pricing-hero .lead { margin-inline: 0; }
}

/* Launch pricing note (owner, 2026-09-29): one pill under the lead that jumps to the Growth card (pricing.js selects
   the Growth tab on phones). Desktop: one line, centred. Phones: a left-aligned card, the tag on its own line. */
.pricing-launch { margin-top: 18px; }
.launch-note {
  --launch-fill: color-mix(in srgb, #7281EC 6%, var(--surface));
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 40px; padding: 5px 14px 5px 5px;
  border-radius: var(--r-pill);
  color: var(--ink-2); font-size: 14.5px; line-height: 1.4; text-align: left; text-decoration: none;
  box-shadow: var(--highlight), var(--shadow-sm);
  transition: box-shadow var(--t) var(--ease);
}
.launch-note .launch-tag { --launch-fill: color-mix(in srgb, #7281EC 16%, var(--surface)); height: 28px; padding-inline: 10px 12px; font-size: 13px; }
.launch-note-text strong { color: var(--ink); font-weight: 600; }
.launch-note-cta { color: var(--accent-text); font-weight: 500; white-space: nowrap; }
.launch-note .icon-arrow { flex: none; width: 16px; height: 16px; color: var(--accent-text); transition: transform var(--t) var(--ease); }
@media (hover: hover) {
  .launch-note:hover { box-shadow: var(--highlight), 0 0 0 3px color-mix(in srgb, #7281EC 14%, transparent); }
  .launch-note:hover .icon-arrow { transform: translateX(3px); }
}
.launch-note:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 767px) {
  .launch-note {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; width: 100%;
    padding: 12px 14px; border-radius: var(--r);
  }
  .launch-note .launch-tag { grid-column: 1 / -1; justify-self: start; height: 24px; font-size: 12.5px; }
  .launch-note-text { grid-column: 1; }
  .launch-note .icon-arrow { grid-column: 2; }
}

/* ---------------------------------------------------------------- jump tabs (phones only, need JS) */
/* Markup is the shared .tabs.tabs-pill > .tab-list.tab-list-fill, without [data-tabs]: the buttons scroll the
   plan row and carry aria-current (site.css styles it like the selected pill); they don't switch panels. */
.pricing-tabs { display: none; }
@media (max-width: 767px) {
  .pricing[data-pricing-ready] .pricing-tabs { display: block; margin-top: 24px; }
}
.pricing-tabs .tab-list {
  display: flex; width: 100%; gap: 2px; margin: 0; padding: 4px; overflow: visible;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2);
}
.pricing-tabs .pricing-tab {
  display: grid; flex: 1 1 0; justify-items: center; align-content: center; gap: 1px; min-width: 0; min-height: 48px;
  margin: 0; padding: 6px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font: inherit; line-height: 1.2; white-space: normal; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pricing-tab-name { font-size: 14px; font-weight: 500; }
.pricing-tab-price { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pricing-tab-price .launch-spark { width: 9px; height: 9px; }
.pricing-tabs .pricing-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- plan cards */
.pricing-plans { --snap-w: 88%; text-align: left; }
.pricing-hero .pricing-plans { margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 767px) { .pricing[data-pricing-ready] .pricing-hero .pricing-tabs + .pricing-plans { margin-top: 12px; } }

.pricing-plan {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(20px, 2vw, 24px); border: 1px solid var(--line); border-radius: var(--r-frame);
  background: var(--surface); box-shadow: var(--highlight), var(--shadow);
}
.pricing-plan > * + * { margin-top: 10px; }
.pricing-plan.is-featured {
  border-color: var(--accent-line);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--surface);
  box-shadow: 0 0 0 1px var(--accent-line), var(--highlight), var(--shadow);
}
.pricing-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.pricing-plan-name { font-size: 20px; line-height: 1.3; letter-spacing: -.015em; }
.pricing-plan-for { color: var(--ink-2); font-size: 15px; line-height: 1.5; }

.pricing-price { margin-top: 16px; }
.pricing-amount { display: flex; align-items: baseline; gap: 8px; }
.pricing-num { font-size: clamp(40px, 4vw, 52px); line-height: 1; font-weight: 600; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pricing-num-text { letter-spacing: -.035em; }
.pricing-per { color: var(--muted); font-size: 15px; font-weight: 500; }
.pricing-launch-tag { margin-top: 12px; }
.pc-launch { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.pc-launch .launch-spark { width: 10px; height: 10px; }
@media (max-width: 479px) { .pc-launch { display: none; } }
.pricing-addons-title .launch-tag { margin-left: 8px; }
.pricing-price-note { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pricing-plan.is-featured .pricing-price-note { color: var(--ink-2); }

.pricing-cta { margin-top: 16px; }
.pricing-cta-note { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }

.pricing-plan-body { display: flex; flex-direction: column; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.pricing-includes-title { color: var(--ink); font-size: 14px; font-weight: 500; }
.pricing-engine-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.4; }
.pricing-engine-line .pc-engines { flex: none; gap: 4px; }
.pricing-engine-line .engine-logo { width: 20px; height: 20px; }
.pricing-list { display: grid; gap: 8px; margin-top: 14px; }
.pricing-engine-line + .pricing-list { margin-top: 12px; }
.pricing-list li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.pricing-list li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; background: var(--accent);
  -webkit-mask: var(--m-check) center / 16px no-repeat; mask: var(--m-check) center / 16px no-repeat;
}
.pricing-list strong { color: var(--ink); font-weight: 500; }

/* Phones: the shared .snap-row (site.css, plan S8) turns the cards into one swipeable row; the next card peeks in
   and all three stretch to the same height. The tabs above jump between cards (pricing.js). */
@media (max-width: 767px) { .pricing-list li { font-size: 14.5px; } }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) { .pricing-plans { scroll-behavior: smooth; } }

/* 768 to 1023: Free and Growth side by side (subgrid lines up price, button and list), Enterprise as a band */
@media (min-width: 768px) {
  .pricing-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .pricing-plan-ent { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-content: start; }
  .pricing-plan-ent > * { grid-column: 1; }
  .pricing-plan-ent > .pricing-plan-body { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--line-soft); }
  @supports (grid-template-rows: subgrid) {
    .pricing-plans { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .pricing-plan:not(.pricing-plan-ent) { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; }
    .pricing-plan:not(.pricing-plan-ent) > * + * { margin-top: 0; }
    .pricing-plan:not(.pricing-plan-ent) > .pricing-plan-for { margin-top: 10px; }
    .pricing-plan:not(.pricing-plan-ent) > :is(.pricing-price, .pricing-cta) { margin-top: 16px; }
    .pricing-plan:not(.pricing-plan-ent) > .pricing-plan-body { margin-top: 20px; }
    .pricing-plan-ent { margin-top: 20px; }
  }
}
/* 1024 and up: three columns on the subgrid. Reset the Enterprise band first, or the tablet layout leaks in. */
@media (min-width: 1024px) {
  .pricing-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing-plan-ent { grid-column: auto; display: flex; flex-direction: column; grid-template-columns: none; column-gap: 0; margin-top: 0; }
  .pricing-plan-ent > *, .pricing-plan-ent > .pricing-plan-body { grid-column: auto; grid-row: auto; }
  .pricing-plan-ent > .pricing-plan-body { margin-top: 20px; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  @supports (grid-template-rows: subgrid) {
    .pricing-plan-ent { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; margin-top: 0; }
    .pricing-plan-ent > * + * { margin-top: 0; }
    .pricing-plan-ent > .pricing-plan-for { margin-top: 10px; }
    .pricing-plan-ent > :is(.pricing-price, .pricing-cta) { margin-top: 16px; }
    .pricing-plan-ent > .pricing-plan-body { margin-top: 20px; }
  }
}

/* ---------------------------------------------------------------- "On every plan" strip + fair use note */
.pricing-every { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; text-align: center; }
.pricing-hero .container > .pricing-every { margin-top: 24px; }
.pricing-every-title { color: var(--ink); font-size: 14px; font-weight: 500; }
.pricing-every-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.pricing-every-list li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.pricing-every-list li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 16px; height: 16px; background: var(--accent);
  -webkit-mask: var(--m-check) center / 14px no-repeat; mask: var(--m-check) center / 14px no-repeat;
}
.pricing-plans-note { color: var(--muted); font-size: 13px; }
.pricing-plans-note .fn-note { white-space: nowrap; }
.pricing-plans-note #launch-pricing { display: block; max-width: 68ch; margin: 6px auto; white-space: normal; text-wrap: pretty; }
@media (max-width: 767px) { .pricing-plans-note #launch-pricing { margin-inline: 0; } }
@media (max-width: 767px) {
  .pricing-every { justify-items: start; text-align: left; }
  .pricing-every-list { justify-content: flex-start; }
}
@media (max-width: 479px) {
  .pricing-every-list { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 4px 18px; }
  .pricing-every-list li { font-size: 13.5px; }
}

/* ---------------------------------------------------------------- prompts + add-ons (one band, no nested cards) */
/* Phones: heading, estimator, add-ons stacked. 768 and up: the heading across the top, then the estimator and the
   add-ons side by side in two equal columns, both starting on the same line. */
.pricing-units { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.pricing-units-head > * + * { margin-top: 12px; }
.pricing-panel-title { font-size: var(--fs-title); line-height: 1.2; letter-spacing: -.02em; max-width: 22ch; text-wrap: balance; }
@media (min-width: 768px) {
  .pricing-units { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 24px; align-items: start; }
  .pricing-units-head { grid-column: 1 / -1; }
  .pricing-panel-title { max-width: none; }
}
@media (min-width: 1024px) { .pricing-units { column-gap: 48px; } }

/* Prompt estimator ("How prompts work"). Flat on the band (plan S5: the term pills are the only bordered surface).
   Without JS: the static Growth example (20 x 4 = 80, about 25 reports), the "On Free" line and the docs link.
   With JS it starts closed, with "Try your own numbers" [data-est-toggle] under the two lines. Opening it
   ([data-est-open]) shows [data-est-body] (plan switch, then the Growth inputs or the Free note, stacked in one grid
   cell so switching plans never changes the height), hides the "On Free" line and shows the docs link again.
   The slider fill comes from --est-p (0 to 1), set by pricing.js with style.setProperty. */
.pricing-est { display: grid; max-width: 520px; }
.pricing-est > * { min-width: 0; }
.pricing-est-static { margin-top: 2px; }
.pricing-est-toggle {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 6px 0 -8px; padding: 0;
  border: 0; border-radius: 4px; background: none; color: var(--accent-text); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; cursor: pointer;
}
.pricing-est-toggle::after {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--m-chevron-down) center / contain no-repeat; mask: var(--m-chevron-down) center / contain no-repeat;
  transition: transform var(--t) var(--ease);
}
.pricing-est-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.pricing-est-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .pricing-est-toggle:hover { color: var(--accent-strong); } }
.pricing-est[data-est-open] .pricing-est-toggle { margin-bottom: 0; }
.pricing-est-link { margin-top: 10px; }
.pricing-est[data-est-ready]:not([data-est-open]) .pricing-est-link { display: none; }

/* Plan switch: native radios drawn like the site's pill tabs (arrow keys come with the radio group) */
.pricing-est-plan { display: flex; gap: 2px; min-width: 0; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.pricing-est-opt { position: relative; flex: 1 1 0; min-width: 0; }
.pricing-est-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pricing-est-opt span {
  display: grid; place-items: center; min-height: 36px; padding: 0 16px; border-radius: 7px;
  color: var(--muted); font-size: 14.5px; font-weight: 500; line-height: 1.2; text-align: center;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pricing-est-opt input:checked + span { background: var(--card); color: var(--ink); box-shadow: var(--highlight), var(--shadow-sm), 0 0 0 1px var(--line-soft); }
.pricing-est-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (hover: hover) { .pricing-est-opt input:not(:checked):hover + span { color: var(--ink); } }
@media (min-width: 480px) { .pricing-est-plan { justify-self: start; } .pricing-est-opt { flex: none; } .pricing-est-opt span { min-width: 96px; } }

/* Output: the equation, the estimate and one line on the allowance */
.pricing-eq-math { display: flex; align-items: center; gap: 8px; max-width: 420px; }
.pricing-est .pricing-eq-math { align-items: stretch; max-width: none; }
.pricing-est .pricing-op { align-self: center; }
.pricing-term {
  display: grid; justify-items: center; align-content: center; flex: 1 1 0; min-width: 0; padding: 10px 6px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-align: center;
}
.pricing-term-num { color: var(--ink); font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pricing-term-lab { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.pricing-term-result { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.pricing-term-result .pricing-term-num { color: var(--accent-text); }
.pricing-op { flex: none; color: var(--muted); font-size: 18px; line-height: 1; }
/* Under 360px the pills need every pixel so "questions" fits at 12px */
@media (max-width: 359px) { .pricing-eq-math { gap: 4px; } .pricing-term { padding-inline: 2px; } }
.pricing-est-result { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.4; }
.pricing-est-result strong { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.pricing-est-line { color: var(--muted); font-size: 13.5px; line-height: 1.5; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.pricing-est-sum .pricing-est-line { margin-top: 2px; }
/* Opened: the plan switch, then the Growth inputs and the Free note in one grid cell */
.pricing-est-body { display: grid; gap: 14px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.pricing-est-body > * { min-width: 0; }
.pricing-est[data-est-ready] .pricing-est-panels { display: grid; }
.pricing-est[data-est-ready] .pricing-est-panels > * { grid-area: 1 / 1; min-width: 0; }
.pricing-est[data-est-ready] .pricing-est-inputs[hidden] { display: grid !important; visibility: hidden; }
.pricing-est[data-est-ready] .pricing-est-free[hidden] { display: flex !important; visibility: hidden; }
.pricing-est-inputs { display: grid; gap: 14px; }
.pricing-est-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.pricing-est-field .label { grid-area: label; }
.pricing-est-field .hint { grid-area: hint; font-size: 13px; line-height: 1.45; }
/* Questions: label and hint on one line, then the slider beside its number field */
.pricing-est-q { grid-template-areas: "label hint" "range num"; row-gap: 4px; }
.pricing-est-q .hint { text-align: right; }
.pricing-est-q .pricing-est-num { grid-area: num; }
/* Packs: label over hint, the stepper beside them */
.pricing-est-packs { grid-template-areas: "label step" "hint step"; }
.pricing-est-packs .label { align-self: end; }
.pricing-est-packs .hint { align-self: start; }
.pricing-est-stepper { grid-area: step; display: flex; align-items: center; gap: 4px; }

.pricing-est-num {
  width: 64px; min-height: 40px; height: 40px; padding: 6px 8px; text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.pricing-est-num::-webkit-inner-spin-button, .pricing-est-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pricing-est-stepper .pricing-est-num { width: 44px; padding-inline: 4px; }

.pricing-est-step {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none;
  border: 1px solid var(--btn-2-line); border-radius: var(--r-sm); background: var(--btn-2-bg); color: var(--ink); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.pricing-est-step .icon { width: 18px; height: 18px; }
.pricing-est-step[aria-disabled="true"] { opacity: .45; cursor: default; }
@media (hover: hover) { .pricing-est-step:not([aria-disabled="true"]):hover { border-color: var(--faint); background: var(--hover); } }

.pricing-est-range {
  grid-area: range; display: block; width: 100%; height: 40px; margin: 0; padding: 0;
  border-radius: var(--r-sm); background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pricing-est-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 calc(11px + (100% - 22px) * var(--est-p, .1919)), var(--line-strong) 0);
}
.pricing-est-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px;
  border: 3px solid var(--card); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-sm);
}
.pricing-est-range::-moz-range-track { height: 6px; border: 0; border-radius: 999px; background: var(--line-strong); }
.pricing-est-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.pricing-est-range::-moz-range-thumb {
  width: 16px; height: 16px; border: 3px solid var(--card); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent-line);
}

/* Touch screens, phones and tablets: 44px targets */
@media (pointer: coarse), (max-width: 1023px) {
  .pricing-est-opt span { min-height: 44px; }
  .pricing-est-range, .pricing-est-num, .pricing-est-step { height: 44px; min-height: 44px; }
  .pricing-est-step { width: 44px; }
}

.pricing-est-free {
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.pricing-est-fixed { color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.4; }
.pricing-est-nudge { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.pricing-est-nudge .pc-engines { flex: none; flex-wrap: nowrap; gap: 4px; margin-top: 1px; }
.pricing-est-nudge .engine-logo { width: 18px; height: 18px; }

/* Forced colors drop backgrounds and shadows: keep the native slider and outline the chosen plan */
@media (forced-colors: active) {
  .pricing-est-range { -webkit-appearance: auto; appearance: auto; }
  .pricing-est-opt input:checked + span { outline: 2px solid Highlight; outline-offset: -2px; }
}

.pricing-est-link { justify-self: start; min-height: 32px; font-size: 14.5px; }
@media (pointer: coarse), (max-width: 1023px) { .pricing-est-link { min-height: 44px; margin: 2px 0 -8px; } }

.pricing-addons { padding-top: 24px; border-top: 1px solid var(--line); }
.pricing-addons-title { font-size: 16px; line-height: 1.35; letter-spacing: -.01em; }
.pricing-addon-list { display: grid; margin-top: 8px; }
.pricing-addon { display: flex; gap: 14px; align-items: center; padding-block: 12px; }
.pricing-addon + .pricing-addon { border-top: 1px solid var(--line); }
.pricing-addon-body { flex: 1 1 auto; min-width: 0; }
.pricing-addon-name { color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.35; }
.pricing-addon-text { color: var(--muted); font-size: 14px; line-height: 1.45; }
.pricing-addon-price { flex: none; text-align: right; }
.pricing-addon-num { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pricing-addon-note { margin-top: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
@media (min-width: 768px) { .pricing-addons { padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--line); } }
@media (min-width: 1024px) { .pricing-addons { padding-left: 48px; } }

/* ---------------------------------------------------------------- comparison table */
/* html already keeps anchors header + 24px clear (site.css scroll-padding-top); a #compare link lands on the heading,
   not on the section's top padding */
.pricing-compare-section { scroll-margin-top: calc(-1 * var(--section-y)); }
/* 3 columns at every width, so the header can stick under the site header (no sideways scroll container) */
.pricing-compare { overflow: visible; }
.pricing-compare .compare-table { min-width: 0; table-layout: fixed; font-size: 14.5px; }
.pricing-compare .compare-table th,
.pricing-compare .compare-table td { padding: 12px 16px; }
.pricing-compare .pc-col-feat { width: 34%; }
.pricing-compare .pc-col { width: 22%; }
.pricing-compare .compare-table tbody th { position: static; min-width: 0; line-height: 1.45; }
.pc-feat { display: block; color: var(--ink); font-weight: 400; }
.pc-desc { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.pc-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: .22em; }
@media (hover: hover) { .pc-link:hover { color: var(--accent-text); text-decoration-color: currentColor; } }
/* Touch widths: a taller hit area for the inline feature links without moving anything (as site.css does for bylines) */
@media (pointer: coarse), (max-width: 1023px) { .pc-link { padding-block: 12px; margin-block: -12px; } }
.pc-val { display: inline-block; color: var(--ink-2); line-height: 1.4; }
/* Without this the sr-only footnote text adds a phantom second line and pushes "Unlimited*" out of line */
.pc-val:has(.fn-ref) { white-space: nowrap; }
.pricing-compare .compare-table td.is-featured .pc-val { color: var(--ink); }
.pc-locked { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.pricing-compare .pc-locked .icon { width: 14px; height: 14px; margin: 0; }
.pc-engines { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; vertical-align: middle; }
.compare-table .pc-engines .engine-logo { width: 20px; height: 20px; }
.pricing-compare .compare-table .group-row th { padding-top: 32px; padding-bottom: 10px; color: var(--accent-text); }
.pricing-compare .compare-table tbody:first-of-type .group-row th { padding-top: 20px; }

/* Header: plan name + price, then the CTA row (CTA row hidden on phones). Both rows stick under the site header. */
.pricing-compare .compare-table thead th,
.pricing-compare .compare-table thead td { position: sticky; z-index: 3; background: var(--bg); text-align: center; vertical-align: top; }
.pricing-compare .pc-head-names > * { top: var(--header-h); height: 64px; padding: 14px 8px 4px; border-bottom: 0; }
.pricing-compare .pc-head-ctas > * { top: calc(var(--header-h) + 64px); padding: 4px 12px 16px; border-bottom: 1px solid var(--line); }
.pc-plan { display: block; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pc-price { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; font-weight: 400; white-space: nowrap; }
.pricing-compare thead .btn { width: 100%; max-width: 200px; min-height: 40px; }
.pc-corner { text-align: left !important; }

/* Featured lane (Growth) */
.pricing-compare .compare-table .is-featured { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
.pricing-compare .compare-table thead th.is-featured { border-radius: 14px 14px 0 0; box-shadow: inset 0 2px 0 var(--accent); }
.pricing-compare .compare-table thead .is-featured .pc-plan { color: var(--accent-text); }
.pricing-compare .compare-table tbody:last-of-type tr:last-child td.is-featured { border-radius: 0 0 14px 14px; }

.pricing-compare-more { display: none; }
.pricing-compare-note { margin-top: 14px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
@media (min-width: 768px) { .pricing-compare-note { padding-inline: 16px; } }

@media (min-width: 768px) and (max-width: 1023px) {
  .pricing-compare .pc-col-feat { width: 31%; }
  .pricing-compare .pc-col { width: 23%; }
  .pricing-compare .compare-table th, .pricing-compare .compare-table td { padding-inline: 10px; }
  .pricing-compare thead .btn { padding-inline: 8px; font-size: 13px; }
}

/* Phones: all three plans stay side by side with short values (.pc-wide hides the long part);
   the Usage group shows until "Show all features" */
@media (max-width: 767px) {
  .pc-wide { display: none; }
  .pricing-compare .compare-table { font-size: 13px; }
  .pricing-compare .pc-col-feat { width: 37%; }
  .pricing-compare .pc-col { width: 21%; }
  .pricing-compare .compare-table th,
  .pricing-compare .compare-table td { padding: 11px 3px; }
  .pricing-compare .compare-table th:first-child,
  .pricing-compare .compare-table td:first-child { padding-left: 0; padding-right: 8px; }
  .pricing-compare .compare-table tbody th { font-size: 14px; }
  .pc-desc { font-size: 12px; }
  .pricing-compare .pc-head-names > * { height: auto; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  .pricing-compare .pc-head-ctas { display: none; }
  .pc-plan { font-size: 13.5px; letter-spacing: 0; }
  .pc-price { font-size: 12px; }
  .pricing-compare .compare-table thead th.is-featured { border-radius: 10px 10px 0 0; }
  .pricing-compare .compare-table tbody:last-of-type tr:last-child td.is-featured { border-radius: 0 0 10px 10px; }
  .compare-table .pc-engines { gap: 3px; max-width: 42px; }
  .compare-table .pc-engines .engine-logo { width: 16px; height: 16px; }
  .pc-locked { flex-direction: column; gap: 2px; }
  .pricing-compare .compare-table .group-row th { padding: 24px 0 8px; }
  .pricing[data-pricing-ready] .pricing-compare-more { display: flex; margin-top: 16px; }
  .pricing-compare-block[data-collapsed] tbody + tbody { display: none; }
  .pricing-compare-block[data-collapsed] .compare-table tbody:first-of-type tr:last-child td.is-featured { border-radius: 0 0 10px 10px; }
}
/* Small phones (320 to 369): wider plan columns so "Unlimited*" and "Enterprise" fit ("Recommen­dations" breaks at its soft hyphen) */
@media (max-width: 369px) {
  .pricing-compare .pc-col-feat { width: 34%; }
  .pricing-compare .pc-col { width: 22%; }
  .pricing-compare .compare-table td { padding-inline: 1px; font-size: 12px; }
  .pricing-compare .compare-table tbody th { font-size: 13px; }
  .pc-plan { font-size: 12.5px; }
  /* site.css widens .fn-ref by 4px each side on touch widths; in a 63px cell that pushes "Unlimited*" past the edge */
  .pricing-compare .compare-table .fn-ref { padding-inline: 1px; margin-inline: 0; }
}
@media (max-width: 339px) { .pc-plan { font-size: 12px; } }

/* ---------------------------------------------------------------- FAQ (shared .faq-layout) */
.pricing-faq-section { scroll-margin-top: calc(-1 * var(--section-y)); }
.pricing-faq .accordion-body a:not([class]) { white-space: nowrap; }
.pricing-faq-more { margin-top: 20px; color: var(--muted); font-size: 15px; line-height: 1.5; }

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

/* ---------------------------------------------------------------- print */
@media print {
  .pricing-tabs, .pricing-compare-more { display: none !important; }
  .pricing-compare-block[data-collapsed] tbody { display: table-row-group !important; }
}