/* ─── catalogue.css — homepage plugins area (DRAFT) ─────────────────────────
   Promoted from plugins-lab.css. Literal colours (plum/cream block, diagram UI
   colours) are placeholders to be moved into tokens.css before this ships. */

/* ── Feature block ───────────────────────────────────────────────────────── */
.rx-feature {
  --rx-plum: #1c1119; --rx-paper: #f3ebe0; /* literal brand pair for this block; to move into tokens when signed off */
  --rx-bg: var(--rx-plum); --rx-ink: var(--rx-paper);
  --rx-dim: color-mix(in srgb, var(--rx-ink) 66%, transparent); --rx-rule: color-mix(in srgb, var(--rx-ink) 20%, transparent);
  transition: background-color 900ms ease, color 900ms ease;
  display: grid; align-content: center; gap: var(--s6);
  padding: var(--s7) var(--s4);
  background: var(--rx-bg); color: var(--rx-ink);
  border-block: 1px solid var(--rx-rule);
  min-height: var(--rx-minh, auto);
  grid-template-areas: "copy" "vis" "shot";
}
.rx-feature[data-tone="light"] { --rx-ink: var(--rx-plum); } /* only set by catalogue.js when ?wash=skin lands on a light colourway */
:root[data-rx-ground="page"] .rx-feature { --rx-bg: transparent; --rx-ink: var(--fg); --rx-dim: var(--fg-muted); --rx-rule: var(--rule); }
:root[data-rx-ground="cream"] .rx-feature { --rx-bg: #f5ede1; --rx-ink: #1c1119; --rx-dim: rgba(28,17,25,.66); --rx-rule: rgba(28,17,25,.22); }
:root[data-rx-h="70"]  .rx-feature { --rx-minh: 70svh; }
:root[data-rx-h="100"] .rx-feature { --rx-minh: 100svh; }

.rx-copy { grid-area: copy; display: grid; gap: var(--s4); align-content: center; }

.rx-shot { grid-area: shot; margin: 0; }
.rx-shot img { transition: opacity 700ms cubic-bezier(.22,1,.36,1); display: block; width: 100%; height: auto; border-radius: var(--shot-radius); box-shadow: 0 0 0 1px var(--rx-rule); }

.rx-eyebrow { color: var(--rx-dim); }
.rx-word {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(5.8rem, 17vw, 17rem); line-height: .88; letter-spacing: var(--track-display);
}
:root[data-rx-word="spaced"] .rx-word {
  font-family: var(--font-data); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.8rem, 8.4vw, 10rem); letter-spacing: .28em; line-height: 1;
}
.rx-tagline { margin: 0; max-width: 34ch; font-family: var(--font-text); font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--rx-ink); }
.rx-price { margin: 0; display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.rx-price .label { color: var(--rx-dim); }
.rx-price-now { font-family: var(--font-display); font-size: var(--fs-h2); }
.rx-cta {
  justify-self: start; display: inline-block; padding: 1.4rem 2.4rem;
  font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase;
  color: var(--rx-cta-ink, var(--rx-bg, #000)); background: var(--rx-skin, var(--rx-ink)); border: 1px solid var(--rx-skin, var(--rx-ink)); text-decoration: none; border-radius: var(--r-ctl); transition: background-color var(--hover-dur, 400ms) var(--hover-ease, ease), border-color var(--hover-dur, 400ms) var(--hover-ease, ease), color var(--hover-dur, 400ms) var(--hover-ease, ease);
}
:root[data-rx-ground="page"] .rx-cta { color: var(--ground); }
.rx-cta span { display: inline-block; transition: transform var(--hover-dur, 400ms) var(--hover-ease, ease); }
.rx-cta:focus-visible { background: transparent; color: var(--rx-skin, var(--rx-ink)); }
@media (hover: hover) { .rx-cta:hover { background: transparent; color: var(--rx-skin, var(--rx-ink)); } .rx-cta:hover span { transform: translateX(.4rem); } }
.rx-cta:focus-visible { outline: 2px solid var(--rx-ink); outline-offset: 3px; }

/* Banner treatment (?wash=): flat = one solid colour, no wash/gradient (default); skin = flat, and the
   ground follows the picked colourway; soft = the old blurred-screenshot wash. */
.rx-bg { display: none !important; }
:root[data-rx-wash="soft"] .rx-bg { display: block !important; }

/* Trailer variants: a looping background (placeholder wash for now) with the
   UI shot peeking up from the bottom edge. */
.rx-bg { display: none; position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.rx-bg-img, .rx-bg-video { width: 100%; height: 100%; object-fit: cover; }
.rx-bg-img { filter: blur(34px) saturate(1.4); transform: scale(1.3); opacity: .42; }
.rx-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, var(--rx-bg)); }
.rx-ph { position: absolute; z-index: 2; top: var(--s3); right: var(--s4); color: var(--rx-dim); font-size: 1rem; }
:root[data-rx-ground="page"] .rx-ph { display: none; }

.rx-feature { position: relative; overflow: hidden; }
.rx-copy,
.rx-shot { position: relative; z-index: 1; }
.rx-copy { z-index: 3; } /* the CTA, wheel and chips stay above the UI image's wider click area */
.rx-shot-link { position: absolute; inset: -3rem -3rem -1rem; z-index: 2; border-radius: var(--r-card); } /* the UI image and a little around it opens the plugin page */
:root[data-rx-feature="trailer-ui"] .rx-feature { grid-template-areas: "copy" "shot"; }
:root[data-rx-feature="trailer-ui"] .rx-shot { align-self: center; } /* whole UI visible: it used to sit 16% below the banner edge, cropped */
:root[data-rx-feature="trailer"] .rx-shot { display: none; }
:root[data-rx-feature="trailer"] .rx-feature { grid-template-areas: "copy"; align-content: end; }

@media (min-width: 64em) {
  .rx-feature { padding: var(--s8) var(--s6); gap: var(--s7) var(--s6); grid-template-columns: 1.1fr 1fr; grid-template-areas: "copy vis" "shot shot"; }
  :root[data-rx-feature="trailer-ui"] .rx-feature { grid-template-columns: 1fr 1.1fr; grid-template-areas: "copy shot"; }
  :root[data-rx-feature="trailer"] .rx-feature { grid-template-columns: 1fr; grid-template-areas: "copy"; }
}

/* ── Catalogue ────────────────────────────────────────────────────────────── */
.rx-more { --rx-dur: 900ms; --rx-soft: 560ms; --rx-ease: cubic-bezier(.22, 1, .36, 1); }
/* Catalogue title */
/* #plugins (the nav's Plugins link) lands here: the "Catalogue" word sits right under the
   sticky banner + nav. --head-h is that header's live height (set in boot-home.js). */
#plugins.rx-cathead { scroll-margin-top: calc(var(--head-h, 12rem) - var(--s5)); }
.rx-cathead { padding: var(--s7) var(--s4) var(--s6); border-top: 1px solid var(--rule-strong); }
.rx-cathead-word { position: relative; margin: 0; padding-top: 2.4rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(7.6rem, 21vw, 24rem); line-height: .82; letter-spacing: -.03em; }
.rx-cathead-word sup { position: absolute; top: 0; right: 0; font-family: var(--font-data); font-size: clamp(1.4rem, 2vw, 2.2rem); font-weight: 500; letter-spacing: var(--track-data); line-height: 1; }
@media (min-width: 64em) { .rx-cathead { padding: var(--s7) var(--s6) var(--s7); } .rx-cathead-word { padding-top: 0; } .rx-cathead-word sup { top: .5em; } }

/* Archive tag as a divider between the title and the list */
.rx-divider { box-sizing: border-box; width: 100%; max-width: none; display: flex; gap: var(--s4); align-items: center; margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--rule); font-family: var(--font-data); font-size: 1.05rem; letter-spacing: .38em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.rx-dash { flex: 1; min-width: 2rem; overflow: hidden; letter-spacing: 0; }
.rx-dash::before { content: "------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------"; }
@media (min-width: 64em) { .rx-divider { padding: var(--s3) var(--s6); } }

/* Colourways strip: paint chips (left half = the skin's ground, right half = its accent) */
.rx-ways { display: grid; gap: var(--s3); margin-top: var(--s3); }

/* Base = the plain stack (mobile, and the "static" baseline): everything shown. */
.rx-cat {
  --fill-bg: var(--fg); --fill-ink: var(--ground);
  position: relative; display: grid; align-items: center; gap: var(--s2) var(--s3);
  grid-template-columns: 1fr auto; grid-template-areas: "word word" "id price" "cta cta" "shot shot";
  padding: var(--s4); border-top: 1px solid var(--rule); color: inherit; text-decoration: none;
}
:root[data-rx-fill="cream"] .rx-cat { --fill-bg: #f5ede1; --fill-ink: #1c1119; }
.rx-cat-list > .rx-cat:last-child { border-bottom: 1px solid var(--rule); }
.rx-cat > * { position: relative; z-index: 1; }
.rx-cat-word  { grid-area: word; font-family: var(--font-display); font-style: italic; font-size: clamp(6rem, 17vw, 13rem); line-height: .9; letter-spacing: var(--track-display); }

/* Hierarchy: word (huge italic) > name (upright serif title) > tagline (small mono) */
.rx-cat-id    { grid-area: id; display: grid; gap: var(--s2); align-content: center; }
.rx-cat-name  { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 3.4vw, 3.4rem); line-height: 1; letter-spacing: var(--track-tight); }
.rx-cat-tag   { font-family: var(--font-data); font-size: 1.15rem; letter-spacing: var(--track-data); text-transform: uppercase; line-height: 1.5; color: var(--fg-muted); max-width: 34ch; }
.rx-cat-price { grid-area: price; font-family: var(--font-data); font-size: var(--fs-small); color: var(--fg-muted); }

/* CTA: the [./slug] console readout (.rx-go-con, below) */
.rx-go { grid-area: cta; justify-self: end; display: inline-flex; align-items: center; gap: 1.2rem; line-height: 1; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: inherit; }

.rx-cat-panel, .rx-cat-panel-in { display: contents; }
.rx-cat-shot  { grid-area: shot; display: block; width: min(26rem, 100%); }
.rx-cat-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--shot-radius); }
.rx-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (min-width: 64em) {
  .rx-cat { padding: var(--s3) var(--s6); column-gap: var(--s5);
    grid-template-columns: 1fr 22rem 34rem 9rem auto;
    grid-template-areas: "word shot id price cta"; }
  .rx-cat-shot { width: 100%; }
  .rx-cat-price { text-align: right; }
}

/* Console CTA (the only shipped one; built from things already on the site) */
.rx-go-con { display: none; }

/* console = [./liplock] → : brackets fixed around a field; the name types in
   character by character (JS, uneven rhythm), caret follows, arrow lights up when
   done. No hyphens anywhere. */
:root[data-rx-cta="console"] .rx-go-con { display: inline-flex; align-items: center; gap: 1.2ch; letter-spacing: 0; text-transform: none; font-size: var(--fs-data); }
.rx-con-box { display: inline-flex; align-items: center; }
@media (min-width: 64em) { :root[data-rx-cta="console"] .rx-go-con { width: 21ch; } .rx-con-box { flex: 1; } }
.rx-con-close { margin-left: auto; }
.rx-con-slug { white-space: pre; }
.rx-con-caret { display: inline-block; width: .55em; height: 1.1em; margin-left: .1ch; background: var(--p, currentColor); }
.rx-con-head { opacity: .4; transition: opacity var(--rx-soft) ease; }
.rx-cat.is-typed .rx-con-head { opacity: 1; }
.rx-cat.is-typed .rx-con-caret, .rx-aa-cta.is-typed .rx-aa-caret { animation: rx-blink 1.3s steps(1, end) infinite; }
@keyframes rx-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rx-cat.is-typed .rx-con-caret, .rx-aa-cta.is-typed .rx-aa-caret { animation: none; } }

/* ── combo: bar + fill + small peek + knob cursor ────────────────────────────
   Open state (.is-open) drives all of it. Lab-only timing: slower and softer
   than the site tokens (--rx-dur 900ms / --rx-soft 560ms).
   · bar: strokes down the left edge in the plugin's colour (stroke-draw, line-v)
   · fill: the row settles to a near-opaque cream / inverted tone, text swaps ink
   · peek: the TOP of the plugin UI rises centred from the row's bottom edge, and
     hovering the UI itself raises it a little further (height expansion — NOT
     one of the three moves; needs approval). Slot can hold a looping trailer.
   Mobile / touch: no hover — every row shows its peek strip, static. */
:root[data-rx-hover="combo"] { --rx-peek-h: 12rem; --rx-peek-more: 5rem; }
:root[data-rx-hover="combo"][data-rx-peek="low"]  { --rx-peek-h: 8rem;  --rx-peek-more: 3.6rem; }
:root[data-rx-hover="combo"][data-rx-peek="tall"] { --rx-peek-h: 17rem; --rx-peek-more: 6rem; }

:root[data-rx-hover="combo"] .rx-cat { padding: var(--s4) var(--s4) 0; grid-template-columns: 1fr auto; grid-template-areas: "word word" "id price" "cta cta" "panel panel"; }
:root[data-rx-hover="combo"] .rx-cat-id, :root[data-rx-hover="combo"] .rx-cat-price, :root[data-rx-hover="combo"] .rx-go { padding-bottom: var(--s3); }
:root[data-rx-hover="combo"] .rx-cat-panel { display: grid; grid-area: panel; grid-template-rows: 1fr; }
:root[data-rx-hover="combo"] .rx-cat-panel-in { display: block; min-height: 0; overflow: hidden; }
:root[data-rx-hover="combo"] .rx-cat-shot { width: min(64rem, 100%); margin-inline: auto; height: calc(min(var(--rx-peek-h), 10rem) + var(--s3)); padding-top: var(--s3); box-sizing: border-box; overflow: hidden; }
:root[data-rx-hover="combo"] .rx-cat-shot img { aspect-ratio: auto; height: auto; border-radius: var(--shot-radius) var(--shot-radius) 0 0; }

@media (hover: hover) and (min-width: 64em) {
  :root[data-rx-hover="combo"] .rx-cat { padding: 0 var(--s6); column-gap: var(--s5);
    grid-template-columns: 1fr 34rem 9rem auto;
    grid-template-areas: "word id price cta" "panel panel panel panel"; }
  :root[data-rx-hover="combo"] .rx-cat-word { padding-block: var(--s3); }
  :root[data-rx-hover="combo"] .rx-cat-id, :root[data-rx-hover="combo"] .rx-cat-price, :root[data-rx-hover="combo"] .rx-go { padding-bottom: 0; }
  :root[data-rx-hover="combo"] .rx-cat-price { text-align: right; }
  :root[data-rx-hover="combo"] .rx-cat-panel { grid-template-rows: 0fr; transition: grid-template-rows var(--rx-dur) var(--rx-ease); }
  :root[data-rx-hover="combo"] .rx-cat.is-open .rx-cat-panel { grid-template-rows: 1fr; }
  :root[data-rx-hover="combo"] .rx-cat-shot { width: min(64rem, 62%); height: calc(var(--rx-peek-h) + var(--s3)); transition: height var(--rx-dur) var(--rx-ease); }
  /* nested hover: the UI itself rises a little more */
  :root[data-rx-hover="combo"] .rx-cat.is-open .rx-cat-shot:hover { height: calc(var(--rx-peek-h) + var(--rx-peek-more) + var(--s3)); }

  :root[data-rx-hover="combo"] .rx-cat::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: .6rem; background: var(--p, var(--accent)); transform: scaleY(0); transform-origin: top; transition: transform var(--rx-dur) var(--rx-ease); }
  :root[data-rx-hover="combo"] .rx-cat::after { content: ""; position: absolute; z-index: 0; inset: 0; background: var(--fill-bg); opacity: 0; transition: opacity var(--rx-soft) ease-out 240ms; }
  :root[data-rx-hover="combo"] .rx-cat { transition: color var(--rx-soft) ease-out 240ms; }
  :root[data-rx-hover="combo"] .rx-cat.is-open::before { transform: scaleY(1); }
  :root[data-rx-hover="combo"] .rx-cat.is-open::after { opacity: .96; }
  :root[data-rx-hover="combo"] .rx-cat.is-open { color: var(--fill-ink); }
  :root[data-rx-hover="combo"] .rx-cat.is-open :is(.rx-cat-tag, .rx-cat-price) { color: inherit; opacity: .7; }

}
@media (prefers-reduced-motion: reduce) {
  .rx-cat,
.rx-cat::before,
.rx-cat::after,
.rx-cat-panel,
.rx-cat-shot,
.rx-go,
.rx-go * { transition: none !important; }
}

/* ── All-Access closer ("all." last verb; the other four closers were removed 2026-10-16) ───── */
.rx-aa { border-top: 1px solid var(--rule-strong); }
.rx-aa-v { display: none; padding: var(--s7) var(--s4); gap: var(--s5); --aa-dim: var(--fg-muted); }
:root[data-rx-aa="last-verb"] .rx-aa-v--last { display: grid; }
.rx-aa-v--invert { --aa-bg: var(--fg); --aa-ink: var(--ground); --aa-dim: color-mix(in srgb, var(--ground) 62%, transparent); background: var(--aa-bg); color: var(--aa-ink); transition: background-color 700ms ease; }

@media (min-width: 64em) { .rx-aa-v { padding: var(--s8) var(--s6); } }

.rx-aa-price { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; }
.rx-aa-price small { font-family: var(--font-data); font-size: .4em; letter-spacing: var(--track-data); margin-left: .3em; }
.rx-aa-price em { display: inline-block; margin-left: .6em; font-family: var(--font-data); font-size: var(--fs-data); font-style: normal; letter-spacing: var(--track-data); text-transform: uppercase; color: var(--aa-dim); }

.rx-aa-desc { margin: 0; max-width: 36ch; font-family: var(--font-text); font-size: var(--fs-lead); line-height: var(--lh-snug); }

.rx-aa-cta { justify-self: start; display: inline-flex; align-items: center; gap: 1.2ch; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: 0; color: inherit; text-decoration: none; padding: 1.2rem 0; }
.rx-aa-box { display: inline-flex; align-items: center; width: 15ch; }
.rx-aa-close { margin-left: auto; }
.rx-aa-slug { white-space: pre; }
.rx-aa-caret { display: inline-block; width: .55em; height: 1.1em; margin-left: .1ch; background: currentColor; }
.rx-aa-arrow { opacity: .4; transition: opacity var(--rx-soft) ease; }
.rx-aa-cta.is-typed .rx-aa-arrow, .rx-aa-cta:hover .rx-aa-arrow, .rx-aa-cta:focus-visible .rx-aa-arrow { opacity: 1; }

/* 1 · last verb — the catalogue's final row: "all." */
.rx-aa-v--last { grid-template-columns: 1fr; align-content: end; padding-block: var(--s6); gap: var(--s4); }
.rx-aa-word { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(10rem, 26vw, 22rem); line-height: .8; letter-spacing: var(--track-display); transition: transform 900ms var(--rx-ease, cubic-bezier(.22,1,.36,1)); }
.rx-aa-body { display: grid; gap: var(--s4); align-content: end; }
/* Everything in the "all." block opens All-Access except the switch: the CTA's ::after covers the block. */
.rx-aa-v--last .rx-aa-cta::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.rx-aa-v--last .rx-sw { z-index: 3; }
/* Hierarchy: "all." (display) > price (display, large) > description > the yearly line (mono, quiet). */
.rx-aa-v--last .rx-aa-price { font-size: clamp(5.2rem, 8vw, 8.4rem); line-height: .95; letter-spacing: var(--track-display); }
.rx-aa-v--last .rx-aa-price small { font-size: .26em; margin-left: .35em; }
.rx-aa-v--last .rx-aa-price em { display: block; margin: var(--s3) 0 0; }
@media (min-width: 64em) { .rx-aa-v--last { grid-template-columns: 1.3fr 1fr; align-items: end; padding-block: var(--s7); }  }

/* behaves like a catalogue row: .is-open (hover/focus, desktop) strokes a bar down
   the left edge in the plugin colour; the CTA types (JS). No slide, no fan. */
.rx-aa-v--last { position: relative; }
@media (hover: hover) and (min-width: 64em) {
  /* the coloured left bar that used to stroke in here was replaced by the [data-aaa] treatments in home-extras.css */
  .rx-aa-v--last .rx-aa-arrow { opacity: .4; }
  .rx-aa-v--last.is-open .rx-aa-arrow, .rx-aa-v--last .rx-aa-cta.is-typed .rx-aa-arrow { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .rx-aa-v--last::before, .rx-sw-plate, .rx-sw-lab, [data-aa-price] { transition: none !important; } }

.rx-sw-row { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; }
[data-aa-price] { transition: opacity 220ms ease-out; }
/* the site's switch language: black housing, red throw-plate, white type — rectangular */
.rx-sw { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; width: 24rem; height: 5.2rem; padding: 0; border: 1.5px solid var(--aa-ink); border-radius: var(--r-ctl); background: var(--aa-ink); color: var(--aa-bg); cursor: pointer; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; }

.rx-sw-plate { position: absolute; top: .35rem; left: .35rem; width: calc(50% - .35rem); height: calc(100% - .7rem); border-radius: .15rem; background: var(--switch-plate, #e8170c); transition: transform 760ms var(--ease-throw, cubic-bezier(.2, .8, .3, 1)); }
.rx-sw[aria-checked="true"] .rx-sw-plate { transform: translateX(calc(100% + .0rem)); }
.rx-sw-lab { position: relative; z-index: 1; display: grid; place-items: center; transition: color 400ms ease; }
.rx-sw[aria-checked="false"] .rx-sw-lab:first-of-type, .rx-sw[aria-checked="true"] .rx-sw-lab:last-of-type { color: #fff; }
.rx-sw:focus-visible { outline: 2px solid var(--aa-ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .rx-sw-plate, .rx-sw-lab { transition: none; } }

/* Per-theme skin for a row that has a light variant (Resultant: Honeydew in light theme) */
.rx-img-l { display: none !important; }
[data-theme="light"] .rx-img-d { display: none !important; }
[data-theme="light"] .rx-img-l { display: block !important; }

/* ── Colour wheel: middle size — accent ring, thin ground band, split hub; name,
      colour blocks and status beside it. Normal cursor throughout. ───────────── */
.rx-wheel { --wt: 700ms; --we: var(--rx-ease, cubic-bezier(.22,1,.36,1)); display: grid; grid-template-columns: 12.5rem 1fr; gap: var(--s4); align-items: center; }
.rx-wheel-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; }
.rx-wheel-svg, .rx-wheel-svg * { outline: none !important; }
.rx-wedge { cursor: pointer; }
.rx-wedge path { stroke: none; transition: opacity var(--wt) ease, transform var(--wt) var(--we); transform-origin: 120px 120px; }
.rx-wd-g { stroke: var(--rx-rule); stroke-width: .7; }
.rx-wheel-svg:hover .rx-wedge:not(.is-hot):not(.is-kept) path { opacity: .5; }
.rx-wheel-svg .rx-wedge.is-hot path { opacity: 1; }
.rx-wedge.is-hot path { transform: scale(1.03); }
.rx-wedge.is-kept .rx-wd-g { stroke: var(--rx-ink); stroke-width: 1.2; }
.rx-wedge:focus-visible .rx-wd-a { stroke: var(--rx-ink); stroke-width: 1.5; }
.rx-wh-hub-g { fill: var(--hg, #1d141a); stroke: var(--rx-rule); stroke-width: 1; transition: fill var(--wt) ease; }
.rx-wh-hub-a { fill: var(--ha, #df9957); transition: fill var(--wt) ease; }
.rx-wh-vec { stroke: var(--rx-ink); stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.rx-wk-body { fill: var(--rx-ink); stroke: var(--rx-bg, #000); stroke-width: 2; }
.rx-wk-dot { fill: var(--ha, #df9957); transition: fill var(--wt) ease; }
.rx-wheel-read { display: grid; gap: .6rem; align-content: center; min-width: 0; }
.rx-wheel-read p { margin: 0; }
.rx-wr-name { font-family: var(--font-display); font-style: normal; font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; color: var(--rx-ink); }
.rx-wr-blocks { display: grid; gap: .4rem; font-family: var(--font-data); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rx-dim); }
.rx-wr-b { display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; gap: .8rem; }
.rx-wr-b i { display: block; height: 1.1rem; border: 1px solid var(--rx-rule); transition: background-color var(--wt) ease; }
.rx-wr-b b { font-weight: 400; color: var(--rx-ink); }
.rx-wr-state { color: var(--rx-dim); font-size: 1rem; letter-spacing: .26em; transition: color var(--wt) ease; }
.rx-wheel.is-trying .rx-wr-state { color: var(--rx-ink); }
@media (min-width: 64em) { .rx-wheel { grid-template-columns: 16rem 1fr; gap: var(--s5); } }
@media (prefers-reduced-motion: reduce) { .rx-wedge path, .rx-wh-hub-g, .rx-wh-hub-a, .rx-wk-dot, .rx-wr-b i { transition: none; } }

/* ── Colourway selector, hardware versions (?pick=dial|strip; wheel above is the third) ───────────
   dial : a 7-position detented rotary switch. 270 degree sweep, 7 o'clock to 5 o'clock, one detent per
          colourway every 45 degrees (step-snapped, no in-between). Knob metal = conic + linear gradient
          built from the block's own ink/ground (no literal colours); dual shadow: inset top highlight
          + tight bottom shadow. Drag turns it freely and it settles into the nearest detent.
   strip: the same seven positions as a straight ruled selector with a sliding LED bar. */
.rx-wheel[data-pick="dial"], .rx-wheel[data-pick="strip"] { grid-template-columns: 1fr; gap: var(--s4); }
.rx-dialbox { position: relative; width: min(100%, 19rem); aspect-ratio: 1; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.rx-dial-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rx-dial-svg * { outline: none; }
.rx-dl-ring { fill: none; stroke: var(--rx-rule); stroke-width: .8; }
.rx-dl-spoke { stroke: var(--rx-rule); stroke-width: .6; opacity: .8; }
.rx-dl-sec { fill: var(--rx-ink); opacity: .05; }
.rx-dl-vec { transform-origin: 120px 120px; transform: rotate(var(--ang, 0deg)); pointer-events: none; }
.rx-dl-vec line { stroke: var(--ha, var(--rx-ink)); stroke-width: 1; stroke-dasharray: 3 3; opacity: .85; }
.rx-dl-vec circle { fill: var(--ha, var(--rx-ink)); }
.rx-dialbox.is-drag .rx-dl-vec { transition: none; }
@media (prefers-reduced-motion: reduce) { .rx-dl-vec { transition: none; } }
.rx-dl-arc { fill: none; stroke: var(--rx-rule); stroke-width: 1; }
.rx-dl-major { stroke: var(--rx-ink); stroke-width: 1.2; opacity: .75; }
.rx-dl-minor { stroke: var(--rx-dim); stroke-width: .8; opacity: .6; }
.rx-dsw { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform 560ms var(--we, cubic-bezier(.22,1,.36,1)); }
.rx-dsw-hit { fill: transparent; }
.rx-dsw-a, .rx-dsw-g { stroke: var(--rx-rule); stroke-width: .8; }
.rx-dsw-ring { fill: none; stroke: var(--rx-ink); stroke-width: 1.2; opacity: 0; transition: opacity 560ms ease; }
.rx-dsw.is-kept .rx-dsw-ring { opacity: 1; }
.rx-dsw.is-hot { transform: scale(1.08); }
.rx-dsw:focus-visible .rx-dsw-ring { opacity: 1; stroke-dasharray: 2 2; }
.rx-dial-knob {
  position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 50%;
  transform: rotate(var(--ang, 0deg));
  background: none; border: 1px solid var(--rx-ink); pointer-events: none;
}
.rx-dial-knob::before { content: none; }
.rx-dial-knob::after { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 34%; margin-left: -.75px; background: var(--ha, var(--rx-ink)); transition: background-color var(--wt, 700ms) ease; }
.rx-dialbox.is-drag .rx-dial-knob { transition: none; }

.rx-strip { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); max-width: 36rem; border-top: 1px solid var(--rx-rule); border-bottom: 1px solid var(--rx-rule); }
.rx-st { position: relative; display: grid; justify-items: center; gap: .7rem; padding: 1.1rem 0 1.2rem; background: none; border: 0; border-left: 1px solid var(--rx-rule); color: var(--rx-dim); font: 500 1rem var(--font-data); letter-spacing: .14em; cursor: pointer; transition: color 500ms ease, background-color 500ms ease; }
.rx-st:first-of-type { border-left: 0; }
.rx-st i { display: block; width: 2.2rem; height: 3.2rem; background: linear-gradient(180deg, var(--a) 62%, var(--g) 62%); border: 1px solid var(--rx-rule); }
.rx-st.is-hot, .rx-st.is-kept { color: var(--rx-ink); }
.rx-st.is-hot { background: color-mix(in srgb, var(--rx-ink) 7%, transparent); }
.rx-st:focus-visible { outline: 1px dashed var(--rx-ink); outline-offset: -4px; }
.rx-strip-led { position: absolute; left: 0; bottom: -1px; width: calc(100% / 7); height: 3px; background: var(--ha, var(--rx-ink)); transform: translateX(calc(var(--i, 1) * 100%)); transition: transform 780ms var(--we, cubic-bezier(.22,1,.36,1)), background-color var(--wt, 700ms) ease; pointer-events: none; }

@media (min-width: 64em) { .rx-wheel[data-pick="dial"] { grid-template-columns: 19rem 1fr; gap: var(--s5); } .rx-dialbox { width: 19rem; } }
@media (prefers-reduced-motion: reduce) { .rx-dial-knob, .rx-dsw, .rx-strip-led, .rx-st { transition: none; } }
@media (hover: none) { .rx-dsw.is-hot { transform: none; } }

/* ── Draft page: tighter footer top (html[data-draft] only; the centred columns and fitted wordmark live in footer.css) ── */
html[data-draft] .footer { padding-top: var(--s5); }

/* ── Draft homepage: slim hero, so the banner shows above the fold ───────────── */
/* Hero type, a lot bigger (Jude, 2026-10-15). Phones: the widest word ("underground.") sets the
   ceiling, same safe formula as home.css's mobile cap. Desktop: scales with the viewport. */
html[data-draft] .hero-title { font-size: clamp(3.4rem, calc(19vw - 1.2rem), 18.5rem); }
@media (min-width: 64em) { html[data-draft] .hero-title { font-size: clamp(9rem, 11.5vw, 22rem); } }
/* 2026-10-16: the first hero line steps back so Resultant is the loudest thing on the page (order kept).
   ?hero=big restores the old size, ?hero=mid is halfway. Baked-in default: small. */
html[data-draft][data-rx-hero="small"] .hero-title { font-size: clamp(3rem, 11vw, 6rem); }
html[data-draft][data-rx-hero="mid"]   .hero-title { font-size: clamp(3.4rem, 15vw, 11rem); }
@media (min-width: 64em) {
  html[data-draft][data-rx-hero="small"] .hero-title { font-size: clamp(5rem, 6.4vw, 11rem); }
  html[data-draft][data-rx-hero="mid"]   .hero-title { font-size: clamp(7rem, 8.6vw, 15rem); }
}
html[data-draft] .hero-lead + .hero-lead { display: none; }

/* ── Draft hero type hierarchy (2026-10-16) ─────────────────────────────────────
   One ladder, top to bottom: Resultant word (the star, on the dark band) > hero headline
   (serif) > lead (small mono, quiet) > uppercase mono labels. The lead used to inherit
   the 250% hero-scale step and read as big as the headline on phones; these win by
   specificity over the [data-hero*] lab attributes without touching them. */
html[data-draft][data-rx-hero="small"] .hero-title { font-size: clamp(3rem, 10vw, 6rem); line-height: var(--lh-tight); }
html[data-draft] .hero-lead {
  font-size: 1.7rem; line-height: 1.6; letter-spacing: 0; max-width: 34ch;
  margin-top: var(--s4); color: var(--fg-muted);
}
@media (min-width: 64em) {
  html[data-draft][data-rx-hero="small"] .hero-title { font-size: clamp(5rem, 5.6vw, 9.6rem); }
  html[data-draft] .hero-lead { font-size: 2rem; margin-top: var(--s6); }
}
/* Banner copy: the verb word leads; tagline steps down from the lead size, price stays the
   second loudest thing in the block, labels stay small uppercase mono. */
.rx-tagline { font-size: 1.7rem; line-height: 1.5; }
.rx-feature .rx-copy { gap: var(--s3); }
.rx-feature .rx-word + .rx-tagline { margin-top: var(--s2); }
.rx-feature .rx-cta { margin-top: var(--s3); }
:root[data-rx-word="spaced"] .rx-word { font-size: clamp(3.2rem, 11.4vw, 10rem); letter-spacing: .2em; }
@media (min-width: 64em) {
  .rx-tagline { font-size: 2rem; }
  :root[data-rx-word="spaced"] .rx-word { letter-spacing: .28em; }
}
html[data-draft] .hero-build { display: none; }

/* ── Proof strip ─────────────────────────────────────────────────────────────── */
.rx-proof { border-top: 1px solid var(--rule-strong); }
.rx-proof .rx-divider { border-top: 0; border-bottom: 1px solid var(--rule); }
.rx-proof-body { padding: var(--s5) var(--gutter) var(--s6); }
.rx-proof .p-clips { gap: var(--s4); }
.rx-proof .p-clip { flex: 0 0 56%; max-width: 26rem; }
@media (min-width: 64em) {
  .rx-proof-body { padding: var(--s6) var(--gutter) var(--s7); }
  .rx-proof .p-clips { gap: var(--s5); justify-content: center; }
  .rx-proof .p-clip { flex: 0 1 26rem; }
}

/* ── Catalogue badge ─────────────────────────────────────────────────────────── */
.rx-badge { justify-self: start; padding: .3rem .8rem; border: 1px solid currentColor; font-size: 1rem; letter-spacing: .26em; color: var(--fg-muted); }

/* ── Pre-flight ──────────────────────────────────────────────────────────────── */
.rx-pre { border-top: 1px solid var(--rule-strong); }
.rx-pre .rx-divider { border-top: 0; border-bottom: 1px solid var(--rule); }
.rx-pre-body { padding: var(--s6) var(--gutter) var(--s7); display: grid; gap: var(--s5); }
.rx-pre-title { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(6.4rem, 19vw, 11.5rem); line-height: .9; letter-spacing: -.02em; white-space: nowrap; }
.rx-pre-sub { margin: var(--s5) 0 0; max-width: 34ch; font-family: var(--font-text); font-size: clamp(1.6rem, 2vw, 1.9rem); line-height: 1.65; color: var(--fg-muted); }
.rx-pre-list { list-style: none; margin: 0; padding: 0; }
.rx-pre-row { display: grid; grid-template-columns: 4.6rem 1fr; gap: var(--s1) var(--s3); padding: var(--s3) 0; align-items: baseline; }
.rx-pre-mark { font-family: var(--font-data); font-size: var(--fs-data); color: var(--accent, var(--fg)); letter-spacing: 0; }
.rx-pre-name { font-family: var(--font-display); font-size: clamp(2.4rem, 4.2vw, 3.2rem); line-height: 1.05; }
.rx-pre-why { grid-column: 2; font-family: var(--font-data); font-size: 1.15rem; letter-spacing: var(--track-data); text-transform: uppercase; line-height: 1.6; color: var(--fg-muted); max-width: 58ch; }
@media (min-width: 64em) {
  .rx-pre-body { grid-template-columns: 1fr 1.5fr; gap: var(--s7); align-items: start; padding: var(--s7) var(--s6) var(--s8); }
  .rx-pre-head { position: sticky; top: calc(var(--head-h, 15rem) + var(--s5)); }
  .rx-pre-row { grid-template-columns: 4.6rem 28rem 1fr; padding: var(--s3) 0; }
  .rx-pre-why { grid-column: 3; }
}

/* ═══ Draft redesign pass (REDESIGN-V3 notes) — scoped to html[data-draft] ═════
   Radius values are DRAFT-LOCAL on purpose: adding them to tokens.css is a rule
   change that needs Jude's sign-off. Warm ground applies to the light theme only. */
/* radii: tokens.css */
/* light ground/surface now come from tokens.css (ivory) */

/* accent as punctuation: each verb's full stop takes its plugin colour */
.rx-cat-word b { font-weight: 400; color: var(--p-text, var(--p, currentColor)); }

/* credit line above the banner CTA (placeholder content) */
.rx-cred { display: flex; align-items: center; gap: var(--s3); margin: 0; color: var(--rx-dim); font-family: var(--font-data); font-size: 1.15rem; letter-spacing: var(--track-data); text-transform: uppercase; }
.rx-cred em { font-style: normal; border: 1px solid currentColor; border-radius: var(--r-ctl); padding: var(--s1) var(--s2); margin-left: .6rem; font-size: 1rem; letter-spacing: .2em; }

/* pill CTA */
html[data-draft] .rx-cta { border-radius: 0; } /* Jude 2026-10-16: no pill on the banner button; a plain hairline rectangle */

/* All-Access: a rounded, bordered tray set inside the page rather than a full-bleed slab */
html[data-draft] .rx-aa { border-top: 0; padding: var(--s5) var(--gutter) var(--s6); }
html[data-draft] .rx-aa-v--last { border-radius: var(--r-tray); overflow: hidden; border: 1px solid var(--rule-strong); }

/* testimonials tray (placeholder cards) */
.rx-say { padding: var(--s6) var(--gutter); }
.rx-say-tray { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-tray); padding: var(--s6) var(--s4); }
.rx-say-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.rx-say-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(4.2rem, 9vw, 8.4rem); line-height: .95; letter-spacing: -.02em; }
.rx-say-title b { font-weight: 400; color: var(--accent, currentColor); }
.rx-close-title b { font-weight: 400; color: color-mix(in srgb, var(--ground) 55%, transparent); }
.rx-say-sub { margin: 0; color: var(--fg-muted); }
.rx-say-cards { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); }
.rx-say-card { position: relative; flex: 0 0 82%; scroll-snap-align: start; margin: 0; padding: var(--s5) var(--s4) var(--s4); display: grid; gap: var(--s5); align-content: space-between; background: var(--ground); border: 1px solid var(--rule); border-radius: var(--r-card); }
.rx-say-card blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(2.2rem, 3vw, 2.8rem); line-height: 1.2; }
.rx-say-card figcaption { display: flex; align-items: center; gap: var(--s3); }
.rx-say-av { width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--rule); flex: none; }
.rx-say-who { display: grid; gap: .2rem; font-family: var(--font-data); font-size: 1.15rem; letter-spacing: var(--track-data); text-transform: uppercase; }
.rx-say-who b { font-weight: 600; }
.rx-say-who i { font-style: normal; color: var(--fg-muted); }

@media (min-width: 64em) {
  .rx-say { padding: var(--s7) var(--gutter); }
  .rx-say-tray { padding: var(--s7) var(--s6); }
  .rx-say-cards { overflow: visible; }
  .rx-say-card { flex: 1 1 0; }
}

/* pre-flight: the list becomes one bordered, rounded object */
.rx-pre-list { border: 1px solid var(--rule); border-radius: var(--r-card); padding: 0 var(--s4); background: var(--surface); }
.rx-pre-row:first-child { padding-top: var(--s4); }
.rx-pre-row:last-child { padding-bottom: var(--s4); }

/* closing band: full-bleed texture, frosted card */
/* Closing band: the opposite of the page — --fg ground with --ground type, so it flips with
   the theme (dark band on cream, cream band on dark) instead of the old purple. */
.rx-close { position: relative; display: grid; place-items: center; padding: var(--s8) var(--gutter); background: var(--fg); color: var(--ground); isolation: isolate; }
.rx-close-card { min-width: 0; width: min(100%, 68rem); display: grid; gap: var(--s4); padding: var(--s6) var(--s5); color: var(--ground); text-align: left; border: 1px solid color-mix(in srgb, var(--ground) 30%, transparent); border-radius: var(--r-card); background: color-mix(in srgb, var(--ground) 7%, transparent); }
.rx-close-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(4rem, 8vw, 7.2rem); line-height: .95; letter-spacing: -.02em; }
.rx-close-sub { margin: 0; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: color-mix(in srgb, var(--ground) 72%, transparent); }
.rx-close-form { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rx-close-input { flex: 1 1 24rem; min-width: 0; padding: 1.4rem 2rem; font: inherit; font-family: var(--font-data); font-size: var(--fs-small); color: var(--ground); background: color-mix(in srgb, var(--ground) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ground) 40%, transparent); border-radius: var(--r-ctl); }
.rx-close-input::placeholder { color: color-mix(in srgb, var(--ground) 55%, transparent); }
.rx-close-btn { padding: 1.4rem 2.8rem; font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg); background: var(--ground); border: 1px solid var(--ground); border-radius: var(--r-ctl); cursor: pointer; transition: background-color var(--hover-dur, 400ms) var(--hover-ease, ease), color var(--hover-dur, 400ms) var(--hover-ease, ease); }
.rx-close-btn:focus-visible { background: transparent; color: var(--ground); }
@media (hover: hover) { .rx-close-btn:hover { background: transparent; color: var(--ground); } }
.rx-close-collab { margin: var(--s2) 0 0; padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--ground) 25%, transparent); font-family: var(--font-data); font-size: var(--fs-small); color: color-mix(in srgb, var(--ground) 80%, transparent); }
.rx-close-collab a { color: var(--ground); text-decoration: underline; text-underline-offset: .5rem; } /* may wrap: nowrap here was wider than a 320px phone and stretched the whole page */

/* countries stat (real: Stripe order data) */
.rx-stat { margin: 0; font-family: var(--font-display); font-size: clamp(5.6rem, 15vw, 14rem); line-height: .9; letter-spacing: -.03em; text-align: center; }
.rx-stat b { font-weight: 400; font-style: italic; }
.rx-stat i { font-style: normal; color: var(--accent, currentColor); }
.rx-stat-sub { margin: var(--s3) auto var(--s6); text-align: center; color: var(--fg-muted); max-width: 52ch; }
.rx-cred-txt { font-size: 1.15rem; }

/* social carousel (user-scrolled; focused card centred) */
.rx-car-wrap { position: relative; margin-inline: calc(-1 * var(--gutter)); }
.rx-car { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: var(--s3) calc(50% - 15rem) var(--s4); }
.rx-car::-webkit-scrollbar { display: none; }
.rx-car:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.rx-proof .rx-car .p-clip { flex: 0 0 30rem; max-width: none; scroll-snap-align: center; opacity: .5; transform: scale(.96); transition: opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); }
.rx-proof .rx-car .p-clip.is-focus { opacity: 1; transform: scale(1); }
.rx-proof .rx-car .p-clip-play, .rx-proof .rx-car .p-clip-video { border-radius: var(--r-card); }
.rx-car-ctrl { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-top: var(--s3); }
.rx-car-btn { width: 5rem; height: 5rem; border-radius: var(--r-ctl); border: 1px solid var(--rule-strong); background: transparent; color: var(--fg); font-family: var(--font-data); font-size: var(--fs-text); cursor: pointer; transition: background-color var(--hover-dur, 400ms) var(--hover-ease, ease), color var(--hover-dur, 400ms) var(--hover-ease, ease); }
.rx-car-btn:focus-visible { background: var(--fg); color: var(--ground); }
@media (hover: hover) { .rx-car-btn:hover { background: var(--fg); color: var(--ground); } }
.rx-car-no { color: var(--fg-muted); }
.rx-car-no b { color: var(--fg); font-weight: 400; }
@media (max-width: 47.99em) { .rx-car { padding-inline: calc(50% - 10.5rem); } .rx-proof .rx-car .p-clip { flex-basis: 21rem; } }
@media (prefers-reduced-motion: reduce) { .rx-proof .rx-car .p-clip { transition: none; } }

/* phones: the divider's three labels are wider than the screen and it cannot wrap
   (white-space: nowrap), which made /draft and /draft/plugins/resultant scroll sideways
   (+101px / +71px at 390px, found in the 2026-10-15 matrix pass). Keep label + middle only. */
@media (max-width: 47.99em) {
  .rx-divider { letter-spacing: .18em; gap: var(--s2); overflow: hidden; }
  .rx-divider > :nth-child(n+4) { display: none; }
}

/* ── All-Access monthly/annual switch: how the plate slides (html[data-switch], lab bar).
   The price text itself is animated in catalogue.js; this is the plate and labels.
   WHY THESE SELECTORS: base.css puts a colour-only `transition` on `.sheet *:not(img):not(video)`
   (specificity 0,1,2), which beat the old `.rx-sw-plate { transition: transform … }` (0,1,0) — so
   the plate never had a transform transition and just snapped. `.rx-sw .rx-sw-plate` (0,2,0)
   wins, and the transform is listed explicitly. Default (and slow/roll/readout) = a long
   ease-in-out with no overshoot; `now` = the original 760ms throw. ─────────────────────── */
.rx-sw .rx-sw-plate { transition: transform 1000ms cubic-bezier(.65, 0, .25, 1), background-color var(--dur-theme) var(--ease-throw); will-change: transform; }
.rx-sw .rx-sw-lab { transition: color 520ms ease-in-out 160ms; }
html[data-switch="now"] .rx-sw .rx-sw-plate { transition: transform 760ms var(--ease-throw, cubic-bezier(.2, .8, .3, 1)), background-color var(--dur-theme) var(--ease-throw); }
html[data-switch="now"] .rx-sw .rx-sw-lab { transition: color 400ms ease; }
@media (prefers-reduced-motion: reduce) { .rx-sw .rx-sw-plate, .rx-sw .rx-sw-lab { transition: none; } }
html[data-switch="readout"] [data-aa-price] { font-variant-numeric: tabular-nums; }

/* Page speed: #catalogue-root is empty (just a fallback note) until catalogue.js renders ~4000px into it. Without a
   reserved height, the static sections below it sat in the first viewport and were then shoved down, which counted
   as a 0.24 layout shift. Reserve most of a screen so they start below the fold. Failsafe: if the script never runs,
   collapse after 3.5s so a blocked file does not leave a blank screen. */
@keyframes root-failsafe { to { min-height: 0; } }
#catalogue-root:has(> .load-fallback) { min-height: 140svh; animation: root-failsafe 0s linear 3.5s forwards; }

/* ── Phones: the Resultant banner as one compact block (~one screen). Dial and colourway readout sit side by side. ── */
@media (max-width: 47.99em) {
  .rx-feature { padding: var(--s5) var(--s4); gap: var(--s4); }
  .rx-feature .rx-copy { gap: var(--s2); }
  .rx-feature .rx-cta { margin-top: var(--s2); }
  .rx-feature .rx-ways { margin-top: var(--s3); }
  .rx-wheel[data-pick="dial"] { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s4); align-items: center; }
  .rx-wheel[data-pick="dial"] .rx-dialbox { width: 15rem; }
  .rx-wheel[data-pick="dial"] .rx-wr-name { font-size: 2.4rem; }
}

/* Phones: the colour picker (moved under the UI image by catalogue.js) is centred and smaller. The UI image is no
   longer cropped at the section's bottom edge (any size), so the picker has room under it. */
@media (max-width: 63.99em) {
  :root[data-rx-feature="trailer-ui"] .rx-feature { grid-template-areas: "copy" "shot" "ways"; }
  :root[data-rx-feature="trailer-ui"] .rx-shot { align-self: start; }
  .rx-feature > .rx-ways { grid-area: ways; position: relative; z-index: 3; justify-self: center; width: min(100%, 24rem); margin-top: 0; }
  .rx-feature > .rx-ways .rx-wheel { grid-template-columns: 10.5rem minmax(0, 1fr); gap: var(--s4); }
  .rx-feature > .rx-ways .rx-dialbox { width: 10.5rem; }
  .rx-feature > .rx-ways .rx-wr-name { font-size: 2.2rem; }
}

/* The tagline/price/button block and the picker sit in one row (.rx-row). Below 80em it just stacks as before. */
.rx-row { display: contents; }
.rx-main { display: grid; gap: var(--s4); }
/* Desktop: the picker sits beside the tagline, price and button (left column, to the right of the text) at a fixed
   size, so a longer colour name can never move the dial. The title above stays full width. */
@media (min-width: 80em) {
  .rx-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
  .rx-main { flex: 1 1 0; min-width: 0; }
  .rx-row > .rx-ways { flex: 0 0 38rem; width: 38rem; margin-top: 0; }
  .rx-row > .rx-ways .rx-wr-name { font-size: 3rem; }
}

/* While the knob is held, selection and the cursor belong to the knob alone: no page text gets selected by the drag. */
.rx-ways, .rx-ways * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rx-dialbox, .rx-dial-svg { touch-action: none; }
html.is-picking, html.is-picking * { -webkit-user-select: none !important; user-select: none !important; cursor: grabbing !important; }