/* Pricing — page CSS
 * ============================================================================================
 * A REDESIGN, not a 1:1 port. There is no `Pricing.dc.html` in the 2026-08 package, so unlike
 * the other 32 prototypes this file is not reproducing a reference's metric deltas — it is the
 * page's own design, written in the set's vocabulary so it sits beside them without a seam.
 *
 * WHAT IT REPLACES: `/r/14` (34KB), which re-skinned a third-party app by aliasing our tokens
 * onto its names (`--navy: var(--color-ink-royal)`, `--coral: var(--color-coral-500)`, a local
 * `--radius: 12px`) and then appending a "design-system re-skin layer" to fight the result.
 * Nothing here aliases anything: DS tokens are used directly, and the radii are the DS scale.
 *
 * SCOPE: every rule under `.pricing-page`. Two exceptions are marked where they occur.
 *
 * THE ONE STRUCTURAL RULE WORTH KNOWING: the tool renders its own markup from page.js, so the
 * classes it emits can never be seen by Tailwind. Everything JS writes therefore uses either a
 * DS component class (compiled) or a `dc-` class defined below — and no Tailwind utility. The
 * static markup in page.html is the only place utilities appear, where the §4 audit can see
 * them. Mixing the two is how a JS-built UI silently renders unstyled.
 * ============================================================================================ */

.pricing-page {
  background: var(--color-page-bg);

  /* Inter explicitly — `.app` sets only the body colour, so a bare <p> inherits system sans. */
  font-family: var(--font-sans);

  --dc-shadow-tile: 0 8px 22px rgba(15, 26, 79, 0.08);
  --dc-shadow-lift: 0 18px 44px rgba(15, 26, 79, 0.12);
  --dc-basket-h: 84px;
  /* 260px, down from the live page's 300px (owner, 2026-08-31), with the column gap tightened
     40 -> 32. That hands the main column +48px: 860 -> 908px inside the 1200 container. 260 still
     clears the longest row label — "Multi-academy trust" and "Options and subject choices" both
     fit on one line, which is what sets the floor here, not the width itself. */
  --dc-rail-w: 260px;
  --dc-rail-top: 76px;   /* .prototype-site-header is fixed at 60px + the rail's 16px gap */
}

/* Anything the tool toggles with [hidden] must actually hide. A `dc-` class carrying a
   `display` is 0-2-0 and beats the UA's `[hidden]` rule (0-1-0), so each one re-states it
   at its own specificity. This is the shorthand-override trap in ai-docs/coding-standards.md
   §2 in its other form: not a shorthand erasing a longhand, but a class out-ranking a
   built-in. Deleting the loser is not an option here — the display IS wanted when shown. */
.pricing-page [hidden] { display: none; }
.pricing-page .dc-basket[hidden] { display: none; }
/* (.dc-rail and .dc-switch re-state it beside their own display, further down.) */

/* ── Vertical rhythm ────────────────────────────────────────────────────────────────────── */
/* The hero's top pad is owned set-wide by _shared/page-shared.css §1 (128px). */
.pricing-page .dc-py-88   { padding-top: 88px; padding-bottom: 88px; }
.pricing-page .dc-py-56-96 { padding-top: 56px; padding-bottom: 96px; }

/* ── Display type ───────────────────────────────────────────────────────────────────────── */
.pricing-page [class*="dc-t-"] {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Zero-specificity defaults so an ordinary margin utility still wins (§2 rule 5). Written as
   a plain descendant selector this would be 0-2-0 and would silently beat every `mt-*`. */
:where(.pricing-page [class*="dc-t-"]) {
  margin: 0;
  text-wrap: balance;
}

.pricing-page .dc-t-72 { font-size: clamp(38px, 5.6vw, 72px); line-height: 1.0;  letter-spacing: -0.035em; }
.pricing-page .dc-t-42 { font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1;  letter-spacing: -0.025em; }
.pricing-page .dc-t-30 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.02em; }
.pricing-page .dc-t-22 { font-size: 22px; line-height: 1.2;  letter-spacing: -0.018em; }
.pricing-page .dc-t-19 { font-size: 19px; line-height: 1.25; letter-spacing: -0.014em; }
.pricing-page .dc-t-16 { font-size: 16px; line-height: 1.3;  letter-spacing: -0.01em; }

/* ── Body steps, named by px ────────────────────────────────────────────────────────────── */
.pricing-page .dc-lede    { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); }
.pricing-page .dc-body-15 { font-size: 15px;   line-height: 1.6; color: var(--color-ink-soft); margin: 0; }
.pricing-page .dc-body-14 { font-size: 14px;   line-height: 1.6; color: var(--color-ink-soft); margin: 0; }
.pricing-page .dc-body-13 { font-size: 13px;   line-height: 1.5; color: var(--color-ink-soft); margin: 0; }
.pricing-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgb(255 255 255 / 0.92); }

/* ── Mono labels ────────────────────────────────────────────────────────────────────────── */
.pricing-page .dc-eyebrow,
.pricing-page [class*="dc-label-"] {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
}
.pricing-page .dc-eyebrow {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--color-coral-500);
}
.pricing-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: 0.09em; color: var(--color-ink-mute); }
.pricing-page .dc-label-10 { font-size: 10px; letter-spacing: 0.08em; color: var(--color-ink-mute); }

/* ── Measures ───────────────────────────────────────────────────────────────────────────── */
.pricing-page .dc-measure-620 { max-width: 620px; }
.pricing-page .dc-measure-44ch { max-width: 44ch; }

/* ── Hero glow ──────────────────────────────────────────────────────────────────────────── */
.pricing-page .dc-glow-top {
  width: 720px; height: 720px; left: 50%; top: -430px;
  transform: translateX(-50%); filter: none;
}

/* ── The tool: a sticky rail beside a two-column grid ───────────────────────────────────── */
/* THE LAYOUT IS THE POINT (owner, 2026-08-31). A 300px chooser rail that stays on screen while
   you read results, and two product columns rather than three. Both reduce what you have to
   hold at once, which is why the live page is built this way; an earlier pass here flattened
   the rail into full-width bands for visual consistency with the other 32 prototypes and lost
   that. Consistency was the wrong thing to optimise on the one page that is a tool.
   Rail width and the `--dc-rail-top` offset are the live page's own numbers (300 / 74), with
   the offset re-derived from OUR chrome: `.prototype-site-header` is position:fixed at 60px
   (52px scrolled), so 76px clears it with the rail's own 16px gap. */
.pricing-page .dc-build {
  display: grid;
  grid-template-columns: var(--dc-rail-w) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.pricing-page .dc-span { grid-column: 1 / -1; }

/* Reserve the basket's height ONLY while the basket is up. The basket is position:fixed, so it
   overlays whatever is under it — without this the last row of products sits behind it. Padding
   unconditionally instead left ~84px of dead space under the tool on every visit that never
   adds anything, which is most of them. */
.pricing-page:has(.dc-basket:not([hidden])) .dc-build { padding-bottom: var(--dc-basket-h); }

.pricing-page .dc-rail {
  position: sticky;
  top: var(--dc-rail-top);
  /* Cap to the viewport and scroll internally, so a long needs list can never push the rail
     taller than the screen and defeat the stickiness. */
  max-height: calc(100vh - var(--dc-rail-top) - 16px);
  overflow-y: auto;
  padding-right: 4px;
}

/* The rail is navigation for the RESULTS. On a product detail there is nothing for it to
   navigate, so it goes and the switcher takes over — the live page's behaviour. */
.pricing-page .dc-rail[hidden] { display: none; }

.pricing-page .dc-main { min-width: 0; }

/* THE RAIL GOING AWAY MUST COLLAPSE ITS TRACK. `grid-template-columns: 300px 1fr` is explicit,
   so the tracks exist whether or not anything occupies them — with the rail `display: none` on a
   detail view, `.dc-main` is auto-placed into the 300px RAIL track and renders at a third of its
   width. Measured before the fix: 430px of content in a 1440px viewport, with 1000px of empty
   page beside it.
   Worth recording HOW this was found: it is invisible to a computed-style probe. Overflow stayed
   0 (squashed content does not overflow) and `.dc-plan-grid` still reported two equal columns —
   correct, inside a parent that was itself wrong. Only the screenshot showed it. That is
   ai-docs/coding-standards.md §2 rule 7: layout bugs of this class throw no error and read
   perfectly in the markup. */
.pricing-page .dc-build:has(.dc-rail[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* NO divider between the rail and the main column (owner, 2026-08-31). A hairline was here to
   separate them without the live page's faint gradient panel — which would have been a surface
   behind the white cards, i.e. card-on-card. Removed: the 40px grid gap already separates them,
   and the rail's own white rows read as a group without a rule drawn round them. Nothing
   replaces it; the gap is the separation. */

/* Back badge — the rail's step-2 header, and the way back to step 1 */
.pricing-page .dc-rail-back {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  text-align: left;
  cursor: pointer;
  transition-property: border-color, background-color;
  transition-duration: 150ms;
}
.pricing-page .dc-rail-back:hover { border-color: var(--color-ink-mute); background: var(--color-page-bg); }
.pricing-page .dc-rail-back:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pricing-page .dc-rail-back-caret { font-size: 11px; color: var(--color-ink-mute); }
.pricing-page .dc-rail-back-icon { font-size: 15px; }
.pricing-page .dc-rail-back-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.15;
  color: var(--color-ink-deep);
}

/* Both rail lists are a single vertical column — the live page's `1fr` — so a choice is one
   scan down rather than a two-dimensional search. */
.pricing-page .dc-rail-list { display: grid; grid-template-columns: 1fr; gap: 6px; }

/* Step 1 · school type, as rail rows */
.pricing-page .dc-type {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  text-align: left;
  cursor: pointer;
  transition-property: border-color, background-color, box-shadow;
  transition-duration: 150ms;
}
.pricing-page .dc-type:hover { border-color: var(--color-ink-mute); }
.pricing-page .dc-type:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pricing-page .dc-type-on {
  border-color: var(--color-coral-500);
  background: var(--color-coral-100);
}
.pricing-page .dc-type-icon { font-size: 17px; flex-shrink: 0; }
.pricing-page .dc-type-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.15;
  color: var(--color-ink-deep);
}

/* Step 2 · needs, as rail rows with a tick box. Not pills: a pill row wraps into an
   unpredictable shape, and these are checkboxes in behaviour — multi-select, order-independent
   — so they should look like a list of checkboxes. */
.pricing-page .dc-need {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-royal);
  cursor: pointer;
  transition-property: border-color, background-color;
  transition-duration: 150ms;
}
.pricing-page .dc-need:hover { border-color: var(--color-ink-mute); }
.pricing-page .dc-need:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pricing-page .dc-need-on {
  border-color: var(--color-coral-500);
  background: var(--color-coral-100);
  color: var(--color-ink-deep);
}
.pricing-page .dc-need-box {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xs);
  background: var(--color-paper);
  font-size: 9px;
  color: transparent;
}
.pricing-page .dc-need-on .dc-need-box {
  border-color: var(--color-coral-500);
  background: var(--color-coral-500);
  color: var(--color-paper);
}
/* FE's Admissions area cannot be dropped — it is the base of every FE plan, so unpicking it
   would show a price for a platform without its own foundation. Live behaviour, kept. */
.pricing-page .dc-need-locked { cursor: default; opacity: 0.85; }
.pricing-page .dc-need-locked:hover { border-color: var(--color-coral-500); }

/* The product switcher, top of the main column on a detail view */
.pricing-page .dc-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-rule);
}
.pricing-page .dc-switch[hidden] { display: none; }
.pricing-page .dc-switch-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  background: var(--color-paper);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-ink-royal);
  cursor: pointer;
  transition-property: border-color, background-color, color;
  transition-duration: 150ms;
}
.pricing-page .dc-switch-item:hover { border-color: var(--color-ink-mute); }
.pricing-page .dc-switch-item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pricing-page .dc-switch-on {
  border-color: var(--color-ink-deep);
  background: var(--color-ink-deep);
  color: var(--color-paper);
}
/* 18px in the switcher chip. The mark keeps its white ground on the active navy chip, which is
   deliberate — it reads as the product's own tile sitting on the selection, and inverting a
   brand mark to match a background is not ours to do. */
.pricing-page .dc-switch-logo { display: block; width: 18px; height: 18px; flex-shrink: 0; }

/* Step 3a · the product grid */
.pricing-page .dc-results-head { margin-bottom: 4px; }
/* TWO columns, fixed — not auto-fill. Owner's decision (2026-08-31): fewer cards per screen is
   less to weigh up at once, and inside a 1200px container minus a 300px rail there is room for
   three, so auto-fill would have silently given three. The count is the design, so it is
   declared rather than derived. */
.pricing-page .dc-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pricing-page .dc-product {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2xl);
  background: var(--color-paper);
  text-align: left;
  cursor: pointer;
  transition-property: box-shadow, transform, border-color;
  transition-duration: 200ms;
}
.pricing-page .dc-product:hover {
  box-shadow: var(--dc-shadow-lift);
  transform: translateY(-2px);
  border-color: transparent;
}
.pricing-page .dc-product:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pricing-page .dc-product-head { display: flex; align-items: flex-start; gap: 12px; }
/* The mark is a 48x48 SVG that already draws its own white rounded-rect with a 1px blue rule,
   so this is a SIZING BOX ONLY. It used to carry a page-bg fill and a 12px radius for the Font
   Awesome stand-in; keeping those behind a real mark put a tile inside a tile, with two
   different corner radii 1px apart. */
.pricing-page .dc-product-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
}
.pricing-page .dc-logo { display: block; width: 100%; height: 100%; }
.pricing-page .dc-product-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-ink-deep);
  margin: 0;
}
.pricing-page .dc-product-extra {
  font-weight: 400;
  font-size: 14.5px;
  color: var(--color-ink-soft);
}
.pricing-page .dc-product-tagline {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
.pricing-page .dc-product-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.pricing-page .dc-product-feat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  background: var(--color-page-bg);
  font-size: 12.5px;
  color: var(--color-ink-royal);
}
.pricing-page .dc-product-feat i { font-size: 9px; color: var(--color-ok-green); }
.pricing-page .dc-product-types { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pricing-page .dc-product-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}
.pricing-page .dc-product-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--color-ink-deep);
}
.pricing-page .dc-product-go {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-coral-500);
}

.pricing-page .dc-empty {
  grid-column: 1 / -1;
  padding: 48px 24px;
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius-2xl);
  text-align: center;
}

/* Step 3b · one product */
.pricing-page .dc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-info-blue);
  cursor: pointer;
}
.pricing-page .dc-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.pricing-page .dc-back:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.pricing-page .dc-detail-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 34px; }
/* Same again at detail size. The shadow goes with the fill: a soft shadow under a mark that
   draws its own hairline border reads as a second, misaligned edge. */
.pricing-page .dc-detail-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  display: inline-flex;
}
.pricing-page .dc-detail-tagline { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--color-ink-soft); max-width: 620px; }

/* Volume band selector */
.pricing-page .dc-volume { margin-bottom: 30px; }
.pricing-page .dc-volume-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pricing-page .dc-volume-opt {
  padding: 8px 14px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  font-family: var(--font-label);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-ink-royal);
  cursor: pointer;
  transition-property: border-color, background-color, color;
  transition-duration: 150ms;
}
.pricing-page .dc-volume-opt:hover { border-color: var(--color-ink-mute); }
.pricing-page .dc-volume-opt:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pricing-page .dc-volume-on {
  border-color: var(--color-ink-deep);
  background: var(--color-ink-deep);
  color: var(--color-paper);
}

/* Plan cards */
/* Plan cards are CAPPED at 380px, not `1fr`. With the rail's track collapsed the detail view
   spans the full 1200px container, and `1fr` stretched a two-plan product (Futures, Bursary+)
   to 592px a card — a £65 price in half a metre of white. 380 is where three FE plans still fit
   in one row (3x380 + 2x16 = 1172) and one plan does not look like a banner.
   `justify-content: start` matters: without it auto-fit's leftover space is distributed and the
   cards drift apart rather than sitting as a group. */
.pricing-page .dc-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: start;
  gap: 16px;
}
.pricing-page .dc-plan {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2xl);
  background: var(--color-paper);
}
.pricing-page .dc-plan-in {
  border-color: var(--color-coral-500);
  box-shadow: 0 0 0 1px var(--color-coral-500);
}
.pricing-page .dc-plan-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); }
.pricing-page .dc-plan-price { display: flex; align-items: baseline; gap: 3px; margin-top: 22px; color: var(--color-ink-deep); }
.pricing-page .dc-plan-cur { font-family: var(--font-heading); font-weight: 700; font-size: 24px; }
.pricing-page .dc-plan-amt { font-family: var(--font-heading); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.03em; }
.pricing-page .dc-plan-per { font-size: 15px; color: var(--color-ink-soft); margin-left: 3px; }
.pricing-page .dc-plan-annual { margin-top: 8px; font-size: 14px; color: var(--color-ink-soft); }
.pricing-page .dc-plan-save {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-ok-green-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-ok-green);
}
.pricing-page .dc-plan-quote {
  margin-top: 22px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-ink-deep);
}
.pricing-page .dc-plan-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pricing-page .dc-plan-mods { margin-top: auto; padding-top: 22px; }
.pricing-page .dc-plan-mod-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* FE module detail */
.pricing-page .dc-mods { margin-top: 44px; }
.pricing-page .dc-mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.pricing-page .dc-mod {
  padding: 24px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2xl);
  background: var(--color-paper);
}
.pricing-page .dc-mod-head { display: flex; align-items: center; gap: 10px; }
.pricing-page .dc-mod-icon { font-size: 18px; }
.pricing-page .dc-mod-feats {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.pricing-page .dc-mod-feat {
  display: flex;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--color-ink-soft);
}
.pricing-page .dc-mod-feat i { font-size: 10px; color: var(--color-ok-green); margin-top: 4px; flex-shrink: 0; }

/* Everything included */
.pricing-page .dc-included { margin-top: 44px; }
.pricing-page .dc-included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 28px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* Icon accents — the live app's per-product colour, on our product tokens. */
.pricing-page .dc-ic-navy   { color: var(--color-product-navy); }
.pricing-page .dc-ic-coral  { color: var(--color-product-coral); }
.pricing-page .dc-ic-blue   { color: var(--color-product-blue); }
.pricing-page .dc-ic-sky    { color: var(--color-product-sky); }
.pricing-page .dc-ic-green  { color: var(--color-product-green); }

/* ── The basket ─────────────────────────────────────────────────────────────────────────── */
/* The one dark surface on the page. Fixed, so it lives outside every section (a fixed child of
   an `overflow: hidden` section is clipped). Navy-alpha shadows are invisible on the band, so
   this uses the on-dark elevation token. */
.pricing-page .dc-basket {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: block;
  padding: 12px 24px;
  background: var(--color-dark-band);
  box-shadow: var(--shadow-dark);
}
.pricing-page .dc-basket-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: 1200px;
  margin-inline: auto;
}
.pricing-page .dc-basket-items { display: flex; flex-wrap: wrap; gap: 8px; }
.pricing-page .dc-basket-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 13px;
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.07);
}
.pricing-page .dc-basket-name { font-size: 13.5px; font-weight: 600; color: var(--color-paper); }
.pricing-page .dc-basket-plan { font-size: 12px; color: var(--color-ink-mute); }
.pricing-page .dc-basket-price { font-size: 13.5px; font-weight: 600; color: var(--color-on-dark-body); }
.pricing-page .dc-basket-x {
  font-size: 15px;
  line-height: 1;
  color: var(--color-ink-mute);
  cursor: pointer;
}
.pricing-page .dc-basket-x:hover { color: var(--color-paper); }
.pricing-page .dc-basket-sum { display: flex; align-items: center; gap: 16px; }
.pricing-page .dc-basket-total {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  color: var(--color-paper);
}
.pricing-page .dc-basket-was {
  margin-left: 7px;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-ink-mute);
  text-decoration: line-through;
}
.pricing-page .dc-basket-per { font-size: 13px; font-weight: 400; color: var(--color-ink-mute); }
.pricing-page .dc-basket-off {
  display: block;
  margin-top: 1px;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ok-green-bright);
}

/* ── How billing works ──────────────────────────────────────────────────────────────────── */
/* FOUR or TWO or ONE, never three (owner, 2026-08-31). This was `auto-fit, minmax(240px, 1fr)`,
   which resolves to whatever fits — and between roughly 800 and 1050px that is THREE, leaving a
   fourth card alone on a second row. Four facts read as two pairs or a single run; they never read
   as 3 + 1. Explicit tracks are the only way to say that, since auto-fit cannot be told to skip a
   count.
   The 4->2 break is 1080px, one of the package's own breakpoints, chosen because below it a
   quarter-width card leaves ~194px of content and the sentences start breaking badly. 620px is
   already this page's 2->1 step (the rail list and the product grid share it). */
.pricing-page .dc-how-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.pricing-page .dc-how { padding: 26px; }
.pricing-page .dc-how-icon { font-size: 22px; color: var(--color-coral-500); margin-bottom: 14px; display: block; }

/* ── Narrow viewports ───────────────────────────────────────────────────────────────────── */
/* The rail stops being a rail below 980px: it unsticks and sits above the results as a normal
   block, and the cards go to one column. 980 is where a 300px rail plus two readable cards stop
   fitting, measured — not one of the package's own breakpoints, because the package has no page
   shaped like this. */
@media (max-width: 980px) {
  .pricing-page .dc-build { grid-template-columns: 1fr; gap: 32px; }
  .pricing-page .dc-rail { position: static; max-height: none; overflow: visible; padding-right: 0; }
  /* The rail is above the results now, so its list gets the full width and goes two-up rather
     than staying a 300px column with 550px of nothing beside it. The CARDS deliberately stay at
     two: collapsing the rail hands them the whole container, so one column would make a single
     850px-wide card. Two here are ~420px, the same as at desktop. */
  .pricing-page .dc-rail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .pricing-page .dc-how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .pricing-page .dc-rail-list { grid-template-columns: 1fr; }
  .pricing-page .dc-product-grid { grid-template-columns: 1fr; }
  .pricing-page .dc-how-grid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .pricing-page .dc-basket-inner { justify-content: flex-start; }
  .pricing-page .dc-basket-sum { width: 100%; justify-content: space-between; }
  .pricing-page .dc-plan-amt { font-size: 38px; }
}