/* ==========================================================================
   RS — Lifecycle panel
   Square edges and the cut corner follow rocketscience.gg. The interactive
   shapes are light and solid — white plates carrying dark text — so that what
   is clickable reads as clickable against the moon rather than sinking into it.
   Outlines are gone: a plate is one filled shape, not a border with a hole.
   ========================================================================== */

/* self-contained: never assume the host theme has a border-box reset */
.rs-lc, .rs-lc *, .rs-lc *::before, .rs-lc *::after { box-sizing: border-box; }

.rs-lc {
  position: relative;
  overflow: hidden;
  --stages: 7; --per: 45vh;
  background: var(--rs-nearblack, #101112);
  color: var(--rs-offwhite, #ececec);
  font-family: var(--rs-font-title, "Rajdhani", system-ui, sans-serif);
  font-weight: 500;

  /* the light palette the plates are built from */
  --lc-plate:      #ffffff;
  --lc-plate-2:    #f1f1ef;
  --lc-plate-3:    #d6d6d1;
  --lc-plate-mute: #a2a29d;
  --lc-ink:        #101112;
  --lc-ink-soft:   #4a4d50;
  --lc-ink-faint:  #74787b;
  --lc-hair:       rgba(16,17,18,.14);
  --lc-red-ink:    #cf3b3b;   /* rocket red, dark enough to read on white */
  --cut:           16px;
}

.rs-lc__backdrop { position: absolute; inset: 0; overflow: hidden; }
.rs-lc__cols { display: block; }
.rs-lc__variant[hidden] { display: none; }

/* Part of the page-wide star field: anchored to the viewport (not to this
   section) so it continues straight out of whatever sits above, and breathing
   on the same 7s cycle as the hero. */
.rs-lc__sky {
  position: absolute; inset: 0;
  background-position: 50% 0; background-size: 100% auto; background-repeat: repeat-y;
  opacity: var(--rs-sky-dim, .36);
  animation: rs-lc-sky-breathe 7s ease-in-out infinite alternate;
}
@keyframes rs-lc-sky-breathe {
  from { opacity: var(--rs-sky-dim, .36); }
  to   { opacity: var(--rs-sky-bright, .50); }
}
/* the photograph cannot twinkle; js/sky.js pulses this canvas over the top */
.rs-lc__stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .rs-lc__sky { animation: none; opacity: .42; }
}

.rs-lc__moon {
  position: absolute; top: 50%; right: 0;
  width: min(88vh, 940px); aspect-ratio: 1;
  transform: translate(46%, -50%);
  border-radius: 50%;
  background-position: center; background-size: cover;
}
.rs-lc__moon--3d { background: none; border-radius: 0; display: none; }
.rs-lc__moon--3d.is-ready { display: block; }
.rs-lc__moon.is-retired { display: none; }

.rs-lc__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(16,17,18,.97) 0%, rgba(16,17,18,.96) 66%, rgba(16,17,18,.55) 84%, rgba(16,17,18,0) 100%);
}

.rs-lc__content { position: relative; z-index: 5; padding: 88px 0 96px; }
.rs-lc__wrap { width: 90%; max-width: var(--rs-wrapper-max, 1536px); margin-inline: auto; }
@media (min-width: 768px) { .rs-lc__wrap { padding-inline: var(--rs-wrapper-pad, 40px); } }

/* ---- title -------------------------------------------------------------- */
.rs-lc__title {
  font-family: var(--rs-font-brand, "Orbitron", ui-sans-serif, system-ui, sans-serif);
  font-weight: 700; line-height: 1.16; margin: 0;
  font-size: clamp(1.5rem, 2.9vw, 2.55rem);
  text-transform: uppercase; max-width: 900px;
}
.rs-lc__title-line { display: block; }
.rs-lc__title em { font-style: normal; color: var(--rs-rocket, #f04f4f); }

.rs-lc__lede { max-width: 52ch; margin-top: 22px; }
.rs-lc__lede p { font-size: 24px; line-height: 1.55; color: var(--rs-gray-300, #c9c9c9); margin: 0 0 .8em; }
.rs-lc__lede p:last-child { margin-bottom: 0; }

/* ---- controls -----------------------------------------------------------
   Solid light pills, no outlines: the chosen one is rocket red, the rest are
   plain white plates, so the pair reads as a switch you can press. */
.rs-lc__modes { display: flex; gap: 8px; margin-top: 52px; flex-wrap: wrap; }
.rs-lc__modes button {
  padding: 7px 18px; font: inherit; font-size: 18px; line-height: 1.2;
  text-transform: uppercase; cursor: pointer;
  color: var(--lc-ink); background: var(--lc-plate-2); border: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background .18s, color .18s;
}
.rs-lc__modes button:hover:not(.is-on) { background: #fff; }
.rs-lc__modes button.is-on { background: var(--rs-rocket-dark, #d73d3d); color: #fff; }

/* ---- the prompts -------------------------------------------------------
   The panel asks two questions and answers them, so say so. Plain labels: no
   marker, no numbered badge — the stages already number themselves 01-07, and
   the plate below each prompt is what the eye is meant to land on. */
.rs-lc__steplabel {
  margin: 0 0 10px; font-size: 14px; line-height: 1.2;
  text-transform: uppercase; color: var(--rs-gray-300, #c9c9c9);
}
.rs-lc__step + .rs-lc__step { margin-top: 20px; }

/* ---- the lifecycle axis --------------------------------------------------
   One rule across the whole run, a numbered stop at every stage. Segments
   behind the chosen stage read as travelled, the ones ahead as still to come. */
.rs-lc__timeline {
  display: flex; margin-top: 40px; max-width: 900px;
  overflow-x: auto; scrollbar-width: none;
}
.rs-lc__timeline::-webkit-scrollbar { display: none; }

.rs-lc__timeline button {
  position: relative; flex: 1 0 112px; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 6px 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: center;
}

/* the rule, drawn stop to stop so the travelled part can differ */
.rs-lc__timeline button::after {
  content: ""; position: absolute; left: 50%; width: 100%; top: 32px; height: 1px;
  background: rgba(236,236,236,.16); transition: background .2s;
}
.rs-lc__timeline button:last-child::after { display: none; }
.rs-lc__timeline button.is-past::after { background: rgba(236,236,236,.4); }

.rs-lc__stagenum {
  display: block; height: 18px; line-height: 18px; font-size: 15px;
  color: var(--rs-gray-600, #4c4c4c); transition: color .2s;
}
.rs-lc__dot {
  display: block; width: 9px; height: 9px; margin: 10px 0;
  background: var(--rs-gray-700, #2f3438);
  transition: background .2s, box-shadow .2s, width .2s, height .2s;
}
.rs-lc__stagename {
  display: block; font-size: 15px; line-height: 1.15; text-transform: uppercase;
  color: var(--rs-gray-400, #929292); transition: color .2s;
}

.rs-lc__timeline button.is-past .rs-lc__dot { background: var(--rs-gray-500, #676767); }
.rs-lc__timeline button.is-past .rs-lc__stagename { color: var(--rs-gray-200, #b5b5b5); }

.rs-lc__timeline button:hover:not(.is-on) .rs-lc__dot { background: rgba(240,79,79,.55); }
.rs-lc__timeline button:hover:not(.is-on) .rs-lc__stagename,
.rs-lc__timeline button:hover:not(.is-on) .rs-lc__stagenum { color: #fff; }

.rs-lc__timeline button.is-on .rs-lc__stagenum { color: var(--rs-rocket, #f04f4f); }
.rs-lc__timeline button.is-on .rs-lc__stagename { color: var(--rs-offwhite, #ececec); }
.rs-lc__timeline button.is-on .rs-lc__dot {
  background: var(--rs-rocket, #f04f4f);
  box-shadow: 0 0 0 4px rgba(240,79,79,.22), 0 0 18px rgba(240,79,79,.55);
}

/* ---- capability stack ---------------------------------------------------
   One plate per capability. The header row and the detail live inside the
   same shape, so opening a card grows the row rather than adding a second
   entry underneath it. */
.rs-lc__stack { margin-top: 14px; display: grid; gap: 7px; max-width: 900px; }

.rs-lc__item {
  --plate: var(--lc-plate-2);
  position: relative;
  background: var(--plate);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: background .2s, filter .25s;
}
/* a clip-path clips box-shadow away, so the lift is a drop-shadow filter,
   which follows the cut corner instead */
.rs-lc__item.is-open {
  --plate: var(--lc-plate);
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
}

.rs-lc__tab {
  position: relative; width: 100%; padding: 15px 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 6px 18px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--lc-ink);
  transition: background .18s;
}
.rs-lc__tab:hover { background: rgba(16,17,18,.05); }
.rs-lc__tab:focus-visible { outline: 2px solid var(--rs-rocket, #f04f4f); outline-offset: -3px; }

.rs-lc__name { font-size: 22px; line-height: 1.1; text-transform: uppercase; color: var(--lc-ink); }
/* the studio accent, taken down far enough that even Multiplay's teal clears
   4.5:1 on the dimmest plate; the plain colour is the pre-color-mix fallback */
.rs-lc__studioname {
  font-size: 15px; line-height: 1.1; text-transform: uppercase;
  font-weight: 700;                      /* Rajdhani Bold is loaded by tokens.css */
  color: var(--lc-ink-soft);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .rs-lc__studioname { color: color-mix(in srgb, var(--acc) 46%, #101112); }
}

/* the caret is the clickability cue: it points right when the row is shut and
   down once it is open */
.rs-lc__caret {
  width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--lc-ink-soft); border-bottom: 2px solid var(--lc-ink-soft);
  transform: rotate(-45deg); transform-origin: 60% 60%;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .18s;
}
.rs-lc__tab:hover .rs-lc__caret { border-color: var(--lc-ink); }
.rs-lc__tab.is-open .rs-lc__caret { transform: rotate(45deg); border-color: var(--lc-ink); }
@media (prefers-reduced-motion: reduce) { .rs-lc__caret { transition: none; } }

.rs-lc__rank { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0; }
.rs-lc__follow, .rs-lc__rail { display: block; }

/* with no words, plate brightness and order carry the ranking */
.rs-lc__item.lv3 { --plate: var(--lc-plate); }
.rs-lc__item.lv2 { --plate: var(--lc-plate-2); }
.rs-lc__item.lv1 { --plate: var(--lc-plate-3); }
.rs-lc__item.lv1 .rs-lc__name { color: #26292b; }

/* A capability with nothing to do at this stage. Its plate drops far enough
   below the live ones to read as off at a glance — 2.3x the ground rather than
   1.5x — and it gives up the studio accent, which belongs to a row that is
   actually doing something. The ink goes flat and dark so that a much duller
   plate still carries readable type. */
/* Every row is the same height, level 0 included. A shorter level-0 row
   changed the height of the whole section as the ranking moved, and the moon
   is anchored to the section's bottom edge, so it slid up and down on every
   click. The duller plate carries the de-emphasis on its own. */
.rs-lc__item.lv0 { --plate: var(--lc-plate-mute); --cut: 12px; }
.rs-lc__item.lv0 .rs-lc__name,
.rs-lc__item.lv0 .rs-lc__studioname { color: #2c2f31; }
.rs-lc__item.lv0 .rs-lc__caret { border-color: #2c2f31; }
.rs-lc__item.lv0 .rs-lc__mark { opacity: .45; }
.rs-lc__item.lv0 .rs-lc__desc p { color: #33363a; }
.rs-lc__item.lv0 .rs-lc__cta { background: #3a3d40; color: #ececec; }

/* ---- open card ---------------------------------------------------------- */
.rs-lc__panel {
  overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .42s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.rs-lc__panel.is-open { opacity: 1; }
.rs-lc__panel[hidden] { display: none; }              /* before the script takes over */
.rs-lc--noanim .rs-lc__panel { transition: none; }
@media (prefers-reduced-motion: reduce) { .rs-lc__panel { transition: none; } }

/* no ground and no edge of its own: it is the lower half of the row's plate,
   marked off by one hairline rather than by becoming a second card */
.rs-lc__card {
  position: relative; padding: 20px 0 26px; margin: 0 22px;
  border-top: 1px solid var(--lc-hair);
}

/* the studio mark sits straight on the plate. The marks are dark artwork
   (Multiplay and Terminal Velocity in black, Atomic Theory in its orange,
   Space Rangers as a purple silhouette with the SR knocked out of it), so
   they need no ground of their own. */
.rs-lc__mark { display: block; height: 28px; width: auto; }

.rs-lc__desc { margin-top: 16px; max-width: 62ch; }
.rs-lc__desc p { font-size: 18px; line-height: 1.55; color: var(--lc-ink-soft); margin: 0 0 .7em; }
.rs-lc__desc p:last-child { margin-bottom: 0; }

.rs-lc__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rs-lc__tags span {
  font-size: 18px; line-height: 1.2; padding: 6px 16px; text-transform: uppercase;
  background: rgba(16,17,18,.05); border: 0; color: var(--lc-ink-soft);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background .18s, color .18s;
}
.rs-lc__tags span:hover { background: rgba(16,17,18,.1); color: var(--lc-ink); }

.rs-lc__cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 10px 20px;
  background: var(--acc); color: var(--rs-black, #0b0c0d);
  font-size: 18px; text-transform: uppercase; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: filter .18s;
}
.rs-lc__cta:hover { filter: brightness(1.08); }

/* ---- phone -------------------------------------------------------------- */
@media (max-width: 760px) {
  .rs-lc__timeline {
    margin-top: 32px;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .rs-lc__moon { width: min(62vh, 460px); transform: translate(56%, -50%); }
  .rs-lc__scrim { background: linear-gradient(180deg, rgba(16,17,18,.93), rgba(16,17,18,.88)); }
  .rs-lc__tab { padding: 13px 16px; grid-template-columns: minmax(0, 1fr) auto; }
  .rs-lc__studioname { grid-column: 1; grid-row: 2; }
  .rs-lc__caret { grid-column: 2; grid-row: 1 / span 2; }
  .rs-lc__card { margin-inline: 16px; padding: 16px 0 20px; }
  .rs-lc__content { padding: 64px 0 72px; }
}

/* ==========================================================================
   Centred layout: copy, controls and stack down the middle, the moon rising
   behind them from the bottom edge.
   ========================================================================== */
.rs-lc--centred .rs-lc__moon {
  top: auto; right: auto; bottom: 0; left: 50%;
  width: min(110vw, 1300px);
  transform: translate(-50%, 56%);
}
.rs-lc--centred .rs-lc__scrim {
  background: linear-gradient(180deg,
    rgba(16,17,18,.74) 0%, rgba(16,17,18,.3) 28%, rgba(16,17,18,.45) 70%, rgba(16,17,18,.8) 100%);
}
.rs-lc--centred .rs-lc__content { padding-bottom: clamp(170px, 22vh, 300px); }

.rs-lc--centred .rs-lc__title { text-align: center; margin-inline: auto; max-width: 1000px; }
.rs-lc--centred .rs-lc__lede { text-align: center; margin-inline: auto; max-width: 900px; }
.rs-lc--centred .rs-lc__modes { justify-content: center; }
.rs-lc--centred .rs-lc__timeline { margin-inline: auto; max-width: 900px; }
.rs-lc--centred .rs-lc__stack { margin-inline: auto; }

/* the plates keep their own left-aligned reading; only the column is centred */
.rs-lc--centred .rs-lc__desc { margin-inline: 0; }

@media (max-width: 760px) {
  .rs-lc--centred .rs-lc__moon { width: min(150vw, 620px); transform: translate(-50%, 62%); }
  .rs-lc--centred .rs-lc__content { padding-bottom: clamp(120px, 18vh, 200px); }
}

/* ==========================================================================
   Vertical layout: the axis stands up on the left beside the capability
   plates, with the moon rising from the bottom edge behind both.
   ========================================================================== */
.rs-lc--vertical .rs-lc__moon {
  top: auto; right: auto; bottom: 0; left: 50%;
  width: min(110vw, 1300px); transform: translate(-50%, 62%);
}
.rs-lc--vertical .rs-lc__scrim {
  background: linear-gradient(180deg,
    var(--rs-scrim-edge, rgba(16,17,18,.34)) 0%, rgba(16,17,18,.34) 22%,
    rgba(16,17,18,.5) 68%, rgba(16,17,18,.82) 100%);
}

.rs-lc--vertical .rs-lc__head { text-align: center; padding: 0; max-width: 1120px; margin-inline: auto; }
/* sized so the longer of the two title lines runs to about the same measure
   as the description under it — it was landing at half the width and reading
   as an afterthought above its own paragraph */
.rs-lc--vertical .rs-lc__title { margin-inline: auto; max-width: 1120px;
  font-size: clamp(1.4rem, 4.6vw, 3.9rem); }
.rs-lc--vertical .rs-lc__lede { margin-inline: auto; max-width: 1120px; }
/* the game-type choice is built exactly like the stage list below it — same
   plate, same rows, same red fill on the one that is chosen — because the two
   are the same kind of question */
.rs-lc--vertical .rs-lc__modes {
  display: block; margin: 0; padding: 12px;
  background: var(--lc-plate-2);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.rs-lc--vertical .rs-lc__modes button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; font-size: 16px; line-height: 1;
  background: none; color: var(--lc-ink);
  transition: background .16s, color .16s;
  /* the cut is on the row at all times, not just when it is chosen: a
     rectangular hover behind a cut-corner button reads as two shapes */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.rs-lc--vertical .rs-lc__modes button:hover:not(.is-on) { background: rgba(16,17,18,.06); color: var(--lc-ink); }
.rs-lc--vertical .rs-lc__modes button.is-on { background: var(--rs-rocket-dark, #d73d3d); color: #fff; }

.rs-lc--vertical .rs-lc__zone { min-height: 0; }
/* unpinned the section is only as tall as it needs to be, so buy the moon some
   room under the stack — its limb rising past the bottom edge is the point */
.rs-lc--vertical:not(.rs-lc--pinned) .rs-lc__content {
  padding-block: 88px clamp(170px, 20vh, 290px);
}
.rs-lc--vertical .rs-lc__cols {
  position: static;
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: 22px; align-items: start; align-content: start;
  max-width: 1120px; margin-inline: auto; padding-block: 22px 0;
}

/* The axis, stood up beside the capability plates. No beads and no connector
   rule — nothing on rocketscience.gg is drawn that way, and a line of
   hollow-to-filled circles reads as a generic form wizard. Instead each stage
   is a row and the current one becomes a filled red plate with the cut corner,
   which is the panel's own language: the same shape as a capability row and
   the same fill as the active mode pill. Travelled stages are solid ink, the
   road ahead is a mid grey. */
.rs-lc--vertical .rs-lc__timeline {
  position: relative; display: block; margin: 0; max-width: none; overflow: visible;
  padding: 12px; align-self: start;
  -webkit-mask-image: none; mask-image: none;
  background: var(--lc-plate-2);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.rs-lc--vertical .rs-lc__timeline button {
  position: relative; z-index: 1;
  flex: none; width: 100%; display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center; gap: 0 12px;
  padding: 9px 12px; text-align: left;
  transition: background .16s, color .16s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
/* the bead and the rule belong to the horizontal axis only */
.rs-lc--vertical .rs-lc__dot { display: none; }
.rs-lc--vertical .rs-lc__timeline button::after { display: none; }

.rs-lc--vertical .rs-lc__stagenum {
  height: auto; line-height: 1; text-align: right; font-size: 13px;
  color: #5c6063;
}
.rs-lc--vertical .rs-lc__stagename {
  text-align: left; font-size: 16px; line-height: 1;
  color: var(--lc-ink); white-space: nowrap;
}
/* still to come */
.rs-lc--vertical .rs-lc__timeline button:not(.is-past):not(.is-on) .rs-lc__stagename,
.rs-lc--vertical .rs-lc__timeline button:not(.is-past):not(.is-on) .rs-lc__stagenum {
  color: #666a6d;
}
/* already travelled */
.rs-lc--vertical .rs-lc__timeline button.is-past .rs-lc__stagename { color: var(--lc-ink); }
.rs-lc--vertical .rs-lc__timeline button.is-past .rs-lc__stagenum { color: #5c6063; }

.rs-lc--vertical .rs-lc__timeline button:hover:not(.is-on) { background: rgba(16,17,18,.06); }
.rs-lc--vertical .rs-lc__timeline button:hover:not(.is-on) .rs-lc__stagename,
.rs-lc--vertical .rs-lc__timeline button:hover:not(.is-on) .rs-lc__stagenum { color: var(--lc-ink); }

/* you are here. rocket-dark, not rocket: white on #f04f4f is 3.5:1, and this
   is the same fill the active mode pill uses. */
.rs-lc--vertical .rs-lc__timeline button.is-on { background: var(--rs-rocket-dark, #d73d3d); }

/* An outline is clipped away by a clip-path, so the keyboard ring is drawn
   inside the shape instead — where it follows the cut corner. Red on the
   plate, white on the chosen row, which is already red. */
.rs-lc--vertical .rs-lc__timeline button:focus-visible,
.rs-lc--vertical .rs-lc__modes button:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--rs-rocket, #f04f4f);
}
.rs-lc--vertical .rs-lc__timeline button.is-on:focus-visible,
.rs-lc--vertical .rs-lc__modes button.is-on:focus-visible {
  box-shadow: inset 0 0 0 2px #fff;
}
.rs-lc--vertical .rs-lc__timeline button.is-on .rs-lc__stagename { color: #fff; }
.rs-lc--vertical .rs-lc__timeline button.is-on .rs-lc__stagenum { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .rs-lc--vertical .rs-lc__timeline button { transition: none; }
}

.rs-lc--vertical .rs-lc__answer { align-self: start; min-width: 0; }
.rs-lc--vertical .rs-lc__stack { margin: 0; max-width: none; gap: 6px; }
.rs-lc__answer .rs-lc__stack { margin-top: 0; }
.rs-lc--vertical .rs-lc__rail { align-self: start; }

/* ---- pinned: the page scroll walks the stages ---------------------------
   Only when "Advance the stages as the visitor scrolls" is on. It costs the
   visitor several screens of scrolling in which the page looks frozen, so it
   is off by default. */
.rs-lc--vertical.rs-lc--pinned { overflow: visible; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__backdrop {
  position: sticky;
  inset: auto;              /* clear the absolute insets before setting the sticky edge */
  top: 0;
  height: 100svh; overflow: hidden;
}
.rs-lc--vertical.rs-lc--pinned .rs-lc__content { margin-top: -100svh; padding: 0; }
/* title, copy, axis and cards pin together, so the frame always reads whole */
.rs-lc--vertical.rs-lc--pinned .rs-lc__wrap {
  position: sticky; top: var(--offset, 72px);
  min-height: calc(100svh - var(--offset, 72px));
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 10px 12px;
}
/* pinned, everything has to fit one screen, so the block runs compact and the
   card copy is clamped */
.rs-lc--vertical.rs-lc--pinned .rs-lc__title { font-size: clamp(1.4rem, 2.6vw, 2.3rem); }
.rs-lc--vertical.rs-lc--pinned .rs-lc__lede p { font-size: clamp(15px, 2.6svh, 24px); line-height: 1.5; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__cols { padding-block: 14px 0; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__stack { gap: 4px; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__tab { padding: 8px 18px; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__name { font-size: 19px; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__card { padding: 12px 0 14px; margin-inline: 18px; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__mark { height: 22px; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__desc { margin-top: 10px; max-width: 74ch; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__desc p {
  font-size: 16px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rs-lc--vertical.rs-lc--pinned .rs-lc__tags { margin-top: 8px; gap: 6px; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__tags span { font-size: 14px; padding: 3px 10px; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__cta { margin-top: 9px; padding: 5px 13px; font-size: 15px; gap: 7px; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__timeline button { padding: 10px 12px; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__item.is-open { filter: drop-shadow(0 9px 20px rgba(0,0,0,.4)); }
@media (max-height: 780px) {
  .rs-lc--vertical.rs-lc--pinned .rs-lc__lede { margin-top: 14px; }
  .rs-lc--vertical.rs-lc--pinned .rs-lc__title { font-size: clamp(1.15rem, 2vw, 1.7rem); }
  .rs-lc--vertical.rs-lc--pinned .rs-lc__steplabel { font-size: 13px; margin-bottom: 7px; }
  .rs-lc--vertical.rs-lc--pinned .rs-lc__step + .rs-lc__step { margin-top: 14px; }
}

/* The moon is hung off the viewport, not off the bottom of the section.
   Bottom-anchored it moved on every click: changing the mode or the stage
   changes which card is open, that card's copy wraps to a different number of
   lines, the section grows or shrinks, and the moon slid with it — 28px, one
   line of body copy. Anchored from the top, nothing but the turn moves it.
   `vh` rather than `svh` on purpose: this rule is desktop-only, and an unknown
   unit here would drop the declaration and leave the moon unpositioned.
   The pinned mode already sits in a 100svh sticky backdrop, so it is fine. */
@media (min-width: 861px) {
  .rs-lc--vertical:not(.rs-lc--pinned) .rs-lc__moon {
    top: 68vh; bottom: auto;
    transform: translateX(-50%);
  }
}

/* the manual-explore switch only exists in the pinned mode, where something
   has to be able to stop the scroll taking the panel back */
.rs-lc__follow { display: none; }
.rs-lc--vertical.rs-lc--pinned .rs-lc__follow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 12px; padding: 10px 14px; font: inherit; font-size: 15px; line-height: 1.2;
  text-transform: uppercase; cursor: pointer; text-align: left;
  color: var(--lc-ink-soft); background: var(--lc-plate-2); border: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition: color .18s, background .18s;
}
.rs-lc--vertical.rs-lc--pinned .rs-lc__follow:hover { color: var(--lc-ink); background: #fff; }
.rs-lc__followbox {
  width: 11px; height: 11px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(16,17,18,.4);
  transition: background .18s, box-shadow .18s;
}
.rs-lc--vertical.rs-lc--pinned .rs-lc__follow.is-on { color: var(--lc-ink); }
.rs-lc--vertical.rs-lc--pinned .rs-lc__follow.is-on .rs-lc__followbox {
  background: var(--rs-rocket, #f04f4f); box-shadow: inset 0 0 0 1px var(--rs-rocket, #f04f4f);
}

@media (max-width: 860px) {
  .rs-lc--vertical.rs-lc--pinned { overflow: hidden; }
  .rs-lc--vertical.rs-lc--pinned .rs-lc__backdrop { position: absolute; inset: 0; height: auto; }
  .rs-lc--vertical.rs-lc--pinned .rs-lc__content { margin-top: 0; padding: 64px 0 72px; min-height: 0 !important; }
  .rs-lc--vertical.rs-lc--pinned .rs-lc__wrap { position: static; min-height: 0; padding-block: 0; display: block; }
  .rs-lc--vertical.rs-lc--pinned .rs-lc__desc p { -webkit-line-clamp: none; display: block; }
  .rs-lc--vertical .rs-lc__cols {
    grid-template-columns: 1fr; gap: 26px; padding-block: 0; margin-top: 30px;
  }
  /* stacked, the axis is 244px of content in a full-width plate; hold it to a
     column so it does not read as an empty slab */
  .rs-lc--vertical .rs-lc__rail { max-width: 420px; }
  .rs-lc--vertical .rs-lc__timeline { padding: 10px; }
  .rs-lc--vertical .rs-lc__timeline button { padding: 8px 12px; }
  .rs-lc--vertical .rs-lc__moon { width: min(150vw, 620px); transform: translate(-50%, 64%); }
}