/* ---------------------------------------------------------------
   Xovah - pricing cards

   Shared by the pricing section on the landing page and by
   pricing.html, so it lives in a file rather than in a page's inline
   style block.

   Everything is a theme token. The only literal colours are inside
   the spotlight gradients, where an alpha ramp is the whole point.
   That means the dark theme inverts on its own: the lead card is
   ink-on-paper in light and paper-on-ink in dark, without a second
   set of rules.

   Corners come from edge.css (--radius, set with !important on a
   universal selector). Nothing here tries to round anything itself.
   --------------------------------------------------------------- */

/* == Page ground ================================================
   The marble X sits behind the whole pricing page, pinned so it does
   not slide under the cards as you scroll. A veil in the paper colour
   goes over it: without one the marble veining runs straight through
   the body copy and the red glow fights the crimson buttons.

   The source art is 1022x571. It is served at 2x for high-DPI screens,
   but that is a resample, not extra detail - so the image is never
   asked to carry sharpness. It is a ground, held soft on purpose,
   behind a veil.

   Scoped to body.pr-page, which only pricing.html sets. */
body.pr-page {
  background-image:
    linear-gradient(180deg,
      rgb(var(--c-paper) / 0.55) 0%,
      rgb(var(--c-paper) / 0.72) 42%,
      rgb(var(--c-paper) / 0.88) 100%),
    url("media/pricing-bg.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}

/* A phone cannot afford a fixed, cover-scaled background - iOS repaints
   it on every scroll frame - and at that width the X is cropped to a
   meaningless sliver anyway. It rides with the page instead. */
@media (max-width: 899px) {
  body.pr-page {
    background-attachment: scroll, scroll;
    background-size: cover, 200% auto;
    background-position: center, center top;
    /* The X is far larger relative to the text here, and the intro
       paragraph sits right across its busiest part, so the veil carries
       a little more weight than on desktop. */
    background-image:
      linear-gradient(180deg,
        rgb(var(--c-paper) / 0.62) 0%,
        rgb(var(--c-paper) / 0.78) 42%,
        rgb(var(--c-paper) / 0.92) 100%),
      url("media/pricing-bg.webp");
  }
}

/* The sections above the cards are transparent so the ground shows.
   The cards' own section keeps a surface, but a translucent one, so
   the X reads faintly behind the grid rather than being walled off. */
body.pr-page .pr-stage {
  background: rgb(var(--c-surface) / 0.38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Dark theme: the art is white marble, which would be a slab of light
   in the middle of a dark page. Dropped right back and desaturated. */
:root[data-theme="dark"] body.pr-page {
  background-image:
    linear-gradient(rgb(var(--c-paper) / 0.90), rgb(var(--c-paper) / 0.90)),
    url("media/pricing-bg.webp");
}

@media (prefers-reduced-motion: reduce) {
  body.pr-page { background-attachment: scroll, scroll; }
}

.pr-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .pr-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}

/* == Spotlight ring =============================================
   A 1px ring that follows the pointer. Two stacked layers, each
   masked so only the 1px padding box paints: the first is the resting
   border, the second is the crimson glow, faded in on hover. */
.pr-spot {
  --spot-x: -9999px;
  --spot-y: -9999px;
  --spot-size: 460px;
  --spot-intensity: 0.55;
  position: relative;
  padding: 6px;
  height: 100%;
}
.pr-spot::before,
.pr-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.pr-spot::before { background: rgb(var(--c-line)); }
.pr-spot::after {
  background: radial-gradient(circle var(--spot-size) at var(--spot-x) var(--spot-y),
    rgb(var(--c-accent) / var(--spot-intensity)), transparent 60%);
  opacity: 0;
  transition: opacity 220ms ease;
}
.pr-spot:hover::after { opacity: 1; }

/* The lead card keeps a crimson edge whether or not the pointer is
   anywhere near it - that is the part that reads as "this one". */
.pr-spot--lead::before { background: rgb(var(--c-accent) / 0.55); }
.pr-spot--lead { --spot-intensity: 0.9; }
.pr-spot--lead::after { opacity: 0.35; }
.pr-spot--lead:hover::after { opacity: 1; }

/* == Card ======================================================= */
.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  background: rgb(var(--c-surface));
  border: 1px solid rgb(var(--c-line));
}
@media (min-width: 768px) { .pr-card { padding: 2rem; } }

.pr-card--lead {
  background: rgb(var(--c-ink));
  border-color: rgb(var(--c-ink));
  color: rgb(var(--c-paper));
  box-shadow: 0 18px 40px -22px rgb(var(--c-shadow) / 0.55);
}

.pr-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.3rem 0.75rem;
  background: rgb(var(--c-accent));
  color: rgb(var(--c-on-accent));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* == Head ======================================================= */
.pr-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--c-ink-soft));
}
.pr-card--lead .pr-eyebrow { color: rgb(var(--c-paper) / 0.62); }

.pr-rule {
  margin-top: 0.9rem;
  border-top: 1px solid rgb(var(--c-line));
}
.pr-card--lead .pr-rule { border-top-color: rgb(var(--c-paper) / 0.16); }

/* The tag sits under the number rather than beside it. Beside it, the
   three columns are equal but the prices are not, so a 50 keeps its
   tag inline while a 500 pushes its own to a second line and the row
   stops lining up across the cards. Stacked, they always agree. */
.pr-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 2rem;
}
.pr-amount {
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgb(var(--c-ink));
}
.pr-card--lead .pr-amount { color: rgb(var(--c-paper)); }

.pr-note {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgb(var(--c-ink-mid));
}
.pr-card--lead .pr-note { color: rgb(var(--c-paper) / 0.72); }

/* == Call to action ============================================= */
.pr-foot { margin-top: 1.6rem; }
.pr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 1px solid rgb(var(--c-line-firm));
  background: rgb(var(--c-surface));
  color: rgb(var(--c-ink));
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.pr-cta:hover { border-color: rgb(var(--c-accent)); color: rgb(var(--c-accent-text)); }
.pr-cta:active { transform: translateY(1px); }

.pr-cta--solid {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent));
  color: rgb(var(--c-on-accent));
}
.pr-cta--solid:hover {
  border-color: rgb(var(--c-accent-hi));
  background: rgb(var(--c-accent-hi));
  color: rgb(var(--c-on-accent));
}

/* == Feature list ===============================================
   One shared list of seven, so a tick and a cross line up across the
   three cards and the difference can be read across rather than
   guessed at from three different lists. */
.pr-list {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.pr-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgb(var(--c-ink-mid));
}
.pr-list li + li { border-top: 1px solid rgb(var(--c-line)); }
.pr-list li.is-off { color: rgb(var(--c-ink-soft)); }

.pr-card--lead .pr-list li { color: rgb(var(--c-paper) / 0.88); }
.pr-card--lead .pr-list li + li { border-top-color: rgb(var(--c-paper) / 0.16); }
.pr-card--lead .pr-list li.is-off { color: rgb(var(--c-paper) / 0.42); }

.pr-mark {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--c-line));
}
.pr-mark svg { width: 12px; height: 12px; display: block; }
.pr-mark--yes {
  border-color: rgb(var(--c-accent) / 0.55);
  background: rgb(var(--c-accent) / 0.10);
  color: rgb(var(--c-accent-text));
}
.pr-mark--no {
  border-color: rgb(var(--c-line));
  background: transparent;
  color: rgb(var(--c-ink-soft));
}
.pr-card--lead .pr-mark--yes {
  border-color: rgb(var(--c-accent));
  background: rgb(var(--c-accent));
  color: rgb(var(--c-on-accent));
}
.pr-card--lead .pr-mark--no {
  border-color: rgb(var(--c-paper) / 0.20);
  color: rgb(var(--c-paper) / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .pr-spot::after { transition: none; }
  .pr-cta { transition: none; }
  .pr-cta:active { transform: none; }
}

/* ───────────────────────────────────────────────────────────────
   Extras and add-ons

   Every price on the page, folded into groups so the list reads as a
   choice rather than a wall. Built by pricing.js from the catalogue,
   so nothing here hard-codes a figure.
   ─────────────────────────────────────────────────────────────── */
.pr-extras {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid rgb(var(--c-line));
}

.pr-extras-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.pr-extras-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--c-accent-text));
  white-space: nowrap;
}
.pr-extras-link:hover { text-decoration: underline; text-underline-offset: 3px; }

[data-pr-extras] { margin-top: 1.75rem; }

.pr-x-group { border-bottom: 1px solid rgb(var(--c-line)); }
.pr-x-group:first-child { border-top: 1px solid rgb(var(--c-line)); }

.pr-x-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* 52px of target, because this is the row a thumb has to hit. */
  min-height: 52px;
  padding: 0.9rem 0;
  cursor: pointer;
  list-style: none;
}
.pr-x-group > summary::-webkit-details-marker { display: none; }

.pr-x-group-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(var(--c-ink));
}
.pr-x-group-n {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: rgb(var(--c-ink-soft));
}
/* The chevron is drawn here rather than shipped as an icon, so it can
   rotate without a second element to keep in step. */
.pr-x-group-n::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms cubic-bezier(.22,1,.36,1);
}
.pr-x-group[open] .pr-x-group-n::after { transform: translateY(1px) rotate(-135deg); }

.pr-x-body { padding: 0 0 1.1rem; }
.pr-x-note {
  margin: 0 0 0.7rem;
  font-size: 0.8125rem;
  color: rgb(var(--c-ink-soft));
}

.pr-x-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.42rem 0;
  font-size: 0.875rem;
  color: rgb(var(--c-ink-mid));
}
.pr-x-name { min-width: 0; }
.pr-x-price {
  flex: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(var(--c-ink));
  white-space: nowrap;
}
.pr-x-from, .pr-x-per {
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 400;
  color: rgb(var(--c-ink-soft));
}

.pr-extras-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgb(var(--c-line));
  background: rgb(var(--c-surface));
}
.pr-extras-foot p {
  margin: 0;
  max-width: 40ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgb(var(--c-ink-mid));
}

@media (prefers-reduced-motion: reduce) {
  .pr-x-group-n::after { transition: none; }
}

/* ── On a phone ──────────────────────────────────────────────────
   One card fills the screen at this size, so the desktop proportions
   read as oversized: the price alone was taller than the sentence
   explaining it. Everything steps down together, and the card keeps
   its structure. */
@media (max-width: 767px) {
  .pr-rail { gap: 1rem; margin-top: 2rem; }
  .pr-card { padding: 1.15rem 1.1rem 1.25rem; }
  .pr-eyebrow { font-size: 0.625rem; }
  .pr-rule { margin-top: 0.7rem; }
  .pr-figure { margin-top: 1.1rem; gap: 0.5rem; }
  .pr-amount { font-size: 1.85rem; }
  .pr-badge { padding: 0.25rem 0.6rem; font-size: 0.625rem; }
  .pr-note { margin-top: 0.7rem; font-size: 0.8125rem; line-height: 1.5; }
  .pr-foot { margin-top: 1.1rem; }
  .pr-cta { min-height: 42px; padding: 0 1rem; font-size: 0.875rem; }
  .pr-list { margin-top: 1.1rem; }
  .pr-list li { gap: 0.6rem; padding: 0.55rem 0; font-size: 0.8125rem; line-height: 1.4; }
  .pr-mark { width: 1.05rem; height: 1.05rem; }
  .pr-mark svg { width: 10px; height: 10px; }
  .tag-once { padding: 0.2rem 0.5rem; font-size: 0.625rem; }
}

/* ── The three packages on the landing page ──────────────────────
   Chunky cards, a little wider than they are tall, three across. The
   landing page shows the shape of the offer — the four lines that
   separate the packages and the price — and the pricing page carries
   the full seven-line comparison, so the card here can be short. */
@media (min-width: 1024px) {
  #pricing .pr-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

  #pricing .pr-card {
    display: flex; flex-direction: column;
    padding: 1.45rem 1.5rem 1.35rem;
  }
  #pricing .pr-rule { margin-top: 0.7rem; }
  #pricing .pr-figure { margin-top: 0.85rem; }
  #pricing .pr-amount { font-size: 2.3rem; }
  #pricing .pr-note {
    margin-top: 0.55rem; font-size: 0.8125rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* the whole comparison, because the difference between the three is
     the thing the section exists to show */
  #pricing .pr-list { margin-top: 0.8rem; }
  #pricing .pr-list li { padding: 0.34rem 0; font-size: 0.8125rem; }

  #pricing .pr-foot { margin-top: auto; padding-top: 0.9rem; }
  #pricing .pr-cta { width: 100%; min-height: 44px; }
  #pricing .pr-badge { top: 1rem; right: 1.1rem; }
}

/* ── A few of the 34, on the two builds that include them all ──── */
.pr-best { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgb(var(--c-line)); }
.pr-card--lead .pr-best { border-top-color: rgb(var(--c-paper) / 0.16); }
.pr-best-l {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(var(--c-ink-soft));
}
.pr-card--lead .pr-best-l { color: rgb(var(--c-paper) / 0.62); }
.pr-best-list { margin-top: 0.5rem; display: grid; gap: 0.3rem; }
.pr-best-list li {
  position: relative; padding-left: 0.85rem;
  font-size: 0.8125rem; line-height: 1.35; color: rgb(var(--c-ink-mid));
}
.pr-card--lead .pr-best-list li { color: rgb(var(--c-paper) / 0.88); }
.pr-best-list li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgb(var(--c-accent));
}
.pr-card--lead .pr-best-list li::before { background: rgb(var(--c-paper)); }
.pr-best-link {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.75rem;
  font-size: 0.8125rem; font-weight: 600; color: rgb(var(--c-accent-text));
  text-decoration: underline; text-underline-offset: 4px;
}
.pr-card--lead .pr-best-link { color: rgb(var(--c-paper)); }
.pr-best-link span { transition: transform 180ms ease; }
.pr-best-link:hover span { transform: translateX(3px); }

/* the landing page keeps its short comparison, so the extra block
   stays out of the four-line list rule above */
@media (min-width: 1024px) {
  #pricing .pr-best-list li { font-size: 0.78125rem; }
}

/* ── What we do ──────────────────────────────────────────────────
   Four things, said plainly, before any number appears. Numbered
   rather than iconed: the page already has enough marks on it. */
.wd-grid { display: grid; gap: 1px; background: rgb(var(--c-line)); border: 1px solid rgb(var(--c-line)); }
@media (min-width: 700px) { .wd-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .wd-grid { grid-template-columns: repeat(4, 1fr); } }
.wd-card { display: flex; flex-direction: column; padding: 1.5rem 1.4rem 1.4rem; background: rgb(var(--c-paper)); }
.wd-n {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.18em; color: rgb(var(--c-accent));
}
.wd-h { margin-top: 0.9rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: rgb(var(--c-ink)); }
.wd-p { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.6; color: rgb(var(--c-ink-mid)); }
.wd-a {
  margin-top: 1.1rem; padding-top: 0.9rem;
  border-top: 1px solid rgb(var(--c-line));
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8125rem; font-weight: 600; color: rgb(var(--c-accent-text));
}
.wd-a span { transition: transform 180ms ease; }
.wd-a:hover span { transform: translateX(3px); }
.wd-card:hover .wd-h { color: rgb(var(--c-accent-text)); }

/* ── The price is agreed, not taken ──────────────────────────────
   The line under the cards was a footnote for the one question every
   visitor has at that moment, so it is a panel now. */
.pr-agree {
  margin-top: 2rem; padding: 1.75rem 1.6rem;
  border: 1px solid rgb(var(--c-line-firm));
  background: rgb(var(--c-accent-tint));
}
@media (min-width: 768px) { .pr-agree { padding: 2.25rem 2.25rem; } }
.pr-agree-k {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--c-ink-soft));
}
.pr-agree-h {
  margin-top: 0.7rem;
  font-family: 'Outfit', 'Inter', sans-serif; font-weight: 400; font-variation-settings: 'wght' 584;
  letter-spacing: -0.04em; line-height: 1.05;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: rgb(var(--c-ink));
}
.pr-agree-p { margin-top: 0.9rem; max-width: 46rem; font-size: 0.9375rem; line-height: 1.65; color: rgb(var(--c-ink-mid)); }
.pr-agree-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; }
.pr-agree-a { font-size: 0.875rem; font-weight: 600; color: rgb(var(--c-accent-text)); }
.pr-agree-a span { display: inline-block; transition: transform 180ms ease; }
.pr-agree-a:hover span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) { .wd-a span, .pr-agree-a span { transition: none; } }

/* ── The price that is agreed rather than printed ────────────────
   The last card has no figure, so the word takes the figure's place
   and steps down a size — it is a label, not a number. */
.pr-amount--quote { font-size: 0.72em; letter-spacing: -0.03em; }

/* Six packages wrap to two rows; the badge on the premium card sits
   where "most popular" does on the middle one. */
@media (min-width: 900px) { .pr-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── The two cards on the home page ──────────────────────────────
   The landing page used to carry all six packages, which meant six
   tall cards and a comparison table before the visitor had decided
   whether the range was for them at all. These two answer that in a
   glance — a range with a figure, and the one that has no figure
   because it is agreed — and the packages page carries the detail.
   Deliberately small: they are a signpost, not the shop. */
.pr-two {
  display: grid; gap: 0.9rem;
  grid-template-columns: 1fr;
  max-width: 44rem;
}
@media (min-width: 640px) { .pr-two { grid-template-columns: 1fr 1fr; gap: 1rem; } }

.pr-two-card {
  display: flex; flex-direction: column;
  padding: 1.35rem 1.4rem 1.2rem;
  background: rgb(var(--c-paper));
  border: 1px solid rgb(var(--c-line-firm));
  text-decoration: none; color: inherit;
  transition: border-color 200ms ease, transform 200ms ease;
}
.pr-two-card:hover { border-color: rgb(var(--c-accent)); transform: translateY(-2px); }

.pr-two-l {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgb(var(--c-ink-soft));
}

.pr-two-fig {
  margin-top: 0.55rem;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-size: 1.75rem; font-weight: 600; letter-spacing: -0.035em;
  line-height: 1.05; color: rgb(var(--c-ink));
  white-space: nowrap;
}
.pr-two-dash { margin: 0 0.2em; color: rgb(var(--c-ink-soft)); font-weight: 400; }
.pr-two-fig--word { color: rgb(var(--c-accent)); }

.pr-two-note {
  margin-top: 0.6rem; flex: 1;
  font-size: 0.8125rem; line-height: 1.55; color: rgb(var(--c-ink-mid));
}

.pr-two-go {
  margin-top: 1rem;
  font-size: 0.8125rem; font-weight: 600; color: rgb(var(--c-accent));
}
.pr-two-go .arrow { margin-left: 0.15rem; }

@media (max-width: 400px) {
  .pr-two-fig { font-size: 1.5rem; }
}

/* ── The band the two cards sit in ───────────────────────────────
   On a phone the two small cards under the paragraph are the whole
   section and they read well. On a desktop that left half of the page
   empty, which made a pricing section look like an afterthought. The
   same words move into a column of their own, the cards take the other,
   and the six packages get named underneath — a range with no names
   below it is a figure nobody can check. */
.pr-band { display: grid; gap: 2.25rem; }

@media (min-width: 1024px) {
  .pr-band {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3.5rem;
    align-items: start;
  }
  .pr-band .pr-two { max-width: none; align-content: start; }
  .pr-band .pr-two-card { padding: 1.75rem 1.75rem 1.5rem; }
  .pr-band .pr-two-fig { font-size: 2.15rem; margin-top: 0.7rem; }
  .pr-band .pr-two-note { font-size: 0.875rem; margin-top: 0.75rem; }
  .pr-band .pr-two-go { margin-top: 1.4rem; }
}

/* The named six. Desktop only: the phone has the cards and the packages
   page one tap away, and six more rows there would bury them. */
.pr-mini { display: none; }

@media (min-width: 1024px) {
  .pr-mini {
    display: block;
    margin-top: 2rem;
    border-top: 1px solid rgb(var(--c-line-firm));
  }
  .pr-mini li { border-bottom: 1px solid rgb(var(--c-line)); }
  .pr-mini a {
    display: flex; align-items: baseline; gap: 1rem;
    padding: 0.62rem 0.1rem;
    text-decoration: none; color: inherit;
    transition: color 160ms ease;
  }
  .pr-mini a:hover { color: rgb(var(--c-accent)); }
  .pr-mini-n { font-size: 0.875rem; font-weight: 500; }
  .pr-mini-p {
    margin-left: auto;
    font-size: 0.875rem; font-weight: 600; white-space: nowrap;
    color: rgb(var(--c-ink));
  }
  .pr-mini a:hover .pr-mini-p { color: rgb(var(--c-accent)); }
  .pr-mini-p--word { color: rgb(var(--c-ink-soft)); font-weight: 500; }
}