/* Rosie page hero, live motion showcase (see /assets/js/rosie-moves.js). Each model's canvas (and its overlay)
   sits exactly over the plot frame (same box as the SVG and the img); the current one cross-fades in when the
   plot has finished. */
.plot-frame > .rm-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  color: var(--ink); pointer-events: none; opacity: 0; transition: opacity .3s linear;
}
.plot-frame > .rosie-plot, .plot-frame > img { transition: opacity .3s linear; }
.plot-frame.is-live > .rm-canvas.is-cur { opacity: 1; }
.plot-frame.is-live > .rosie-plot, .plot-frame.is-live > img { opacity: 0; }

/* HUD: the page's micro-label style, quiet, bottom-right corner of the figure */
.rm .rm-hud { position: absolute; right: 0; bottom: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease .4s; }
.rm .rm-hud .lbl b { color: var(--ink); }
.rm.is-live .rm-hud { opacity: 1; }

/* model switch: a micro-label, then three ticket tabs, the pressed one inked */
.model-pick { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.model-pick[hidden] { display: none; }
.model-switch { display: flex; flex-wrap: wrap; gap: 0; width: fit-content; border: 1.5px solid var(--ink); }
.model-switch button {
  font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--ink); background: transparent; cursor: pointer;
  border: 0; border-left: 1.5px solid var(--ink); padding: .55rem .95rem; line-height: 1;
}
.model-switch button:first-child { border-left: 0; }
.model-switch button[aria-pressed="true"] { background: var(--ink); color: var(--ice); }
.model-switch button:hover:not([aria-pressed="true"]) { background: var(--yellow); }
.model-switch button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* pre-order: the price line of the model shown, then its Stripe button (href and name follow the switch) */
.hero-buy { display: grid; gap: .7rem; }
.hero-offer { font-size: .88rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }