/* ==========================================================================
   Collsta website — Section 5: Remix

   Deliberately NOT a scroll-scrub. Sections 1 and 3 are pinned cinematic
   scenes and the page needs its rhythm back, so this one scrolls in like an
   ordinary block and then plays IN PLACE on a fixed ~7.6s loop.

   Same contract as "Save anything": every step is a CSS keyframe sitting at
   `animation-play-state: paused`, and site.js only decides when they may run
   (`.is-live`). Nothing animates off screen or in a background tab, and there
   is no timer, no rAF and no scroll listener behind any of it.

   The loop, as fractions of --rx-cycle:
     0 → 13%    ORIGINAL      Anna's board, alone and calm
     13 → 24%   REMIX CTA     the link between the two boards takes emphasis
     24 → 37%   YOUR VERSION  Mia's copy forms — still identical to Anna's
     37 → 63%   PERSONALISE   cover, emoji, title, accent; 2 items out,
                              2 swapped in, 1 added
     63 → 72%   ATTRIBUTION   "Remixed from @anna · Barcelona 2027"
     72 → 82%   SHARE         "Share your version"
     82 → 93%   CALM          both boards hold, related but distinct
     93 → 100%  RESET         the copy fades out so the restart has no snap;
                              every inner element reverts behind that fade

   Card visuals (.badge, .play, .price, .map-svg, .map-pin, .fill--*) are
   REUSED from hero.css — this file must load after it. Only the source types
   this section introduces are defined here.
   ========================================================================== */

.rx{
  --rx-cycle:7.6s;

  /* Darkened purple for the two chips that carry white label text. At full
     --purple-bright those measure 4.46:1 behind an 11.5px bold label, just
     under AA; the same hue mixed toward navy clears it at 6.9:1. Identical
     device and identical ratio to --tg-pick-ink in section 4, so the two
     sections' primary chips stay the same colour. */
  --rx-purple-ink:#5A4FA8;

  position:relative;
  /* Opaque, unlike sections 2 and 3. Those sit inside `.cine`, which paints the
     page colour and the shared seam glow behind them. This section is outside
     that wrapper — and `.cine__floor`'s gradient tail overruns ~40px past the
     section above into this one, which would have shown as a soft band with a
     hard edge across the top of the copy. Section 4 solves it the same way. */
  background:var(--surface-page);
  /* In line with the delivered sections rather than above them: their top
     insets run 32–84px and their bottoms 76–120px, and 132px top would have
     opened a wider break here than anywhere else on the page. */
  padding-block:clamp(48px,6vw,84px) clamp(56px,7vw,100px);
  overflow:hidden;
  isolation:isolate;
}
@supports (overflow:clip){
  .rx{overflow:clip}
}
@supports (color:color-mix(in oklab,red,blue)){
  .rx{--rx-purple-ink:color-mix(in oklab,var(--purple-bright) 72%,var(--navy))}
}

/* ---- Background ---- */
.rx__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.rx__blob{filter:blur(30px)}
/* Both kept fully inside the section's own box — this block clips, so a blob
   hanging over an edge would be sliced along a line that travels through the
   viewport as the section scrolls past. */
.rx__blob--a{width:min(38vw,500px);aspect-ratio:1;top:2%;right:-8%;opacity:.34}
.rx__blob--b{width:min(32vw,420px);aspect-ratio:1;bottom:6%;left:-9%;opacity:.32}

/* ==========================================================================
   Copy
   Top-left rather than centred. Sections 2 and 3 are both centred stacks and
   section 4 is a two-column split; leading with a left-aligned block gives
   this one its own silhouette without inventing a new layout language.
   ========================================================================== */
.rx__copy{
  position:relative;
  z-index:2;
  max-width:52rem;
}
.rx__eyebrow-row{
  display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;
  margin-bottom:clamp(12px,1.6vw,18px);
}
.rx__status{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--lavender-pale);
  color:var(--navy);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.rx__status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--purple-bright);
}

.rx__title{
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
  text-wrap:balance;
}
.rx__title-accent{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.rx__sub{
  margin:clamp(14px,1.8vw,20px) 0 0;
  max-width:42rem;
  font-size:var(--fs-body-lg);
  line-height:var(--lh-body);
  color:var(--text-body);
  text-wrap:pretty;
}
.rx__sub b{font-weight:var(--fw-semibold);color:var(--navy)}

/* The benefit line is support, not a second headline — it stays small and
   quiet so the h2 keeps the copy focus. */
.rx__benefit{
  margin:clamp(12px,1.5vw,16px) 0 0;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:var(--fs-small);
  color:var(--purple);
}
.rx__benefit::before{
  content:"";width:18px;height:1.5px;border-radius:2px;
  background:var(--grad-underline);
}

/* ==========================================================================
   Scene — original, the link, your version
   ========================================================================== */
.rx__scene{
  position:relative;
  z-index:2;
  margin-top:var(--section-copy-gap);
}
/* Horizontal "before → after": the two boards read as one sentence left to
   right, with the link between them carrying the verb. */
.rx__figure{
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:start;
  gap:clamp(14px,2vw,30px);
}

.rx-board{
  position:relative;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
/* The copy sits a little lower than the source, so the pair reads as a step
   forward rather than two equal columns. */
.rx-board--yours{margin-top:clamp(18px,2.6vw,42px)}

.rx-board__label{
  padding:9px clamp(14px,1.4vw,20px) 0;
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-meta);
}
.rx-board__label--yours{color:var(--purple)}

.rx-board__head{
  display:flex;align-items:center;
  gap:clamp(12px,1.3vw,16px);
  padding:clamp(10px,1.1vw,14px) clamp(14px,1.4vw,20px) clamp(14px,1.4vw,18px);
  border-bottom:1px solid var(--border);
}
.rx-board--origin .rx-board__head{background:var(--grad-lavender)}
.rx-board--yours .rx-board__head{background:var(--grad-lavender)}

/* ---- Cover tile ---- */
.rx-cover{
  position:relative;
  flex:none;
  width:clamp(52px,5vw,66px);aspect-ratio:1;
  border-radius:16px;
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:var(--shadow-md);
}
.rx-cover--origin{background:linear-gradient(150deg,#FFE7E9,#FF7A85 62%,#0D0F3C)}
.rx-cover__skin{position:absolute;inset:0}
.rx-cover__skin--from{background:linear-gradient(150deg,#FFE7E9,#FF7A85 62%,#0D0F3C)}
.rx-cover__skin--to{background:linear-gradient(150deg,#E4ECFF,#735CFF 58%,#0D0F3C)}
.rx-cover__emoji{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:clamp(21px,2.1vw,27px);
  line-height:1;
}

.rx-board__meta{flex:1;min-width:0}
.rx-board__by{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--text-meta);
}
.rx-avatar{
  width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:9px;color:#fff;
}
.rx-avatar--anna{background:linear-gradient(160deg,#FFB3B9,#FF7A85)}
.rx-avatar--mia{background:linear-gradient(160deg,#C9BEF7,#735CFF)}

.rx-board__title{
  position:relative;
  margin-top:6px;
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  font-size:clamp(17px,1.55vw,21px);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
  line-height:1.2;
}
/* The two titles occupy the same box so the swap cannot reflow the header. */
.rx-title-swap{display:block}
.rx-title-swap--to{position:absolute;inset:0}

.rx-board__desc{
  margin-top:5px;
  font-size:12.5px;
  color:var(--text-body);
  line-height:1.4;
}

/* ---- Provenance ---- */
.rx-attrib{
  margin-top:6px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;
  color:var(--purple);
  line-height:1.35;
}
.rx-attrib b{font-weight:var(--fw-semibold);color:var(--purple)}
.rx-attrib svg{flex:none}

/* ---- Item grid ---- */
.rx-board__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(9px,.85vw,12px);
  padding:clamp(12px,1.2vw,16px);
}
.rx-card{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.rx-card__media{
  position:relative;
  height:clamp(66px,6.6vw,92px);
  overflow:hidden;
}
.rx-card__body{padding:9px 11px 11px}
.rx-card__title{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:clamp(12px,1.02vw,13.5px);
  color:var(--navy);
  line-height:1.25;
  /* Two lines maximum: the titles are real-world lengths and a third line
     would make the two grids different heights. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.rx-card__meta{
  margin-top:3px;
  font-size:11.5px;color:var(--text-meta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* The added item is a row card spanning both columns — the one structural
   difference between the two boards, so "layout changed too" is legible
   without moving anything that is shared. */
.rx-card--row{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;
}
.rx-card__media--row{
  flex:none;
  width:clamp(58px,5.6vw,74px);
  height:clamp(44px,4.2vw,54px);
  border-radius:10px;
}
.rx-card--row .rx-card__body{flex:1;min-width:0;padding:0}

/* ---- Source types this section adds ---- */
.fill--food{background:linear-gradient(160deg,#FFE7E9,#FF9AA3)}
.fill--loft{background:linear-gradient(155deg,#EDE8FF,#B8ABF2)}
.fill--flight{background:linear-gradient(150deg,#E4ECFF,#735CFF)}
.badge__mark--airbnb{color:#FF5A5F}
.badge__mark--site{color:#665EE6}
.badge__mark--flight{color:#0D0F3C}

/* ---- Kept / New tags ---- */
.rx-tag{
  position:absolute;
  top:7px;right:7px;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;
}
.rx-tag--kept{background:rgba(255,255,255,.94);color:var(--text-meta)}
/* Navy on pale lavender rather than purple-on-purple: at 9.5px the brighter
   pairing misses AA, and this is the label that carries the section's point. */
.rx-tag--new{background:var(--lavender-pale);color:var(--navy)}
.rx-card--row .rx-tag{top:50%;right:11px;transform:translateY(-50%)}

/* ---- Board footer: save vs remix, and share ---- */
.rx-board__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:0 clamp(14px,1.4vw,20px) clamp(13px,1.3vw,17px);
}
.rx-stat{font-size:11.5px;color:var(--text-meta)}
.rx-stat--diff{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  color:var(--purple);
  opacity:0;
}
.rx-acts{display:inline-flex;align-items:center;gap:8px}
.rx-act{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:11.5px;
  white-space:nowrap;
}
/* Save is the quiet one and Remix is the loud one on purpose — that contrast
   IS the section's argument, so it is carried by the two chips rather than by
   any explanatory copy. */
.rx-act--save{
  background:var(--bg-soft);
  border:1px solid var(--border);
  color:var(--text-meta);
}
.rx-act--remix{
  background:var(--rx-purple-ink);
  color:#fff;
  box-shadow:var(--glow-purple);
}
.rx-share{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;
  border-radius:var(--radius-pill);
  background:var(--rx-purple-ink);
  color:#fff;
  box-shadow:var(--glow-purple);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:11.5px;
  white-space:nowrap;
  opacity:0;
}

/* ==========================================================================
   The link between the boards
   ========================================================================== */
.rx-link{
  align-self:center;
  display:flex;flex-direction:column;align-items:center;
  gap:11px;
  padding-top:clamp(28px,4vw,64px);
  width:clamp(96px,10vw,140px);
}
.rx-link__rail{
  width:100%;height:0;
  border-top:1.8px dashed var(--lavender);
  opacity:.35;
}
.rx-cta{
  position:relative;
  display:grid;place-items:center;
  width:clamp(46px,4.4vw,58px);aspect-ratio:1;
  border-radius:50%;
  background:var(--purple-bright);
  box-shadow:var(--glow-purple);
}
/* A single soft ring that expands once and dissolves — an emphasis, not a
   pulse. It never loops on itself, so the scene stays calm. */
.rx-cta__ring{
  position:absolute;inset:0;
  border-radius:50%;
  border:2px solid var(--purple-bright);
  opacity:0;
}
.rx-link__caption{
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:clamp(11px,1vw,13px);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
  text-align:center;
  line-height:1.25;
  opacity:.55;
}

/* ==========================================================================
   Mini proof — the same move on other subjects
   ========================================================================== */
.rx-mini{
  position:relative;
  z-index:2;
  margin-top:clamp(38px,4.6vw,68px);
}
.rx-mini__head{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-small);
  color:var(--text-meta);
  text-align:center;
  margin-bottom:clamp(14px,1.6vw,20px);
}
ul.rx-mini__list{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);
}
.rx-mini__item{
  display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;
  padding:12px 16px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  font-size:12.5px;
  text-align:center;
}
.rx-mini__from{color:var(--text-meta)}
.rx-mini__arrow{color:var(--lavender);font-weight:700}
.rx-mini__to{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  color:var(--navy);
}

/* ==========================================================================
   Entrance — same contract as sections 2 and 4
   ========================================================================== */
.js .rx__copy,
.js .rx__scene,
.js .rx-mini{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.rx.is-in .rx__copy,
.rx.is-in .rx__scene,
.rx.is-in .rx-mini{opacity:1;transform:none}
.rx.is-in .rx__scene{transition-delay:.09s}
.rx.is-in .rx-mini{transition-delay:.16s}

/* ==========================================================================
   The transformation loop
   Every animation below is one cycle long and infinite, so they all share a
   single clock — no delays to keep in step, and one `play-state` switch
   starts and stops the whole scene.
   ========================================================================== */
.rx-cta,
.rx-cta__ring,
.rx-link__rail,
.rx-link__caption,
.rx-board--yours,
.rx-cover__skin--to,
.rx-cover__emoji--from,
.rx-cover__emoji--to,
.rx-title-swap--from,
.rx-title-swap--to,
.rx-attrib,
.rx-share,
.rx-stat--diff,
.rx-tag,
.rx-card--out,
.rx-card--in,
.rx-card--added{
  animation-duration:var(--rx-cycle);
  animation-timing-function:var(--ease-inout);
  animation-iteration-count:infinite;
  animation-play-state:paused;
}
.rx.is-live .rx-cta,
.rx.is-live .rx-cta__ring,
.rx.is-live .rx-link__rail,
.rx.is-live .rx-link__caption,
.rx.is-live .rx-board--yours,
.rx.is-live .rx-cover__skin--to,
.rx.is-live .rx-cover__emoji--from,
.rx.is-live .rx-cover__emoji--to,
.rx.is-live .rx-title-swap--from,
.rx.is-live .rx-title-swap--to,
.rx.is-live .rx-attrib,
.rx.is-live .rx-share,
.rx.is-live .rx-stat--diff,
.rx.is-live .rx-tag,
.rx.is-live .rx-card--out,
.rx.is-live .rx-card--in,
.rx.is-live .rx-card--added{animation-play-state:running}

/* Step 2 — the link takes emphasis */
.rx-cta{animation-name:rx-cta}
.rx-cta__ring{animation-name:rx-ring}
.rx-link__rail{animation-name:rx-rail}
.rx-link__caption{animation-name:rx-caption}
@keyframes rx-cta{
  0%,12%{transform:scale(1)}
  19%{transform:scale(1.07)}
  30%,100%{transform:scale(1)}
}
@keyframes rx-ring{
  0%,12%{opacity:0;transform:scale(.72)}
  19%{opacity:.8;transform:scale(1)}
  34%,100%{opacity:0;transform:scale(1.5)}
}
@keyframes rx-rail{
  0%{opacity:.35}
  22%{opacity:1}
  40%,93%{opacity:.5}
  100%{opacity:.35}
}
@keyframes rx-caption{
  0%,12%{opacity:.55}
  20%,32%{opacity:1}
  46%,93%{opacity:.7}
  100%{opacity:.55}
}

/* Step 3 — the copy forms; step 4 gives it its own accent.
   Two animations on one element: the arrival and the accent shift run on the
   same clock, so the border cannot drift out of step with the fade. */
.rx-board--yours{
  animation-name:rx-yours,rx-accent;
  will-change:transform,opacity;
}
@keyframes rx-yours{
  0%,24%{opacity:0;transform:translate3d(0,16px,0) scale(.972)}
  37%,93%{opacity:1;transform:none}
  100%{opacity:0;transform:translate3d(0,10px,0) scale(.986)}
}
@keyframes rx-accent{
  0%,40%{border-color:#E5E7F3;box-shadow:var(--shadow-lg)}
  52%,100%{
    border-color:var(--purple-bright);
    box-shadow:0 22px 56px -14px rgba(115,92,255,.42),var(--shadow-lg);
  }
}

/* Step 4 — cover, emoji and title become Mia's */
.rx-cover__skin--to{animation-name:rx-fade-in}
.rx-cover__emoji--to{animation-name:rx-fade-in}
.rx-title-swap--to{animation-name:rx-fade-in}
.rx-cover__emoji--from{animation-name:rx-fade-out}
.rx-title-swap--from{animation-name:rx-fade-out}
@keyframes rx-fade-in{
  0%,38%{opacity:0}
  48%,100%{opacity:1}
}
@keyframes rx-fade-out{
  0%,38%{opacity:1}
  48%,100%{opacity:0}
}

/* Step 4 — items leave, items arrive. The two swap slots are offset by a
   beat so the board changes in two moves rather than one blink. */
.rx-slot--swap{display:grid}
.rx-slot--swap > *{grid-area:1/1}
.rx-card--out{animation-name:rx-out-a}
.rx-card--in{animation-name:rx-in-a}
.rx-slot--swap:nth-of-type(2) .rx-card--out{animation-name:rx-out-b}
.rx-slot--swap:nth-of-type(2) .rx-card--in{animation-name:rx-in-b}
@keyframes rx-out-a{
  0%,41%{opacity:1;transform:scale(1)}
  50%,100%{opacity:0;transform:scale(.945)}
}
@keyframes rx-in-a{
  0%,43%{opacity:0;transform:scale(.945)}
  53%,100%{opacity:1;transform:scale(1)}
}
@keyframes rx-out-b{
  0%,46%{opacity:1;transform:scale(1)}
  55%,100%{opacity:0;transform:scale(.945)}
}
@keyframes rx-in-b{
  0%,48%{opacity:0;transform:scale(.945)}
  58%,100%{opacity:1;transform:scale(1)}
}

/* Step 4 — and one item that was never in the original */
.rx-card--added{animation-name:rx-added}
@keyframes rx-added{
  0%,54%{opacity:0;transform:translate3d(0,10px,0) scale(.975)}
  64%,100%{opacity:1;transform:none}
}

/* Tags follow the move they describe */
.rx-tag--kept{animation-name:rx-tag-kept}
.rx-tag--new{animation-name:rx-tag-new}
@keyframes rx-tag-kept{
  0%,44%{opacity:0}
  54%,100%{opacity:1}
}
@keyframes rx-tag-new{
  0%,56%{opacity:0}
  66%,100%{opacity:1}
}
.rx-stat--diff{animation-name:rx-diff}
@keyframes rx-diff{
  0%,58%{opacity:0}
  67%,100%{opacity:1}
}

/* Step 5 — provenance, then step 6 — share */
.rx-attrib{animation-name:rx-attrib}
.rx-share{animation-name:rx-share}
@keyframes rx-attrib{
  0%,63%{opacity:0;transform:translate3d(0,4px,0)}
  72%,100%{opacity:1;transform:none}
}
@keyframes rx-share{
  0%,72%{opacity:0;transform:translate3d(0,6px,0) scale(.97)}
  82%,100%{opacity:1;transform:none}
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:1100px){
  .rx__figure{gap:clamp(10px,1.4vw,20px)}
  .rx-link{width:clamp(76px,8vw,104px)}
  .rx-mini__item{flex-direction:column;gap:4px}
  .rx-mini__arrow{transform:rotate(90deg)}
}

/* Two boards side by side stop being readable well before phone widths — the
   cards become thumbnails. Below this they stack, and the link rotates to sit
   between them, so the story still runs original → remix → your version, just
   downward. */
@media (max-width:900px){
  .rx__figure{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(12px,2.4vw,18px);
    justify-items:stretch;
  }
  .rx-board--yours{margin-top:0}
  .rx-link{
    width:100%;
    flex-direction:row;
    justify-content:center;
    padding-top:0;
    gap:12px;
  }
  /* The rails become short connectors either side of the button rather than
     the long horizontal run they make on desktop. */
  .rx-link__rail{width:clamp(24px,8vw,64px)}
  .rx-link__caption{opacity:1}
  .rx__scene{margin-top:var(--section-copy-gap)}
}

@media (max-width:820px){
  ul.rx-mini__list{grid-template-columns:minmax(0,1fr);gap:8px}
  .rx-mini__item{flex-direction:row;gap:10px}
  .rx-mini__arrow{transform:none}
  .rx-board__grid{gap:8px;padding:11px}
  .rx-card__media{height:clamp(84px,26vw,120px)}
  .rx-card__title{font-size:13px}
  .rx-board__foot{padding:0 14px 14px}
}

@media (max-width:480px){
  .rx-board__foot{flex-direction:column;align-items:flex-start;gap:9px}
  .rx-acts{width:100%}
  .rx-act{flex:1;justify-content:center}
  .rx-cover{width:52px}
}

/* ==========================================================================
   Reduced motion
   No loop at all. The section renders its END state — Mia's board finished,
   credited and shareable — beside the original, so the difference the section
   is about is fully legible without a single moving pixel.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .js .rx__copy,
  .js .rx__scene,
  .js .rx-mini{opacity:1;transform:none;transition:none}

  .rx-cta,.rx-cta__ring,.rx-link__rail,.rx-link__caption,
  .rx-board--yours,.rx-cover__skin--to,.rx-cover__emoji--from,
  .rx-cover__emoji--to,.rx-title-swap--from,.rx-title-swap--to,
  .rx-attrib,.rx-share,.rx-stat--diff,.rx-tag,
  .rx-card--out,.rx-card--in,.rx-card--added,
  /* The staggered second slot is selected with :nth-of-type above, which
     outranks a bare class here — without matching that specificity those two
     cards would keep animating for someone who asked for no motion. */
  .rx-slot--swap:nth-of-type(2) .rx-card--out,
  .rx-slot--swap:nth-of-type(2) .rx-card--in{animation:none}

  .rx-board--yours{
    opacity:1;transform:none;
    border-color:var(--purple-bright);
    box-shadow:0 22px 56px -14px rgba(115,92,255,.42),var(--shadow-lg);
  }
  .rx-cta__ring{opacity:0}
  .rx-link__rail{opacity:.5}
  .rx-link__caption{opacity:1}

  /* The finished cover, title and item set — no cross-fade, just the result. */
  .rx-cover__skin--to{opacity:1}
  .rx-cover__emoji--from{opacity:0}
  .rx-cover__emoji--to{opacity:1}
  .rx-title-swap--from{opacity:0}
  .rx-title-swap--to{opacity:1}
  .rx-card--out{opacity:0}
  .rx-card--in{opacity:1}
  .rx-card--added{opacity:1}
  .rx-tag,.rx-stat--diff,.rx-attrib,.rx-share{opacity:1}
}