/* ============================================================
   PRICING — /pricing/ (2026-09-13, first draft)
   ============================================================
   No Figma frame yet: the client's rough HTML wireframe
   (redonk-pricing-wireframe.html) set the section order and the copy deck
   (Redonk-Pricing-Table-R3.docx) the words. Everything else is this build's
   own reading of the site: the services page's sticky green hero with the
   dark panel riding up over it on 96 shoulders, then a white panel doing the
   same over the dark, then the shared footer painted white. The client will
   take this into Figma and refine, so the numbers are round and derived, not
   measured off anything.

   Grounds, top to bottom:
     hero      green, sticky, 896 (800 shows; 96 run on under the shoulders)
     compare   dark panel, 96 shoulders — the three plans and the table
     panel     white, 96 shoulders — add capacity / fixed fee, how it
               works, FAQs
     footer    the shared one, on white (body.rdk-footer-on-light)

   Type is the site's ladder: Display/XL 104 on the hero, Display/L 88 for
   the section titles, Heading/L 40 for the plan names, Heading/XL 46 for
   the offer cards, Heading/M 32 for the steps, Heading/S 28 for the FAQ
   questions. Body runs are all on the body scale in css/tokens.css.

   Everything is --u; the phone block at the end is straight px. Prefix
   `.rdk-price-`. */

/* ============================================================
   1. hero
   ============================================================ */
/* Sticky, like the services hero: the dark panel below slides up over it
   and its rounded shoulders reveal the green. Every section after this
   carries a z-index so the page covers it. */
/* 992, NOT THE DESIGN'S 896 — THE HERO PAYS FOR THE PANEL'S OVERLAP. The
   compare panel rides up 96 on its shoulders, so a 896 hero only ever SHOWS
   800 of itself: the CTA's bottom sits at 772 and the white edge landed 28
   below it, against the 124 of green the design draws under it (client,
   2026-09-14). 896 + 96 puts the visible hero back at the design's own 896
   and the clearance back at 124. Same arrangement as the services hero,
   which is likewise 96 taller than it shows.
   The figure's bottom moves from the hero's clip to the panel's top edge —
   the same 896 either way, and it stays covered at every scroll position
   (the panel's edge rises at 1x against the parallax's 0.08x). */
.rdk-price-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: calc(992 * var(--u));
  background: var(--rdk-green);
  color: var(--rdk-white);
  overflow: clip;
}

.rdk-price-hero__text {
  position: absolute;
  left: calc(88 * var(--u));
  top: calc(234 * var(--u));
  z-index: 1;
  width: calc(980 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* NO RING ANY MORE (node `685:60626`, client 2026-09-14) — the eyebrow is
   bare lime type at 22, cap-trimmed (16.379 on 22 is the cap height). It was
   the 404's ringed pill. The colour is `--rdk-lime-bright`, the file's second
   lime: measured off the design's own pixels the line comes back
   rgb(109,249,32), which is #79ff24 at 90% over the green — `--rdk-lime`
   would give (94,249,22). */
.rdk-price-hero__pill {
  margin: 0 0 calc(16 * var(--u));
  padding: 0;
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(22 * var(--u));
  line-height: 0.744;
  letter-spacing: calc(-0.44 * var(--u));
  color: var(--rdk-lime-bright);
  border: 0;
  opacity: 0.9;
}

/* Display/XL: 104 / 0.94 / -5%, on the node's OWN 819 measure rather than
   the container's 980 — that is what breaks it after "Our". `text-wrap:
   balance` is off with it, or the two fight over where the line ends. */
/* A PHONE-ONLY BREAK after "Your goals." (client, 2026-09-14). The natural
   wrap is fine at 375 and wrong at 430, where it reads "Your goals. Our /
   sleeves rolled up." — the break pins "Our" to the head of line two at every
   phone width. Off above 767, where the node's own 819 measure does it.
   The SPACE before it in the markup is load-bearing: a hidden `<br>`
   contributes nothing at all, so without it the desktop would read
   "goals.Our". And `js/pricing.js` strips it from the DOM before SplitText
   runs — a hidden break is still a break to anything parsing the element. */
.rdk-price-hero__title-break {
  display: none;
}

.rdk-price-hero__title {
  width: 100%;
  max-width: calc(819 * var(--u));
  margin: 0 0 calc(24 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(104 * var(--du));
  line-height: 0.94;
  letter-spacing: calc(-5.2 * var(--du));
  opacity: 0.9;
}

/* The standfirst step (body-l) on a 700 measure — it is a long standfirst
   and the deck's one paragraph, so it stays one.
   THE WHOLE COPY BLOCK IS AT 90%, HEADLINE INCLUDED. That is the node's own
   `opacity: 0.9` on the paragraph group, and it measures exactly: white at
   90% over #00bf00 is rgb(230,249,230), which is what the design renders for
   both the headline and this. The CTA below is a sibling of that group and
   stays pure white. */
.rdk-price-hero__body {
  max-width: calc(700 * var(--u));
  margin: 0 0 calc(56 * var(--u));
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-l);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  font-feature-settings: "ss03" 1, "ss02" 1;
  opacity: 0.9;
}

/* The About CTA (pill + chip, the shove) drawn white on the green, as the
   404 does it — the same geometry, only the colour changes. */
.rdk-price-hero .rdk-about__cta,
.rdk-price-hero .rdk-about__cta-chip {
  color: var(--rdk-white);
  border-color: var(--rdk-white);
}

/* The node states 80 for both halves where the About page's own CTA derives
   its height from the padding. Stated here for the same reason the nav's
   pills state theirs — the label and padding do not add up to it. */
.rdk-price-hero .rdk-about__cta,
.rdk-price-hero .rdk-about__cta-chip {
  height: calc(80 * var(--u));
}

/* THE TWO DONKS, PHOTOGRAPHED (node `685:60626`, client 2026-09-14),
   replacing the flocked megaphone Donk. 610 x 842 at 895 / 104, so the
   figure runs 50 past the hero's 896 and its `overflow: clip` cuts it —
   which is what the design shows, and what the asset's own silhouette
   already does (it ends at the canvas's bottom edge).
   `assets/img/pricing/donks-hero.webp` is the RAW fill, not a render:
   checked first, and this fill carries no adjustments (means (68,137,53)
   against the render's (68,137,54), mean abs difference 5.3/255 — that is
   resampling noise). So the raw is the better source: it is the whole
   figure at 743 x 1024 rather than the render's 610 x 792, which Figma
   slices at the section's bottom edge.
   Three elements as before: the RIG takes GSAP's rise and the scroll
   parallax, the IMG the idle sway. */
.rdk-price-hero__donk-rig {
  position: absolute;
  left: calc(895 * var(--u));
  top: calc(104 * var(--u));
  width: calc(610 * var(--u));
  height: calc(842 * var(--u));
  pointer-events: none;
  will-change: transform;
}

.rdk-price-hero__donk {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  transform-origin: 50% 100%;
  will-change: transform;
}

/* ============================================================
   2. compare — the dark panel
   ============================================================ */
.rdk-price-compare {
  position: relative;
  z-index: 1;
  margin-top: calc(-96 * var(--u));
  padding: calc(120 * var(--u)) calc(88 * var(--u)) calc(160 * var(--u));
  background: var(--rdk-black-green);
  border-radius: calc(96 * var(--u)) calc(96 * var(--u)) 0 0;
  color: var(--rdk-white);
}

/* Display/L in the case-study off-white, 64 above the plans. */
.rdk-price-compare__title {
  margin: 0 0 calc(64 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(88 * var(--du));
  line-height: 1;
  letter-spacing: calc(-3.52 * var(--du));
  color: var(--rdk-off-white);
}

/* ---------- the table ----------
   ONE table: the plan cards ARE its column headers, so the cards and the
   columns under them line up by construction rather than by matching two
   sets of widths. Fixed layout, the label column 296 and the three plan
   columns sharing the rest. */
.rdk-price-table-wrap {
  position: relative;
}

/* The Integrated column's tint, drawn ONCE behind the whole table rather
   than cell by cell — a cell tint breaks at every category row (they span
   all four columns), and it could not reach up into the card. Sized off the
   same 296 the table's first column takes, so the two cannot drift. */
.rdk-price-table-wrap::before {
  content: "";
  position: absolute;
  left: calc(296 * var(--u) + (100% - 296 * var(--u)) / 3);
  width: calc((100% - 296 * var(--u)) / 3);
  top: calc(24 * var(--u));
  bottom: 0;
  background: rgba(0, 191, 0, 0.1);
  border-radius: calc(48 * var(--u));
  pointer-events: none;
}

.rdk-price-table {
  position: relative;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.rdk-price-table col:first-child {
  width: calc(296 * var(--u));
}

/* ---------- the plan cards (the header row) ---------- */
.rdk-price-table thead th {
  padding: calc(24 * var(--u)) calc(12 * var(--u)) calc(48 * var(--u));
  vertical-align: top;
  text-align: left;
  font-weight: inherit;
}

.rdk-price-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: calc(40 * var(--u));
  background: var(--rdk-white);
  border-radius: calc(40 * var(--u));
  color: var(--rdk-black-green);
}

/* Heading/L: 40 / 1 / -2.27%. */
.rdk-price-plan__name {
  margin: 0 0 calc(16 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(40 * var(--du));
  line-height: 1;
  letter-spacing: calc(-0.91 * var(--du));
}

/* body-s. Three lines on every card at this measure; the flex column lets
   the button sit on one line across the row anyway. */
.rdk-price-plan__blurb {
  flex: 1 0 auto;
  margin: 0 0 calc(28 * var(--u));
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-s);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  font-feature-settings: "ss03" 1, "ss02" 1;
  opacity: 0.9;
}

/* "The starting point." / "Everything in Focused, plus:" — the services
   page's brand-face eyebrow, in green, under the button so it reads as the
   lead-in to the column below. */
.rdk-price-plan__from {
  margin: calc(24 * var(--u)) 0 0;
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(17.425 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-0.35 * var(--u));
  color: var(--rdk-green);
}

/* The featured plan: the card goes GREEN, its ink white, its button inverts
   to a white pill, and the deck's "★ Most clients start here." sits over
   its top edge as a lime badge. The deck also carries that line as a legend
   under the table; the badge IS that line, so it is not repeated below. */
.rdk-price-plan--featured {
  background: var(--rdk-green);
  color: var(--rdk-white);
}

.rdk-price-plan--featured .rdk-price-plan__blurb { opacity: 0.9; }
.rdk-price-plan--featured .rdk-price-plan__from { color: var(--rdk-lime); }

.rdk-price-plan__badge {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(15 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-0.3 * var(--u));
  white-space: nowrap;
  color: var(--rdk-black-green);
  background: var(--rdk-lime);
  border-radius: 999px;
}

/* ---------- the plain pill ----------
   "Request pricing" recurs three times, and the two offer cards each carry
   one too — repeated actions take the PLAIN pill, not the pill + chip
   (styleguide: the shove is for the one forward action of a section). The
   nav CTA's geometry: 56 tall, brand 20, fully round. Green on white; on
   the green card it inverts. */
.rdk-price-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(56 * var(--u));
  padding: 0 calc(28 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-0.18 * var(--u));
  white-space: nowrap;
  color: var(--rdk-white);
  background: var(--rdk-green);
  border: calc(3 * var(--u)) solid var(--rdk-green);
  border-radius: 999px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, scale 0.25s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.rdk-price-btn:hover,
.rdk-price-btn:focus-visible {
  background: var(--rdk-black-green);
  border-color: var(--rdk-black-green);
  scale: 1.04;
}

/* The site's green outlined pill — the About CTA's ring without its chip —
   for the two offer cards (client, 2026-09-13). Dark ink on a 3u green ring,
   filling green on hover. */
.rdk-price-btn--outline {
  color: var(--rdk-black-green);
  background: transparent;
  border-color: var(--rdk-green);
}

.rdk-price-btn--outline:hover,
.rdk-price-btn--outline:focus-visible {
  color: var(--rdk-white);
  background: var(--rdk-green);
  border-color: var(--rdk-green);
}

.rdk-price-plan--featured .rdk-price-btn {
  color: var(--rdk-green);
  background: var(--rdk-white);
  border-color: var(--rdk-white);
}

.rdk-price-plan--featured .rdk-price-btn:hover,
.rdk-price-plan--featured .rdk-price-btn:focus-visible {
  color: var(--rdk-black-green);
  background: var(--rdk-lime);
  border-color: var(--rdk-lime);
}

/* ---------- the rows ---------- */
/* Category rows: the site's small uppercase label (Satoshi 700 15 / 1.5,
   the case-study eyebrow) in green, with room above so each group reads as
   its own block. The first one sits tighter under the cards. */
.rdk-price-table__cat th {
  padding: calc(56 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u));
  text-align: left;
  font-family: var(--rdk-font-body);
  font-weight: 700;
  font-size: calc(15 * var(--u));
  line-height: 1.5;
  letter-spacing: calc(1.5 * var(--u));
  text-transform: uppercase;
  color: var(--rdk-green);
}

.rdk-price-table thead + tbody .rdk-price-table__cat:first-child th {
  padding-top: calc(8 * var(--u));
}

.rdk-price-table tbody th,
.rdk-price-table tbody td {
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  vertical-align: top;
  text-align: left;
  font-family: var(--rdk-font-body);
  font-size: var(--rdk-body-s);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  font-feature-settings: "ss03" 1, "ss02" 1;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.rdk-price-table tbody th {
  font-weight: 700;
}

.rdk-price-table tbody td {
  font-weight: var(--rdk-body-weight);
  color: rgba(255, 255, 255, 0.9);
}

/* The category rows carry no rule — the group's label is its own break. */
.rdk-price-table__cat th {
  border-top: 0;
}

.rdk-price-table tbody tr:last-child th,
.rdk-price-table tbody tr:last-child td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Not included: the one cell that says so is dimmed. */
.rdk-price-table td.rdk-price-table__none {
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- commitment + the fine print ---------- */
.rdk-price-commit {
  display: flex;
  align-items: baseline;
  gap: calc(24 * var(--u));
  margin: calc(48 * var(--u)) 0 0;
  padding: calc(28 * var(--u)) calc(32 * var(--u));
  background: rgba(255, 255, 255, 0.06);
  border-radius: calc(24 * var(--u));
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-s);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  font-feature-settings: "ss03" 1, "ss02" 1;
  color: rgba(255, 255, 255, 0.9);
}

.rdk-price-commit strong {
  flex: none;
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(17.425 * var(--u));
  letter-spacing: calc(-0.35 * var(--u));
  color: var(--rdk-lime);
}

.rdk-price-fine {
  max-width: calc(980 * var(--u));
  margin: calc(32 * var(--u)) 0 0;
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-xs);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   2b. compare — THE ALTERNATE (jitter.video/pricing), `?compare=b`
   ============================================================
   The same content on a LIGHT ground: the site's off-white panel (Jitter's
   page is #f2f1f3, ours is #eff2f3) riding up over the hero on the same 96
   shoulders, white cards each led by one big number, then the comparison as
   per-category tables. Two versions are in the markup; `html[data-compare]`
   picks. Choosing one is deleting the other's markup and rules. */
html[data-compare="b"] .rdk-price-compare,
html[data-compare="c"] .rdk-price-compare { display: none; }
html:not([data-compare="b"]):not([data-compare="c"]) .rdk-price-alt { display: none; }

.rdk-price-alt {
  position: relative;
  z-index: 1;
  margin-top: calc(-96 * var(--u));
  padding: calc(120 * var(--u)) calc(88 * var(--u)) calc(160 * var(--u));
  background: var(--rdk-off-white);
  border-radius: calc(96 * var(--u)) calc(96 * var(--u)) 0 0;
  color: var(--rdk-black-green);
}

/* Jitter centres its title and standfirst over the cards; so does this. */
.rdk-price-alt__title {
  max-width: calc(980 * var(--u));
  margin: 0 auto calc(24 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(88 * var(--du));
  line-height: 1;
  letter-spacing: calc(-3.52 * var(--du));
  text-align: center;
  color: var(--rdk-black-green);
}

/* 900 (node `702:83381`, client 2026-09-14: two lines on desktop). Up from
   560 -> 700 -> 800 as the copy grew and then as the measure widened: at 560
   it ran to four centred lines under a Display/L heading, at 800 to three.
   900 is the text node's OWN width in the file — its auto-layout wrapper
   says 800 and the paragraph inside overflows it, which is why 800 was not
   enough. */
.rdk-price-alt__standfirst {
  max-width: calc(900 * var(--u));
  margin: 0 auto calc(64 * var(--u));
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-l);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  text-align: center;
  opacity: 0.9;
}

/* ---------- the cards ---------- */
.rdk-price-alt__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each card carries its hue as two tokens, for the button: the fill and the
   ink on it. The About beliefs' teal and yellow, and the brand green for the
   featured plan — the same palette Jitter's four pastels play in ours.
   (`--hue-soft` went with the tinted name pill on 2026-09-14; the three
   values are kept because the phone table's `--tag` set is the same idea and
   would want them back if a tint ever returns here.) */
.rdk-price-alt__card {
  --hue: var(--rdk-green);
  --hue-ink: var(--rdk-white);
  --hue-soft: rgba(0, 191, 0, 0.16);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 80 of top padding on EVERY card (node `680:1899`), not just the one with
     the banner — that is what lines the three titles up now that the empty
     badge row is gone. The featured card's banner overlays the top 53 of it. */
  padding: calc(80 * var(--u)) calc(32 * var(--u)) calc(36 * var(--u));
  background: var(--rdk-white);
  border-radius: calc(32 * var(--u));
}

.rdk-price-alt__card--teal   { --hue: #7dccd7; --hue-ink: var(--rdk-black-green); --hue-soft: rgba(125, 204, 215, 0.32); }
.rdk-price-alt__card--yellow { --hue: #fae14b; --hue-ink: var(--rdk-black-green); --hue-soft: rgba(250, 225, 75, 0.38); }

/* The featured card gets the brand-green ring Jitter gives none of its cards
   — a small nod to the site, which otherwise has no "most popular" cue on a
   white card. */
.rdk-price-alt__card--featured {
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--rdk-green);
  /* so the banner's top corners take the card's radius */
  overflow: clip;
}

/* "MOST CLIENTS START HERE" IS A BANNER ACROSS THE CARD'S HEAD (node
   `680:1899`, client 2026-09-14), not the tinted pill it was. Absolute, so
   it sits inside the card's 80 of top padding without pushing the title
   down — which is what lets every card share that padding and the three
   titles land on one line.
   The ring is a `box-shadow` rather than the node's `border: 3`, so it is
   drawn outside the border box and the banner stops at the card's own edge;
   both are the same green, so they read as one shape. Do not swap it for a
   border — that changes the card's box model and the grid alignment with
   the other two.
   The star is `--rdk-lime-bright`, which IS the node asset's `#79FF24` —
   the file's second lime, now a token. */
.rdk-price-alt__banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  height: calc(53 * var(--u));
  margin: 0;
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: 1.2;
  letter-spacing: calc(-0.62 * var(--u));
  color: var(--rdk-white);
  background: var(--rdk-green);
}

.rdk-price-alt__banner svg {
  flex: none;
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  color: var(--rdk-lime-bright);
}

/* The plan's title (client, 2026-09-13: "put the plan title in each box") —
   Heading/L 40 in the brand face. */
.rdk-price-alt__name {
  margin: 0 0 calc(20 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(40 * var(--du));
  line-height: 1;
  letter-spacing: calc(-0.91 * var(--du));
  color: var(--rdk-black-green);
}

/* The big number — Jitter's price slot. Display/M 72 with the unit beside
   it at body-xs, two lines, the way "per editor / month" sits by the $. */
/* ALIGNED ON THE LAST BASELINE, NOT ON THE BOXES (client, 2026-09-14: the
   unit should sit on the number's bottom line). `flex-end` matches the
   BOTTOM EDGES, and the two line boxes hang different distances below their
   own baselines — the number's `line-height: 0.9` puts its box bottom 14.4
   under its baseline where the unit's is 5.6 under its last one — so the
   words sat a few px low however the padding was tuned. `last baseline`
   aligns what the eye actually reads. The `flex-end` above it is the
   fallback for anything that does not support it, and is today's rendering
   exactly, so nothing regresses. */
.rdk-price-alt__num {
  display: flex;
  align-items: flex-end;
  align-items: last baseline;
  gap: calc(12 * var(--u));
  margin: 0 0 calc(16 * var(--u));
}

.rdk-price-alt__num strong {
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(72 * var(--du));
  line-height: 0.9;
  letter-spacing: calc(-2.47 * var(--du));
}

/* THE UNIT IS THE BRAND FACE, NOT BODY COPY (nodes `680:2024` desktop and
   `683:3243` phone, client 2026-09-14): Redonk Avant Garde Bold 16 / 1.2 in
   the full ink over a 110 measure, where it was the body face at 14 / 1.3 at
   80%. It reads as part of the number now rather than as a footnote to it.
   The size scales with `--u` alongside the measure, so the designed two-line
   break holds at every desktop width; the phone states both in px. */
.rdk-price-alt__num span {
  /* THE MEASURE IS IN THE TYPE'S OWN UNITS. `110em / 16` is the node's 110
     over the node's 16, so it resolves to EXACTLY `110 * --u` at every width
     where the size is still `16 * --u` -- i.e. this changes nothing on a
     desktop -- and it is the only form that survives the size being floored
     on a tablet below. Same derivation as the case-study description's
     `calc(418em / 20)`, and for the same reason: a measure and its type have
     to scale together or the designed line break stops meaning anything. */
  max-width: calc(110em / 16);
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(16 * var(--u));
  line-height: 1.2;
  letter-spacing: normal;
}

/* "For beginners. Get started with…" — the first sentence bold, the rest
   in the site's body ink at 90% (Jitter greys the rest to ~60%; that read
   as lighter than every other page — client, 2026-09-14). body-s. A FIXED three-line slot, not a flex-grow: the cards are one
   height (grid stretch), so whatever grows absorbs the difference in the
   checklists' lengths — grow the lead and the buttons land at three
   different heights (measured 1555 / 1555 / 1507). The list grows instead. */
.rdk-price-alt__lead {
  flex: none;
  min-height: calc(72 * var(--u));
  margin: 0 0 calc(24 * var(--u));
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-s);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  font-feature-settings: "ss03" 1, "ss02" 1;
  color: rgba(0, 20, 7, 0.9);
}

.rdk-price-alt__lead strong {
  font-weight: 700;
  color: var(--rdk-black-green);
}

/* The button fills the card's width in the card's hue, as Jitter's does. */
.rdk-price-alt__btn {
  width: 100%;
  color: var(--hue-ink);
  background: var(--hue);
  border-color: var(--hue);
}

.rdk-price-alt__btn:hover,
.rdk-price-alt__btn:focus-visible {
  color: var(--rdk-white);
  background: var(--rdk-black-green);
  border-color: var(--rdk-black-green);
}

/* The checklist under a hairline: check in the brand green, items at body-s
   with 12 between. The lead-in ("Everything in Focused, plus:") is the first
   item, bold, no check — Jitter's "Everything in Free". */
.rdk-price-alt__list {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  margin: calc(28 * var(--u)) 0 0;
  padding: calc(24 * var(--u)) 0 0;
  list-style: none;
  border-top: 1px solid rgba(0, 20, 7, 0.1);
  font-family: var(--rdk-font-body);
  /* 400, not the scale's 450 (client, 2026-09-14) — the same step back the
     phone table's values take. `.rdk-price-alt__from` stays 700, so the
     "Everything in Focused, plus:" lead-in still leads. */
  font-weight: 400;
  font-size: var(--rdk-body-s);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  font-feature-settings: "ss03" 1, "ss02" 1;
}

.rdk-price-alt__list li {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
}

.rdk-price-alt__from {
  font-weight: 700;
}

.rdk-price-alt__check {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-top: calc(4 * var(--u));
  color: var(--rdk-green);
}

/* The disclaimer, moved from above the cards to UNDER the last table (node
   `702:83381`). body-s at 80% on a 900 measure, centred, 40 clear of the
   table — the node's numbers, and already this rule's, so only its place in
   the markup changed.
   body-s, not body-xs (client, 2026-09-14: "increase the size ... to 16px")
   — a step up the scale rather than a raw 16, so it still moves with the
   phone's own numbers. */
.rdk-price-alt__fine {
  max-width: calc(900 * var(--u));
  margin: calc(40 * var(--u)) auto 0;
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-s);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  text-align: center;
  color: rgba(0, 20, 7, 0.8);
}

/* ---------- the per-category tables ----------
   Jitter's "Compare plans": each group is its own table whose first row
   holds the category as a big left-hand title and the plan names over the
   columns, then rows with a hairline under every cell — rules that BREAK
   between the columns, which is what reads as columns of ticks rather than
   a grid. Ours carry text, so the value columns are wide (296 each) and
   left-aligned. */
.rdk-price-alt__compare {
  margin-top: calc(160 * var(--u));
}

/* The month-to-month line, under "What's in each plan." (node `702:83381`).
   The section's own standfirst treatment, carrying the 72 down to the first
   table. 1020, because the file sets this text node to auto-width
   (`white-space: nowrap` in the export) and it measures 984 — a measure
   rather than `nowrap` itself, so the phone can still wrap it.
   It is at 90% like every other body run on the page; the node has this one
   at full ink where the section's subhead directly above it is at 90%, which
   reads as an artefact of its container rather than a distinction. */
.rdk-price-alt__compare-note {
  max-width: calc(1020 * var(--u));
  margin: 0 auto calc(72 * var(--u));
}

/* A DESKTOP-ONLY BREAK, so the second sentence starts its own line (client,
   2026-09-14). The phone wraps the pair to three lines of its own and a
   forced break there would leave a short orphan line in the middle of them,
   so it is `display: none` below 768.
   NOTE THE SPACE BEFORE THE `<br>` IN THE MARKUP. A hidden break contributes
   nothing at all — not even whitespace — so without it the phone would read
   "...minimum term.They continue...". On desktop that space sits at the end
   of a line and is dropped by normal white-space processing, so it costs
   nothing there. */
/* `__sub-break` puts the compare standfirst's two sentences on their own
   lines (client, 2026-09-18: "should balance them more"). They are within
   a few characters of each other, so a break at the full stop is what
   balances them — `text-wrap: balance` cannot, because it evens out lines
   it chose itself and has no reason to prefer the sentence boundary. */
.rdk-price-alt__note-break,
.rdk-price-alt__sub-break {
  display: inline;
}

/* 24 to the sub under it, which then carries the 72 down to the first table
   (node `702:83381`). The tables' own 28 top margin collapses into that 72,
   so the first group takes 72 and the ones after it keep their 28. */
.rdk-price-alt__h3 {
  margin: 0 0 calc(24 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(88 * var(--du));
  line-height: 1;
  letter-spacing: calc(-3.52 * var(--du));
  text-align: center;
}

/* EACH DATA ROW IS A WHITE BOX (client, 2026-09-13), the header row on the
   ground: `border-spacing` runs VERTICALLY only, so a row's four cells butt
   together into one box — the first and last cells carry its corners — and
   the 12 between rows is the spacing. The earlier horizontal spacing (the
   rules breaking between columns) went with it; boxes and broken rules
   cannot coexist in one table. */
/* 28 between groups (was 60 — "reduce space between each section").
   THE LABEL COLUMN IS A THIRD, NOT A QUARTER (node `680:2085`, client
   2026-09-14: "I've made the left column wider"). The node draws it at 500
   of a 1473 table, so it is carried as that SHARE — 34% — not as a literal
   500: the node's table is wider than this panel's 1424 measure, and 500
   here would be 35.1% instead of the 33.9% drawn. The three value columns
   split the rest. (It was four equal quarters, 356 at 1600 — itself the
   answer to 536 being "far too wide" and 260 "too short".) */
.rdk-price-alt-table {
  width: 100%;
  margin-top: calc(28 * var(--u));
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 calc(12 * var(--u));
}

.rdk-price-alt-table col { width: 22%; }
.rdk-price-alt-table col:first-child { width: 34%; }

/* The header row: the category at Heading/M 32, the plan names as tinted
   pills, bottom-aligned on a 48-tall row. */
/* The node's header cell is a stated 48, not the height its contents happen
   to make (43.2), so the 4.8 of slack sits ABOVE the title. On the ROW, not
   the cell.
   MEASURE THIS WITH THE CELLS, NOT THE ROWS: Chrome reports a `<tr>`'s and a
   `<thead>`'s getBoundingClientRect 24px away from the cells they contain
   here, which made the gap under the header read as 10 against the node's 20
   and sent two passes chasing a border-spacing bug that does not exist. A
   hit-test down the column, and the first body cell's own rect, both say 20. */
.rdk-price-alt-table thead tr {
  height: calc(48 * var(--u));
}

.rdk-price-alt-table thead th {
  padding: 0 calc(24 * var(--u)) calc(8 * var(--u));
  vertical-align: bottom;
  text-align: left;
  font-family: var(--rdk-font-body);
  font-weight: 700;
  font-size: var(--rdk-body-s);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  color: var(--rdk-black-green);
}

/* The node insets the PILL cells only 8 from the left, against the 24 the
   values below them carry — the pills sit proud of their own column's copy.
   Deliberate in `680:2085`; do not square it up with the cells. */
.rdk-price-alt-table thead th + th {
  padding-left: calc(8 * var(--u));
}

/* Heading/M 32 / 1.1 / -2% (node `680:2085`) — was Heading/L 40, which
   needed `white-space: nowrap` to keep "How we work" out of a 260 column.
   Both reasons are gone: the type is smaller and the column a third wide. */
.rdk-price-alt-table__cat {
  font-family: var(--rdk-font-brand) !important;
  font-size: calc(32 * var(--du)) !important;
  line-height: 1.1 !important;
  letter-spacing: calc(-0.64 * var(--du)) !important;
}

.rdk-price-alt-table tbody th,
.rdk-price-alt-table tbody td {
  padding: calc(24 * var(--u));
  vertical-align: top;
  text-align: left;
  font-family: var(--rdk-font-body);
  font-size: var(--rdk-body-s);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  font-feature-settings: "ss03" 1, "ss02" 1;
  background: var(--rdk-white);
}

.rdk-price-alt-table tbody th { border-radius: calc(24 * var(--u)) 0 0 calc(24 * var(--u)); }
.rdk-price-alt-table tbody td:last-child { border-radius: 0 calc(24 * var(--u)) calc(24 * var(--u)) 0; }

/* Satoshi BOLD (node `680:2085`, was 500) — a row header, not body copy,
   and it now matches the phone's own rule, which was already 700. */
.rdk-price-alt-table tbody th {
  font-weight: 700;
  color: var(--rdk-black-green);
}

.rdk-price-alt-table tbody td {
  font-weight: var(--rdk-body-weight);
  color: rgba(0, 20, 7, 0.9);
}

/* Jitter leaves a "not included" cell empty; a dash reads clearer than an
   empty slot when every other cell is a sentence. */
.rdk-price-alt-table__none {
  color: rgba(0, 20, 7, 0.3) !important;
}

/* ---------- variant C: white, green, then dark (client, 2026-09-13) ----------
   The light cards with the grounds re-cut: the compare section on WHITE
   with the plan cards white too, lifted by a soft drop shadow (the row
   boxes and the commitment strip stay off-white); the panel below on
   REDONK GREEN with white ink, its offer cards white; and the FAQs in their
   own DARK section riding up on the shoulders, the footer on the dark
   ground after it. Two things the CSS cannot do are in the inline script
   after </main>: the green panel's `data-nav-surface="green"` and dropping
   the body's `rdk-footer-on-light`. */
html[data-compare="c"] .rdk-price-alt { background: var(--rdk-white); }
/* `background-color`, NOT the shorthand: the shorthand resets
   `background-image`, which is where the plan columns' wash lives, and this
   rule out-specifies the wash's — C lost all three columns for one pass. */
html[data-compare="c"] .rdk-price-alt-table tbody th,
html[data-compare="c"] .rdk-price-alt-table tbody td { background-color: var(--rdk-off-white); }

/* White on white needs the shadow to have an edge at all: a long soft
   plate plus a tight contact line, both in the page's dark at low alpha.
   The featured card keeps its green ring on top. */
html[data-compare="c"] .rdk-price-alt__card {
  background: var(--rdk-white);
  box-shadow: 0 calc(24 * var(--u)) calc(56 * var(--u)) rgba(0, 20, 7, 0.09),
              0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 20, 7, 0.05);
}
html[data-compare="c"] .rdk-price-alt__card--featured {
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--rdk-green),
              0 calc(24 * var(--u)) calc(56 * var(--u)) rgba(0, 20, 7, 0.09),
              0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 20, 7, 0.05);
}

/* The green panel: white ink; the offer cards white with dark ink; the
   step numbers in lime, the site's accent on a green surface. */
html[data-compare="c"] .rdk-price-panel {
  background: var(--rdk-green);
  color: var(--rdk-white);
}
html[data-compare="c"] .rdk-price-panel__title { color: var(--rdk-white); }
html[data-compare="c"] .rdk-price-body,
html[data-compare="c"] .rdk-price-body p { color: var(--rdk-white); opacity: 0.9; }
html[data-compare="c"] .rdk-price-offer { background: var(--rdk-white); color: var(--rdk-black-green); }
html[data-compare="c"] .rdk-price-offer .rdk-price-body,
html[data-compare="c"] .rdk-price-offer .rdk-price-body p { color: var(--rdk-black-green); opacity: 0.9; }
html[data-compare="c"] .rdk-price-offer__title { color: var(--rdk-black-green); }
/* On the green panel the disc is FILLED LIME with a green ring and a green
   numeral — node `680:2968`, which is drawn on exactly this ground. (It was
   the inverse: a green disc with a lime ring and numeral.) */
html[data-compare="c"] .rdk-price-step::before {
  color: var(--rdk-green);
  background: var(--rdk-lime);
  border-color: var(--rdk-green);
}
/* The green panel pays for the dark section's shoulders riding up over it. */
html[data-compare="c"] .rdk-price-panel { padding-bottom: calc(256 * var(--u)); }

/* The FAQs' own dark section. */
html[data-compare="c"] .rdk-price-faq-panel {
  margin-top: calc(-96 * var(--u));
  padding-top: calc(120 * var(--u));
  background: var(--rdk-black-green);
  border-radius: calc(96 * var(--u)) calc(96 * var(--u)) 0 0;
  color: var(--rdk-white);
}
html[data-compare="c"] .rdk-price-faq .rdk-price-panel__title { color: var(--rdk-white); }
html[data-compare="c"] .rdk-price-faq__item { border-color: rgba(255, 255, 255, 0.15); }
html[data-compare="c"] .rdk-price-faq__q { color: var(--rdk-white); }
html[data-compare="c"] .rdk-price-faq__a p { color: var(--rdk-white); }
html[data-compare="c"] .rdk-price-faq__q:hover .rdk-price-faq__chip::before,
html[data-compare="c"] .rdk-price-faq__q:hover .rdk-price-faq__chip::after { background: var(--rdk-black-green); }

/* ---------- the plans' colour in the tables (client, 2026-09-13) ----------
   The three hues from the cards carried down: each header row's plan name
   is the card's tinted pill, and each plan's value column takes a light
   wash of its hue inside the row boxes — the label column stays the box's
   own colour. Columns are addressed by position (2 / 3 / 4 = Focused /
   Integrated / Embedded), the same order as the cards. After the C rules,
   which paint the cells off-white at equal specificity. */
/* THE PILLS ARE SOLID NOW (node `680:2085`, client 2026-09-14: "changed the
   colour of the labels/tags above") — the cards' own teal and yellow at full
   strength rather than the washes they carried, with the ink staying dark.
   NOTE `#4ae003` is the node's green and is NOT `--rdk-green` (#00bf00),
   which is what the featured CARD's badge paints: brighter, so dark ink
   reads on it. A fourth green on the site — flagged, not normalised. */
.rdk-price-alt-table {
  --plan-1: #7dccd7;
  --plan-2: #4ae003;
  --plan-3: #fae14b;
}

.rdk-price-alt-table__plan {
  display: inline-flex;
  /* An inline-level box sits on the BASELINE, so the strut's descender room
     hangs below it and the pill overflowed its cell's padding by 2 — the 8
     under it read as 6 and the gap to the first row as 10 against the
     node's 20. `vertical-align: bottom` puts its bottom on the line box's. */
  vertical-align: bottom;
  align-items: center;
  height: calc(30 * var(--u));
  padding: 0 calc(16 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: 1;
  color: var(--rdk-black-green);
  border-radius: 999px;
}

.rdk-price-alt-table thead th:nth-child(2) .rdk-price-alt-table__plan { background: var(--plan-1); }
.rdk-price-alt-table thead th:nth-child(3) .rdk-price-alt-table__plan { background: var(--plan-2); }
.rdk-price-alt-table thead th:nth-child(4) .rdk-price-alt-table__plan { background: var(--plan-3); }

/* The rows carry NO colour (client, 2026-09-13, second thought): the hue
   lives in the header pills alone. The column wash that was here for one
   pass is gone with its `--wash-*` tokens. */


.rdk-price-picker {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 14px;
  font-family: var(--rdk-font-body);
  font-weight: 700;
  font-size: 12px;
  color: var(--rdk-white);
  background: rgba(0, 20, 7, 0.85);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.rdk-price-picker span { opacity: 0.6; margin-right: 6px; }

.rdk-price-picker a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--rdk-white);
}

/* DORMANT UNLESS THE URL CARRIES `?tune` (or `#tune`) — the gate every
   tuning panel on the site uses (client, 2026-09-14). The alternates stay in
   the markup and stay switchable; they are simply not on screen for an
   ordinary reader.
   ONLY `display` IS GATED, and as a `:not()` rather than by moving the block
   under `html[data-tune]`: that would raise the base rule to (0,2,1) and it
   would then out-specify `.rdk-price-picker--mlabel`'s own `bottom` and the
   phone block's, stacking the two pickers on top of each other. */
html:not([data-tune]) .rdk-price-picker {
  display: none;
}

html:not([data-compare="b"]):not([data-compare="c"]) .rdk-price-picker a[data-variant="a"],
html[data-compare="b"] .rdk-price-picker a[data-variant="b"],
html[data-compare="c"] .rdk-price-picker a[data-variant="c"],
html[data-mlabel="pill"] .rdk-price-picker a[data-mlabel="pill"],
html[data-mlabel="dot"] .rdk-price-picker a[data-mlabel="dot"],
html[data-mlabel="beside"] .rdk-price-picker a[data-mlabel="beside"] {
  color: var(--rdk-black-green);
  background: var(--rdk-lime);
}

/* The phone-rows picker stacks above the variant one. It only changes
   something below 768, so it says so rather than looking inert. */
.rdk-price-picker--mlabel {
  bottom: 58px;
}

/* ============================================================
   3. the white panel — more, how, FAQs
   ============================================================ */
.rdk-price-panel {
  position: relative;
  z-index: 2;
  margin-top: calc(-96 * var(--u));
  /* No bottom padding: the FAQ wrapper that follows carries the 160. */
  padding: calc(120 * var(--u)) calc(88 * var(--u)) 0;
  background: var(--rdk-white);
  border-radius: calc(96 * var(--u)) calc(96 * var(--u)) 0 0;
  color: var(--rdk-black-green);
}

/* Display/L in the dark ink, shared by the two titled sections below. */
.rdk-price-panel__title {
  margin: 0 0 calc(64 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(88 * var(--du));
  line-height: 1;
  letter-spacing: calc(-3.52 * var(--du));
  color: var(--rdk-black-green);
}

/* Body/M in the dark ink at 90%, the services page's setting. */
.rdk-price-body,
.rdk-price-body p {
  margin: 0;
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-m);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  font-feature-settings: "ss03" 1, "ss02" 1;
  color: var(--rdk-black-green);
  opacity: 0.9;
}

/* ---------- 3a. add capacity / fixed fee ----------
   Two cards side by side: the About beliefs' tinted card (radius 64, 72
   inside) on the site's off-white, each with a Heading/XL title, the copy,
   and a plain pill. */
.rdk-price-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(32 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.rdk-price-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(72 * var(--u));
  background: var(--rdk-off-white);
  border-radius: calc(64 * var(--u));
}

/* Heading/XL: 46 / 1 / -2.5%. */
.rdk-price-offer__title {
  margin: 0 0 calc(24 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(46 * var(--du));
  line-height: 1;
  letter-spacing: calc(-1.15 * var(--du));
}

.rdk-price-offer .rdk-price-body {
  flex: 1 0 auto;
  margin-bottom: calc(40 * var(--u));
}

/* ---------- 3b. how the partnership works ---------- */
.rdk-price-how {
  margin-top: calc(160 * var(--u));
}

.rdk-price-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(48 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* NUMBERED DISCS, node `680:2968` (client, 2026-09-14). 72 square with a 3
   border, the numeral in the brand face at 24 — and SINGLE digits, not the
   "01" the column rules used to carry. THE LINE JOINING THEM IS GONE with
   them; it was the 2026-09-13 answer to the rule that sat above each column,
   and the node draws three separate discs. */
.rdk-price-step {
  position: relative;
  counter-increment: step;
}

.rdk-price-step::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  margin: 0 0 calc(32 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  line-height: 1;
  letter-spacing: calc(-0.62 * var(--u));
  color: var(--rdk-green);
  background: var(--rdk-white);
  border: calc(3 * var(--u)) solid var(--rdk-green);
  border-radius: 999px;
}

/* Heading/M: 32 / 1.1 / -2%. The node writes this one heading at -0.2338
   (-0.73%), which is a per-node override rather than the file's own
   Heading/M — the ladder's -2% stands, as it does everywhere else. */
.rdk-price-step__title {
  margin: 0 0 calc(20 * var(--u));
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(32 * var(--du));
  line-height: 1.1;
  letter-spacing: calc(-0.64 * var(--du));
}

/* ---------- 3c. FAQs ----------
   Title left, the questions right, in the wireframe's grouping. Each item is
   a button that opens a grid row from 0fr to 1fr — the About page's reveal
   cards — so the height animates without measuring. Without JS the answers
   are simply open (`.rdk-price-faq--js` is what collapses them). */
/* The wrapper: the white panel's bottom padding lives HERE now, so that in
   A and B the FAQs read exactly as they did inside it, while C can paint
   the wrapper dark and give it shoulders. */
/* PADDING ON THE WRAPPER, NOT MARGIN ON THE BLOCK. The 160 was a margin on
   .rdk-price-faq and it collapsed straight through this wrapper (no
   padding, no border) — the wrapper itself moved down 160 and the sticky
   hero showed through the gap, in every variant. The gotcha in CLAUDE.md,
   met again. */
.rdk-price-faq-panel {
  position: relative;
  z-index: 3;
  padding: calc(160 * var(--u)) calc(88 * var(--u));
  background: var(--rdk-white);
  color: var(--rdk-black-green);
}

.rdk-price-faq {
  display: grid;
  grid-template-columns: calc(360 * var(--u)) minmax(0, 1fr);
  gap: calc(88 * var(--u));
  margin: 0;
}

.rdk-price-faq .rdk-price-panel__title {
  margin-bottom: 0;
}

.rdk-price-faq__group + .rdk-price-faq__group {
  margin-top: calc(64 * var(--u));
}

/* The small uppercase label again, in green, over each group. */
.rdk-price-faq__label {
  margin: 0 0 calc(8 * var(--u));
  font-family: var(--rdk-font-body);
  font-weight: 700;
  font-size: calc(15 * var(--u));
  line-height: 1.5;
  letter-spacing: calc(1.5 * var(--u));
  text-transform: uppercase;
  color: var(--rdk-green);
}

.rdk-price-faq__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 0.5px (client, 2026-09-14). The rules sit BETWEEN questions only: none
   under a group's label (2026-09-13) and none after its last question
   (2026-09-14), so a group is separated by its own heading at both ends. */
.rdk-price-faq__item {
  border-top: 0.5px solid rgba(0, 20, 7, 0.15);
}

.rdk-price-faq__item:first-child {
  border-top: 0;
}

/* Heading/S: 28 / 1.1 / -1.86%, on a full-width button with the chip at the
   far end. Padding, not a fixed height: half the questions wrap. */
/* BALANCED, because a question is a heading and rags badly when it wraps
   (client, 2026-09-17). `text-wrap` INHERITS, so setting it on the button
   reaches the span that actually holds the words. It is a no-op wherever the
   question fits on one line, which is most of them on a desktop, and it is
   what stops a two-line question at tablet width ending on a single short
   word. The ANSWERS need nothing: `body` carries `text-wrap: pretty`
   site-wide (client, 2026-08-27, "so it inherits everywhere rather than
   being repeated per section"), and they already compute it. */
.rdk-price-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(32 * var(--u));
  text-wrap: balance;
  width: 100%;
  padding: calc(28 * var(--u)) 0;
  text-align: left;
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: calc(28 * var(--du));
  line-height: 1.1;
  letter-spacing: calc(-0.52 * var(--du));
  color: var(--rdk-black-green);
  cursor: pointer;
}

/* The About CTA's chip at 52 with a plus that turns into a minus — the
   vertical bar rotates 90 onto the horizontal one. */
.rdk-price-faq__chip {
  position: relative;
  flex: none;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  border: calc(3 * var(--u)) solid var(--rdk-green);
  border-radius: 999px;
  transition: background-color 0.3s ease, rotate 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.rdk-price-faq__chip::before,
.rdk-price-faq__chip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(18 * var(--u));
  height: calc(3 * var(--u));
  background: var(--rdk-green);
  border-radius: 2px;
  translate: -50% -50%;
  transition: rotate 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), background-color 0.3s ease;
}

.rdk-price-faq__chip::after {
  rotate: 90deg;
}

.rdk-price-faq__q:hover .rdk-price-faq__chip,
.rdk-price-faq__q:focus-visible .rdk-price-faq__chip {
  background: var(--rdk-green);
}

.rdk-price-faq__q:hover .rdk-price-faq__chip::before,
.rdk-price-faq__q:hover .rdk-price-faq__chip::after,
.rdk-price-faq__q:focus-visible .rdk-price-faq__chip::before,
.rdk-price-faq__q:focus-visible .rdk-price-faq__chip::after {
  background: var(--rdk-white);
}

.rdk-price-faq__item.is-open .rdk-price-faq__chip::after {
  rotate: 180deg;
}

.rdk-price-faq__q:focus-visible {
  outline: 2px solid var(--rdk-green);
  outline-offset: 4px;
  border-radius: 4px;
}

/* The answer: a grid row that opens. The inner div is what clips. */
.rdk-price-faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.rdk-price-faq--js .rdk-price-faq__item:not(.is-open) .rdk-price-faq__a {
  grid-template-rows: 0fr;
}

.rdk-price-faq__a > div {
  overflow: hidden;
}

.rdk-price-faq__a p {
  max-width: calc(780 * var(--u));
  margin: 0;
  padding: 0 calc(84 * var(--u)) calc(36 * var(--u)) 0;
  font-family: var(--rdk-font-body);
  font-weight: var(--rdk-body-weight);
  font-size: var(--rdk-body-m);
  line-height: var(--rdk-body-lh);
  letter-spacing: var(--rdk-body-track);
  font-feature-settings: "ss03" 1, "ss02" 1;
  color: var(--rdk-black-green);
  opacity: 0.9;
  transition: opacity 0.35s ease;
}

.rdk-price-faq--js .rdk-price-faq__item:not(.is-open) .rdk-price-faq__a p {
  opacity: 0;
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rdk-price-btn,
  .rdk-price-faq__chip,
  .rdk-price-faq__chip::before,
  .rdk-price-faq__chip::after,
  .rdk-price-faq__a,
  .rdk-price-faq__a p {
    transition: none;
  }
}

/* ============================================================
   PHONE — invented (no frame). Straight px throughout: below 768 --u
   collapses (see css/tokens.css), so a 16u value is 3.9px at 390.
   ============================================================ */
@media (max-width: 767px) {

  /* ---------- hero ---------- */
  /* In flow rather than fixed-height: the copy is ~600 tall on a 350 measure
     and Donk peeks up from the bottom-right corner under it, his feet behind
     the panel that rides up 33. */
  /* NOT STICKY ON A PHONE (client, 2026-09-14: Donk is never visible, and
     the panel covers him before he arrives). The desktop hero is 992 against
     a ~900 window, so pinning it at `top: 0` shows all of it. Here it is
     1115 tall against a ~700 viewport — a sticky box taller than the
     scrollport pins on the first frame and never moves again, so the bottom
     400 of it, which is the whole figure, could not be scrolled to. The
     panel riding up over it then covered that band without it ever having
     been seen.
     `relative`, NOT `static`: the figure is `position: absolute` and this is
     its containing block AND its clip. Making it static would resolve the
     figure against whatever is positioned further up and un-clip it —
     the trap CLAUDE.md records.
     The reveal costs nothing here: the panel only rides up 33 on a phone. */
  .rdk-price-hero {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 120px 20px 316px;
  }

  .rdk-price-hero__text {
    position: static;
    width: auto;
  }

  .rdk-price-hero__pill {
    margin-bottom: 20px;
    padding: 0;
    font-size: 18px;
    line-height: 0.91;
    letter-spacing: -0.36px;
    border: 0;
  }

  /* 48 / 0.94 / -5%, the ladder's Display/XL proportions at the phone size —
     NOT the guide's -2.0484 (-4.27%). The guide is a guide; the type comes
     from the site (client, 2026-09-14). Same for the body, which is already
     `--rdk-body-l` and resolves to the guide's 17 / 1.5 / 0.01em anyway. */
  .rdk-price-hero__title {
    max-width: none;
    margin-bottom: 20px;
    font-size: 48px;
    letter-spacing: -2.4px;
  }

  .rdk-price-hero__title-break { display: inline; }

  .rdk-price-hero__body {
    max-width: none;
    margin-bottom: 28px;
  }

  /* The pair centred under the copy, 292 x 403, sitting on the hero's
     bottom edge (guide `683:4370`). Its 474 of bottom padding is the
     guide's own 71 of clearance under the CTA plus the figure's 403 — the
     `pb-316` the guide's auto-layout carries is overridden there by a fixed
     frame height, and following the padding instead would overlap the two.
     Centred with a NEGATIVE MARGIN, not a `translate`: GSAP owns this
     element's transform and clears the standalone property. */
  /* The phone's own version of the same debt: the panel rides up 33 there,
     so the hero carries 33 more and the figure sits that far off its bottom
     — its foot lands exactly on the panel's edge, which is where the guide
     cuts it, and the 71 under the CTA is unchanged. */
  .rdk-price-hero { padding-bottom: 507px; }

  /* THE DESKTOP'S STATED 80 COLLAPSES TO 18.75 HERE — `--u` is 0.234 at 375
     — and it out-specifies css/about.css's own phone rule, so the button
     rendered 40 tall instead of the 64 the About CTA has on a phone. State
     the phone's 64, which is also the guide's. */
  .rdk-price-hero .rdk-about__cta,
  .rdk-price-hero .rdk-about__cta-chip {
    height: 64px;
  }

  .rdk-price-hero__donk-rig {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 33px;
    margin-left: -146px;
    width: 292px;
    height: 403px;
  }

  /* ---------- compare ---------- */
  .rdk-price-compare {
    margin-top: -33px;
    padding: 56px 20px 64px;
    border-radius: 32px 32px 0 0;
  }

  .rdk-price-compare__title {
    margin-bottom: 32px;
    font-size: 44px;
    letter-spacing: -1.76px;
  }

  /* The table becomes a list: the cards stack, then each row is its label
     with the three plans' values under it, each prefixed with the plan's
     name from `data-plan`. The tint column has no column to sit in. */
  .rdk-price-table-wrap::before { display: none; }

  .rdk-price-table,
  .rdk-price-table thead,
  .rdk-price-table tbody,
  .rdk-price-table tr,
  .rdk-price-table th,
  .rdk-price-table td {
    display: block;
  }

  .rdk-price-table colgroup { display: none; }

  .rdk-price-table thead th:first-child { display: none; }

  .rdk-price-table thead th {
    padding: 16px 0 0;
  }

  .rdk-price-table thead th:nth-child(2) { padding-top: 0; }

  .rdk-price-plan {
    padding: 28px 24px;
    border-radius: 24px;
  }

  .rdk-price-plan--featured { margin-top: 16px; }

  .rdk-price-plan__name { margin-bottom: 12px; font-size: 32px; letter-spacing: -0.73px; }
  .rdk-price-plan__blurb { margin-bottom: 20px; }
  .rdk-price-plan__from { margin-top: 16px; font-size: 15px; letter-spacing: -0.3px; }

  .rdk-price-plan__badge {
    padding: 7px 12px;
    font-size: 13px;
    letter-spacing: -0.26px;
  }

  .rdk-price-btn {
    height: 48px;
    padding: 0 22px;
    font-size: 16px;
    letter-spacing: -0.16px;
    border-width: 2px;
  }

  .rdk-price-table__cat th,
  .rdk-price-table thead + tbody .rdk-price-table__cat:first-child th {
    padding: 40px 0 8px;
    font-size: 11px;
    letter-spacing: 1.32px;
  }

  .rdk-price-table tbody tr {
    padding: 14px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .rdk-price-table tbody th,
  .rdk-price-table tbody td {
    padding: 0;
    border: 0;
  }

  .rdk-price-table tbody tr:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .rdk-price-table tbody tr:last-child th,
  .rdk-price-table tbody tr:last-child td { border: 0; }

  .rdk-price-table__cat { border-top: 0 !important; padding: 0 !important; }

  .rdk-price-table tbody th { padding-bottom: 8px; }

  .rdk-price-table tbody td {
    display: flex;
    gap: 12px;
    padding: 4px 0;
  }

  .rdk-price-table tbody td::before {
    content: attr(data-plan);
    flex: none;
    width: 88px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
  }

  .rdk-price-table tbody td:nth-child(3)::before { color: var(--rdk-green); }

  .rdk-price-commit {
    flex-direction: column;
    gap: 8px;
    margin-top: 32px;
    padding: 20px 20px;
    border-radius: 16px;
  }

  .rdk-price-commit strong { font-size: 15px; letter-spacing: -0.3px; }

  .rdk-price-fine { margin-top: 24px; }

  /* ---------- the white panel ---------- */
  .rdk-price-panel {
    margin-top: -33px;
    padding: 56px 20px 0;
    border-radius: 32px 32px 0 0;
  }
  .rdk-price-faq-panel { padding: 72px 20px 64px; }
  html[data-compare="c"] .rdk-price-panel { padding-bottom: 97px; }
  html[data-compare="c"] .rdk-price-faq-panel {
    margin-top: -33px;
    padding-top: 56px;
    border-radius: 32px 32px 0 0;
  }
  html[data-compare="c"] .rdk-price-alt__card {
    box-shadow: 0 12px 28px rgba(0, 20, 7, 0.09), 0 1px 3px rgba(0, 20, 7, 0.05);
  }
  html[data-compare="c"] .rdk-price-alt__card--featured {
    box-shadow: 0 0 0 2px var(--rdk-green), 0 12px 28px rgba(0, 20, 7, 0.09), 0 1px 3px rgba(0, 20, 7, 0.05);
  }

  .rdk-price-panel__title {
    margin-bottom: 32px;
    font-size: 44px;
    letter-spacing: -1.76px;
  }

  .rdk-price-more {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rdk-price-offer {
    padding: 32px 24px;
    border-radius: 24px;
  }

  .rdk-price-offer__title { margin-bottom: 16px; font-size: 30px; letter-spacing: -0.75px; }
  .rdk-price-offer .rdk-price-body { margin-bottom: 24px; }

  .rdk-price-how { margin-top: 72px; }

  .rdk-price-steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* The disc grew with the desktop's 52 -> 72; the line that used to run
     down from each one to the next is gone with it (client, 2026-09-14). */
  .rdk-price-step::before { width: 56px; height: 56px; margin-bottom: 16px; font-size: 18px; letter-spacing: -0.36px; border-width: 2px; }
  .rdk-price-step__title { margin-bottom: 12px; font-size: 24px; letter-spacing: -0.48px; }

  .rdk-price-faq {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .rdk-price-faq__group + .rdk-price-faq__group { margin-top: 40px; }
  .rdk-price-faq__label { font-size: 11px; letter-spacing: 1.32px; }

  .rdk-price-faq__q {
    gap: 16px;
    padding: 18px 0;
    font-size: 20px;
    letter-spacing: -0.37px;
  }

  .rdk-price-faq__chip { width: 40px; height: 40px; border-width: 2px; }
  .rdk-price-faq__chip::before,
  .rdk-price-faq__chip::after { width: 14px; height: 2px; }

  .rdk-price-faq__a p {
    max-width: none;
    padding: 0 0 24px;
  }
  /* ---------- the alternate ---------- */
  .rdk-price-alt {
    margin-top: -33px;
    padding: 56px 20px 64px;
    border-radius: 32px 32px 0 0;
  }
  /* The three centred measures are --u-sized and collapse here (980u is
     230px at 375) — the collapsing-unit trap; released to the full width. */
  .rdk-price-alt__title { max-width: none; margin-bottom: 16px; font-size: 44px; letter-spacing: -1.76px; }
  .rdk-price-alt__standfirst { max-width: none; margin-bottom: 32px; }
  .rdk-price-alt__fine { max-width: none; }
  .rdk-price-alt__cards { grid-template-columns: 1fr; gap: 16px; }
  /* STACKED CARDS HAVE NOTHING TO ALIGN ACROSS, so only the one carrying the
     banner pays for it: 24 on top everywhere, 60 on the featured card. On
     desktop all three take the 80 so their titles land on one line. */
  .rdk-price-alt__card { padding: 24px 24px 28px; border-radius: 24px; }
  .rdk-price-alt__card--featured { padding-top: 60px; box-shadow: 0 0 0 2px var(--rdk-green); }
  .rdk-price-alt__banner { height: 44px; gap: 10px; font-size: 16px; letter-spacing: -0.55px; }
  .rdk-price-alt__banner svg { width: 13px; height: 13px; }
  .rdk-price-alt__name { margin-bottom: 14px; font-size: 32px; letter-spacing: -0.73px; }
  /* The 12 between the number and its unit is `--u`-based, so it collapsed
     to 2.8px here and the two were all but touching. Straight px, like every
     other number in this block. */
  .rdk-price-alt__num { gap: 12px; margin-bottom: 12px; }
  .rdk-price-alt__num strong { font-size: 56px; letter-spacing: -1.92px; }
  /* Node `683:3243` puts the unit straight in the row with no pad under it;
     16/110 in px, since `--u` collapses here. */
  .rdk-price-alt__num span { max-width: 110px; font-size: 16px; }
  .rdk-price-alt__lead { min-height: 0; margin-bottom: 20px; }
  .rdk-price-alt__list { gap: 10px; margin-top: 20px; padding-top: 20px; }
  .rdk-price-alt__check { width: 14px; height: 14px; margin-top: 4px; }
  .rdk-price-alt__fine { margin-top: 24px; }
  .rdk-price-alt__compare { margin-top: 72px; }
  /* The 72 under the heading is `--u`-based and lands at 17px here. Stated,
     so it is a number somebody chose rather than a collapsed one. */
  .rdk-price-alt__h3 { margin-bottom: 16px; font-size: 44px; letter-spacing: -1.76px; }
  .rdk-price-alt__note-break,
  .rdk-price-alt__sub-break { display: none; }

  /* The per-category tables take the dark table's phone treatment: the
     header row is the category alone, each row its label with the three
     values under it, prefixed by the plan's name. */
  .rdk-price-alt-table,
  .rdk-price-alt-table thead,
  .rdk-price-alt-table tbody,
  .rdk-price-alt-table tr,
  .rdk-price-alt-table th,
  .rdk-price-alt-table td { display: block; }
  .rdk-price-alt-table colgroup { display: none; }
  /* The desktop's 48u header row is 11px here and the row is `display:
     block`, so the category title overflowed it and the first row box was
     drawn over its own title. */
  .rdk-price-alt-table thead tr { height: auto; }
  .rdk-price-alt-table { width: auto; margin: 40px 0 0; border-spacing: 0; }
  .rdk-price-alt-table thead th:not(.rdk-price-alt-table__cat) { display: none; }
  .rdk-price-alt-table__cat { padding: 0 0 12px !important; font-size: 30px !important; letter-spacing: -0.68px !important; }
  /* The row is the white box here; its cells go transparent inside it. */
  .rdk-price-alt-table tbody tr { margin-bottom: 10px; padding: 16px 20px 18px; background: var(--rdk-white); border-radius: 20px; }
  html[data-compare="c"] .rdk-price-alt-table tbody tr { background: var(--rdk-off-white); }
  .rdk-price-alt-table tbody th,
  .rdk-price-alt-table tbody td { padding: 0; background: transparent !important; border-radius: 0; }
  /* The card's row label: 16 with 8 under it (node `685:60438`). A label, so
     a stated size rather than a body step.
     THE BRAND FACE HERE, PHONE ONLY (client, 2026-09-17), where the node
     draws it in Satoshi Bold. It is the only run in these lists that names a
     THING rather than stating a value, so the face is doing the same job the
     category heading above it does; the desktop table keeps Satoshi, since
     there the label sits in a column beside its values rather than above
     them. Redonk Avant Garde has only a Bold, so the 700 already here is the
     weight it resolves to. */
  .rdk-price-alt-table tbody th {
    padding-bottom: 8px;
    font-family: var(--rdk-font-brand);
    font-size: 16px;
    font-weight: 700;
  }
  .rdk-price-alt-table tbody td { display: flex; gap: 12px; padding: 4px 0; }
  /* ---- how a value row names its plan on a phone: THREE OPTIONS, and the
     page picks one with `?mlabel=` (client, 2026-09-14). Each column carries
     its plan's colour TWICE — `--tag` for a fill with dark ink on it, `--dot`
     for a bare disc on the card — so adding a fourth style is a rule and not
     another colour table.
     THE DOT IS A DARKER SET, AND IT HAS TO BE. A tag is a FILL: the contrast
     that matters is the dark ink on it, and all three clear 10:1. A dot is
     the INK, and the tag colours as ink on the row box give teal 1.62, green
     1.56 and yellow 1.17 — the yellow all but invisible.
     `--dot` IS THE CLIENT'S OWN SET (node `685:60438`, 2026-09-14), which
     darkens each hue to 1.93 / 2.21 / 1.55. Under the 3:1 WCAG 1.4.11 asks
     of a non-text indicator, and chosen with that on the table — fairly,
     because nothing here is carried by colour: the plan's NAME sits beside
     every dot in bold ink at 13:1, so the disc is a scanning aid and not the
     label. (A set that did clear 3:1 was built first and turned down; it is
     at 7522738 if the question comes back.) ---- */
  .rdk-price-alt-table tbody td { align-items: flex-start; }
  .rdk-price-alt-table tbody td:nth-child(2) { --tag: var(--plan-1); --dot: #4ebfce; }
  .rdk-price-alt-table tbody td:nth-child(3) { --tag: var(--plan-2); --dot: #00bf00; }
  .rdk-price-alt-table tbody td:nth-child(4) { --tag: var(--plan-3); --dot: #e2c309; }
  .rdk-price-alt-table tbody td::before {
    content: attr(data-plan);
    flex: none;
    width: 92px;
    padding: 3px 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--rdk-black-green);
    background: var(--tag);
    border-radius: 999px;
  }

  /* `pill` — the DESKTOP tag, at the desktop's own size, on its own line
     above the value. Stated in px: the desktop rule is `--u`-based and 15u
     is 3.5px here. The row goes `display: block` for it; `--rdk-body-lh`
     under the tag keeps the value on the label column's own rhythm. */
  html[data-mlabel="pill"] .rdk-price-alt-table tbody td {
    display: block;
    padding: 10px 0 0;
  }
  html[data-mlabel="pill"] .rdk-price-alt-table tbody td::before {
    /* BLOCK-level flex with `fit-content`, not `inline-flex`: inline, the
       value simply carried on beside the tag and wrapped under it. */
    display: flex;
    align-items: center;
    width: fit-content;
    height: 30px;
    margin-bottom: 6px;
    padding: 0 16px;
    font-size: 15px;
  }

  /* `dot` — NODE `685:60438` (client, 2026-09-14), and the default. An 8
     disc, an 8 gap, the plan's name in Satoshi Bold 14 in an 88 column, a 12
     gap, then the value in the body face at 14 — with a 0.5 grey rule between
     the three and none after the last.
     The disc is a radial gradient on the name's own box rather than a second
     pseudo, because a cell has only `::before` and `::after` and the value
     needs neither; the half pixel of overrun on the stop is its antialiased
     edge. The 16 of left padding is the disc's 8 plus the node's 8 gap. */
  /* 16 between the name and the value, not the node's 12 (client,
     2026-09-14: "a tad more"), which puts the value on the node's own
     191 measure anyway.
     AND THE VALUE STEPS BACK FROM THE NAME: weight 400 rather than the
     scale's 450, and the node's own 72% rather than the page's 90%
     (client: "needs more contrast between the label and input"). This is
     the one run on the page deliberately off the 90% set on 2026-09-14 —
     it is not body copy against other body copy, it is a value sitting
     beside its own bold label, and the whole treatment is that
     two-tone. It still measures 7.3:1 on the card. */
  html[data-mlabel="dot"] .rdk-price-alt-table tbody td {
    gap: 16px;
    align-items: flex-start;
    padding: 8px 0;
    font-weight: 400;
    font-size: var(--rdk-body-xs);
    line-height: var(--rdk-body-lh);
    color: rgba(0, 20, 7, 0.72);
  }
  html[data-mlabel="dot"] .rdk-price-alt-table tbody td + td {
    border-top: 0.5px solid rgba(180, 180, 180, 0.5);
  }
  html[data-mlabel="dot"] .rdk-price-alt-table tbody td::before {
    width: 88px;
    padding: 0 0 0 16px;
    font-size: 14px;
    line-height: var(--rdk-body-lh);
    text-align: left;
    color: var(--rdk-black-green);
    background: radial-gradient(circle at 4px 50%, var(--dot) 0 3.6px, transparent 4.2px);
    border-radius: 0;
  }

  /* `beside` — what the page shipped with: the tag small, in its colour,
     in a fixed column to the left of the value. */
  .rdk-price-alt-table__plan { height: 26px; padding: 0 10px; font-size: 13px; }
  .rdk-price-picker { bottom: 12px; font-size: 11px; }
  .rdk-price-picker--mlabel { bottom: 50px; }

  /* ---------- CATEGORY ACCORDION -- EXPERIMENT (client, 2026-09-17) -------
     Paired with `tableAccordion()` in js/pricing.js; reverting is that
     function, its call, and this block. Nothing else refers to either.

     `--acc` IS THE PROGRESSIVE-ENHANCEMENT GATE, the same arrangement the
     FAQ's `--js` uses: the class is only added once the button exists, so
     with no JS every category is simply open and the page reads as it does
     today. The collapse is `display: none` rather than the FAQ's animated
     `0fr / 1fr` grid -- that trick needs one child to collapse, and a tbody
     holds a row per line. The rows animate on OPEN instead (js side), which
     is where the movement is wanted anyway. */
  .rdk-price-alt-table__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 6px 0 12px;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
  }

  /* The FAQ's chip at this section's scale and on its own ground: a ring
     that fills on press, with the bar rotating away as it opens. Drawn
     rather than shipped as an icon, so one element is both + and -. */
  .rdk-price-alt-table__chip {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border: 2px solid var(--rdk-green);
    border-radius: 999px;
    transition: background-color 0.3s ease;
  }

  .rdk-price-alt-table__chip::before,
  .rdk-price-alt-table__chip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--rdk-green);
    border-radius: 2px;
    translate: -50% -50%;
    transition: rotate 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
  }

  .rdk-price-alt-table__chip::after { rotate: 90deg; }
  .is-open .rdk-price-alt-table__chip::after { rotate: 0deg; }

  .rdk-price-alt-table__toggle:focus-visible {
    outline: 3px solid var(--rdk-green);
    outline-offset: 4px;
  }

  /* A closed category keeps its own heading and loses its rows. */
  .rdk-price-alt--acc .rdk-price-alt-table:not(.is-open) tbody {
    display: none;
  }

  /* A RULE PER CATEGORY, EDGE TO EDGE (client, 2026-09-17, replacing the
     grey boxes). `--rdk-grey` at 30%, hairline, and it BLEEDS: the negative
     side margin takes it out through the section's own 20 of padding to the
     window's edges, and the same 20 goes straight back on as padding so the
     heading and the rows stay on the content line. Match the two if that
     padding ever moves.

     The rows keep their own grey boxes here -- nothing overrides them, so
     the phone's existing treatment stands and a category is a rule, a
     heading, and the boxes it stands for. */
  .rdk-price-alt--acc .rdk-price-alt-table {
    margin: 0 -20px;
    padding: 22px 20px 20px;
    background: none;
    border-radius: 0;
    border-top: 1px solid rgba(180, 180, 180, 0.3);
  }

  .rdk-price-alt--acc .rdk-price-alt-table:not(.is-open) {
    padding-bottom: 14px;
  }

  /* THE OPEN BOTTOM IS 20 SO IT MATCHES THE SIDES (client, 2026-09-17), and
     the last row's own 10 of margin has to come off for that to be true --
     left on, the gap under the last box would be 30 against the sides' 20
     and the padding would only look like it had been set. */
  .rdk-price-alt--acc .rdk-price-alt-table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* The heading's own padding is the button's; the table supplies the rest. */
  .rdk-price-alt--acc .rdk-price-alt-table__cat {
    padding: 0 !important;
  }
}

/* ============================================================
   TABLET PORTRAIT — the hero (client, 2026-09-17)
   ============================================================
   This page had NO tablet block at all, so it was the desktop layout at
   half scale and all four of the reported faults came out of that one
   fact. Measured at 768 x 1024 with the touch gates forced (the pane
   reports `hover: hover` at tablet widths, so it cannot render them):

     - the kicker was `22 * --u` = 10.56px, floored nowhere — the same hole
       the About eyebrow and the body scale were each found in;
     - the headline floors to 70.72 through `--du` while its `819 * --u`
       measure does NOT, so it set in FOUR lines against the design's two;
     - those two extra lines put the CTA's foot at 616 against a panel edge
       at 430, i.e. the button was 186px UNDER the white panel rather than
       merely clipped;
     - and the CTA measured 38.4 tall, because this page states
       `height: calc(80 * var(--u))` and that out-specifies the site-wide
       44px touch floor. The phone block below records the same collision
       against css/about.css — it is the third time this rule has cost a
       button its height.

   THE ARRANGEMENT IS THE DESKTOP'S, NOT THE PHONE'S STACK (client: "3
   seems like the best approach but you just need to scale Donk a bit and
   make the hero larger... it doesnt look bad now, things are just getting
   cut off"). So the copy keeps the left column and the figure the right;
   what changes is that the figure gives up the width the floored headline
   needs, and the hero grows to hold it. */
@media (min-width: 768px) and (orientation: portrait) {

  /* HEIGHT COMES FROM THE CONTENT, NOT FROM A NUMBER. The desktop's
     `992 * --u` is 476 here, and no design-unit height can be right at once
     for type that is FLOORED (70.72 at every tablet width) and padding that
     is not — the two scale differently, so a literal would be wrong at
     every width but the one it was fitted at. In flow the box is whatever
     it has to be: measured 638.7 at 768, 653.5 at 820, 631.9 at 1024.
     The bottom padding is the design's own 124 of clearance under the CTA
     plus the 96 the compare panel rides up, which is the same debt the
     992 was paying on the desktop.
     Sticky is still safe: `orientation: portrait` guarantees the viewport
     is taller than it is wide, i.e. over 768, and the tallest this gets is
     653 — so it never becomes the taller-than-scrollport pin that cost the
     phone its figure. Verified `fitsViewport` at all three sizes. */
  .rdk-price-hero {
    height: auto;
    padding: calc(234 * var(--u)) calc(88 * var(--u)) calc(220 * var(--u));
  }

  /* Static ONLY so the hero can take its height from it. The width is the
     desktop's own 980 — THE COPY'S MEASURE IS NOT A TABLET DECISION
     (client, 2026-09-17: "the length of the copy before was fine, the
     section just needs to be taller"). A first pass narrowed this column
     to buy the headline a shorter line count and that was the wrong trade:
     it re-flowed copy nobody had complained about. */
  .rdk-price-hero__text {
    position: static;
  }

  /* 18px, WHICH IS THE PHONE'S OWN NUMBER rather than a third value — the
     body scale's tablet floor makes the same call and for the same reason.
     The tracking goes to `em` so it follows the floored size instead of
     being a design unit that collapses beside it (-0.44/22 IS -0.02em, so
     the desktop is unchanged wherever this rule does not reach). */
  .rdk-price-hero__pill {
    margin-bottom: max(16px, calc(16 * var(--u)));
    font-size: max(18px, calc(22 * var(--u)));
    letter-spacing: -0.02em;
  }

  /* The measures are the desktop's, untouched — see the copy block above.
     Only the gaps are floored, so they do not collapse under the floored
     type they are separating. */
  .rdk-price-hero__title {
    margin-bottom: max(20px, calc(24 * var(--u)));
  }

  .rdk-price-hero__body {
    margin-bottom: max(32px, calc(56 * var(--u)));
  }

  /* 64, WHICH IS NOT A NUMBER CHOSEN HERE — it is what css/about.css's own
     portrait block already gives this component, matching the footer's
     button (node 267:41710), a pairing the client asked for on 2026-09-16.
     It has to be RESTATED only because this page's `80 * var(--u)` is
     (0,2,0) and out-specifies that block's (0,1,0). The phone block below
     restates the same 64 for the same reason.

     A FIRST PASS FLOORED THE HEIGHT ALONE TO 44 AND THAT IS WHAT THREW THE
     PROPORTIONS (client, 2026-09-17: "the sizing and proportion of the CTA
     button seems off now"). The shared block sizes the whole button as a
     set — 64 tall, 16/40 padding, a 4 border, an 18 label, a 64 square chip
     and an 8.9 x 14.3 chevron — so overriding one member of it left an
     80-button's label, padding and ring on a 44-tall pill: measured, the
     label was 0.41 of the height against the design's 0.2875 and the border
     0.09 against 0.05. Take the whole set or none of it.

     Only the HEIGHT needs restating. The chip's width, the label, the
     padding and the chevron have no rule on this page, so the shared block
     reaches them unopposed. */
  .rdk-price-hero .rdk-about__cta,
  .rdk-price-hero .rdk-about__cta-chip {
    height: 64px;
  }

  /* SCALED UP AND BLED OFF THE RIGHT EDGE (client, 2026-09-17, twice: "scale
     Donk up (not down) and move him to the right if needed", then "scale
     Donk up more. We have the real-estate"). 740 design units against the
     desktop's 610 — 21% up — and hung off the right edge rather than pinned
     at 895.

     THE VERTICAL ROOM IS NOT WHAT LIMITS HIM; THE HEADLINE'S MEASURE IS.
     He is bottom-anchored, so growing him moves his LEFT edge toward the
     copy while the space under him goes unused. Flush right at 740 units he
     would land 10.5 INSIDE the headline at 768 — hence the bleed, which is
     the only thing that buys width once he is already at the edge.

     THE CLEARANCE IS AGAINST HIS INK, NOT HIS BOX: the figure's alpha runs
     3.4% to 96.9% of its canvas, so at width W bled by X his ink starts at
     `100% + X - 0.966W`. At 740 units and a 10% bleed that is 25 clear of
     the headline's measure at 768 and 33 at 1024.

     THE 430 CAP IS THE 1024 TABLET, AND IT IS A CEILING ON HIS HEIGHT, NOT
     HIS WIDTH. He is bottom-anchored, so width buys height at 1.38x — and
     at 1024 the hero is only 648 (a two-line headline leaves it short) while
     `740 * --u` asks for 474 x 654, which put his TOP at -47 and had the
     hero's clip take his ears. Cutting his head is the one thing the design
     never does; it cuts his feet. 430 leaves his top at 13 there, and is
     not binding at 768 or 820, where the headline is the tighter of the two.

     AND THE BLEED IS WHAT THE SIZE COSTS: 10% off the edge crops 6.9% of
     his width in real ink — about 24px at 768, which takes the outer arm of
     the right-hand Donk and nothing else. Rendered the figure against the
     green with the candidate cuts drawn on to check that: 6% is free (it is
     the canvas margin), 10% grazes the arm, and 14% is into his shoulder
     and ear, which is where it would start to read as damage rather than as
     a bleed. Going past ~780 units means accepting that.

     Bottom rather than top: hung from the top at this height he ran past
     the panel and lost his head instead of his feet. `96 * --u - 20px`
     puts his soles 20 past the panel's edge, so it cuts them exactly as
     the design's own clip does. */
  .rdk-price-hero__donk-rig {
    --donk-w: min(calc(740 * var(--u)), 430px);
    left: auto;
    right: calc(var(--donk-w) * -0.1);
    top: auto;
    bottom: calc(96 * var(--u) - 20px);
    width: var(--donk-w);
    height: calc(var(--donk-w) * 842 / 610);
  }

  /* ---------- THE PLAN CARDS, REBALANCED (client, 2026-09-17) ----------
     Three faults, three causes, and they were adding up rather than being
     one thing. Measured at 768, as offsets inside each card:

       lead          5 lines | 4 lines | 5 lines
       button top      243   |   222   |   243
       "from" line   1 line  | 2 lines | 2 lines
       first tick      323   |   323   |   344

     So the buttons were out by 21 AND the checklists were out by 21, from
     two different places. Both are slots that stopped reserving enough once
     the card came down to 215.

     THE LEAD'S SLOT WAS ALREADY THERE AND HAD GONE INERT. It is a fixed
     three-line box on the desktop precisely so the buttons land together
     (the list is what grows) -- but `72 * --u` is 34.6px here against a lead
     that draws 84 to 105, so it reserved nothing and the actual height
     varied per card. Restated in the TYPE's own units it reserves five real
     lines at whatever the floored size resolves to.

     THE "FROM" LINE IS THE LIST'S FIRST ITEM, so its height sets where every
     tick below it starts. "Everything in Integrated, plus:" is 30 characters
     in a 184 measure and cannot be one line at this width -- it is two on
     two cards and one on the third. Reserving two aligns all three; it is
     the same trick as the lead's, one line count down.

     Both are scoped to portrait because both are consequences of the card
     WIDTH, not of the pointer. */
  .rdk-price-alt__lead {
    min-height: calc(5 * var(--rdk-body-lh) * 1em);
  }

  .rdk-price-alt__from {
    min-height: calc(2 * var(--rdk-body-lh) * 1em);
  }
  /* ---------- SIX CORRECTIONS ON THE CARDS AND THE TABLE HEAD
     (client, 2026-09-17, tablet-specific) ---------------------------------
     Four of the six are the same fault wearing different clothes: a value
     written as `N * --u` with nothing under it, which at 768 resolves to
     roughly half what it should be. The table pill drew its label at
     **7.2px**, the tick at **7.68px square**, the banner at **8.64px**. None
     of them is a taste question; they are the collapsing unit again.

     WHERE A FLOOR IS APPLIED, THE WHOLE COMPONENT TAKES IT FROM ONE HEIGHT.
     Flooring a single member leaves the rest at their old scale -- the pill
     would keep a 30-pill's padding on a 26 box -- so each floored thing
     derives every other value from its own design ratio against that height.
     At 1600 they all resolve to the design's numbers exactly and nothing on
     a desktop moves. */

  /* 1. THE STANDFIRST GOES TO THREE LINES. `900 * --u` is 432 here, which
        sets it in four. It breaks to three anywhere from 520 up, so 580 is
        60 clear of that boundary rather than sitting on it -- the knife-edge
        lesson the "What you get" pills already record, where a measure
        solved to the pixel wrapped unpredictably as the type rounded. Still
        89 inside the 669 the section has to give. */
  .rdk-price-alt__standfirst {
    max-width: 580px;
  }

  /* 2. THE TABLE'S PLAN PILLS. 14.4 tall with a 7.2px label; floored to 26,
        with the padding and the label following the node's own 30/16/15. */
  .rdk-price-alt-table__plan {
    --pill-h: max(26px, calc(30 * var(--u)));
    height: var(--pill-h);
    padding: 0 calc(var(--pill-h) * 16 / 30);
    font-size: calc(var(--pill-h) * 15 / 30);
  }

  /* 3. THE TICKS SIT ON THE TEXT NOW. They were 7.68 square with a 1.92 top
        margin inside a 21px line box -- small enough to read as a speck, and
        parked near the cap line rather than beside the words. Floored to 13
        and CENTRED IN THE LINE BOX by derivation, not by a number I picked:
        (line-height - icon) / 2, so it stays centred if either changes. */
  .rdk-price-alt__check {
    --chk: max(13px, calc(16 * var(--u)));
    width: var(--chk);
    height: var(--chk);
    margin-top: calc((var(--rdk-body-lh) * 1em - var(--chk)) / 2);
  }

  /* 4. 16 ABOVE AND BELOW THE BIG NUMBER. It carried 0 above and 7.68 below,
        so it sat tight under the plan name and close to the lead. */
  .rdk-price-alt__num {
    margin: 16px 0;
  }

  /* 5. NO RULE UNDER THE BUTTON. The checklist's `border-top` drew a hairline
        directly beneath the CTA, which read as an underline on it. The
        padding above the list stays, so the spacing is unchanged. */
  .rdk-price-alt__list {
    border-top: 0;
  }

  /* 6. "MOST CLIENTS START HERE" AT A LEGIBLE SIZE. Its 8.64px label sat in a
        25.4 band. Floored to a 40 band, and THE CARD'S TOP PADDING FLOORS
        WITH IT: the banner is absolutely placed over that padding, so a
        taller banner in an unchanged 38.4 of padding would have run into the
        plan name. 80/53 is the node's own relationship between the two, kept
        so the name still clears the banner by the designed amount -- and it
        goes on EVERY card, which is what keeps the three names level. */
  .rdk-price-alt__card {
    --banner-h: max(40px, calc(53 * var(--u)));
    padding-top: calc(var(--banner-h) * 80 / 53);
  }

  .rdk-price-alt__banner {
    height: var(--banner-h);
    gap: calc(var(--banner-h) * 12 / 53);
    font-size: calc(var(--banner-h) * 18 / 53);
    letter-spacing: calc(var(--banner-h) * -0.62 / 53);
  }

  .rdk-price-alt__banner svg {
    width: calc(var(--banner-h) * 15 / 53);
    height: calc(var(--banner-h) * 15 / 53);
  }

  /* ---------- THE SECTION COMES IN TO 20 (client, 2026-09-17: the cards can
     go "almost to the edge of the viewport on tablet portrait") ------------
     `88 * --u` is 42 a side here, which is the desktop's proportion of a 1600
     frame and simply too much of a 768 one. 20 is not a new number: it is
     what the PHONE block already gives this same section, so the two narrow
     breakpoints now agree and only the desktop keeps the 88.

     IT WIDENS THE TABLES TOO, and that is a bonus rather than a side effect
     -- the value columns are a percentage of this measure, so they gain the
     same 44 the cards do, in the one place on the page that most needed it. */
  .rdk-price-alt {
    padding-inline: 20px;
  }

  /* The category headings a step up (client: "slightly larger", then "split
     the difference" -- 26 overshot). `32 * --du` is 21.8 even with --du
     floored, and 24 is the midpoint: enough to read as a heading over the
     rows rather than as a bold label, without competing with the plan pills
     beside it.

     24 IS NOT A RUNG ON THE LADDER, AND THAT IS THE CLIENT'S OWN CALL
     ("I'm ok if it doesn't follow a style for this instance only"). The
     ladder's neighbours are Heading/M 32 and Heading/S 28, so this sits
     below both -- deliberate here, and not a precedent for anything else.
     The tracking is still derived from the size rather than restated, so the
     two cannot drift. `!important` because the base rule carries it -- an
     ordinary declaration here would lose to it however late it sits. */
  .rdk-price-alt-table__cat {
    --cat: max(24px, calc(32 * var(--du)));
    font-size: var(--cat) !important;
    letter-spacing: calc(var(--cat) * -0.64 / 32) !important;
  }

  /* 24 MORE BETWEEN THE CATEGORY GROUPS (client, 2026-09-17). `28 * --u` is
     13.4 here, which is less than the 12-unit border-spacing BETWEEN two rows
     of the same table -- so the groups read as one continuous list rather
     than as five. Written as the design's own value plus the 24 rather than
     as a flat number, so the desktop's 28 is still visibly the source of it
     and only this breakpoint pays the extra. */
  .rdk-price-alt-table {
    margin-top: calc(28 * var(--u) + 24px);
  }

  /* ---------- THE FAQ ANSWERS TAKE THE COLUMN (client, 2026-09-17: use more
     of the available width, "almost to even with the plus and minus
     circles") ------------------------------------------------------------
     TWO things held them back and both had to go, which is why widening one
     alone would have looked like it had not worked: a `780 * --u` max-width,
     374 here, AND an `84 * --u` right padding, another 40. The answer stopped
     **79 short of the chips**, in a column only 453 wide to begin with (the
     FAQ is a two-column grid -- a 173 label column and the list -- so the
     chips sit on the list's own right edge).

     12 of padding leaves the text ending just inside the chips rather than
     flush with them, which is the "almost" in the ask. Measured after: the
     text runs to 442 against 374 and sets 42 characters a line against 36,
     in six lines rather than seven. */
  .rdk-price-faq__a p {
    max-width: none;
    padding-right: 12px;
  }
}

/* ---------- THE UNIT UNDER THE BIG NUMBER NEEDS A FLOOR (client,
   2026-09-17: "concurrent workstreams is too small") ----------------------
   It was `16 * --u` with nothing under it, which is **7.68px** at 768 --
   smaller than the About eyebrow's 4.875px was, and the same collapsing-unit
   trap. Its MEASURE is already `110em / 16` (above), so flooring the size
   carries the measure with it and the design's own two-line break survives:
   at 13px the box is 89 and "concurrent workstreams" still sets on two lines,
   where flooring the size alone would have given three in an 53px box.

   The query is the body scale's own pair, not `hover: none` alone: this is
   type collapsing with WIDTH, so it has to catch a 768-1024 window as well
   as a touch tablet of any size. `max()` may only ever raise -- at 813 and
   above `16 * --u` is the larger and the floor stops binding by itself. */
@media (min-width: 768px) and (max-width: 1024px),
       (min-width: 768px) and (hover: none) {
  .rdk-price-alt__num span {
    font-size: max(13px, calc(16 * var(--u)));
  }
}

/* ---------- THE BUTTONS ARE TOUCH TARGETS AND HAD NO FLOOR (client,
   2026-09-17: "the buttons are too small") --------------------------------
   `.rdk-price-btn` drew **27px tall with an 8.64px label** at 768. It is the
   page's primary action, eight instances of it, on a device driven by a
   thumb -- against the 44 every platform asks. THE 2026-09-16 BUTTON-FLOOR
   PASS NEVER REACHED THIS PAGE: css/pricing.css had no `hover: none` query
   at all, so the case-study, About and footer CTAs were floored that day and
   these were not.

   GATED ON THE POINTER, NOT THE WIDTH, exactly as that pass was: a touch
   target is a property of the DEVICE, so this has to catch a landscape
   tablet (1180 gives 41.3px, still short) as well as a portrait one, while
   no desktop can match it.

   ONE FLOORED HEIGHT DRIVES THE WHOLE BUTTON. Flooring the height alone is
   the mistake this project has already made once and written down -- it left
   an 80-button's label, padding and ring on a 44 pill. Every other value is
   this button's own design ratio against 56, so at 1600 they resolve to the
   design's 56 / 28 / 18 / 3 exactly and nothing moves. */
@media (min-width: 768px) and (hover: none) {
  .rdk-price-btn {
    --btn-h: max(44px, calc(56 * var(--u)));
    height: var(--btn-h);
    padding: 0 calc(var(--btn-h) * 28 / 56);
    font-size: calc(var(--btn-h) * 18 / 56);
    letter-spacing: calc(var(--btn-h) * -0.18 / 56);
    border-width: calc(var(--btn-h) * 3 / 56);
  }
}