/* Track page, rail layout (v2). A second presentation of the same curriculum
   that /roadmap/<slug>.html already serves: a fixed left rail carrying the
   track's key facts and the whole curriculum, and a main column that opens
   with the player on the first free lesson and then restates the curriculum
   with per-lesson access.

   Free and Pro are read per lesson from courses.json at build time, never from
   the section number. Since the regating, the first lesson of every section is
   free, so a section is no longer free or Pro as a whole.

   Palette and type come from the site: no new colours are invented here. */

/* Tokens this sheet needs that the base sheet does not define, plus one of
   its own: roadmap-role.css sets --bg to pure white, so the subtle panel fill
   is --soft rather than a redefinition of a name the base sheet means
   differently. Values are the site palette, not new colours. */
/* The site announcement bar is suppressed here. These pages are a lesson and
   a curriculum; a sitewide promotion above them competes with the one thing
   the page is for, and inside the player's frame it would be a second copy of
   the same bar. */
.rs-announce { display: none !important; }

:root {
  /* The base sheet's --gold is #b08720, which reads brown at 12px. This is
     the one the stars use. */
  --rmx-gold: #e0a315;
  --soft: #fafbfa;
  /* The canvas behind the content. The base sheet sets --bg to pure white, so
     a white card on it had only a hairline to separate the two. */
  --canvas: #f2f4f3;
  --mute: #6b7177;
  --mute2: #8a9097;
  --ink2: #3a3f46;
  --brand: #1f7a55;
  --brand-h: #155c40;
  --deep: #0f3f2a;
  --tint: #e9f4ef;
  --tintbg: #e9f4ef;
  --freebg: #e9f4ef;
  --freefg: #1f7a55;
}

:root {
  --rmx-rail: 258px;
  --rmx-top: 56px;
}

/* ---------------------------------------------------------------- shell --- */

.rmx {
  display: grid;
  grid-template-columns: var(--rmx-rail) minmax(0, 1fr);
  align-items: start;
  background: var(--canvas);
}

.rmx-rail {
  position: sticky;
  top: var(--rmx-top);
  height: calc(100vh - var(--rmx-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 18px 0 40px;
}

.rmx-main {
  min-width: 0;
  /* Generous side gutters. They are what separates the player from the edge
     of the window, and they are page rather than card, so the wheel still
     scrolls past the frame when the cursor is in them. */
  padding: 14px 56px 64px;
}

/* ------------------------------------------------------- rail key facts --- */
/* The rail is a quiet index, not a stack of boxes: hairlines instead of
   cards, one accent colour, and type that steps down rather than shouts. */

.rmx-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--mute2);
  text-decoration: none;
}

.rmx-back:hover { color: var(--brand); }
.rmx-back svg { width: 12px; height: 12px; }

.rmx-key {
  margin: 0 14px 12px;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--line2);
}

.rmx-key h1 {
  margin: 0 0 3px;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.016em;
  color: var(--ink);
}

.rmx-cert {
  display: block;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--brand);
}

.rmx-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--mute);
}

.rmx-facts b { color: var(--ink); font-weight: 600; }

.rmx-facts .leg {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--mute2);
}

/* ----------------------------------------------------- rail curriculum --- */

.rmx-ovlink {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 12px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
  text-decoration: none;
}

.rmx-ovlink svg { flex: none; width: 13px; height: 13px; color: var(--mute2); }
.rmx-ovlink:hover { background: var(--line2); color: var(--ink); }
.rmx-ovlink[aria-current='page'] { background: var(--tintbg); color: var(--deep); }
.rmx-ovlink[aria-current='page'] svg { color: var(--brand); }

.rmx-currhead {
  margin: 0 14px 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute2);
}

.rmx-sec { margin: 0 8px 1px; }

.rmx-sec > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.rmx-sec > summary::-webkit-details-marker { display: none; }
.rmx-sec > summary:hover { background: var(--line2); }

/* a chevron that turns, rather than a disclosure triangle */
.rmx-sec > summary::after {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: 1px;
  border-right: 1.4px solid var(--mute2);
  border-bottom: 1.4px solid var(--mute2);
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}

.rmx-sec[open] > summary::after { transform: rotate(45deg); }

.rmx-sn {
  flex: none;
  width: 17px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 9.5px;
  color: var(--mute2);
  font-variant-numeric: tabular-nums;
}

.rmx-st { min-width: 0; flex: 1; }

.rmx-ct {
  flex: none;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--mute2);
  font-variant-numeric: tabular-nums;
}

.rmx-lsns {
  display: grid;
  padding: 1px 0 7px 25px;
}

a.rmx-l {
  display: flex;
  /* Top aligned, not centred: on a title that wraps to two lines a centred
     star floats between them and breaks the column the stars otherwise make
     down the right edge. */
  align-items: flex-start;
  gap: 12px;
  padding: 4px 9px 4px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.34;
  color: var(--mute);
  text-decoration: none;
}

a.rmx-l:hover { background: var(--line2); color: var(--ink); }

a.rmx-l[aria-current='true'] {
  background: var(--tintbg);
  color: var(--deep);
  font-weight: 650;
}

/* The star sits at the right edge of the rail rather than trailing the
   title, so the Pro lessons read as one column instead of a ragged
   scatter down the middle. */
a.rmx-l .rmx-lt { min-width: 0; flex: 1; }

/* The single star is the only access marker in the rail: an unmarked row is
   free, which keeps the common case quiet and the upsell legible. A richer
   gold than the base sheet's --gold, which reads brown at this size. */
.rmx-star {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--rmx-gold);
}

.rmx-star.big { width: 15px; height: 15px; }

/* Nudged onto the first line so every star sits at the same height in its
   row, whether the title runs to one line or two. */
a.rmx-l > .rmx-star { margin-top: 2px; }

/* ------------------------------------------------------ the overview --- */

.ov-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  font-size: 13px;
  color: var(--mute);
}

.ov-strip svg { flex: none; width: 15px; height: 15px; color: var(--mute2); }
.ov-strip p { margin: 0; }
.ov-strip b { color: var(--ink); font-weight: 600; }
.ov-strip a { color: var(--brand); font-weight: 600; text-decoration: none; }
.ov-strip a:hover { text-decoration: underline; }

/* The words and the cover are centred against each other. Top aligned they
   read as two unrelated objects, because the cover is twice the height of a
   two-line standfirst and the difference dangles. */
.ov-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  margin: 0 0 24px;
}

/* Held to a reading measure rather than allowed to run to the cover, so the
   space between them is a margin and not a gap left over. */
.ov-head { flex: 1; min-width: 0; max-width: 58ch; }

/* A drawn cover rather than an image. What makes it read as a book and not a
   swatch: a cloth weave, a spine with its highlight, an inset keyline, and a
   motif of what the track actually teaches sitting behind the name. */
.ov-cover {
  position: relative;
  flex: none;
  width: 142px;
  height: 182px;
  padding: 0;
  border-radius: 3px 11px 11px 3px;
  overflow: hidden;
  color: #fff;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 3px),
    radial-gradient(130% 86% at 16% 8%, rgba(255, 255, 255, 0.34), transparent 58%),
    radial-gradient(100% 76% at 90% 96%, rgba(0, 0, 0, 0.42), transparent 60%),
    var(--cv, #1f7a55);
  box-shadow:
    0 1px 1px rgba(10, 30, 20, 0.3),
    0 22px 40px -20px rgba(10, 30, 20, 0.6);
}

/* the spine, and the crease beside it */
.ov-cover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(255, 255, 255, 0.16) 100%);
}

/* the keyline, set in from the edge the way a printed cover is */
.ov-cover::after {
  content: '';
  position: absolute;
  inset: 9px 9px 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  pointer-events: none;
}

.cv-tab {
  position: absolute;
  top: 0;
  right: 17px;
  width: 15px;
  height: 27px;
  background: rgba(255, 255, 255, 0.34);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

.cv-art {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 66px;
  height: 66px;
  opacity: 0.42;
  color: #fff;
}

.cv-art svg { width: 100%; height: 100%; display: block; }

.cv-body {
  position: absolute;
  left: 18px;
  right: 14px;
  bottom: 14px;
  display: grid;
  gap: 6px;
}

.cv-rule {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
}

.cv-name {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cv-foot {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.68;
}

.ov-struct {
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(20, 30, 25, 0.03);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.ov-lab {
  display: block;
  margin-bottom: 12px;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute2);
}

.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  gap: 6px;
}

.ov-grid a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--soft);
  text-decoration: none;
}

.ov-grid a:hover { background: var(--tintbg); }

.ov-grid .n {
  flex: none;
  width: 17px;
  padding-top: 1px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  color: var(--mute2);
  font-variant-numeric: tabular-nums;
}

.ov-grid .t { min-width: 0; display: grid; gap: 1px; }
.ov-grid .t b { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ov-grid .t em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mute2);
}

.ov-grid .ar {
  flex: none;
  margin-top: 2px;
  width: 13px;
  height: 13px;
  color: var(--mute2);
  opacity: 0;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.ov-grid .ar svg { width: 13px; height: 13px; display: block; }
.ov-grid a:hover .ar { opacity: 1; transform: translateX(2px); }

.ov-div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 16px;
}

.ov-div::before, .ov-div::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.ov-div span {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute2);
}

/* Every section is open. This is the page somebody opens to read the whole
   thing, so nothing here is behind a disclosure. */
.ov-sec { margin: 0 0 18px; scroll-margin-top: 70px; }

.ov-sechead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  background: var(--soft);
}

.ov-sechead .n {
  flex: none;
  width: 21px;
  padding-top: 3px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  color: var(--mute2);
  font-variant-numeric: tabular-nums;
}

.ov-sechead .t { flex: 1; min-width: 0; }

.ov-sechead .t b {
  display: block;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.ov-sechead .t em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute);
}

.ov-sechead .ct {
  flex: none;
  padding-top: 4px;
  font-size: 11.5px;
  color: var(--mute2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ov-rows {
  border: 1px solid var(--line);
  border-top: 0;
  box-shadow: 0 1px 2px rgba(20, 30, 25, 0.03);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: #fff;
}

/* A section with nothing built: its concepts, set as the plan they are. */
.ov-planned {
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--mute);
}

.ov-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line2);
  text-decoration: none;
}

.ov-row:last-child { border-bottom: 0; }
.ov-row:hover { background: var(--soft); }

.ov-row .g { flex: none; width: 15px; display: flex; justify-content: center; }
.ov-row .g .rmx-star { width: 13px; height: 13px; }
.ov-row .a .rmx-star { width: 11px; height: 11px; }

.ov-row .num {
  flex: none;
  width: 36px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--mute2);
  font-variant-numeric: tabular-nums;
}

.ov-row .t {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}

.ov-row .t small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--mute);
}

.ov-row .a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ov-row.is-free .a { color: var(--freefg); }
.ov-row.is-pro .a { color: var(--rmx-gold); }

/* ---------------------------------------------------------- main header --- */

.rmx-crumb {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0 0 9px;
  font-size: 11.5px;
  color: var(--mute);
}

.rmx-crumb a { color: var(--mute); text-decoration: none; }
.rmx-crumb a:hover { color: var(--brand); }

/* -------------------------------------------------------------- player --- */

.rmx-playwrap {
  position: relative;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 25, 0.04), 0 18px 40px -26px rgba(10, 30, 20, 0.28);
}

/* One height for the cover and the frame, so revealing the lesson does not
   make the page jump under the reader. */
.rmx-playwrap { --rmx-h: min(88vh, 900px); }

.rmx-playwrap[data-state="open"] .rmx-cover { display: none; }

/* An overlay, not a replacement: on a free lesson the lesson is loaded and
   readable underneath it. */
.rmx-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Both covered states get the same treatment: the lesson shows through and
   stays readable, and the overlay only stops it being used. The badge in the
   middle is the whole difference between them, which is the point: one says
   sign in, the other says this one is paid for. */
.rmx-playwrap:not([data-state="open"]) .rmx-cover {
  background: rgba(247, 249, 248, 0.45);
}

/* Stripped back to the badge and one line, so as little of the lesson as
   possible is covered. */
.rmx-playwrap:not([data-state="open"]) .rmx-coverin {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
}

.rmx-playwrap:not([data-state="open"]) .rmx-covertitle { display: none; }

.rmx-playwrap:not([data-state="open"]) .rmx-covernote {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px -14px rgba(10, 30, 20, 0.4);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* Readable, not blurred. A Pro lesson's own page is public and serves two
   real steps before its gate, so there is nothing here to obscure, and a
   reader deciding whether to pay should be able to see what they are
   deciding about. The overlay still takes the clicks. */
.rmx-playwrap[data-state="locked"] .rmx-frame {
  pointer-events: none;
  user-select: none;
}

.rmx-coverin {
  position: relative;
  z-index: 1;
  width: min(420px, 86%);
  padding: 26px 28px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(7px);
  box-shadow: 0 24px 50px -28px rgba(10, 30, 20, 0.3);
  text-align: center;
}

.rmx-play {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  box-shadow: 0 14px 34px -12px rgba(10, 40, 25, 0.55);
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  transition: transform 0.16s ease, background 0.16s ease;
}

.rmx-play:hover { transform: scale(1.05); background: var(--brand-h); }
.rmx-play svg { width: 23px; height: 23px; margin-left: 3px; }

/* The play button's counterpart, in gold: same size, same weight, same place.
   The play button is not disabled for a Pro lesson, it is absent, because a
   control that cannot do anything is worse than no control. */
.rmx-lock {
  display: none;
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 0;
  background: var(--rmx-gold);
  place-items: center;
  color: #fff;
  box-shadow: 0 14px 34px -12px rgba(70, 48, 0, 0.55);
}

.rmx-lock svg { width: 25px; height: 25px; }

.rmx-playwrap[data-state="locked"] .rmx-play { display: none; }
.rmx-playwrap[data-state="locked"] .rmx-lock { display: grid; }

.rmx-covertitle {
  margin: 0 0 5px;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

.rmx-covernote {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mute);
}

.rmx-frame {
  display: block;
  width: 100%;
  height: var(--rmx-h);
  min-height: 460px;
  border: 0;
}

/* A track with no lessons yet. The page still has a job: say what is coming
   and send the reader to the plan. */
.rmx-soon {
  max-width: 520px;
  margin: 10px auto 0;
  padding: 34px 32px 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: center;
  box-shadow: 0 1px 2px rgba(20, 30, 25, 0.04);
}

.rmx-soon h2 {
  margin: 0 0 9px;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.rmx-soon p {
  margin: 0 auto 18px;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
}

/* ------------------------------------------------------- the Pro panel --- */
/* Built to the reference: one centred card, the Pro mark, the claim, what the
   plan opens, the plans as rows to pick between, one button, and the small
   print under it. */

.rmx-pro[hidden] { display: none; }

.rmx-pro {
  box-shadow: 0 1px 2px rgba(20, 30, 25, 0.04), 0 18px 40px -26px rgba(10, 30, 20, 0.22);
  margin: 18px auto 0;
  max-width: 580px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 30px 32px 26px;
  text-align: center;
}

.rmx-prochip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.rmx-prochip .rmx-star { width: 14px; height: 14px; }

.rmx-pro h3 {
  margin: 0 0 8px;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.rmx-prosub {
  margin: 0 auto 18px;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
}

/* what the plan opens, as the reference lists its courses */
.rmx-unlock {
  margin: 0 0 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line2);
}

.rmx-unlock .lab {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  color: var(--mute);
}

.rmx-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.rmx-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
  background: #fff;
}

.rmx-chip.soon { color: var(--mute2); }

.rmx-chip i {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mute2);
}

/* the plans, as rows to choose between */
.rmx-opts {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.rmx-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rmx-opt:hover { border-color: var(--mute2); }

.rmx-opt.on {
  border: 2px solid var(--brand);
  background: #fff;
  padding: 12px 14px;
}

.rmx-opt .l { display: grid; gap: 2px; min-width: 0; }
.rmx-opt .l b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.rmx-opt .l em { font-style: normal; font-size: 12px; color: var(--mute); }

.rmx-opt .r { display: grid; gap: 2px; text-align: right; }

.rmx-opt .r b {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rmx-opt .r em { font-style: normal; font-size: 11.5px; color: var(--mute); }

.rmx-save {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--freebg);
  color: var(--freefg);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.rmx-buy {
  display: block;
  padding: 13px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.rmx-buy:hover { background: #000; }

.rmx-fine {
  margin: 11px 0 0;
  font-size: 12px;
  color: var(--mute);
}

.rmx-fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------- offer dialog --- */
/* Modelled on the reference screenshot: a notched coupon ticket on a tinted
   stage with a confetti burst, then the claim, the code, a minutes-and-seconds
   clock, one dark button, and the once-only line. The burst is the popper: it
   fires on open and never loops, and it does not fire at all under reduced
   motion, where it would read as noise rather than celebration. */

.rmx-offer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(13, 22, 17, 0.52);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.rmx-offer.on { display: grid; opacity: 1; }

.rmx-offerbox {
  position: relative;
  width: min(424px, 100%);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(10, 30, 20, 0.55);
  text-align: center;
  /* Arrives slightly under size and overshoots once on the way in, so it reads
     as something handed over rather than something that was always there. */
  transform: scale(0.92) translateY(10px);
  opacity: 0;
  transition: transform 0.34s cubic-bezier(0.17, 0.89, 0.32, 1.28), opacity 0.2s ease;
}

.rmx-offer.on .rmx-offerbox { transform: none; opacity: 1; }

.rmx-offerbox .ox {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.rmx-offerbox .ox:hover { background: var(--line2); }

/* ---- the stage, the ticket and the burst ---- */

.rmx-stage {
  position: relative;
  padding: 36px 26px 32px;
  background: #F5F6F6;
  overflow: hidden;
}

.rmx-ticket {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 268px;
  padding: 30px 20px;
  background: #fff;
  border: 1px solid var(--brand);
  border-radius: 10px;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 33px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--ink);
}

/* The notches are punched by painting the stage colour over the ticket edge,
   so the stage must stay opaque. */
.rmx-ticket::before,
.rmx-ticket::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: #F5F6F6;
}

.rmx-ticket::before { top: -11px; }
.rmx-ticket::after { bottom: -11px; }

.rmx-conf {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.rmx-conf i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  opacity: 0;
  background: var(--brand);
}

/* Each piece is given its own end point and spin, so the burst is not a ring
   of identical dots. Fired by adding .pop, which the script does on open. */
.rmx-offer.on .rmx-conf i { animation: rmxpop 0.72s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }

.rmx-conf i:nth-child(1)  { --tx: -132px; --ty: -58px; --rot: 142deg; background: var(--brand); animation-delay: 0.02s; }
.rmx-conf i:nth-child(2)  { --tx: 124px;  --ty: -72px; --rot: -96deg; background: var(--gold); border-radius: 50%; animation-delay: 0.06s; }
.rmx-conf i:nth-child(3)  { --tx: -96px;  --ty: 64px;  --rot: 48deg;  background: var(--ink); width: 5px; height: 11px; animation-delay: 0.04s; }
.rmx-conf i:nth-child(4)  { --tx: 108px;  --ty: 58px;  --rot: -38deg; background: var(--brand); width: 10px; height: 4px; animation-delay: 0.09s; }
.rmx-conf i:nth-child(5)  { --tx: -150px; --ty: 12px;  --rot: 96deg;  background: var(--gold); width: 6px; height: 6px; animation-delay: 0.12s; }
.rmx-conf i:nth-child(6)  { --tx: 146px;  --ty: -8px;  --rot: -124deg; background: var(--ink); border-radius: 50%; width: 5px; height: 5px; animation-delay: 0.07s; }
.rmx-conf i:nth-child(7)  { --tx: -58px;  --ty: -96px; --rot: 62deg;  background: var(--brand); width: 4px; height: 12px; animation-delay: 0.1s; }
.rmx-conf i:nth-child(8)  { --tx: 62px;   --ty: 92px;  --rot: -72deg; background: var(--gold); width: 9px; height: 4px; animation-delay: 0.05s; }
.rmx-conf i:nth-child(9)  { --tx: -118px; --ty: -104px; --rot: 28deg; background: var(--ink); width: 6px; height: 6px; animation-delay: 0.14s; }
.rmx-conf i:nth-child(10) { --tx: 132px;  --ty: 104px; --rot: -18deg; background: var(--brand); border-radius: 50%; animation-delay: 0.11s; }

@keyframes rmxpop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)); }
}

/* ---- the claim ---- */

.rmx-offerbody { padding: 22px 26px 20px; }

.rmx-offerbox h2 {
  margin: 0 0 7px;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.rmx-offerbox p.sub {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mute);
}

.rmx-code {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.rmx-code code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.rmx-code .cp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 11px;
  color: var(--mute);
  cursor: pointer;
}

.rmx-code .cp:hover { background: var(--line2); color: var(--ink); }
.rmx-code .cp svg { width: 13px; height: 13px; }

.rmx-expl {
  margin: 0 0 9px;
  font-size: 12.5px;
  color: var(--body);
}

.rmx-clocks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
}

.rmx-clocks b {
  min-width: 56px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--line2);
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.rmx-clocks i {
  font-style: normal;
  font-size: 19px;
  font-weight: 700;
  color: var(--mute2);
}

.rmx-offerbox .ob {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 13px;
  padding: 13px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.rmx-offerbox .ob:hover { background: #000; }

/* The once-only line is the promise the dialog makes about itself, so the
   clause that matters carries weight rather than sitting in grey. */
/* Not a flex row: flex would make each text node and the <b> its own column,
   which broke the sentence into three stacked blocks. It is one line of prose
   with the icon set into it. */
.rmx-once {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mute);
  text-align: center;
  text-wrap: balance;
}

.rmx-once b { color: var(--ink); font-weight: 700; }

.rmx-once svg {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
}

/* -------------------------------------------------------------- mobile --- */

/* The cover is decoration, and the first thing to go when the column
   narrows: the words it sits beside need the width more than it does. */
@media (max-width: 860px) {
  .ov-cover { display: none; }
  .ov-headrow { gap: 0; }
}

@media (max-width: 1023px) {
  .rmx { grid-template-columns: minmax(0, 1fr); }

  /* The rail becomes a collapsed block above the content: a fixed rail on a
     phone would eat the screen, and the curriculum is repeated below anyway. */
  .rmx-rail {
    position: static;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px 0 10px;
  }

  .rmx-currhead, .rmx-sec { display: none; }
  .rmx-main { padding: 12px 14px 64px; }
  .rmx-playwrap { --rmx-h: min(82vh, 680px); }
  .rmx-cover, .rmx-frame { min-height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .rmx-play { transition: none; }
  .ov-grid .ar { transition: none; }
  .rmx-offer, .rmx-offerbox { transition: none; }
  .rmx-offerbox { transform: none; }
  /* No burst at all, rather than a slower one: confetti is the kind of motion
     the preference exists to remove. The ticket still reads without it. */
  .rmx-offer.on .rmx-conf i { animation: none; opacity: 0; }
}