/* ==========================================================================
   AFTER HOURS: vip-program.html (prefix vip-)
   The Honest Trade, walked through the shop at night, told with the program's own object: this month's
   medallion. It goes out in the hero text, sits in a lit coin case on velvet (the showcase, a Jeff KEEP),
   is missing from the win-back thread, is clipped to the HOUSE RULE card, waits blank in an open velvet box
   at the booking band and lights up as the neon VIP ring at the close. The approved scenes keep their scripts:
   the hero phone, the brass scale, the price tag in the lit case, the RCPT-80 receipt, the missing month and
   Derek's badge, the POS trap (now on the customer's own phone), the house rule card and the clicker.
   No lamp, no neon OPEN sign, no shop door (homepage only). Shared pieces come from theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Page-wide bits
   -------------------------------------------------------------------------- */
/* the problem chip inside a label-maker kicker (Problem 1 / 2 / 3) */
.vip-ptag b { flex: none; white-space: nowrap; padding: 2px 7px 1px; border: 1.5px solid var(--ah-950); border-radius: 3px; background: var(--ah-cream); color: var(--ah-ink); font-weight: 800; letter-spacing: 0.08em; }
/* the line under a scene (the original's scene-after) */
.vip-after { max-width: 40em; margin: clamp(30px, 4vw, 48px) auto 0; text-align: center; color: var(--ah-fog); font-size: 1.06rem; line-height: 1.6; }
.vip-after b { color: var(--ah-paper); font-weight: 800; }
.vip-after a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ah-sky); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.vip-after a:hover { color: var(--ah-paper); }
.vip-after__arrow { width: 18px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vip-after--stack p + p { margin-top: 4px; }
.vip-after--stack p:has(> a:only-child) { margin-top: 2px; }

/* --------------------------------------------------------------------------
   1. HERO: the phone that texts the whole town
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .vip-hero .ah-phero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.vip-hero .ah-phero__copy { max-width: 660px; }
@media (max-width: 480px) { .vip-hero .ah-phero__lead { font-size: 1.04rem; } }
/* the catch line: the LED sits on the first line, the link wraps like text */
.vip-catchline.ah-phero__note { position: relative; display: block; padding-left: 19px; line-height: 1.5; }
.vip-catchline.ah-phero__note::before { position: absolute; left: 0; top: 0.5em; }
.vip-catchline a { color: var(--ah-sky); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.vip-catchline a:hover { color: var(--ah-paper); }

.vip-hp { position: relative; width: min(100%, 330px); margin: 0 auto; padding: 14px 0 10px; }
@media (min-width: 1200px) { .vip-hp { width: 352px; } }
/* the light the phone throws on the bricks: printed dots, never a blur */
.vip-hp__spot {
  position: absolute; z-index: 0; inset: -6% -38% -2%; pointer-events: none;
  background: radial-gradient(circle, rgba(47, 155, 255, 0.7) 1.3px, transparent 1.8px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, 0.45) 60%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, 0.45) 60%, transparent 100%);
  opacity: 0.62;
}
.vip-hp__phone {
  position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 300 / 610; margin: 0; padding: 11px;
  border: 3px solid var(--ah-950); border-radius: 48px;
  background: linear-gradient(160deg, #3a4456, #1a202c 42%, #11151d);
  box-shadow: 10px 10px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
  color: var(--ah-paper); font: inherit; text-align: left; cursor: pointer; rotate: -3deg;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: translate 0.25s var(--ease-back), box-shadow 0.25s var(--ease-back);
}
.vip-hp__phone:hover { translate: -2px -3px; box-shadow: 13px 13px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.vip-hp__phone:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 7px; }
.vip-hp__key { position: absolute; width: 7px; border: 2px solid var(--ah-950); background: #4a5568; }
.vip-hp__key--a { left: -9px; top: 19%; height: 34px; border-radius: 3px 0 0 3px; }
.vip-hp__key--b { left: -9px; top: 27%; height: 58px; border-radius: 3px 0 0 3px; }
.vip-hp__key--c { right: -9px; top: 25%; height: 80px; border-radius: 0 3px 3px 0; }
.vip-hp__screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 37px; background: linear-gradient(180deg, #0b1528, #060b16 34%); }
.vip-hp__island { position: absolute; z-index: 4; top: 11px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 999px; background: #03050a; }
.vip-hp__status { display: flex; justify-content: space-between; align-items: center; padding: 15px 22px 2px 26px; color: var(--ah-paper); font: 700 12.5px/1 var(--ah-body); font-variant-numeric: tabular-nums; }
.vip-hp__status svg { display: block; fill: var(--ah-paper); }
.vip-hp__status .vip-hp__batt { fill: none; stroke: var(--ah-paper); stroke-opacity: 0.55; }
.vip-hp__head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 14px; border-bottom: 2px solid rgba(173, 229, 255, 0.12); background: #0b1528; }
.vip-hp__ava { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-800); box-shadow: 0 0 0 2px rgba(173, 229, 255, 0.22); }
.vip-hp__ava img { width: 68%; height: auto; }
.vip-hp__name { display: flex; align-items: center; gap: 4px; color: var(--ah-paper); font: 800 12.5px/1 var(--ah-body); }
.vip-hp__chev { width: 7px; height: 10px; fill: none; stroke: var(--ah-mute); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vip-hp__count { color: var(--ah-mute); font: 600 11px/1 var(--ah-body); font-variant-numeric: tabular-nums; }
.vip-hp__thread { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 0 13px; }
.vip-hp__prev { position: absolute; top: 0; right: 13px; display: flex; flex-direction: column; align-items: flex-end; transform: translateY(-30%); opacity: 0.72; }
.vip-hp__faded { margin-top: 3px; color: var(--ah-mute); font: 700 9.5px/1 var(--ah-body); }
.vip-hp__chip { align-self: center; margin-bottom: 6px; color: var(--ah-mute); font: 700 9.5px/1 var(--ah-body); letter-spacing: 0.03em; }
.vip-hp__med { position: relative; display: block; width: 54%; padding: 9px 9px 7px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 18px 18px 6px 18px; background: linear-gradient(170deg, #17284a, #0b1424 70%); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); }
.vip-hp__prev .vip-hp__med { width: 120px; }
.vip-hp__med img { display: block; width: 100%; height: auto; }
.vip-hp__medlabel { display: block; margin-top: 5px; text-align: center; color: var(--ah-sky); font: 800 8.5px/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.vip-hp__glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 38%, rgba(255, 244, 214, 0.6) 50%, transparent 62%); transform: translateX(-140%); }
.vip-hp__out { position: relative; max-width: 88%; padding: 8px 11px 9px; border: 2px solid var(--ah-950); border-radius: 16px 16px 5px 16px; background: var(--ah-blue); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%); color: var(--ah-ink); font: 700 11.5px/1.4 var(--ah-body); box-shadow: 2px 2px 0 var(--ah-paper); }
.vip-hp__sent { display: none; flex-direction: column; align-items: flex-end; gap: 5px; padding-bottom: 9px; }
.vip-hp__sent.is-show { display: flex; }
.vip-hp__delivered { align-self: flex-end; color: var(--ah-mute); font: 700 10px/1 var(--ah-body); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.3s; }
.vip-hp__delivered.is-on { opacity: 1; }
.vip-hp__compose { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 6px; }
.vip-hp__plus { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border: 2px solid rgba(173, 229, 255, 0.3); border-radius: 50%; }
.vip-hp__plus svg { width: 12px; height: 12px; fill: none; stroke: var(--ah-fog); stroke-width: 2; stroke-linecap: round; }
.vip-hp__pill { position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 34px; padding: 6px 38px 6px 11px; border: 2px solid rgba(173, 229, 255, 0.3); border-radius: 18px; background: rgba(5, 9, 18, 0.6); }
.vip-hp__draftwrap { display: flex; flex-direction: column; gap: 6px; }
.vip-hp__attach { display: block; width: 60px; padding: 5px; border: 2px solid var(--ah-950); border-radius: 10px; background: #17284a; }
.vip-hp__attach img { display: block; width: 100%; height: auto; }
.vip-hp__draft { display: block; color: var(--ah-paper); font: 600 10.5px/1.4 var(--ah-body); }
.vip-hp__placeholder { display: none; color: var(--ah-mute); font: 600 11px/18px var(--ah-body); }
.vip-hp__compose.is-empty .vip-hp__draftwrap { display: none; }
.vip-hp__compose.is-empty .vip-hp__placeholder { display: block; }
.vip-hp__send { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); }
.vip-hp__send svg { width: 12px; height: 12px; fill: none; stroke: var(--ah-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vip-hp__compose.is-empty .vip-hp__send { background: #2a3448; }
.vip-hp__compose.is-empty .vip-hp__send svg { stroke: var(--ah-mute); }
.vip-hp__home { display: flex; justify-content: center; align-items: center; flex: 0 0 18px; }
.vip-hp__home::before { content: ""; width: 96px; height: 4px; border-radius: 2px; background: rgba(238, 244, 251, 0.3); }
.vip-hp > .ah-sample { top: 2px; right: -14px; }
.vip-hp__note { position: absolute; z-index: 2; left: -86px; bottom: -34px; align-items: flex-start; white-space: nowrap; rotate: -5deg; }
.vip-hp__note .ah-hand__arrow { margin-top: -26px; }
@media (max-width: 1199px) {
  .vip-hp__note { position: relative; left: auto; right: auto; bottom: auto; display: flex; flex-direction: row; justify-content: center; width: max-content; margin: 22px auto 0; rotate: -3deg; }
  .vip-hp__note .ah-hand__arrow { display: none; }
}
@media (max-width: 420px) {
  .vip-hp { width: min(100%, 300px); }
  .vip-hp__out { font-size: 11px; }
  .vip-hp__prev .vip-hp__med { width: 108px; }
}
@media (prefers-reduced-motion: no-preference) {
  .vip-hp__glare.is-go { animation: vip-glare 0.95s ease 0.1s forwards; }
  .vip-hp__sent.is-anim .vip-hp__med { animation: vip-spring 0.64s cubic-bezier(0.22, 1.42, 0.36, 1) both; }
  .vip-hp__sent.is-anim .vip-hp__out { animation: vip-spring 0.64s cubic-bezier(0.22, 1.42, 0.36, 1) 0.07s both; }
  .vip-hp__sent.is-anim .vip-hp__chip { animation: vip-fade 0.5s ease 0.25s both; }
  .vip-hp__compose:not(.is-empty) .vip-hp__send { animation: vip-send-pulse 1.4s ease-in-out 3; }
}
@keyframes vip-glare { to { transform: translateX(140%); } }
@keyframes vip-spring { 0% { transform: translateY(165px) scale(0.5); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes vip-fade { from { opacity: 0; } }
@keyframes vip-send-pulse { 50% { box-shadow: 0 0 0 6px rgba(47, 155, 255, 0.35); } }
/* the shop's own avatar (a plain storefront, never the Pawn Leads logo) */
.vip-ic { display: block; width: 62%; height: 62%; fill: none; stroke: var(--ah-cream); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vip-hp__who { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* the first lead line sits apart from the other two in the markup (phones move it under the phone); on wider
   screens it keeps the kit's 12px rhythm between lead lines */
@media (min-width: 768px) { .vip-hero .ah-phero__lead.vip-hero__lead1 { margin-bottom: 12px; } }
/* phones: the kit's hero order, page-scoped. Headline, then the cropped phone (this month's medallion and
   "Delivered to 4,183"), one lead line and the Apply button; the rest of the lead and the second button follow.
   The first iPhone screen holds the headline, the phone and the CTA. */
@media (max-width: 767px) {
  .vip-hero .ah-phero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .vip-hero .ah-phero__copy, .vip-hero__actions { display: contents; }
  .vip-hero .ah-crumbs { order: 1; align-self: flex-start; margin-bottom: 16px; }
  .vip-hero .ah-kicker { order: 2; align-self: flex-start; margin-bottom: 12px; font-size: 0.8rem; letter-spacing: 0.12em; }
  .vip-hero .ah-phero__h { order: 3; margin-bottom: 12px; }
  .vip-hero__object { order: 4; margin: 0 0 14px; }
  .vip-hero .ah-phero__lead.vip-hero__lead1 { order: 5; margin: 0 0 14px; }
  .vip-hero__apply { order: 6; align-self: flex-start; }
  .vip-hero__more { order: 7; margin-top: 26px; }
  .vip-hero__more .ah-phero__lead { margin-bottom: 12px; }
  .vip-hero__more .ah-phero__lead + .ah-phero__lead { margin-top: 0; }
  .vip-hero__how { order: 8; align-self: flex-start; margin-top: 8px; }
  .vip-hero .vip-catchline { order: 9; }

  /* the cropped phone: the newest bubble and its delivery line, the head on one row, no older bubble */
  .vip-hp { width: min(100%, 318px); padding: 4px 0 2px; }
  .vip-hp__spot { inset: -10% -24% -6%; }
  .vip-hp__phone { aspect-ratio: auto; height: 336px; padding: 8px; border-radius: 36px; rotate: -1.5deg; box-shadow: 7px 7px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
  .vip-hp__phone:hover { translate: none; box-shadow: 7px 7px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
  .vip-hp__key--a, .vip-hp__key--b { top: 16%; height: 30px; } .vip-hp__key--b { top: 28%; height: 44px; } .vip-hp__key--c { top: 22%; height: 60px; }
  .vip-hp__screen { border-radius: 28px; }
  .vip-hp__island { top: 8px; width: 66px; height: 19px; margin-left: -33px; }
  .vip-hp__status { padding: 11px 18px 0 22px; font-size: 11px; }
  .vip-hp__status svg { width: 44px; height: 10px; }
  .vip-hp__head { flex-direction: row; justify-content: center; gap: 9px; padding: 7px 12px 7px; }
  .vip-hp__ava { width: 30px; height: 30px; }
  .vip-hp__who { align-items: flex-start; gap: 3px; }
  .vip-hp__prev { display: none; }
  .vip-hp__chip { display: none; }
  .vip-hp__med--now { width: 33%; padding: 6px 6px 5px; border-radius: 14px 14px 5px 14px; }
  .vip-hp__medlabel { margin-top: 3px; font-size: 7.5px; }
  .vip-hp__out { max-width: 92%; padding: 6px 9px 7px; font-size: 10.5px; line-height: 1.35; }
  .vip-hp__sent { gap: 4px; padding-bottom: 6px; }
  .vip-hp__delivered { font-size: 9.5px; }
  .vip-hp__compose { padding: 4px 10px 3px; }
  .vip-hp__plus { flex-basis: 26px; width: 26px; height: 26px; }
  .vip-hp__pill { min-height: 30px; padding-block: 4px; }
  .vip-hp__send { width: 22px; height: 22px; }
  .vip-hp__home { flex-basis: 12px; }
  .vip-hp__home::before { width: 80px; }
  .vip-hp > .ah-sample { top: -4px; right: -6px; }
  .vip-hp__note { display: none !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  /* the cropped screen is short: the bubble springs up a shorter way */
  .vip-hp__sent.is-anim .vip-hp__med, .vip-hp__sent.is-anim .vip-hp__out { animation-name: vip-spring-sm; }
}
@keyframes vip-spring-sm { 0% { transform: translateY(90px) scale(0.6); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }

/* --------------------------------------------------------------------------
   2. OWN THE LIST: why a list (the merged coin-stack words), the rate card, then the scale
   -------------------------------------------------------------------------- */
.vip-own .ah-h2, .vip-med .ah-h2 { font-size: clamp(2.3rem, 1.2rem + 2.7vw, 3.75rem); }
.vip-own__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; margin-bottom: clamp(70px, 8vw, 112px); }
@media (min-width: 980px) { .vip-own__top { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(40px, 5vw, 84px); } }
.vip-own__why .ah-h2 { margin-bottom: 20px; }
.vip-own__why p { max-width: 31em; }
.vip-own__head .vip-own__h { font-size: clamp(2.1rem, 1.15rem + 2.4vw, 3.4rem); }

/* the rate card: what a customer costs, priced like the board behind the counter */
.vip-rate {
  position: relative; width: min(100%, 470px); margin: 0 auto; padding: 22px 24px 18px;
  border: 2px solid var(--ah-950); border-radius: 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  color: var(--ah-ink); box-shadow: 8px 8px 0 var(--ah-blue); rotate: -1deg;
}
.vip-rate::before { content: ""; position: absolute; inset: 7px; border: 2px solid var(--ah-ink); border-radius: 3px; pointer-events: none; }
.vip-rate__row { position: relative; display: grid; grid-template-columns: minmax(0, auto) minmax(16px, 1fr) auto; align-items: end; gap: 10px; padding: 16px 6px; }
.vip-rate__row + .vip-rate__row { border-top: 2px dashed rgba(11, 20, 36, 0.3); }
.vip-rate__what b { display: block; font: 900 clamp(1.15rem, 1rem + 0.5vw, 1.4rem)/1.05 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
.vip-rate__what span { display: block; margin-top: 5px; color: var(--ah-ink-2); font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
.vip-rate__dots { margin-bottom: 10px; border-bottom: 2.5px dotted rgba(11, 20, 36, 0.45); }
.vip-rate__amt { display: flex; align-items: center; gap: 8px; color: var(--ah-ink); font: 900 clamp(2rem, 1.5rem + 1.5vw, 2.8rem)/1 var(--ah-display); letter-spacing: 0.01em; white-space: nowrap; text-shadow: 0.05em 0.05em 0 rgba(27, 141, 246, 0.45); }
.vip-rate__row--old .vip-rate__amt { color: var(--ah-blue-ink); text-shadow: 0.05em 0.05em 0 rgba(255, 63, 134, 0.45); }
.vip-rate__coin { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2f5f9, #cfd7e1 55%, #9aa7b8); color: #4a5568; font: 900 1rem/1 var(--ah-display); text-shadow: none; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .vip-rate:not(.is-play) .vip-rate__row--old { opacity: 0; transform: translateY(10px); }
  .vip-rate.is-play .vip-rate__row--old { animation: vip-rise 0.6s var(--ease-back) 0.5s both; }
}
@keyframes vip-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 420px) {
  .vip-rate { padding: 18px 16px 14px; }
  .vip-rate__row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 4px; }
  .vip-rate__dots { display: none; }
  .vip-rate__what span { font-size: 0.88rem; }
}

/* --------------------------------------------------------------------------
   2b. OWN THE LIST: the brass scale standoff in a lit alcove
   -------------------------------------------------------------------------- */
.vip-gs {
  position: relative; width: 100%; max-width: 960px; margin: 0 auto;
  --gsBeamHalf: 274px; --gsChainLen: 122px; --gsPanW: 132px; --gsChA: 26deg; --gsPivotY: 100px; --gsTilt: -11deg; --cell: 24px;
}
.vip-gs.vip-gs--tipped { --gsTilt: 11deg; }
.vip-gs.vip-gs--notrans * { transition: none !important; }
.vip-gs > .ah-sample.ah-sample--low { top: -12px; bottom: auto; left: 50%; right: auto; translate: -50% 0; }
.vip-gs__scene {
  position: relative; height: 520px; overflow: hidden;
  border: 3px solid var(--ah-950); border-radius: 16px;
  background: linear-gradient(180deg, #0f1b33, #0a1325 72%);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(173, 229, 255, 0.08);
}
/* a warm printed light pool over the scale */
.vip-gs__scene::before {
  content: ""; position: absolute; z-index: 0; left: 14%; right: 14%; top: -10%; bottom: 8%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 226, 170, 0.42) 1.3px, transparent 1.8px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0.4) 55%, transparent 100%);
}
.vip-gs__mat { position: absolute; z-index: 1; left: 9%; right: 9%; bottom: 16px; height: 34px; border: 2px solid var(--ah-950); border-radius: 8px; background: radial-gradient(circle, rgba(173, 229, 255, 0.07) 1px, transparent 1.4px) 0 0 / 5px 5px, linear-gradient(180deg, #22356a, #142449); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45); }

/* the scale */
.vip-gs__scale { position: absolute; z-index: 2; left: 50%; bottom: 34px; width: 620px; height: 440px; transform: translateX(-50%); }
.vip-gs__base { position: absolute; bottom: 0; left: 50%; width: 200px; height: 18px; margin-left: -100px; border: 2px solid var(--ah-950); border-radius: 8px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5); }
.vip-gs__base::before { content: ""; position: absolute; bottom: 14px; left: 50%; width: 124px; height: 14px; margin-left: -62px; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass)); }
.vip-gs__pillar { position: absolute; left: 50%; top: calc(var(--gsPivotY) - 4px); bottom: 30px; width: 24px; margin-left: -12px; border: 2px solid var(--ah-950); border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(92, 66, 12, 0.45) 0 2px, transparent 2px 6px), linear-gradient(90deg, var(--ah-brass-lo), var(--ah-brass-hi) 45%, var(--ah-brass)); }
.vip-gs__pillar::before { content: ""; position: absolute; top: -9px; left: -8px; right: -8px; height: 10px; border: 2px solid var(--ah-950); border-radius: 5px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass-lo)); }
.vip-gs__pivot { position: absolute; z-index: 3; left: 50%; top: var(--gsPivotY); width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 36% 32%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); }
.vip-gs__pivot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ah-950); }
.vip-gs__beamwrap { position: absolute; z-index: 2; left: 50%; top: var(--gsPivotY); width: 0; height: 0; }
.vip-gs__beam {
  position: absolute; left: calc(-1 * var(--gsBeamHalf)); top: -6px; width: calc(2 * var(--gsBeamHalf)); height: 12px;
  border: 2px solid var(--ah-950); border-radius: 6px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo));
  transform-origin: var(--gsBeamHalf) 6px; transform: rotate(var(--gsTilt)); transition: transform 1.35s cubic-bezier(0.34, 1.3, 0.45, 1);
}
.vip-gs__needle { position: absolute; left: 50%; top: 8px; width: 5px; height: 32px; margin-left: -2.5px; border: 1.5px solid var(--ah-950); border-radius: 0 0 3px 3px; background: var(--ah-brass); }
.vip-gs__hang { position: absolute; top: 4px; width: 0; height: 0; }
.vip-gs__hang--l { left: 10px; } .vip-gs__hang--r { right: 10px; }
.vip-gs__hang::before { content: ""; position: absolute; left: -6px; top: -12px; width: 12px; height: 12px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-brass); }
.vip-gs__drop { position: absolute; left: 0; top: -2px; width: 0; height: 0; transform: rotate(calc(-1 * var(--gsTilt))); transform-origin: 0 0; transition: transform 1.35s cubic-bezier(0.34, 1.3, 0.45, 1); }
.vip-gs__ch { position: absolute; top: 0; left: -1.5px; width: 3px; height: calc(var(--gsChainLen) + 6px); transform-origin: top center; background: var(--ah-brass); box-shadow: 0 0 0 1.2px var(--ah-950); }
.vip-gs__ch--1 { transform: rotate(var(--gsChA)); } .vip-gs__ch--2 { transform: rotate(calc(-1 * var(--gsChA))); } .vip-gs__ch--3 { width: 2px; left: -1px; }
.vip-gs__pan { position: absolute; top: var(--gsChainLen); left: calc(var(--gsPanW) / -2); width: var(--gsPanW); height: 30px; border: 2px solid var(--ah-950); border-top-width: 3px; border-radius: 0 0 calc(var(--gsPanW) / 2) calc(var(--gsPanW) / 2) / 0 0 30px 30px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 45%, var(--ah-brass-lo)); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45); }
/* left pan: their cash */
.vip-gs__cash { position: absolute; top: calc(var(--gsChainLen) - 44px); left: -56px; width: 112px; height: 46px; }
.vip-gs__stack { position: absolute; bottom: 0; height: 30px; border: 2px solid var(--ah-950); border-radius: 2px; background: linear-gradient(90deg, transparent 38%, #e3e9d2 38%, #e3e9d2 62%, transparent 62%), repeating-linear-gradient(180deg, #8aa887 0 2px, #5d7a5c 2px 6px); }
.vip-gs__stack--1 { left: 0; width: 36px; transform: rotate(-2deg); }
.vip-gs__stack--2 { left: 38px; width: 38px; height: 42px; }
.vip-gs__stack--3 { left: 78px; width: 34px; transform: rotate(2.5deg); }
.vip-gs__tag { position: absolute; padding: 5px 7px 4px; border: 1.5px solid var(--ah-950); border-radius: 3px; background: var(--ah-cream); color: var(--ah-ink); font: 800 8.5px/1.3 var(--ah-mono); letter-spacing: 0.06em; text-align: center; white-space: nowrap; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55); }
.vip-gs__tag::before { content: ""; position: absolute; left: 50%; top: -18px; width: 1.5px; height: 18px; background: #e8dcc0; }
.vip-gs__tag::after { content: ""; position: absolute; left: 50%; top: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ah-ink); opacity: 0.6; }
.vip-gs__tag--1 { left: -128px; top: calc(var(--gsChainLen) + 44px); transform: rotate(-7deg); }
.vip-gs__tag--2 { left: -40px; top: calc(var(--gsChainLen) + 66px); transform: rotate(2deg); }
.vip-gs__tag--3 { left: 52px; top: calc(var(--gsChainLen) + 46px); transform: rotate(8deg); }
.vip-gs__tag-short { display: none; }
/* right pan: your nickel */
.vip-gs__nickel { position: absolute; top: calc(var(--gsChainLen) - 28px); left: -17px; width: 34px; height: 34px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2f5f9, #cfd7e1 55%, #9aa7b8); }
.vip-gs__nickel span { position: absolute; inset: 0; display: grid; place-items: center; color: #5d6a7d; font: 900 16px/1 var(--ah-display); }
.vip-gs__nickel::before { content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(93, 106, 125, 0.6); border-radius: 50%; }
.vip-gs__pile { position: absolute; top: calc(var(--gsChainLen) - 18px); left: -40px; width: 80px; height: 22px; opacity: 0; transition: opacity 0.5s ease 0.75s; }
.vip-gs--fired .vip-gs__pile { opacity: 1; }
.vip-gs__pile i { position: absolute; bottom: 0; width: 18px; height: 18px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); }
.vip-gs__pile i:nth-child(1) { left: 2px; } .vip-gs__pile i:nth-child(2) { left: 17px; bottom: 1px; } .vip-gs__pile i:nth-child(3) { left: 46px; }
.vip-gs__pile i:nth-child(4) { left: 60px; bottom: 1px; } .vip-gs__pile i:nth-child(5) { left: 31px; bottom: 10px; } .vip-gs__pile i:nth-child(6) { left: 11px; bottom: 9px; width: 16px; height: 16px; }
.vip-gs__rain { position: absolute; top: -42px; left: 0; width: 0; height: 0; }
.vip-gs__coin { position: absolute; top: 0; width: 16px; height: 16px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); animation: vip-coin-fall 0.62s cubic-bezier(0.45, 0.05, 0.85, 0.5) forwards; }
@keyframes vip-coin-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateY(calc(var(--gsChainLen) + 26px)) rotate(160deg); opacity: 0; } }
.vip-gs__bill { position: absolute; top: calc(var(--gsChainLen) - 40px); left: -52px; width: 46px; height: 20px; border: 2px solid var(--ah-950); border-radius: 2px; background: radial-gradient(circle at 50% 50%, #e3e9d2 0 4px, transparent 5px), linear-gradient(180deg, #8aa887, #5d7a5c); animation: vip-bill-fly 1.6s ease-in forwards; }
@keyframes vip-bill-fly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 35% { transform: translate(-58px, -44px) rotate(-52deg); opacity: 1; } 70% { transform: translate(-116px, 4px) rotate(-118deg); opacity: 0.9; } 100% { transform: translate(-150px, 88px) rotate(-190deg); opacity: 0; } }
/* the two counters: steel plates with cream number wheels */
.vip-gs__odo {
  position: absolute; z-index: 4; top: 16px; padding: 12px 12px 10px; text-align: center;
  border: 2px solid var(--ah-950); border-radius: 8px; color: var(--ah-ink);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px), linear-gradient(180deg, #edf1f6, #c6cfdb 55%, #aab5c4);
  box-shadow: 4px 4px 0 var(--ah-blue), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.vip-gs__odo::before, .vip-gs__odo::after { content: ""; position: absolute; top: 5px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.2px var(--ah-950); background: radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); }
.vip-gs__odo::before { left: 5px; } .vip-gs__odo::after { right: 5px; }
.vip-gs__odo--their { left: 16px; rotate: -1.2deg; }
.vip-gs__odo--yours { right: 16px; rotate: 1.2deg; box-shadow: 4px 4px 0 var(--ah-neon-pink), inset 0 1px 0 rgba(255, 255, 255, 0.75); opacity: 0; transform: translateY(-8px); transition: opacity 0.45s, transform 0.45s; }
.vip-gs--fired .vip-gs__odo--yours { opacity: 1; transform: none; }
.vip-gs__odo-label { font: 800 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.16em; }
.vip-gs__odo-sub { margin-top: 6px; color: var(--ah-ink-2); font: 700 0.6rem/1.2 var(--ah-mono); letter-spacing: 0.12em; }
.vip-gs__win { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 6px; padding: 4px 6px; border: 2px solid var(--ah-950); border-radius: 5px; background: #04060b; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8); }
.vip-gs__dollar, .vip-gs__comma { color: var(--ah-sky); font: 900 1.1rem/var(--cell) var(--ah-display); }
.vip-gs__comma { margin: 0 -1px; align-self: flex-end; }
.vip-gs__cell { position: relative; width: 18px; height: var(--cell); overflow: hidden; border-radius: 2px; background: linear-gradient(180deg, #fffaf0 0 48%, #ece2c8 52%, var(--ah-cream)); }
.vip-gs__strip { display: block; transform: translateY(calc(var(--d, 0) * var(--cell) * -1)); transition: transform 0.22s cubic-bezier(0.35, 0.7, 0.4, 1); }
.vip-gs__strip span { display: block; height: var(--cell); color: var(--ah-ink); font: 900 1.12rem/var(--cell) var(--ah-display); text-align: center; }
/* the send key: a Pawn blue face in a knurled steel housing */
.vip-gs__btnrow { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 30px; }
.vip-gs__btn {
  display: flex; align-items: stretch; min-height: 64px; margin: 0; padding: 6px;
  border: 3px solid var(--ah-950); border-radius: 12px; background: linear-gradient(180deg, #edf1f6, #9aa7b8);
  box-shadow: 0 6px 0 var(--ah-950), 6px 10px 0 rgba(0, 0, 0, 0.4); cursor: pointer; font: inherit;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.vip-gs__btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ah-950), 3px 4px 0 rgba(0, 0, 0, 0.4); }
.vip-gs__btn:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 5px; }
.vip-gs__knurl { width: 14px; border: 2px solid var(--ah-950); border-radius: 4px; background: repeating-linear-gradient(45deg, rgba(3, 6, 13, 0.5) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.45) 0 2px, transparent 2px 4px), linear-gradient(180deg, #cfd7e1, #6f7c90); }
.vip-gs__face { display: flex; align-items: center; justify-content: center; margin: 0 6px; padding: 12px 26px; border: 2px solid var(--ah-950); border-radius: 7px; background: var(--ah-blue); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 55%); color: var(--ah-ink); font: 900 1.35rem/1 var(--ah-display); letter-spacing: 0.14em; white-space: nowrap; }
.vip-gs__btn:hover .vip-gs__face { background-color: var(--ah-blue-hi); }
@media (prefers-reduced-motion: no-preference) {
  html.js .vip-gs:not(.vip-gs--fired) .vip-gs__beamwrap { animation: vip-wobble 3.5s ease-in-out infinite; }
}
@keyframes vip-wobble { 0%, 100% { transform: rotate(0deg); } 28% { transform: rotate(1.1deg); } 62% { transform: rotate(-0.9deg); } }
@media (max-width: 640px) {
  .vip-gs { --gsBeamHalf: 124px; --gsChainLen: 106px; --gsPanW: 100px; --gsChA: 23deg; --gsPivotY: 96px; --cell: 20px; }
  .vip-gs__scene { height: 560px; }
  .vip-gs__scale { width: 340px; height: 430px; bottom: 26px; }
  .vip-gs__base { width: 150px; margin-left: -75px; }
  .vip-gs__base::before { width: 92px; margin-left: -46px; }
  .vip-gs__pillar { width: 20px; margin-left: -10px; }
  .vip-gs__cash { left: -44px; width: 88px; transform: scale(0.86); transform-origin: bottom center; }
  .vip-gs__nickel { width: 30px; height: 30px; left: -15px; top: calc(var(--gsChainLen) - 25px); }
  .vip-gs__nickel span { font-size: 14px; }
  .vip-gs__pile { transform: scale(0.85); transform-origin: top center; }
  .vip-gs__tag { padding: 4px 6px 3px; font-size: 8px; }
  .vip-gs__tag::before { top: -13px; height: 13px; }
  .vip-gs__tag-full { display: none; }
  .vip-gs__tag-short { display: inline; }
  .vip-gs__tag--1 { left: -38px; top: calc(var(--gsChainLen) + 34px); }
  .vip-gs__tag--2 { left: -12px; top: calc(var(--gsChainLen) + 60px); }
  .vip-gs__tag--3 { left: 12px; top: calc(var(--gsChainLen) + 86px); }
  .vip-gs__odo { padding: 9px 8px 8px; }
  .vip-gs__odo-label { font-size: 0.62rem; letter-spacing: 0.1em; }
  .vip-gs__odo-sub { font-size: 0.52rem; letter-spacing: 0.06em; }
  .vip-gs__cell { width: 14px; }
  .vip-gs__strip span { font-size: 0.95rem; }
  .vip-gs__dollar, .vip-gs__comma { font-size: 0.95rem; }
  .vip-gs__odo--their { left: 7px; top: 9px; }
  .vip-gs__odo--yours { right: 7px; top: 9px; }
  .vip-gs__btnrow { gap: 12px; padding-top: 24px; }
  .vip-gs__btn { flex: 1; max-width: 320px; }
  .vip-gs__face { flex: 1; padding: 12px 8px; font-size: 1.12rem; letter-spacing: 0.1em; }
}
/* the old coin stack's 500x, now a paper tag on the nickel pan (it hangs straight: .vip-gs__drop counter-rotates) */
.vip-gs__ptag {
  position: absolute; top: calc(var(--gsChainLen) + 48px); left: -60px; width: 120px; padding: 18px 8px 9px; text-align: center;
  border: 2px solid var(--ah-950); border-radius: 4px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-neon-pink); transform: rotate(4deg); transform-origin: 50% -22px;
}
.vip-gs__ptag::before { content: ""; position: absolute; left: 50%; top: -24px; width: 1.5px; height: 26px; background: #e8dcc0; }
.vip-gs__ptag::after { content: ""; position: absolute; left: 50%; top: 6px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--ah-800); box-shadow: 0 0 0 1.5px var(--ah-950), 0 0 0 3px var(--ah-brass), 0 0 0 4px var(--ah-950); }
.vip-gs__ptag b { display: block; font: 900 2rem/0.9 var(--ah-display); letter-spacing: 0.01em; text-shadow: 0.05em 0.05em 0 rgba(255, 63, 134, 0.5); }
.vip-gs__ptag span { display: block; margin-top: 5px; color: var(--ah-ink-2); font: 800 0.56rem/1.3 var(--ah-mono); letter-spacing: 0.08em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .vip-gs--tipped .vip-gs__ptag { animation: vip-tagswing 1.6s ease-in-out 1.1s 1; }
}
@keyframes vip-tagswing { 25% { transform: rotate(-6deg); } 55% { transform: rotate(8deg); } 80% { transform: rotate(2deg); } }
@media (max-width: 640px) {
  .vip-gs__ptag { top: calc(var(--gsChainLen) + 38px); left: -50px; width: 100px; padding: 15px 6px 7px; }
  .vip-gs__ptag::before { top: -18px; height: 20px; }
  .vip-gs__ptag b { font-size: 1.6rem; }
  .vip-gs__ptag span { font-size: 0.5rem; letter-spacing: 0.04em; }
}


/* --------------------------------------------------------------------------
   3. BIG-BOX HOLIDAYS: three tear-off days pinned to a line
   -------------------------------------------------------------------------- */
.vip-bx { --deco-at: 100% 0; --deco-size: 40% 55%; }
.vip-bx__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 60px; align-items: start; }
@media (min-width: 980px) { .vip-bx__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.vip-bx__copy p { max-width: 30em; }
.vip-bx__copy .vip-bx__days { color: var(--ah-paper); font: 900 clamp(1.5rem, 1.15rem + 1vw, 2rem)/1.08 var(--ah-display); letter-spacing: 0.01em; }
.vip-bx__line { position: relative; max-width: 980px; margin: clamp(44px, 5vw, 70px) auto 0; }
.vip-bx__cord { position: absolute; z-index: 0; left: -2%; top: 0; width: 104%; height: 80px; overflow: visible; }
.vip-bx__cord path { fill: none; stroke: #e8dcc0; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1.5px 0 var(--ah-950)); }
.vip-bx__pages { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 3.4vw, 46px); padding: 0 4%; }
.vip-bx__page {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 8px 18px;
  border: 2px solid var(--ah-950); border-radius: 4px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); transform-origin: 50% -16px;
}
.vip-bx__page--1 { margin-top: 36px; rotate: -3deg; }
.vip-bx__page--2 { margin-top: 54px; rotate: 2deg; box-shadow: 6px 6px 0 var(--ah-neon-pink); }
.vip-bx__page--3 { margin-top: 34px; rotate: -1.5deg; box-shadow: 6px 6px 0 var(--ah-sky); }
/* tear-off holes along the top, then the red month band */
.vip-bx__page::before { content: ""; position: absolute; left: 6px; right: 6px; top: 5px; height: 6px; background: radial-gradient(circle, var(--ah-950) 2px, transparent 2.4px) 0 50% / 12px 6px repeat-x; opacity: 0.5; }
.vip-bx__pin { position: absolute; z-index: 2; top: -24px; left: 50%; width: 14px; height: 36px; margin-left: -7px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(90deg, #9c7046, #e0b98a 45%, #b88a55); }
.vip-bx__pin::after { content: ""; position: absolute; left: -4px; right: -4px; top: 13px; height: 5px; border: 1.5px solid var(--ah-950); border-radius: 2px; background: #9aa7b8; }
.vip-bx__mon { align-self: stretch; margin: 16px -8px 0; padding: 8px 0 6px; border-block: 2px solid var(--ah-950); background: var(--ah-red-ink); color: var(--ah-cream); font: 900 clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem)/1 var(--ah-display); letter-spacing: 0.22em; text-indent: 0.22em; text-align: center; }
.vip-bx__num { margin-top: 10px; color: var(--ah-ink); font: 900 clamp(2.7rem, 1.6rem + 3.6vw, 4.6rem)/0.95 var(--ah-display); letter-spacing: 0.01em; text-shadow: 0.04em 0.04em 0 rgba(27, 141, 246, 0.55); }
.vip-bx__holi { margin-top: 6px; color: var(--ah-ink-2); font: 800 clamp(0.74rem, 0.66rem + 0.35vw, 1rem)/1.2 var(--ah-body); text-align: center; }
.vip-bx__tape { max-width: 880px; margin-top: clamp(34px, 4vw, 50px); }
.vip-bx__tape .ah-total__tape { font-size: clamp(0.92rem, 0.86rem + 0.25vw, 1.05rem); }
.vip-bx__tape .ah-total__tape b { white-space: nowrap; margin: 0; color: var(--ah-blue-ink); font: 800 1em/1.6 var(--ah-mono); vertical-align: baseline; }
.vip-bx__plane { display: inline-block; width: 20px; height: 20px; margin-right: 4px; vertical-align: -4px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) {
  .vip-bx__pages { padding: 0; }
  .vip-bx__page { padding: 0 4px 12px; }
  .vip-bx__mon { margin-inline: -4px; }
  .vip-bx__page--1 { margin-top: 30px; } .vip-bx__page--2 { margin-top: 44px; } .vip-bx__page--3 { margin-top: 28px; }
}
/* each holiday page has the VIP text sent that week clipped under it */
.vip-bx__line > .ah-sample { top: 0; right: 1%; }
.vip-bx__day { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.vip-bx__day .vip-bx__page { align-self: stretch; }
.vip-bx__sent {
  position: relative; display: flex; align-items: center; gap: 9px; width: min(100%, 214px); margin: 22px 0 0; padding: 8px 12px 8px 8px;
  border: 2px solid var(--ah-950); border-radius: 16px 16px 16px 5px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  color: var(--ah-ink); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); rotate: 1.5deg;
}
.vip-bx__day:nth-child(2) .vip-bx__sent { rotate: -2deg; }
.vip-bx__day:nth-child(3) .vip-bx__sent { rotate: 2.4deg; }
.vip-bx__sent img { flex: none; width: 42px; height: 42px; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.3)); }
.vip-bx__sentt { color: var(--ah-ink-2); font: 700 0.84rem/1.25 var(--ah-body); }
.vip-bx__sentt b { display: block; color: var(--ah-ink); font-weight: 800; }
/* the paper clip that holds it to the page */
.vip-bx__clip { position: absolute; top: -20px; left: 46%; width: 13px; height: 32px; border: 2.5px solid #cfd7e1; border-radius: 7px; box-shadow: 0 0 0 1px var(--ah-950), inset 0 0 0 1px var(--ah-950); rotate: 8deg; }
.vip-bx__clip::after { content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 5px; bottom: -2px; border: 2px solid #cfd7e1; border-top: 0; border-radius: 0 0 5px 5px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .vip-bx__line:not(.is-play) .vip-bx__sent { opacity: 0; transform: translateY(-10px); }
  .vip-bx__line.is-play .vip-bx__sent { animation: vip-rise 0.55s var(--ease-back) both; }
  .vip-bx__line.is-play .vip-bx__day:nth-child(2) .vip-bx__sent { animation-delay: 0.15s; }
  .vip-bx__line.is-play .vip-bx__day:nth-child(3) .vip-bx__sent { animation-delay: 0.3s; }
}
@media (max-width: 640px) {
  .vip-bx__sent { flex-direction: column; gap: 4px; padding: 7px 6px 8px; border-radius: 14px 14px 14px 5px; text-align: center; }
  .vip-bx__sent img { width: 34px; height: 34px; }
  .vip-bx__sentt { font-size: 0.72rem; }
}

/* --------------------------------------------------------------------------
   4. PROBLEM 1: the price tag in the lit jewelry case
   -------------------------------------------------------------------------- */
.vip-p1 { --deco-at: 0 100%; }
.vip-ladder { display: grid; gap: 8px; max-width: 32em; margin: 12px 0; counter-reset: vip-ladder; }
.vip-ladder li { position: relative; padding: 2px 0 2px 46px; color: var(--ah-fog); font-size: 1.1rem; line-height: 1.5; counter-increment: vip-ladder; }
.vip-ladder li::before { content: counter(vip-ladder, upper-roman); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 34px; height: 26px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: var(--ah-sky); font: 900 0.95rem/1 var(--ah-display); letter-spacing: 0.06em; box-shadow: 2px 2px 0 var(--ah-blue); }
.vip-ladder li:last-child { color: var(--ah-paper); }
.vip-ladder li:last-child::before { background: var(--ah-neon-pink); color: var(--ah-ink); box-shadow: 2px 2px 0 var(--ah-950); }

.vip-mt { --mt-tagw: 214px; --mt-b: 1; --mt-sat: 1; --mt-tb: 1; --mt-x: 62%; position: relative; width: min(100%, 480px); margin: 0 auto; }
.vip-mt.vip-mt--s1 { --mt-b: 0.85; --mt-sat: 0.82; --mt-tb: 0.97; }
.vip-mt.vip-mt--s2 { --mt-b: 0.7; --mt-sat: 0.62; --mt-tb: 0.94; }
.vip-mt.vip-mt--s3 { --mt-b: 0.55; --mt-sat: 0.42; --mt-tb: 0.9; }
.vip-mt.vip-mt--s4 { --mt-b: 0.42; --mt-sat: 0.22; --mt-tb: 0.86; }
.vip-mt.vip-mt--full { --mt-b: 1; --mt-sat: 1; --mt-tb: 1; }
.vip-mt__scene { position: relative; height: 504px; }
.vip-mt__case { position: absolute; left: 0; right: 0; top: 0; height: 288px; padding: 10px; border: 2px solid var(--ah-950); border-radius: 14px; background: linear-gradient(135deg, #e7edf4 0%, #a7b3c3 22%, #dfe6ee 44%, #8996a8 70%, #cfd7e1 100%); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.vip-mt__inner { position: relative; height: 100%; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 6px; background: linear-gradient(180deg, #0b1528, #12224a 55%, #0a1426); filter: brightness(var(--mt-b)) saturate(var(--mt-sat)); transition: filter 1.3s ease; }
/* the case light: a tube along the top */
.vip-mt__strip { position: absolute; z-index: 2; top: 7px; left: 6%; right: 6%; height: 8px; border: 1.5px solid var(--ah-950); border-radius: 5px; background: #fff3cf; box-shadow: 0 0 10px 2px rgba(255, 225, 150, 0.6); }
.vip-mt__cone { position: absolute; z-index: 0; top: 14px; left: var(--mt-x); width: 270px; height: 250px; margin-left: -135px; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); background: radial-gradient(circle, rgba(255, 230, 180, 0.5) 1.3px, transparent 1.8px) 0 0 / 8px 8px; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.25) 85%, transparent); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.25) 85%, transparent); }
.vip-mt__bust { position: absolute; z-index: 1; left: 17%; bottom: 0; width: 86px; height: 134px; margin-left: -43px; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 44px 44px 6px 6px; background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.4px) 0 0 / 5px 5px, linear-gradient(180deg, #3a2348, #22142d 75%); }
.vip-mt__bust::before { content: ""; position: absolute; left: 50%; top: 24px; width: 48px; height: 42px; margin-left: -24px; border: 2.5px solid transparent; border-bottom-color: var(--ah-brass); border-radius: 50%; }
.vip-mt__bust::after { content: ""; position: absolute; left: 50%; top: 62px; width: 9px; height: 11px; margin-left: -4.5px; border: 1.5px solid var(--ah-950); border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--ah-sky); }
.vip-mt__plinth { position: absolute; z-index: 1; left: var(--mt-x); bottom: 0; width: 230px; height: 70px; margin-left: -115px; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 10px 10px 0 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.4px) 0 0 / 5px 5px, linear-gradient(180deg, #23386a, #142449); }
.vip-mt__plinth::before { content: ""; position: absolute; left: 50%; top: -14px; width: 70px; height: 30px; margin-left: -35px; border: 2px solid var(--ah-950); border-radius: 50% 50% 8px 8px / 70% 70% 8px 8px; background: linear-gradient(180deg, #2b4280, #182b5a); }
.vip-mt__ring { position: absolute; z-index: 2; left: var(--mt-x); bottom: 72px; width: 78px; height: 82px; margin-left: -39px; overflow: visible; }
.vip-mt__gem { fill: #dff4ff; stroke: var(--ah-950); stroke-width: 2.4; stroke-linejoin: round; }
.vip-mt__cut { fill: none; stroke: #8fc6ec; stroke-width: 1.4; stroke-linejoin: round; }
.vip-mt__band { fill: none; stroke: var(--ah-950); stroke-width: 13; }
.vip-mt__bandin { fill: none; stroke: var(--ah-brass); stroke-width: 7; }
.vip-mt__glass { position: absolute; inset: 12px; z-index: 3; border-radius: 6px; pointer-events: none; background: linear-gradient(118deg, transparent 0 14%, rgba(200, 230, 255, 0.1) 14% 24%, transparent 24% 27%, rgba(200, 230, 255, 0.07) 27% 29%, transparent 29% 70%, rgba(200, 230, 255, 0.05) 70% 82%, transparent 82%); }
.vip-mt__hang { position: absolute; z-index: 4; left: var(--mt-x); top: 150px; width: var(--mt-tagw); margin-left: calc(var(--mt-tagw) / -2); transform-origin: 50% 0; }
.vip-mt__string { position: absolute; left: 50%; top: -10px; width: 2.5px; height: 62px; margin-left: -1.25px; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
.vip-mt__string::before { content: ""; position: absolute; top: -6px; left: -4.5px; width: 11px; height: 11px; border: 2.5px solid #e8dcc0; border-radius: 50%; box-shadow: 0 0 0 1px var(--ah-950), inset 0 0 0 1px var(--ah-950); }
.vip-mt__tag {
  position: relative; display: block; width: 100%; margin: 46px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ah-ink); text-align: center; font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  filter: brightness(var(--mt-tb)) var(--ah-outline) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.6));
  transition: filter 1.3s ease, transform 0.35s var(--ease-back);
}
.vip-mt__hang:hover .vip-mt__tag { transform: translateY(-5px); }
.vip-mt__tag:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 8px; border-radius: 6px; }
.vip-mt__paper { position: relative; display: block; min-height: 268px; padding: 44px 16px 50px; background-color: var(--ah-cream); background-image: var(--ah-fiber); clip-path: polygon(18% 0, 82% 0, 100% 40px, 100% 100%, 0 100%, 0 40px); }
.vip-mt__eyelet { position: absolute; top: 12px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--ah-900); box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 5px var(--ah-brass), 0 0 0 7px var(--ah-950); }
.vip-mt__item { display: block; color: var(--ah-ink-2); font: 800 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.16em; }
.vip-mt__price { --mt-ink: var(--ah-blue-ink); position: relative; display: inline-block; margin-top: 4px; padding: 0 6px; color: var(--ah-ink); font: 900 3rem/1.05 var(--ah-display); letter-spacing: 0.01em; text-shadow: 0.05em 0.05em 0 rgba(27, 141, 246, 0.6); }
.vip-mt__price::after, .vip-mt__mark::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 3.5px; border-radius: 2px; background: var(--mt-ink, var(--ah-blue-ink)); transform: rotate(-3deg) scaleX(0); transform-origin: 0 50%; transition: transform 0.35s ease; }
.vip-mt__price.is-struck::after, .vip-mt__mark.is-struck::after { transform: rotate(-3deg) scaleX(1); }
.vip-mt__marks { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; margin-top: 10px; }
.vip-mt__mark { position: relative; font: 400 1.18rem/1.2 var(--ah-hand); opacity: 0; transform: translateY(-6px) rotate(var(--mt-rot, 0deg)) scale(0.92); transition: opacity 0.45s ease, transform 0.45s ease; }
.vip-mt__mark.is-on { opacity: 1; transform: translateY(0) rotate(var(--mt-rot, 0deg)) scale(1); }
.vip-mt__mark--1 { --mt-rot: -2deg; --mt-ink: #34425b; margin-left: 8px; color: var(--ah-blue-ink); }
.vip-mt__mark--2 { --mt-rot: 1.7deg; --mt-ink: #1e6b3c; margin-left: 42px; color: #34425b; }
.vip-mt__mark--3 { --mt-rot: -1.2deg; --mt-ink: var(--ah-red-ink); margin-left: 76px; color: #1e6b3c; }
.vip-mt__mark--4 { --mt-rot: -4deg; align-self: center; margin-top: 4px; color: var(--ah-red-ink); font-size: 1.42rem; }
.vip-mt__firm { position: absolute; left: 0; right: 0; bottom: 16px; color: var(--ah-ink-2); font: 800 0.74rem/1 var(--ah-mono); letter-spacing: 0.26em; text-indent: 0.26em; }
.vip-mt__firm::before, .vip-mt__firm::after { content: ""; position: absolute; left: 18%; right: 18%; top: 38%; height: 4px; border-radius: 3px; background: var(--ah-red-ink); transform: rotate(-3deg) scaleX(0); transform-origin: 0 50%; transition: transform 0.4s ease 0.12s; }
.vip-mt__firm::after { top: 66%; height: 3px; transform: rotate(2deg) scaleX(0); transition-delay: 0.3s; }
.vip-mt__firm.is-struck::before { transform: rotate(-3deg) scaleX(1); }
.vip-mt__firm.is-struck::after { transform: rotate(2deg) scaleX(1); }
.vip-mt__hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; color: var(--ah-fog); font-size: 0.98rem; font-weight: 700; }
.vip-mt__tap { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ah-sky); stroke-width: 2; stroke-linecap: round; }
.vip-mt.is-instant *, .vip-mt.is-instant *::before, .vip-mt.is-instant *::after { transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .vip-mt.is-sway .vip-mt__hang { animation: vip-sway 1.6s ease-in-out 4 alternate; }
}
@keyframes vip-sway { from { rotate: -2deg; } to { rotate: 2deg; } }
@media (max-width: 480px) {
  .vip-mt { --mt-tagw: min(76%, 260px); --mt-x: 56%; }
  .vip-mt__bust { display: none; }
  .vip-mt__case { height: 262px; }
  .vip-mt__hang { top: 140px; }
  .vip-mt__plinth { width: 190px; margin-left: -95px; }
  .vip-mt__scene { height: 500px; }
}
/* --------------------------------------------------------------------------
   5. THE FIX: the counter talk and the RCPT-80 printer
   -------------------------------------------------------------------------- */
.vip-fix__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 1000px) { .vip-fix__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 48px; } }
.vip-fix__chat { width: min(100%, 440px); margin: 0 auto; }

.vip-zr { position: relative; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 16px 36px; align-items: start; width: 100%; max-width: 640px; margin: 0 auto; padding: 4px 0 10px; }
.vip-zr__col { position: relative; z-index: 2; min-width: 0; }
.vip-zr__col > .ah-sample { top: -14px; right: 4px; }
.vip-zr__printer { position: relative; z-index: 4; height: 80px; border: 3px solid var(--ah-950); border-radius: 16px 16px 9px 9px; background: linear-gradient(180deg, #4a5568, #2d3647 45%, #1a202c); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.14); }
.vip-zr__printer::before { content: ""; position: absolute; top: 10px; left: 22px; right: 22px; height: 12px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(3, 6, 13, 0.6) 0 5px, transparent 5px 12px); }
.vip-zr__plabel { position: absolute; left: 20px; top: 31px; color: #aebed3; font: 800 0.62rem/1 var(--ah-mono); letter-spacing: 0.14em; }
.vip-zr__led { position: absolute; right: 18px; top: 29px; width: 12px; height: 12px; border: 2px solid var(--ah-950); border-radius: 50%; background: #1d3527; transition: background-color 0.5s; }
.vip-zr__led.is-on { background: #35d07f; box-shadow: 0 0 8px 2px rgba(53, 208, 127, 0.7); }
.vip-zr__slot { position: absolute; left: 14px; right: 14px; bottom: 15px; height: 9px; border: 1.5px solid var(--ah-950); border-radius: 5px; background: #05070c; }
.vip-zr__tearbar { position: absolute; left: 20px; right: 20px; bottom: 5px; height: 7px; background: radial-gradient(circle at 3px 0, #cfd7e1 3px, transparent 3.4px) 0 0 / 6px 7px repeat-x; }
.vip-zr__feed { position: relative; z-index: 2; margin-top: -12px; padding-bottom: 12px; overflow: hidden; }
.vip-zr__paper { position: relative; width: calc(100% - 34px); margin: 0 auto; filter: var(--ah-outline) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.5)); }
.vip-zr__receipt, .vip-zr__perf, .vip-zr__stub { background-color: #fbf9f2; background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(11, 20, 36, 0.035) 23px 24px); color: var(--ah-ink); font-family: var(--ah-mono); }
.vip-zr__receipt { position: relative; padding: 18px 16px 14px; font-size: 0.78rem; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }
.vip-zr__shop { margin-bottom: 4px; text-align: center; font-size: 0.98rem; font-weight: 800; letter-spacing: 0.18em; }
.vip-zr__meta { color: var(--ah-ink-2); font-size: 0.7rem; letter-spacing: 0.06em; text-align: center; }
.vip-zr__rule { margin: 10px 0; border-top: 2px dashed rgba(11, 20, 36, 0.35); }
.vip-zr__rule--dbl { border-top: 4px double var(--ah-ink); }
.vip-zr__li { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.vip-zr__dots { flex: 1; min-width: 8px; border-bottom: 2px dotted rgba(11, 20, 36, 0.4); transform: translateY(-3px); }
.vip-zr__amt { font-weight: 700; }
.vip-zr__li--neg { color: var(--ah-blue-ink); }
.vip-zr__li--neg .vip-zr__amt { font-weight: 800; }
.vip-zr__due { display: flex; align-items: baseline; justify-content: space-between; margin: 10px 0 2px; font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; }
.vip-zr__due-amt { color: var(--ah-ink); font: 900 1.9rem/1 var(--ah-display); letter-spacing: 0.01em; }
.vip-zr__tender { margin-bottom: 2px; color: var(--ah-ink-2); font-size: 0.7rem; letter-spacing: 0.04em; }
.vip-zr__fine { margin-bottom: 8px; color: var(--ah-ink-2); font-size: 0.64rem; letter-spacing: 0.2em; text-align: center; }
.vip-zr__barcode { height: 34px; margin: 0 22px 2px; background: repeating-linear-gradient(90deg, var(--ah-ink) 0 2px, transparent 2px 4px, var(--ah-ink) 4px 7px, transparent 7px 8px, var(--ah-ink) 8px 9px, transparent 9px 13px, var(--ah-ink) 13px 15px, transparent 15px 16px, var(--ah-ink) 16px 17px, transparent 17px 21px, var(--ah-ink) 21px 22px, transparent 22px 24px); }
.vip-zr__bcnum { color: var(--ah-ink-2); font-size: 0.6rem; letter-spacing: 0.34em; text-align: center; }
/* the rubber stamp (red ink on thermal paper) */
.vip-zr__stamp {
  position: absolute; z-index: 5; left: 54%; top: calc(100% - 46px); width: 214px; padding: 6px; pointer-events: none;
  border: 3.5px solid var(--ah-red-ink); border-radius: 8px; color: var(--ah-red-ink);
  transform: translate(-50%, -50%) rotate(-12deg) scale(1.6); opacity: 0;
  -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px;
}
.vip-zr__stamp.is-flat { opacity: 0.92; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
.vip-zr__stamp-in { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 6px 6px; border: 1.5px solid currentColor; border-radius: 4px; text-align: center; }
.vip-zr__stamp-in span:first-child { font: 900 1.45rem/1 var(--ah-display); letter-spacing: 0.08em; }
.vip-zr__stamp-sub { font: 900 0.86rem/1 var(--ah-display); letter-spacing: 0.42em; text-indent: 0.42em; }
/* the perforation: a real button once the receipt has printed */
.vip-zr__perf { position: relative; display: block; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; cursor: pointer; overflow: hidden; }
.vip-zr__perf:disabled { cursor: default; }
.vip-zr__perf-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(11, 20, 36, 0.45); transform: translateY(-1px); }
.vip-zr__perf-tag { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: #fbf9f2; color: var(--ah-ink-2); font: 800 0.66rem/1 var(--ah-mono); letter-spacing: 0.22em; opacity: 0; transition: opacity 0.4s ease, color 0.2s ease; }
.vip-zr__perf-tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vip-zr__perf.is-live .vip-zr__perf-tag { opacity: 1; }
.vip-zr__perf.is-live:hover .vip-zr__perf-tag, .vip-zr__perf.is-live:focus-visible .vip-zr__perf-tag { color: var(--ah-blue-ink); }
.vip-zr__perf:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: -4px; }
.vip-zr__perf::after { content: ""; position: absolute; left: -40%; top: 0; bottom: 0; width: 34%; opacity: 0; pointer-events: none; background: linear-gradient(100deg, transparent 12%, rgba(27, 141, 246, 0.22) 50%, transparent 88%); }
.vip-zr__stub { position: relative; padding: 12px 16px 20px; text-align: center; -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 8px) no-repeat, var(--ah-zigzag) 0 100% / 16px 9px repeat-x; mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 8px) no-repeat, var(--ah-zigzag) 0 100% / 16px 9px repeat-x; }
.vip-zr__receipt { -webkit-mask: var(--ah-zigzag) 0 0 / 16px 9px repeat-x, linear-gradient(#000 0 0) 0 8px / 100% calc(100% - 8px) no-repeat; mask: var(--ah-zigzag) 0 0 / 16px 9px repeat-x, linear-gradient(#000 0 0) 0 8px / 100% calc(100% - 8px) no-repeat; }
.vip-zr__vip { font: 900 1.55rem/1 var(--ah-display); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.vip-zr__msg { margin-top: 4px; color: var(--ah-ink-2); font-size: 0.66rem; letter-spacing: 0.3em; text-indent: 0.3em; }
.vip-zr__fly { position: absolute; z-index: 7; margin: 0; pointer-events: none; filter: var(--ah-outline) drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.5)); }
@media (prefers-reduced-motion: no-preference) {
  .vip-zr__paper.is-judder { animation: vip-judder 0.13s steps(2, end) infinite; }
  .vip-zr__paper.is-shake { animation: vip-shake 0.18s ease-out 1; }
  .vip-zr__stamp.is-slam { animation: vip-slam 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards; }
  .vip-zr__due.is-bloom .vip-zr__due-amt, .vip-zr__stub.is-bloom .vip-zr__vip { animation: vip-bloom 1s ease-out 1; }
  .vip-zr__perf.is-live::after { opacity: 1; animation: vip-perf-glint 2.6s ease-in-out 3; }
}
@keyframes vip-judder { 0% { transform: translateY(0); } 50% { transform: translateY(1.5px); } 100% { transform: translateY(0); } }
@keyframes vip-shake { 30% { transform: translate(-1.5px, 2px); } 60% { transform: translate(1.5px, -1px); } }
@keyframes vip-slam { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.6); } 62% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(0.94); } 100% { opacity: 0.92; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }
@keyframes vip-bloom { 22% { color: var(--ah-blue-ink); transform: scale(1.08); } }
@keyframes vip-perf-glint { 0%, 55% { transform: translateX(0); } 85%, 100% { transform: translateX(440%); } }
.vip-zr__due-amt, .vip-zr__vip { display: inline-block; }

/* one receipt, no spike and no tally note; the stamp sits on its own blank stretch of paper */
.vip-zr { grid-template-columns: minmax(0, 330px); justify-content: center; max-width: 360px; }
/* tall enough for the stamp at its -12deg tilt (about 101px of paper), so it clears TENDER above and the rule below */
.vip-zr__blank { position: relative; height: 112px; }
.vip-zr__blank .vip-zr__stamp { top: 50%; left: 50%; }
@media (max-width: 700px) { .vip-zr { grid-template-columns: minmax(0, 330px); max-width: 360px; } }

/* --------------------------------------------------------------------------
   6. PROBLEM 2: the medallion showcase in a lit glass coin case
   (the showcase is a Jeff KEEP, kept verbatim: only the frame changed, from the lamp to the case)
   -------------------------------------------------------------------------- */
.vip-med { --deco-at: 100% 0; }
.vip-med .ah-copy p { max-width: 32em; }
@media (min-width: 980px) { .vip-med__split.ah-split { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); } }
/* the case: a steel frame, a light tube along the top, velvet inside, glass in front */
.vip-med__vitrine {
  position: relative; width: min(100%, 440px); margin: 0 auto; padding: 13px;
  border: 2px solid var(--ah-950); border-radius: 16px;
  background: linear-gradient(135deg, #e7edf4 0%, #a7b3c3 22%, #dfe6ee 44%, #8996a8 70%, #cfd7e1 100%);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.vip-med__vitrine::before, .vip-med__vitrine::after { content: ""; position: absolute; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ah-steel-c); box-shadow: 0 0 0 1.5px var(--ah-950), inset 1px 1px 0 rgba(255, 255, 255, 0.5); }
.vip-med__vitrine::before { left: 18px; } .vip-med__vitrine::after { right: 18px; }
.vip-med__tube { position: absolute; z-index: 4; top: 21px; left: 12%; right: 12%; height: 8px; border: 1.5px solid var(--ah-950); border-radius: 5px; background: #fff3cf; box-shadow: 0 0 10px 2px rgba(255, 225, 150, 0.6); }
.vip-med__glass {
  position: relative; overflow: hidden; padding: 40px clamp(14px, 5%, 26px) 22px;
  border: 2px solid var(--ah-950); border-radius: 8px;
  background: radial-gradient(circle, rgba(173, 229, 255, 0.05) 1px, transparent 1.4px) 0 0 / 5px 5px, linear-gradient(180deg, #0f1a36, #0a1226 70%, #08101f);
}
/* the case light falling on the velvet: printed dots, never a blur */
.vip-med__pool { position: absolute; z-index: 0; top: 10px; left: 50%; width: 120%; height: 92%; translate: -50% 0; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: radial-gradient(circle, rgba(255, 230, 180, 0.42) 1.3px, transparent 1.8px) 0 0 / 8px 8px; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.3) 80%, transparent); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.3) 80%, transparent); pointer-events: none; }
.vip-med__feature { position: relative; z-index: 2; display: grid; place-items: center; width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
/* the velvet coin pad with a brass bezel */
.vip-med__pad { position: absolute; inset: 1%; border: 3px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle, rgba(173, 229, 255, 0.06) 1px, transparent 1.4px) 0 0 / 5px 5px, radial-gradient(circle at 50% 42%, #24386a, #142449 62%, #0d1834); box-shadow: inset 0 0 0 7px var(--ah-brass), inset 0 0 0 9px var(--ah-950), 6px 8px 0 rgba(0, 0, 0, 0.5); }
.vip-med__ring { position: absolute; inset: 9%; border: 2px dashed rgba(255, 227, 161, 0.55); border-radius: 50%; }
.vip-med__spk { position: absolute; z-index: 3; width: 7cqi; height: 7cqi; fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); }
.vip-med__spk--a { top: 3%; left: 62%; } .vip-med__spk--b { top: 46%; right: -2%; width: 5cqi; height: 5cqi; } .vip-med__spk--c { bottom: 6%; left: 14%; width: 4.4cqi; height: 4.4cqi; }
.vip-med__feature img { position: relative; z-index: 2; width: 86%; height: auto; filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.5)); opacity: 0; transform: scale(0.9) rotate(-6deg); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1); }
.vip-med__feature img.is-show { opacity: 1; transform: none; }
/* the velvet riser the pad stands on, with its brass plate */
.vip-med__riser {
  position: relative; z-index: 1; display: flex; justify-content: center; width: 88%; margin: -30px auto 0; padding: 40px 10px 14px;
  border: 2px solid var(--ah-950); border-radius: 12px 12px 4px 4px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.4px) 0 0 / 5px 5px, linear-gradient(180deg, #2b4280, #182b5a 60%, #13234a);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.08);
}
.ah-nameplate.vip-med__plate { padding: 8px 14px 7px; }
.vip-med__plate-in { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vip-med__plate-t { font-size: 0.6rem; letter-spacing: 0.18em; }
.vip-med__plate-m { font-size: 1.35rem; letter-spacing: 0.1em; }
/* glass in front: two printed glints */
.vip-med__glint { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(118deg, transparent 0 14%, rgba(200, 230, 255, 0.08) 14% 23%, transparent 23% 26%, rgba(200, 230, 255, 0.05) 26% 28%, transparent 28% 72%, rgba(200, 230, 255, 0.05) 72% 82%, transparent 82%); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .vip-med__ring { animation: ah-spin 40s linear infinite; }
  html.motion .vip-med__spk { animation: vip-twinkle 3s ease-in-out infinite; }
  html.motion .vip-med__spk--b { animation-delay: 1s; } html.motion .vip-med__spk--c { animation-delay: 2s; }
}
@keyframes vip-twinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1); } }
.vip-med__tray { margin-top: clamp(48px, 5vw, 72px); }
.vip-med__twelve { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.vip-med__twelve p { margin-inline: auto; }
.vip-med__twelve .vip-med__punch { max-width: none; color: var(--ah-paper); font: 900 clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1 var(--ah-display); letter-spacing: 0.01em; }
.vip-med__twelve .vip-med__punch + p { margin-top: 14px; }
/* the coin tray: a velvet bed of twelve month slots behind glass; the belt rolls through it */
.vip-med__case { position: relative; padding: 12px; border: 2px solid var(--ah-950); border-radius: 14px; background: linear-gradient(135deg, #e7edf4 0%, #a7b3c3 22%, #dfe6ee 44%, #8996a8 70%, #cfd7e1 100%); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.vip-med__case::before, .vip-med__case::after { content: ""; position: absolute; top: 1.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ah-steel-c); box-shadow: 0 0 0 1.5px var(--ah-950), inset 1px 1px 0 rgba(255, 255, 255, 0.5); }
.vip-med__case::before { left: 20px; } .vip-med__case::after { right: 20px; }
.vip-med__window { position: relative; overflow: hidden; padding: 16px 0 12px; border: 2px solid var(--ah-950); border-radius: 6px; background: radial-gradient(circle, rgba(173, 229, 255, 0.05) 1px, transparent 1.4px) 0 0 / 5px 5px, linear-gradient(180deg, #1c2f5e, #13234a 60%, #0f1c3c); }
.vip-med__window::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, transparent 0 14%, rgba(200, 230, 255, 0.08) 14% 22%, transparent 22% 26%, rgba(200, 230, 255, 0.05) 26% 28%, transparent 28% 72%, rgba(200, 230, 255, 0.05) 72% 82%, transparent 82%); }
.vip-med__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 0 12px; }
html.motion .vip-med__strip { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0 14px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .vip-med__strip { animation: vip-roll 44s linear infinite; }
  .vip-med__case:hover .vip-med__strip, .vip-med__case:focus-within .vip-med__strip { animation-play-state: paused; }
}
@keyframes vip-roll { to { transform: translateX(-50%); } }
.vip-med__thumb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; width: 112px; margin: 0; padding: 2px 0 3px; border: 0; border-radius: 12px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vip-med__slot { display: grid; place-items: center; width: 104px; height: 104px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #0a1226, #142449 70%); box-shadow: inset 0 5px 0 rgba(0, 0, 0, 0.55), 0 2px 0 rgba(255, 255, 255, 0.1); transition: transform 0.3s var(--ease-back), box-shadow 0.3s; }
.vip-med__slot img { width: 88%; height: auto; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.5)); }
.vip-med__mo { color: var(--ah-fog); font: 800 0.7rem/1 var(--ah-mono); letter-spacing: 0.2em; text-transform: uppercase; }
.vip-med__thumb:hover .vip-med__slot, .vip-med__thumb:focus-visible .vip-med__slot { transform: translateY(-5px) scale(1.05); box-shadow: inset 0 5px 0 rgba(0, 0, 0, 0.55), 0 0 0 3px var(--ah-brass); }
.vip-med__thumb:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 2px; }
.vip-med__thumb.is-on .vip-med__slot { box-shadow: inset 0 5px 0 rgba(0, 0, 0, 0.55), 0 0 0 3px var(--ah-sky); }
.vip-med__thumb.is-on .vip-med__mo { color: var(--ah-sky); }
.vip-med__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 20px; }
.vip-med__cap { color: var(--ah-fog); font-weight: 600; text-align: center; }
.vip-med__cap b { color: var(--ah-paper); font-weight: 800; }
@media (max-width: 480px) {
  .vip-med__thumb { width: 88px; }
  .vip-med__slot { width: 82px; height: 82px; }
  .vip-med__strip { gap: 10px; }
  html.motion .vip-med__strip { padding-right: 10px; }
  .vip-med__riser { width: 92%; }
  .ah-nameplate.vip-med__plate { padding: 7px 11px 6px; }
  .vip-med__plate-m { font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   6b. THE NICKEL MATH, on paper: seven 2-cent strips against one 5-cent picture text
   -------------------------------------------------------------------------- */
.vip-nickel { --deco-at: 0 0; --deco-size: 40% 50%; }
.vip-nk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 52px; max-width: 1060px; margin: 0 auto; }
@media (min-width: 920px) { .vip-nk { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); gap: 60px; align-items: start; } }
.vip-nk > .ah-sample { top: -18px; right: 4px; }
.vip-nk__side { min-width: 0; margin: 0; }
.vip-nk__kick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; }
.vip-nk__label.ah-sticker { font-size: 0.82rem; }
.vip-nk__what { color: var(--ah-fog); font-size: 1.02rem; font-weight: 700; }
.vip-nk__strips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.vip-nk__strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; min-height: 42px;
  border: 2px solid var(--ah-950); border-radius: 3px; background-color: #fbf9f2; color: var(--ah-ink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}
.vip-nk__strip:nth-child(odd) { rotate: -0.5deg; margin-right: 10px; }
.vip-nk__strip:nth-child(even) { rotate: 0.4deg; margin-left: 10px; }
.vip-nk__n { display: grid; place-items: center; padding: 0 9px; border-right: 2px dashed rgba(11, 20, 36, 0.3); color: var(--ah-ink-2); font: 800 0.66rem/1 var(--ah-mono); letter-spacing: 0.06em; }
.vip-nk__txt { align-self: center; overflow: hidden; padding: 8px 10px; font: 600 0.86rem/1.3 var(--ah-body); white-space: nowrap; text-overflow: ellipsis; }
.vip-nk__stub { display: grid; place-items: center; min-width: 58px; padding: 0 10px; border-left: 2px dashed rgba(11, 20, 36, 0.45); background: var(--ah-cream-2); font: 900 1.2rem/1 var(--ah-display); letter-spacing: 0.02em; }
.vip-nk__fine { margin-top: 16px; color: var(--ah-fog); font-size: 0.98rem; line-height: 1.5; }
.vip-nk__fine b { margin-right: 6px; color: var(--ah-paper); font-weight: 800; }
.ah-total.vip-nk__total { max-width: 340px; margin: 22px 0 0; }
.vip-nk__total .ah-total__tape { padding: 12px 26px 10px; font-size: 0.95rem; }
/* the medallion way: one picture text with its one price tag */
.vip-nk__card {
  position: relative; width: min(100%, 360px); margin: 0 auto; padding: 16px 16px 18px;
  border: 2px solid var(--ah-950); border-radius: 22px 22px 22px 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  color: var(--ah-ink); box-shadow: 8px 8px 0 var(--ah-neon-pink);
}
.vip-nk__card img { display: block; width: 56%; height: auto; margin: 2px auto 12px; filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.35)); }
.vip-nk__msg { font: 600 0.92rem/1.5 var(--ah-body); }
.vip-nk__tag {
  position: absolute; top: 18px; right: -16px; display: grid; justify-items: center; gap: 3px; min-width: 78px; padding: 20px 10px 10px;
  border: 2px solid var(--ah-950); border-radius: 4px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  box-shadow: 4px 4px 0 var(--ah-neon-pink); rotate: 7deg; transform-origin: 50% 0;
}
.vip-nk__tag::after { content: ""; position: absolute; left: 50%; top: 7px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ah-800); box-shadow: 0 0 0 1.5px var(--ah-950), 0 0 0 3.5px var(--ah-brass), 0 0 0 5px var(--ah-950); }
.vip-nk__tagstr { position: absolute; left: 50%; top: -26px; width: 1.5px; height: 34px; background: #e8dcc0; box-shadow: 0 0 0 0.5px var(--ah-950); rotate: -24deg; transform-origin: 50% 100%; }
.vip-nk__tag b { font: 900 2.5rem/0.9 var(--ah-display); letter-spacing: 0.01em; text-shadow: 0.05em 0.05em 0 rgba(255, 63, 134, 0.5); }
.vip-nk__tag > span:last-child { color: var(--ah-ink-2); font: 800 0.58rem/1 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.vip-nickel__note { margin-top: clamp(48px, 5vw, 66px); }
.vip-nickel__note p + p { margin-top: 4px; font-size: 1.15rem; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .vip-nk:not(.is-play) .vip-nk__strip { opacity: 0; transform: translateX(-14px); }
  html.motion .vip-nk:not(.is-play) .vip-nk__card { opacity: 0; transform: translateY(16px) scale(0.96); }
  .vip-nk.is-play .vip-nk__strip { animation: vip-strip 0.4s var(--ease-out) both; }
  .vip-nk.is-play .vip-nk__strip:nth-child(2) { animation-delay: 0.08s; } .vip-nk.is-play .vip-nk__strip:nth-child(3) { animation-delay: 0.16s; }
  .vip-nk.is-play .vip-nk__strip:nth-child(4) { animation-delay: 0.24s; } .vip-nk.is-play .vip-nk__strip:nth-child(5) { animation-delay: 0.32s; }
  .vip-nk.is-play .vip-nk__strip:nth-child(6) { animation-delay: 0.4s; } .vip-nk.is-play .vip-nk__strip:nth-child(7) { animation-delay: 0.48s; }
  .vip-nk.is-play .vip-nk__card { animation: vip-pop 0.6s var(--ease-back) 0.7s both; }
}
@keyframes vip-strip { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes vip-pop { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .vip-nk__strip:nth-child(odd) { margin-right: 4px; } .vip-nk__strip:nth-child(even) { margin-left: 4px; }
  .vip-nk__txt { font-size: 0.8rem; padding: 8px 8px; }
  .vip-nk__stub { min-width: 50px; font-size: 1.08rem; }
  .vip-nk__card { width: calc(100% - 22px); margin: 0 22px 0 0; }
  .vip-nk__tag { right: -22px; min-width: 70px; }
  .vip-nk__tag b { font-size: 2.1rem; }
}

/* --------------------------------------------------------------------------
   7. PROBLEM 3: the missing month, won back at the counter
   -------------------------------------------------------------------------- */
.vip-mm { position: relative; width: 100%; max-width: 620px; margin: 0 auto; }
@media (max-width: 1199px) { .vip-wb__split.ah-split { grid-template-columns: minmax(0, 1fr); } .vip-wb__split.ah-split--flip > :first-child { order: 0; } .vip-wb__split .ah-split__copy { max-width: 720px; } }
.vip-mm__scene { position: relative; height: 640px; overflow: hidden; }
.vip-mm > .ah-sample.ah-sample--left { z-index: 9; top: 14px; left: 4px; }
/* printed light that comes up when they rejoin (dots, never a blur) */
.vip-mm__light { position: absolute; z-index: 1; inset: -4%; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; background: radial-gradient(circle, rgba(143, 214, 255, 0.55) 1.3px, transparent 1.8px) 0 0 / 9px 9px; -webkit-mask-image: radial-gradient(circle at 32% 48%, #000 0, rgba(0, 0, 0, 0.45) 30%, transparent 56%); mask-image: radial-gradient(circle at 32% 48%, #000 0, rgba(0, 0, 0, 0.45) 30%, transparent 56%); }
.vip-mm__scene.is-won .vip-mm__light { opacity: 0.85; }
.vip-mm__counter { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 78px; border: 3px solid var(--ah-950); border-bottom: 0; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(255, 220, 170, 0.22), transparent 4px), repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px), linear-gradient(180deg, #6a4428, #3a2414); }
.vip-mm__phonewrap { position: absolute; z-index: 3; left: 34px; bottom: 60px; width: 292px; height: 548px; rotate: -4deg; transform-origin: 50% 100%; }
.vip-mm__phone { position: relative; width: 100%; height: 100%; padding: 9px; border: 3px solid var(--ah-950); border-radius: 40px; background: linear-gradient(160deg, #3a4456, #1a202c 42%, #11151d); box-shadow: 9px 9px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.vip-mm__screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 31px; background: #060b16; }
.vip-mm__hdr { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 22px 14px 10px; border-bottom: 2px solid rgba(173, 229, 255, 0.12); background: #0b1528; }
.vip-mm__speaker { position: absolute; top: 8px; left: 50%; width: 56px; height: 7px; margin-left: -28px; border-radius: 4px; background: #03050a; }
.vip-mm__ava { flex: none; display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); color: var(--ah-ink); font: 900 0.8rem/1 var(--ah-display); letter-spacing: 0.04em; }
.vip-mm__hdrtxt { min-width: 0; }
.vip-mm__name { overflow: hidden; color: var(--ah-paper); font: 800 0.82rem/1.2 var(--ah-body); white-space: nowrap; text-overflow: ellipsis; }
.vip-mm__sub { margin-top: 2px; color: var(--ah-hot); font: 800 0.6rem/1.2 var(--ah-mono); letter-spacing: 0.15em; text-transform: uppercase; transition: color 0.5s ease; }
.vip-mm__sub.is-active { color: var(--ah-sky); }
.vip-mm__thread { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 12px 12px 14px; overflow: hidden; }
.vip-mm__thread::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 56px; pointer-events: none; background: linear-gradient(180deg, #060b16, rgba(6, 11, 22, 0)); }
.vip-mm__b { position: relative; max-width: 80%; padding: 8px 10px; border: 2px solid var(--ah-950); border-radius: 16px; font: 700 0.72rem/1.4 var(--ah-body); }
.vip-mm__b--in { align-self: flex-start; border-bottom-left-radius: 5px; background: var(--ah-cream); color: var(--ah-ink); }
.vip-mm__b--in img { display: block; width: 84px; height: 84px; margin: 2px auto 6px; object-fit: contain; }
.vip-mm__b--out { align-self: flex-end; padding: 9px 16px; border-bottom-right-radius: 5px; background: #c9d2dd; color: var(--ah-ink); font: 900 0.86rem/1 var(--ah-display); letter-spacing: 0.14em; }
.vip-mm__sys { align-self: center; color: var(--ah-mute); font: 700 0.62rem/1.3 var(--ah-body); letter-spacing: 0.06em; }
.vip-mm__dead { flex: none; height: 56px; transition: height 0.5s ease; }
.vip-mm__scene.is-won .vip-mm__dead { height: 6px; }
.vip-mm__new { display: none; box-shadow: 3px 3px 0 var(--ah-sky); }
.vip-mm__new.is-shown { display: block; }
.vip-mm__sheet { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 15px 14px 17px; border-top: 3px solid var(--ah-950); border-radius: 20px 20px 0 0; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); transform: translateY(107%); transition: transform 0.38s cubic-bezier(0.2, 0.85, 0.3, 1); }
.vip-mm__sheet.is-up { transform: none; }
.vip-mm__brand { display: flex; align-items: center; gap: 7px; }
.vip-mm__brand img { width: 24px; height: 24px; }
.vip-mm__brand span { font: 900 0.95rem/1 var(--ah-display); letter-spacing: 0.14em; text-transform: uppercase; }
.vip-mm__sheettitle { margin: 8px 0 12px; color: var(--ah-ink-2); font: 700 0.78rem/1.3 var(--ah-body); }
.vip-mm__fl { display: block; margin-bottom: 4px; color: var(--ah-ink-2); font: 800 0.58rem/1 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.vip-mm__field { display: flex; align-items: center; height: 34px; margin-bottom: 10px; padding: 0 10px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 9px; background: #fffdf6; color: var(--ah-ink); font: 700 0.82rem/1 var(--ah-body); white-space: nowrap; }
.vip-mm__field.is-typing::after { content: ""; flex: none; width: 2px; height: 15px; margin-left: 2px; background: var(--ah-blue-ink); }
.vip-mm__join { display: flex; align-items: center; justify-content: center; height: 40px; border: 2px solid var(--ah-950); border-radius: 999px; background: var(--ah-blue); color: var(--ah-ink); font: 900 0.95rem/1 var(--ah-display); letter-spacing: 0.14em; box-shadow: 3px 3px 0 var(--ah-ink); transition: transform 0.13s ease, box-shadow 0.13s ease; }
.vip-mm__join.is-press { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ah-ink); }
.vip-mm__ripples { position: absolute; z-index: 8; top: 26px; left: 50%; pointer-events: none; }
.vip-mm__ripples span { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: 2.5px solid var(--ah-sky); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); }
.vip-mm__watch { position: absolute; z-index: 4; left: 180px; bottom: 16px; translate: -50% 0; padding: 5px 12px 4px; border: 2px solid var(--ah-950); border-radius: 6px; background: #04060b; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8); color: #c9ecff; font: 800 1.4rem/1 var(--ah-display); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(47, 155, 255, 0.95), 0 0 2px #fff; transition: color 0.4s ease; }
.vip-mm__watch.is-run { color: #fff; }
.vip-mm__watch.is-frozen { color: #ffd6e5; text-shadow: 0 0 6px rgba(255, 63, 134, 0.95), 0 0 2px #fff; }
/* Derek's badge on its lanyard */
.vip-mm__rig { position: absolute; z-index: 7; top: -16px; right: 30px; width: 156px; transform-origin: 50% 0; transition: transform 0.85s cubic-bezier(0.36, 1.25, 0.4, 1); }
.vip-mm__rig.is-docked { transform: translate(-352px, -58px) rotate(-11deg); }
.vip-mm__strap { position: absolute; z-index: 0; top: -44px; width: 10px; height: 158px; border: 2px solid var(--ah-950); border-radius: 4px; background: repeating-linear-gradient(180deg, #1d3a6e 0 6px, #2a4f8f 6px 12px); transform-origin: top center; }
.vip-mm__strap--a { left: calc(50% - 31px); transform: rotate(15deg); }
.vip-mm__strap--b { left: calc(50% + 21px); transform: rotate(-15deg); }
.vip-mm__badge { position: relative; z-index: 1; display: block; width: 156px; margin: 98px 0 0; padding: 15px 13px 11px; border: 2px solid var(--ah-950); border-radius: 12px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); text-align: left; font: inherit; cursor: pointer; box-shadow: 6px 6px 0 var(--ah-blue); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vip-mm__badge:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 5px; }
.vip-mm__badge[aria-disabled="true"] { cursor: default; }
.vip-mm__slot { position: absolute; top: 7px; left: 50%; width: 30px; height: 7px; margin-left: -15px; border: 1.5px solid var(--ah-950); border-radius: 4px; background: var(--ah-900); }
.vip-mm__pulse { position: absolute; inset: -9px; border: 2.5px dashed var(--ah-sky); border-radius: 19px; opacity: 0; pointer-events: none; }
.vip-mm__btop { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 8px; }
.vip-mm__btop img { width: 28px; height: 28px; }
.vip-mm__btop svg { width: 22px; height: 22px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 2.2; stroke-linecap: round; }
.vip-mm__bname { display: block; font: 900 1.4rem/1 var(--ah-display); letter-spacing: 0.1em; }
.vip-mm__bshop { display: block; margin-top: 3px; color: var(--ah-ink-2); font: 700 0.72rem/1.2 var(--ah-body); }
.vip-mm__bcount { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 2px dashed rgba(11, 20, 36, 0.25); font: 800 0.62rem/1 var(--ah-mono); letter-spacing: 0.14em; }
.vip-mm__bcount b { display: inline-grid; place-items: center; min-width: 36px; padding: 4px 6px 3px; border: 2px solid var(--ah-950); border-radius: 5px; background: #04060b; color: #c9ecff; font: 800 1.05rem/1 var(--ah-display); letter-spacing: 0.06em; text-shadow: 0 0 6px rgba(47, 155, 255, 0.95), 0 0 2px #fff; }
.vip-mm__note { position: absolute; z-index: 8; right: 26px; top: 262px; flex-direction: column; align-items: center; rotate: -4deg; }
.vip-mm__note .ah-hand__arrow { order: -1; width: 38px; transform: rotate(-100deg); }
.vip-mm__scene.is-won .vip-mm__note, .vip-mm__rig.is-docked ~ .vip-mm__note { opacity: 0; transition: opacity 0.3s; }
.vip-mm__cap { max-width: 30em; margin: 16px auto 0; color: var(--ah-fog); font-weight: 600; text-align: center; transition: color 0.5s ease; }
.vip-mm__cap.is-final { color: var(--ah-sky); }
.vip-mm__replay { display: none; min-height: 44px; margin: 10px auto 0; padding: 0 20px; border: 2px solid rgba(238, 244, 251, 0.7); border-radius: 999px; background: none; color: var(--ah-paper); font: 800 0.98rem/1 var(--ah-body); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vip-mm__replay:hover { border-color: var(--ah-paper); box-shadow: 3px 3px 0 var(--ah-blue); }
.vip-mm__replay.is-show { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .vip-mm__new.is-shown.is-pop { animation: vip-mm-pop 0.6s cubic-bezier(0.3, 1.45, 0.45, 1); }
  .vip-mm__light.is-bloom { animation: vip-mm-bloom 1.7s ease-out; }
  .vip-mm__ripples.is-go span { animation: vip-ripple 0.95s ease-out forwards; }
  .vip-mm__ripples.is-go span:nth-child(2) { animation-delay: 0.2s; } .vip-mm__ripples.is-go span:nth-child(3) { animation-delay: 0.4s; }
  .vip-mm.is-inview .vip-mm__rig:not(.is-docked) { animation: vip-mm-sway 2.6s ease-in-out 2; }
  .vip-mm.is-inview .vip-mm__rig:not(.is-docked) .vip-mm__pulse { animation: vip-mm-pulse 2.3s ease-out 3; }
  .vip-mm__field.is-typing::after { animation: ah-blink 0.75s steps(1) infinite; }
}
@keyframes vip-mm-pop { 0% { opacity: 0; transform: translateY(18px) scale(0.72); } 100% { opacity: 1; transform: none; } }
@keyframes vip-mm-bloom { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0.85; } }
@keyframes vip-ripple { 0% { width: 16px; height: 16px; opacity: 0.95; } 100% { width: 165px; height: 165px; opacity: 0; } }
@keyframes vip-mm-sway { 0%, 100% { rotate: 1.6deg; } 50% { rotate: -1.8deg; } }
@keyframes vip-mm-pulse { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.14); } }
@media (max-width: 480px) {
  .vip-mm__scene { height: 668px; }
  .vip-mm__phonewrap { left: 0; margin-left: calc(50% - min(160px, 50% - 12px)); width: min(320px, calc(100% - 24px)); height: 566px; bottom: 66px; rotate: -2.5deg; }
  .vip-mm__watch { left: 50%; bottom: 18px; font-size: 1.25rem; }
  .vip-mm__rig { right: max(6px, calc(50% - 168px)); width: 128px; }
  .vip-mm__strap { height: 118px; top: -34px; width: 9px; }
  .vip-mm__strap--a { left: calc(50% - 26px); } .vip-mm__strap--b { left: calc(50% + 17px); }
  .vip-mm__badge { width: 128px; margin-top: 66px; padding: 12px 11px 9px; }
  .vip-mm__bname { font-size: 1.15rem; }
  .vip-mm__btop img { width: 22px; height: 22px; }
  .vip-mm__hdr { padding-right: 104px; }
  .vip-mm__rig.is-docked { transform: translate(-96px, -30px) rotate(-9deg); }
  .vip-mm__note { display: none; }
}
/* phones: Derek's badge hangs below the counter, clear of the thread; the tap carries it up to the phone */
@media (max-width: 560px) {
  .vip-mm__scene { height: 820px; }
  .vip-mm__counter { bottom: 222px; }
  .vip-mm__light { bottom: 222px; }
  .vip-mm__phonewrap { left: 0; margin-left: calc(50% - min(156px, 50% - 10px)); width: min(312px, calc(100% - 20px)); height: 520px; bottom: 282px; rotate: -2deg; }
  .vip-mm__hdr { padding-right: 14px; }
  .vip-mm__watch { left: 50%; bottom: 238px; font-size: 1.25rem; }
  .vip-mm__rig { z-index: 1; top: auto; bottom: 6px; right: calc(50% - 70px); width: 140px; transition: transform 0.85s cubic-bezier(0.36, 1.25, 0.4, 1), z-index 0s 0.3s; }
  .vip-mm__rig.is-docked { z-index: 8; transform: translate(-28px, -560px) rotate(-8deg); transition: transform 0.85s cubic-bezier(0.36, 1.25, 0.4, 1), z-index 0s; }
  .vip-mm__strap { top: -40px; height: 128px; width: 9px; }
  .vip-mm__strap--a { left: calc(50% - 28px); } .vip-mm__strap--b { left: calc(50% + 19px); }
  .vip-mm__badge { width: 140px; margin-top: 70px; padding: 13px 12px 10px; }
  .vip-mm__bname { font-size: 1.25rem; }
  .vip-mm__btop img { width: 24px; height: 24px; }
  .vip-mm__note { display: none; }
  .vip-mm > .ah-sample.ah-sample--left { top: 6px; left: 2px; }
}

/* --------------------------------------------------------------------------
   8. THE MONEY MATH: the adding-machine tape and the Saturday text phone
   -------------------------------------------------------------------------- */
.vip-math__head { max-width: 780px; }
.vip-math__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 54px; align-items: center; }
@media (min-width: 980px) { .vip-math__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 60px; } }
.vip-growth { margin: 0; }
.vip-tape { position: relative; width: min(100%, 400px); margin: 0 auto; }
.vip-tape__head { position: relative; z-index: 2; height: 70px; border: 3px solid var(--ah-950); border-radius: 14px 14px 8px 8px; background: linear-gradient(180deg, #4a5568, #2d3647 45%, #1a202c); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.14); }
.vip-tape__keys { position: absolute; left: 20px; right: 20px; top: 11px; height: 22px; background: radial-gradient(circle at 50% 50%, #cfd7e1 0 5px, #6f7c90 5.5px, var(--ah-950) 6.5px, transparent 7px) 0 0 / 24px 100% repeat-x; }
.vip-tape__slot { position: absolute; left: 30px; right: 30px; bottom: 11px; height: 9px; border: 1.5px solid var(--ah-950); border-radius: 5px; background: #05070c; }
.vip-tape__roll { position: relative; z-index: 1; width: calc(100% - 64px); margin: -14px auto 0; filter: var(--ah-outline) drop-shadow(6px 6px 0 var(--ah-blue)); }
.vip-tape__lines {
  display: grid; gap: 7px; margin: 0; padding: 30px 20px 34px; list-style: none;
  background-color: #fbf9f2; background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(11, 20, 36, 0.035) 23px 24px);
  color: var(--ah-ink); font: 700 1rem/1.4 var(--ah-mono); font-variant-numeric: tabular-nums;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 8px) no-repeat, var(--ah-zigzag) 0 100% / 16px 9px repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 8px) no-repeat, var(--ah-zigzag) 0 100% / 16px 9px repeat-x;
}
.vip-tape__li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vip-tape__l { flex: none; min-width: 2.2em; color: var(--ah-ink-2); }
.vip-tape__r { text-align: right; }
.vip-tape__li--grow .vip-tape__r { font-weight: 800; }
.vip-tape__li--sum { margin-top: 2px; padding-top: 9px; border-top: 2px solid var(--ah-ink); }
.vip-tape__li--sum .vip-tape__r { color: var(--ah-blue-ink); font: 900 clamp(1.7rem, 1.4rem + 1vw, 2.1rem)/1 var(--ah-display); letter-spacing: 0.01em; }
.vip-tape__li--gap { margin-top: 12px; padding-top: 12px; border-top: 2px dashed rgba(11, 20, 36, 0.35); }
.vip-tape__li--sum2 .vip-tape__r { font: 900 1.45rem/1 var(--ah-display); letter-spacing: 0.01em; }
.vip-tape__li--fine { justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 2px dashed rgba(11, 20, 36, 0.35); color: var(--ah-ink-2); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; }
.vip-tape__li--fine .vip-tape__r { text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .vip-tape:not(.is-play) .vip-tape__li { opacity: 0; }
  .vip-tape.is-play .vip-tape__li { animation: vip-print 0.34s steps(4, jump-none) both; }
  .vip-tape.is-play .vip-tape__li:nth-child(2) { animation-delay: 0.35s; } .vip-tape.is-play .vip-tape__li:nth-child(3) { animation-delay: 0.7s; }
  .vip-tape.is-play .vip-tape__li:nth-child(4) { animation-delay: 1.15s; } .vip-tape.is-play .vip-tape__li:nth-child(5) { animation-delay: 1.5s; }
  .vip-tape.is-play .vip-tape__li:nth-child(6) { animation-delay: 1.9s; }
}
@keyframes vip-print { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (max-width: 420px) {
  .vip-tape__roll { width: calc(100% - 36px); }
  .vip-tape__lines { padding: 26px 14px 30px; font-size: 0.9rem; }
}
.vip-growth__cap { margin-top: 26px; color: var(--ah-fog); font-size: 1.06rem; text-align: center; }
.vip-growth__cap p + p { margin-top: 4px; }
.vip-growth__cap b { color: var(--ah-paper); font-weight: 800; }
.vip-math__then { margin-bottom: 30px; color: var(--ah-paper); font-size: 1.15rem; font-weight: 800; text-align: center; }
.vip-tx { rotate: 2deg; }
.vip-tx .ah-phone__screen.vip-tx__screen { display: flex; flex-direction: column; background: #060b16; color: var(--ah-paper); }
.vip-tx__head { display: flex; align-items: center; gap: 10px; padding: 46px 14px 12px; border-bottom: 2px solid rgba(173, 229, 255, 0.14); background: #0b1528; }
.vip-tx__av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-800); }
.vip-tx__head b { display: block; color: var(--ah-paper); font: 800 0.9rem/1.2 var(--ah-body); }
.vip-tx__head span { display: block; color: var(--ah-sky); font: 700 0.72rem/1.3 var(--ah-body); }
.vip-tx__feed.ah-chat { flex: 1; align-content: end; width: 100%; gap: 9px; padding: 14px 12px 18px; }
.vip-tx__feed .ah-chat__bubble { max-width: 86%; padding: 8px 11px 7px; border-radius: 16px; font-size: 0.8rem; }
.vip-tx__feed .ah-chat__row--out .ah-chat__bubble { box-shadow: 2px 2px 0 var(--ah-paper); }
.vip-tx__feed .ah-chat__row--in .ah-chat__bubble { box-shadow: 2px 2px 0 var(--ah-blue); }
.vip-tx__feed .ah-chat__typing { padding: 10px 12px; box-shadow: 2px 2px 0 var(--ah-blue); }
.vip-tx > .ah-sample { top: -12px; right: 18px; }
@media (max-width: 420px) { .vip-tx { --phone-w: 284px; } }

/* --------------------------------------------------------------------------
   9. THE POS TRAP: the mascot bridge and the customer's own phone
   -------------------------------------------------------------------------- */
.vip-bridge { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.vip-bridge__sticker { display: block; width: 116px; padding: 6px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); box-shadow: 4px 4px 0 var(--ah-blue); rotate: -6deg; }
.vip-bridge__sticker img { display: block; width: 100%; height: auto; }
.vip-bridge__line { max-width: 24em; color: var(--ah-paper); font-size: 1.12rem; font-weight: 700; line-height: 1.45; }
.vip-bridge__line b { color: var(--ah-sky); font-weight: 800; }
.vip-bridge__caret { width: 22px; height: 14px; fill: none; stroke: var(--ah-mute); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.vip-bb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; justify-items: center; max-width: 920px; margin: 0 auto; }
@media (min-width: 820px) { .vip-bb { grid-template-columns: auto minmax(0, 390px); justify-content: center; align-items: center; gap: clamp(44px, 6vw, 80px); } }
.vip-bb__phone { position: relative; width: min(100%, 304px); margin: 0; rotate: -1.5deg; }
.vip-bb__phone > .ah-sample { top: -12px; right: -6px; }
.vip-bb__body { position: relative; padding: 10px; border: 3px solid var(--ah-950); border-radius: 44px; background: linear-gradient(160deg, #3a4456, #1a202c 42%, #11151d); box-shadow: 9px 9px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.vip-bb__island { position: absolute; z-index: 4; top: 19px; left: 50%; width: 80px; height: 22px; margin-left: -40px; border-radius: 999px; background: #03050a; }
.vip-bb__screen { display: flex; flex-direction: column; height: 548px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 34px; background: #060b16; }
.vip-bb__statusbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 24px 8px 28px; color: var(--ah-paper); font: 700 12px/1 var(--ah-body); font-variant-numeric: tabular-nums; }
.vip-bb__icons { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.vip-bb__icons i { width: 3px; border-radius: 1px; background: var(--ah-paper); }
.vip-bb__icons i:nth-child(1) { height: 5px; } .vip-bb__icons i:nth-child(2) { height: 7px; } .vip-bb__icons i:nth-child(3) { height: 10px; }
.vip-bb__thread { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.vip-bb__sec { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
.vip-bb__sec + .vip-bb__sec { border-top: 3px solid var(--ah-950); }
.vip-bb__sechead { display: flex; align-items: center; gap: 9px; padding: 8px 14px 9px; border-bottom: 2px solid rgba(173, 229, 255, 0.12); background: #0b1528; }
.vip-bb__ava { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-800); }
.vip-bb__sec--shm .vip-bb__ava { background: #1d3a6e; }
.vip-bb__who { min-width: 0; }
.vip-bb__who b { display: block; color: var(--ah-paper); font: 800 0.8rem/1.2 var(--ah-body); }
.vip-bb__who i { display: block; color: var(--ah-mute); font: 700 0.64rem/1.3 var(--ah-body); font-style: normal; }
.vip-bb__sec--shm .vip-bb__who i { color: var(--ah-sky); }
.vip-bb__msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 0; overflow: hidden; padding: 10px 12px 12px; }
.vip-bb-bub { align-self: flex-start; max-width: 88%; padding: 7px 10px 8px; border: 2px solid var(--ah-950); border-radius: 14px 14px 14px 4px; background: var(--ah-cream); color: var(--ah-ink); font: 700 0.74rem/1.4 var(--ah-body); }
.vip-bb-bub--out { align-self: flex-end; padding: 8px 14px 7px; border-radius: 14px 14px 4px 14px; background: #c9d2dd; font: 900 0.9rem/1 var(--ah-display); letter-spacing: 0.14em; }
.vip-bb-sys { align-self: center; max-width: 94%; color: var(--ah-mute); font: 600 0.62rem/1.4 var(--ah-body); text-align: center; }
.vip-bb-time { letter-spacing: 0.03em; }
.vip-bb-sysblue { color: var(--ah-sky); }
.vip-bb-ghostwrap { position: relative; align-self: flex-start; max-width: 88%; }
.vip-bb-ghost { max-width: 100%; border: 2px dashed var(--ah-mute); background: transparent; color: var(--ah-mute); }
.vip-bb-alert { position: absolute; right: -7px; top: -7px; width: 17px; height: 17px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); color: var(--ah-ink); font: 900 0.66rem/14px var(--ah-body); text-align: center; }
.vip-bb-notdel { align-self: flex-start; margin-top: -2px; padding-left: 5px; color: var(--ah-hot); font: 800 0.64rem/1.2 var(--ah-body); }
.vip-bb-del { align-self: flex-start; margin-top: -2px; padding-left: 5px; color: var(--ah-sky); font: 800 0.64rem/1.2 var(--ah-body); }
/* the control plate: the POS / Shmello switch and the customer's STOP */
.vip-bb__side { display: grid; gap: 18px; width: 100%; max-width: 390px; }
.vip-bb__panel {
  position: relative; display: grid; gap: 18px; padding: 24px 20px 20px; border: 2px solid var(--ah-950); border-radius: 12px; color: var(--ah-ink);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px), linear-gradient(180deg, #edf1f6, #c6cfdb 55%, #aab5c4);
  box-shadow: 6px 6px 0 var(--ah-blue), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.vip-bb__screw { position: absolute; top: 9px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ah-950); background: linear-gradient(35deg, transparent 43%, var(--ah-950) 43% 57%, transparent 57%), radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); }
.vip-bb__screw--l { left: 9px; } .vip-bb__screw--r { right: 9px; }
.vip-bb__ctl { display: grid; gap: 10px; }
.vip-bb__lbl { font: 800 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.18em; }
.vip-bb__row { display: flex; align-items: center; gap: 14px; }
.vip-bb__knobwrap { position: relative; flex: none; width: 50px; height: 50px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 40% 30%, #f2f5f9, #9aa7b8 60%, #5d6a7d); }
.vip-bb__knob { position: absolute; inset: 7px; border: 2px solid var(--ah-950); border-radius: 50%; background: linear-gradient(180deg, #4a5568, #1a202c); transform: rotate(-34deg); transition: transform 0.32s cubic-bezier(0.4, 1.5, 0.45, 1); }
.vip-bb--shm .vip-bb__knob { transform: rotate(34deg); }
.vip-bb__knob::after { content: ""; position: absolute; left: 50%; top: 2px; width: 4px; height: 12px; margin-left: -2px; border-radius: 2px; background: var(--ah-brass-hi); }
.vip-bb__rotbtns { display: flex; flex: 1; gap: 9px; }
.vip-bb__rotbtns button { flex: 1; min-width: 84px; min-height: 46px; padding: 0 12px; border: 2px solid var(--ah-950); border-radius: 999px; background: var(--ah-cream); color: var(--ah-ink); font: 900 0.98rem/1 var(--ah-display); letter-spacing: 0.12em; cursor: pointer; box-shadow: 3px 3px 0 var(--ah-ink); -webkit-tap-highlight-color: transparent; transition: transform 0.15s var(--ease-back), box-shadow 0.15s, background-color 0.15s; }
.vip-bb__rotbtns button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ah-ink); }
.vip-bb__rotbtns button[aria-pressed="true"] { background: var(--ah-blue); box-shadow: inset 0 2px 0 rgba(3, 6, 13, 0.35); transform: translate(2px, 2px); }
.vip-bb__rotbtns button:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 3px; }
.vip-bb__ctl--stop { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-top: 16px; border-top: 2px dashed rgba(11, 20, 36, 0.3); }
.vip-bb__stop {
  min-width: 112px; min-height: 52px; padding: 0 22px; border: 3px solid var(--ah-950); border-radius: 999px;
  background: radial-gradient(circle at 40% 30%, #ef6b6b, #c62828 55%, #8e1c1c); color: #fff;
  font: 900 1.25rem/1 var(--ah-display); letter-spacing: 0.14em; text-shadow: 0 1px 0 rgba(3, 6, 13, 0.5); cursor: pointer;
  box-shadow: 0 6px 0 #5c1010, 0 6px 0 2px var(--ah-950); -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 0.1s, box-shadow 0.1s;
}
.vip-bb__stop.is-pressed { transform: translateY(4px); box-shadow: 0 2px 0 #5c1010, 0 2px 0 2px var(--ah-950); }
.vip-bb__stop:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 5px; }
.vip-bb__status { min-height: 4.7em; color: var(--ah-fog); font-size: 1rem; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  .vip-bb__stop.is-flash { animation: vip-stop-flash 0.3s 3; }
  .vip-bb .is-arrive { animation: vip-arrive 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
}
@keyframes vip-stop-flash { 50% { filter: brightness(1.45); } }
@keyframes vip-arrive { from { opacity: 0; transform: translateY(9px) scale(0.93); } to { opacity: 1; transform: none; } }
@media (max-width: 819px) { .vip-bb__status { min-height: 0; text-align: center; } }

/* --------------------------------------------------------------------------
   10. THE CATCH: the house rule taped to the register, the tally clicker
   -------------------------------------------------------------------------- */
.vip-catch__head { max-width: 760px; }
.vip-hr { position: relative; width: 100%; }
.vip-hr__frame { position: relative; max-width: 980px; height: 480px; margin: 0 auto; }
.vip-hr__register { position: absolute; left: 0; top: 0; bottom: 58px; width: 52%; border: 3px solid var(--ah-950); border-bottom: 0; border-radius: 14px 14px 0 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px), linear-gradient(180deg, #2d3647, #1a202c 60%, #141a26); box-shadow: 8px 0 0 rgba(0, 0, 0, 0.45); }
.vip-hr__keys { position: absolute; left: 7%; right: 7%; bottom: 18px; height: 34px; border: 2px solid var(--ah-950); border-radius: 6px; background: radial-gradient(circle at 50% 45%, #cfd7e1 0 5px, #6f7c90 5.5px, var(--ah-950) 6.5px, transparent 7px) 0 0 / 26px 100% repeat-x, #0b1424; }
.vip-hr__glass { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; border: 3px solid var(--ah-950); border-radius: 6px; background: linear-gradient(118deg, transparent 0 16%, rgba(200, 230, 255, 0.12) 16% 24%, transparent 24% 60%, rgba(200, 230, 255, 0.08) 60% 66%, transparent 66%), linear-gradient(180deg, #13223f, #0b1528); box-shadow: inset 0 5px 0 #9aa7b8, inset 0 7px 0 var(--ah-950), 6px 6px 0 rgba(0, 0, 0, 0.5); }
.vip-hr__card { position: absolute; z-index: 2; left: 40px; top: 44px; width: 400px; padding: 24px 26px 14px; border: 2px solid var(--ah-950); border-radius: 4px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 7px 7px 0 var(--ah-blue); rotate: -2deg; }
.vip-hr__tape { position: absolute; z-index: 3; width: 84px; height: 26px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 3px, transparent 3px 7px), rgba(226, 208, 168, 0.9); clip-path: polygon(3% 0, 97% 6%, 100% 28%, 96% 52%, 100% 78%, 97% 100%, 2% 94%, 0 72%, 4% 48%, 0 22%); }
.vip-hr__tape--tl { left: -26px; top: -8px; rotate: -38deg; } .vip-hr__tape--br { right: -24px; bottom: -6px; rotate: -42deg; }
.vip-hr__title { position: relative; display: inline-block; margin: 0 0 16px; font: 900 2.05rem/1 var(--ah-display); letter-spacing: 0.08em; }
.vip-hr__underline { position: absolute; left: -6px; bottom: -11px; width: calc(100% + 14px); height: 14px; overflow: visible; }
.vip-hr__underline path { fill: none; stroke: var(--ah-red-ink); stroke-width: 4.6; stroke-linecap: round; }
.vip-hr__line { margin: 0 0 9px; color: var(--ah-ink); font-size: 1.08rem; font-weight: 700; line-height: 1.4; }
.vip-hr__hi { position: relative; z-index: 0; white-space: nowrap; }
.vip-hr__hi::before { content: ""; position: absolute; z-index: -1; left: -5px; right: -6px; top: -1px; bottom: -2px; border-radius: 2px; background: rgba(255, 222, 54, 0.62); transform: skewX(-9deg) rotate(-0.6deg) scaleX(1); transform-origin: left center; transition: transform 0.55s cubic-bezier(0.4, 0, 0.3, 1) 0.8s; }
.vip-hr:not(.is-in) .vip-hr__hi::before { transform: skewX(-9deg) rotate(-0.6deg) scaleX(0); }
.vip-hr__last { margin: 14px 0 0; color: var(--ah-red-ink); font: 400 1.22rem/1.3 var(--ah-hand); }
.vip-hr__sig { margin: -26px 0 0; padding-right: 10px; color: var(--ah-ink-2); font: 400 1.45rem/1 var(--ah-hand); text-align: right; rotate: -4deg; }
.vip-hr__medprint { position: absolute; top: -34px; right: 14px; padding: 0; border: 0; background: none; cursor: pointer; rotate: 4deg; filter: var(--ah-outline) drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.5)); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vip-hr__medprint:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 6px; border-radius: 6px; }
.vip-hr__medpaper { display: block; width: 96px; padding: 11px 11px 22px; background: linear-gradient(178deg, #fbf9f2, #ece2c8); clip-path: polygon(0 0, 100% 0, 100% 79%, 93% 85%, 87% 80%, 79% 89%, 70% 83%, 61% 91%, 52% 84%, 42% 92%, 33% 85%, 23% 93%, 14% 86%, 6% 94%, 0 87%); }
.vip-hr__medpaper img { display: block; width: 74px; height: 74px; }
.vip-hr__clip { position: absolute; top: -16px; left: 8px; width: 26px; height: 52px; pointer-events: none; rotate: -15deg; }
.vip-hr__clip svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #cfd7e1; stroke-width: 3.2; stroke-linecap: round; filter: drop-shadow(1px 0 0 var(--ah-950)) drop-shadow(-1px 0 0 var(--ah-950)); }
/* the tally clicker: chrome body, brass thumb, cream number wheels */
.vip-hr__clicker { position: absolute; z-index: 2; right: 60px; bottom: 30px; width: 240px; height: 182px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vip-hr__clicker:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 4px; border-radius: 20px; }
.vip-hr__thumb { position: absolute; top: 12px; left: 50%; width: 60px; height: 52px; margin-left: -30px; border: 3px solid var(--ah-950); border-radius: 50% 50% 10px 10px / 62% 62% 10px 10px; background: radial-gradient(circle at 40% 30%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); transition: transform 0.13s ease; }
.vip-hr__clicker.is-press .vip-hr__thumb { transform: translateY(9px); }
.vip-hr__body { position: absolute; left: 50%; bottom: 18px; width: 216px; height: 108px; margin-left: -108px; border: 3px solid var(--ah-950); border-radius: 26px; background: linear-gradient(180deg, #f2f5f9, #c6cfdb 30%, #9aa7b8 62%, #6f7c90); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.8); transition: box-shadow 0.2s; }
.vip-hr__body::before, .vip-hr__body::after { content: ""; position: absolute; top: 10px; bottom: 10px; width: 14px; border: 1.5px solid var(--ah-950); border-radius: 8px; background: repeating-linear-gradient(180deg, rgba(3, 6, 13, 0.55) 0 2px, rgba(255, 255, 255, 0.45) 2px 4px); }
.vip-hr__body::before { left: 9px; } .vip-hr__body::after { right: 9px; }
.vip-hr__window { position: absolute; top: 14px; left: 50%; display: flex; gap: 3px; padding: 4px 5px; border: 2px solid var(--ah-950); border-radius: 8px; background: #04060b; transform: translateX(-50%); }
.vip-hr__digit { position: relative; width: 28px; height: 40px; overflow: hidden; border-radius: 3px; background: linear-gradient(180deg, #fffaf0 0 48%, #ece2c8 52%, var(--ah-cream)); }
.vip-hr__strip { display: block; color: var(--ah-ink); font: 900 30px/40px var(--ah-display); text-align: center; }
.vip-hr__strip span { display: block; height: 40px; }
.vip-hr__cltape { position: absolute; left: 50%; bottom: 9px; padding: 2px 12px 1px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 3px, transparent 3px 7px), rgba(226, 208, 168, 0.97); color: var(--ah-ink); font: 400 0.9rem/1.3 var(--ah-hand); white-space: nowrap; transform: translateX(-50%) rotate(-2.4deg); clip-path: polygon(1.5% 12%, 98.5% 0, 100% 80%, 97% 100%, 2% 92%, 0 30%); }
.vip-hr__wisps { position: absolute; left: 0; right: 0; top: -18px; height: 60px; pointer-events: none; }
.vip-hr__wisp { position: absolute; bottom: 0; color: var(--ah-sky); font: 900 1.05rem/1 var(--ah-display); letter-spacing: 0.06em; white-space: nowrap; text-shadow: 0.06em 0.06em 0 var(--ah-950); animation: vip-wisp 1.3s ease-out forwards; }
@keyframes vip-wisp { 0% { opacity: 0; transform: translate(-50%, 4px) scale(0.9); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -48px) scale(1); } }
.vip-hr__note { position: absolute; z-index: 3; right: 318px; bottom: 136px; rotate: -5deg; }
@media (min-width: 861px) { .vip-hr__clicker { transform: scale(1.16); transform-origin: 70% 100%; } }
.vip-hr__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 22px; }
.vip-hr__caption { color: var(--ah-fog); font-size: 1.04rem; font-weight: 600; text-align: center; }
.vip-hr__caption strong { color: var(--ah-paper); font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  .vip-hr__medprint.is-pop .vip-hr__medpaper img { animation: vip-hr-pop 0.32s cubic-bezier(0.3, 1.5, 0.5, 1); }
}
@keyframes vip-hr-pop { 0% { transform: scale(0.86) rotate(-3deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .vip-hr__wisp { animation: vip-wisp-fade 1.1s ease forwards !important; animation-duration: 1.1s !important; } }
@keyframes vip-wisp-fade { 0% { opacity: 0; transform: translateX(-50%); } 25% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%); } }
@media (max-width: 860px) {
  .vip-hr__frame { height: auto; padding: 40px 0 210px; }
  .vip-hr__register { display: none; }
  .vip-hr__card { position: relative; left: auto; top: auto; width: min(100%, 440px); margin: 0 auto; rotate: -1deg; }
  .vip-hr__clicker { right: 50%; bottom: 24px; transform: translateX(50%) scale(0.86); transform-origin: bottom center; }
  .vip-hr__note { right: auto; left: calc(50% + 96px); bottom: 150px; }
  .vip-hr__note .ah-hand__arrow { display: none; }
}
@media (max-width: 480px) {
  .vip-hr__card { padding: 22px 18px 12px; }
  .vip-hr__title { font-size: 1.8rem; }
  .vip-hr__line { font-size: 1.02rem; }
  .vip-hr__medprint { top: -30px; right: 8px; }
  .vip-hr__medpaper { width: 84px; padding: 9px 9px 19px; }
  .vip-hr__medpaper img { width: 66px; height: 66px; }
  .vip-hr__clicker { transform: translateX(50%) scale(0.78); }
  .vip-hr__frame { padding-bottom: 190px; }
  .vip-hr__note { display: none; }
}
/* --------------------------------------------------------------------------
   11. BOOK: the open velvet coin box with a blank medallion, the tag on its string
   -------------------------------------------------------------------------- */
.vip-book__actions { margin-top: 28px; }
.vip-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; width: min(100%, 560px); margin: 0 auto; }
@media (min-width: 600px) {
  /* top-aligned, so the string's two ends sit at fixed points: the lid's top-right corner (45% of the box
     width, about 10px down) and the tag's eyelet (75% across, 22px + 19px down). The eyelet hangs lower than
     the corner, so the string only falls toward it and never crosses the tag's words. */
  .vip-box { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: start; }
  .vip-box > .vip-box__tag { margin: 22px 0 0 -26px; }
}
.vip-box__art { display: block; width: min(100%, 340px); height: auto; overflow: visible; }
.vb-shadow { fill: rgba(0, 0, 0, 0.45); }
.vb-lid__shell, .vb-base { stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.vb-lid__satin { stroke: var(--ah-950); stroke-width: 2; stroke-linejoin: round; }
.vb-lid__fold { fill: none; stroke: rgba(156, 116, 32, 0.35); stroke-width: 2; stroke-linecap: round; }
.vb-hinge, .vb-clasp { fill: var(--ah-brass); stroke: var(--ah-950); stroke-width: 2; }
.vb-bed { fill: #2b4280; stroke: var(--ah-950); stroke-width: 2; stroke-linejoin: round; }
.vb-slot { fill: none; stroke: #070d1a; stroke-width: 7; stroke-linecap: round; }
.vb-trim { fill: none; stroke: rgba(173, 229, 255, 0.16); stroke-width: 2; }
.vb-coin__rim { stroke: var(--ah-950); stroke-width: 3; }
.vb-coin__face { stroke: #9c7420; stroke-width: 2; }
.vb-coin__bead { fill: none; stroke: #9c7420; stroke-width: 2.6; stroke-dasharray: 0.1 6.6; stroke-linecap: round; }
.vb-coin__txt { fill: #5c420c; font: 900 13px/1 var(--ah-display); letter-spacing: 0.18em; }
.vb-coin__star { fill: #f6d77a; stroke: #9c7420; stroke-width: 2; stroke-linejoin: round; }
.vb-coin__shine { fill: none; stroke: rgba(255, 250, 230, 0.75); stroke-width: 4; stroke-linecap: round; }
/* the string from the hinge to the tag's eyelet (desktop); a short drop on phones */
.vip-box__string { position: absolute; z-index: 3; left: 45%; top: 6px; width: 30%; height: 40px; overflow: visible; pointer-events: none; }
.vip-box__string path { fill: none; stroke: #e8dcc0; stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 0 var(--ah-950)); }
@media (max-width: 599px) { .vip-box__string { display: none; } }
.vip-box__tag {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; width: min(100%, 290px); margin-top: -6px; padding: 34px 20px 22px;
  border: 2px solid var(--ah-950); border-radius: 10px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  color: var(--ah-ink); text-align: center; box-shadow: 6px 6px 0 var(--ah-neon-pink); rotate: 1.5deg; transform-origin: 50% -30px;
}
.vip-box > .vip-box__tag { padding-inline: clamp(13px, 7%, 20px); } /* the narrow tag at 1000-1100px keeps its words and button inside the inked border */
.vip-box__tag::before { content: ""; position: absolute; inset: 7px; border: 2px solid var(--ah-ink); border-radius: 6px; pointer-events: none; }
.vip-box__eyelet { position: absolute; top: 12px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ah-800); box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 4.5px var(--ah-brass), 0 0 0 6px var(--ah-950); }
@media (max-width: 599px) {
  .vip-box__tag { margin-top: 18px; }
  .vip-box__tag::after { content: ""; position: absolute; left: 50%; top: -30px; width: 2.5px; height: 36px; margin-left: -1.25px; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
}
.vip-box__h { font: 900 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.vip-box__p { max-width: 20em; color: var(--ah-ink-2); font-size: 1rem; font-weight: 600; line-height: 1.45; }
.vip-box__btn { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .vip-box:not(.is-play) .vb-lid { transform: scaleY(0.2); }
  html.motion .vip-box:not(.is-play) .vb-coin { opacity: 0; transform: translateY(26px); }
  .vb-lid { transform-box: fill-box; transform-origin: 50% 100%; }
  .vb-coin { transform-box: fill-box; transform-origin: 50% 100%; }
  .vip-box.is-play .vb-lid { animation: vip-lid 0.7s var(--ease-back) 0.15s both; }
  .vip-box.is-play .vb-coin { animation: vip-coinup 0.6s var(--ease-back) 0.6s both; }
  .vip-box.is-play .vip-box__tag { animation: vip-tagswing2 2s var(--ease-out) 0.9s; }
  /* the string is tied on once the lid is open */
  html.motion .vip-box:not(.is-play) .vip-box__string { opacity: 0; }
  .vip-box.is-play .vip-box__string { animation: vip-fade 0.3s ease 0.8s both; }
}
@keyframes vip-lid { from { transform: scaleY(0.2); } to { transform: none; } }
@keyframes vip-coinup { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes vip-tagswing2 { 0% { rotate: 1.5deg; } 18% { rotate: -3deg; } 40% { rotate: 2.6deg; } 62% { rotate: -0.6deg; } 100% { rotate: 1.5deg; } }

/* --------------------------------------------------------------------------
   12. CLOSING BAND: the neon VIP medallion ring and this month's tag
   -------------------------------------------------------------------------- */
.vip-ring { position: relative; display: block; width: min(100%, 330px); margin: 0 auto 50px; padding: 62px 0 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transform-origin: 50% 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vip-ring:focus-visible { outline: none; }
.vip-ring:focus-visible .vip-ring__svg { outline: 3px solid var(--ah-sky); outline-offset: 6px; border-radius: 50%; }
.vip-ring__chain { position: absolute; top: 0; width: 8px; height: 82px; background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 52%, #9aa7b8 58%, #5d6a7d 85%, transparent 90%) 0 0 / 100% 10px repeat-y; }
.vip-ring__chain--l { left: 27%; rotate: 12deg; transform-origin: top; } .vip-ring__chain--r { right: 27%; rotate: -12deg; transform-origin: top; }
.vip-ring__chain { height: 88px; }
.vip-ring__svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.vr-plate { fill: #070b15; stroke: #2c3850; stroke-width: 4; } /* a visible rim, so the chains read as holding the backing disc */
.vr-grid { fill: none; stroke: #1a2232; stroke-width: 3; }
.vr-glass circle, .vr-glass path { fill: none; stroke: rgba(255, 230, 240, 0.16); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.vr-glass .vr-glass__beads { stroke-width: 4; stroke-dasharray: 0.1 14; }
.vr-lit circle, .vr-lit path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vr-lit .vr-halo { stroke-width: 20; opacity: 0.85; }
.vr-lit .vr-tube { stroke-width: 8.5; }
.vr-lit .vr-core { stroke-width: 3; }
.vr-lit--ring .vr-halo, .vr-lit--ring .vr-tube { stroke: var(--ah-neon-blue); }
.vr-lit--ring .vr-core { stroke: var(--ah-neon-blue-core); }
.vr-lit--beads .vr-beads { stroke: var(--ah-neon-gold); stroke-width: 5; stroke-dasharray: 0.1 14; }
.vr-lit--vip .vr-halo, .vr-lit--vip .vr-tube { stroke: var(--ah-neon-pink); }
.vr-lit--vip .vr-core { stroke: var(--ah-neon-pink-core); }
.vr-hw circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 2; }
/* the cream tag on its string: this month's medallion */
.vip-ring__string { position: relative; z-index: 1; display: block; width: 2.5px; height: 30px; margin: -6px auto 0; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
.vip-ring__tag {
  position: relative; display: grid; justify-items: center; gap: 4px; width: 200px; margin: -2px auto 0; padding: 24px 14px 14px;
  border: 2px solid var(--ah-950); border-radius: 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  color: var(--ah-ink); box-shadow: 5px 5px 0 var(--ah-neon-pink); rotate: -2deg; transform-origin: 50% -22px;
}
.vip-ring__eyelet { position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #060a14; box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 4px var(--ah-brass), 0 0 0 5.5px var(--ah-950); }
.vip-ring__t { color: var(--ah-ink-2); font: 800 0.66rem/1.3 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; text-wrap: balance; }
.vip-ring__mo { font: 900 1.9rem/1 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
.vip-ring:hover .vip-ring__tag { box-shadow: 7px 7px 0 var(--ah-neon-pink); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .vip-final:not(.is-play) .vr-lit { opacity: 0.05; }
  .vip-final.is-play .vr-lit { animation: ah-ignite 1.1s var(--t, 0.1s) both; }
  .vip-ring:hover .vip-ring__svg { animation: ah-sway 1.4s ease-in-out; }
  .vip-ring__tag.is-flip { animation: vip-flip 0.5s var(--ease-out); }
}
@keyframes vip-flip { 0% { transform: perspective(500px) rotateX(0); } 45% { transform: perspective(500px) rotateX(-88deg); } 55% { transform: perspective(500px) rotateX(88deg); } 100% { transform: perspective(500px) rotateX(0); } }
@media (max-width: 420px) { .vip-ring { width: min(100%, 280px); } }

/* --------------------------------------------------------------------------
   Small phones (320 to 380): the scale, its two counters, the stamp and the switch still fit
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .vip-gs { --cell: 18px; }
  .vip-gs__odo { padding: 7px 6px 6px; }
  .vip-gs__odo-label { font-size: 0.54rem; letter-spacing: 0.06em; }
  .vip-gs__odo-sub { font-size: 0.46rem; letter-spacing: 0.02em; }
  .vip-gs__win { gap: 1px; padding: 3px 4px; }
  .vip-gs__cell { width: 12px; }
  .vip-gs__strip span { font-size: 0.85rem; }
  .vip-gs__dollar, .vip-gs__comma { font-size: 0.85rem; }
  .vip-gs__odo--their { left: 5px; } .vip-gs__odo--yours { right: 5px; }
  .vip-gs__scale { transform: translateX(-50%) scale(0.8); transform-origin: 50% 100%; }
  .vip-zr__stamp { width: 178px; }
  .vip-zr__stamp-in span:first-child { font-size: 1.2rem; }
  .vip-bb__knobwrap { display: none; }
  .vip-bb__row { flex-wrap: nowrap; }
  .vip-bb__rotbtns { flex-basis: auto; }
  .vip-bb__rotbtns button { min-width: 0; padding: 0 8px; }
}