/* Shared landing-page system for the ad destinations, one per ring.
     /retention       the MONEY ring ("they just stop coming")
     /class-planning  the TIME ring ("nobody can do all this at once")
   The `rt-` prefix is historical: this started as the retention page's own
   sheet. The rules are generic, so the pages share it rather than each
   carrying its own copy of the same 176 lines. Tokens only, no colour
   literals. */

.rt { --rt-max: 1080px; --rt-gutter: 24px; }
.rt *, .rt *::before, .rt *::after { box-sizing: border-box; }

.rt-wrap { max-width: var(--rt-max); margin: 0 auto; padding: 0 var(--rt-gutter); }
.rt-narrow { max-width: 68ch; }

/* ---- hero ---------------------------------------------------------- */
.rt-hero { padding: 88px 0 64px; border-bottom: 1px solid var(--border-subtle);
  text-align: center; }
.rt-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 18px;
}
/* centred, so the measure has to be held by auto margins rather than by the
   left edge: a centred block with no max-width runs the full container. */
.rt-hero h1 {
  font-size: clamp(34px, 5.4vw, 58px); line-height: 1.08; letter-spacing: -.022em;
  font-weight: 800; color: var(--text-primary); margin: 0 auto 20px; text-wrap: balance;
  max-width: 20ch;
}
.rt-lede { font-size: clamp(17px, 2.1vw, 21px); line-height: 1.5; color: var(--text-secondary);
  margin: 0 auto; max-width: 58ch; text-wrap: pretty; }
.rt-lede strong { color: var(--text-primary); font-weight: 600; }

/* ---- generic section ----------------------------------------------- */
.rt-sec { padding: 72px 0; border-bottom: 1px solid var(--border-subtle); }
.rt-sec:last-of-type { border-bottom: 0; }
.rt-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 0 0 14px;
}
.rt-sec h2 {
  font-size: clamp(26px, 3.6vw, 38px); line-height: 1.16; letter-spacing: -.018em;
  font-weight: 800; color: var(--text-primary); margin: 0 0 18px; text-wrap: balance;
  max-width: 22ch;
}
.rt-sec p { font-size: 17px; line-height: 1.62; color: var(--text-secondary); margin: 0 0 16px; }
.rt-sec p:last-child { margin-bottom: 0; }
.rt-sec p strong { color: var(--text-primary); font-weight: 600; }

/* the chain of why someone leaves */

/* ---- feature blocks ------------------------------------------------ */
.rt-feat { display: grid; gap: 34px; margin-top: 44px; align-items: start; }
@media (min-width: 880px) {
  /* Columns, not a 2-up grid: these cards have very different heights (a full
     phone shot vs a one-line note), and a grid keeps rows aligned, so every
     short card left a dead well beside a tall one. Columns flow instead. */
  .rt-feat { display: block; column-count: 2; column-gap: 48px; }
  .rt-f { break-inside: avoid; margin-bottom: 44px; }
  /* A grid IS right when the cards pair naturally (two tall, then two short).
     Columns balance badly at four items and strand one alone in a tall column. */
  .rt-feat--pair { display: grid; grid-template-columns: 1fr 1fr;
    gap: 44px 48px; align-items: start; }
  .rt-feat--pair .rt-f { margin-bottom: 0; }
}
.rt-f { display: flex; flex-direction: column; min-width: 0; }
.rt-f h3 { font-size: 20px; line-height: 1.24; font-weight: 700; color: var(--text-primary);
  margin: 0 0 8px; letter-spacing: -.01em; }
.rt-f p { font-size: 16px; line-height: 1.58; color: var(--text-secondary); margin: 0 0 16px; }
.rt-f .rt-why { font-size: 15px; line-height: 1.5; color: var(--text-primary);
  border-left: 2px solid var(--accent); padding-left: 14px; margin: auto 0 0; }

/* ---- rebuilt product surfaces -------------------------------------- */
.rt-ui { background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: 12px;
  overflow: hidden; margin: 0 0 18px; }
.rt-ui-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary); }
.rt-ui-body { padding: 14px; }

/* week grid */
.rt-week { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rt-day { background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 10px; min-width: 0; }
.rt-day b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.rt-pill { display: block; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 7px 9px; font-size: 12.5px; line-height: 1.3;
  color: var(--text-primary); margin-bottom: 6px; overflow-wrap: anywhere; }
.rt-pill:last-child { margin-bottom: 0; }
.rt-pill.is-on { border-color: var(--accent); }

/* a game, with a win condition for each player */
.rt-game-h { font-size: 15.5px; font-weight: 700; color: var(--text-primary); margin: 0 0 12px; }
.rt-wc { display: grid; gap: 8px; }
@media (min-width: 420px) { .rt-wc { grid-template-columns: 1fr 1fr; } }
.rt-wc div { background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 11px 12px; }
.rt-wc span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 5px; }
.rt-wc p { font-size: 14px; line-height: 1.42; color: var(--text-primary); margin: 0; }

/* roster rows */
.rt-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 8px; margin-bottom: 8px; }
.rt-row:last-child { margin-bottom: 0; }
.rt-av { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-hover); color: var(--text-secondary); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.rt-row .rt-nm { flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: var(--text-primary); }
.rt-row .rt-nm em { display: block; font-style: normal; font-size: 12.5px;
  color: var(--text-tertiary); margin-top: 2px; }
.rt-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.rt-tag.is-focus { color: var(--accent-text); border: 1px solid var(--accent); }
.rt-tag.is-quiet { color: var(--text-tertiary); border: 1px solid var(--border-medium); }

/* ---- Greg ------------------------------------------------------------ */
.rt-greg { display: grid; gap: 22px; align-items: start; }
@media (min-width: 720px) { .rt-greg { grid-template-columns: auto 1fr; gap: 26px; } }
.rt-greg img { width: 132px; height: 132px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--border-medium); display: block; }

/* ---- close ----------------------------------------------------------- */
.rt-close { padding: 76px 0 96px; text-align: center; }
.rt-close h2 { margin-left: auto; margin-right: auto; }
.rt-close p { margin-left: auto; margin-right: auto; max-width: 52ch; }
.rt-cta { display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; margin-top: 26px; border-radius: 8px;
  background: var(--accent); color: #ffffff; font-size: 17px; font-weight: 700;
  text-decoration: none; border: 0; cursor: pointer; }
.rt-cta:hover { background: var(--accent-hover); color: var(--bg-base); }
.rt-cta:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 3px; }
.rt-note { font-size: 14px; color: var(--text-tertiary); margin-top: 16px; }

@media (prefers-reduced-motion: reduce) { .rt * { transition: none !important; } }

/* ---- real product shots --------------------------------------------- */
/* width/height are the real intrinsic sizes so the box is reserved before
   the image decodes. A landing page that reflows as it loads scores its own
   CLS against itself. */
.rt-shot { display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--border-medium); background: var(--bg-elevated);
  margin: 0 0 18px; }
.rt-shot-tall { max-height: 460px; object-fit: cover; object-position: top center; }

/* ---- the two levers -------------------------------------------------- */
.rt-levers { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 780px) { .rt-levers { grid-template-columns: 1fr 1fr; gap: 20px; } }
.rt-lev { background: var(--bg-card); border: 1px solid var(--border-medium);
  border-radius: 12px; padding: 24px 22px; }
/* Neither lever is marked as the right answer. Both are real strategies; the
   page explains how each one works and lets the cost difference land on its
   own. An accent border on one card turns an explanation into a verdict. */
.rt-lev h3 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 0 0 16px; }
.rt-lev h3 b { font-weight: 700; }
.rt-lev .rt-sum { font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--text-primary);
  margin: 0 0 16px; letter-spacing: -.012em; }
.rt-lev .rt-cost { font-size: 15px; line-height: 1.55; color: var(--text-secondary);
  margin: 0 0 12px; }
.rt-lev .rt-cost:last-child { margin-bottom: 0; }
.rt-lev .rt-cost b { color: var(--text-primary); font-weight: 700; }

/* the little figure: people in, people kept */
.rt-fig { display: flex; align-items: flex-end; gap: 18px; margin: 0 0 18px; }
.rt-stack { display: grid; grid-template-columns: repeat(5, 12px); gap: 5px; }
.rt-stack i { display: block; width: 12px; height: 12px; border-radius: 3px;
  background: var(--border-strong); }
.rt-stack i.is-kept { background: var(--accent); }
.rt-fig figcaption { font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-tertiary); margin-top: 8px; }
.rt-fig > div { margin: 0; }

/* ---- motion ---------------------------------------------------------- */
/* Everything is visible by default. `.rt-anim` is added by script only when the
   browser has said it wants motion, so no-JS and reduce-motion both get the
   finished page rather than an empty one waiting on an observer. */
.rt-anim .rt-rise { opacity: 0; transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); }
.rt-anim .rt-rise.is-in { opacity: 1; transform: none; }
.rt-anim .rt-stack i { transition: background .32s ease, transform .32s ease; }
.rt-anim .rt-lev.is-lit .rt-stack i.is-kept { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .rt-anim .rt-rise { opacity: 1; transform: none; transition: none; }
  .rt-anim .rt-stack i { transition: none; }
}

/* ---- numbered mechanism steps (the TIME page) ------------------------ */
.rt-steps { counter-reset: rtstep; display: grid; gap: 1px; margin: 34px 0 0;
  background: var(--border-subtle); border: 1px solid var(--border-subtle);
  border-radius: 12px; overflow: hidden; }
.rt-steps > li { counter-increment: rtstep; background: var(--bg-card);
  padding: 22px 24px; display: flex; gap: 18px; align-items: baseline; }
.rt-steps > li::before { content: counter(rtstep, decimal-leading-zero);
  flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--accent-text); font-variant-numeric: tabular-nums; }
.rt-steps .rt-st { margin: 0; }
.rt-steps .rt-st b { display: block; font-size: 17px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 5px; }
.rt-steps .rt-st span { font-size: 15.5px; line-height: 1.5; color: var(--text-secondary); }

/* a wide product shot that carries a section on its own */
.rt-plate { margin: 34px 0 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border-medium); background: var(--bg-elevated); }
.rt-plate img { display: block; width: 100%; height: auto; }
.rt-cap { font-size: 13.5px; color: var(--text-tertiary); margin: 12px 0 0; text-align: center; }

/* the handover: what stays yours, what does not */
.rt-hand { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 780px) { .rt-hand { grid-template-columns: 1fr 1fr; gap: 20px; } }
.rt-hand > div { border: 1px solid var(--border-medium); border-radius: 12px;
  padding: 22px; background: var(--bg-card); }
.rt-hand .is-yours { opacity: .78; }
.rt-hand h3 { font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 14px; }
.rt-hand .is-give h3 { color: var(--accent-text); }
.rt-hand ul { list-style: none; margin: 0; padding: 0; }
.rt-hand li { font-size: 16px; line-height: 1.45; color: var(--text-primary);
  padding: 9px 0 9px 26px; position: relative; }
.rt-hand li::before { content: ""; position: absolute; left: 4px; top: 17px;
  width: 10px; height: 2px; border-radius: 2px; background: var(--border-strong); }
.rt-hand .is-give li::before { background: var(--accent); }
.rt-hand .is-give { border-color: var(--accent); }
/* A portrait product shot as a full-width plate renders taller than the
   viewport. Cap the column rather than the image so it never crops. */
.rt-plate-tall { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---- people ---------------------------------------------------------- */
.rt-people { display: grid; gap: 18px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rt-p { text-align: center; }
.rt-p img { display: block; width: 100%; max-width: 220px; aspect-ratio: 1;
  height: auto; margin: 0 auto 14px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--border-medium); background: var(--bg-elevated); }
.rt-p b { display: block; font-size: 17px; font-weight: 700; color: var(--text-primary);
  margin-bottom: 4px; }
.rt-p span { display: block; font-size: 14.5px; line-height: 1.45; color: var(--text-secondary); }

/* ---- a real class video ---------------------------------------------- */
.rt-vid { position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border-medium); background: #000; aspect-ratio: 16 / 9;
  margin: 0 0 18px; }
.rt-vid img, .rt-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; object-fit: cover; }
.rt-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); display: grid; place-items: center; padding: 0; }
.rt-play::before { content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 20px solid #ffffff; border-top: 13px solid transparent;
  border-bottom: 13px solid transparent; }
.rt-play:hover { background: var(--accent-hover); }
.rt-play:focus-visible { outline: 3px solid var(--accent-hover); outline-offset: 4px; }
.rt-vid[data-busy="1"] .rt-play { opacity: .5; cursor: progress; }

/* ---- a phone, shown whole -------------------------------------------- */
/* object-fit:cover on a 780x1688 screenshot cropped the class card in half.
   The phone gets its own narrow column and is never cropped. */
.rt-phone { max-width: 268px; margin: 0 auto 18px; border-radius: 22px;
  border: 1px solid var(--border-medium); background: var(--bg-elevated);
  padding: 8px; }
.rt-phone img { display: block; width: 100%; height: auto; border-radius: 15px; }

/* ---- social proof ---------------------------------------------------- */
/* Lifted from the main landing page so the two ad destinations carry the
   same proof the site already does: two named coaches on video, and the gym
   wall. Quotes are VERBATIM; only which half is emphasised changes, to match
   the lever each page argues. */
/* These are vertical selfie videos. A 16/9 frame letterboxes them with black
   bars down both sides, which is what the main site avoids by running the
   testimonial embeds at 9/16. Matched here, and a little wider. */
.rt-tm { display: grid; gap: 26px; align-items: center; max-width: 980px;
  margin-left: auto; margin-right: auto; }
@media (min-width: 820px) { .rt-tm { grid-template-columns: minmax(0,360px) 1fr; gap: 44px; } }
.rt-tm + .rt-tm { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border-subtle); }
.rt-tm__v { position: relative; aspect-ratio: 9/16; max-width: 360px; width: 100%;
  margin-left: auto; margin-right: auto; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border-medium); background: #000;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); }
.rt-tm__v img, .rt-tm__v iframe { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; object-fit: cover; }
.rt-stars { color: var(--accent-warning); font-size: 16px; letter-spacing: 3px; margin-bottom: 12px; }
.rt-tm blockquote { margin: 0 0 18px; font-size: clamp(18px, 2.1vw, 24px); line-height: 1.5;
  color: var(--text-primary); font-weight: 500; }
.rt-tm blockquote .hl { color: var(--accent-text); font-weight: 700; }
.rt-tm__who { font-size: 15px; line-height: 1.45; color: var(--text-secondary); }
.rt-tm__who strong { display: block; color: var(--text-primary); font-size: 16px; font-weight: 700; }

/* The gym wall, as the marquee the main site uses: a duplicated track sliding
   half its own width, so the loop is seamless. Chips sit on a LIGHT ground
   because gym logos are mostly dark marks on transparent, and they vanish on
   our own background. */
.rt-wall { position: relative; overflow: hidden; padding: 4px 0; margin-top: 26px; }
.rt-wall::before, .rt-wall::after { content: ""; position: absolute; top: 0; bottom: 0;
  width: 9%; z-index: 2; pointer-events: none; }
.rt-wall::before { left: 0; background: linear-gradient(90deg, var(--bg-base), transparent); }
.rt-wall::after { right: 0; background: linear-gradient(270deg, var(--bg-base), transparent); }
.rt-track { display: flex; gap: 20px; width: max-content;
  animation: rtGymScroll 80s linear infinite; }
@keyframes rtGymScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rt-wall:hover .rt-track { animation-play-state: paused; }
.rt-gym { flex: 0 0 auto; width: 150px; display: flex; flex-direction: column;
  align-items: center; gap: 9px; }
.rt-gym .rt-chip { width: 150px; height: 92px; border-radius: 13px; background: #fbfbfc;
  display: flex; align-items: center; justify-content: center; padding: 15px;
  box-shadow: 0 9px 22px -14px rgba(0,0,0,.6); }
.rt-gym img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block; }
.rt-gym span { font-size: 11.5px; line-height: 1.25; color: var(--text-tertiary);
  text-align: center; max-width: 150px; }
@media (prefers-reduced-motion: reduce) {
  .rt-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* A compact trust strip, used high on the page rather than only at the end. */
.rt-strip { padding: 30px 0 34px; border-bottom: 1px solid var(--border-subtle); }
.rt-strip .rt-eyebrow { text-align: center; color: var(--text-tertiary); margin-bottom: 4px; }

/* CTA after a main point, not only at the end of the page. */
.rt-mid { text-align: center; padding: 8px 0 4px; }
.rt-mid p { font-size: 16px; color: var(--text-secondary); margin: 0 0 16px; }

/* Video-only testimonials. Daniel and Jay have no written quote anywhere on
   the site, so they get a poster, a name and a gym, and nothing is put in
   their mouths. Click to play, so four Bunny players do not load at once. */
.rt-vrow { display: grid; gap: 18px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); max-width: 640px; }
.rt-vcard figure { margin: 0; }
.rt-vcard .rt-vwrap { position: relative; aspect-ratio: 9/16; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--border-medium); background: #000; }
.rt-vcard .rt-vwrap img, .rt-vcard .rt-vwrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  object-fit: cover; }
.rt-vcard figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.4;
  color: var(--text-secondary); }
.rt-vcard figcaption strong { display: block; color: var(--text-primary); font-size: 16px;
  font-weight: 700; margin-bottom: 2px; }

/* The video-only row is capped at 640px, so without auto margins it sits hard
   left under a heading that is not. Centre the block and its captions. */
.rt-vrow { margin-left: auto; margin-right: auto; }
.rt-vcard figcaption { text-align: center; }
.rt-sec--mid { text-align: center; }
.rt-sec--mid h2, .rt-sec--mid p { margin-left: auto; margin-right: auto; }
/* 14 of the 50 logos are white marks on transparent. On the light chip they
   are invisible, which is how Granite Bay was showing as an empty card. The
   main site carries a per-gym `d` flag for these; it is honoured here. */
.rt-gym .rt-chip--dark { background: #15171b; border: 1px solid #2b2f36; box-shadow: none; }

/* ---- share-with-coach composer + coaches inbox ---------------------- */
.rt-ui-hint { font-size: 13px; line-height: 1.45; color: var(--text-tertiary);
  margin: 0 0 12px; }
.rt-field { background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 11px 12px; font-size: 14px; line-height: 1.45;
  color: var(--text-primary); margin: 0 0 12px; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-chip { font-size: 12px; line-height: 1; padding: 7px 10px; border-radius: 999px;
  border: 1px solid var(--border-medium); color: var(--text-tertiary); white-space: nowrap; }
.rt-chip.is-on { border-color: var(--accent); color: var(--accent-text); }

.rt-in { display: flex; gap: 10px; padding: 12px; background: var(--bg-elevated);
  border: 1px solid var(--border-subtle); border-radius: 8px; margin-bottom: 8px; }
.rt-in:last-child { margin-bottom: 0; }
.rt-in-b { flex: 1 1 auto; min-width: 0; }
.rt-in-t { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.rt-in-t b { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.rt-in-d { font-size: 12px; color: var(--text-tertiary); }
.rt-pill-new { font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  color: var(--accent-text); border: 1px solid var(--accent); }
.rt-in-x { font-size: 14px; line-height: 1.45; color: var(--text-primary); margin: 0 0 8px; }
.rt-in-g { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rt-tg { font-size: 11px; line-height: 1; padding: 5px 8px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  color: var(--text-tertiary); white-space: nowrap; }
.rt-in-a { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-b { font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 7px;
  border: 1px solid var(--border-medium); color: var(--text-secondary); white-space: nowrap; }
.rt-b.is-p { background: var(--accent); border-color: var(--accent);
  color: var(--text-on-accent); }

/* ---- set-focus, minimal ---------------------------------------------- */
.rt-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 7px; }
.rt-opt { font-size: 13px; line-height: 1.45; color: var(--text-tertiary);
  margin: 0 0 14px; }
.rt-dur { display: flex; gap: 6px; }
.rt-seg { font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 7px;
  border: 1px solid var(--border-medium); color: var(--text-secondary); }
.rt-seg.is-on { background: var(--accent); border-color: var(--accent);
  color: var(--text-on-accent); }

/* The one line the section exists to land. */
.rt-punch { font-size: 21px; line-height: 1.38; font-weight: 600;
  color: var(--text-primary); letter-spacing: -.01em; margin: 22px 0 0; }
@media (min-width: 720px) { .rt-punch { font-size: 24px; } }

/* A quiet second door: for the coach who is not sold on the method yet. */
.rt-door { font-size: 16px; line-height: 1.58; color: var(--text-secondary);
  margin: 26px 0 0; }
.rt-cta--ghost { background: transparent; color: var(--text-primary);
  border: 1px solid var(--border-medium); font-weight: 600; font-size: 16px;
  min-height: 48px; margin-top: 14px; }
.rt-cta--ghost:hover { background: var(--bg-elevated); color: var(--text-primary);
  border-color: var(--accent); }