/* ═══════════════════════════════════════════════════════════════════════════
   PRICING

   Mobile first. Layouts are defined at 375, 768 and 1280.

   Uses only existing tokens: --green, --green-bg, --black, --white, --line,
   the --space-* scale, the --r-* ramp, --ease-* and --dur-*, and the existing
   type classes. No new colours, fonts or radii.

   Nothing here modifies .sx-plan, .button-frame, .sx-faq or the section
   grounds. New behaviour is added on .pr-* classes that sit alongside them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Currency reveal ─────────────────────────────────────────
   Every currency is in the DOM from the build. The build marks all but the
   default `hidden`, and the script moves that attribute. No per-currency rule
   lives here, so adding a currency to content/pricing.json touches no CSS. */
.pr-price { display: inline-flex; align-items: baseline; gap: 0.18em; }
.pr-price__val[hidden] { display: none; }

.pr-price__prefix,
.pr-price__unit {
  font-family: "Suisse Int'l Mono", monospace;
  font-size: var(--type-mono-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  opacity: 0.75;
}

/* Cross-fade on switch. The script holds the class for 180ms. */
.pr-price__val { transition: opacity 180ms var(--ease-out-quart); }
[data-currency-swapping] .pr-price__val { opacity: 0; }

/* ── Currency picker ─────────────────────────────────────────
   A native select wearing the mono label style. The arrow is ours; the
   platform's own is removed so the control matches the rest of the page. */
.pr-cur {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-7);
  flex-wrap: wrap;
}
.pr-cur__label {
  color: rgba(246, 245, 243, 0.75);
  text-transform: uppercase;
}
.pr-cur__field { position: relative; display: inline-flex; align-items: center; }
.pr-cur__select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--white);
  font-family: "Suisse Int'l Mono", monospace;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 calc(var(--space-7) + var(--space-2)) 0 var(--space-4);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.pr-cur__select:hover { border-color: var(--white); }
.pr-cur__select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* The list itself is painted by the OS, so it needs explicit colours. */
.pr-cur__select option { background: var(--deep); color: var(--white); }
.pr-cur__chev {
  position: absolute;
  right: var(--space-4);
  /* Bone, not green: green on the deep green ground is 2.84:1, under the 3:1
     that WCAG 1.4.11 asks of a graphic that carries meaning. */
  color: rgba(246, 245, 243, 0.75);
  pointer-events: none;
}

/* The deep band is bone, so the picker takes the ink colour (8:1). Bone
   text and a bone chevron on it left the whole control invisible. */
.sx--deep .pr-cur__label,
.sx--deep .pr-cur__select,
.sx--deep .pr-cur__chev { color: var(--green-strong, #26503c); }
.sx--deep .pr-cur__select { border-color: rgba(38, 80, 60, 0.42); }
.sx--deep .pr-cur__select:hover { border-color: var(--green-strong, #26503c); }

/* ── Engagement cards ─────────────────────────────────────────────────── */
.pr-plan__summary { color: rgba(71, 156, 115, 0.72); margin: 0; }
.pr-plan__price { align-items: baseline; }
/* Three classes deep so this beats .sx-plan .sx-plan__price span, which is
   also 0.55 ink and would otherwise win on specificity and fail AA at 3.98:1. */
.pr-plan .pr-plan__price .pr-price__prefix,
.pr-plan .pr-plan__price .pr-price__unit { color: rgba(71, 156, 115, 0.64); opacity: 1; }

.pr-plan__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding-top: var(--space-5);
  color: var(--deep);
  text-transform: uppercase;
  border-bottom: 1px solid var(--green);
  padding-bottom: var(--space-2);
  align-self: flex-start;
  transition: gap var(--dur-base) var(--ease-out-expo);
}
.pr-plan__cta:hover { gap: var(--space-5); }
.pr-plan__cta:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ── Service menu tabs ────────────────────────────────────────────────── */
.pr-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-7);
}
.pr-tab {
  appearance: none; cursor: pointer;
  background: none;
  border: 1px solid var(--line-2);
  color: rgba(246, 245, 243, 0.75);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart);
}
.pr-tab:hover { color: var(--white); border-color: var(--white); }
.pr-tab[aria-selected="true"] { background: var(--green); border-color: var(--green); color: var(--white); }
.pr-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ── Plan tags and cards ───────────────────────────────────────────────────
   A compact, comparison-first treatment: cards use a clear outline, the
   recommended plan carries one full-width ribbon, and every CTA occupies the
   same confident position. The reference's discount pills are intentionally
   not copied because Laccino does not offer those discounts. */
.pr-tabs {
  width: fit-content;
  padding: 4px;
  gap: 2px;
  border: 1px solid rgba(246, 245, 243, 0.28);
  border-radius: var(--r-full);
  background: rgba(71, 156, 115, 0.18);
}
.pr-tab {
  min-height: 38px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--r-full);
  color: rgba(246, 245, 243, 0.72);
}
.pr-tab:hover { background: rgba(246, 245, 243, 0.12); border-color: transparent; }
.pr-tab[aria-selected="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 2px 7px rgba(71, 156, 115, 0.2);
}

.pr-grid {
  gap: clamp(18px, 2vw, 30px);
  align-items: stretch;
}
.pr-blob {
  display: flex;
  min-height: 550px;
  padding: 32px;
  gap: 22px;
  border: 1px solid rgba(71, 156, 115, 0.16);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: none;
  text-align: left;
  align-items: stretch;
  overflow: visible;
  transform: none;
}
.pr-grid .pr-blob { border-width: 1px; border-style: solid; border-color: rgba(71, 156, 115, 0.22); }
/* The homepage overview does not need the full feature-list card height. */
body[data-page="home"] #pricing .pr-blob { min-height: 0; }
.pr-blob .sx-plan__name {
  color: rgba(71, 156, 115, 0.62);
  letter-spacing: 0.08em;
}
.pr-blob .sx-plan__price { justify-content: flex-start; }
.pr-blob .pr-price { gap: 0.12em; }
.pr-blob .pr-price__val { font-size: clamp(44px, 3.5vw, 58px); line-height: 0.92; }
.pr-blob .pr-plan__summary { max-width: 31ch; margin: 0; text-align: left; }
.pr-blob .sx-plan__list {
  width: 100%;
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(71, 156, 115, 0.14);
  gap: 12px;
  align-self: stretch;
}
.pr-blob .sx-plan__list li { gap: 10px; text-align: left; }
.pr-blob .sx-plan__list li::before {
  content: '✓';
  width: auto;
  height: auto;
  margin-top: 0;
  background: none;
  color: var(--green);
  font-weight: 700;
}
.pr-blob .pr-plan__cta {
  display: inline-flex;
  width: 100%;
  min-height: 50px;
  margin-top: auto;
  padding: 0 var(--space-5);
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 10px;
  border: 1px solid var(--button-green);
  border-radius: var(--r-md);
  background: var(--button-green);
  color: var(--white);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
}
.pr-blob .pr-plan__cta:hover {
  gap: 12px;
  border-color: var(--deep);
  background: var(--deep);
  color: var(--white);
  text-decoration: none;
}
/* Keep all card copy at the primary colour's full strength. The prior muted
   treatments made prices, inclusions and CTAs look incomplete on white. */
.pr-blob .sx-plan__name,
.pr-blob .pr-plan__summary,
.pr-blob .pr-price__prefix,
.pr-blob .pr-price__unit,
.pr-blob .sx-plan__list li {
  color: var(--green);
  opacity: 1;
}
.pr-blob .pr-plan__price .pr-price__val { color: var(--green); opacity: 1; }
.pr-blob .pr-plan__cta,
.pr-blob .pr-plan__cta span,
.pr-blob .pr-plan__cta svg path { color: var(--white); fill: var(--white); opacity: 1; }
/* The recommended tier shares the exact same card bounds and spacing as the
   other plans. Its only distinction is a compact, readable status badge. */
.pr-blob--glow.sx-plan--featured {
  margin-top: 0;
  border: 1px solid rgba(71, 156, 115, 0.22);
  border-radius: 16px;
  box-shadow: none;
  animation: none;
}
.pr-blob--glow.sx-plan--featured .sx-plan__flag {
  position: static;
  display: inline-flex;
  width: fit-content;
  min-height: 0;
  padding: 6px 10px;
  align-items: center;
  border-radius: var(--r-full);
  background: var(--button-green);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.06em;
}
@media (max-width: 767px) {
  .pr-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; border-radius: var(--r-md); }
  .pr-tab { flex: 0 0 auto; min-height: 44px; }
  .pr-blob { min-height: 0; padding: 28px 24px; }
  .pr-blob--glow.sx-plan--featured { margin-top: 0; }
}

/* ── Service rows ─────────────────────────────────────────────────────────
   375: each service is a stacked card, tiers listed vertically with their
   labels. 768 and up: a three-column price row. 1280: wider name column. */
.pr-svc { display: grid; gap: var(--space-5); }
.pr-svc__head { display: none; }

.pr-svc__row {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}
.pr-svc__name { margin-bottom: var(--space-2); }
.pr-svc__note { margin: var(--space-2) 0 0; color: rgba(246, 245, 243, 0.75); }

.pr-svc__cell { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.pr-svc__tier {
  color: rgba(246, 245, 243, 0.75);
  text-transform: uppercase;
}
.pr-svc__cell .pr-price { font-family: "Suisse Int'l Mono", monospace; font-size: var(--type-mono-md); }
.pr-svc__none { color: var(--text-muted); }
.pr-svc__custom { color: var(--text); text-transform: uppercase; }

@media (min-width: 768px) {
  .pr-svc__head {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line-2);
  }
  .pr-svc__head .pr-svc__cell { justify-content: flex-start; }
  .pr-svc__head span { color: rgba(246, 245, 243, 0.75); text-transform: uppercase; }

  .pr-svc__row {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: baseline;
  }
  .pr-svc__name { margin-bottom: 0; }
  .pr-svc__cell { justify-content: flex-start; }
  /* The per-cell tier label is only needed in the stacked layout. */
  .pr-svc__tier { display: none; }
}

@media (min-width: 1280px) {
  .pr-svc__head,
  .pr-svc__row { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
}

/* ── Footnote ─────────────────────────────────────────────────────────── */
.pr-footnote {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  color: rgba(246, 245, 243, 0.75);
  max-width: 78ch;
  line-height: 1.6;
}

/* ── Teaser link ──────────────────────────────────────────────────────── */
.pr-more { margin: var(--space-8) 0 0; display: flex; justify-content: center; }
.pr-more__link {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--white);
  text-transform: uppercase;
  border-bottom: 1px solid var(--green);
  padding-bottom: var(--space-2);
  transition: gap var(--dur-base) var(--ease-out-expo);
}
.pr-more__link:hover { gap: var(--space-5); }
.pr-more__link:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ── FAQ enhancement ──────────────────────────────────────────────────────
   The accordions are <details> and work with no script. When JS is present it
   adds .pr-faq--js and the answer height animates. */
.pr-faq--js .pr-faq__item .sx-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out-expo);
}
.pr-faq--js .pr-faq__item[open] .sx-faq__answer { grid-template-rows: 1fr; }
.pr-faq--js .pr-faq__item .sx-faq__answer > p { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pr-price__val,
  .pr-cur__select,
  .pr-tab,
  .pr-plan__cta,
  .pr-more__link { transition: none; }
  [data-currency-swapping] .pr-price__val { opacity: 1; }
  .pr-faq--js .pr-faq__item .sx-faq__answer { transition: none; }
}

/* ── Other currency picker ──────────────────────────────────────────────────
   Opens when "Other currency" is chosen in the select. The list it shows is
   fetched at that moment, not on page load, so the ten pre-rendered currencies
   cost nothing extra to anyone who never opens this.

   Layout at 375: full width under the select. 768 and up: a fixed-width panel
   so it does not stretch across the section. */
.pr-pick {
  /* .pr-cur is a wrapping flex row, so without this the panel sits beside the
     select instead of under it. */
  flex: 0 0 100%;
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line-2);
  background: var(--deep);
}
.pr-pick__label {
  display: block;
  margin-bottom: var(--space-3);
  color: rgba(246, 245, 243, 0.75);
  text-transform: uppercase;
}
.pr-pick__search {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 0;
  color: var(--white);
  font-family: "Suisse Int'l Mono", monospace;
  letter-spacing: var(--track-mono);
}
.pr-pick__search::placeholder { color: var(--text-subtle); }
.pr-pick__search:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.pr-pick__status {
  margin: var(--space-3) 0 0;
  color: rgba(246, 245, 243, 0.75);
}
.pr-pick__results {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.pr-pick__opt {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: rgba(246, 245, 243, 0.9);
  padding: var(--space-3) var(--space-2);
  min-height: 44px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.pr-pick__opt { cursor: pointer; }
.pr-pick__opt:hover,
.pr-pick__opt.is-active { background: var(--green); color: var(--white); }
.pr-pick__opt:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

@media (min-width: 768px) {
  .pr-pick { max-width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-pick__opt { transition: none; }
}

/* ── Plan cards ────────────────────────────────────────────────────────────
   A plain white panel. These used to carry a 224px header of blurred,
   drifting blobs in green, teal and blue, which is what tinted the top half
   of every card; the card is the panel colour all the way up now. What is
   left is the rounded box, the pointer spotlight below, and on the featured
   tier a thin rotating edge. */
.pr-blob {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
}
/* Solid ink for the plan name and the price's small parts, rather than the
   faded greys the plain card uses. This was here to hold contrast over the
   wash; on the white panel it is simply the stronger reading. */
.pr-blob .sx-plan__name { color: var(--ink); }
.pr-blob .pr-plan__price .pr-price__prefix,
.pr-blob .pr-plan__price .pr-price__unit { color: var(--ink); opacity: 0.85; }

/* ── Glow that answers the pointer ─────────────────────────────────────────
   Every card is painted in layers on its own box:
     1. padding-box: the panel, with a faint green spotlight at the pointer
     2. border-box:  a green light on the 2px edge, centred on the pointer
     3. border-box:  the resting edge (a hairline, or on the featured tier the
                     rotating conic gradient)
   --pr-x / --pr-y come from js/currency.js on pointermove; --pr-glow fades
   the pointer layers in on hover and out on leave. Both angle and glow are
   registered properties so they animate. */
@property --pr-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --pr-glow  { syntax: "<number>"; inherits: false; initial-value: 0; }

.pr-blob {
  --pr-x: 50%;
  --pr-y: 0%;
  --pr-edge: linear-gradient(rgba(71, 156, 115, 0.08), rgba(71, 156, 115, 0.08));
  border: 3px solid transparent;
  background:
    radial-gradient(420px circle at var(--pr-x) var(--pr-y), rgba(71, 156, 115, calc(0.16 * var(--pr-glow))), transparent 65%) padding-box,
    linear-gradient(var(--panel), var(--panel)) padding-box,
    radial-gradient(320px circle at var(--pr-x) var(--pr-y), rgba(71, 156, 115, var(--pr-glow)), rgba(71, 156, 115, calc(0.35 * var(--pr-glow))) 45%, transparent 75%) border-box,
    var(--pr-edge) border-box;
  box-shadow: 0 24px 60px -28px rgba(71, 156, 115, calc(0.6 * var(--pr-glow)));
  transition: --pr-glow 320ms ease, transform 320ms var(--ease-out-quart);
}
.pr-blob--glow.sx-plan--featured {
  /* Greens only. This ran green -> sage -> periwinkle -> slate, and the two
     blues were the strongest colour left on the page once the card went back
     to white. Sage is the one supporting tone kept, so the edge still turns
     rather than sitting flat. */
  --pr-edge: conic-gradient(from var(--pr-angle), var(--green), var(--sage), var(--green), var(--sage), var(--green));
  box-shadow: 0 24px 60px -24px rgba(71, 156, 115, calc(0.55 + 0.35 * var(--pr-glow)));
}
@media (hover: hover) {
  .pr-blob:hover { --pr-glow: 1; }
}
/* Keyboard users get the same lift when focus is inside the card. */
.pr-blob:focus-within { --pr-glow: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pr-blob:hover { transform: translateY(-4px); }
}
/* The featured plan is already identified by its badge and colour. Keeping
   the glow static avoids an always-running decorative spin near the CTA. */
.pr-blob--glow.sx-plan--featured { animation: none; }

/* ── Centred content ─────────────────────────────────────────────────────── */
.pr-blob { align-items: center; text-align: center; }
.pr-blob .sx-plan__flag { align-self: center; }
.pr-blob .sx-plan__price { justify-content: center; flex-wrap: wrap; }
.pr-blob .pr-plan__summary { max-width: 32ch; }
/* Bullet points read left-aligned; the list as a block stays centred in the card. */
.pr-blob .sx-plan__list { align-self: center; align-items: stretch; }
.pr-blob .sx-plan__list li { justify-content: flex-start; text-align: left; }
.pr-blob .pr-plan__cta { align-self: center; }
/* Keep the featured card's accent visible where the gradient edge cannot be
   drawn (forced colours). */
@media (forced-colors: active) {
  .pr-blob--glow.sx-plan--featured { border-color: Highlight; }
}

/* ── Card buttons: compact ──────────────────────────────────────────────────
   The shared button system (css/motion.css) makes every CTA 66px tall and,
   inside a price card, full width. In the cards that out-shouted the price,
   so here they are a normal-size button that fits its label. */
.pr-blob .pr-plan__cta {
  width: auto !important;
  min-width: 0;
  min-height: 46px !important;
  padding: 0 22px;
  gap: 10px;
  align-self: center !important;    /* motion.css (loaded later) stretches it */
  font-size: 12px;
  letter-spacing: 0.04em;
}
.pr-blob .pr-plan__cta svg { width: 10px; height: 10px; }

/* ── Cards on the paper page (homepage) ─────────────────────────────────────
   On paper, a paper card vanished. There the cards take a leaf tint, and
   their type goes to deep green for contrast (8:1 on the tint; the leaf text
   was 3:1). The pricing page keeps paper cards on its green ground. */
body[data-page='home'] .pr-blob {
  --panel: #e3eee8;                                   /* fallback for the mix */
  --panel: color-mix(in srgb, var(--leaf, #479c73) 14%, var(--white, #f6f5f3));
  --pr-edge: linear-gradient(transparent, transparent);
  box-shadow: none;
}
body[data-page='home'] .pr-blob--glow.sx-plan--featured {
  --panel: #d5e6dc;
  --panel: color-mix(in srgb, var(--leaf, #479c73) 24%, var(--white, #f6f5f3));
  box-shadow: none;
}
body[data-page='home'] .pr-blob .sx-plan__name,
body[data-page='home'] .pr-blob .pr-plan__summary,
body[data-page='home'] .pr-blob .pr-price__prefix,
body[data-page='home'] .pr-blob .pr-price__unit,
body[data-page='home'] .pr-blob .sx-plan__list li { color: var(--green-strong, #26503c); }
body[data-page='home'] .pr-blob .pr-plan__price .pr-price__val { color: var(--green-strong, #26503c); }
body[data-page='home'] .pr-blob .sx-plan__list li::before { color: var(--green-strong, #26503c); }
body[data-page='home'] .pr-blob .sx-plan__list { border-top-color: rgba(38, 80, 60, 0.16); }
/* The CTA's leaf fill is too light on the tint; deep green holds (9:1 type). */
body[data-page='home'] .pr-blob .pr-plan__cta { background: var(--green-strong, #26503c) !important; color: var(--white, #f6f5f3) !important; }

/* Restored comparison-card direction: quiet solid panels, a strong full-width
   action, and one simple featured tint. No animated glow or decorative edge. */
.pr-grid .pr-blob,
.pr-blob,
.pr-blob--glow.sx-plan--featured {
  --pr-glow: 0;
  min-height: 520px;
  padding: clamp(26px, 2.4vw, 36px);
  align-items: stretch;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: var(--panel, #f6f5f3);
  box-shadow: none;
  transform: none;
}
.pr-blob--glow.sx-plan--featured {
  background: color-mix(in srgb, var(--leaf, #479c73) 18%, var(--white, #f6f5f3));
}
.pr-blob .sx-plan__flag { align-self: flex-start; border-radius: 0; }
.pr-blob .sx-plan__price { justify-content: flex-start; }
.pr-blob .pr-plan__summary { margin: 0; text-align: left; }
.pr-blob .sx-plan__list { align-self: stretch; }
.pr-blob .pr-plan__cta {
  width: fit-content !important;
  min-height: 54px !important;
  margin-top: auto;
  align-self: stretch !important;
  border: 0;
  border-radius: 0;
}
body[data-page='home'] .pr-blob,
body[data-page='home'] .pr-blob--glow.sx-plan--featured {
  --panel: #f2f2ef;
  background: var(--panel);
}
body[data-page='home'] .pr-blob--glow.sx-plan--featured {
  --panel: #dce8e1;
}
@media (hover: hover) {
  .pr-blob:hover { transform: none; }
}

/* ── Reference-led comparison cards ────────────────────────────────────────
   White rounded cards on a quiet grey field. Only the recommended plan gets
   a coloured edge, a full-width top ribbon and a dark filled action. */
.pr-tiers {
  --pr-popular: #6F5BFF;
  background: #f3f3f5;
  color: var(--deep);
}
.pr-tiers .pr-cur__label { color: rgba(38, 80, 60, 0.72); }
.pr-tiers .pr-cur__select {
  min-height: 46px;
  border: 1px solid rgba(38, 80, 60, 0.18);
  border-radius: 14px;
  background: var(--white);
  color: var(--deep);
}
.pr-tiers .pr-cur__select:hover { border-color: rgba(38, 80, 60, 0.42); }
.pr-tiers .pr-cur__chev { color: var(--deep); }
.pr-tiers .pr-cur {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  justify-content: flex-end;
}

.pr-grid {
  --pr-popular: #6F5BFF;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  gap: clamp(16px, 1.4vw, 24px);
  padding-top: 32px;
  align-items: stretch;
}
.pr-grid .pr-blob,
body[data-page='home'] .pr-grid .pr-blob {
  position: relative;
  min-height: 520px;
  padding: 30px 24px 24px;
  gap: 20px;
  overflow: hidden;
  border: 1px solid rgba(38, 80, 60, 0.15);
  border-radius: 16px;
  background: var(--white);
  box-shadow: none;
  color: var(--deep);
}
.pr-tiers .pr-grid .pr-blob {
  border: 1px solid rgba(38, 80, 60, 0.15);
}
.pr-tiers .pr-grid .pr-blob--glow.sx-plan--featured {
  border: 2px solid var(--pr-popular);
}
.pr-grid .pr-blob .sx-plan__name,
.pr-grid .pr-blob .pr-plan__price .pr-price__val,
.pr-grid .pr-blob .pr-price__prefix,
.pr-grid .pr-blob .pr-price__unit,
.pr-grid .pr-blob .sx-plan__list li { color: var(--deep); }
.pr-grid .pr-blob .sx-plan__name {
  font-family: 'Helvetica Now Display', Arial, sans-serif;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.pr-grid .pr-blob .pr-plan__summary { color: rgba(38, 80, 60, 0.72); }
.pr-grid .pr-blob .sx-plan__list { border-top: 1px solid rgba(38, 80, 60, 0.13); }
.pr-grid .pr-blob .sx-plan__list li::before { color: #169B62; }

.pr-grid .pr-blob--glow.sx-plan--featured,
body[data-page='home'] .pr-grid .pr-blob--glow.sx-plan--featured {
  min-height: 552px;
  margin-top: -32px;
  padding-top: 62px;
  border: 2px solid var(--pr-popular);
  border-radius: 16px;
  background: var(--white);
}
.pr-grid .pr-blob--glow.sx-plan--featured .sx-plan__flag {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  width: auto;
  min-height: 32px;
  margin: 0;
  padding: 0 18px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-radius: 14px 14px 0 0;
  background: var(--pr-popular);
  color: var(--white);
  clip-path: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

.pr-grid .pr-blob .pr-plan__cta,
body[data-page='home'] .pr-grid .pr-blob .pr-plan__cta {
  width: fit-content !important;
  min-height: 48px !important;
  padding: 10px 16px;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  clip-path: none !important;
  background: var(--leaf) !important;
  color: var(--button-ink) !important;
  font-family: 'Helvetica Now Display', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color var(--dur-base, 240ms) ease, border-color var(--dur-base, 240ms) ease;
}
.pr-grid .pr-blob .pr-plan__cta svg { display: none; }
.pr-grid .pr-blob .pr-plan__cta span,
.pr-grid .pr-blob .pr-plan__cta svg path {
  color: currentColor !important;
  fill: currentColor !important;
}
.pr-grid .pr-blob .pr-plan__cta:hover {
  border-color: transparent !important;
  background: var(--sun) !important;
  color: var(--deep) !important;
  transform: none;
}
/* The homepage rule above outranks the plain :hover rule, which left the
   first card's button with no hover on the homepage only. */
body[data-page='home'] .pr-grid .pr-blob .pr-plan__cta:hover {
  background: var(--sun) !important;
  color: var(--deep) !important;
}
.pr-grid .pr-blob--glow.sx-plan--featured .pr-plan__cta {
  border-color: transparent !important;
  background: var(--leaf) !important;
  color: var(--button-ink) !important;
}
.pr-grid .pr-blob--glow.sx-plan--featured .pr-plan__cta:hover {
  border-color: transparent !important;
  background: var(--sun) !important;
  color: var(--deep) !important;
}
.pr-grid .pr-blob--full-price .pr-plan__cta:hover,
body[data-page='home'] .pr-grid .pr-blob--full-price .pr-plan__cta:hover {
  border-color: transparent !important;
  background: var(--grant-purple) !important;
  color: var(--white) !important;
}
.pr-grid .pr-plan__cta:focus-visible {
  outline: 3px solid var(--pr-popular);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .pr-grid { padding-top: 0; }
  .pr-grid .pr-blob--glow.sx-plan--featured,
  body[data-page='home'] .pr-grid .pr-blob--glow.sx-plan--featured {
    min-height: 552px;
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .pr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pr-grid .pr-plan__cta { transition: none; }
}

/* ── Plan cards: aligned rows, a short proof list, one clear action ────────
   Every card shares the same row positions, so name, price, summary, list
   and button line up across the three. The recommended plan keeps its purple
   frame and flag, and adds a faint purple ground, purple ticks and a soft
   lift so it reads as the pick without shouting. */
.pr-grid .pr-blob,
body[data-page='home'] .pr-grid .pr-blob {
  min-height: 0;
  padding: 32px 28px 28px;
  gap: 0;
  transition: border-color var(--dur-base, 240ms) ease;
}
.pr-grid .pr-blob:hover { border-color: rgba(38, 80, 60, 0.38); }
.pr-grid .pr-blob .sx-plan__name { margin-bottom: 18px; }
.pr-grid .pr-blob .pr-plan__price { min-height: 60px; align-items: baseline; margin-bottom: 20px; }
.pr-grid .pr-blob .pr-plan__summary { color: rgba(38, 80, 60, 0.88); margin-bottom: 24px; }
.pr-grid .pr-blob.pr-plan .sx-plan__list {
  gap: 12px;
  margin-bottom: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(38, 80, 60, 0.14);
}
.pr-grid .pr-blob .sx-plan__list li { gap: 12px; font-size: 16px; line-height: 1.35; }
/* The tick is the existing glyph; here it only gets a steadier colour. */
.pr-grid .pr-blob .sx-plan__list li::before { color: #1c7a4f; }
.pr-grid .pr-blob .pr-plan__cta,
body[data-page='home'] .pr-grid .pr-blob .pr-plan__cta {
  width: 100% !important;
  min-height: 52px !important;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
}

.pr-grid .pr-blob--glow.sx-plan--featured,
body[data-page='home'] .pr-grid .pr-blob--glow.sx-plan--featured {
  min-height: 0;
  /* 1px less than its neighbours on every side: its border is 2px, not 1px. */
  padding: 63px 27px 27px;
  background: color-mix(in srgb, var(--pr-popular) 4%, var(--white));
  box-shadow: 0 28px 48px -30px rgba(111, 91, 255, 0.6);
}
.pr-grid .pr-blob--glow.sx-plan--featured:hover { border-color: var(--pr-popular); }
.pr-grid .pr-blob--glow.sx-plan--featured .sx-plan__list li::before { color: var(--pr-popular); }

@media (min-width: 768px) {
  /* Room for the longest summary, so the lists start on one line. */
  .pr-grid .pr-blob .pr-plan__summary { min-height: 6.4em; }
}
@media (max-width: 767px) {
  .pr-grid .pr-blob--glow.sx-plan--featured,
  body[data-page='home'] .pr-grid .pr-blob--glow.sx-plan--featured { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-grid .pr-blob { transition: none; }
}