/* ── Riskfulness – campaign spoke landing page ─────────────────
   A spoke: its own execution of the brand, clearly from the hub. The
   hub's ink, orange, Bricolage and DM Sans, plus one thing only this
   campaign uses: the Un-Usual Dot face and the dot-matrix language it
   comes from (the readout, the Caution band, the zone names). No camo
   here. Dot type is display only, never under 32px. See taste.md,
   "Campaign spokes". All values from tokens. */

@font-face {
  font-family: 'Un-Usual Dot';
  src: url('../assets/fonts/UnUsualDot-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.rf-page {
  background-color: var(--rf-deep);
  background-image: radial-gradient(120% 80% at 30% 0%, var(--rf-raised) 0%, var(--color-ink) 45%, var(--rf-deep) 100%);
  background-repeat: no-repeat;
  color: var(--color-white);
}

/* ── Bar ─────────────────────────────────────────────────────── */
.rf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 20px var(--pad-h);
}

.rf-bar-logo {
  display: inline-flex;
  transition: opacity 0.2s ease;
}

.rf-bar-logo:hover {
  opacity: 0.7;
}

.rf-bar-logo img {
  display: block;
  height: clamp(20px, 2.1vw, 26px);
  width: auto;
}

/* ── Hero ────────────────────────────────────────────────────── */
/* The name is the display type: lit in dots, edge to edge. Its size is
   worked out from the face's advance (5.12em for the word) so it fills the
   measure at any width. The dial lights it a letter at a time, left to
   right, as the needle nears Riskfulness, and puts letters out again either
   side of it, like the Chosen meter. A letter is lit or it isn't, as an LED
   is. Unlit, it still reads, at better than 4.5:1. */
.rf-hero {
  --rf-wm: calc((100vw - 2 * var(--pad-h)) / 5.3);
}

.rf-wordmark {
  padding: 0 var(--pad-h);
  font-family: var(--font-dot);
  font-weight: 400;
  font-size: var(--rf-wm);
  line-height: 0.74;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--rf-type-unlit);
}

.rf-wordmark span {
  transition: color 0.2s var(--ease-snap), text-shadow 0.2s var(--ease-snap);
}

.rf-wordmark span.is-lit {
  color: var(--color-orange);
  text-shadow: 0 0 0.05em var(--rf-glow), 0 0 0.16em var(--rf-glow-soft);
}

/* ── Stage: claim, dial, panel ───────────────────────────────── */
.rf-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-md) var(--pad-h) 0;
}

/* The gut call is made on the dial. Once it is, the claim steps aside and
   the questions take its place; until then there is no panel. */
.rf-page:not(.is-locked) .rf-panel,
.rf-page.is-locked .rf-intro,
.rf-page.is-locked .rf-gut {
  display: none;
}

/* The gut call: under the dial on a phone, with the claim on a wide screen */
.rf-gut {
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  text-align: center;
}

.rf-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  max-width: 12ch;
}

.rf-lede {
  margin-top: var(--space-sm);
  max-width: 46ch;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  opacity: 0.8;
}

.rf-copy {
  max-width: 60ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  opacity: 0.8;
}

.rf-copy p + p {
  margin-top: 1em;
}

/* ── Cluster ─────────────────────────────────────────────────── */
.rf-cluster {
  position: relative;
  z-index: 5;
}

/* During the quiz on a phone, the dial pins to the top so the needle moves
   in view as you answer. It releases on the result. The ground keeps the
   questions from showing through. */
.rf-page.is-quiz .rf-cluster {
  position: sticky;
  top: 0;
  overflow: clip;
  margin-inline: calc(var(--pad-h) * -1);
  padding: 10px var(--pad-h) 8px;
  background-color: color-mix(in srgb, var(--rf-face) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.rf-dial {
  position: relative;
  container-type: inline-size;
  width: min(100%, 44vh, 420px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 150px;
}

/* Backlight. The dial sits in its own orange glow, which runs hotter as the
   needle climbs: --rf-heat is the needle, 0 to 1. Light, not a new colour. */
.rf-dial::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--rf-glow-soft), transparent);
  opacity: calc(0.15 + var(--rf-heat, 0.5) * 0.85);
  pointer-events: none;
}

.rf-dial svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rf-page.is-quiz .rf-dial {
  width: min(100%, 30vh);
  margin-bottom: 100px;
}

.rf-page.is-quiz .rf-sweet {
  display: none;
}

/* gradient stops and face, from tokens */
.rf-stop-raised { stop-color: var(--rf-raised); }
.rf-stop-face { stop-color: var(--rf-face); }
.rf-stop-deep { stop-color: var(--rf-deep); }
.rf-stop-dim { stop-color: var(--rf-dim); }
.rf-stop-glass { stop-color: var(--color-white); stop-opacity: 0.07; }
.rf-stop-clear { stop-color: var(--color-white); stop-opacity: 0; }
.rf-stop-orange { stop-color: var(--color-orange); }
.rf-stop-orange-low { stop-color: var(--color-orange-hover); }

.rf-bezel { fill: var(--rf-deep); }
.rf-rim { fill: none; stroke: var(--rf-unlit); stroke-width: 3; }
.rf-face-dot { fill: var(--color-white); opacity: 0.035; }
.rf-needle-tail { fill: var(--color-orange-hover); }
.rf-hub { stroke: black; stroke-width: 2; }
.rf-pin { fill: var(--color-orange); }

.rf-tick {
  stroke: var(--rf-unlit);
  stroke-linecap: round;
  transition: stroke 0.25s var(--ease-snap);
}

.rf-tick.is-lit { stroke: var(--color-white); }

.rf-tick.is-hot {
  stroke: var(--color-orange);
  filter: url(#rf-glow);
}

.rf-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  fill: var(--rf-dim);
  transition: fill 0.25s var(--ease-snap);
}

.rf-num.is-lit { fill: var(--color-white); }

.rf-zname {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 25px;
  fill: var(--rf-dim);
  transition: fill 0.3s var(--ease-snap);
}

.rf-zname.is-on {
  fill: var(--color-orange);
  filter: url(#rf-glow);
}

/* zone bands: grey bars, the orange key, and Caution as a row of dots */
.rf-band-track { fill: none; stroke: var(--rf-face); stroke-width: 22; }

.rf-band {
  fill: none;
  stroke: var(--rf-unlit);
  stroke-width: 14;
  transition: stroke 0.3s var(--ease-snap);
}

.rf-band.is-on {
  stroke: var(--color-white);
  filter: url(#rf-glow);
}

.rf-band--key { stroke: var(--color-orange); stroke-width: 8; }
.rf-band--key.is-on { stroke: var(--color-orange); stroke-width: 22; }

.rf-band--dots {
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 0 19;
}

.rf-band--dots.is-on { stroke-width: 16; }

.rf-guess-line {
  stroke: var(--color-white);
  stroke-width: 3;
  stroke-dasharray: 4 9;
  stroke-linecap: round;
  opacity: 0.55;
}

.rf-guess-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  fill: var(--color-white);
  opacity: 0.8;
}

.rf-hit {
  fill: transparent;
  cursor: grab;
  outline: none;
}

.rf-page.is-dragging .rf-hit {
  cursor: grabbing;
}

/* An invitation to play. The needle idles until it's touched, its tip
   carries a grip with a slow pulse, and on a mouse a ghost needle shows
   where a click would put it. All of it goes once the gut call is made. */
.rf-grip {
  fill: var(--rf-deep);
  stroke: var(--color-orange);
  stroke-width: 5;
}

.rf-grip-pulse {
  fill: none;
  stroke: var(--color-orange);
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  animation: rf-pulse 2.4s var(--ease-out) infinite;
}

@keyframes rf-pulse {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(2.4); opacity: 0; }
}

.rf-page.is-touched .rf-grip-pulse,
.rf-page.is-locked .rf-grip,
.rf-page.is-locked .rf-grip-pulse {
  display: none;
}

.rf-ghost polygon {
  fill: var(--color-white);
}

.rf-ghost {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-snap);
}

.rf-ghost.is-on {
  opacity: 0.18;
}

.rf-page:not(.is-locked) .rf-hit {
  touch-action: none;
}

.rf-page.is-locked .rf-hit {
  cursor: default;
}

.rf-hit:focus-visible {
  stroke: var(--color-orange);
  stroke-width: 4;
  stroke-dasharray: 6 10;
}

/* The readout: the brand halftone as light. A big dot-matrix number, like a
   digital speedo, then the zone. Inside the dial where the dial is big
   enough; under it where it is not. Sized off the dial, never under 32px. */
.rf-readout {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 8px;
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}

.rf-dm {
  margin-top: 10px;
  font-family: var(--font-dot);
  font-size: max(32px, 6cqw);
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-orange);
  text-shadow: 0 0 14px var(--rf-glow), 0 0 30px var(--rf-glow-soft);
}

.rf-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.2;
  color: var(--rf-mute);
}

.rf-score b {
  font-family: var(--font-dot);
  font-weight: 400;
  font-size: max(40px, 14cqw);
  line-height: 0.74;
  color: var(--color-white);
  text-shadow: 0 0 0.12em color-mix(in srgb, var(--color-white) 45%, transparent);
  transition: color 0.2s var(--ease-snap), text-shadow 0.2s var(--ease-snap);
}

/* The score is a position, not a grade: higher isn't better. It lights
   orange in the sweet spot, as the wordmark and the key band do. */
.rf-score b.is-lit {
  color: var(--color-orange);
  text-shadow: 0 0 0.08em var(--rf-glow), 0 0 0.2em var(--rf-glow-soft);
}

.rf-sweet {
  margin-top: -2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-orange);
}

/* meters and lamps */
.rf-sub {
  width: min(100%, 520px);
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.rf-meters {
  display: grid;
  gap: 6px;
}

.rf-meter {
  display: grid;
  grid-template-columns: 66px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--rf-mute);
}

.rf-segs {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}

.rf-segs i {
  height: 8px;
  background-color: var(--rf-unlit);
  border-radius: 1px;
  transition: background-color 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
}

.rf-segs i.is-on { background-color: var(--color-white); }

.rf-meter--key .rf-segs i.is-on {
  background-color: var(--color-orange);
  box-shadow: 0 0 8px var(--rf-glow);
}

.rf-lamps {
  display: flex;
  gap: 8px;
}

.rf-lamp {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-cta);
  background-color: var(--rf-face);
  border: 1px solid var(--rf-unlit);
  display: grid;
  place-items: center;
  transition: background-color 0.3s var(--ease-snap), border-color 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-snap);
}

.rf-lamp svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--rf-dim);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s var(--ease-snap);
}

.rf-lamp.is-on {
  border-color: var(--color-orange-hover);
  box-shadow: 0 0 16px var(--rf-glow-soft);
}

.rf-lamp.is-on svg {
  stroke: var(--color-orange);
  filter: drop-shadow(0 0 4px var(--rf-glow));
}

.rf-trade {
  width: min(100%, 520px);
  margin: 10px auto 0;
  text-align: center;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.4;
  font-weight: 500;
  min-height: 2.8em;
}

.rf-trade b {
  font-weight: 700;
  color: var(--color-orange);
}

/* During the quiz on a phone the pinned cluster keeps only what moves with
   the answers: the needle, the readout and the trade line. */
.rf-page.is-quiz .rf-sub {
  display: none;
}

.rf-page.is-quiz .rf-trade {
  min-height: 0;
  margin-top: 4px;
  font-size: 14px;
}

/* ── Panel ───────────────────────────────────────────────────── */
.rf-panel {
  max-width: 36rem;
}

.rf-panel-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xs);
}

/* The prompt. Until the needle is touched, the face dims under it, like a
   modal, and the dial asks to be grabbed. Needle and grip stay bright. */
.rf-scrim {
  fill: var(--rf-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}

.rf-prompt {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 72%;
  transform: translateX(-50%);
  text-align: center;
  font-size: max(15px, 4.4cqw);
  font-weight: 500;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.rf-prompt b {
  display: block;
  margin-bottom: 0.2em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: max(24px, 8cqw);
  line-height: 1;
  letter-spacing: -0.02em;
}

.rf-page.is-idle:not(.is-touched) .rf-scrim {
  opacity: 0.78;
}

.rf-page.is-idle:not(.is-touched) .rf-prompt {
  opacity: 1;
}

.rf-prog {
  font-size: 14px;
  font-weight: 500;
  color: var(--rf-mute);
}

.rf-bar-track {
  height: 3px;
  margin: 8px 0 var(--space-xs);
  background-color: var(--rf-unlit);
}

.rf-bar-track i {
  display: block;
  height: 100%;
  width: 100%;
  background-color: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.rf-q {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
  outline: none;
  box-shadow: none;
}

.rf-opts {
  display: grid;
  gap: 8px;
}

.rf-opt {
  min-height: 44px;
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-white);
  background-color: color-mix(in srgb, var(--color-white) 2%, transparent);
  border: 1.5px solid var(--rf-unlit);
  border-radius: var(--radius-cta);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-snap), background-color 0.2s var(--ease-snap);
}

.rf-opt:hover {
  border-color: var(--color-white);
  background-color: color-mix(in srgb, var(--color-white) 5%, transparent);
}

.rf-opt.is-picked {
  border-color: var(--color-orange);
}

/* result */
#s3 {
  scroll-margin-top: var(--space-sm);
}

.rf-result {
  margin: 6px 0 var(--space-xs);
  font-family: var(--font-dot);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-orange);
  text-shadow: 0 0 14px var(--rf-glow);
  outline: none;
  box-shadow: none;
}

.rf-gap {
  margin: var(--space-xs) 0;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.35;
  font-weight: 500;
}

.rf-gap .rf-o {
  color: var(--color-orange);
}

.rf-move {
  margin: var(--space-xs) 0;
  padding: 18px;
  background-color: color-mix(in srgb, var(--color-white) 4%, transparent);
  font-size: 17px;
  line-height: 1.5;
}

.rf-move-label {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-orange);
}

.rf-guide-title {
  margin-top: var(--space-md);
}

/* form */
.rf-form {
  display: grid;
  gap: 8px;
  max-width: 28rem;
  margin-top: var(--space-xs);
}

.rf-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--rf-mute);
}

.rf-input {
  min-height: 48px;
  padding: 12px 14px;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-white);
  background-color: var(--rf-face);
  border: 1.5px solid var(--rf-unlit);
  border-radius: var(--radius-cta);
  transition: border-color 0.2s var(--ease-snap);
}

/* labels are in the placeholder; the <label>s stay for screen readers */
.rf-input::placeholder {
  color: var(--rf-mute);
  opacity: 1;
}

.rf-input:hover {
  border-color: var(--rf-dim);
}

.rf-input:focus {
  border-color: var(--color-white);
}

.rf-submit {
  justify-self: start;
  margin-top: 6px;
}

.rf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rf-form-msg {
  min-height: 1.4em;
  font-size: 15px;
}

.rf-form-msg[data-state="ok"] { color: var(--color-orange); }
.rf-form-msg[data-state="error"] { color: var(--color-white); }

.rf-small {
  font-size: 14px;
  color: var(--rf-mute);
}

.rf-again {
  min-height: 44px;
  margin-top: var(--space-xs);
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--rf-mute);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 0.2s var(--ease-snap);
}

.rf-again:hover {
  color: var(--color-white);
}

/* ── Sections below the stage ────────────────────────────────── */
/* --space-xl between sections, as the hub does. Each takes a different
   shape: the spectrum runs the width, the origin splits, the hand-off
   centres in the dial's sweep. */
.rf-section {
  padding: var(--space-xl) var(--pad-h) 0;
}

.rf-section:last-of-type {
  padding-bottom: var(--space-xl);
}

.rf-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: var(--space-sm);
}

/* The spectrum: the dial's band unrolled, same zones, same scale. Each zone
   sits under its own segment of the band, stacked on a phone, one row of
   five on a wide screen. Caution is dots; Riskfulness is the lit key. */
.rf-zones {
  list-style: none;
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}

.rf-zone {
  position: relative;
  display: grid;
  gap: 8px;
  padding-top: var(--space-sm);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.5;
}

.rf-zone::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background-color: var(--rf-unlit);
}

.rf-zone--dots::before {
  background: radial-gradient(circle closest-side, var(--rf-dim) 70%, transparent 76%) left center / 12px 4px repeat-x;
}

.rf-zone--key::before {
  height: 8px;
  top: -2px;
  background-color: var(--color-orange);
  box-shadow: 0 0 18px var(--rf-glow-soft);
}

.rf-zone-range {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--rf-mute);
}

.rf-zone--key .rf-zone-range {
  color: var(--color-orange);
}

.rf-zone-name {
  font-family: var(--font-dot);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--rf-dim);
}

.rf-zone--key .rf-zone-name {
  color: var(--color-orange);
  text-shadow: 0 0 12px var(--rf-glow);
}

.rf-zone-desc {
  max-width: 34ch;
}

.rf-zone-trade {
  color: var(--rf-mute);
}

.rf-zone-trade b {
  font-weight: 500;
  color: var(--color-white);
}

.rf-sig {
  font-weight: 700;
  color: var(--rf-mute);
}

/* The hand-off sits in the dial's sweep with no needle in it. */
.rf-next {
  display: grid;
  justify-items: center;
  text-align: center;
}

.rf-echo {
  width: min(70%, 420px);
  height: auto;
  overflow: visible;
}

.rf-echo-dot {
  fill: var(--rf-unlit);
}

.rf-echo-dot.is-lit {
  fill: var(--color-orange);
  filter: drop-shadow(0 0 6px var(--rf-glow));
}

.rf-next-body {
  display: grid;
  justify-items: center;
  margin-top: var(--space-md);
}

.rf-next .rf-heading {
  max-width: 13ch;
}

.rf-next .rf-copy {
  max-width: 52ch;
}

.rf-next-link {
  margin-top: var(--space-sm);
}

.rf-footer-rights {
  padding-block: 12px;
  opacity: 0.5;
}

/* ── Tablet up ───────────────────────────────────────────────── */
@media (min-width: 768px) {
  .rf-zone {
    grid-template-columns: 18rem minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "range desc trade"
      "name desc trade";
    column-gap: var(--space-sm);
    row-gap: 4px;
    align-items: start;
  }

  .rf-zone-range { grid-area: range; }
  .rf-zone-name { grid-area: name; }
  .rf-zone-desc { grid-area: desc; }
  .rf-zone-trade { grid-area: trade; }
}

/* ── Desktop: claim left, dial right and held ────────────────── */
/* The dial takes the height the viewport gives it, within limits, so the
   hero breathes instead of fitting everything above the fold. */
@media (min-width: 1024px) {
  .rf-stage {
    --rf-dial: clamp(360px, calc(100svh - 340px), 600px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas:
      "intro dial"
      "gut dial";
    grid-template-rows: 1fr 1fr;
    column-gap: var(--space-lg);
    row-gap: var(--space-sm);
  }

  .rf-page.is-locked .rf-stage {
    grid-template-areas: "panel dial";
    grid-template-rows: auto;
    align-items: start;
  }

  .rf-intro { grid-area: intro; }

  .rf-panel {
    grid-area: panel;
    padding-top: var(--space-md);
  }

  .rf-cluster,
  .rf-page.is-quiz .rf-cluster {
    grid-area: dial;
    position: sticky;
    top: var(--space-sm);
    overflow: visible;
    margin: 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .rf-dial,
  .rf-page.is-quiz .rf-dial {
    width: min(100%, var(--rf-dial));
    margin-bottom: 0;
  }

  /* big enough now to carry the readout inside, under the hub; it gives
     way to the prompt until the needle is touched */
  .rf-readout {
    top: 58%;
    margin-top: 0;
    transition: opacity 0.4s var(--ease-out);
  }

  .rf-page.is-idle:not(.is-touched) .rf-readout {
    opacity: 0;
  }

  .rf-gut {
    grid-area: gut;
    justify-items: start;
    align-self: start;
    text-align: left;
  }

  .rf-intro {
    align-self: end;
  }

  .rf-page.is-quiz .rf-sub {
    display: grid;
  }

  .rf-page.is-quiz .rf-sweet {
    display: block;
  }

  .rf-page.is-quiz .rf-trade {
    min-height: 2.8em;
    margin-top: 10px;
    font-size: clamp(15px, 1.4vw, 18px);
  }

  .rf-spectrum .rf-head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    column-gap: var(--space-lg);
    align-items: end;
  }

  .rf-spectrum .rf-heading {
    margin-bottom: 0;
  }

  .rf-origin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-lg);
    align-items: start;
  }

  .rf-origin .rf-heading {
    max-width: 10ch;
  }

  /* the hand-off sits inside the sweep, like the readout in the dial */
  .rf-echo {
    width: min(100%, 900px);
  }

  .rf-next-body {
    margin-top: calc(min(100%, 900px) * -0.5);
  }
}

/* ── Wide: the spectrum as one band, five segments ───────────── */
@media (min-width: 1200px) {
  .rf-zones {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 6px;
  }

  .rf-zone,
  .rf-zone:nth-child(n) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    align-content: start;
    row-gap: 10px;
    padding-right: var(--space-sm);
  }

  .rf-zone-range,
  .rf-zone-name,
  .rf-zone-desc,
  .rf-zone-trade {
    grid-area: auto;
  }

  .rf-zone::before {
    height: 14px;
  }

  .rf-zone--dots::before {
    background-size: 19px 14px;
  }

  .rf-zone--key::before {
    height: 22px;
    top: -4px;
  }

  .rf-zone-name {
    font-size: clamp(32px, 2.6vw, 44px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rf-grip-pulse {
    animation: none;
    opacity: 0;
  }

  .rf-cluster {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}