/* ==========================================================================
   AFTER HOURS: Google Reviews (prefix gr-)
   The scenes of this page only. Shared pieces come from css/theme.css.
   This page's world: the review card, the map pin, the stars. One sample shop
   (Sam's Pawn & Jewelry, Mesa) and one customer (Marcus) run through it.
   hero:     a stranger's thumb over the Google local pack; Marcus's review lands first (gh- keep)
   friction: four ask slips on the counter, three stamped dead, one posted
   play:     the play card lights in step with the counter camera (da- keep)
   proof:    the printout taped beside the register, its tape printing the month (tpr- keep)
   track:    Jeff's note, the break room after close, the LED scoreboard (bk- keep)
   machine:  Marcus's phone thread leads, the self-filing cabinet files him (pm- keep)
   replies:  two routing slips + Sam's back-office tab (bo- keep)
   compound: a small local pack where a new review lifts the row; the neighbors' window
   tools:    the real review card on the counter
   book:     the "where you stand" printout with the time card clipped on
   final:    the neon five-star sign in the window
   Every scene rests finished; under html.motion the page script rewinds it
   (.is-armed) and plays it when it is seen (THEME.md, section 7).
   ========================================================================== */

/* shared bits of this page ------------------------------------------------ */
.gr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.gr-go { display: inline-block; padding: 11px 0; margin: -11px 0; white-space: nowrap; color: var(--ah-sky); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gr-go::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.4em; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; rotate: 45deg; vertical-align: 0.1em; transition: translate 0.25s var(--ease-back); }
.gr-go:hover { color: var(--ah-paper); }
.gr-go:hover::after { translate: 3px 0; }
.gr-go--end::after { display: none; }
.gr-line { display: block; margin-top: 0.06em; }
.gr-ministar { width: 11px; height: 11px; fill: #a3987c; vertical-align: -1px; }
.gr-open { color: #1e6b37; font-weight: 800; }
.gr-closed { color: var(--ah-red-ink); font-weight: 800; }
.gr-climb__g { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: #fff; color: #4285f4; font: 900 0.74rem/1 var(--ah-body); }
@keyframes gr-up { from { opacity: 0; translate: 0 8px; } }
@keyframes gr-popin { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes gr-draw { from { stroke-dashoffset: var(--len, 900); } to { stroke-dashoffset: 0; } }
@keyframes gr-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* --------------------------------------------------------------------------
   HERO: the stranger's phone, lit in the dark, the local pack on its screen.
   Marcus's new review drops onto Sam's row, the count ticks 462 to 463, the
   stars fill, then the thumb taps it: the row pops out like a pawn ticket.
   -------------------------------------------------------------------------- */
.gr-hero .ah-phero__copy { position: relative; z-index: 2; }
.gr-hstage { position: relative; width: min(100%, 460px); margin: 0 auto; padding-top: 18px; }
/* the screen's light printed on the bricks behind (halftone, no blur) */
.gr-hstage::before {
  content: ""; position: absolute; z-index: -1; left: -14%; right: -14%; top: -6%; bottom: 6%; pointer-events: none;
  background: radial-gradient(circle, rgba(173, 229, 255, 0.34) 1.5px, transparent 1.9px) 0 0 / 10px 10px;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
}
.gr-hstage > .ah-sample { top: 4px; right: 11%; }
.gr-hphone {
  position: relative; z-index: 1; display: block; width: min(80%, 330px); margin: 0 auto; padding: 0;
  border: 0; background: none; color: var(--ah-ink); font: inherit; text-align: left; cursor: pointer;
  rotate: -2deg; transition: rotate 0.5s var(--ease-back); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gr-hphone:hover { rotate: -1deg; }
.gr-hphone:focus-visible { outline: none; }
.gr-hphone:focus-visible .gr-hphone__body { outline: 3px solid var(--ah-sky); outline-offset: 6px; }
.gr-hphone__body { position: relative; display: block; padding: 11px; border: 3px solid var(--ah-950); border-radius: 46px; background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d); box-shadow: 8px 8px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.gr-hphone__body::before, .gr-hphone__body::after { content: ""; position: absolute; width: 5px; border: 2px solid var(--ah-950); background: #4a5568; }
.gr-hphone__body::before { left: -8px; top: 22%; height: 54px; border-radius: 3px 0 0 3px; }
.gr-hphone__body::after { right: -8px; top: 30%; height: 76px; border-radius: 0 3px 3px 0; }
.gr-hphone__island { position: absolute; z-index: 3; left: 50%; top: 20px; width: 30%; height: 22px; margin-left: -15%; border-radius: 999px; background: #05070c; }
.gr-hphone__screen { position: relative; display: block; padding: 10px 12px 0; border: 2px solid var(--ah-950); border-radius: 35px; background-color: #fbf6e9; background-image: var(--ah-fiber); }
.gr-hs__status { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 14px; font: 800 0.82rem/1 var(--ah-body); color: var(--ah-ink); }
.gr-hs__icons { display: inline-flex; align-items: center; gap: 4px; }
.gr-hs__icons svg { width: 14px; height: 14px; fill: var(--ah-ink); }
.gr-hs__icons .gr-hs__batt { width: 22px; height: 14px; }
.gr-hs__search { display: flex; align-items: center; gap: 9px; min-height: 42px; margin-top: 8px; padding: 0 12px; border: 2px solid var(--ah-950); border-radius: 999px; background: #fffdf6; box-shadow: 2px 2px 0 var(--ah-950); }
.gr-hs__g, .gr-hs__mic { flex: none; width: 18px; height: 18px; }
.gr-hs__q { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font: 700 0.95rem/1 var(--ah-body); color: var(--ah-ink); }
.gr-hs__caret { flex: none; width: 2px; height: 1.15em; margin-left: 2px; background: var(--ah-blue-ink); }
.gr-hs__map { display: block; height: 88px; margin-top: 10px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 12px; }
.gr-hs__map svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gr-goldpin, .gr-pinring { transform-box: fill-box; transform-origin: 50% 100%; }
.gr-pinring { transform-origin: 50% 50%; opacity: 0; }
.gr-hs__pack { display: block; margin-top: 10px; }
.gr-hs__label { display: block; padding: 0 4px 8px; font: 900 1.05rem/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ah-ink); }
.gr-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 4px 9px 4px; border-top: 1.5px dashed rgba(11, 20, 36, 0.26); }
.gr-row__main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.gr-row__name { display: block; font: 800 0.98rem/1.2 var(--ah-body); color: var(--ah-ink); }
.gr-row__meta { display: block; font: 600 0.8rem/1.35 var(--ah-body); color: var(--ah-ink-2); }
.gr-row__status { display: block; font: 600 0.78rem/1.35 var(--ah-body); color: var(--ah-ink-2); }
.gr-row--dim .gr-row__name { color: #4b5873; }
.gr-row--dim .gr-row__meta, .gr-row--dim .gr-row__status { color: #55627a; }
.gr-row__dir { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ah-950); border-radius: 50%; background: #ece2c8; }
.gr-row__dir svg { width: 15px; height: 15px; fill: var(--ah-ink-2); }
/* Sam's: the chosen one, a cream pawn ticket that sticks out past the phone */
.gr-row--hero {
  z-index: 2; margin: 18px -18px 6px; padding: 12px 12px 12px 30px;
  border: 2px solid var(--ah-950); border-radius: 8px; background-color: #fffdf6; background-image: var(--ah-guilloche); background-position: 0 4px;
  box-shadow: 5px 5px 0 var(--ah-blue); rotate: 1.4deg;
}
.gr-row--hero + .gr-row { border-top-color: transparent; }
.gr-row__hole { position: absolute; left: 10px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--ah-900); box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 4.5px var(--ah-brass), 0 0 0 6.5px var(--ah-950); }
.gr-row--hero .gr-row__name { font: 900 1.3rem/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ah-ink); }
.gr-row--hero .gr-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; margin-top: 3px; color: var(--ah-ink); }
.gr-row__rating, .gr-count { font-weight: 900; color: var(--ah-ink); }
.gr-count { display: inline-block; }
.gr-stars { position: relative; display: inline-flex; vertical-align: -2px; }
.gr-stars svg { width: 14px; height: 14px; }
.gr-stars__base { display: inline-flex; }
.gr-stars__base svg { fill: #ddd3b8; }
.gr-stars__fill { position: absolute; inset: 0; overflow: hidden; }
.gr-stars__row { display: inline-flex; }
.gr-stars__fill svg { fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 1.4; }
.gr-row--hero .gr-row__dir { background: var(--ah-blue); }
.gr-row--hero .gr-row__dir svg { fill: var(--ah-ink); }
.gr-row__ripple { position: absolute; right: 9px; top: 50%; width: 42px; height: 42px; margin-top: -21px; border: 3px solid var(--ah-blue-ink); border-radius: 50%; opacity: 0; pointer-events: none; }
/* Marcus's new review: a little review card that lands on the row's top edge, clear of the shop's name */
.gr-drop {
  position: absolute; z-index: 3; right: 30px; top: -33px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px;
  border: 2px solid var(--ah-950); border-radius: 999px; background: #fffdf6; color: var(--ah-ink); white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ah-blue); rotate: -3deg; pointer-events: none;
}
.gr-drop__av { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); color: var(--ah-ink); font: 900 0.86rem/1 var(--ah-display); }
.gr-drop__tx { display: grid; line-height: 1.05; }
.gr-drop__tx b { font: 800 0.6rem/1.1 var(--ah-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ah-blue-ink); }
.gr-drop__tx i { font: 800 0.8rem/1.1 var(--ah-body); font-style: normal; color: var(--ah-ink); }
.gr-drop__stars { display: inline-flex; gap: 1px; }
.gr-drop__stars svg { width: 11px; height: 11px; fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 1.4; }
.gr-hs__more { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 9px 0 8px; border-top: 1.5px dashed rgba(11, 20, 36, 0.26); font: 800 0.82rem/1 var(--ah-body); color: var(--ah-blue-ink); }
.gr-hs__more svg { width: 14px; height: 14px; fill: currentColor; }
/* the bottom of the screen: where the thumb rests */
.gr-hs__home { position: relative; display: block; height: 128px; }
.gr-hs__home::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 34%; height: 5px; margin-left: -17%; border-radius: 9px; background: var(--ah-ink); opacity: 0.8; }
/* the stranger's hand: a flat navy silhouette lit at the rim by the screen */
/* the reach box: its bottom edge is the cut line of the hand at rest, and it runs a stage-width past the phone so
   the forearm leaves through the bottom or off the side of the hero (which clips sideways) when the thumb reaches up
   to tap Sam's row. The box is twice the stage wide: the hand is 58% of the stage (29% here), its right edge 9% past it. */
.gr-reach { position: absolute; z-index: 4; left: 0; top: 0; right: -100%; bottom: -6px; overflow: hidden; pointer-events: none; }
.gr-hand { position: absolute; right: 45.5%; bottom: 0; width: 29%; height: auto; overflow: visible; pointer-events: none; transform-origin: 80% 100%; }
.gr-hand__fill { fill: #17284a; stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.gr-hand__nail { fill: #2d4a7a; stroke: var(--ah-950); stroke-width: 2; }
.gr-hand__rim { fill: none; stroke: var(--ah-sky); stroke-opacity: 0.6; stroke-width: 3; stroke-linecap: round; }
.gr-hand__rim--b { stroke-opacity: 0.24; }
.gr-hand__crease { fill: none; stroke: var(--ah-950); stroke-width: 2.4; stroke-linecap: round; }
.gr-fingers { position: absolute; z-index: 4; left: calc((100% - min(80%, 330px)) / 2 - 14px); top: 55%; width: 34px; height: auto; overflow: visible; pointer-events: none; rotate: -2deg; }
.gr-fingers .gr-hand__fill { stroke-width: 2.6; }
/* the hand note points at Sam's from the bricks on the right */
.gr-hero__hand { position: absolute; z-index: 5; right: -25%; top: 36%; flex-direction: column; align-items: flex-start; gap: 0; font-size: 1.12rem; rotate: 5deg; }
.gr-hero__hand .ah-hand__arrow { width: 44px; height: 34px; margin-left: -6px; scale: -1 1; rotate: 6deg; }
@media (max-width: 1259px) and (min-width: 1000px) { .gr-hero__hand { display: none; } }
@media (max-width: 999px) { .gr-hero__hand { right: -20%; } }
@media (max-width: 767px) { .gr-hero__hand { display: none; } }
@media (max-width: 360px) { .gr-hs__mic { display: none; } .gr-hs__q { font-size: 0.86rem; } .gr-hs__search { gap: 7px; padding: 0 10px; } .gr-hero .gr-row--hero .gr-row__dir { display: none; } .gr-hero .gr-row--hero .gr-row__name { font-size: 1rem; } .gr-drop { right: 18px; } }

/* Phones: headline, then the picture, then the button (a page-scoped copy of the audit's phone hero order,
   which the kit does not have yet). The pack is cropped to the search, the gold pin and Sam's row. */
@media (max-width: 767px) {
  .gr-hero .ah-phero__grid { gap: 0; }
  .gr-hero .ah-phero__copy, .gr-hero .ah-phero__copy > .ah-actions { display: contents; }
  .gr-hero .ah-crumbs { order: 1; }
  .gr-hero .ah-kicker { order: 2; justify-self: start; margin-bottom: 14px; }
  .gr-hero .ah-phero__h { order: 3; margin-bottom: 4px; }
  .gr-hero .ah-phero__object { order: 4; margin-bottom: 16px; }
  .gr-hero .gr-hero__apply { order: 5; justify-self: start; margin-bottom: 28px; }
  .gr-hero .ah-phero__lead { order: 6; }
  .gr-hero .gr-hero__play { order: 7; justify-self: start; }
  .gr-hero .gr-hero__note { order: 8; }
  .gr-hstage { max-height: 322px; overflow: hidden; padding-top: 26px; -webkit-mask-image: linear-gradient(180deg, #000 91%, transparent); mask-image: linear-gradient(180deg, #000 91%, transparent); }
  .gr-hstage::before { display: none; }
  .gr-hstage > .ah-sample { top: 2px; }
  .gr-hphone { width: min(86%, 330px); }
  .gr-hs__map { height: 50px; }
  .gr-hs__label { padding-bottom: 4px; font-size: 0.95rem; }
  .gr-row--first { display: none; }
  .gr-row--hero { margin: 26px -14px 6px; }
  .gr-row--hero .gr-row__name { font-size: 1.12rem; white-space: nowrap; }
  .gr-reach { bottom: 0; }
  .gr-hand { right: 44.5%; width: 20%; }
  .gr-fingers { display: none; }
}

/* the hero timeline: rewound under motion, plays once (about 3.4s), tap the phone to replay */
@media (prefers-reduced-motion: no-preference) {
  html.motion .gr-hstage.is-armed:not(.is-play) .gr-hs__map,
  html.motion .gr-hstage.is-armed:not(.is-play) .gr-row,
  html.motion .gr-hstage.is-armed:not(.is-play) .gr-hs__more { opacity: 0; }
  html.motion .gr-hstage.is-armed:not(.is-play) .gr-stars__fill { clip-path: inset(0 100% 0 0); }
  html.motion .gr-hstage.is-armed:not(.is-play) .gr-drop { opacity: 0; }
  .gr-hstage.is-play .gr-hs__map { animation: gr-up 0.55s var(--ease-out) 0.05s both; }
  .gr-hstage.is-play .gr-row--first { animation: gr-up 0.45s var(--ease-out) 0.38s both; }
  .gr-hstage.is-play .gr-row--hero { animation: gr-up 0.45s var(--ease-out) 0.47s both, gr-lift 0.55s var(--ease-back) 2.6s both; }
  .gr-hstage.is-play .gr-row--hero + .gr-row { animation: gr-up 0.45s var(--ease-out) 0.56s both; }
  .gr-hstage.is-play .gr-hs__more { animation: gr-up 0.45s var(--ease-out) 0.68s both; }
  .gr-hstage.is-play .gr-drop { animation: gr-drop 0.6s var(--ease-back) 1s both; }
  .gr-hstage.is-play .gr-stars__fill { animation: gr-stars 0.6s cubic-bezier(0.3, 0.6, 0.3, 1) 1.8s both; }
  .gr-hstage.is-play .gr-row__ripple { animation: gr-ripple 1.1s ease-out 2.6s both; }
  .gr-hstage.is-play .gr-goldpin { animation: gr-pin 0.6s var(--ease-back) 2.6s both; }
  .gr-hstage.is-play .gr-pinring { animation: gr-ring 1.5s ease-out 2.6s 2; }
  .gr-hstage.is-play .gr-hand { animation: gr-reach 1.5s cubic-bezier(0.45, 0, 0.3, 1) 2.02s both; }
  .gr-count.is-tick { animation: gr-flip 0.38s ease both; }
  .gr-hs__caret { animation: ah-blink 1.1s steps(1) 4; }
}
@keyframes gr-drop { 0% { opacity: 0; transform: translate(14px, -46px) rotate(-14deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes gr-lift { from { transform: translate(-10px, 4px) rotate(-1.4deg) scale(0.95); } }
@keyframes gr-stars { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gr-ripple { 0% { opacity: 0.9; transform: scale(0.2); } 70% { opacity: 0.35; } 100% { opacity: 0; transform: scale(3); } }
@keyframes gr-pin { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1.18); } }
@keyframes gr-ring { 0% { opacity: 0.85; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.4); } }
/* the thumb travels to the tap point (--rx, --ry, measured by the page script), presses, and lifts back to rest */
@keyframes gr-reach {
  0% { transform: none; }
  38% { transform: translate(var(--rx, 0px), var(--ry, -9px)); }
  46% { transform: translate(var(--rx, 0px), calc(var(--ry, -9px) + 3px)) scale(0.97); }
  60% { transform: translate(var(--rx, 0px), var(--ry, -9px)); }
  100% { transform: none; }
}
@keyframes gr-flip { 0% { opacity: 1; transform: none; } 45% { opacity: 0; transform: translateY(-0.55em); } 55% { opacity: 0; transform: translateY(0.55em); } 100% { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   FRICTION: four cream ask slips on the wooden counter, seen from above.
   Three get a red stamp with the reason they die; the fourth shows Marcus's
   Google sheet, five stars and a green Posted check.
   -------------------------------------------------------------------------- */
.gr-asks {
  position: relative; display: grid; gap: 16px; width: 100%; max-width: 540px; margin: 0 auto; padding: 22px 20px 34px;
  border: 2px solid var(--ah-950); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.18), transparent 4px), repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 13px), linear-gradient(180deg, #6a4428, #4a2e19);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55); rotate: 0.4deg;
}
.gr-asks__counter { position: absolute; left: -2px; right: -2px; bottom: -2px; height: 16px; border: 2px solid var(--ah-950); border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #3a2414, #24170e); }
.gr-ask {
  position: relative; z-index: 1; display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-areas: "pic method" "pic stamp"; align-items: center; gap: 8px 14px;
  min-height: 92px; padding: 12px 14px 12px 10px; border: 2px solid var(--ah-950); border-radius: 5px;
  background-color: #ece2c8; background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
}
.gr-ask--qr { rotate: -1deg; margin-right: 30px; }
.gr-ask--google { rotate: 0.8deg; margin: 0 6px 0 24px; }
.gr-ask--late { rotate: -0.6deg; margin-right: 18px; }
.gr-ask__pic { grid-area: pic; align-self: stretch; display: grid; place-items: center; padding-right: 10px; border-right: 2px dashed rgba(11, 20, 36, 0.35); }
.gr-ask__pic svg { width: 46px; height: 46px; overflow: visible; }
.gr-ask__card { fill: #fffdf6; stroke: var(--ah-950); stroke-width: 2.4; stroke-linejoin: round; }
.gr-ask__ink { fill: #c9bea2; stroke: var(--ah-950); stroke-width: 2.4; stroke-linejoin: round; }
.gr-ask__qr { fill: var(--ah-ink); }
.gr-ask__lens { fill: none; stroke: var(--ah-ink); stroke-width: 3; stroke-linecap: round; }
.gr-ask__method { grid-area: method; font: 900 clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem)/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ah-ink); }
.gr-asks .gr-ask__stamp { grid-area: stamp; justify-self: start; white-space: normal; text-align: left; }
.gr-ask--qr .gr-ask__stamp { rotate: -3deg; }
.gr-ask--google .gr-ask__stamp { rotate: 2deg; }
.gr-ask--late .gr-ask__stamp { rotate: -1.5deg; }
.gr-ask--good { grid-template-columns: minmax(0, 1fr); grid-template-areas: "method" "sheet" "stamp"; gap: 12px; padding: 16px 16px 18px; background-color: #fffdf6; box-shadow: 6px 6px 0 var(--ah-blue); rotate: 0.4deg; margin-top: 6px; }
.gr-ask--good .gr-ask__method { color: var(--ah-blue-ink); }
.gr-ask__sheet { grid-area: sheet; display: grid; gap: 8px; padding: 12px; border: 2px solid var(--ah-950); border-radius: 14px; background: #fff; }
.gr-ask__who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 0.86rem; line-height: 1.2; }
.gr-ask__who b { font-weight: 800; }
.gr-ask__who i { font-style: normal; color: var(--ah-ink-2); font-size: 0.78rem; }
.gr-ask__av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); color: var(--ah-ink); font: 900 0.9rem/1 var(--ah-display); }
.gr-ask__stars { display: flex; gap: 4px; }
.gr-ask__stars svg { width: 26px; height: 26px; fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 1.3; }
.gr-ask__posted { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1.5px solid #1e6b37; border-radius: 99px; color: #1e6b37; font-size: 0.82rem; font-weight: 800; }
.gr-ask__posted svg { width: 14px; height: 14px; fill: none; stroke: #1e6b37; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.gr-ask--good .gr-ask__stamp { rotate: -2deg; }
@media (max-width: 420px) {
  .gr-asks { padding: 18px 12px 30px; }
  .gr-ask:not(.gr-ask--good) { grid-template-columns: 50px minmax(0, 1fr); gap: 8px 10px; }
  .gr-ask__pic svg { width: 38px; height: 38px; }
  .gr-ask--qr, .gr-ask--google, .gr-ask--late { margin: 0; }
  .gr-ask--google { margin-left: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .gr-asks:not(.is-play) .gr-ask__stamp { opacity: 0; transform: scale(1.8); }
  html.motion .gr-asks:not(.is-play) .gr-ask__stars svg { fill: #e6dcc4; stroke: #a3987c; }
  html.motion .gr-asks:not(.is-play) .gr-ask__posted { opacity: 0; transform: scale(0.6); }
  .gr-ask__stamp { transition: opacity 0.2s 0.35s, transform 0.4s var(--ease-back) 0.35s; }
  .gr-ask--google .gr-ask__stamp { transition-delay: 0.75s, 0.75s; }
  .gr-ask--late .gr-ask__stamp { transition-delay: 1.15s, 1.15s; }
  .gr-ask--good .gr-ask__stamp { transition-delay: 2.7s, 2.7s; }
  .gr-ask__stars svg { transition: fill 0.2s 1.6s, stroke 0.2s 1.6s; }
  .gr-ask__stars svg:nth-child(2) { transition-delay: 1.75s; } .gr-ask__stars svg:nth-child(3) { transition-delay: 1.9s; } .gr-ask__stars svg:nth-child(4) { transition-delay: 2.05s; } .gr-ask__stars svg:nth-child(5) { transition-delay: 2.2s; }
  .gr-ask__posted { transition: opacity 0.3s 2.4s, transform 0.45s var(--ease-back) 2.4s; }
}
.gr-friction__punch { margin-top: clamp(52px, 6vw, 84px); }

/* --------------------------------------------------------------------------
   PLAY: the five steps on the ledger card light as the take reaches them;
   the take plays on the counter camera's monitor (CCTV: CAM 02 plate,
   timecode, subtitles). Tap the screen to advance; it holds with the pause
   button and off screen.
   -------------------------------------------------------------------------- */
.gr-play__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; }
@media (min-width: 1000px) { .gr-play__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 4vw, 60px); } }
.gr-steps { rotate: -0.4deg; }
.gr-steps .ah-ledger__h { margin-bottom: 0; }
.gr-steps .ah-entry { padding: 14px 0; transition: background-color 0.3s; }
.gr-steps .ah-entry__name { font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); }
.gr-steps .ah-entry__name > span { min-height: 34px; }
.gr-steps .ah-entry__n { transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s; }
.gr-steps .ah-entry.is-lit .ah-entry__n { border-color: var(--ah-ink); background: var(--ah-ink); color: var(--ah-sky); }
.gr-steps .ah-entry.is-now { background: linear-gradient(90deg, rgba(27, 141, 246, 0.16), rgba(27, 141, 246, 0) 85%); }
.gr-steps .ah-entry.is-now .ah-entry__n { border-color: var(--ah-950); background: var(--ah-blue); color: var(--ah-ink); box-shadow: 0 0 0 4px rgba(27, 141, 246, 0.3); }
.gr-take { position: relative; min-width: 0; }
.gr-cam {
  position: relative; padding: 14px 14px 46px;
  border: 2px solid var(--ah-950); border-radius: 18px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 4px), linear-gradient(180deg, #cfd7e1, #9aa7b8 55%, #7d8a9c);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.gr-cam > .ah-sample { top: -12px; right: 18px; }
.gr-cam__plate { position: absolute; left: 20px; bottom: 11px; padding: 4px 10px 3px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #f2f5f9, #b9c3d0); color: var(--ah-ink); font: 800 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.16em; }
.gr-cam__power { position: absolute; right: 24px; bottom: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--ah-neon-sky); box-shadow: 0 0 0 2px var(--ah-950), 0 0 8px var(--ah-neon-sky); }
.gr-cam__screen {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; padding: 0; margin: 0;
  border: 3px solid var(--ah-950); border-radius: 16px / 20px; background: #0a1324; color: var(--ah-paper); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 0 0 5px #262d3c, 0 0 0 7px var(--ah-950); container-type: inline-size; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gr-cam__screen:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 9px; }
.gr-cam__screen > span { position: absolute; }
.gr-scene__wall { inset: 0; background: radial-gradient(circle, rgba(173, 229, 255, 0.08) 1.2px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(180deg, #101c33 0%, #0b1528 68%); }
.gr-scene__beam { left: 18%; top: 0; width: 50%; height: 78%; background: radial-gradient(circle, rgba(255, 226, 170, 0.42) 1.3px, transparent 1.7px) 0 0 / 8px 8px; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent); mask-image: linear-gradient(180deg, #000 10%, transparent); }
.gr-scene__counter { left: 0; right: 0; bottom: 0; height: 30%; border-top: 3px solid var(--ah-950); 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); }
/* the payout: a banded stack and five twenties fanned on the counter, one per beat */
.gr-cash { left: 6%; bottom: 21%; width: 32%; aspect-ratio: 2 / 1.15; }
.gr-cash__stack { position: absolute; left: 0; bottom: 0; width: 56%; height: 44%; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(90deg, transparent 40%, var(--ah-cream) 40% 58%, transparent 58%), repeating-linear-gradient(180deg, #9fbf8d 0 3px, #87a877 3px 5px); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); }
.gr-bill {
  position: absolute; left: 34%; bottom: 14%; display: grid; place-items: center; width: 52%; height: 44%;
  border: 2px solid var(--ah-950); border-radius: 3px; background: #b7d1a3;
  box-shadow: inset 0 0 0 3px #b7d1a3, inset 0 0 0 4.5px #4f7a45, 2px 2px 0 rgba(0, 0, 0, 0.45); transform-origin: 6% 94%;
}
.gr-bill b { font: 900 clamp(10px, 2.6cqi, 18px)/1 var(--ah-display); color: #2f5229; }
.gr-bill--1 { rotate: -32deg; } .gr-bill--2 { rotate: -17deg; } .gr-bill--3 { rotate: -3deg; } .gr-bill--4 { rotate: 11deg; } .gr-bill--5 { rotate: 25deg; }
/* the customer's phone */
.gr-tphone { right: 6%; top: 5%; width: 27%; height: 80%; container-type: inline-size; rotate: 6deg; transform-origin: 50% 100%; }
.gr-tphone::before { content: ""; position: absolute; inset: 0; border: 3px solid var(--ah-950); border-radius: 15cqi; background: linear-gradient(160deg, #3a4456, #11151d); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
.gr-tphone__screen { position: absolute; inset: 5cqi; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 11cqi; background: #fbf6e9; color: var(--ah-ink); font-size: 6cqi; line-height: 1.3; }
.gr-msg { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.5em; padding: 1.6em 0.7em 0; }
.gr-msg__day { align-self: center; font-size: 0.8em; font-weight: 700; color: var(--ah-ink-2); }
.gr-msg__from { padding-left: 0.3em; font-size: 0.78em; font-weight: 800; color: var(--ah-ink-2); }
.gr-msg__bubble { align-self: flex-start; max-width: 92%; padding: 0.55em 0.75em; border: 1.5px solid var(--ah-950); border-radius: 1.1em 1.1em 1.1em 0.3em; background: #fff; font-weight: 700; }
.gr-msg__card { display: flex; align-items: center; gap: 0.5em; align-self: flex-start; max-width: 96%; padding: 0.5em; border: 1.5px solid var(--ah-950); border-radius: 0.8em; background: #fff; box-shadow: 2px 2px 0 var(--ah-blue); }
.gr-msg__g { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border: 1.5px solid var(--ah-950); border-radius: 0.5em; background: #fff; }
.gr-msg__g svg { width: 1.4em; height: 1.4em; }
.gr-msg__meta { display: grid; min-width: 0; }
.gr-msg__meta b { font-size: 0.88em; line-height: 1.2; }
.gr-msg__meta i { overflow: hidden; font-size: 0.76em; font-style: normal; color: var(--ah-blue-ink); text-overflow: ellipsis; white-space: nowrap; }
.gr-gsheet { left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 0.5em; padding: 0.5em 0.75em 1em; border-top: 2px solid var(--ah-950); border-radius: 1.2em 1.2em 0 0; background: #fffdf6; position: absolute; }
.gr-gsheet__grab { align-self: center; width: 24%; height: 0.32em; border-radius: 9px; background: #c9bea2; }
.gr-gsheet__head { display: flex; align-items: center; gap: 0.5em; }
.gr-gsheet__av { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); color: var(--ah-ink); font-weight: 900; }
.gr-gsheet__who { display: grid; min-width: 0; line-height: 1.2; }
.gr-gsheet__who b { font-size: 0.95em; }
.gr-gsheet__who i { font-size: 0.72em; font-style: normal; color: var(--ah-ink-2); }
.gr-gsheet__stars { display: flex; justify-content: center; gap: 0.2em; }
.gr-gsheet__stars svg { width: 1.9em; height: 1.9em; fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 1.2; }
.gr-gsheet__hint { padding: 0.45em 0.55em; border: 1.5px solid rgba(11, 20, 36, 0.35); border-radius: 0.5em; color: var(--ah-ink-2); font-size: 0.74em; line-height: 1.3; }
.gr-gsheet__post { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; }
.gr-gsheet__posted { display: inline-flex; align-items: center; gap: 0.25em; padding: 0.3em 0.55em; border: 1.5px solid #1e6b37; border-radius: 99px; color: #1e6b37; font-size: 0.78em; font-weight: 800; }
.gr-gsheet__posted svg { width: 1.1em; height: 1.1em; fill: none; stroke: #1e6b37; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.gr-gsheet__btn { padding: 0.35em 0.95em; border: 1.5px solid var(--ah-950); border-radius: 99px; background: var(--ah-blue); color: var(--ah-ink); font-size: 0.82em; font-weight: 900; }
.gr-tphone__finger { position: absolute; left: 34%; top: 37%; width: 26cqi; height: 34cqi; border: 3px solid var(--ah-950); border-radius: 50% 50% 44% 44%; background: #17284a; box-shadow: inset 3px 3px 0 rgba(173, 229, 255, 0.25); opacity: 0; pointer-events: none; }
/* the camera's own overlays */
.gr-cam__tc { right: 3%; top: 4%; display: flex; align-items: center; gap: 0.5em; padding: 0.25em 0.55em; background: rgba(3, 6, 13, 0.72); color: #c9ecff; font: 800 clamp(11px, 2cqi, 16px)/1 var(--ah-mono); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(47, 155, 255, 0.9); }
.gr-cam__rec { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--ah-neon-pink); box-shadow: 0 0 6px var(--ah-neon-pink); }
.gr-cam__sub { left: 3%; bottom: 4%; max-width: 58%; padding: 0.35em 0.65em 0.3em; background: rgba(3, 6, 13, 0.86); color: #fff; font: 700 clamp(13px, 2.4cqi, 18px)/1.3 var(--ah-body); text-wrap: balance; }
.gr-cam__sub:empty { display: none; }
@media (prefers-reduced-motion: no-preference) { .gr-cam__sub.is-in { animation: gr-up 0.4s var(--ease-out) both; } }
.gr-cam__glass { inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px), linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0 14%, transparent 14% 100%); }
@media (max-width: 640px) {
  .gr-cam { padding: 10px 10px 42px; }
  .gr-cam__screen { aspect-ratio: 4 / 5; }
  .gr-tphone { right: 5%; top: 13%; width: 47%; height: 64%; }
  .gr-cash { left: 4%; bottom: 33%; width: 44%; }
  .gr-scene__counter { height: 34%; }
  .gr-scene__beam { left: 4%; width: 60%; height: 70%; }
  .gr-cam__sub { left: 4%; right: 4%; max-width: none; text-align: center; }
}
.gr-take__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; min-height: 56px; margin-top: 20px; }
.gr-take__replay[hidden] { display: none; }
.gr-take__row:not(:has(button:not([hidden]))) { display: none; }
.gr-take__hand { position: absolute; right: 0; top: -6px; font-size: 1.05rem; rotate: -4deg; }
@media (max-width: 520px) { .gr-take__hand { display: none; } }
/* the script under the monitor: every line of the take, timecoded */
.gr-script { margin-top: 18px; border-top: 2px dashed rgba(173, 229, 255, 0.2); }
.gr-script li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 2px dashed rgba(173, 229, 255, 0.14); color: var(--ah-fog); font-size: 1rem; line-height: 1.45; transition: color 0.25s; }
.gr-script li span { justify-self: start; padding: 3px 7px 2px; border: 1.5px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #c9ecff; font: 800 0.78rem/1.2 var(--ah-mono); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; transition: background-color 0.25s, color 0.25s; }
.gr-script li.is-now { color: var(--ah-paper); }
.gr-script li.is-now span { background: var(--ah-neon-pink); color: var(--ah-ink); }
/* the beats: rewound under motion (the page script removes the beat classes), they land one by one.
   The text bubble is there from the first frame: the take opens right after the clerk clicks send. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .gr-take.is-armed:not(.gr-beat1) .gr-bill--1,
  html.motion .gr-take.is-armed:not(.gr-beat2) .gr-bill--2,
  html.motion .gr-take.is-armed:not(.gr-beat3) .gr-bill--3,
  html.motion .gr-take.is-armed:not(.gr-beat4) .gr-bill--4,
  html.motion .gr-take.is-armed:not(.gr-beat5) .gr-bill--5 { opacity: 0; transform: translate(-18%, -60%) scale(0.85); }
  html.motion .gr-take.is-armed:not(.gr-beat3) .gr-gsheet { transform: translateY(105%); }
  html.motion .gr-take.is-armed:not(.gr-beat4) .gr-gsheet__stars svg { fill: #e6dcc4; stroke: #a3987c; }
  html.motion .gr-take.is-armed:not(.gr-beat4) .gr-gsheet__btn { background-color: #e6dcc4; }
  html.motion .gr-take.is-armed:not(.gr-beat5) .gr-gsheet__posted { opacity: 0; transform: scale(0.6); }
  .gr-bill { transition: opacity 0.35s var(--ease-out), transform 0.55s var(--ease-back); }
  .gr-gsheet { transition: transform 0.6s var(--ease-out); }
  .gr-gsheet__stars svg { transition: fill 0.2s, stroke 0.2s; }
  .gr-gsheet__stars svg:nth-child(2) { transition-delay: 0.22s; } .gr-gsheet__stars svg:nth-child(3) { transition-delay: 0.44s; } .gr-gsheet__stars svg:nth-child(4) { transition-delay: 0.66s; } .gr-gsheet__stars svg:nth-child(5) { transition-delay: 0.88s; }
  .gr-gsheet__btn { transition: background-color 0.3s 1.2s; }
  .gr-gsheet__posted { transition: opacity 0.3s, transform 0.45s var(--ease-back); }
  .gr-take.is-running.gr-beat4 .gr-gsheet__stars svg { animation: gr-popin 0.5s var(--ease-back) both; }
  .gr-take.is-running.gr-beat4 .gr-gsheet__stars svg:nth-child(2) { animation-delay: 0.22s; } .gr-take.is-running.gr-beat4 .gr-gsheet__stars svg:nth-child(3) { animation-delay: 0.44s; } .gr-take.is-running.gr-beat4 .gr-gsheet__stars svg:nth-child(4) { animation-delay: 0.66s; } .gr-take.is-running.gr-beat4 .gr-gsheet__stars svg:nth-child(5) { animation-delay: 0.88s; }
  .gr-take.is-running.gr-beat1:not(.gr-beat2) .gr-tphone { animation: gr-nudge 0.55s ease 0.3s 2; }
  .gr-take.is-running.gr-beat2:not(.gr-beat3) .gr-msg__bubble { animation: gr-ping 1.2s ease 0.2s 2; }
  .gr-take.is-running.gr-beat3:not(.gr-beat4) .gr-tphone__finger { animation: gr-tap 1s ease 0.1s; }
  html.motion .gr-steps.is-armed .ah-entry:not(.is-lit) .ah-entry__n { border-style: dashed; border-color: #8a94a6; color: #55627a; }
  .gr-take.is-noanim *, .gr-take.is-noanim *::before { transition: none !important; animation: none !important; }
}
@keyframes gr-nudge { 0%, 100% { translate: 0 0; } 30% { translate: -3px -2px; } 60% { translate: 3px 1px; } }
@keyframes gr-ping { 0%, 100% { box-shadow: 0 0 0 0 rgba(27, 141, 246, 0); } 40% { box-shadow: 0 0 0 0.35em rgba(27, 141, 246, 0.55); } }
@keyframes gr-tap { 0% { opacity: 0; transform: translate(40%, 60%) scale(1.1); } 30% { opacity: 1; transform: none; } 50% { transform: scale(0.88); } 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(30%, 50%); } }

/* --------------------------------------------------------------------------
   PROOF: the printout taped up beside the register. The register's tape
   prints the month (asks 212, new reviews 80, one month), its LED lights the
   tape, then the red marker circles the rating and the note writes itself.
   -------------------------------------------------------------------------- */
#proof { --vig-at: 32% 52%; }
.gr-proof__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 1000px) {
  .gr-proof__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 5vw, 84px); }
  .gr-till { order: -1; }
}
.gr-proof__copy .ah-h2 { margin-bottom: 20px; }
.gr-proof__honest { margin: 30px 0 0; max-width: 420px; --tilt: -1.4deg; }
.gr-till { position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); grid-template-areas: "reg wall"; align-items: end; gap: 0 22px; width: 100%; max-width: 620px; margin: 0 auto; padding: 18px 10px 22px; }
.gr-till__wall { grid-area: wall; position: relative; align-self: start; margin-bottom: 70px; container-type: inline-size; }
.gr-till__top { position: absolute; z-index: 0; left: -3%; right: -3%; bottom: 0; height: 26px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.28), transparent 4px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 64px), linear-gradient(180deg, #7a4f2e, #4a2e19); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45); }
.gr-print { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--ah-ink); font: inherit; text-align: left; cursor: pointer; rotate: -1deg; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gr-print:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 6px; border-radius: 4px; }
.gr-print__tape { top: -12px; width: 84px; height: 26px; }
.gr-print__tape--l { left: -12px; rotate: -16deg; }
.gr-print__tape--r { right: -10px; rotate: 13deg; }
.gr-print__sheet { display: block; padding: 6cqi 5cqi 4.6cqi; border: 2px solid var(--ah-950); border-radius: 3px; background-color: #fbfaf6; background-image: var(--ah-fiber); box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.6); }
.gr-print__listing { display: flex; align-items: flex-start; gap: 4cqi; }
.gr-print__info { display: grid; gap: 1.6cqi; flex: 1 1 auto; min-width: 0; }
.gr-print__name { display: block; font: 700 clamp(1.05rem, 5.4cqi, 1.55rem)/1.15 var(--ah-body); color: #1d2433; }
.gr-print__rate { position: relative; display: flex; align-items: center; gap: 1.4cqi; width: max-content; max-width: 100%; padding: 0.9cqi 5cqi 0.9cqi 3.6cqi; font-size: clamp(0.88rem, 3.9cqi, 1.12rem); }
.gr-print__loop { position: absolute; left: -7%; top: -36%; width: 114%; max-width: none; height: 172%; overflow: visible; pointer-events: none; }
.gr-print__loop path { fill: none; stroke: #c8322a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--len, 900); stroke-dashoffset: 0; }
.gr-print__num { font-weight: 700; color: #3c4043; }
.gr-print__stars { display: inline-flex; gap: 1px; }
.gr-print__stars svg { width: 1em; height: 1em; fill: #f2b632; }
.gr-print__count { color: #4b5563; }
.gr-print__meta { display: block; font-size: clamp(0.84rem, 3.6cqi, 1.02rem); color: #4b5563; }
.gr-print__meta b { color: #1e6b37; font-weight: 700; }
.gr-print__links { display: flex; flex-wrap: wrap; gap: 0 4cqi; font-size: clamp(0.84rem, 3.6cqi, 1.02rem); font-weight: 600; color: #1565c0; }
.gr-print__map {
  position: relative; flex: none; width: 21cqi; aspect-ratio: 1; border: 2px solid var(--ah-950); border-radius: 6px;
  background: linear-gradient(90deg, transparent 46%, #fffaf0 46% 56%, transparent 56%), linear-gradient(180deg, transparent 58%, #fffaf0 58% 66%, transparent 66%), linear-gradient(135deg, #cfe0b8 0 30%, #e6dcc0 30%);
}
.gr-print__pin { position: absolute; left: 50%; top: 40%; width: 5cqi; height: 5cqi; margin: -4cqi 0 0 -2.5cqi; border: 2px solid var(--ah-950); border-radius: 50% 50% 50% 0; background: #d23b2e; rotate: -45deg; }
.gr-print__note { display: block; margin-top: 4.4cqi; font: clamp(1rem, 5cqi, 1.45rem)/1.3 var(--ah-hand); color: #b42318; rotate: -2deg; }
/* the register: display head with its LED, a key deck, the cash drawer; the tape rises out of the top */
.gr-reg { grid-area: reg; position: relative; z-index: 1; display: grid; justify-items: center; width: 100%; max-width: 250px; justify-self: center; }
.gr-reg__tape { position: relative; z-index: 0; display: block; width: 62%; height: 158px; margin-bottom: -8px; filter: var(--ah-outline); }
.gr-reg__paper {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 9px 16px;
  background-color: #fbf9f2; background-image: repeating-linear-gradient(180deg, transparent 0 17px, rgba(11, 20, 36, 0.04) 17px 18px); color: var(--ah-ink);
  -webkit-mask: var(--ah-zigzag) 0 0 / 14px 8px repeat-x, linear-gradient(#000 0 0) 0 7px / 100% calc(100% - 7px) no-repeat;
  mask: var(--ah-zigzag) 0 0 / 14px 8px repeat-x, linear-gradient(#000 0 0) 0 7px / 100% calc(100% - 7px) no-repeat;
}
.gr-reg__ln { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 4px 0; border-bottom: 1.5px dotted rgba(11, 20, 36, 0.35); font: 700 0.7rem/1.25 var(--ah-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.gr-reg__ln i { font-style: normal; }
.gr-reg__ln b { font-weight: 900; font-size: 0.9rem; }
.gr-reg__ln--tot { justify-content: center; padding-top: 7px; border-bottom: 0; font-weight: 900; letter-spacing: 0.14em; }
.gr-reg__head { position: relative; z-index: 2; display: grid; place-items: center; width: 70%; padding: 10px 10px 12px; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #e9dcc0, #c9b68c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45); }
.gr-reg__led { min-width: 4ch; }
/* the register's LED light printed on the tape above it (halftone, no blur) */
.gr-reg__lit { position: absolute; z-index: 3; left: -20%; right: -20%; bottom: 70%; height: 150px; pointer-events: none; background: radial-gradient(circle, rgba(143, 214, 255, 0.42) 1.4px, transparent 1.8px) 0 0 / 9px 9px; -webkit-mask-image: radial-gradient(50% 60% at 50% 100%, #000 15%, transparent 100%); mask-image: radial-gradient(50% 60% at 50% 100%, #000 15%, transparent 100%); }
.gr-reg__body { position: relative; z-index: 2; display: grid; gap: 10px; width: 100%; padding: 14px 14px 12px; border: 2px solid var(--ah-950); border-radius: 14px 14px 4px 4px; background: linear-gradient(180deg, #e2d3b0, #bda77a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 6px 0 0 rgba(0, 0, 0, 0.35); }
.gr-reg__keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gr-reg__keys i { display: block; height: 15px; border: 2px solid var(--ah-950); border-radius: 4px; background: #fffdf6; box-shadow: 0 2px 0 var(--ah-950); }
.gr-reg__keys .gr-reg__key--go { background: var(--ah-blue); }
.gr-reg__badge { justify-self: center; width: 46%; height: 12px; border: 1.5px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 60%, var(--ah-brass-lo)); font-size: 0; }
.gr-reg__drawer { position: relative; z-index: 2; display: grid; place-items: center; width: 108%; height: 36px; margin-top: -2px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #c9b68c, #a38d5f); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
.gr-reg__drawer span { width: 34%; height: 9px; border: 1.5px solid var(--ah-950); border-radius: 0 0 8px 8px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass-lo)); }
.gr-till .gr-till__wall > .ah-sample { right: 10px; }
@media (max-width: 599px) {
  .gr-till { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wall" "reg"; padding-inline: 4px; }
  .gr-till__wall { margin-bottom: 34px; }
  .gr-reg { max-width: 210px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .gr-till.is-armed:not(.is-mark) .gr-reg__paper { clip-path: inset(100% 0 0 0); }
  html.motion .gr-till.is-armed:not(.is-mark) .gr-print__loop path { stroke-dashoffset: var(--len, 900); }
  html.motion .gr-till.is-armed:not(.is-mark) .gr-print__note { clip-path: inset(0 100% 0 0); }
  .gr-till.is-mark .gr-reg__paper { animation: gr-printup 1.2s steps(9) 0.1s backwards; }
  .gr-till.is-mark .gr-reg__led { animation: ah-blinkon 0.4s steps(2) 0.1s 3; }
  .gr-till.is-mark .gr-print__loop path { animation: gr-draw 1.4s cubic-bezier(0.55, 0, 0.3, 1) 1.3s both; }
  .gr-till.is-mark .gr-print__note { animation: gr-write 1.1s steps(22) 2.5s backwards; }
}
@keyframes gr-printup { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* --------------------------------------------------------------------------
   TRACK: Jeff's note on a ruled card with his print clipped to it; then the
   break room after close: the punch clock, the sticky note (tap it; on phones
   it falls on its own), the ghosts of old notes, the LED scoreboard.
   -------------------------------------------------------------------------- */
.gr-track__split { margin-bottom: clamp(56px, 7vw, 96px); }
.gr-track__split .ah-copy p strong { color: var(--ah-paper); }
.gr-jeff {
  position: relative; margin: 26px 0 0; padding: 30px clamp(18px, 3vw, 30px) 22px;
  border: 2px solid var(--ah-950); border-radius: 6px;
  background-color: #fbf7ec; background-image: repeating-linear-gradient(180deg, transparent 0 29px, rgba(21, 101, 192, 0.13) 29px 30px);
  color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); rotate: -0.6deg;
}
.gr-jeff__print { float: right; position: relative; width: clamp(104px, 22%, 140px); margin: -54px -12px 12px 16px; padding: 7px 7px 18px; border: 2px solid var(--ah-950); border-radius: 3px; background: #fffdf6; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6); rotate: 4deg; }
.gr-jeff__print img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1.5px solid rgba(11, 20, 36, 0.3); }
.gr-jeff__clip { position: absolute; left: 50%; top: -15px; z-index: 2; width: 22px; height: 26px; margin-left: -11px; border: 2px solid var(--ah-950); border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #9c7420, #ffe3a1 45%, #c9962e); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.gr-jeff__clip::after { content: ""; position: absolute; left: 50%; top: 4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ah-950); }
.gr-jeff__card { margin: 0; }
.gr-jeff__card p { color: var(--ah-ink); font-size: 1.08rem; font-weight: 600; line-height: 1.62; }
.gr-jeff__card p + p { margin-top: 8px; }
@media (max-width: 380px) { .gr-jeff__card p { font-size: 1rem; line-height: 1.55; } }
.gr-jeff__card .gr-jeff__punch { clear: both; margin-top: 14px; font: 900 clamp(1.45rem, 1.15rem + 0.9vw, 1.9rem)/1.05 var(--ah-display); letter-spacing: 0.01em; color: var(--ah-blue-ink); text-wrap: balance; }
.gr-jeff__by { margin-top: 14px; padding-top: 10px; border-top: 2px solid rgba(180, 35, 24, 0.5); color: var(--ah-ink-2); font: 700 0.8rem/1.3 var(--ah-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.gr-jeff__by b { color: var(--ah-ink); font-weight: 800; }

.gr-room {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "wall board" "floor floor"; gap: 0 clamp(18px, 3vw, 34px);
  padding: 58px clamp(16px, 3vw, 34px) 0; overflow: hidden;
  border: 2px solid var(--ah-950); border-radius: 16px;
  background:
    radial-gradient(circle, rgba(255, 226, 170, 0.16) 1.4px, transparent 1.8px) 0 0 / 10px 10px,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 2px, transparent 2px 72px),
    linear-gradient(180deg, #17223a, #0f182b);
  background-repeat: no-repeat, repeat, repeat;
  background-size: 70% 70%, auto, auto;
  background-position: 30% 0, 0 0, 0 0;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.04);
}
.gr-room > .ah-sample { top: 14px; left: auto; right: 16px; --tilt: 5deg; }
.gr-room__slate { position: absolute; left: 18px; top: 16px; padding: 5px 11px 4px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3; font: 700 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ah-blue); rotate: -1deg; }
.gr-room__wall { grid-area: wall; position: relative; min-height: 290px; }
/* the punch clock on the wall, a time card in its slot */
.gr-clock { position: absolute; left: 0; top: 30px; width: 92px; }
.gr-clock__card { position: absolute; left: 50%; top: -24px; width: 40px; height: 48px; margin-left: -20px; border: 2px solid var(--ah-950); border-radius: 2px; background: #fbf7ec repeating-linear-gradient(180deg, transparent 0 7px, rgba(21, 101, 192, 0.25) 7px 8px); }
.gr-clock__box { position: relative; display: grid; justify-items: center; gap: 10px; padding: 12px 10px 14px; border: 2px solid var(--ah-950); border-radius: 12px 12px 8px 8px; background: linear-gradient(180deg, #d9c7a0, #b49d6f); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.gr-clock__face { position: relative; display: block; width: 62px; height: 62px; border: 2.5px solid var(--ah-950); border-radius: 50%; background: #fffdf6; box-shadow: inset 0 0 0 3px #e6dcc0; }
.gr-clock__face i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ah-950); }
.gr-clock__h, .gr-clock__m { position: absolute; left: 50%; bottom: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ah-950); transform-origin: 50% 100%; }
.gr-clock__h { height: 16px; rotate: 272deg; }
.gr-clock__m { height: 24px; width: 2px; margin-left: -1px; rotate: 24deg; }
.gr-clock__slot { display: block; width: 52px; height: 8px; border: 2px solid var(--ah-950); border-radius: 2px; background: #3a3020; }
/* the ghosts of notes past */
.gr-ghost { position: absolute; border: 2px dashed rgba(238, 244, 251, 0.18); border-radius: 2px; background: rgba(238, 244, 251, 0.04); }
.gr-ghost::before { content: ""; position: absolute; left: 50%; top: -6px; width: 34px; height: 12px; margin-left: -17px; background: rgba(226, 208, 168, 0.22); }
.gr-ghost span { position: absolute; left: 10px; bottom: 12px; font: 0.95rem/1 var(--ah-hand); color: rgba(238, 244, 251, 0.3); rotate: -6deg; }
.gr-ghost--1 { left: 64%; top: 8px; width: 104px; height: 96px; rotate: 5deg; }
.gr-ghost--2 { left: 34%; top: 196px; width: 78px; height: 70px; rotate: -7deg; }
.gr-ghost--3 { display: none; }
.gr-notespot { position: absolute; left: 34%; top: 26px; width: 138px; height: 140px; }
/* the sticky note system (tap it) */
.gr-note {
  position: absolute; left: 0; top: 0; z-index: 3; display: grid; align-content: start; gap: 8px; width: 136px; min-height: 128px; padding: 24px 12px 12px;
  border: 2px solid var(--ah-950); border-radius: 2px 2px 16px 2px; background: #ffe680; color: #3a2a05; text-align: left;
  font: 1.16rem/1.1 var(--ah-hand); box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.45); rotate: -4deg; cursor: pointer; transform-origin: 50% 10px;
  transition: rotate 0.4s var(--ease-back); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gr-note:hover { rotate: -1.5deg; }
.gr-note:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 4px; }
.gr-note__pin { position: absolute; left: 50%; top: 6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9ab9, var(--ah-neon-pink) 55%, #a3124a); box-shadow: 0 0 0 1.5px var(--ah-950); }
.gr-note__l1 { display: block; }
.gr-note__l2 { display: block; padding-top: 6px; border-top: 2px solid rgba(58, 42, 5, 0.45); font-size: 0.8rem; }
.gr-room__hand { position: absolute; left: calc(100% + 4px); top: 92px; font-size: 1.02rem; rotate: 4deg; white-space: nowrap; }
.gr-room__hand .ah-hand__arrow { order: -1; width: 40px; height: 30px; }
html:not(.js) .gr-room__hand { display: none; }
.gr-scrawl { position: absolute; left: 30%; top: 178px; font: 1.2rem/1.2 var(--ah-hand); color: rgba(238, 244, 251, 0.82); rotate: -4deg; opacity: 0; transition: opacity 0.6s 0.4s; }
/* fallen: the note is gone, its pin and its outline stay; it lies crumpled on the floor */
.gr-room.is-fallen .gr-note { background: transparent; border-style: dashed; border-color: rgba(238, 244, 251, 0.28); box-shadow: none; color: transparent; cursor: default; rotate: -4deg; }
.gr-room.is-fallen .gr-note__l2 { border-top-color: transparent; }
.gr-room.is-fallen .gr-room__hand { display: none; }
.gr-room.is-fallen .gr-scrawl { opacity: 1; }
.gr-room.is-fallen .gr-crumple--2 { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) { .gr-note.is-fall { animation: gr-fall 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards; } }
@keyframes gr-fall { 0% { transform: none; } 16% { transform: rotate(16deg); } 100% { transform: translate(var(--fx, 10px), var(--fy, 160px)) rotate(70deg) scale(0.36); opacity: 0; } }
/* the floor of the break room */
.gr-room__floor {
  grid-area: floor; position: relative; height: 66px; margin: 22px calc(-1 * clamp(16px, 3vw, 34px)) 0;
  border-top: 3px solid var(--ah-950);
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.12), transparent 3px), repeating-linear-gradient(90deg, transparent 0 118px, rgba(0, 0, 0, 0.4) 118px 120px), linear-gradient(180deg, #3a2414, #24170e);
}
.gr-crumple { position: absolute; bottom: 12px; width: 44px; height: 38px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 38'%3E%3Cpath d='M6 22L3 13l7-8 9 2 6-6 9 4 6 8-2 9 4 7-8 6-9-2-7 4-9-3-6-5z' fill='%23e8c95a' stroke='%2303060d' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M10 5l6 11-8 6M19 7l3 12 11-6M22 19l-4 13M22 19l13 6M34 5l-1 8' fill='none' stroke='%237a6420' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.gr-crumple--1 { left: 58%; rotate: 12deg; }
.gr-crumple--2 { left: 30%; width: 38px; height: 33px; rotate: -20deg; opacity: 0; transform: translateY(-10px) scale(0.6); transition: opacity 0.3s, transform 0.45s var(--ease-back); }
/* the LED scoreboard */
.gr-board { grid-area: board; position: relative; align-self: start; padding: 14px 14px 18px; border: 2px solid var(--ah-950); border-radius: 12px; background: linear-gradient(180deg, #3a4456, #1a202c); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.gr-board::before, .gr-board::after { content: ""; position: absolute; bottom: 5px; width: 8px; height: 8px; border-radius: 50%; background: #141c2c; box-shadow: 0 0 0 1.5px var(--ah-950), inset 1px 1px 0 rgba(255, 255, 255, 0.25); }
.gr-board::before { left: 10px; } .gr-board::after { right: 10px; }
.gr-board__face { padding: 16px 16px 14px; border: 2px solid var(--ah-950); border-radius: 6px; background: radial-gradient(circle, #121b2c 1px, transparent 1.4px) 0 0 / 4px 4px, #04060b; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8); }
.gr-board__title { margin-bottom: 10px; color: #c9ecff; font: 800 0.76rem/1.3 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 0 6px rgba(47, 155, 255, 0.85); }
.gr-brow { display: grid; grid-template-columns: 78px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 6px 0; }
.gr-brow__name { display: inline-flex; align-items: center; gap: 6px; color: #e8edf3; font-size: 1rem; font-weight: 800; }
.gr-brow--lead .gr-brow__name { color: var(--ah-sky); }
.gr-crown { flex: none; width: 17px; height: 13px; fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 1.6; stroke-linejoin: round; }
.gr-brow__bar { position: relative; display: block; height: 12px; border: 1.5px solid #22304d; border-radius: 2px; background: #0b1220; }
.gr-brow__bar b { position: absolute; left: 1px; top: 1px; bottom: 1px; width: calc(var(--w, 50%) - 2px); background: repeating-linear-gradient(90deg, var(--ah-neon-blue) 0 7px, transparent 7px 9px); filter: drop-shadow(0 0 3px rgba(47, 155, 255, 0.9)); transform-origin: 0 50%; }
.gr-brow--lead .gr-brow__bar b { background: repeating-linear-gradient(90deg, var(--ah-neon-sky) 0 7px, transparent 7px 9px); }
.gr-brow__n { justify-self: end; color: #c9ecff; font: 800 1.45rem/1 var(--ah-display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(47, 155, 255, 0.95), 0 0 2px #fff; }
.gr-brow__n.is-pulse { animation: gr-pulse 0.7s var(--ease-back); }
.gr-board__ticker { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1.5px solid #1c2740; color: #ffd6e5; font: 800 0.76rem/1.3 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 0 6px rgba(255, 63, 134, 0.8); }
.gr-board__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ah-neon-pink); box-shadow: 0 0 6px var(--ah-neon-pink); }
.gr-board__pause { position: absolute; right: 18px; bottom: -22px; z-index: 2; }
@keyframes gr-pulse { 40% { transform: scale(1.3); color: #fff; } }
@media (prefers-reduced-motion: no-preference) {
  html.motion .gr-board.is-armed:not(.is-on) .gr-brow__bar b { transform: scaleX(0); }
  .gr-brow__bar b { transition: transform 0.9s var(--ease-out); }
  .gr-brow:nth-child(2) .gr-brow__bar b { transition-delay: 0.12s; } .gr-brow:nth-child(3) .gr-brow__bar b { transition-delay: 0.24s; } .gr-brow:nth-child(4) .gr-brow__bar b { transition-delay: 0.36s; }
}
.gr-track__after { max-width: 40em; margin: clamp(36px, 4vw, 52px) auto 0; text-align: center; color: var(--ah-fog); font-size: 1.12rem; }
.gr-track__after strong { color: var(--ah-paper); }
@media (max-width: 860px) {
  .gr-room { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "wall" "floor"; padding-top: 62px; }
  .gr-board { margin-bottom: 30px; }
  .gr-room__wall { min-height: 262px; }
  .gr-clock { top: 34px; }
  .gr-notespot { left: auto; right: 30%; top: 30px; }
  .gr-ghost--1 { left: auto; right: 0; top: 150px; width: 84px; height: 78px; }
  .gr-ghost--2 { left: 2px; top: 176px; }
  .gr-scrawl { left: 30%; top: 196px; }
  .gr-room__hand { left: auto; right: calc(100% + 2px); top: 120px; display: none; }
}
@media (max-width: 420px) {
  .gr-room > .ah-sample { top: 66px; right: 10px; }
  .gr-brow { grid-template-columns: 70px minmax(0, 1fr) 36px; gap: 8px; }
  .gr-brow__n { font-size: 1.25rem; }
  .gr-notespot { right: 6%; }
  .gr-scrawl { left: 6%; font-size: 1.08rem; }
  .gr-ghost--1 { display: none; }
}

/* --------------------------------------------------------------------------
   MACHINE: Marcus's phone thread leads (the narration lives in its timestamp
   lines); the wooden card catalog files him: the top drawer counts THE LIST
   YOU OWN, and only his three drawers open, each with his card in it.
   -------------------------------------------------------------------------- */
.gr-machine { position: relative; margin-top: 10px; }
.gr-cab > .ah-sample { top: -4px; right: -6px; }
.gr-machine__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; justify-items: center; align-items: start; }
@media (min-width: 900px) {
  .gr-machine__grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); justify-items: stretch; align-items: start; }
  .gr-cabside { position: sticky; top: 110px; padding-top: 60px; }
}
.gr-mphone { width: min(100%, 340px); justify-self: center; rotate: -1.5deg; }
.gr-mphone__body { position: relative; padding: 10px; border: 3px solid var(--ah-950); border-radius: 42px; background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d); box-shadow: 8px 8px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.gr-mphone__island { position: absolute; z-index: 3; left: 50%; top: 19px; width: 30%; height: 20px; margin-left: -15%; border-radius: 999px; background: #05070c; }
.gr-mphone__screen { position: relative; overflow: hidden; padding: 42px 12px 0; border: 2px solid var(--ah-950); border-radius: 32px; background-color: #fbf6e9; background-image: var(--ah-fiber); color: var(--ah-ink); }
.gr-mphone__head { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; border-bottom: 1.5px dashed rgba(11, 20, 36, 0.25); }
.gr-mphone__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); color: var(--ah-ink); font: 900 1.05rem/1 var(--ah-display); }
.gr-mphone__head p { display: grid; line-height: 1.2; }
.gr-mphone__head b { font-size: 0.92rem; }
.gr-mphone__head span { font-size: 0.74rem; font-weight: 600; color: var(--ah-ink-2); }
.gr-feed { display: grid; gap: 7px; padding: 10px 2px 14px; }
/* the timestamp lines carry the narration now */
.gr-ts { justify-self: center; max-width: 94%; padding: 0 4px; color: var(--ah-ink-2); font: 700 0.72rem/1.35 var(--ah-body); text-align: center; }
.gr-ts--rcpt { justify-self: end; max-width: 82%; text-align: right; color: var(--ah-blue-ink); }
.gr-bub { max-width: 88%; padding: 8px 11px; border: 1.5px solid var(--ah-950); border-radius: 16px; font-size: 0.86rem; font-weight: 600; line-height: 1.35; }
.gr-bub--in { justify-self: start; border-bottom-left-radius: 5px; background: #fff; }
.gr-bub--out { justify-self: end; border-bottom-right-radius: 5px; background: var(--ah-blue); color: var(--ah-ink); font-weight: 800; box-shadow: 2px 2px 0 var(--ah-950); }
.gr-link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1.5px solid var(--ah-950); border-radius: 12px; background: #fff; color: var(--ah-blue-ink); font: 700 0.78rem/1.2 var(--ah-mono); }
.gr-link svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.gr-sheet { margin: 0 -12px; padding: 10px 14px 14px; border-top: 2px solid var(--ah-950); border-radius: 18px 18px 0 0; background: #fffdf6; box-shadow: 0 -4px 0 rgba(11, 20, 36, 0.06); }
.gr-sheet__bar { display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: #c9bea2; }
.gr-sheet__head { color: var(--ah-ink); font: 900 0.98rem/1 var(--ah-display); letter-spacing: 0.1em; text-align: center; }
.gr-sheet__sub { margin: 6px 0 6px; color: var(--ah-ink-2); font-size: 0.82rem; font-weight: 600; text-align: center; }
.gr-sheet__filed { margin-top: 6px; padding-top: 9px; border-top: 1.5px dashed rgba(11, 20, 36, 0.25); color: var(--ah-blue-ink); font: 800 0.76rem/1.35 var(--ah-body); text-align: center; }
.gr-togs { display: grid; }
.gr-tog { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 4px 0 6px; border: 0; border-top: 1.5px dashed rgba(11, 20, 36, 0.2); background: none; color: var(--ah-ink); font: 700 0.9rem/1.2 var(--ah-body); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gr-tog:first-child { border-top: 0; }
.gr-tog__knob { position: relative; flex: none; width: 42px; height: 24px; border: 2px solid var(--ah-950); border-radius: 99px; background: #d6ccb2; transition: background-color 0.2s; }
.gr-tog__knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border: 2px solid var(--ah-950); border-radius: 50%; background: #fff; transition: transform 0.25s var(--ease-back); }
.gr-tog.on .gr-tog__knob { background: var(--ah-blue); }
.gr-tog.on .gr-tog__knob::after { transform: translateX(18px); }
.gr-tog:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: -3px; border-radius: 8px; }
/* the cabinet */
.gr-cabside { display: grid; gap: 22px; width: 100%; min-width: 0; }
.gr-cab { position: relative; width: 100%; max-width: 560px; margin: 0 auto; padding-bottom: 26px; }
.gr-cab__top { height: 18px; margin: 0 -12px; border: 2px solid var(--ah-950); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.3), transparent 4px), linear-gradient(180deg, #8a5a36, #5a3820); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35); }
.gr-cab__wood { padding: 16px; border: 2px solid var(--ah-950); border-top: 0; background: repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 12px), linear-gradient(180deg, #5a3820, #3f2716); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55); }
.gr-cab__base { height: 14px; margin: 0 10px; border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 4px 4px; background: #2a190e; }
.gr-cab__plate { position: absolute; left: 50%; bottom: 0; translate: -50% 0; white-space: nowrap; font-size: 1.05rem; }
.gr-drawer { position: relative; }
.gr-drawer__front {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px;
  border: 2px solid var(--ah-950); border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.22), transparent 3px), repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 9px), linear-gradient(180deg, #8a5a36, #6a4428);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.35); transition: transform 0.35s var(--ease-out);
}
.gr-pull { flex: none; width: 38px; height: 13px; border: 2px solid var(--ah-950); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 60%, var(--ah-brass-lo)); }
.gr-drawer__label { padding: 4px 8px 3px; border: 1.5px solid var(--ah-950); border-radius: 2px; background: var(--ah-cream); color: var(--ah-ink); font: 800 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.14em; box-shadow: 0 0 0 2.5px var(--ah-brass), 0 0 0 4px var(--ah-950); }
.gr-drawer .ah-led { margin-left: auto; }
.gr-drawer--top .gr-drawer__front { flex-wrap: wrap; justify-content: center; gap: 12px 16px; min-height: 84px; padding: 14px 12px; }
.gr-drawer--top .gr-pull { position: absolute; left: 50%; top: 6px; margin-left: -19px; }
.gr-drawer--top .gr-drawer__label { margin-top: 10px; font-size: 0.82rem; }
.gr-drawer--top .ah-led { margin: 10px 0 0; }
.gr-drawers { display: grid; gap: 16px; margin-top: 18px; }
/* each drawer stacks above the one over it, so the card standing up out of a lower drawer shows in full */
.gr-drawers > .gr-drawer:nth-child(1) { z-index: 1; } .gr-drawers > .gr-drawer:nth-child(2) { z-index: 2; } .gr-drawers > .gr-drawer:nth-child(3) { z-index: 3; }
.gr-drawers > .gr-drawer:nth-child(4) { z-index: 4; } .gr-drawers > .gr-drawer:nth-child(5) { z-index: 5; }
.gr-machine.is-topopen .gr-drawer--top .gr-drawer__front { transform: translateY(5px) scale(1.015); }
/* Marcus's card stands up out of each drawer he chose; the drawer sits pulled out a little */
.gr-card { position: absolute; z-index: 0; left: 46%; top: -19px; padding: 3px 10px 9px; border: 1.5px solid var(--ah-950); border-radius: 2px; background: #fffdf6 repeating-linear-gradient(180deg, transparent 0 6px, rgba(21, 101, 192, 0.28) 6px 7px); color: var(--ah-ink); font: 800 0.7rem/1.2 var(--ah-mono); letter-spacing: 0.08em; text-transform: uppercase; rotate: -3deg; opacity: 0; transform: translateY(16px); transition: opacity 0.3s, transform 0.45s var(--ease-back); }
.gr-drawer.is-filed .gr-card { opacity: 1; transform: none; }
.gr-drawer.is-filed .gr-drawer__front { transform: translateY(4px) scale(1.012); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 6px 0 rgba(0, 0, 0, 0.45); }
.gr-slip { position: absolute; z-index: 3; left: 46%; top: -24px; width: 46px; height: 30px; border: 1.5px solid var(--ah-950); border-radius: 2px; background: #fffdf6 repeating-linear-gradient(180deg, transparent 0 6px, rgba(21, 101, 192, 0.3) 6px 7px); opacity: 0; pointer-events: none; }
.gr-slip.go { animation: gr-slip 0.8s var(--ease-out) both; }
@keyframes gr-msgin { from { opacity: 0; transform: translateY(10px) scale(0.95); } }
@keyframes gr-sheetin { from { opacity: 0; transform: translateY(40px); } }
@keyframes gr-slip { 0% { opacity: 0; transform: translateY(-40px) rotate(-14deg); } 25% { opacity: 1; } 80% { opacity: 1; transform: translateY(16px) rotate(0); } 100% { opacity: 0; transform: translateY(24px); } }
.gr-mcount.is-pop, .gr-drawer__count.is-pop { animation: gr-pulse 0.6s var(--ease-back); }
.gr-cab__cap { max-width: 26em; margin: 0 auto; color: var(--ah-paper); font: 800 1.08rem/1.4 var(--ah-body); text-align: center; text-wrap: balance; }
.gr-machine__ctl { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; }
.gr-machine__ctl .btn[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  /* the thread grows like a real one: a line takes no room until it arrives, then pops in */
  html.motion .gr-machine.is-armed:not(.gr-s1) .gr-e1,
  html.motion .gr-machine.is-armed:not(.gr-s2) .gr-e2,
  html.motion .gr-machine.is-armed:not(.gr-s3) .gr-e3,
  html.motion .gr-machine.is-armed:not(.gr-s4) .gr-e4,
  html.motion .gr-machine.is-armed:not(.gr-s5) .gr-e5,
  html.motion .gr-machine.is-armed:not(.gr-s6) .gr-e6,
  html.motion .gr-machine.is-armed:not(.gr-s7) .gr-e7,
  html.motion .gr-machine.is-armed:not(.gr-s8) .gr-e8,
  html.motion .gr-machine.is-armed:not(.gr-s9) .gr-e9,
  html.motion .gr-machine.is-armed:not(.gr-s8) .gr-sheet { display: none; }
  html.motion .gr-machine.is-armed .gr-feed > *, html.motion .gr-machine.is-armed .gr-sheet__filed { animation: gr-msgin 0.45s var(--ease-back) both; }
  html.motion .gr-machine.is-armed .gr-sheet { animation: gr-sheetin 0.55s var(--ease-out) both; }
  html.motion .gr-machine.is-armed:not(.is-done) .gr-cab__cap { opacity: 0; transform: translateY(8px); }
  .gr-cab__cap { transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-back); }
}
@media (max-width: 480px) {
  .gr-cab__wood { padding: 12px; }
  .gr-drawer__front { gap: 9px; padding: 8px 10px; }
  .gr-pull { width: 30px; }
  .gr-drawer__label { font-size: 0.68rem; letter-spacing: 0.1em; }
  .gr-cab__plate { font-size: 0.9rem; letter-spacing: 0.05em; }
  .gr-card { left: 40%; }
}
.gr-machine__after { max-width: 40em; margin: clamp(48px, 6vw, 72px) auto 0; text-align: center; }
.gr-machine__after p { color: var(--ah-fog); font-size: 1.1rem; }
.gr-machine__after p + p { margin-top: 10px; }
.gr-machine__after strong { color: var(--ah-paper); }
.gr-machine__fine { color: var(--ah-mute) !important; font-size: 1rem !important; }
.gr-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 14px; margin-top: 4px !important; }
.gr-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ah-sky); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gr-links a::after { content: ""; width: 0.45em; height: 0.45em; margin-left: 0.45em; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; rotate: 45deg; transition: translate 0.25s var(--ease-back); }
.gr-links a:hover { color: var(--ah-paper); }
.gr-links a:hover::after { translate: 3px 0; }
.gr-links span { color: var(--ah-mute); }

/* --------------------------------------------------------------------------
   REPLIES: two routing slips (stars, a stamp), the rule in display type, and
   the back office after close: Sam's Maps tab, the owner's sticky note on the
   bezel, the phone on the desk (its notification waits dimmed, then lights).
   -------------------------------------------------------------------------- */
.gr-routes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 1000px; }
@media (min-width: 820px) { .gr-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .gr-route--you { margin-top: 28px; } }
.gr-route { position: relative; padding: 24px 22px 22px; border: 2px solid var(--ah-950); border-radius: 8px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); rotate: -0.6deg; }
.gr-route--you { box-shadow: 6px 6px 0 var(--ah-neon-pink); rotate: 0.5deg; }
.gr-route__stars { display: flex; gap: 4px; filter: drop-shadow(1.5px 0 0 var(--ah-950)) drop-shadow(-1.5px 0 0 var(--ah-950)) drop-shadow(0 1.5px 0 var(--ah-950)) drop-shadow(0 -1.5px 0 var(--ah-950)); }
.gr-route__stars i { width: 22px; height: 22px; background: var(--ah-gold); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.gr-route__stars i.is-off { background: #d6ccb2; }
.gr-route__stamp { position: absolute; top: 16px; right: 16px; }
.gr-route--you .gr-route__stamp { color: var(--ah-red-ink); }
.gr-route p { margin-top: 14px; max-width: 30em; color: var(--ah-ink-2); font-size: 1.04rem; line-height: 1.58; }
.gr-route p + p { margin-top: 8px; }
.gr-replies__rule { max-width: 24em; margin-top: clamp(40px, 5vw, 60px); color: var(--ah-paper); font: 900 clamp(1.55rem, 1.1rem + 1.5vw, 2.35rem)/1.06 var(--ah-display); letter-spacing: 0.005em; text-shadow: 0.035em 0.035em 0 var(--ah-950); text-wrap: balance; }
.gr-replies__rule strong { color: var(--ah-sky); text-shadow: 0.04em 0.04em 0 var(--ah-blue-deep), 0.075em 0.075em 0 var(--ah-950); }
.gr-office { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 1000px) {
  .gr-office { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "win note" "win phone" "win ctl"; column-gap: 34px; row-gap: 28px; align-items: start; }
  .gr-win { grid-area: win; } .gr-office__note { grid-area: note; margin: 40px 0 0 -54px; } .gr-office__phone { grid-area: phone; } .gr-office__ctl { grid-area: ctl; }
}
.gr-win { position: relative; border: 2px solid var(--ah-950); border-radius: 12px; background: #fbfaf6; box-shadow: 8px 8px 0 var(--ah-blue); rotate: -0.4deg; }
.gr-win > .ah-sample { top: -12px; left: 18px; }
.gr-win__tabs { display: flex; align-items: flex-end; gap: 14px; height: 44px; padding: 0 14px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #e3e9f0, #b9c3d0); }
.gr-win__lights { display: flex; gap: 7px; align-self: center; }
.gr-win__lights i { width: 12px; height: 12px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); }
.gr-win__lights i:nth-child(2) { background: var(--ah-gold); } .gr-win__lights i:nth-child(3) { background: var(--ah-sky); }
.gr-win__tab { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 360px; height: 34px; padding: 0 12px; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 8px 8px 0 0; background: #fbfaf6; color: var(--ah-ink); font: 700 0.78rem/1 var(--ah-body); }
.gr-win__fav { flex: none; width: 12px; height: 12px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.gr-win__tabtx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-win__x { flex: none; color: var(--ah-ink-2); font-size: 0.7rem; }
.gr-win__addr { padding: 8px 14px; border-block: 2px solid var(--ah-950); background: #fbfaf6; }
.gr-win__omni { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; overflow: hidden; border: 1.5px solid rgba(11, 20, 36, 0.4); border-radius: 999px; background: #fff; color: var(--ah-ink); font: 700 0.78rem/1.2 var(--ah-mono); }
.gr-win__omni span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-win__omni svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--ah-ink); stroke-width: 2.4; stroke-linejoin: round; }
.gr-maps { padding: 20px clamp(16px, 3vw, 30px) 18px; border-radius: 0 0 10px 10px; color: #202124; }
.gr-maps__shop { font: 700 clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem)/1.15 var(--ah-body); }
.gr-maps__sub { margin-top: 2px; color: #4b5563; font-size: 0.9rem; }
.gr-maps__summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin: 18px 0 6px; padding-bottom: 18px; border-bottom: 1.5px solid rgba(11, 20, 36, 0.15); }
.gr-maps__score { display: grid; justify-items: center; gap: 4px; }
.gr-maps__big { font: 400 3rem/1 var(--ah-body); color: #202124; }
.gr-maps__count { color: #4b5563; font-size: 0.84rem; }
.gr-maps__histo { display: grid; gap: 6px; }
.gr-hrow { display: flex; align-items: center; gap: 8px; color: #4b5563; font-size: 0.78rem; }
.gr-hrow b { width: 10px; font-weight: 600; }
.gr-hrow__track { flex: 1 1 auto; height: 10px; overflow: hidden; border-radius: 99px; background: #ece6d6; }
.gr-hrow__track span { display: block; height: 100%; border-radius: 99px; background: #f2b632; transform-origin: 0 50%; }
.gr-review { padding: 16px 0; border-bottom: 1.5px solid rgba(11, 20, 36, 0.1); }
.gr-review:last-child { border-bottom: 0; padding-bottom: 4px; }
.gr-review__head { display: flex; align-items: center; gap: 12px; }
.gr-review__head p { display: grid; line-height: 1.25; }
.gr-review__head p b { font-size: 0.98rem; }
.gr-review__head p span { color: #4b5563; font-size: 0.8rem; }
.gr-review__av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ah-950); border-radius: 50%; font: 900 1.1rem/1 var(--ah-display); }
.gr-review__av--m { background: var(--ah-blue-deep); color: #fff; }
.gr-review__av--d { background: var(--ah-ink); color: var(--ah-sky); }
.gr-review__stars { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; color: #4b5563; font-size: 0.8rem; }
.gr-review__stars svg { display: block; }
.gr-review__text { color: #202124; font-size: 0.98rem; line-height: 1.5; }
.gr-resp { display: block; width: 100%; margin-top: 12px; padding: 12px 14px; border: 2px solid transparent; border-radius: 10px; background: #efe9da; color: #202124; font: inherit; text-align: left; }
.gr-resp__head { display: block; margin-bottom: 4px; font-size: 0.85rem; }
.gr-resp__head b { font-weight: 700; }
.gr-resp__time { color: #4b5563; }
.gr-resp__body { display: block; min-height: 1.5em; color: #3c4043; font-size: 0.92rem; line-height: 1.5; }
.gr-g { padding: 0 2px; border-radius: 2px; transition: background-color 0.35s, color 0.35s; }
.gr-g.is-done { background: rgba(27, 141, 246, 0.2); color: var(--ah-blue-ink); font-weight: 700; }
button.gr-resp { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button.gr-resp:hover { border-color: rgba(11, 20, 36, 0.35); border-style: dashed; }
button.gr-resp:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 3px; }
.gr-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.gr-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8a94a6; }
.gr-caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; background: #202124; vertical-align: -2px; }
.gr-dots.is-hide, .gr-caret.is-hide { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .gr-dots i { animation: ah-typing 0.9s ease-in-out 4; }
  .gr-dots i:nth-child(2) { animation-delay: 0.15s; } .gr-dots i:nth-child(3) { animation-delay: 0.3s; }
  .gr-caret { animation: ah-blink 1.1s steps(1) 6; }
}
/* the owner's sticky note, stuck to the bezel */
.gr-office__note { position: relative; z-index: 2; align-self: start; max-width: 340px; padding: 26px 20px 18px; border: 2px solid var(--ah-950); border-radius: 3px; background-color: #fff3a0; background-image: var(--ah-fiber); color: #2b2205; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55); rotate: 2.4deg; font: 1.1rem/1.38 var(--ah-hand); }
.gr-office__note::before { content: ""; position: absolute; left: 50%; top: -13px; width: 96px; height: 26px; margin-left: -48px; 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%); rotate: -3deg; }
.gr-office__note p + p { margin-top: 10px; }
.gr-office__note b { font-weight: 400; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gr-office__red { color: var(--ah-red-ink); }
/* the phone on the desk: the lock screen lights up for the rough one */
.gr-office__phone { justify-self: center; width: min(100%, 270px); rotate: 5deg; }
.gr-lock { position: relative; display: grid; justify-items: center; gap: 14px; padding: 34px 16px 64px; border: 3px solid var(--ah-950); border-radius: 36px; background: radial-gradient(circle, rgba(173, 229, 255, 0.08) 1.2px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(180deg, #16305a, #0a1530); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 8px #11151d, inset 0 0 0 10px var(--ah-950); }
.gr-lock__time { color: var(--ah-sky); font: 900 3rem/1 var(--ah-display); letter-spacing: 0.02em; text-shadow: 0.04em 0.04em 0 var(--ah-blue-deep); }
.gr-notif { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; padding: 11px 12px; border: 2px solid var(--ah-950); border-radius: 14px; background: var(--ah-cream); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-neon-pink); }
.gr-notif__ic { display: block; width: 34px; height: 34px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 9px; background: #fff; }
.gr-notif__ic img { width: 100%; height: 100%; object-fit: cover; }
.gr-notif__tx { display: grid; gap: 2px; min-width: 0; font-size: 0.78rem; line-height: 1.35; }
.gr-notif__tx b { font-size: 0.8rem; font-weight: 800; }
.gr-notif time { color: var(--ah-ink-2); font-size: 0.7rem; font-weight: 700; }
.gr-office__ctl { display: flex; justify-content: center; }
.gr-office__ctl:not(:has(.ah-pause:not([hidden]))) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .gr-office.is-armed:not(.is-wake) .gr-notif { opacity: 0.4; transform: translateY(-6px) scale(0.97); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4); }
  .gr-notif { transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-back), box-shadow 0.45s; }
}
@media (max-width: 999px) {
  .gr-office__note { justify-self: center; margin-top: -10px; }
  .gr-office__phone { margin-top: -6px; }
}
@media (max-width: 480px) {
  .gr-maps__summary { gap: 16px; }
  .gr-maps__big { font-size: 2.5rem; }
  .gr-win__tab { max-width: 220px; }
}
.gr-replies__after { max-width: 40em; margin: clamp(40px, 5vw, 56px) auto 0; text-align: center; color: var(--ah-fog); font-size: 1.1rem; }
.gr-replies__after p + p { margin-top: 6px; }

/* --------------------------------------------------------------------------
   COMPOUND: a smaller local pack on cream. A new review lands on Sam's row,
   the row climbs one slot, a thumb taps it, the new customer's stars drop in.
   No positions, no timelines: only reviews, rank up, customers.
   Then the shop's own window: a hand-lettered sign over the neighbors' reviews.
   -------------------------------------------------------------------------- */
.gr-climb { --rh: 64px; position: relative; width: min(100%, 440px); margin: 0 auto; padding-top: 12px; }
.gr-climb > .ah-sample { top: -2px; right: 22px; }
.gr-climb__card { position: relative; display: block; padding: 16px 16px 18px; border: 2px solid var(--ah-950); border-radius: 18px; background-color: #fbf6e9; background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 8px 8px 0 var(--ah-blue); rotate: -0.6deg; }
.gr-climb__q { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px; border: 2px solid var(--ah-950); border-radius: 999px; background: #fffdf6; box-shadow: 2px 2px 0 var(--ah-950); font: 700 0.92rem/1 var(--ah-body); }
.gr-climb__list { position: relative; display: block; height: calc(3 * var(--rh)); margin-top: 22px; }
.gr-crow { position: absolute; left: 0; right: 0; top: 0; display: grid; align-content: center; gap: 3px; height: calc(var(--rh) - 8px); padding: 0 12px; border-top: 1.5px dashed rgba(11, 20, 36, 0.26); transform: translateY(calc(var(--at, 0) * var(--rh))); transition: transform 0.8s var(--ease-back); }
.gr-crow__name { font: 800 0.98rem/1.15 var(--ah-body); color: #4b5873; }
.gr-crow__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font: 600 0.8rem/1.3 var(--ah-body); color: #55627a; }
.gr-crow--you { --at: 0; z-index: 2; padding-left: 14px; border: 2px solid var(--ah-950); border-radius: 8px; background-color: #fffdf6; background-image: var(--ah-guilloche); box-shadow: 4px 4px 0 var(--ah-blue); }
.gr-crow--you .gr-crow__name { font: 900 1.12rem/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ah-ink); }
.gr-crow--you .gr-crow__meta { color: var(--ah-ink); font-weight: 800; }
.gr-crow--a { --at: 1; } .gr-crow--b { --at: 2; }
.gr-crow__stars { display: inline-flex; gap: 1px; }
.gr-crow__stars svg { width: 13px; height: 13px; fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 1.4; }
.gr-crow__chip { position: absolute; top: -19px; display: inline-flex; align-items: center; gap: 1px; padding: 3px 7px; border: 2px solid var(--ah-950); border-radius: 999px; background: #fffdf6; box-shadow: 2px 2px 0 var(--ah-blue); rotate: -4deg; }
.gr-crow__chip svg { width: 10px; height: 10px; fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 1.5; }
.gr-crow__chip b { margin-left: 4px; font: 800 0.6rem/1 var(--ah-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ah-blue-ink); }
.gr-crow__chip--1 { right: 14px; }
.gr-crow__chip--2 { right: 116px; rotate: 3deg; }
.gr-crow__tap { position: absolute; right: 18px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border: 3px solid var(--ah-blue-ink); border-radius: 50%; opacity: 0; pointer-events: none; }
/* same reach box as the hero: the bottom edge is the thumb's cut line at rest, the box runs well past the card so the
   forearm leaves through the bottom or off the side of the band; the thumb's right edge still sits 22px past the card */
.gr-climb__reach { position: absolute; z-index: 3; left: 0; top: 0; right: -170px; bottom: -26px; overflow: hidden; pointer-events: none; }
.gr-climb__thumb { position: absolute; right: 148px; bottom: 0; width: 96px; height: auto; overflow: visible; pointer-events: none; transform-origin: 90% 100%; }
.gr-climb__loop { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 46px 0 0; padding-bottom: 30px; }
.gr-climb__arrow { flex: none; width: 30px; height: 12px; overflow: visible; }
.gr-climb__arrow path, .gr-climb__back path { fill: none; stroke: var(--ah-sky); stroke-width: 2.2; stroke-linecap: round; }
.gr-climb__back { position: absolute; left: 4%; right: 4%; bottom: 0; width: 92%; height: auto; overflow: visible; }
.gr-climb__back path { stroke-dasharray: 5 6; }
.gr-climb__step { position: relative; display: inline-flex; align-items: center; gap: 7px; font: 900 1.12rem/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ah-mute); transition: color 0.3s; }
.gr-climb__step::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2a3142; box-shadow: 0 0 0 2px var(--ah-950); transition: background-color 0.3s, box-shadow 0.3s; }
.gr-climb.is-new .gr-climb__step--1, .gr-climb.is-up .gr-climb__step--2, .gr-climb.is-tap .gr-climb__step--3 { color: var(--ah-paper); }
.gr-climb.is-new .gr-climb__step--1::before, .gr-climb.is-up .gr-climb__step--2::before, .gr-climb.is-tap .gr-climb__step--3::before { background: var(--ah-neon-sky); box-shadow: 0 0 0 2px var(--ah-950), 0 0 8px var(--ah-neon-sky); }
.gr-climb__pause { position: absolute; right: 0; bottom: -54px; }
@media (max-width: 420px) {
  .gr-climb { --rh: 62px; }
  .gr-crow__chip--2 { right: 98px; }
  .gr-climb__step { font-size: 0.98rem; gap: 5px; letter-spacing: 0.05em; }
  .gr-climb__arrow { width: 22px; }
  .gr-climb__loop { gap: 4px 5px; }
  .gr-climb__thumb { right: 158px; width: 80px; }
}
@media (max-width: 360px) {
  .gr-climb__step { font-size: 0.86rem; gap: 4px; letter-spacing: 0.03em; }
  .gr-climb__arrow { width: 16px; }
  .gr-climb__loop { gap: 4px 3px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .gr-climb.is-armed:not(.is-up) .gr-crow--you { --at: 1; }
  html.motion .gr-climb.is-armed:not(.is-up) .gr-crow--a { --at: 0; }
  html.motion .gr-climb.is-armed:not(.is-new) .gr-crow__chip--1,
  html.motion .gr-climb.is-armed:not(.is-more) .gr-crow__chip--2 { opacity: 0; transform: translate(10px, -34px) rotate(-12deg); }
  .gr-crow__chip { transition: opacity 0.3s, transform 0.55s var(--ease-back); }
  .gr-climb.is-armed.is-tap .gr-crow__tap { animation: gr-ripple 1s ease-out 0.5s both; }
  .gr-climb.is-armed.is-tap .gr-climb__thumb { animation: gr-reach 1.3s cubic-bezier(0.45, 0, 0.3, 1) both; }
  .gr-climb.is-noanim *, .gr-climb.is-noanim *::before { transition: none !important; animation: none !important; }
}
.gr-stigma { margin-top: clamp(80px, 10vw, 130px); }
@media (min-width: 900px) { .gr-stigma { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gr-stigma__p { max-width: 32em; color: var(--ah-fog); font-size: 1.15rem; line-height: 1.6; }
.gr-stigma__p + .gr-stigma__p { margin-top: 8px; }
.gr-stigma__big { max-width: 14em; margin-top: 18px; color: var(--ah-paper); font: 900 clamp(2rem, 1.3rem + 2.2vw, 3.2rem)/1 var(--ah-display); letter-spacing: 0.005em; text-shadow: 0.035em 0.035em 0 var(--ah-950); text-wrap: balance; }
.gr-stigma__big strong { color: var(--ah-sky); text-shadow: 0.04em 0.04em 0 var(--ah-blue-deep), 0.075em 0.075em 0 var(--ah-950); }
/* the shop window: steel frame, dark glass, a hand-lettered sign, the neighbors' reviews taped up */
.gr-window { position: relative; width: min(100%, 480px); margin: 0 auto; padding: 14px; border: 2px solid var(--ah-950); border-radius: 6px; background: linear-gradient(90deg, #5d6a7d, #b9c3d0 30%, #8996a8 70%, #cfd7e1); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55); }
.gr-window__glass {
  position: relative; display: block; padding: 26px clamp(12px, 4%, 22px) 26px;
  border: 2px solid var(--ah-950); border-radius: 3px;
  background: linear-gradient(115deg, transparent 0 16%, rgba(200, 230, 255, 0.08) 16% 27%, transparent 27% 31%, rgba(200, 230, 255, 0.05) 31% 34%, transparent 34%), #0a1324;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.1);
}
.gr-window__sign { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto 22px; padding: 14px 20px 10px; border: 2px solid var(--ah-950); border-radius: 3px; background-color: #fffdf6; background-image: var(--ah-fiber); color: var(--ah-blue-ink); font: 1.35rem/1.15 var(--ah-hand); text-align: center; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); rotate: -1deg; }
.gr-window__tape { top: -14px; left: 50%; width: 80px; margin-left: -40px; rotate: 3deg; }
.gr-window__signstars { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.gr-window__signstars svg { width: 18px; height: 18px; fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 1.4; }
.gr-window__slips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
.gr-nslip { position: relative; display: grid; align-content: start; gap: 7px; padding: 12px 9px 11px; border: 2px solid var(--ah-950); border-radius: 3px; background-color: var(--ah-cream); background-image: var(--ah-fiber); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); }
.gr-nslip::before { content: ""; position: absolute; left: 50%; top: -8px; width: 34px; height: 14px; margin-left: -17px; background: rgba(226, 208, 168, 0.88); clip-path: polygon(4% 0, 96% 8%, 100% 50%, 96% 100%, 3% 92%, 0 50%); }
.gr-nslip:nth-child(2) { rotate: 2deg; } .gr-nslip:nth-child(3) { rotate: -1.5deg; margin-top: 8px; } .gr-nslip:nth-child(4) { rotate: 1.2deg; } .gr-nslip:nth-child(5) { rotate: -2deg; margin-top: 6px; }
.gr-nslip--m { grid-column: span 2; rotate: -1deg; background-color: #fffdf6; box-shadow: 3px 3px 0 var(--ah-blue); }
.gr-nslip__top { display: flex; align-items: center; gap: 6px; }
.gr-nslip__av { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); color: var(--ah-ink); font: 900 0.78rem/1 var(--ah-display); }
.gr-nslip__av--p { background-color: #d6ccb2; background-image: radial-gradient(circle at 50% 36%, #55627a 0 20%, transparent 22%), radial-gradient(ellipse 34% 24% at 50% 92%, #55627a 0 98%, transparent 100%); }
.gr-nslip__stars { display: inline-flex; gap: 1px; }
.gr-nslip__stars svg { width: 11px; height: 11px; fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 1.5; }
.gr-nslip__tx { color: var(--ah-ink); font: 700 0.84rem/1.3 var(--ah-body); }
.gr-nslip__bars { display: grid; gap: 5px; }
.gr-nslip__bars i { display: block; height: 6px; border-radius: 3px; background: rgba(11, 20, 36, 0.18); }
.gr-nslip__bars i:nth-child(2) { width: 78%; } .gr-nslip__bars i:nth-child(3) { width: 54%; }
.gr-window__sill { display: block; height: 16px; margin: 10px -14px -14px; border-top: 2px solid var(--ah-950); border-radius: 0 0 5px 5px; background: linear-gradient(180deg, #7a4f2e, #4a2e19); }
@media (max-width: 520px) { .gr-window__slips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   TOOLS: the real review card, taped to the counter glass, beside the words
   -------------------------------------------------------------------------- */
.gr-tools__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; justify-items: center; text-align: center; }
@media (min-width: 760px) { .gr-tools__in { grid-template-columns: 200px minmax(0, 1fr); gap: 52px; align-items: center; justify-items: start; text-align: left; } }
.gr-tools__card { position: relative; width: 180px; margin: 14px 0 0; rotate: -4deg; }
.gr-tools__card img { width: 100%; height: auto; border: 2px solid var(--ah-950); border-radius: 12px; box-shadow: 6px 6px 0 var(--ah-blue); }
.gr-tools__card .ah-masking { top: -14px; }
.gr-tools__lead { color: var(--ah-paper); font: 900 clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem)/1 var(--ah-display); letter-spacing: 0.005em; text-shadow: 0.035em 0.035em 0 var(--ah-950); text-wrap: balance; }
.gr-tools__lead .ah-accent { display: block; margin-top: 0.1em; }
.gr-tools__p { max-width: 34em; margin-top: 18px; color: var(--ah-fog); font-size: 1.1rem; }
.gr-tools__p + .gr-tools__p { margin-top: 8px; }

/* --------------------------------------------------------------------------
   BOOK: the "where you stand" printout. A printed pawn shop near me search:
   two other shops, and a blank row circled in red marker ("your shop?").
   The time card is paper-clipped to it with Book Your Call.
   -------------------------------------------------------------------------- */
.gr-book__actions { margin-top: 28px; }
.gr-stand { position: relative; width: min(100%, 470px); margin: 0 auto; padding-top: 6px; }
.gr-stand__sheet { position: relative; display: grid; gap: 4px; padding: 24px clamp(16px, 5%, 26px) 70px; border: 2px solid var(--ah-950); border-radius: 3px; background-color: #fbfaf6; background-image: var(--ah-fiber); color: #1d2433; box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.6); rotate: -1deg; }
.gr-stand__h { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--ah-ink); color: var(--ah-ink); font: 900 1.55rem/1 var(--ah-display); letter-spacing: 0.05em; text-transform: uppercase; }
.gr-stand__q { display: flex; align-items: center; gap: 9px; min-height: 36px; margin-bottom: 6px; padding: 0 12px; border: 1.5px solid rgba(11, 20, 36, 0.45); border-radius: 999px; font: 600 0.9rem/1 var(--ah-body); }
.gr-stand__row { position: relative; display: grid; gap: 3px; padding: 11px 6px; border-top: 1.5px dashed rgba(11, 20, 36, 0.28); }
.gr-stand__row b { font: 700 1rem/1.2 var(--ah-body); }
.gr-stand__row i { font: 600 0.82rem/1.3 var(--ah-body); font-style: normal; color: #4b5563; }
.gr-stand__row--you { min-height: 66px; align-content: center; }
.gr-stand__blank { display: grid; gap: 7px; }
.gr-stand__blank i { display: block; width: 48%; height: 11px; border: 1.5px dashed rgba(11, 20, 36, 0.4); border-radius: 3px; }
.gr-stand__blank i + i { width: 32%; }
.gr-stand__loop { position: absolute; left: -5%; top: -14%; width: 72%; height: 128%; overflow: visible; pointer-events: none; }
.gr-stand__loop path { fill: none; stroke: #c8322a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 900; stroke-dashoffset: 0; }
.gr-stand__you { position: absolute; right: 4%; top: 50%; margin-top: -0.7em; color: #b42318; font: 1.4rem/1.2 var(--ah-hand); rotate: -6deg; white-space: nowrap; }
.gr-stand__sheet > .ah-sample { top: auto; bottom: 80px; left: auto; right: -10px; --tilt: 6deg; }
.gr-stand__card { width: min(88%, 340px); margin: -52px 0 0 auto; rotate: 1.6deg; z-index: 2; box-shadow: 6px 6px 0 var(--ah-blue); }
.gr-stand__clip { position: absolute; left: 22px; top: -22px; z-index: 3; width: 20px; height: 48px; border: 3px solid var(--ah-brass-lo); border-radius: 10px; box-shadow: inset 0 0 0 2px var(--ah-brass-hi), 2px 2px 0 rgba(0, 0, 0, 0.45); }
.gr-stand__clip::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; bottom: 12px; border: 2.5px solid var(--ah-brass); border-radius: 8px; }
@media (max-width: 420px) { .gr-stand__you { font-size: 1.2rem; right: 2%; } .gr-stand__card { width: 94%; } }
@media (prefers-reduced-motion: no-preference) {
  html.motion .gr-stand:not(.is-play) .gr-stand__loop path { stroke-dashoffset: 900; }
  html.motion .gr-stand:not(.is-play) .gr-stand__you { clip-path: inset(0 100% 0 0); }
  .gr-stand.is-play .gr-stand__loop path { animation: gr-draw 1.3s cubic-bezier(0.55, 0, 0.3, 1) 0.35s both; --len: 900; }
  .gr-stand.is-play .gr-stand__you { animation: gr-write 0.9s steps(12) 1.5s backwards; }
}

/* --------------------------------------------------------------------------
   FINAL: the neon five-star sign hangs in the window on two chains. The gold
   stars light one at a time; tap the sign and they relight from the first.
   -------------------------------------------------------------------------- */
.gr-sign { position: relative; display: block; width: min(100%, 560px); margin: 0 auto 54px; padding: 66px 0 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gr-sign:focus-visible { outline: none; }
.gr-sign:focus-visible .gr-sign__svg { outline: 3px solid var(--ah-sky); outline-offset: 6px; border-radius: 22px; }
.gr-sign__chain { position: absolute; top: 0; width: 8px; height: 76px; background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 52%, #9aa7b8 58%, #5d6a7d 85%, transparent 90%) 0 0 / 100% 10px repeat-y; }
.gr-sign__chain--l { left: 17%; } .gr-sign__chain--r { right: 17%; }
.gr-sign__svg { display: block; width: 100%; height: auto; overflow: visible; }
.gr-sign__box { fill: #070b15; stroke: var(--ah-950); stroke-width: 3; }
.gr-sign__grid path { fill: none; stroke: #1a2232; stroke-width: 3; }
.gs-glass { fill: none; stroke: rgba(255, 236, 200, 0.16); stroke-width: 9; stroke-linejoin: round; }
.gs-lit { filter: drop-shadow(0 0 5px rgba(255, 191, 58, 0.9)); }
.gs-lit use { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.gs-halo { stroke: var(--ah-neon-gold); stroke-width: 15; opacity: 0.28; }
.gs-tube { stroke: var(--ah-neon-gold); stroke-width: 7.5; }
.gs-core { stroke: var(--ah-neon-gold-core); stroke-width: 2.6; }
.gr-sign__hw circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 2; }
.gr-sign__cord { position: absolute; right: 4%; top: calc(100% - 8px); width: 34px; height: 30px; border-left: 3px solid #1f2736; border-bottom: 3px solid #1f2736; border-radius: 0 0 0 16px; }
.gr-sign__cord::after { content: ""; position: absolute; right: -24px; bottom: -10px; width: 24px; height: 16px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #4a5568, #1a202c); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .gr-final:not(.is-play) .gs-lit { opacity: 0.05; }
  .gr-final.is-play .gs-lit { animation: ah-ignite 1s calc(0.25s + var(--n, 0) * 0.38s) both; }
  .gr-sign.relight .gs-lit { animation: ah-ignite2 0.8s calc(0.05s + var(--n, 0) * 0.32s) both !important; }
  .gr-sign:hover { animation: gr-sway 1.4s ease-in-out; }
}
@keyframes gr-sway { 25% { rotate: 1.4deg; } 55% { rotate: -1deg; } 80% { rotate: 0.4deg; } }