/* ==========================================================================
   REVIEW CARDS (After Hours). Prefix rc-. The page's own shop: the review card on the
   night counter by the register, and the tap that opens Google's review page.
   Every scene is that tap doing something on Google:
     hero      the real card on the counter, a phone taps it, the review posts, 167 becomes 168
     #friction a race on one counter: the sad QR tent and its camera against the L-sign and one tap
     #formats  a cutaway of the counter: disc on the case glass, L-sign by the register, card at the till
     #rank     a disc stuck on the case glass; each tap adds one review and the row climbs past rivals
     #lifts    the lit LED lift board, with Carli's and Scott's receipts clipped under their columns
     #order    a jewelry case lit from inside the glass, price tags on a rod, the deal card
     #badges   real Big Dog badges hanging still on a lanyard rail; one tap opens the review page
     #book     a blank YOUR SHOP card on the counter; the phone that taps it opens our calendar
     #final    the L-sign in neon on the dark counter, five stars lighting one by one
   No lamp, no OPEN sign, no shop door (homepage only). Resting state = finished state;
   html.motion and the page script (.is-armed) rewind the scenes and play them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Shared bits: the drawn phone, the register, the review sheet
   -------------------------------------------------------------------------- */
.rc-ph {
  position: relative; padding: 0.42em; border: 3px solid var(--ah-950); border-radius: 1.5em;
  background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d);
  box-shadow: 6px 6px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.rc-ph::before { content: ""; position: absolute; left: -6px; top: 24%; width: 4px; height: 12%; border: 2px solid var(--ah-950); border-right: 0; border-radius: 3px 0 0 3px; background: #4a5568; }
.rc-ph__screen { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 19; border: 2px solid var(--ah-950); border-radius: 1.15em; background: #fdfcf8; color: var(--ah-ink); }
.rc-ph__island { position: absolute; z-index: 6; left: 50%; top: 2.6%; width: 30%; height: 3.4%; translate: -50% 0; border-radius: 999px; background: #05070c; }

/* the cash register (drawn); sized by its own font-size, everything inside in em */
.rc-reg { position: absolute; display: block; width: 10em; height: 12.4em; }
.rc-reg > span { position: absolute; display: block; }
.rc-reg__pole { left: 58%; top: 8%; width: 7%; height: 24%; border: 2px solid var(--ah-950); background: linear-gradient(90deg, #5d6a7d, #cfd7e1 50%, #6f7c90); }
.rc-reg__screen {
  left: 30%; top: -4%; width: 66%; height: 16%; display: grid !important; place-items: center;
  border: 2px solid var(--ah-950); border-radius: 0.35em; background: #04060b; color: #c9ecff;
  font: 800 1em/1 var(--ah-display); letter-spacing: 0.08em; white-space: nowrap; text-shadow: 0 0 5px rgba(47, 155, 255, 0.9);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8);
}
.rc-reg__paper { left: 6%; top: 10%; width: 20%; height: 22%; border: 2px solid var(--ah-950); border-bottom: 0; background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(11, 20, 36, 0.18) 5px 6px), var(--ah-cream); clip-path: polygon(0 12%, 25% 0, 50% 10%, 75% 0, 100% 10%, 100% 100%, 0 100%); }
.rc-reg__body { left: 0; right: 0; top: 30%; bottom: 17%; border: 2px solid var(--ah-950); border-radius: 0.7em 0.7em 0.25em 0.25em; background: linear-gradient(180deg, #34405e, #1f2840 70%, #182033); box-shadow: 5px 5px 0 rgba(3, 6, 13, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.12); }
.rc-reg__keys { position: absolute; left: 34%; right: 10%; top: 18%; bottom: 16%; background: radial-gradient(circle, #e8dfc6 0 34%, var(--ah-950) 36% 44%, transparent 47%) 0 0 / 25% 33.4%; }
.rc-reg__body::before { content: ""; position: absolute; left: 9%; top: 20%; width: 18%; height: 56%; border: 2px solid var(--ah-950); border-radius: 0.2em; background: var(--ah-blue); }
.rc-reg__drawer { left: -4%; right: -4%; bottom: 0; height: 19%; border: 2px solid var(--ah-950); border-radius: 0.25em; background: linear-gradient(180deg, #3f4a68, #262f48); box-shadow: 4px 4px 0 rgba(3, 6, 13, 0.55); }
.rc-reg__drawer::after { content: ""; position: absolute; left: 42%; top: 34%; width: 16%; height: 30%; border: 2px solid var(--ah-950); border-radius: 0.2em; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 60%, var(--ah-brass-lo)); }

/* the review screen inside a phone (Google's look, our ink) */
.rc-gs { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 17% 7% 0; text-align: center; }
.rc-gs__biz { font: 800 1.04em/1.1 var(--ah-body); color: var(--ah-ink); white-space: nowrap; }
.rc-gs__loc { margin-top: 0.3em; font-size: 0.78em; font-weight: 600; color: var(--ah-ink-2); }
.rc-gs__rate { display: inline-flex; align-items: center; gap: 0.25em; margin-top: 0.45em; font-size: 0.86em; font-weight: 700; color: var(--ah-ink-2); }
.rc-gs__rate b { color: var(--ah-ink); font-weight: 800; }
.rc-gs__rstar { color: #e7a614; }
.rc-gs__count { position: relative; display: inline-block; height: 1.25em; overflow: hidden; line-height: 1.25; }
.rc-gs__count > span { display: block; }
.rc-gs__was { position: absolute; left: 0; top: 0; opacity: 0; translate: 0 -100%; }
.rc-gs__now { color: var(--ah-blue-ink); font-weight: 800; }
.rc-gs__div { width: 100%; height: 2px; margin: 0.8em 0 0.7em; background: rgba(11, 20, 36, 0.14); }
.rc-gs__stars { display: flex; gap: 0.2em; }
.rc-gs__st { width: 1.55em; height: 1.55em; fill: var(--ah-gold); stroke: #9c7420; stroke-width: 1.2; stroke-linejoin: round; }
.rc-gs__field { position: relative; display: block; width: 100%; margin-top: 0.85em; padding: 0.55em 0.6em; border: 1.5px solid rgba(11, 20, 36, 0.28); border-radius: 0.5em; text-align: left; font-size: 0.68em; line-height: 1.3; color: #6a7383; }
.rc-gs__cursor { display: inline-block; width: 1.5px; height: 1.05em; margin-right: 2px; vertical-align: -0.15em; background: var(--ah-blue-ink); }
.rc-gs__acts { display: flex; justify-content: flex-end; gap: 0.6em; width: 100%; margin-top: 0.8em; font-size: 0.74em; font-weight: 800; }
.rc-gs__cancel { padding: 0.45em 0.5em; color: var(--ah-blue-ink); }
.rc-gs__post { padding: 0.45em 1em; border-radius: 999px; background: var(--ah-blue-deep); color: #fff; }
.rc-gs__toast {
  position: absolute; z-index: 5; left: 7%; right: 7%; bottom: 13%; display: flex; align-items: center; justify-content: center; gap: 0.35em;
  padding: 0.55em 0.4em; border: 2px solid var(--ah-950); border-radius: 0.7em; background: #11151d; color: #e8edf3;
  font-size: 0.74em; font-weight: 800; box-shadow: 3px 3px 0 var(--ah-blue);
}
.rc-gs__toast svg { width: 1.2em; height: 1.2em; fill: none; stroke: #5fd88a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.rc-ph__dark { position: absolute; inset: 0; z-index: 4; background: #05070c; opacity: 0; pointer-events: none; }

/* the small frameless review sheet that pops where a tap happened (formats, badges) */
.rc-mini {
  display: grid; gap: 0.35em; padding: 0.75em 0.85em 0.8em; border: 2px solid var(--ah-950); border-radius: 0.8em;
  background: #fdfcf8; color: var(--ah-ink); box-shadow: 4px 4px 0 var(--ah-blue); text-align: left;
}
.rc-mini__head { display: flex; align-items: center; gap: 0.4em; font-size: 0.8em; font-weight: 800; white-space: nowrap; }
.rc-mini__head svg { flex: none; width: 1.25em; height: 1.25em; }
.rc-mini__title { font: 900 1.25em/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; }
.rc-mini__stars { display: flex; gap: 0.18em; }
.rc-mini__stars svg { width: 1.4em; height: 1.4em; fill: var(--ah-gold); stroke: #9c7420; stroke-width: 1.2; stroke-linejoin: round; }

/* tap rings (the touch) */
.rc-tap__ring, .rc-race__ring, .rc-bk__ring, .rc-fmt__ripple, .rc-rack__ripple { position: absolute; display: block; border-radius: 50%; pointer-events: none; }

/* --------------------------------------------------------------------------
   1. HERO: the card on the counter by the register
   -------------------------------------------------------------------------- */
.rc-hero { --deco-at: 100% 0; }
.rc-hero__object { flex-direction: column; align-items: center; }
.rc-tap { position: relative; width: min(100%, 560px); margin: 0 auto; }
.rc-tap__scene { position: relative; container-type: inline-size; aspect-ratio: 100 / 84; }
.rc-tap__scene > * { position: absolute; }
.rc-tap__top {
  left: -1cqi; right: -1cqi; top: 58cqi; height: 12.5cqi; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 3.2cqi), linear-gradient(180deg, #4b301c, #7a5232 82%, #9a6a42);
}
.rc-tap__front {
  left: -1cqi; right: -1cqi; top: 70.5cqi; bottom: 0; border: 2px solid var(--ah-950); border-top-width: 3px; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.28), transparent 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 25cqi), linear-gradient(180deg, #4a2f1b, #2a190d);
  box-shadow: 6px 6px 0 rgba(3, 6, 13, 0.55);
}
.rc-tap .rc-reg { left: 2cqi; top: 26cqi; font-size: 2.8cqi; }
/* the phone's screen light on the counter: printed halftone dots, no blur */
.rc-tap__light {
  left: 30cqi; top: 22cqi; width: 56cqi; height: 50cqi; pointer-events: none;
  background: radial-gradient(circle, rgba(173, 229, 255, 0.6) 1.2px, transparent 1.7px) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 100%); mask-image: radial-gradient(closest-side, #000 18%, transparent 100%);
}
.rc-tap__shadow { left: 24cqi; top: 63.5cqi; width: 32cqi; height: 4.5cqi; border-radius: 50%; background: rgba(3, 6, 13, 0.6); }
.rc-tap__card { z-index: 2; left: 21cqi; top: 29cqi; width: 36cqi; height: auto; filter: drop-shadow(5px 6px 0 rgba(3, 6, 13, 0.55)); }
.rc-tap__string { z-index: 3; left: 9cqi; top: 58cqi; width: 15cqi; height: 14cqi; overflow: visible; }
.rc-tap__string path { fill: none; stroke: #e8dcc0; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rc-tap__tag {
  z-index: 3; left: 1.5cqi; top: 71.5cqi; padding: 0.5em 0.8em 0.45em 1.7em; border: 2px solid var(--ah-950); border-radius: 3px 10px 10px 3px;
  background: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 3px 3px 0 rgba(3, 6, 13, 0.6);
  font: 700 max(10.5px, 2.5cqi)/1.25 var(--ah-mono); letter-spacing: 0.02em; white-space: nowrap; rotate: -3deg;
}
.rc-tap__hole { position: absolute; left: 0.55em; top: 50%; width: 0.6em; height: 0.6em; margin-top: -0.3em; border-radius: 50%; background: #2a190d; box-shadow: 0 0 0 2px var(--ah-950); }
.rc-tap__ring { z-index: 4; left: 56cqi; top: 49cqi; width: 16cqi; height: 16cqi; margin: -8cqi 0 0 -8cqi; border: 3px solid var(--ah-neon-sky); box-shadow: 0 0 0 2px rgba(3, 6, 13, 0.6); opacity: 0.7; }
.rc-tap__ring--b { width: 26cqi; height: 26cqi; margin: -13cqi 0 0 -13cqi; opacity: 0.35; }
.rc-tap__phone { z-index: 5; left: 55cqi; top: -3cqi; width: 27cqi; font-size: 2.55cqi; transform-origin: 0 100%; rotate: 12deg; }
.rc-tap__phone .rc-ph { box-shadow: 7px 7px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.rc-tap__sample { top: -10px; right: -8px; }
.rc-tap__hit {
  z-index: 7; left: 16cqi; top: 0; right: 4cqi; bottom: 15cqi; padding: 0; border: 0; border-radius: 18px; background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rc-tap__hit:focus-visible { outline-offset: -3px; }
.rc-tap__cap { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; color: var(--ah-paper); font: 800 0.86rem/1.2 var(--ah-body); letter-spacing: 0.14em; text-transform: uppercase; }
.rc-tap__icon { width: 26px; height: 26px; overflow: visible; }
.rc-tap__icon .ah-neon__tube, .rc-tap__icon .ah-neon__core { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rc-tap__icon .ah-neon__tube { stroke: var(--ah-neon-pink); stroke-width: 3.4; }
.rc-tap__icon .ah-neon__core { stroke: var(--ah-neon-pink-core); stroke-width: 1.3; }
.rc-tap__etched { width: min(100%, 560px); margin: 8px auto 0; text-align: center; color: var(--ah-fog); font-size: 0.92rem; font-weight: 600; font-style: italic; text-wrap: balance; }

/* the tap, played: phone in, rings, screen on, five stars, Post, posted, 167 to 168 (about 3.5s) */
@media (prefers-reduced-motion: no-preference) {
  html.motion .rc-tap:not(.is-play) .rc-tap__phone { translate: 10cqi -6cqi; rotate: 18deg; }
  html.motion .rc-tap:not(.is-play) .rc-ph__dark { opacity: 1; }
  html.motion .rc-tap:not(.is-play) .rc-tap__light, html.motion .rc-tap:not(.is-play) .rc-tap__ring { opacity: 0; }
  html.motion .rc-tap:not(.is-play) .rc-gs__st { fill: #e4ded0; stroke: #b9b2a2; }
  html.motion .rc-tap:not(.is-play) .rc-gs__toast { opacity: 0; translate: 0 60%; }
  html.motion .rc-tap:not(.is-play) .rc-gs__was { opacity: 1; translate: 0 0; }
  html.motion .rc-tap:not(.is-play) .rc-gs__now { opacity: 0; translate: 0 100%; }
  .rc-tap.is-play .rc-tap__phone { animation: rc-hp-in 1.05s var(--ease-out) both; }
  .rc-tap.is-play .rc-ph__dark { animation: rc-out 0.3s 0.95s both; }
  .rc-tap.is-play .rc-tap__light { animation: rc-in 0.5s 0.85s both; }
  .rc-tap.is-play .rc-tap__ring--a { animation: rc-ring 1s var(--ease-out) 0.78s both; }
  .rc-tap.is-play .rc-tap__ring--b { animation: rc-ring-b 1.1s var(--ease-out) 0.9s both; }
  .rc-tap.is-play .rc-gs__st { animation: rc-star 0.42s var(--ease-back) var(--d) both; }
  .rc-tap.is-play .rc-gs__cursor { animation: rc-blink 0.5s steps(2) 2.3s 3 both; }
  .rc-tap.is-play .rc-gs__post { animation: rc-press 0.3s 2.7s both; }
  .rc-tap.is-play .rc-gs__toast { animation: rc-drop 0.45s var(--ease-back) 2.95s both; }
  .rc-tap.is-play .rc-gs__was { animation: rc-roll-out 0.35s 3.15s both; }
  .rc-tap.is-play .rc-gs__now { animation: rc-roll-in 0.35s var(--ease-back) 3.15s both; }
}
@keyframes rc-hp-in { 0% { translate: 10cqi -6cqi; rotate: 18deg; } 72% { translate: -0.5cqi 0.7cqi; rotate: 11deg; } 100% { translate: 0 0; rotate: 12deg; } }
@keyframes rc-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rc-ring { 0% { opacity: 0; scale: 0.25; } 25% { opacity: 1; } 100% { opacity: 0.7; scale: 1; } }
@keyframes rc-ring-b { 0% { opacity: 0; scale: 0.3; } 30% { opacity: 0.8; } 100% { opacity: 0.35; scale: 1; } }
@keyframes rc-star { 0% { fill: #e4ded0; stroke: #b9b2a2; scale: 0.6; } 60% { scale: 1.25; } 100% { fill: var(--ah-gold); stroke: #9c7420; scale: 1; } }
@keyframes rc-blink { 50% { opacity: 0; } }
@keyframes rc-press { 50% { scale: 0.86; } }
@keyframes rc-drop { from { opacity: 0; translate: 0 60%; } to { opacity: 1; translate: 0 0; } }
@keyframes rc-roll-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -100%; } }
@keyframes rc-roll-in { from { opacity: 0; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
@keyframes rc-pop { 0% { opacity: 0; scale: 0.8; } 60% { opacity: 1; scale: 1.04; } 100% { opacity: 1; scale: 1; } }
@keyframes rc-ping { 0% { opacity: 0; scale: 0.2; } 20% { opacity: 1; } 100% { opacity: 0; scale: 1.25; } }

/* phones and tablets: crumbs, kicker, headline, then the counter scene with its 'actually ship' line, the first
   lead line and the Apply button (so the headline, the button and the tap share the first screen); the rest under it */
@media (max-width: 999px) {
  .rc-hero .ah-phero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .rc-hero .ah-phero__copy, .rc-hero .rc-hero__acts { display: contents; }
  .rc-hero .ah-crumbs, .rc-hero .rc-hero__kicker { align-self: flex-start; }
  .rc-hero .ah-phero__h { margin-bottom: 4px; }
  .rc-hero__object { display: contents; }
  .rc-tap { order: 1; margin: 14px auto 0; }
  .rc-tap__etched { order: 2; margin: 6px auto 14px; }
  .rc-hero__lead--1 { order: 3; margin-bottom: 14px; }
  .rc-hero__go { order: 4; align-self: flex-start; }
  .rc-hero .rc-hero__lead--2 { order: 5; margin-top: 24px; }
  .rc-hero__lead--3 { order: 6; margin-bottom: 22px; }
  .rc-hero__more { order: 7; align-self: flex-start; }
  .rc-hero__note { order: 8; }
  .rc-tap { width: min(100%, 440px); }
}
@media (max-width: 600px) {
  .rc-hero .ah-crumbs { margin-bottom: 16px; }
  .rc-hero .rc-hero__kicker { margin-bottom: 12px; }
  .rc-hero .ah-phero__h { font-size: clamp(2.1rem, 10vw, 2.6rem); }
  .rc-hero__lead { font-size: 1.06rem; line-height: 1.5; }
  .rc-tap { width: min(100%, 330px); }
  .rc-tap__scene { aspect-ratio: 100 / 82; }
  .rc-tap__cap { margin-top: 12px; font-size: 0.78rem; }
  .rc-tap__etched { font-size: 0.86rem; }
}

/* --------------------------------------------------------------------------
   2. FRICTION: the race on one counter
   -------------------------------------------------------------------------- */
.rc-qr .ah-head { margin-bottom: clamp(26px, 3.4vw, 44px); }
.rc-race {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "mid mid" "qr tap"; gap: 22px clamp(14px, 3vw, 40px);
  max-width: 940px; margin: 0 auto; padding: clamp(16px, 2.6vw, 30px) clamp(12px, 2.6vw, 30px) clamp(18px, 2.6vw, 28px);
  border: 2px solid var(--ah-950); border-radius: 14px;
  background: radial-gradient(circle, rgba(173, 229, 255, 0.07) 1.3px, transparent 1.7px) 0 0 / 12px 12px, linear-gradient(180deg, #0d1830, #0a1222);
  box-shadow: 8px 8px 0 rgba(3, 6, 13, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.06);
}
.rc-race__sample { top: -12px; right: 18px; }
.rc-race__mid { grid-area: mid; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding-top: 4px; }
.rc-race__go[hidden] { display: none; }
html:not(.js) .rc-race, .rc-race.is-still { grid-template-areas: "qr tap"; }
html:not(.js) .rc-race__mid, .rc-race.is-still .rc-race__mid { display: none; }
.rc-race__go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rc-race__lane { min-width: 0; display: grid; grid-template-rows: auto auto auto; justify-items: center; align-content: start; }
.rc-race__lane--qr { grid-area: qr; }
.rc-race__lane--tap { grid-area: tap; }
.rc-race__label { margin-bottom: 10px; }
.rc-race__scene { position: relative; width: 100%; container-type: inline-size; aspect-ratio: 1 / 1.08; }
.rc-race__scene > * { position: absolute; display: block; }
.rc-race__counter {
  left: -10cqi; right: -10cqi; bottom: 0; height: 15cqi; border-top: 2px solid var(--ah-950);
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.22), transparent 3px), repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px), linear-gradient(180deg, #6a4428, #3a2414);
}
.rc-race__lane--qr .rc-race__counter { right: -16cqi; }
.rc-race__lane--tap .rc-race__counter { left: -16cqi; }
/* the sad tent card, curling at the corner */
.rc-tent { left: 4cqi; bottom: 12cqi; width: 42cqi; height: 50cqi; }
.rc-tent__face {
  position: absolute; inset: 0; display: grid; justify-items: center; align-content: start; gap: 1.2cqi; padding: 4cqi 3cqi 0;
  border: 2px solid var(--ah-950); border-radius: 2px; background: #e9dfc4; background-image: var(--ah-fiber); color: #3d4558;
  box-shadow: 4px 4px 0 rgba(3, 6, 13, 0.55); transform: perspective(300px) rotateX(6deg); transform-origin: 50% 100%;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 84% 100%, 0 100%);
}
.rc-tent__print { font: 800 3.6cqi/1.05 var(--ah-mono); letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.rc-tent__qr { width: 24cqi; height: 24cqi; fill: #3d4558; opacity: 0.85; }
.rc-tent__scrawl { font: 400 3.6cqi/1.1 var(--ah-hand); color: var(--ah-blue-ink); rotate: -5deg; white-space: nowrap; }
.rc-tent__ring { position: absolute; left: 14%; top: 54%; width: 34%; height: 18%; border: 1.5px solid rgba(90, 60, 30, 0.3); border-radius: 50%; }
.rc-tent__curl { position: absolute; right: 0; bottom: 0; width: 16%; height: 18%; background: linear-gradient(135deg, #f7f0dc 0 48%, #b8a984 52%); border-left: 2px solid var(--ah-950); border-top: 2px solid var(--ah-950); border-radius: 0 0 0 80%; }
.rc-tent__back { position: absolute; left: 6%; right: -8%; top: 6%; bottom: 0; z-index: -1; border: 2px solid var(--ah-950); background: #b9ab88; transform: skewX(-8deg); transform-origin: 0 100%; }
/* the two phones */
.rc-race__phone { width: 37cqi; font-size: 2.15cqi; }
.rc-race__phone .rc-ph { padding: 0.36em; border-radius: 1.2em; box-shadow: 4px 4px 0 rgba(3, 6, 13, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.rc-race__phone .rc-ph__screen { border-radius: 0.95em; }
.rc-race__phone--qr { right: 4cqi; bottom: 15cqi; rotate: -5deg; }
.rc-race__phone--tap { right: 2cqi; bottom: 17cqi; rotate: -8deg; transform-origin: 0 100%; }
.rc-race__lsign { left: 3cqi; bottom: 11cqi; width: 48cqi; height: auto; filter: drop-shadow(4px 5px 0 rgba(3, 6, 13, 0.55)); }
.rc-race__ring { z-index: 3; left: 53cqi; top: 74cqi; width: 16cqi; height: 16cqi; margin: -8cqi 0 0 -8cqi; border: 2.5px solid var(--ah-neon-sky); box-shadow: 0 0 0 2px rgba(3, 6, 13, 0.6); opacity: 0.7; }
.rc-race__ring--b { width: 26cqi; height: 26cqi; margin: -13cqi 0 0 -13cqi; opacity: 0.35; }
/* the camera screen: the viewfinder, the focus box, the QR banner */
.rc-cam { background: #05070c; color: #fff; }
.rc-cam__vf { position: absolute; left: 0; right: 0; top: 0; bottom: 24%; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #4a3c2a, #1b140c 80%); }
.rc-cam__scene { position: absolute; inset: 0; display: grid; place-items: center; }
.rc-cam__card { display: grid; justify-items: center; gap: 0.35em; width: 62%; padding: 0.7em 0.5em; border-radius: 2px; background: #e9dfc4; color: #3d4558; rotate: -4deg; box-shadow: 0.25em 0.25em 0 rgba(0, 0, 0, 0.45); }
.rc-cam__print { font: 800 0.62em/1 var(--ah-mono); letter-spacing: 0.06em; white-space: nowrap; }
.rc-cam__qr { width: 62%; aspect-ratio: 1; fill: #3d4558; }
.rc-cam__scrawl { font: 400 0.66em/1 var(--ah-hand); color: var(--ah-blue-ink); white-space: nowrap; }
.rc-cam__focus { position: absolute; left: 50%; top: 46%; width: 52%; aspect-ratio: 1; translate: -50% -50%; border: 2px solid #f7d34a; border-radius: 4px; -webkit-mask: linear-gradient(#000 0 0) 0 0 / 28% 28% no-repeat, linear-gradient(#000 0 0) 100% 0 / 28% 28% no-repeat, linear-gradient(#000 0 0) 0 100% / 28% 28% no-repeat, linear-gradient(#000 0 0) 100% 100% / 28% 28% no-repeat; mask: linear-gradient(#000 0 0) 0 0 / 28% 28% no-repeat, linear-gradient(#000 0 0) 100% 0 / 28% 28% no-repeat, linear-gradient(#000 0 0) 0 100% / 28% 28% no-repeat, linear-gradient(#000 0 0) 100% 100% / 28% 28% no-repeat; }
.rc-cam__banner {
  position: absolute; left: 8%; right: 8%; bottom: 7%; display: flex; align-items: center; gap: 0.45em; padding: 0.45em 0.6em;
  border-radius: 0.6em; background: #f7d34a; color: #1a1406; font-size: 0.72em; font-weight: 800; line-height: 1.15;
}
.rc-cam__banner svg { flex: none; width: 1.6em; height: 1.6em; fill: #1a1406; }
.rc-cam__banner small { display: block; font-size: 0.82em; font-weight: 600; }
.rc-cam__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; display: grid; align-content: center; justify-items: center; gap: 0.5em; background: #05070c; }
.rc-cam__modes { font-size: 0.5em; font-weight: 700; letter-spacing: 0.06em; color: #9aa3b2; white-space: nowrap; }
.rc-cam__modes b { color: #f7d34a; font-weight: 800; }
.rc-cam__row { display: flex; align-items: center; justify-content: space-between; width: 80%; }
.rc-cam__thumb { width: 1.6em; height: 1.6em; border-radius: 0.3em; background: #3a2e20; border: 1.5px solid #9aa3b2; }
.rc-cam__shutter { width: 2.8em; height: 2.8em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.18em #05070c, 0 0 0 0.34em #fff; }
.rc-cam__flip { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: #2a2f3a; }
.rc-cam__flip svg { width: 1.1em; height: 1.1em; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the tap phone: wallpaper, then Google's rating sheet slides up */
.rc-ph__wall { position: absolute; inset: 0; background: radial-gradient(circle, rgba(173, 229, 255, 0.16) 1.2px, transparent 1.6px) 0 0 / 8px 8px, linear-gradient(170deg, #17284a, #070d1a); }
.rc-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74%; display: flex; flex-direction: column; align-items: center; gap: 0.55em; padding: 0.7em 0.8em 0.9em;
  border-top: 2px solid var(--ah-950); border-radius: 1em 1em 0 0; background: #fdfcf8; color: var(--ah-ink);
}
.rc-sheet__bar { width: 22%; height: 0.32em; border-radius: 999px; background: rgba(11, 20, 36, 0.22); }
.rc-sheet__head { display: flex; align-items: center; gap: 0.45em; align-self: stretch; }
.rc-sheet__g { flex: none; width: 1.7em; height: 1.7em; }
.rc-sheet__name { display: grid; font-size: 0.82em; font-weight: 800; line-height: 1.15; text-align: left; }
.rc-sheet__sub { font-size: 0.76em; font-weight: 600; color: var(--ah-ink-2); }
.rc-sheet__title { margin-top: 0.3em; font: 900 1.3em/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.rc-sheet__stars { display: flex; gap: 0.25em; }
.rc-sheet__stars svg { width: 1.55em; height: 1.55em; fill: none; stroke: #8b93a3; stroke-width: 1.6; stroke-linejoin: round; }
.rc-sheet__field { align-self: stretch; padding: 0.5em 0.55em; border: 1.5px solid rgba(11, 20, 36, 0.26); border-radius: 0.45em; font-size: 0.62em; line-height: 1.3; color: #6a7383; text-align: left; }
.rc-sheet__post { align-self: flex-end; padding: 0.4em 1em; border-radius: 999px; background: var(--ah-blue-deep); color: #fff; font-size: 0.72em; font-weight: 800; }
/* the readouts under each lane: the LED stopwatch and the caption */
.rc-race__read { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; text-align: center; }
.rc-race__clock { min-width: 4.2ch; }
.rc-race__cap { max-width: 22em; color: var(--ah-paper); font-size: 1rem; font-weight: 700; line-height: 1.4; }
.rc-race__lane--qr .rc-race__cap { color: #ffc2d8; }
.rc-qr__punch { margin-top: clamp(34px, 4.4vw, 56px); }
.rc-after { max-width: 40em; margin: 18px auto 0; text-align: center; color: var(--ah-fog); font-size: 1.05rem; }
.rc-after p + p { margin-top: 6px; }
.rc-after a { color: var(--ah-sky); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .rc-race { gap: 16px 12px; }
  .rc-race__cap { font-size: 0.9rem; }
  .rc-race__label { font-size: 0.66rem; letter-spacing: 0.1em; padding: 5px 8px 4px; }
}
/* the race, armed and played by the page script (.is-armed only when motion is allowed) */
.rc-race.is-armed .rc-race__cap { opacity: 0; transition: opacity 0.3s; }
.rc-race.is-armed.is-open .rc-race__lane--tap .rc-race__cap, .rc-race.is-armed.is-qrdone .rc-race__lane--qr .rc-race__cap { opacity: 1; }
.rc-race.is-armed:not(.is-touch) .rc-race__phone--tap { translate: 4cqi -9cqi; rotate: -4deg; }
.rc-race.is-armed .rc-race__phone--tap { transition: translate 0.6s var(--ease-out), rotate 0.6s var(--ease-out); }
.rc-race.is-armed:not(.is-touch) .rc-race__ring { opacity: 0; }
.rc-race.is-armed.is-touch .rc-race__ring--a { animation: rc-ring 0.9s var(--ease-out) both; }
.rc-race.is-armed.is-touch .rc-race__ring--b { animation: rc-ring-b 1s var(--ease-out) 0.12s both; }
.rc-race.is-armed:not(.is-open) .rc-sheet { translate: 0 105%; }
.rc-race.is-armed .rc-sheet { transition: translate 0.4s var(--ease-out); }
.rc-race.is-armed:not(.is-banner) .rc-cam__banner { opacity: 0; translate: 0 40%; }
.rc-race.is-armed .rc-cam__banner { transition: opacity 0.3s, translate 0.35s var(--ease-back); }
.rc-race.is-armed:not(.is-lock) .rc-cam__card { box-shadow: 0.9em 0.3em 0 rgba(233, 223, 196, 0.32), -0.7em -0.2em 0 rgba(233, 223, 196, 0.22); }
.rc-race.is-armed:not(.is-lock) .rc-cam__card > * { text-shadow: 0.55em 0.2em 0 rgba(61, 69, 88, 0.45); opacity: 0.7; }
.rc-race.is-armed.is-run:not(.is-lock) .rc-cam__scene { animation: rc-shake 0.7s steps(4) infinite; }
.rc-race.is-armed.is-run:not(.is-lock) .rc-cam__focus { animation: rc-hunt 2.2s ease-in-out infinite; }
.rc-race.is-armed.is-lock .rc-cam__focus { border-color: #5fd88a; }
@keyframes rc-shake { 0% { translate: 0 0; } 25% { translate: 3% -2%; } 50% { translate: -2% 2%; } 75% { translate: 2% 3%; } 100% { translate: 0 0; } }
@keyframes rc-hunt { 0%, 100% { translate: -50% -50%; scale: 1; } 30% { translate: -30% -70%; scale: 0.7; } 60% { translate: -72% -38%; scale: 1.15; } }

/* --------------------------------------------------------------------------
   3. FORMATS: the cutaway of the counter at night
   -------------------------------------------------------------------------- */
.rc-fmt__head { margin-bottom: clamp(26px, 3.6vw, 46px); }
.rc-fmt__head a, .rc-rank .ah-copy a { color: var(--ah-sky); font-weight: 700; text-underline-offset: 3px; }
.rc-fmt__scene {
  --dh: 44cqi; --sp-disc-w: 16cqi; --sp-disc-b: 9cqi; --sp-sign-w: 12.5cqi; --sp-card-w: 13.5cqi; --sp-b: 18.5cqi;
  position: relative; container-type: inline-size; display: grid; grid-template-columns: 34fr 33fr 33fr; grid-template-rows: auto auto; column-gap: 0;
  max-width: 1100px; margin: 0 auto;
}
.rc-fmt__bg { grid-column: 1 / -1; grid-row: 1; position: relative; height: var(--dh); }
.rc-fmt__bg > span { position: absolute; display: block; }
/* the jewelry case on the left: steel rail, glass front, a lit inside, wood plinth */
.rc-fmt__case { left: 0; width: 34%; top: 19cqi; bottom: 0; }
.rc-fmt__rail { position: absolute; left: -0.6cqi; right: -0.6cqi; top: 0; height: 2.2cqi; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, var(--ah-steel-a), var(--ah-steel-b) 60%, var(--ah-steel-c)); z-index: 2; }
.rc-fmt__glass {
  position: absolute; left: 0; right: 0; top: 2.2cqi; bottom: 6cqi; overflow: hidden; border: 2px solid var(--ah-950); border-top: 0;
  background: radial-gradient(circle, rgba(255, 236, 190, 0.18) 1.2px, transparent 1.6px) 0 0 / 8px 8px, linear-gradient(180deg, #1c2340, #121733 55%, #2a1f3c);
}
.rc-fmt__glass i { position: absolute; top: -10%; bottom: -10%; width: 8%; background: rgba(200, 230, 255, 0.1); rotate: 18deg; }
.rc-fmt__glass i:nth-child(1) { left: 12%; } .rc-fmt__glass i:nth-child(2) { left: 26%; width: 3%; } .rc-fmt__glass i:nth-child(3) { left: 70%; width: 5%; }
.rc-fmt__plinth { position: absolute; left: -0.6cqi; right: -0.6cqi; bottom: 0; height: 6cqi; border: 2px solid var(--ah-950); background: linear-gradient(180deg, rgba(255, 220, 170, 0.2), transparent 3px), linear-gradient(180deg, #5a3a22, #2e1c0f); }
/* the counter: top and front */
.rc-fmt__top { left: 33.6%; right: 0; top: 21cqi; height: 6cqi; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 0 6px 0 0; background: repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 1.6cqi), linear-gradient(180deg, #4b301c, #7a5232 82%, #9a6a42); }
.rc-fmt__front { left: 33.6%; right: 0; top: 27cqi; bottom: 0; border: 2px solid var(--ah-950); border-top-width: 3px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.26), transparent 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 11cqi), linear-gradient(180deg, #4a2f1b, #2a190d); }
.rc-fmt .rc-reg--fmt { left: 48%; top: 5.4cqi; font-size: 1.4cqi; }
/* the three spots: the object up in the drawing, its tag hanging under the counter */
.rc-fmt__spot {
  grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; justify-items: center; position: relative; z-index: 3; min-width: 0;
  padding: 0 1.2cqi; border: 0; background: none; color: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rc-fmt__spot--disc { grid-column: 1; }
.rc-fmt__spot--sign { grid-column: 2; }
.rc-fmt__spot--card { grid-column: 3; }
.rc-fmt__obj { grid-row: 1; align-self: end; display: block; transition: translate 0.35s var(--ease-back); }
.rc-fmt__obj img { width: 100%; height: auto; filter: drop-shadow(3px 4px 0 rgba(3, 6, 13, 0.55)); }
.rc-fmt__spot--disc .rc-fmt__obj { width: var(--sp-disc-w); margin-bottom: var(--sp-disc-b); }
.rc-fmt__spot--disc .rc-fmt__obj img { filter: drop-shadow(2px 2px 0 rgba(3, 6, 13, 0.5)); }
.rc-fmt__spot--sign .rc-fmt__obj { width: var(--sp-sign-w); margin-bottom: var(--sp-b); justify-self: start; margin-left: 2cqi; }
.rc-fmt__spot--card .rc-fmt__obj { width: var(--sp-card-w); margin-bottom: var(--sp-b); justify-self: end; margin-right: 4cqi; }
.rc-fmt__tag {
  grid-row: 2; position: relative; display: block; width: min(100%, 300px); margin-top: 26px; padding: 14px 14px 13px;
  border: 2px solid var(--ah-950); border-radius: 6px; background: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 4px 4px 0 var(--ah-blue); rotate: -1deg; transition: box-shadow 0.2s, translate 0.25s var(--ease-back);
}
.rc-fmt__spot--sign .rc-fmt__tag { rotate: 0.8deg; }
.rc-fmt__spot--card .rc-fmt__tag { rotate: -0.6deg; }
.rc-fmt__tag::before { content: ""; position: absolute; left: 50%; top: -28px; width: 2px; height: 26px; background: #e8dcc0; }
.rc-fmt__tag::after { content: ""; position: absolute; left: 50%; top: 7px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: #2a190d; box-shadow: 0 0 0 2px var(--ah-950); }
.rc-fmt__name { display: inline; margin-top: 8px; font: 900 1.28rem/1 var(--ah-display); letter-spacing: 0.05em; }
.rc-fmt__dot { margin: 0 0.35em; color: var(--ah-blue-ink); font-weight: 900; }
.rc-fmt__job { font-weight: 800; font-size: 0.98rem; }
.rc-fmt__spec { display: block; margin-top: 6px; color: var(--ah-ink-2); font: 700 0.8rem/1.3 var(--ah-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.rc-fmt__name::before { content: ""; display: block; height: 10px; }
.rc-fmt__spot:hover .rc-fmt__tag { translate: 0 -2px; box-shadow: 6px 6px 0 var(--ah-blue); }
.rc-fmt__spot[aria-pressed="true"] .rc-fmt__tag { box-shadow: 5px 5px 0 var(--ah-neon-pink); }
.rc-fmt__spot[aria-pressed="true"] .rc-fmt__obj { translate: 0 -0.8cqi; }
.rc-fmt__spot:focus-visible { outline: none; }
.rc-fmt__spot:focus-visible .rc-fmt__tag { outline: 3px solid var(--ah-sky); outline-offset: 4px; }
/* what the tap opens: the sheet pops beside the spot, a ring where the tap landed */
.rc-fmt__pop { position: absolute; z-index: 5; left: 0; top: 0; width: 22cqi; font-size: max(10px, 1.5cqi); pointer-events: none; translate: var(--px, 44cqi) var(--py, 0.5cqi); }
.rc-fmt__ripple { z-index: 4; left: 0; top: 0; width: 10cqi; height: 10cqi; margin: -5cqi 0 0 -5cqi; border: 3px solid var(--ah-neon-sky); box-shadow: 0 0 0 2px rgba(3, 6, 13, 0.6); opacity: 0; translate: var(--rx, 43cqi) var(--ry, 15cqi); }
.rc-fmt__scene[data-on="2"] { --px: 6cqi; --py: 1cqi; --rx: 17cqi; --ry: 29cqi; }
.rc-fmt__scene[data-on="1"] { --px: 23cqi; --py: 1cqi; --rx: 42.5cqi; --ry: 14cqi; }
.rc-fmt__scene[data-on="0"] { --px: 74cqi; --py: 0cqi; --rx: 85cqi; --ry: 19cqi; }
.rc-fmt__sample { top: -12px; right: -10px; }
.rc-fmt__after { margin-top: clamp(26px, 3vw, 40px); }
@media (prefers-reduced-motion: no-preference) {
  .rc-fmt__scene.is-pop .rc-fmt__pop .rc-mini { animation: rc-pop 0.42s var(--ease-back) both; }
  .rc-fmt__scene.is-pop .rc-fmt__pop .rc-mini__stars svg { animation: rc-star 0.36s var(--ease-back) both; }
  .rc-fmt__scene.is-pop .rc-fmt__pop .rc-mini__stars svg:nth-child(2) { animation-delay: 0.1s; }
  .rc-fmt__scene.is-pop .rc-fmt__pop .rc-mini__stars svg:nth-child(3) { animation-delay: 0.2s; }
  .rc-fmt__scene.is-pop .rc-fmt__pop .rc-mini__stars svg:nth-child(4) { animation-delay: 0.3s; }
  .rc-fmt__scene.is-pop .rc-fmt__pop .rc-mini__stars svg:nth-child(5) { animation-delay: 0.4s; }
  .rc-fmt__scene.is-pop .rc-fmt__ripple { animation: rc-ping 0.9s var(--ease-out) both; }
}
/* phones: a taller drawing, bigger objects, the sheet over the middle; tags stay one per column */
@media (max-width: 760px) {
  .rc-fmt__scene { --dh: 78cqi; --sp-disc-w: 25cqi; --sp-disc-b: 15cqi; --sp-sign-w: 22cqi; --sp-card-w: 23cqi; --sp-b: 32cqi; }
  .rc-fmt__case { top: 33cqi; }
  .rc-fmt__rail { height: 3cqi; }
  .rc-fmt__glass { top: 3cqi; bottom: 10cqi; }
  .rc-fmt__plinth { height: 10cqi; }
  .rc-fmt__top { top: 36cqi; height: 10cqi; }
  .rc-fmt__front { top: 46cqi; }
  .rc-fmt .rc-reg--fmt { left: 50%; top: 7cqi; font-size: 2.3cqi; }
  .rc-fmt__spot--sign .rc-fmt__obj { margin-left: 0; }
  .rc-fmt__spot--card .rc-fmt__obj { margin-right: 0; }
  .rc-fmt__spot { padding: 0 1cqi; }
  .rc-fmt__tag { margin-top: 22px; padding: 12px 8px 10px; }
  .rc-fmt__name { font-size: 1.02rem; display: block; }
  .rc-fmt__dot { display: none; }
  .rc-fmt__job { display: block; margin-top: 4px; font-size: 0.86rem; line-height: 1.25; }
  .rc-fmt__spec { font-size: 0.7rem; letter-spacing: 0.02em; }
  .rc-fmt__pop { width: 40cqi; font-size: max(10px, 2.6cqi); }
  .rc-fmt__ripple { width: 16cqi; height: 16cqi; margin: -8cqi 0 0 -8cqi; }
  .rc-fmt__scene[data-on="2"] { --px: 1cqi; --py: 4cqi; --rx: 17cqi; --ry: 50cqi; }
  .rc-fmt__scene[data-on="1"] { --px: 25cqi; --py: 0cqi; --rx: 46cqi; --ry: 31cqi; }
  .rc-fmt__scene[data-on="0"] { --px: 58cqi; --py: 0cqi; --rx: 84cqi; --ry: 34cqi; }
}

/* --------------------------------------------------------------------------
   4. RANK: the disc stuck on the case glass, the local pack on Google's results card
   -------------------------------------------------------------------------- */
.rc-rank__scene { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "case phone" "foot foot"; align-items: center; gap: 22px 0; width: 100%; max-width: 600px; margin: 0 auto; }
.rc-rank__case { grid-area: case; position: relative; z-index: 1; height: 300px; margin-right: -14px; }
.rc-rank__case > span { position: absolute; display: block; }
.rc-rank__rail { left: -6px; right: -6px; top: 0; height: 14px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, var(--ah-steel-a), var(--ah-steel-b) 60%, var(--ah-steel-c)); z-index: 2; }
.rc-rank__glass { left: 0; right: 0; top: 14px; bottom: 34px; overflow: hidden; border: 2px solid var(--ah-950); border-top: 0; background: radial-gradient(circle, rgba(255, 236, 190, 0.16) 1.2px, transparent 1.6px) 0 0 / 8px 8px, linear-gradient(180deg, #1c2340, #121733 60%, #2a1f3c); z-index: 1; }
.rc-rank__glass i { position: absolute; top: -10%; bottom: -10%; width: 14%; left: 14%; background: rgba(200, 230, 255, 0.1); rotate: 18deg; z-index: 3; }
.rc-rank__glass i + i { left: 66%; width: 6%; }
.rc-rank__trays { left: 8%; right: 8%; bottom: 46px; height: 52px; display: flex !important; gap: 8%; z-index: 1; }
.rc-rank__trays i { flex: 1; border: 2px solid var(--ah-950); border-radius: 4px 4px 0 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 5px), #2c2150; }
.rc-rank__base { left: -6px; right: -6px; bottom: 0; height: 34px; border: 2px solid var(--ah-950); background: linear-gradient(180deg, rgba(255, 220, 170, 0.2), transparent 3px), linear-gradient(180deg, #5a3a22, #2e1c0f); z-index: 2; }
.rc-rank__disc {
  grid-area: case; position: relative; z-index: 3; justify-self: center; align-self: center; margin: -40px -14px 0 0; display: grid; place-items: center;
  width: 128px; height: 128px; padding: 0; border: 0; border-radius: 22px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rc-rank__disc:focus-visible { outline-offset: 6px; }
.rc-disc {
  position: relative; display: block; width: 104px; height: 104px; border: 2px solid var(--ah-950); border-radius: 18px; rotate: -4deg;
  background: conic-gradient(from 225deg, #4285f4 0 25%, #ea4335 0 50%, #34a853 0 75%, #fbbc05 0 100%);
  box-shadow: 3px 3px 0 rgba(3, 6, 13, 0.55); transition: scale 0.2s var(--ease-back);
}
.rc-disc__in { position: absolute; inset: 14px; display: grid; justify-items: center; align-content: center; gap: 2px; border: 1.5px solid rgba(11, 20, 36, 0.3); border-radius: 10px; background: #fdfcf8; }
.rc-disc__g { width: 26px; height: 26px; }
.rc-disc__stars { color: #e7a614; font-size: 0.62rem; letter-spacing: 0.06em; line-height: 1; }
.rc-disc__nfc { width: 16px; height: 16px; fill: none; stroke: var(--ah-ink); stroke-width: 2.2; stroke-linecap: round; }
.rc-disc::after { content: ""; position: absolute; inset: -2px; border-radius: 18px; background: linear-gradient(120deg, transparent 0 40%, rgba(255, 255, 255, 0.28) 40% 48%, transparent 48%); pointer-events: none; }
.rc-rank__ripple { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 3px solid var(--ah-neon-sky); border-radius: 26px; box-shadow: 0 0 0 2px rgba(3, 6, 13, 0.6); opacity: 0; pointer-events: none; }
.rc-rank__ripple--2 { width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 36px; }
.rc-rank__ripple.cg-run { animation: rc-ping 0.9s var(--ease-out) both; }
.rc-rank__ripple--2.cg-run { animation-delay: 0.12s; }
.rc-rank__disc.cg-press .rc-disc { animation: rc-press 0.3s both; }
.rc-rank__phone { grid-area: phone; position: relative; z-index: 2; width: 100%; max-width: 320px; justify-self: end; rotate: 2deg; }
.rc-pack { position: relative; border: 3px solid var(--ah-950); border-radius: 18px; background: #f4f1e8; color: var(--ah-ink); box-shadow: 7px 7px 0 var(--ah-blue); font-size: 16px; }
.rc-rank__screen { position: relative; display: block; overflow: hidden; padding: 14px 12px 12px; border-radius: 15px; }
.rc-rank__search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1.5px solid rgba(11, 20, 36, 0.2); border-radius: 999px; background: #fff; font-size: 0.86rem; font-weight: 700; color: var(--ah-ink); }
.rc-rank__g { flex: none; width: 18px; height: 18px; }
.rc-rank__mag { flex: none; width: 17px; height: 17px; margin-left: auto; fill: none; stroke: var(--ah-ink-2); stroke-width: 2.4; stroke-linecap: round; }
.rc-rank__map { position: relative; height: 74px; margin: 10px 0; border: 1.5px solid rgba(11, 20, 36, 0.18); border-radius: 12px; background: linear-gradient(28deg, transparent 0 46%, #e3ddcc 46% 52%, transparent 52%), linear-gradient(-14deg, transparent 0 60%, #e3ddcc 60% 65%, transparent 65%), #d9e8d4; overflow: hidden; }
.rc-rank__pin { position: absolute; width: 18px; height: 18px; margin: -18px 0 0 -9px; border: 2px solid var(--ah-950); border-radius: 50% 50% 50% 0; rotate: -45deg; background: #ea4335; transition: scale 0.3s var(--ease-back); }
.rc-rank__pin-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
.rc-rank__pin--a { left: 28%; top: 52%; } .rc-rank__pin--b { left: 70%; top: 40%; }
.rc-rank__pin--us { left: 50%; top: 72%; background: var(--ah-gold); }
.rc-rank__pin.cg-pin-top { scale: 1.35; z-index: 2; }
.rc-rank__rows { --row-h: 62px; --step: calc(var(--row-h) + 7px); position: relative; display: grid; gap: 7px; }
.rc-rank__rows.cg-notrans .rc-rank__row { transition: none !important; }
.rc-rank__rows.cg-dim { opacity: 0.4; }
.rc-rank__rows { transition: opacity 0.25s; }
.rc-rank__row { position: relative; display: grid; align-content: center; height: var(--row-h); padding: 6px 10px; border: 1.5px solid rgba(11, 20, 36, 0.16); border-radius: 10px; background: #fff; color: var(--ah-ink); transition: transform 0.55s var(--ease-snap); }
.rc-rank__row--us { z-index: 2; border: 2px solid #c48a12; background: #fff6dd; box-shadow: 3px 3px 0 var(--ah-gold); }
.rc-rank__name { font-size: 0.86rem; font-weight: 800; line-height: 1.15; }
.rc-rank__meta { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 700; color: var(--ah-ink-2); }
.rc-rank__rate { font-weight: 800; color: var(--ah-ink); }
.rc-rank__rate.cg-nudge { animation: rc-press 0.3s both; }
.rc-rank__stars { position: relative; display: inline-block; color: #d6d0c2; letter-spacing: 0.02em; }
.rc-rank__stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #e7a614; transition: width 0.4s; }
.rc-rank__count { display: inline-block; overflow: hidden; }
.rc-rank__count-in { display: inline-block; }
.rc-rank__count-in.cg-roll { animation: rc-roll-in 0.3s var(--ease-back) both; }
.rc-rank__sub { font-size: 0.7rem; font-weight: 600; color: #6a7383; }
.rc-rank__passed { margin-top: 10px; padding: 6px 10px; border: 2px solid var(--ah-950); border-radius: 8px; background: var(--ah-blue); color: var(--ah-ink); font-size: 0.8rem; font-weight: 800; text-align: center; opacity: 0; translate: 0 6px; transition: opacity 0.3s, translate 0.3s var(--ease-back); }
.rc-rank__passed.cg-on { opacity: 1; translate: 0 0; }
.rc-rank__more { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; font-size: 0.74rem; font-weight: 800; color: var(--ah-blue-ink); }
.rc-rank__more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rc-rank__sample { top: -12px; }
.rc-rank__foot { grid-area: foot; display: flex; align-items: center; justify-content: center; gap: 14px; }
.rc-rank__cap { color: var(--ah-fog); font-size: 1.02rem; text-align: center; }
.rc-rank__cap strong { color: var(--ah-paper); }
@media (max-width: 480px) {
  .rc-rank__scene { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .rc-rank__case { height: 260px; }
  .rc-rank__disc { width: 104px; height: 104px; margin-top: -30px; }
  .rc-disc { width: 84px; height: 84px; border-radius: 15px; }
  .rc-disc__in { inset: 11px; }
  .rc-disc__g { width: 20px; height: 20px; }
  .rc-pack { border-radius: 14px; box-shadow: 5px 5px 0 var(--ah-blue); }
  .rc-rank__phone { width: calc(100% - 10px); rotate: 1.5deg; }
  .rc-rank__screen { padding: 10px 8px 10px; border-radius: 11px; }
  .rc-rank__rows { --row-h: 58px; }
  .rc-rank__row { padding: 5px 7px; }
  .rc-rank__name { font-size: 0.78rem; }
  .rc-rank__meta { font-size: 0.68rem; gap: 3px; }
  .rc-rank__search { gap: 6px; font-size: 0.76rem; padding: 8px 9px; white-space: nowrap; }
  .rc-rank__mag { display: none; }
  .rc-rank__map { height: 70px; }
}

@media (max-width: 359px) { .rc-rank__search { padding-inline: 7px; font-size: 0.68rem; } }

/* --------------------------------------------------------------------------
   5. PROOF: the LED lift board and the two receipts clipped under their columns
   -------------------------------------------------------------------------- */
.rc-lift { --g: clamp(8px, 1.4vw, 18px); --bp: clamp(18px, 2.6vw, 34px); }
.rc-board {
  position: relative; margin: 0; padding: var(--bp); border: 3px solid var(--ah-950); border-radius: 14px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px), linear-gradient(180deg, #161c28, #0b0f17);
  box-shadow: 8px 8px 0 rgba(3, 6, 13, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.08);
}
.rc-board__screw { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ah-950); background: radial-gradient(circle at 35% 35%, var(--ah-steel-a), var(--ah-steel-c)); }
.rc-board__screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 2px; margin-top: -1px; background: var(--ah-950); rotate: 35deg; }
.rc-board__screw--tl { left: 9px; top: 9px; } .rc-board__screw--tr { right: 9px; top: 9px; } .rc-board__screw--bl { left: 9px; bottom: 9px; } .rc-board__screw--br { right: 9px; bottom: 9px; }
.rc-board__cols { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--g); align-items: start; }
.rc-board__col { position: relative; display: grid; grid-template-rows: auto 220px auto; justify-items: center; gap: 10px; min-width: 0; }
.rc-board__pct { display: grid; place-items: center; min-width: 100%; padding: 6px 4px 5px; border: 2px solid var(--ah-950); border-radius: 6px; background: #04060b; color: #c9ecff; font: 800 clamp(1.05rem, 0.6rem + 1vw, 1.7rem)/1 var(--ah-display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(47, 155, 255, 0.95), 0 0 2px #fff; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8); }
.rc-board__col--top .rc-board__pct { color: #ffe0ec; text-shadow: 0 0 6px rgba(255, 63, 134, 0.95), 0 0 2px #fff; }
.rc-board__meter { position: relative; width: 58%; max-width: 56px; height: 100%; border: 2px solid var(--ah-950); border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(0deg, #1a2333 0 9px, #04060b 9px 12px); }
.rc-board__lit { position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: repeating-linear-gradient(0deg, #8fd6ff 0 9px, #04060b 9px 12px); box-shadow: inset 0 0 0 2px rgba(47, 155, 255, 0.6); transform-origin: 50% 100%; }
.rc-board__col--top .rc-board__lit { background: repeating-linear-gradient(0deg, #ff7aa8 0 9px, #04060b 9px 12px); box-shadow: inset 0 0 0 2px rgba(255, 63, 134, 0.6); }
.rc-board__who { display: grid; justify-items: center; width: 100%; min-height: 66px; align-content: center; padding: 7px 4px 6px; border: 2px solid var(--ah-950); border-radius: 4px; background: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); text-align: center; line-height: 1.15; }
.rc-board__who b { font: 900 1.05rem/1 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
.rc-board__who span { margin-top: 3px; font-size: 0.74rem; font-weight: 700; color: var(--ah-ink-2); overflow-wrap: anywhere; }
.rc-board__pin { position: absolute; left: 50%; bottom: -16px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ah-neon-pink); box-shadow: 0 0 0 2px #0b0f17, 0 0 8px var(--ah-neon-pink); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .rc-board:not(.is-play) .rc-board__lit { scale: 1 0; }
  .rc-board.is-play .rc-board__lit { animation: rc-meter 1.1s var(--ease-out) calc(var(--i) * 0.09s + 0.15s) both; }
}
@keyframes rc-meter { from { scale: 1 0; } to { scale: 1 1; } }
/* under the board: the note and the heading on the left, the receipts under Carli's and Scott's columns */
.rc-words { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 40px; }
.rc-words__side { display: grid; gap: 26px; align-content: start; }
.rc-lift__note { --tilt: -1.2deg; max-width: 420px; margin: 0; }
.rc-lift__note p { font-size: 0.98rem; }
.rc-words__h { color: var(--ah-paper); font: 900 clamp(2rem, 1.3rem + 2vw, 3rem)/0.95 var(--ah-display); letter-spacing: 0.005em; text-wrap: balance; }
.rc-quote { position: relative; width: 100%; max-width: 440px; margin: 0; --tilt: 0.8deg; }
.rc-quote--scott { --tilt: -0.9deg; }
.rc-quote .ah-receipt__paper { padding-top: 36px; }
.rc-quote__stars { color: #c48a12; font-size: 1.1rem; letter-spacing: 0.12em; }
.rc-quote__q { margin: 10px 0 14px; }
.rc-quote__q p { font: 600 1.02rem/1.5 var(--ah-body); color: var(--ah-ink); }
.rc-quote__who { display: grid; gap: 2px; padding-top: 10px; border-top: 2px dashed rgba(11, 20, 36, 0.3); }
.rc-quote__who b { font-weight: 800; font-family: var(--ah-body); }
.rc-quote__who span { color: var(--ah-ink-2); font-size: 0.86rem; }
.rc-quote__stat { position: absolute; right: 22px; bottom: 30px; color: var(--ah-blue-ink); font: 900 2.2rem/1 var(--ah-display); }
.rc-quote__stat small { font-size: 0.5em; }
.rc-quote__clip { position: absolute; z-index: 3; top: -12px; left: var(--clip-x, 50%); width: 30px; height: 26px; margin-left: -15px; border: 2px solid var(--ah-950); border-radius: 5px 5px 3px 3px; background: linear-gradient(180deg, var(--ah-steel-a), var(--ah-steel-b) 60%, var(--ah-steel-c)); }
.rc-quote__clip::after { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 4px; border-radius: 2px; background: var(--ah-950); }
.rc-quote__string { display: none; }
@media (min-width: 900px) {
  .rc-words { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--g); padding-inline: calc(var(--bp) + 3px); margin-top: 58px; align-items: start; }
  .rc-words__side { grid-column: 1 / 3; }
  .rc-quote { grid-column: 3 / 6; max-width: none; --clip-x: calc((100% - 2 * var(--g)) / 3 * 2.5 + 2 * var(--g)); }
  .rc-quote--scott { grid-column: 6 / 9; }
  .rc-quote__string { display: block; position: absolute; z-index: 2; left: var(--clip-x); top: -66px; width: 2px; height: 58px; margin-left: -1px; background: #e8dcc0; }
  .rc-lift__note { max-width: none; }
  .rc-quote__stat { font-size: 2rem; }
}
@media (max-width: 759px) {
  .rc-board__cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rc-board__col { grid-template-columns: 7.2em minmax(0, 1fr) 4.4em; grid-template-rows: auto; align-items: center; gap: 10px; }
  .rc-board__who { order: 1; justify-items: start; min-height: 0; padding: 6px 8px 5px; text-align: left; }
  .rc-board__meter { order: 2; }
  .rc-board__pct { order: 3; }
  .rc-board__who b { font-size: 0.95rem; }
  .rc-board__who span { font-size: 0.75rem; }
  .rc-board__meter { width: 100%; max-width: none; height: 22px; background: repeating-linear-gradient(90deg, #1a2333 0 9px, #04060b 9px 12px); }
  .rc-board__lit { top: 0; bottom: 0; width: var(--h); height: auto; background: repeating-linear-gradient(90deg, #8fd6ff 0 9px, #04060b 9px 12px); transform-origin: 0 50%; }
  .rc-board__col--top .rc-board__lit { background: repeating-linear-gradient(90deg, #ff7aa8 0 9px, #04060b 9px 12px); }
  .rc-board__pct { font-size: 1.05rem; padding: 5px 2px 4px; }
  .rc-board__pin { left: auto; right: -11px; bottom: auto; top: 50%; margin: -6px 0 0; }
  .rc-board { padding: 20px 16px; }
}
@media (max-width: 759px) and (prefers-reduced-motion: no-preference) {
  html.motion .rc-board:not(.is-play) .rc-board__lit { scale: 0 1; }
  .rc-board.is-play .rc-board__lit { animation-name: rc-meter-x; }
}
@keyframes rc-meter-x { from { scale: 0 1; } to { scale: 1 1; } }

/* --------------------------------------------------------------------------
   6. THE ORDER: the case lit from inside the glass, the tags, the deal card
   -------------------------------------------------------------------------- */
.rc-case__head { margin-bottom: clamp(28px, 3.6vw, 48px); }
.rc-case__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 980px) { .rc-case__stage { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(34px, 4vw, 60px); } }
.rc-case__box {
  position: relative; container-type: inline-size; aspect-ratio: 100 / 56; overflow: hidden;
  border: 3px solid var(--ah-950); border-radius: 12px 12px 6px 6px;
  background: radial-gradient(circle, rgba(255, 236, 190, 0.08) 1.2px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(180deg, #141a36, #0d1129 70%);
  box-shadow: 8px 8px 0 rgba(3, 6, 13, 0.6), inset 0 0 0 4px #2a3142;
  cursor: pointer;
}
.rc-case__box > span, .rc-case__box > figure, .rc-case__box > p, .rc-case__box > a { position: absolute; }
.rc-case__rim { left: 0; right: 0; top: 0; height: 4.2cqi; border-bottom: 2px solid var(--ah-950); background: linear-gradient(180deg, var(--ah-steel-a), var(--ah-steel-b) 55%, var(--ah-steel-c)); z-index: 4; }
/* the light lives inside the glass: an LED strip under the rim, printed light falling from it */
.rc-case__strip { left: 4%; right: 4%; top: 4.2cqi; height: 1.3cqi; border-radius: 0 0 6px 6px; background: #f3fbff; box-shadow: 0 0 0 1.5px rgba(3, 6, 13, 0.7), 0 3px 12px 2px rgba(143, 214, 255, 0.65); z-index: 4; }
.rc-case__light { left: 2%; right: 2%; top: 5.5cqi; height: 46cqi; z-index: 1; background: radial-gradient(circle, rgba(220, 240, 255, 0.36) 1.3px, transparent 1.8px) 0 0 / 8px 8px; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 55%, transparent); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35) 55%, transparent); }
.rc-case__bed { left: 0; right: 0; bottom: 4.6cqi; height: 15cqi; z-index: 1; border-top: 2px solid var(--ah-950); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 5px), linear-gradient(180deg, #3a2a6a, #22184a); }
.rc-case__front { left: 0; right: 0; bottom: 0; height: 4.6cqi; z-index: 4; border-top: 2px solid var(--ah-950); background: linear-gradient(180deg, var(--ah-steel-a), var(--ah-steel-b) 55%, var(--ah-steel-c)); }
.rc-case__prod { z-index: 2; margin: 0; transition: translate 0.4s var(--ease-back), filter 0.4s; }
.rc-case__prod img { width: 100%; height: auto; filter: drop-shadow(4px 5px 0 rgba(3, 6, 13, 0.55)); }
.rc-case__prod--card { left: 6%; bottom: 10.5cqi; width: 24%; }
.rc-case__prod--sign { left: 38%; bottom: 10cqi; width: 22%; }
.rc-case__prod--disc { left: 64%; bottom: 9.5cqi; width: 27%; }
.rc-case__glare { left: 0; right: 0; top: 4cqi; bottom: 4.6cqi; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 0 14%, rgba(200, 230, 255, 0.09) 14% 22%, transparent 22% 27%, rgba(200, 230, 255, 0.06) 27% 29%, transparent 29% 72%, rgba(200, 230, 255, 0.07) 72% 77%, transparent 77%); }
.rc-case__note {
  right: 4%; top: 9cqi; z-index: 5; padding: 0.7em 1em 0.6em; border: 2px solid var(--ah-950); border-radius: 3px; background: #fff7d6; background-image: var(--ah-fiber); color: var(--ah-ink);
  font: 400 max(12px, 2.2cqi)/1.3 var(--ah-hand); rotate: 3deg; box-shadow: 3px 3px 0 rgba(3, 6, 13, 0.55);
}
.rc-case__note i { font-style: normal; color: var(--ah-red-ink); }
.rc-case__tape { top: -12px; width: 52px; height: 20px; }
.rc-case__tape--l { left: -14px; } .rc-case__tape--r { right: -12px; left: auto; rotate: 18deg; }
.rc-case__placard {
  left: 4%; top: 9cqi; z-index: 5; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 12px;
  border: 2px solid var(--ah-950); border-radius: 4px; background: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  font: 800 max(11px, 1.55cqi)/1.15 var(--ah-body); letter-spacing: 0.1em; text-decoration: none; box-shadow: 3px 3px 0 var(--ah-blue); rotate: -2deg;
}
.rc-case__placard svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-case__placard:hover { box-shadow: 5px 5px 0 var(--ah-blue); }
.rc-case__placard:focus-visible { outline-color: var(--ah-sky); outline-offset: 3px; }
.rc-case__box[data-sel="0"] .rc-case__prod--card, .rc-case__box[data-sel="1"] .rc-case__prod--sign, .rc-case__box[data-sel="2"] .rc-case__prod--disc { translate: 0 -2.4cqi; }
.rc-case__box[data-sel]:not([data-sel=""]) .rc-case__prod { filter: brightness(0.62); }
.rc-case__box[data-sel="0"] .rc-case__prod.rc-case__prod--card, .rc-case__box[data-sel="1"] .rc-case__prod.rc-case__prod--sign, .rc-case__box[data-sel="2"] .rc-case__prod.rc-case__prod--disc { filter: none; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .rc-case__box:not(.is-play) .rc-case__strip { background: #5b6678; box-shadow: 0 0 0 1.5px rgba(3, 6, 13, 0.7); }
  html.motion .rc-case__box:not(.is-play) .rc-case__light { opacity: 0; }
  html.motion .rc-case__box:not(.is-play) .rc-case__prod { filter: brightness(0.45); }
  .rc-case__box.is-play .rc-case__strip { animation: ah-ignite 1s 0.1s both; }
  .rc-case__box.is-play .rc-case__light { animation: rc-in 0.6s 0.55s both; }
  .rc-case__box.is-play:not([data-sel]) .rc-case__prod, .rc-case__box.is-play[data-sel=""] .rc-case__prod { animation: rc-brighten 0.6s 0.5s both; }
}
@keyframes rc-brighten { from { filter: brightness(0.45); } to { filter: brightness(1); } }
/* the price tags on a brass rod under the case (guarantees printed right on the front) */
.rc-case__tags { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); padding: 30px 6px 0; }
.rc-case__rod { position: absolute; left: -8px; right: -8px; top: 8px; height: 12px; border: 2px solid var(--ah-950); border-radius: 8px; background: linear-gradient(180deg, var(--ah-steel-a), var(--ah-steel-b) 55%, var(--ah-steel-c)); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
.rc-case__tag {
  position: relative; display: block; width: 100%; padding: 22px 0 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  transform-origin: 50% 0; rotate: var(--tilt, -1deg); transition: rotate 0.5s var(--ease-back); -webkit-tap-highlight-color: transparent;
}
.rc-case__tag--2 { --tilt: 0.8deg; } .rc-case__tag--3 { --tilt: -0.4deg; }
.rc-case__str { position: absolute; left: 50%; top: -14px; width: 2px; height: 40px; margin-left: -1px; background: #e8dcc0; }
.rc-case__tagbody {
  position: relative; display: grid; gap: 4px; min-height: 100%; padding: 18px 14px 14px;
  border: 2px solid var(--ah-950); border-radius: 6px 6px 10px 10px; background: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 4px 4px 0 var(--ah-blue); clip-path: polygon(14% 0, 86% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
}
.rc-case__tagbody::before { content: ""; position: absolute; left: 50%; top: 7px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: #0d1129; box-shadow: 0 0 0 2px var(--ah-950); }
.rc-case__tagname { font: 900 1.28rem/1 var(--ah-display); letter-spacing: 0.05em; }
.rc-case__tagsub { color: var(--ah-ink-2); font: 700 0.74rem/1.3 var(--ah-mono); letter-spacing: 0.06em; }
.rc-case__tagtxt { margin-top: 6px; padding-top: 8px; border-top: 2px dashed rgba(11, 20, 36, 0.28); font-size: 0.92rem; font-weight: 700; line-height: 1.35; color: var(--ah-ink); }
.rc-case__tagtxt strong { color: var(--ah-blue-ink); font-weight: 900; }
.rc-case__tag:hover { --tilt: -2.5deg; }
.rc-case__tag[aria-pressed="true"] .rc-case__tagbody { box-shadow: 4px 4px 0 var(--ah-neon-pink); }
.rc-case__tag:focus-visible { outline: none; }
.rc-case__tag:focus-visible .rc-case__tagbody { outline: 3px solid var(--ah-sky); outline-offset: 3px; }
@media (max-width: 600px) {
  .rc-case__box { aspect-ratio: 100 / 84; }
  .rc-case__rim { height: 6cqi; }
  .rc-case__strip { top: 6cqi; height: 2cqi; }
  .rc-case__light { top: 8cqi; height: 70cqi; }
  .rc-case__bed { bottom: 6cqi; height: 22cqi; }
  .rc-case__front { height: 6cqi; }
  .rc-case__prod--card { bottom: 15cqi; width: 28%; left: 3%; }
  .rc-case__prod--sign { bottom: 14cqi; width: 26%; left: 37%; }
  .rc-case__prod--disc { bottom: 14cqi; width: 31%; left: 66%; }
  .rc-case__note { top: 11cqi; right: 3%; max-width: 44%; font-size: 12.5px; }
  .rc-case__placard { top: 12cqi; left: 3%; max-width: 47%; font-size: 10.5px; letter-spacing: 0.05em; line-height: 1.2; }
}
@media (max-width: 559px) {
  .rc-case__tags { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 26px; }
  .rc-case__rod { display: none; }
  .rc-case__tag { padding-top: 0; rotate: 0deg; --tilt: 0deg; }
  .rc-case__str { display: none; }
  .rc-case__tagbody { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "n t" "s t"; column-gap: 14px; align-items: center; padding: 14px; clip-path: none; border-radius: 6px; }
  .rc-case__tagbody::before { display: none; }
  .rc-case__tagname { grid-area: n; }
  .rc-case__tagsub { grid-area: s; }
  .rc-case__tagtxt { grid-area: t; margin: 0; padding: 0 0 0 12px; border-top: 0; border-left: 2px dashed rgba(11, 20, 36, 0.28); }
}
/* the deal card: a punched price card */
.rc-case__deal {
  position: relative; display: grid; gap: 4px; padding: 34px clamp(18px, 2.4vw, 28px) 24px; border: 2px solid var(--ah-950); border-radius: 10px;
  background: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 7px 7px 0 var(--ah-blue); rotate: 1deg; cursor: pointer;
}
.rc-case__dealhole { position: absolute; left: 50%; top: 11px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: #0b1226; box-shadow: 0 0 0 2px var(--ah-950); }
.rc-case__dealtitle { margin-bottom: 8px; text-align: center; font: 900 1.4rem/1 var(--ah-display); letter-spacing: 0.08em; }
.rc-case__lines { display: grid; }
.rc-case__dealline { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 0; border-bottom: 2px dashed rgba(11, 20, 36, 0.22); font: 900 1.55rem/1 var(--ah-display); letter-spacing: 0.02em; }
.rc-case__dealline em { padding: 4px 7px 3px; border: 2px solid var(--ah-950); border-radius: 4px; background: var(--ah-blue); color: var(--ah-ink); font: 800 0.74rem/1 var(--ah-body); font-style: normal; letter-spacing: 0.08em; white-space: nowrap; }
.rc-case__ten { position: relative; display: inline-block; padding: 4px 10px; }
.rc-case__ten svg { position: absolute; left: -8px; top: -6px; width: calc(100% + 16px); height: calc(100% + 12px); overflow: visible; }
.rc-case__ten svg path { fill: none; stroke: var(--ah-red-ink); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rc-case__ten span { position: relative; }
.rc-case__scrawl { justify-self: start; margin: 6px 0 0 8px; color: var(--ah-red-ink); font: 400 1.05rem/1.1 var(--ah-hand); rotate: -3deg; }
.rc-case__ship { margin-top: 10px; padding: 8px 12px 7px; border: 2px solid var(--ah-950); border-radius: 6px; background: #11151d; color: #e8edf3; text-align: center; font: 700 0.8rem/1.25 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.rc-case__fine { margin-top: 18px; color: var(--ah-fog); font-size: 0.95rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .rc-case__box:not(.is-play) ~ .rc-case__tags .rc-case__tag { rotate: -6deg; }
}
.rc-case__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(34px, 4vw, 52px); }
.rc-case__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rc-case__alt { display: inline-flex; align-items: center; min-height: 44px; color: var(--ah-sky); font-weight: 700; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   7. BADGES: the lanyard rail behind the counter
   -------------------------------------------------------------------------- */
.rc-badges__head { margin-bottom: clamp(18px, 2.4vw, 30px); }
.rc-rack { --at: 0; --popw: 230px; position: relative; container-type: inline-size; max-width: 1000px; margin: 0 auto; padding-top: 30px; }
.rc-rack[data-at="1"] { --at: 1; } .rc-rack[data-at="2"] { --at: 2; } .rc-rack[data-at="3"] { --at: 3; } .rc-rack[data-at="4"] { --at: 4; }
.rc-rack__rail { position: absolute; left: -10px; right: -10px; top: 8px; height: 16px; border: 2px solid var(--ah-950); border-radius: 8px; background: radial-gradient(circle, var(--ah-steel-a) 0 2px, var(--ah-steel-c) 2.5px, var(--ah-950) 3.2px, transparent 3.6px) 30px 50% / 120px 10px repeat-x, linear-gradient(180deg, var(--ah-steel-a), var(--ah-steel-b) 55%, var(--ah-steel-c)); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); z-index: 2; }
.rc-rack__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 2.4vw, 30px); }
.rc-rack__item { min-width: 0; }
.rc-rack__badge { position: relative; display: block; width: 100%; padding: 46px 0 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rc-rack__hook { position: absolute; z-index: 3; left: 50%; top: -24px; width: 16px; height: 30px; margin-left: -8px; border: 3px solid var(--ah-steel-b); border-top: 0; border-radius: 0 0 10px 10px; box-shadow: 0 0 0 2px var(--ah-950); }
.rc-rack__strap { position: absolute; z-index: 1; left: 50%; top: 0; width: 46%; height: 52px; translate: -50% 0; background: linear-gradient(var(--ah-950), var(--ah-950)) 0 0 / 2px 100% no-repeat, linear-gradient(var(--ah-950), var(--ah-950)) 100% 0 / 2px 100% no-repeat, repeating-linear-gradient(180deg, var(--ah-blue) 0 6px, #0a6fd4 6px 12px); clip-path: polygon(38% 0, 62% 0, 100% 100%, 76% 100%, 50% 30%, 24% 100%, 0 100%); }
.rc-rack__badge img { position: relative; z-index: 2; width: 100%; height: auto; border: 2px solid var(--ah-950); border-radius: 8px; box-shadow: 5px 5px 0 rgba(3, 6, 13, 0.6); rotate: var(--r, -1deg); transition: translate 0.3s var(--ease-back), box-shadow 0.2s; }
.rc-rack__item:nth-child(2) .rc-rack__badge img { --r: 1.2deg; } .rc-rack__item:nth-child(3) .rc-rack__badge img { --r: -0.6deg; } .rc-rack__item:nth-child(4) .rc-rack__badge img { --r: 1.6deg; } .rc-rack__item:nth-child(5) .rc-rack__badge img { --r: -1.4deg; }
.rc-rack__badge::after { content: ""; position: absolute; z-index: 3; left: 50%; top: 40px; width: 22px; height: 12px; margin-left: -11px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, var(--ah-steel-a), var(--ah-steel-c)); }
.rc-rack__badge:hover img { translate: 0 -3px; }
.rc-rack__badge[aria-pressed="true"] img { box-shadow: 5px 5px 0 var(--ah-neon-pink); }
.rc-rack__badge:focus-visible { outline: none; }
.rc-rack__badge:focus-visible img { outline: 3px solid var(--ah-sky); outline-offset: 3px; }
.rc-rack__ripple { z-index: 4; top: calc(46px + 30px + 6cqi); left: calc((var(--at) + 0.5) * 20cqi); width: 12cqi; height: 12cqi; margin-left: -6cqi; border: 3px solid var(--ah-neon-sky); box-shadow: 0 0 0 2px rgba(3, 6, 13, 0.6); opacity: 0; }
.rc-rack__pop { position: relative; z-index: 5; width: var(--popw); margin-top: 22px; font-size: 15px; translate: clamp(0px, calc((var(--at) + 0.5) * 20cqi - var(--popw) / 2), calc(100cqi - var(--popw))) 0; transition: translate 0.45s var(--ease-out); }
.rc-rack__pop::before { content: ""; position: absolute; z-index: 2; top: -9px; left: clamp(16px, calc((var(--at) + 0.5) * 20cqi - clamp(0px, calc((var(--at) + 0.5) * 20cqi - var(--popw) / 2), calc(100cqi - var(--popw)))), calc(var(--popw) - 16px)); width: 14px; height: 14px; margin-left: -7px; border-left: 2px solid var(--ah-950); border-top: 2px solid var(--ah-950); background: #fdfcf8; rotate: 45deg; }
.rc-rack__sample { top: -12px; right: -8px; }
.rc-badges__copy { max-width: 40em; margin: clamp(26px, 3vw, 40px) auto 0; text-align: center; color: var(--ah-fog); font-size: 1.08rem; }
.rc-badges__copy p + p { margin-top: 8px; }
.rc-badges__copy a { color: var(--ah-sky); font-weight: 700; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .rc-rack.is-pop .rc-rack__pop .rc-mini { animation: rc-pop 0.42s var(--ease-back) both; }
  .rc-rack.is-pop .rc-rack__pop .rc-mini__stars svg { animation: rc-star 0.36s var(--ease-back) both; }
  .rc-rack.is-pop .rc-rack__pop .rc-mini__stars svg:nth-child(2) { animation-delay: 0.1s; }
  .rc-rack.is-pop .rc-rack__pop .rc-mini__stars svg:nth-child(3) { animation-delay: 0.2s; }
  .rc-rack.is-pop .rc-rack__pop .rc-mini__stars svg:nth-child(4) { animation-delay: 0.3s; }
  .rc-rack.is-pop .rc-rack__pop .rc-mini__stars svg:nth-child(5) { animation-delay: 0.4s; }
  .rc-rack.is-pop .rc-rack__ripple { animation: rc-ping 0.9s var(--ease-out) both; }
}
@media (max-width: 600px) {
  .rc-rack { --popw: 200px; }
  .rc-rack__badge { padding-top: 38px; }
  .rc-rack__badge::after { top: 32px; width: 16px; height: 10px; margin-left: -8px; }
  .rc-rack__strap { height: 44px; }
  .rc-rack__badge img { border-radius: 5px; box-shadow: 3px 3px 0 rgba(3, 6, 13, 0.6); }
  .rc-rack__badge[aria-pressed="true"] img { box-shadow: 3px 3px 0 var(--ah-neon-pink); }
  .rc-rack__pop { font-size: 13.5px; }
  .rc-rack__ripple { top: calc(38px + 30px + 8cqi); }
}

/* --------------------------------------------------------------------------
   8. BOOK: the blank YOUR SHOP card and the phone that opens our calendar
   -------------------------------------------------------------------------- */
.rc-bk { position: relative; width: min(100%, 470px); margin: 0 auto; padding: 10px 0 0; }
.rc-bk__counter { position: absolute; left: -4%; right: -4%; bottom: 0; height: 60px; border: 2px solid var(--ah-950); border-radius: 6px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.22), transparent 3px), repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px), linear-gradient(180deg, #7a5232, #3a2414); box-shadow: 6px 6px 0 rgba(3, 6, 13, 0.55); }
.rc-blank {
  position: absolute; z-index: 1; left: 4%; bottom: 30px; width: 39%; aspect-ratio: 54 / 85.6; display: grid; justify-items: center; align-content: end; gap: 6px; padding: 0 8% 9%;
  border: 2px solid var(--ah-950); border-radius: 9px; overflow: hidden; color: var(--ah-ink); rotate: -10deg; container-type: inline-size;
  background: linear-gradient(162deg, #fbbc05 0 22%, transparent 22%), linear-gradient(200deg, #ea4335 0 30%, transparent 30%), linear-gradient(118deg, #34a853 0 26%, transparent 26%), linear-gradient(180deg, transparent 0 40%, #4285f4 40% 47%, #fdfcf8 47%);
  background-color: #fdfcf8; box-shadow: 6px 6px 0 rgba(3, 6, 13, 0.6);
}
.rc-blank__band { position: absolute; left: 22%; right: 22%; top: 12%; height: 26%; border-radius: 6px; background: #fdfcf8; border: 1.5px solid rgba(11, 20, 36, 0.25); }
.rc-blank__nfc { position: absolute; left: 50%; top: 4%; width: 13cqi; height: 13cqi; translate: -50% 0; fill: none; stroke: var(--ah-ink); stroke-width: 2.2; stroke-linecap: round; }
.rc-blank__logo { position: absolute; left: 24%; right: 24%; top: 13%; height: 24%; display: grid; place-items: center; border: 2px dashed var(--ah-blue-ink); border-radius: 50%; color: var(--ah-blue-ink); font: 400 9.5cqi/1 var(--ah-hand); text-align: center; rotate: -6deg; }
.rc-blank__name { font: 900 15cqi/1 var(--ah-display); letter-spacing: 0.04em; white-space: nowrap; }
.rc-blank__stars { color: #e7a614; font-size: 10cqi; letter-spacing: 0.08em; line-height: 1; }
.rc-bk__ring { z-index: 4; left: 33%; bottom: 24%; width: 70px; height: 70px; margin: 0 0 -35px -35px; border: 3px solid var(--ah-neon-sky); box-shadow: 0 0 0 2px rgba(3, 6, 13, 0.6); opacity: 0.7; }
.rc-bk__ring--b { width: 112px; height: 112px; margin: 0 0 -56px -56px; opacity: 0.35; }
.rc-bk__phone { position: relative; z-index: 3; width: min(54%, 252px); margin: 0 6% 34px auto; rotate: -4deg; transform-origin: 0 100%; }
.rc-ph--book { padding: 10px; border-radius: 40px; box-shadow: 8px 8px 0 var(--ah-neon-pink), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.rc-bk__screen { aspect-ratio: auto; display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 450px; padding: 46px 10px 24px; border-radius: 31px; background: radial-gradient(circle, rgba(173, 229, 255, 0.12) 1.2px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(170deg, #17284a, #070d1a); color: var(--ah-paper); }
.rc-bk__url { position: absolute; top: 40px; left: 50%; translate: -50% 0; white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: rgba(238, 244, 251, 0.12); color: var(--ah-fog); font: 700 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.04em; }
.rc-bk__card { width: 100%; rotate: 0deg; padding: 22px 12px 20px; box-shadow: 4px 4px 0 var(--ah-blue); }
.rc-bk__card .ah-card__h { font-size: clamp(1.45rem, 1.1rem + 0.8vw, 1.75rem); }
.rc-bk__card .ah-card__p { font-size: 0.96rem; }
.rc-bk__card .ah-card__btn { max-width: 100%; padding: 8px 1em; font-size: 1rem; white-space: normal; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .rc-bk:not(.is-play) .rc-bk__phone { translate: 18px -22px; rotate: -9deg; }
  html.motion .rc-bk:not(.is-play) .rc-bk__ring { opacity: 0; }
  .rc-bk.is-play .rc-bk__phone { animation: rc-bk-in 1s var(--ease-out) 0.2s both; }
  .rc-bk.is-play .rc-bk__ring--a { animation: rc-ring 1s var(--ease-out) 0.95s both; }
  .rc-bk.is-play .rc-bk__ring--b { animation: rc-ring-b 1.1s var(--ease-out) 1.05s both; }
}
@keyframes rc-bk-in { 0% { translate: 18px -22px; rotate: -9deg; } 75% { translate: -3px 3px; rotate: -3deg; } 100% { translate: 0 0; rotate: -4deg; } }
@media (max-width: 480px) {
  .rc-bk__phone { width: 62%; margin-right: 3%; }
  .rc-bk__screen { min-height: 400px; padding-inline: 8px; }
  .rc-bk__card { padding-inline: 10px; }
  .rc-blank { width: 37%; left: 3%; rotate: -7deg; }
}

/* --------------------------------------------------------------------------
   9. CLOSING: the L-sign in neon on the dark counter
   -------------------------------------------------------------------------- */
.rc-neon { position: relative; display: grid; justify-items: center; width: min(100%, 470px); margin: 0 auto 50px; padding: 0 0 22px; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rc-neon:focus-visible { outline: none; }
.rc-neon:focus-visible .rc-neon__svg { outline: 3px solid var(--ah-sky); outline-offset: 6px; border-radius: 16px; }
.rc-neon__svg { position: relative; z-index: 2; display: block; width: 100%; height: auto; overflow: visible; }
.rc-neon__sign { position: relative; z-index: 2; width: 44%; height: auto; margin-top: -2px; filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, 0.55)); }
.rc-neon__counter { position: absolute; z-index: 1; left: 6%; right: 6%; bottom: 0; height: 44px; border: 2px solid var(--ah-950); border-radius: 6px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.2), transparent 3px), repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px), linear-gradient(180deg, #5a3a22, #2a190d); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55); }
.rc-neon__glass use { fill: none; stroke: rgba(255, 240, 210, 0.14); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.rc-neon__lit use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rc-neon__lit .rn-halo { stroke: var(--ah-neon-gold); stroke-width: 16; opacity: 0.8; }
.rc-neon__lit .rn-tube { stroke: var(--ah-neon-gold); stroke-width: 6.5; }
.rc-neon__lit .rn-core { stroke: var(--ah-neon-gold-core); stroke-width: 2.4; }
/* the tap in neon: a blue phone touching the L-sign, sky tap rings, one gold review star on its screen */
.rc-neon__tilt { transform-box: view-box; transform-origin: 230px 146px; rotate: -5deg; }
.rc-neon__body { fill: #070b16; }
.rc-neon__lit.rn-blue .rn-halo, .rc-neon__lit.rn-blue .rn-tube { stroke: var(--ah-neon-blue); }
.rc-neon__lit.rn-blue .rn-core { stroke: var(--ah-neon-blue-core); }
.rc-neon__lit.rn-sky .rn-halo, .rc-neon__lit.rn-sky .rn-tube { stroke: var(--ah-neon-sky); }
.rc-neon__lit.rn-sky .rn-core { stroke: var(--ah-neon-blue-core); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .rc-final:not(.is-play) .rc-neon__lit { opacity: 0.06; }
  .rc-final.is-play .rc-neon__lit { animation: ah-ignite2 0.8s calc(var(--n) * 0.32s + 0.3s) both; }
  .rc-neon.is-relight .rc-neon__lit { animation: rc-relight-star 0.9s calc(var(--n) * 0.26s) both !important; }
  .rc-neon:hover .rc-neon__svg { animation: rc-sway 1.4s ease-in-out; }
  .rc-neon.is-relight .rc-neon__tilt { animation: rc-neon-tap 0.7s var(--ease-out) both; }
}
@keyframes rc-relight-star { 0% { opacity: 0.06; } 30% { opacity: 1; } 38% { opacity: 0.2; } 50%, 100% { opacity: 1; } }
@keyframes rc-neon-tap { 0% { translate: 0 -14px; } 60% { translate: 0 2px; } 100% { translate: 0 0; } }
@keyframes rc-sway { 25% { rotate: 0.8deg; } 55% { rotate: -0.6deg; } 80% { rotate: 0.2deg; } }

/* --------------------------------------------------------------------------
   10. The Shmo guide: left gutter on wide desktops only, never over content
   -------------------------------------------------------------------------- */
.rc-guide { display: none; }
@media (min-width: 1500px) and (hover: hover) and (pointer: fine) {
  .rc-guide {
    position: fixed; z-index: 40; left: 16px; bottom: 22px; display: grid; justify-items: start; gap: 8px;
    width: calc((100vw - 1200px) / 2 - 34px); max-width: 190px; pointer-events: none;
    opacity: 0; visibility: hidden; translate: -14px 0; transition: opacity 0.3s, translate 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .rc-guide.is-on { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.3s, translate 0.3s var(--ease-out), visibility 0s; }
}
.rc-guide__bubble { position: relative; padding: 9px 11px 8px; border: 2px solid var(--ah-950); border-radius: 10px; background: var(--ah-cream); color: var(--ah-ink); font: 700 0.84rem/1.3 var(--ah-body); box-shadow: 3px 3px 0 var(--ah-blue); }
.rc-guide__bubble::after { content: ""; position: absolute; left: 22px; bottom: -9px; width: 14px; height: 14px; border-right: 2px solid var(--ah-950); border-bottom: 2px solid var(--ah-950); background: var(--ah-cream); rotate: 45deg; }
.rc-guide__img { width: 66px; height: auto; margin-left: 6px; filter: drop-shadow(3px 3px 0 rgba(3, 6, 13, 0.6)); }
@media (prefers-reduced-motion: no-preference) { .rc-guide.is-talk .rc-guide__img { animation: ah-hop 0.5s var(--ease-out); } }