/* ==========================================================================
   AFTER HOURS: Email Marketing Machine (prefix em-)
   The scenes of this page only. Shared pieces come from css/theme.css.
   The page's own object is the postage meter and the mail it stamps:
   hero: the postage meter on the counter (SEND BLAST stamps the envelope, it lands first in the inbox)
   audit: the register with the list-size lever, the meter flip, and the two bills it prints
   spam: the reply to the fair objection + the junk drawer
   address: the shared building's mailbox bank + your own mailbox at the curb (Pull Your Card)
   bucket: the post office sorting case and the galvanized bucket
   warmup: the claw machine (plays once when seen)
   protocol: the dug-out envelope with its cancellation marks, opened first in the inbox
   pricing: the statement of mailing          requirement: the house rule card
   book: the business-reply envelope with the old bill in it
   final: the neon envelope sign with 1 new
   The red meter mark (svg symbol #emMark) repeats on the envelope, the bill, the statement and the reply.
   ========================================================================== */

/* the red meter mark: red ink, a little speckle like a real impression */
.em-mark { display: block; overflow: visible; color: var(--ah-red-ink); -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px; }

/* an envelope: cream, ink outline, the flap in two diagonals */
.em-env {
  position: absolute; display: block; aspect-ratio: 3 / 2;
  border: 2px solid var(--ah-950); border-radius: 3px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1.2px), var(--ah-ink-2) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)) left top / 50.5% 54% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1.2px), var(--ah-ink-2) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)) right top / 50.5% 54% no-repeat,
    #fbf7ec;
}

/* --------------------------------------------------------------------------
   HERO: the postage meter. A navy and chrome desk meter on the counter: the
   chrome name badge, the recipient counter in flip windows, the price on an
   LED, the big SEND BLAST key, the engraved nameplate on the base. The stamped
   envelope rests on the exit tray; the customer's phone behind it shows it
   first in the inbox.
   -------------------------------------------------------------------------- */
.em-hero .ah-phero__copy { position: relative; z-index: 2; }
.em-nw { white-space: nowrap; }
.em-hero__catch { flex-wrap: wrap; row-gap: 2px; }
.em-hero__catch a { display: inline-block; margin: -11px 0; padding: 11px 0; color: var(--ah-sky); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.em-hero__catch a:hover { color: var(--ah-paper); }

.em-meter { position: relative; width: min(100%, 590px); margin: 0 auto; padding-top: 18px; container-type: inline-size; }
/* the meter's light printed on the bricks behind it (halftone, no blur) */
.em-meter::before {
  content: ""; position: absolute; z-index: 0; left: -12%; right: -12%; top: -6%; bottom: 4%; pointer-events: none;
  background: radial-gradient(circle, rgba(47, 155, 255, 0.4) 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%);
}
.em-meter > .ah-sample { top: 0; right: 30%; --tilt: 5deg; }
.em-meter__scene { --side: 31cqi; --base-h: 9.4cqi; position: relative; z-index: 1; padding: 0 var(--side) 0 1.4cqi; }
/* the countertop the meter, the tray and the phone stand on (the shop's wood counter, lit from the front) */
.em-meter__scene::after {
  content: ""; position: absolute; z-index: 0; left: -3cqi; right: -2cqi; top: 100%; height: max(14px, 3.4cqi);
  border: 2px solid var(--ah-950); border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.32), transparent 3px), repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 9px), linear-gradient(180deg, #7a5030, #432a17);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.45);
}

/* the machine */
.em-meter__machine { position: relative; z-index: 3; }
.em-meter__head {
  position: relative; padding: 3cqi 3.4cqi 3.4cqi;
  border: 2px solid var(--ah-950); border-radius: 5cqi 5cqi 1.4cqi 1.4cqi;
  background: linear-gradient(180deg, #1d3460 0, #142446 46%, #0f1b34 100%);
  box-shadow: inset 0 2px 0 rgba(173, 229, 255, 0.22), inset 0 0 0 5px #0b1424, inset 0 0 0 7px rgba(173, 229, 255, 0.16);
}
.em-meter__screw { position: absolute; top: 2.2cqi; width: max(7px, 1.7cqi); height: max(7px, 1.7cqi); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ah-950); background: linear-gradient(35deg, transparent 43%, var(--ah-950) 43% 57%, transparent 57%), radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); }
.em-meter__screw--l { left: 2.2cqi; } .em-meter__screw--r { right: 2.2cqi; }
.em-meter__brandrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4cqi 2cqi; padding: 0 2.2cqi; }
.em-meter__brand {
  display: inline-flex; align-items: center; gap: 1.2cqi; margin: 0; padding: 0.9cqi 2cqi 0.7cqi;
  border: 2px solid var(--ah-950); border-radius: 1.2cqi;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px), linear-gradient(180deg, #f2f5f9, #c9d2dd 55%, #a9b4c2);
  color: var(--ah-ink); font: 900 max(0.78rem, 2.9cqi)/1 var(--ah-display); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 2px 2px 0 var(--ah-950), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.em-meter__brand svg { flex: none; width: 1.05em; height: 1.05em; fill: none; stroke: var(--ah-blue-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.em-meter__live {
  display: inline-flex; align-items: center; gap: 1.2cqi; margin: 0; padding: 0.8cqi 1.8cqi 0.6cqi;
  border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3;
  font: 700 max(0.56rem, 1.55cqi)/1.2 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
.em-meter__lamp { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 2px #11151d, 0 0 7px #2ecc71; }
.em-meter__display {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.2cqi; align-items: end;
  margin-top: 2.6cqi; padding: 2.2cqi 2.4cqi; border: 2px solid var(--ah-950); border-radius: 1.8cqi;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 3px 3px 0 var(--ah-blue);
}
.em-meter__label { margin: 0 0 1.2cqi; color: var(--ah-ink); font: 800 max(0.56rem, 1.7cqi)/1.2 var(--ah-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.em-meter__cells { display: flex; gap: 0.9cqi; width: fit-content; margin: 0; padding: 0.9cqi; border: 2px solid var(--ah-950); border-radius: 1.2cqi; background: #04060b; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.8); }
.em-cell {
  display: grid; place-items: center; width: 5.6cqi; height: 7.6cqi;
  border: 1.5px solid var(--ah-950); border-radius: 3px;
  background: linear-gradient(180deg, #fffaf0 0 48%, #ece2c8 52%, var(--ah-cream) 100%);
  color: var(--ah-ink); font: 900 5.6cqi/1 var(--ah-display); font-variant-numeric: tabular-nums; transform-origin: 50% 0;
}
.em-meter__cost { display: grid; justify-items: end; padding-left: 2cqi; border-left: 2px dashed rgba(11, 20, 36, 0.28); text-align: right; }
.em-meter__led { display: inline-flex; align-items: baseline; min-width: 0; padding: 1.1cqi 1.8cqi 0.8cqi; font-size: max(1.15rem, 5.6cqi); }
.em-meter__led small { align-self: flex-start; margin: 0.12em 0 0 1px; font-size: 0.5em; letter-spacing: 0.02em; }
.em-meter__send {
  --bez: max(3px, 0.9cqi);
  position: relative; display: flex; align-items: center; justify-content: center; gap: 1.8cqi;
  width: calc(100% - 2 * var(--bez) - 4px); min-height: max(46px, 10cqi); margin: 3.4cqi auto 0; padding: 0 3cqi;
  border: 2.5px solid var(--ah-950); border-radius: 999px;
  background-color: var(--ah-blue); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 56%);
  color: var(--ah-ink); font: 900 max(1rem, 4.2cqi)/1 var(--ah-display); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 0 var(--bez) #2d3647, 0 0 0 calc(var(--bez) + 2px) var(--ah-950), 4px 5px 0 calc(var(--bez) + 2px) rgba(0, 0, 0, 0.55);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 0.18s var(--ease-back), background-color 0.16s;
}
.em-meter__send:hover { background-color: var(--ah-blue-hi); transform: translateY(-2px); }
.em-meter__send:active { transform: translateY(3px); }
.em-meter__send:focus-visible { outline-offset: calc(var(--bez) + 5px); }
.em-meter__send svg { flex: none; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* the base: brushed chrome, the print slot on the right, the engraved nameplate */
.em-meter__base {
  position: relative; display: flex; align-items: flex-end; justify-content: center; height: var(--base-h); margin: 0 -1.4cqi; padding: 0 2.4cqi 1.9cqi;
  border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 2.4cqi 2.4cqi;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 4px), linear-gradient(180deg, #e3e9f0, #b5c0cd 45%, #8b98aa);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.7);
}
.em-meter__slot { position: absolute; right: -2px; top: 0.8cqi; width: 16%; height: 2.6cqi; border: 2px solid var(--ah-950); border-right: 0; border-radius: 3px 0 0 3px; background: #04060b; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8), 0 -2px 0 rgba(255, 255, 255, 0.6); }
.em-meter__plate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6cqi 1.6cqi; margin: 0;
  color: #27324a; font: 800 max(0.56rem, 1.8cqi)/1.25 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.em-meter__plate span { display: inline-flex; align-items: center; gap: 1.6cqi; white-space: nowrap; }
.em-meter__plate span + span::before { content: ""; flex: none; width: max(6px, 1.3cqi); height: max(6px, 1.3cqi); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ah-950); background: radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); }

/* the exit tray the stamped envelope slides out onto */
.em-meter__tray { position: absolute; z-index: 2; right: 1cqi; width: calc(var(--side) + 1cqi); bottom: calc(var(--base-h) - 3.4cqi); height: 2.6cqi; border: 2px solid var(--ah-950); border-radius: 0 1.2cqi 1.2cqi 0; background: linear-gradient(180deg, #f2f5f9, #9aa7b8 55%, #6f7c90); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.em-meter__tray i { position: absolute; right: -2px; bottom: 100%; width: 2.2cqi; height: 4cqi; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 1cqi 1cqi 0 0; background: linear-gradient(90deg, #6f7c90, #e3e9f0 45%, #9aa7b8); }
.em-meter__env { z-index: 2; right: 4.4cqi; bottom: calc(var(--base-h) - 0.8cqi); width: 26cqi; rotate: -1.5deg; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); }
.em-env__lines { position: absolute; left: 8%; bottom: 14%; width: 46%; height: 26%; background: linear-gradient(var(--ah-ink-2), var(--ah-ink-2)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--ah-ink-2), var(--ah-ink-2)) 0 50% / 80% 2px no-repeat, linear-gradient(var(--ah-ink-2), var(--ah-ink-2)) 0 100% / 62% 2px no-repeat; opacity: 0.55; }
.em-env__mark { position: absolute; right: 3%; top: 5%; width: 62%; height: auto; rotate: -4deg; }
.em-meter__mini { z-index: 4; right: 11cqi; bottom: calc(var(--base-h) + 3cqi); width: 12cqi; opacity: 0; pointer-events: none; }

/* the customer's phone, propped behind the tray */
.em-phone { position: relative; display: block; padding: 0.55em; border: 2px solid var(--ah-950); border-radius: 1.6em; background: #11151d; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px #2d3647; }
.em-phone__island { position: absolute; z-index: 2; left: 50%; top: 1em; width: 28%; height: 0.75em; margin-left: -14%; border-radius: 1em; background: #03060d; }
.em-phone__screen { position: relative; height: 100%; overflow: hidden; padding: 2.3em 0.75em 0.8em; border-radius: 1.15em; background: #f7f4ea; color: var(--ah-ink); }
.em-phone__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; margin: 0 0 0.6em; }
.em-phone__bar b { font: 900 1.9em/1 var(--ah-display); letter-spacing: 0.01em; }
.em-phone__new { padding: 0.25em 0.55em 0.18em; border: 1.5px solid var(--ah-950); border-radius: 1em; background: var(--ah-neon-pink); color: var(--ah-ink); font: 800 0.86em/1 var(--ah-body); letter-spacing: 0.04em; white-space: nowrap; }
.em-phone__row { position: relative; display: grid; grid-template-columns: 0.75em minmax(0, 1fr); gap: 0.45em; align-items: start; padding: 0.6em 0.3em; border-top: 1.5px solid rgba(11, 20, 36, 0.14); }
.em-phone__dot { width: 0.65em; height: 0.65em; margin-top: 0.3em; border-radius: 50%; background: var(--ah-blue-deep); }
.em-phone__row p { display: grid; gap: 0.15em; min-width: 0; }
.em-phone__row b { overflow: hidden; font: 900 1.12em/1.1 var(--ah-body); white-space: nowrap; text-overflow: ellipsis; }
.em-phone__row span { display: -webkit-box; overflow: hidden; color: var(--ah-ink-2); font-size: 0.95em; font-weight: 600; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.em-phone__row--new { margin: 0 -0.3em; padding-inline: 0.6em; border-radius: 0.5em; background: rgba(27, 141, 246, 0.12); }
.em-phone__row--old .em-phone__dot { background: transparent; }
.em-phone__row--old b { width: 64%; height: 0.8em; border-radius: 3px; background: rgba(11, 20, 36, 0.22); }
.em-phone__row--old span { width: 88%; height: 1.6em; border-radius: 3px; background: repeating-linear-gradient(180deg, rgba(11, 20, 36, 0.12) 0 0.55em, transparent 0.55em 0.95em); }
.em-meter__phone { position: absolute; z-index: 1; right: 1.2cqi; top: 0; bottom: 0; width: calc(var(--side) - 4cqi); font-size: 1.95cqi; rotate: 2deg; }

.em-meter__cap {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
  margin: calc(26px + max(14px, 3.4cqi)) auto 0; padding: 8px 14px 7px;
  border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3;
  font: 700 max(0.68rem, 2.15cqi)/1.4 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; text-wrap: balance;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 var(--ah-blue); rotate: -1deg;
}
.em-meter__capled { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ah-neon-sky); box-shadow: 0 0 0 2px #11151d, 0 0 8px var(--ah-neon-sky); }

/* narrow meters (phones): the machine takes more room, the phone tucks in tighter */
@container (max-width: 430px) {
  .em-meter__scene { --side: 29cqi; --base-h: 13cqi; }
  .em-meter__brandrow { padding: 0 1.6cqi; }
  .em-meter__plate { gap: 0.4cqi 1.4cqi; letter-spacing: 0.08em; }
  .em-meter__live { display: none; }
  .em-meter__phone { width: calc(var(--side) - 1.5cqi); font-size: 2.2cqi; }
}

/* the run: SEND BLAST (or first sight) feeds the envelope through the meter. It comes out of the
   slot already stamped, a copy hops into the phone, and the new email lands first in the inbox.
   Finite (about three seconds). The resting state is the finished state. */
@media (prefers-reduced-motion: no-preference) {
  html.motion .em-meter:not(.is-play):not(.is-go) .em-meter__env { translate: -30cqi 0; }
  html.motion .em-meter:not(.is-play):not(.is-go) .em-phone__row--new,
  html.motion .em-meter:not(.is-play):not(.is-go) .em-phone__new { opacity: 0; }
  .em-meter.is-play .em-meter__env { animation: em-out 3.2s var(--ease-out) 0.3s both; }
  .em-meter.is-play .em-env__mark { animation: em-thump 3.2s 0.3s both; }
  .em-meter.is-play .em-meter__mini { animation: em-hop 3.2s 0.3s both; }
  .em-meter.is-play .em-phone__row--new { animation: em-land 3.2s 0.3s both; }
  .em-meter.is-play .em-phone__new { animation: em-badge 3.2s 0.3s both; }
  .em-meter.is-go .em-meter__env { animation-name: em-out-b; }
  .em-meter.is-go .em-env__mark { animation-name: em-thump-b; }
  .em-meter.is-go .em-meter__mini { animation-name: em-hop-b; }
  .em-meter.is-go .em-phone__row--new { animation-name: em-land-b; }
  .em-meter.is-go .em-phone__new { animation-name: em-badge-b; }
  .em-meter.is-go .em-meter__send { animation: em-press 0.5s var(--ease-back); }
  .em-meter.is-go .em-meter__lamp { animation: ah-blinkon 0.3s steps(2) 3; }
  .em-cell.is-flip { animation: ah-flip 0.32s var(--ease-out); }
}
@keyframes em-out { 0%, 30% { translate: -30cqi 0; } 58%, 100% { translate: 0 0; } }
@keyframes em-out-b { 0%, 30% { translate: -30cqi 0; } 58%, 100% { translate: 0 0; } }
@keyframes em-thump { 0%, 56% { scale: 1.45; opacity: 0.4; } 64%, 100% { scale: 1; opacity: 1; } }
@keyframes em-thump-b { 0%, 56% { scale: 1.45; opacity: 0.4; } 64%, 100% { scale: 1; opacity: 1; } }
@keyframes em-hop { 0%, 64% { opacity: 0; transform: translate(0, 0) scale(0.7); } 68% { opacity: 1; transform: translate(0, -2cqi) scale(0.7); } 84% { opacity: 1; transform: translate(3cqi, var(--hop-y, -22cqi)) scale(0.32); } 88%, 100% { opacity: 0; transform: translate(3cqi, var(--hop-y, -22cqi)) scale(0.2); } }
@keyframes em-hop-b { 0%, 64% { opacity: 0; transform: translate(0, 0) scale(0.7); } 68% { opacity: 1; transform: translate(0, -2cqi) scale(0.7); } 84% { opacity: 1; transform: translate(3cqi, var(--hop-y, -22cqi)) scale(0.32); } 88%, 100% { opacity: 0; transform: translate(3cqi, var(--hop-y, -22cqi)) scale(0.2); } }
@keyframes em-land { 0%, 84% { opacity: 0; transform: translateY(-0.8em); background-color: rgba(143, 214, 255, 0.9); } 90% { opacity: 1; transform: none; background-color: rgba(143, 214, 255, 0.9); } 100% { opacity: 1; transform: none; background-color: rgba(27, 141, 246, 0.12); } }
@keyframes em-land-b { 0%, 84% { opacity: 0; transform: translateY(-0.8em); background-color: rgba(143, 214, 255, 0.9); } 90% { opacity: 1; transform: none; background-color: rgba(143, 214, 255, 0.9); } 100% { opacity: 1; transform: none; background-color: rgba(27, 141, 246, 0.12); } }
@keyframes em-badge { 0%, 88% { opacity: 0; transform: scale(0.3); } 94% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes em-badge-b { 0%, 88% { opacity: 0; transform: scale(0.3); } 94% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes em-press { 30% { transform: translateY(4px) scale(0.97); } 70% { transform: translateY(-2px); } }

/* phones: the first screen shows the headline, one lead line, the Apply button and the top of the
   meter (its counter and the $10.00 window) even in Safari's real 664px viewport. A page-scoped
   stand-in for the kit's planned phone hero order: the rest of the lead, the second button and the
   requirement note move under the meter. */
@media (max-width: 767px) {
  .em-hero .ah-phero__grid { gap: 0; }
  .em-hero .ah-phero__copy, .em-hero .em-hero__actions { display: contents; }
  .em-hero .ah-crumbs { order: 1; }
  .em-hero .em-hero__kicker { order: 2; }
  .em-hero .em-hero__h { order: 3; }
  .em-hero .em-hero__lead1 { order: 4; margin-bottom: 18px; }
  .em-hero .em-hero__actions .btn { justify-self: start; }
  .em-hero .em-hero__actions .btn-primary { order: 5; }
  .em-hero .em-hero__object { order: 6; margin-top: 16px; }
  .em-hero .ah-phero__lead.em-hero__lead2 { order: 7; margin-top: 30px; margin-bottom: 12px; }
  .em-hero .ah-phero__lead.em-hero__punch { order: 8; margin-top: 0; margin-bottom: 0; }
  .em-hero .em-hero__actions .btn-ghost { order: 9; margin-top: 26px; }
  .em-hero .em-hero__catch { order: 10; margin-top: 16px; }
}
/* --------------------------------------------------------------------------
   THE AUDIT: the register with the list-size lever, the two meters, and the
   punch line printed on the tape that runs out of the register.
   -------------------------------------------------------------------------- */
.em-audit__grid { align-items: center; }
.em-audit__hand { margin-top: 26px; margin-left: -6px; }
.em-lsq { max-width: 600px; }
.em-lsq__deck { gap: 14px; }
.em-lsq__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 14px; }
.em-lsq__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.em-lsq__eyebrow svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.em-lsq__count { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.em-lsq__num { color: var(--ah-ink); font: 900 clamp(2.5rem, 1.7rem + 2.2vw, 3.4rem)/0.9 var(--ah-display); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; text-shadow: 0.05em 0.05em 0 var(--ah-blue); }
.em-lsq__unit { color: var(--ah-ink-2); font: 800 0.82rem/1 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.em-lsq__ticks { margin-top: 4px; }

.em-lsq__panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 20px; }
.em-lsq__panel {
  position: relative; display: grid; align-content: start; gap: 4px; padding: 16px 16px 15px;
  border: 2px solid var(--ah-950); border-radius: 10px; background: #0b1424;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(173, 229, 255, 0.16);
}
.em-lsq__plabel { display: flex; align-items: center; gap: 8px; color: var(--ah-paper); font: 900 1.3rem/1 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
.em-lsq__plabel::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ah-neon-pink); box-shadow: 0 0 0 2px #0b1424, 0 0 8px var(--ah-neon-pink); }
.em-lsq__panel--ours .em-lsq__plabel::before { background: var(--ah-neon-sky); box-shadow: 0 0 0 2px #0b1424, 0 0 8px var(--ah-neon-sky); }
.em-lsq__psub { color: var(--ah-fog); font-size: 0.88rem; font-weight: 600; line-height: 1.35; }
.em-lsq__fig { margin: 10px 0 0; }
.em-lsq__led { display: inline-flex; align-items: baseline; max-width: 100%; padding: 8px 12px 6px; font-size: clamp(2rem, 1.6rem + 1.1vw, 2.6rem); }
.em-lsq__cur { align-self: flex-start; margin: 0.1em 2px 0 0; font-size: 0.58em; }
.em-lsq__per { margin-left: 3px; font-size: 0.4em; letter-spacing: 0.08em; }
.em-lsq__led.is-demo { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); white-space: normal; line-height: 1.05; letter-spacing: 0.04em; }
.em-lsq__bar { display: block; height: 14px; margin-top: 10px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 3px; background: #04060b; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8); }
.em-lsq__barfill { display: block; min-width: 3px; height: 100%; background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 8px); transition: width 0.45s var(--ease-out); }
.em-lsq__bar--theirs { color: var(--ah-neon-pink); }
.em-lsq__bar--ours { color: var(--ah-neon-blue); }
.em-lsq__tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.em-lsq__tag svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.em-lsq__tag--theirs { color: var(--ah-hot); }
.em-lsq__tag--ours { color: var(--ah-sky); }
/* the provisional sticker is a button: it opens the pricing note (a 44px hit area around a small sticker) */
.em-lsq__prov {
  position: relative; display: inline-flex; align-items: center; min-height: 28px; margin: 0 0 0 2px; padding: 3px 9px 2px;
  border: 2px solid var(--ah-950); border-radius: 5px; background: var(--ah-gold); color: var(--ah-ink);
  font: 800 0.72rem/1.1 var(--ah-body); letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ah-950); rotate: -3deg; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: rotate 0.25s var(--ease-back), background-color 0.16s;
}
.em-lsq__prov::after { content: ""; position: absolute; inset: -9px -8px; }
.em-lsq__prov:hover { rotate: 0deg; }
.em-lsq__prov[aria-expanded="true"] { background: var(--ah-sky); rotate: 0deg; }
.em-lsq__note { margin-top: 14px; padding: 12px 14px; border: 2px dashed rgba(173, 229, 255, 0.4); border-radius: 8px; color: var(--ah-fog); font-size: 0.92rem; line-height: 1.5; }
.em-lsq__note[hidden] { display: none; }
#psLsq .ah-calc__base { z-index: 1; }
/* the tape the register prints the punch line on */
.em-lsq__tape { position: relative; z-index: 0; width: 88%; margin: -6px auto 0; filter: var(--ah-outline) drop-shadow(5px 5px 0 var(--ah-blue)); rotate: 0.6deg; }
.em-lsq__punch {
  padding: 20px 24px 24px; text-align: center;
  background-color: #fbf9f2; background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(11, 20, 36, 0.035) 23px 24px);
  color: var(--ah-ink); font-size: 1.04rem; font-weight: 600; line-height: 1.5;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 96% 100%, 92% calc(100% - 8px), 88% 100%, 84% calc(100% - 8px), 80% 100%, 76% calc(100% - 8px), 72% 100%, 68% calc(100% - 8px), 64% 100%, 60% calc(100% - 8px), 56% 100%, 52% calc(100% - 8px), 48% 100%, 44% calc(100% - 8px), 40% 100%, 36% calc(100% - 8px), 32% 100%, 28% calc(100% - 8px), 24% 100%, 20% calc(100% - 8px), 16% 100%, 12% calc(100% - 8px), 8% 100%, 4% calc(100% - 8px), 0 100%);
}
.em-lsq__punch b { color: var(--ah-blue-ink); font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  .em-lsq__num.is-bump, .em-lsq__led.is-bump { animation: em-tick 0.22s ease; }
}
@keyframes em-tick { 40% { transform: translateY(-3px); } }
@media (max-width: 520px) {
  .em-lsq__panels { grid-template-columns: minmax(0, 1fr); }
  .em-lsq__tape { width: 96%; }
  .em-lsq__punch { padding: 18px 14px 22px; font-size: 0.98rem; }
}

/* --------------------------------------------------------------------------
   THE PRINTOUT (under the register): the meter flip on the left, the two bills
   the register prints on the right, the red meter mark stamped on yours
   -------------------------------------------------------------------------- */
.em-print { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(40px, 5vw, 60px); border-top: 2px dashed var(--ah-line-2); }
@media (min-width: 1080px) { .em-print { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 72px); } }
.em-print__h, .em-tally__h { color: var(--ah-paper); font: 900 clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem)/0.98 var(--ah-display); letter-spacing: 0.005em; text-wrap: balance; text-shadow: 0.04em 0.04em 0 var(--ah-950); }
.em-print__h { margin-bottom: 18px; }
.em-print__copy a { margin: -10px 0; padding: 10px 0; color: var(--ah-sky); font-weight: 700; text-underline-offset: 4px; }
.em-print__copy a:hover { color: var(--ah-paper); }
.em-print__note { margin: 40px 0 0; --tilt: -0.6deg; }
.em-print__note p { max-width: none; }
.em-print .em-print__note p, .em-print .em-print__note strong { color: var(--ah-ink); }
.em-tally { margin: 0; }
.em-tally__cap { margin-bottom: 34px; }
/* the receipts' caption, printed small over the tape (the plan: the old #tally headline becomes the tape caption,
   so it no longer competes with the meter-flip heading beside it) */
.em-tally__h { display: inline-block; margin-bottom: 14px; padding: 7px 12px 6px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3; font: 800 clamp(0.8rem, 0.72rem + 0.25vw, 0.95rem)/1.4 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; text-shadow: none; box-shadow: 3px 3px 0 var(--ah-blue); }
.em-tally__cap p { max-width: 34em; color: var(--ah-fog); font-size: 1.05rem; }
.em-tally__cap p + p { margin-top: 8px; }
.em-bills { position: relative; max-width: none; }
@media (min-width: 760px) { .em-bills { column-gap: 64px; } }
.em-bills > .em-bill--ours { --tilt: -1deg; }
@media (min-width: 760px) {
  .em-bills > .em-bill--ours { margin-top: 28px; }
  .em-bills > .em-bills__vs { position: absolute; left: 50%; top: 42%; margin: -27px 0 0 -27px; }
}
.em-bills__vs { position: relative; z-index: 3; display: grid; place-items: center; width: 54px; height: 54px; margin: -8px auto; border: 2px solid var(--ah-950); border-radius: 50%; background: #11151d; color: var(--ah-sky); font: 900 1.5rem/1 var(--ah-display); text-transform: uppercase; box-shadow: 3px 3px 0 var(--ah-blue); }
@media (max-width: 759px) { .em-bills__vs { order: 1; } .em-bills > .em-bill--ours { order: 2; } }
.em-bill .ah-receipt__head svg { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.em-bill .ah-receipt__head span { display: block; margin-top: 2px; color: var(--ah-ink-2); font-size: 0.82rem; }
.em-bill .ah-receipt__total b { font-size: 1.12rem; line-height: 1.08; text-transform: uppercase; }
.em-bill--ours .ah-receipt__paper { position: relative; padding-bottom: 96px; }
.em-bill__red { color: var(--ah-red-ink); }
.em-bill__blue { color: var(--ah-blue-ink); }
.em-bill__green { color: #1d6b36; }
.em-bill__mark { position: absolute; right: 18px; bottom: 26px; width: 170px; height: auto; rotate: -5deg; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .em-bill--ours:not(.is-play) .em-bill__mark { opacity: 0; scale: 1.5; }
  .em-bill__mark { transition: opacity 0.15s 1.5s, scale 0.35s var(--ease-back) 1.5s; }
}
/* --------------------------------------------------------------------------
   THE SPAM FOLDER: a steel junk drawer pulled open, three letters standing in
   it, yours lifted into the light between two scams
   -------------------------------------------------------------------------- */
.em-spam__grid { align-items: center; }
.em-drawer { position: relative; width: min(100%, 560px); margin: 0 auto; }
.em-drawer > .ah-sample { top: -14px; right: 18px; }
.em-drawer__box {
  position: relative; padding: 26px clamp(12px, 3vw, 22px) 26px;
  border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 7%, transparent 93%, rgba(0, 0, 0, 0.28)), linear-gradient(180deg, #2a3142, #1a202c 34%, #11151d);
  box-shadow: inset 0 12px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.08);
}
.em-drawer__mail { display: grid; gap: 12px; }
.em-mail {
  --r: 0deg; position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 14px 13px; border: 2px solid var(--ah-950); border-radius: 6px;
  background-color: #b9bec7; background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45); rotate: var(--r);
  transition: translate 0.6s var(--ease-back), box-shadow 0.4s;
}
.em-mail:nth-child(1) { --r: -0.8deg; } .em-mail:nth-child(3) { --r: 0.6deg; }
.em-mail--yours { --r: 0.4deg; z-index: 1; background-color: var(--ah-cream); translate: -10px -2px; box-shadow: 6px 6px 0 var(--ah-blue); }
.em-mail__dot { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--ah-950); border-radius: 50%; background: #4b5873; color: #fff; font: 900 1.2rem/1 var(--ah-display); }
.em-mail--yours .em-mail__dot { background: var(--ah-blue); color: var(--ah-ink); }
.em-mail__tx { min-width: 0; font-size: 0.95rem; line-height: 1.35; }
.em-mail__tx b { display: block; font-weight: 800; }
.em-mail--junk .em-mail__tx b { font-style: italic; letter-spacing: 0.01em; }
.em-mail__tx span { display: block; margin-top: 2px; color: #1f2a3d; }
.em-mail--yours .em-mail__tx span { color: var(--ah-ink-2); }
.em-mail .ah-stamp { grid-area: auto; justify-self: end; }
.em-mail--junk .ah-stamp { color: #8a1c12; }
.em-mail__tag { justify-self: end; }
.em-drawer__front {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; padding: 16px 18px 20px;
  border: 2px solid var(--ah-950); border-radius: 0 0 10px 10px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px), linear-gradient(180deg, #cfd7e1, #9aa7b8 60%, #8996a8);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.6);
}
.em-drawer__label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px 7px;
  border: 3px solid var(--ah-brass); border-radius: 4px; background: var(--ah-cream); color: var(--ah-ink);
  box-shadow: 0 0 0 2px var(--ah-950), inset 0 0 0 1.5px var(--ah-950);
}
.em-drawer__label svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ah-red-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.em-drawer__label b { font: 900 1.4rem/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; }
.em-drawer__label span { color: var(--ah-ink-2); font: 700 0.78rem/1 var(--ah-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.em-drawer__pull { width: 110px; height: 20px; border: 2px solid var(--ah-950); border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #e3e9f0, #6f7c90); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.em-drawer__cap { margin-top: 24px; text-align: center; color: var(--ah-fog); font-size: 1.05rem; font-weight: 600; }
.em-drawer__cap b { color: var(--ah-hot); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .em-drawer:not(.is-play) .em-mail--yours { translate: 0 0; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45); }
  .em-mail--yours { transition-delay: 0.35s; }
}
@media (max-width: 520px) {
  .em-mail { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
  .em-mail__dot { width: 34px; height: 34px; font-size: 1.05rem; }
  .em-mail .ah-stamp, .em-mail__tag { grid-column: 2; justify-self: start; margin-top: 6px; }
  .em-mail--yours { translate: -4px -2px; }
}

/* the spam band layout: the reply and the words on the left, the drawer on the right */
.em-spam__grid { display: grid; justify-items: center; gap: clamp(40px, 5vw, 60px); }
.em-spam__copy { display: grid; justify-items: center; text-align: center; }
.em-spam__copy .ah-copy p { margin-inline: auto; }
.em-spam__h { max-width: 14em; margin: 40px auto 20px; }
/* the reply to the fair objection: a cream mail card, the quoted subject, our answer */
.em-reply {
  position: relative; width: min(100%, 520px); padding: 16px 20px 18px; text-align: left;
  border: 2px solid var(--ah-950); border-radius: 10px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 5px 5px 0 var(--ah-blue); rotate: -0.6deg;
}
.em-reply__bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 9px; border-bottom: 2px dashed rgba(11, 20, 36, 0.25); color: var(--ah-ink-2); font: 800 0.74rem/1 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.em-reply__bar svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.em-reply__subj { margin: 0 0 10px; color: var(--ah-ink); font-size: 1.04rem; font-weight: 700; line-height: 1.35; }
.em-reply__subj b { color: var(--ah-blue-ink); font-weight: 900; }
.em-reply__ans { color: var(--ah-ink); font-size: 1.04rem; font-weight: 500; line-height: 1.5; }
.em-reply__ans + .em-reply__ans { margin-top: 4px; }
.em-reply__ans b { font-weight: 800; }

/* --------------------------------------------------------------------------
   THE ADDRESS: the shared building's bank of mailboxes (steel, six tenants,
   junk spilling out of the spammers' doors, the spam sticker across it) and
   your own mailbox at the curb. Pull your card: it flies from 4B into the
   card slot on your box, and the red flag goes up.
   -------------------------------------------------------------------------- */
.em-addr__head { max-width: 840px; }
.em-td { position: relative; margin-top: clamp(26px, 4vw, 46px); }
.em-td__wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: 60px; align-items: center; }
@media (min-width: 900px) { .em-td__wall { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(30px, 5vw, 76px); } }
.em-td__panelwrap { position: relative; display: flex; justify-content: center; }
.em-td__panel {
  position: relative; width: min(100%, 470px); padding: 28px clamp(16px, 3.4vw, 28px) 30px;
  border: 2px solid var(--ah-950); border-radius: 12px; color: var(--ah-ink);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 4px), linear-gradient(180deg, #d9e0e8, #a9b4c2 55%, #8f9bad);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 6px rgba(255, 255, 255, 0.12);
  rotate: -0.6deg;
}
.em-td__screw { position: absolute; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ah-950); background: linear-gradient(35deg, transparent 43%, var(--ah-950) 43% 57%, transparent 57%), radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); }
.em-td__screw--tl { left: 10px; top: 10px; } .em-td__screw--tr { right: 10px; top: 10px; } .em-td__screw--bl { left: 10px; bottom: 10px; } .em-td__screw--br { right: 10px; bottom: 10px; }
.em-td__head { display: grid; justify-items: center; gap: 4px; margin: 0 0 16px; padding: 10px 12px 9px; border: 2px solid var(--ah-950); border-radius: 6px; background: #11151d; color: #e8edf3; text-align: center; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 rgba(3, 6, 13, 0.45); }
.em-td__headline { font: 900 clamp(1.1rem, 1rem + 0.5vw, 1.3rem)/1 var(--ah-display); letter-spacing: 0.14em; text-transform: uppercase; }
.em-td__ip { color: var(--ah-sky); font: 700 0.78rem/1.2 var(--ah-mono); letter-spacing: 0.14em; }
.em-td__units { display: grid; gap: 8px; }
/* each unit is a little mailbox door: number, name card window, keyhole, and junk where the spammers live */
.em-td__unit { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px; gap: 10px; align-items: center; padding: 5px 8px 5px 6px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #c9d2dd, #9aa7b8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 2px 2px 0 rgba(3, 6, 13, 0.35); }
.em-td__no { color: var(--ah-ink); font: 900 1.05rem/1 var(--ah-display); letter-spacing: 0.06em; }
.em-td__window { position: relative; display: grid; min-height: 42px; padding: 4px; border: 2px solid var(--ah-950); border-radius: 3px; background: #2a3142; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.6); }
.em-td__card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; min-height: 30px; margin: 0; padding: 5px 10px 4px;
  border: 1.5px solid var(--ah-950); border-radius: 2px; background: #efe6cf; color: var(--ah-ink);
  font: 800 0.8rem/1.15 var(--ah-mono); letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
}
.em-td__card--vacant { flex-direction: column; background: #d8cfb5; color: #3f4a60; }
.em-td__card--vacant em { font-style: normal; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: none; }
.em-td__card--you { background-color: var(--ah-blue); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 55%); color: var(--ah-ink); }
.em-td__lock { width: 20px; height: 20px; border: 2px solid var(--ah-950); border-radius: 50%; background: linear-gradient(var(--ah-950), var(--ah-950)) 50% 58% / 3px 7px no-repeat, radial-gradient(circle at 50% 38%, var(--ah-950) 0 2.4px, transparent 2.8px), radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 55%, #5d6a7d); box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.45); }
/* junk mail spilling out of the spammers' doors (grey and pink envelopes) */
.em-td__spill { position: absolute; right: -14px; top: -8px; width: 38px; height: 30px; pointer-events: none; }
.em-td__spill i { position: absolute; width: 26px; height: 17px; border: 1.5px solid var(--ah-950); border-radius: 2px; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(11, 20, 36, 0.55) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left top / 50.5% 60% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), rgba(11, 20, 36, 0.55) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right top / 50.5% 60% no-repeat, #d3d8df; }
.em-td__spill i:nth-child(1) { right: 6px; top: 4px; rotate: 18deg; }
.em-td__spill i:nth-child(2) { right: 0; top: 13px; rotate: -12deg; background-color: #ffb3cf; }
.em-td__unit:nth-child(2) .em-td__spill { right: -10px; top: 2px; } .em-td__unit:nth-child(6) .em-td__spill { right: -16px; top: 0; }
.em-td__dust { position: absolute; inset: 4px; display: none; place-items: center; border: 1.5px dashed rgba(238, 244, 251, 0.45); border-radius: 2px; color: #aebed3; font: 700 0.72rem/1 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.em-td.is-moved #tdHomeCard { visibility: hidden; }
.em-td.is-moved .em-td__dust { display: grid; }
.em-td__sticker {
  position: absolute; z-index: 3; right: 22px; bottom: -30px; display: grid; gap: 3px; margin: 0; padding: 10px 16px 9px;
  border: 2px solid var(--ah-950); border-radius: 6px; background: var(--ah-neon-pink); color: var(--ah-ink); text-align: center;
  box-shadow: 4px 4px 0 var(--ah-950); rotate: -4deg; white-space: nowrap;
}
.em-td__sticker-big { font: 900 clamp(1.15rem, 1rem + 0.6vw, 1.4rem)/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; }
.em-td__sticker-small { font: 800 0.68rem/1.2 var(--ah-body); letter-spacing: 0.12em; text-transform: uppercase; }

/* your own mailbox at the curb: navy steel box, an arched door, a red flag, the card slot on its side,
   a wood post with a brass number plate (the IP) */
.em-td__side { display: grid; justify-items: center; gap: 26px; }
.em-mbx { position: relative; display: grid; justify-items: center; width: min(100%, 420px); padding-left: 22px; }
.em-mbx__box {
  position: relative; z-index: 1; width: 100%; padding: 34px 112px 30px 50px;
  border: 2px solid var(--ah-950); border-radius: 26px 26px 8px 8px;
  background: linear-gradient(180deg, rgba(173, 229, 255, 0.28), rgba(173, 229, 255, 0) 14px), linear-gradient(180deg, #2c4775, #1b2f55 48%, #13223f);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 -6px 0 rgba(3, 6, 13, 0.3);
}
.em-mbx__door { position: absolute; left: -24px; top: -6px; bottom: -6px; width: 52px; border: 2px solid var(--ah-950); border-radius: 26px 26px 8px 8px; background: linear-gradient(90deg, #13223f, #2c4775 55%, #1b2f55); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); }
.em-mbx__door::after { content: ""; position: absolute; left: 50%; top: 18px; width: 18px; height: 10px; margin-left: -9px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, #f2f5f9, #9aa7b8); }
/* the flag: down along the side until your card is in the slot, then up */
.em-mbx__flag { position: absolute; z-index: 2; right: 18px; bottom: 30%; width: 7px; height: 74px; border: 2px solid var(--ah-950); border-radius: 3px; background: #c62d22; transform-origin: 50% 100%; rotate: -90deg; transition: rotate 0.55s var(--ease-back); }
.em-mbx__flag::before { content: ""; position: absolute; left: -2px; top: -2px; width: 30px; height: 22px; border: 2px solid var(--ah-950); border-radius: 2px 4px 4px 2px; background: #e0392c; }
.em-mbx__flag::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); }
.em-td.is-seated .em-mbx__flag { rotate: 0deg; }
.em-mbx__plaque { display: grid; justify-items: center; gap: 4px; max-width: 250px; padding: 12px 12px 10px; border: 2px solid var(--ah-950); border-radius: 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); text-align: center; box-shadow: 3px 3px 0 rgba(3, 6, 13, 0.5); }
.em-td__phead { font: 900 clamp(1rem, 0.9rem + 0.5vw, 1.2rem)/1 var(--ah-display); letter-spacing: 0.16em; text-transform: uppercase; }
.em-td__slot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 12px; gap: 8px; align-items: center; width: 100%; min-height: 56px; margin-top: 4px; padding: 5px 8px; border: 2px solid var(--ah-950); border-radius: 4px; background: #1b2232; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.6); }
.em-td__slot-empty { grid-column: 1; grid-row: 1; justify-self: center; color: #aebed3; font: 700 0.7rem/1 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.em-td__seated { grid-column: 1; grid-row: 1; width: 100%; min-height: 44px; font-size: clamp(0.66rem, 0.6rem + 0.3vw, 0.8rem); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.em-td__seated:hover { background-color: var(--ah-blue-hi); }
.em-td__seated:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 3px; }
.em-td__seated[hidden], .em-td__traveler[hidden] { display: none; }
.em-td.is-seated .em-td__slot-empty { visibility: hidden; }
.em-td__led { flex: none; width: 12px; height: 12px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: #3a4150; transition: background-color 0.3s, box-shadow 0.3s; }
.em-td.is-seated #tdPlaqueLed { background: #2ecc71; box-shadow: 0 0 9px #2ecc71; }
.em-mbx__post { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 46px; min-height: 130px; margin-top: -4px; padding-top: 22px; border: 2px solid var(--ah-950); border-top: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 9px), linear-gradient(90deg, #4a2e1a, #7a5032 45%, #5a3b22); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
.em-mbx__num { position: relative; z-index: 1; padding: 6px 10px 5px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); color: #2b1f05; font: 800 0.84rem/1 var(--ah-mono); letter-spacing: 0.06em; white-space: nowrap; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 245, 210, 0.8); }
.em-mbx__post .em-td__psub { position: relative; z-index: 1; width: max-content; max-width: 220px; padding: 6px 10px 5px; border: 2px solid var(--ah-950); border-radius: 3px; background: var(--ah-cream); color: var(--ah-ink); font: 800 0.64rem/1.3 var(--ah-body); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; text-wrap: balance; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); rotate: 1.5deg; }
/* the pull tab (steel, with a brass grip stud) */
.em-td__pull {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 24px 0 12px;
  border: 2px solid var(--ah-950); border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 4px), linear-gradient(180deg, #f2f5f9, #c9d2dd 55%, #a9b4c2);
  color: var(--ah-ink); font: 900 1.15rem/1 var(--ah-display); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ah-blue); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: translate 0.22s var(--ease-back), box-shadow 0.22s var(--ease-back), opacity 0.3s;
}
.em-td__pull:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ah-blue); }
.em-td__pull:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ah-blue); }
.em-td__grip { flex: none; width: 28px; height: 28px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 36% 34%, var(--ah-brass-hi) 0 18%, var(--ah-brass) 52%, var(--ah-brass-lo) 100%); box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.45); }
.em-td.is-moved .em-td__pull { opacity: 0.55; cursor: default; translate: 0 0; box-shadow: 2px 2px 0 var(--ah-blue); }
.em-td__traveler { position: absolute; z-index: 20; margin: 0; pointer-events: none; box-shadow: 4px 4px 0 var(--ah-950); transition: transform 0.75s var(--ease-out); }
.em-td__caption { display: grid; justify-items: center; max-width: 34em; margin: 40px auto 0; text-align: center; }
.em-td__cap { grid-area: 1 / 1; color: var(--ah-paper); font: 900 clamp(1.4rem, 1rem + 1.3vw, 2rem)/1.08 var(--ah-display); letter-spacing: 0.01em; text-wrap: balance; text-shadow: 0.05em 0.05em 0 var(--ah-950); transition: opacity 0.35s; }
.em-td__cap--b { visibility: hidden; opacity: 0; color: var(--ah-sky); }
.em-td.is-seated .em-td__cap--a { visibility: hidden; opacity: 0; }
.em-td.is-seated .em-td__cap--b { visibility: visible; opacity: 1; }
.em-addr__after { display: grid; gap: 26px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .em-addr__after { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); } }
.em-addr__lead { color: var(--ah-sky); font-weight: 800; }
@media (max-width: 520px) { .em-addr__fix p { font-size: 1.02rem; } }
@media (prefers-reduced-motion: no-preference) {
  html.motion .em-td:not(.is-play) .em-td__sticker { opacity: 0; transform: scale(1.7) rotate(-10deg); }
  .em-td__sticker { transition: opacity 0.2s 0.5s, transform 0.45s var(--ease-back) 0.5s; }
  html.motion .em-td:not(.is-play) .em-td__spill i { opacity: 0; translate: -10px 0; }
  .em-td__spill i { transition: opacity 0.3s 0.2s, translate 0.45s var(--ease-back) 0.2s; }
}
@media (max-width: 520px) {
  .em-td__unit { grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 8px; }
  .em-td__lock { width: 18px; height: 18px; }
  .em-td__card { font-size: 0.72rem; letter-spacing: 0.06em; padding-inline: 6px; }
  .em-td__sticker { right: 12px; bottom: -28px; padding: 8px 12px 7px; }
  .em-td__spill { right: -8px; }
  .em-mbx__box { padding: 26px 86px 22px 40px; }
  .em-mbx__flag { right: 12px; height: 64px; }
}

/* --------------------------------------------------------------------------
   THE BUCKET: the post office sorting case on the back counter. The whole list
   comes in on the tray, envelopes drop into the HOT and WARM pigeonholes, and
   the quiet ones go in the galvanized bucket on the floor.
   -------------------------------------------------------------------------- */
.em-bucket__grid { align-items: center; }
.em-case { position: relative; width: min(100%, 520px); margin: 0 auto; }
.em-case__top { position: relative; display: grid; justify-items: center; gap: 10px; padding-bottom: 6px; }
.em-case__intake { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0; padding: 6px 12px 5px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3; font: 700 0.8rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ah-blue); rotate: -1deg; }
.em-case__intake svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ah-sky); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* the wire tray of mixed mail on top of the case */
.em-case__tray { position: relative; display: block; width: 62%; height: 46px; border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 8px 8px; background: repeating-linear-gradient(90deg, rgba(3, 6, 13, 0.55) 0 2px, transparent 2px 14px), linear-gradient(180deg, #c9d2dd, #8b98aa); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.em-case__tray i { position: absolute; bottom: 12px; width: 34px; height: 22px; border: 1.5px solid var(--ah-950); border-radius: 2px; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(11, 20, 36, 0.5) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left top / 50.5% 58% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), rgba(11, 20, 36, 0.5) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right top / 50.5% 58% no-repeat, #fbf7ec; }
.em-case__tray i:nth-child(1) { left: 4%; rotate: -14deg; } .em-case__tray i:nth-child(2) { left: 16%; bottom: 18px; rotate: 9deg; background-color: #ffd0e0; }
.em-case__tray i:nth-child(3) { left: 30%; rotate: -4deg; background-color: #d6ecff; } .em-case__tray i:nth-child(4) { left: 44%; bottom: 20px; rotate: 12deg; }
.em-case__tray i:nth-child(5) { left: 57%; rotate: -10deg; background-color: #e3e7ee; } .em-case__tray i:nth-child(6) { left: 70%; bottom: 17px; rotate: 6deg; background-color: #ffd0e0; }
.em-case__tray i:nth-child(7) { left: 82%; rotate: -6deg; background-color: #d6ecff; }
.em-case__drops { position: absolute; left: 0; right: 0; bottom: -40px; height: 60px; pointer-events: none; }
.em-case__drops i { position: absolute; top: 0; width: 26px; height: 17px; border: 1.5px solid var(--ah-950); border-radius: 2px; background: #fbf7ec; opacity: 0; }
.em-case__drops i:nth-child(1) { left: 26%; } .em-case__drops i:nth-child(2) { left: 64%; background: #d6ecff; } .em-case__drops i:nth-child(3) { left: 30%; background: #ffd0e0; } .em-case__drops i:nth-child(4) { left: 68%; }
/* the wood case */
.em-case__cab { position: relative; padding: 14px 16px 18px; border: 2px solid var(--ah-950); border-radius: 8px; background: linear-gradient(180deg, rgba(255, 220, 170, 0.22), transparent 4px), repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 13px), linear-gradient(180deg, #7a5032, #5a3b22 60%, #4a2e1a); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55); }
.em-case__neck { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto 14px; padding: 7px 14px 6px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3; font: 700 0.78rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ah-blue); }
.em-case__neck svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--ah-neon-pink); stroke-width: 2.2; stroke-linejoin: round; }
.em-case__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.em-case__col { display: grid; align-content: start; gap: 12px; }
.em-case__holes { display: grid; gap: 6px; padding: 6px; border: 2px solid var(--ah-950); border-radius: 4px; background: #2a1a0e; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5); }
.em-case__holes i { position: relative; display: block; height: 34px; border: 2px solid var(--ah-950); border-radius: 2px; background: linear-gradient(180deg, #120b05, #24160b); overflow: hidden; }
/* the envelope edges standing in each pigeonhole */
.em-case__holes i::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 70%; border: 1.5px solid var(--ah-950); border-bottom: 0; border-radius: 2px 2px 0 0; background: repeating-linear-gradient(90deg, #fbf7ec 0 6px, #e2d7bd 6px 7px, var(--ah-950) 7px 8px); transform-origin: 50% 100%; }
.em-case__col--hot .em-case__holes i::before { background: repeating-linear-gradient(90deg, #fbf7ec 0 6px, #ffb3cf 6px 7px, var(--ah-950) 7px 8px); }
.em-case__col--warm .em-case__holes i::before { background: repeating-linear-gradient(90deg, #fbf7ec 0 6px, #9fd2ff 6px 7px, var(--ah-950) 7px 8px); }
.em-case__holes i.is-half::before { height: 38%; right: 46%; }
.em-case__tag { position: relative; padding: 22px 10px 12px; text-align: center; border: 2px solid var(--ah-950); border-radius: 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-blue); }
.em-case__col--hot .em-case__tag { box-shadow: 3px 3px 0 var(--ah-neon-pink); rotate: -0.8deg; }
.em-case__col--warm .em-case__tag { rotate: 0.7deg; }
.em-case__tag::before { content: ""; position: absolute; left: 50%; top: 7px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); box-shadow: 0 0 0 1.5px var(--ah-950); }
.em-case__name { color: var(--ah-ink); font: 900 1.4rem/1 var(--ah-display); letter-spacing: 0.08em; text-shadow: 0.06em 0.06em 0 var(--ah-blue); }
.em-case__col--hot .em-case__name { text-shadow: 0.06em 0.06em 0 var(--ah-neon-pink); }
.em-case__desc { margin-top: 6px; color: var(--ah-ink-2); font-size: 0.88rem; font-weight: 600; line-height: 1.36; }
.em-case__cad { display: inline-block; margin-top: 9px; padding: 4px 8px 3px; border: 2.5px solid var(--ah-blue-ink); border-radius: 6px; color: var(--ah-blue-ink); font: 900 0.86rem/1.1 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase; rotate: -3deg; }
.em-case__note { margin: 26px 4px 0; max-width: none; --tilt: 0.8deg; }
.em-case__note p { font-size: 1rem; }
/* the floor: a galvanized bucket and its tag */
.em-case__floor { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: end; margin-top: 26px; padding: 0 6px; }
.em-pail { position: relative; display: block; width: 150px; height: 142px; }
.em-pail__handle { position: absolute; left: 10px; right: 10px; top: 0; height: 70px; border: 4px solid var(--ah-950); border-bottom: 0; border-radius: 70px 70px 0 0; }
.em-pail__handle::after { content: ""; position: absolute; inset: 0; border: 2px solid #c9d2dd; border-bottom: 0; border-radius: inherit; }
.em-pail__body { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; filter: var(--ah-outline) drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.5)); }
.em-pail__body::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: repeating-linear-gradient(180deg, transparent 0 18px, rgba(3, 6, 13, 0.45) 18px 20px, rgba(255, 255, 255, 0.45) 20px 22px), linear-gradient(90deg, #6f7c90, #e3e9f0 30%, #b5c0cd 55%, #7f8b9d 80%, #9aa7b8); }
.em-pail__body::after { content: ""; position: absolute; left: -3px; right: -3px; top: -6px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #e3e9f0, #6f7c90); }
.em-pail__mail { position: absolute; z-index: 1; left: 22px; right: 22px; top: 24px; height: 34px; }
.em-pail__mail i { position: absolute; bottom: 0; width: 40px; height: 26px; border: 1.5px solid var(--ah-950); border-radius: 2px; background: #e3e7ee; }
.em-pail__mail i:nth-child(1) { left: 0; rotate: -18deg; } .em-pail__mail i:nth-child(2) { left: 30px; bottom: 6px; rotate: 6deg; background: #fbf7ec; } .em-pail__mail i:nth-child(3) { right: 0; rotate: 20deg; }
.em-case__tag--pail { text-align: left; padding: 14px 14px 12px; box-shadow: 3px 3px 0 var(--ah-steel-c); rotate: -0.5deg; }
.em-case__tag--pail::before { left: auto; right: 12px; margin: 0; }
.em-case__tag--pail .em-case__name { text-shadow: 0.06em 0.06em 0 var(--ah-steel-b); }
.em-case__foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; color: var(--ah-fog); font-size: 0.95rem; font-weight: 700; text-align: center; text-wrap: balance; }
.em-case__foot svg { flex: none; width: 18px; height: 18px; fill: var(--ah-gold); stroke: var(--ah-950); stroke-width: 1.4; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .em-case:not(.is-play) .em-case__holes i::before { transform: scaleY(0); }
  html.motion .em-case:not(.is-play) .em-pail__mail i { opacity: 0; translate: 0 -30px; }
  .em-case__holes i::before { transition: transform 0.7s var(--ease-back) 0.9s; }
  .em-case__holes i:nth-child(2)::before { transition-delay: 1.1s; } .em-case__holes i:nth-child(3)::before { transition-delay: 1.3s; }
  .em-pail__mail i { transition: opacity 0.3s 1.6s, translate 0.6s var(--ease-back) 1.6s; }
  .em-pail__mail i:nth-child(2) { transition-delay: 1.75s; } .em-pail__mail i:nth-child(3) { transition-delay: 1.9s; }
  .em-case.is-play .em-case__drops i { animation: em-drop 1s ease-in 2; animation-delay: calc(var(--d, 0) * 220ms); }
  .em-case__drops i:nth-child(2) { --d: 1; } .em-case__drops i:nth-child(3) { --d: 2; } .em-case__drops i:nth-child(4) { --d: 3; }
}
@keyframes em-drop { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(70px) rotate(90deg); } }
@media (max-width: 460px) {
  .em-case__cols { gap: 10px; }
  .em-case__cab { padding: 12px 10px 16px; }
  .em-case__tag { padding: 20px 6px 10px; }
  .em-case__desc { font-size: 0.82rem; }
  .em-case__floor { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 0; }
  .em-pail { width: 112px; height: 116px; }
  .em-pail__body { height: 80px; }
  .em-pail__handle { height: 56px; }
  .em-pail__mail { left: 14px; right: 14px; top: 26px; }
  .em-pail__mail i { width: 32px; height: 21px; }
  .em-pail__mail i:nth-child(2) { left: 22px; }
}
/* --------------------------------------------------------------------------
   THE CLAW: the claw machine in the corner of the shop. The scene
   plays once when seen: the claw drops, grabs the flagged envelope, lifts it,
   and the score climbs. At rest it is finished: envelope rescued, score up.
   -------------------------------------------------------------------------- */
.em-claw { --cl-y: 0.12; position: relative; margin-top: clamp(16px, 3vw, 36px); }
.em-claw__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
@media (min-width: 980px) { .em-claw__stage { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(40px, 6vw, 84px); max-width: 1060px; margin: 0 auto; } }
.em-cab { position: relative; width: min(100%, 380px); margin: 0 auto; container-type: inline-size; }
.em-cab__marquee { position: relative; z-index: 2; margin: 0 5cqi; padding: 4.4cqi 4cqi 3.8cqi; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 7cqi 7cqi 0 0; background-color: #070b15; background-image: linear-gradient(rgba(30, 40, 60, 0.9) 2px, transparent 2px), linear-gradient(90deg, rgba(30, 40, 60, 0.9) 2px, transparent 2px); background-size: 100% 50%, 14% 100%; background-position: 0 10px, 10px 0; text-align: center; }
.em-cab__neon { display: inline-block; color: #ffe4ee; font: 900 13cqi/0.95 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 6px rgba(255, 63, 134, 0.95), 0 0 16px rgba(255, 63, 134, 0.55), 0 0 2px #fff; }
.em-cab__window {
  position: relative; height: 96cqi; padding: 3cqi;
  border: 2px solid var(--ah-950); border-radius: 3cqi;
  background: linear-gradient(135deg, #e7edf4 0%, #a7b3c3 22%, #dfe6ee 44%, #8996a8 70%, #cfd7e1 100%);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.em-cab__window::before {
  content: ""; position: absolute; inset: 3cqi; border: 2px solid var(--ah-950); border-radius: 2px;
  background:
    linear-gradient(118deg, transparent 0 16%, rgba(200, 230, 255, 0.08) 16% 24%, transparent 24% 100%),
    radial-gradient(circle, rgba(255, 63, 134, 0.22) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    radial-gradient(90% 60% at 50% 100%, rgba(255, 63, 134, 0.2), transparent 70%),
    radial-gradient(90% 70% at 50% 0, rgba(47, 155, 255, 0.2), transparent 70%),
    #0b1528;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.1);
}
.em-cab__window::after { content: ""; position: absolute; z-index: 6; inset: 3cqi; pointer-events: none; background: linear-gradient(118deg, transparent 0 62%, rgba(220, 240, 255, 0.07) 62% 70%, transparent 70%); }
.em-cab__rail { position: absolute; z-index: 3; left: 8cqi; right: 8cqi; top: 7cqi; height: 3.6cqi; border: 2px solid var(--ah-950); border-radius: 2cqi; background: linear-gradient(180deg, #e3e9f0, #6f7c90); }
.em-cab__cord { position: absolute; z-index: 3; left: 50%; top: 9.6cqi; width: 1.6cqi; height: 46cqi; margin-left: -0.8cqi; border-inline: 1px solid var(--ah-950); background: repeating-linear-gradient(180deg, #c9d1dc 0 3px, #5d6a7d 3px 5px); transform-origin: 50% 0; transform: scaleY(calc((4 + var(--cl-y) * 42) / 46)); }
.em-cab__claw { position: absolute; z-index: 4; left: 50%; top: 13.6cqi; width: 34cqi; height: 28cqi; margin-left: -17cqi; transform: translateY(calc(var(--cl-y) * 42cqi)); }
.em-cab__hub { position: absolute; z-index: 3; left: 50%; top: 0; width: 15cqi; height: 7.4cqi; margin-left: -7.5cqi; border: 2px solid var(--ah-950); border-radius: 7cqi 7cqi 2cqi 2cqi; background: radial-gradient(circle at 35% 30%, #f2f5f9, #9aa7b8 55%, #5d6a7d); }
/* the arm bar the outer prongs hang from */
.em-cab__hub::after { content: ""; position: absolute; left: 50%; top: 4.6cqi; width: 27cqi; height: 3cqi; margin-left: -13.5cqi; border: 2px solid var(--ah-950); border-radius: 2cqi; background: linear-gradient(180deg, #e3e9f0, #6f7c90); z-index: -1; }
.em-cab__prong { position: absolute; z-index: 2; top: 6cqi; left: 50%; width: 2.8cqi; height: 19cqi; margin-left: -1.4cqi; border: 2px solid var(--ah-950); border-radius: 2cqi; background: linear-gradient(90deg, #6f7c90, #e3e9f0 45%, #9aa7b8); transform-origin: 50% 0; transition: rotate 0.3s var(--ease-back); }
.em-cab__prong::after { content: ""; position: absolute; bottom: -1.4cqi; width: 4.6cqi; height: 2.6cqi; border: 2px solid var(--ah-950); border-radius: 2cqi; background: #9aa7b8; }
.em-cab__prong--l { left: calc(50% - 12cqi); rotate: 28deg; } .em-cab__prong--l::after { left: 0.4cqi; }
.em-cab__prong--r { left: calc(50% + 12cqi); rotate: -28deg; } .em-cab__prong--r::after { right: 0.4cqi; }
.em-cab__prong--m { z-index: 0; height: 13cqi; } .em-cab__prong--m::after { left: -1.3cqi; }
/* an envelope in the machine, with its provider on it */
.em-pmail {
  position: absolute; display: grid; place-items: end center; width: 23cqi; aspect-ratio: 3 / 2; padding-bottom: 1cqi;
  border: 2px solid var(--ah-950); border-radius: 3px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1.2px), var(--ah-ink-2) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)) left top / 50.5% 56% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1.2px), var(--ah-ink-2) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)) right top / 50.5% 56% no-repeat,
    #fbf7ec;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.5);
}
.em-pmail b { color: var(--ah-ink); font: 800 max(0.56rem, 3.1cqi)/1 var(--ah-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.em-pmail em { position: absolute; top: -2.4cqi; right: -3.4cqi; padding: 0.8cqi 1.6cqi 0.6cqi; border: 2px solid var(--ah-950); border-radius: 3px; font: 900 max(0.55rem, 2.8cqi)/1 var(--ah-display); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; rotate: 8deg; }
.em-pmail--bad em { background: var(--ah-red-ink); color: #fff; }
.em-pmail--held { left: 50%; top: 9.4cqi; z-index: 1; margin-left: -11.5cqi; padding-bottom: 3.4cqi; rotate: -3deg; }
.em-pmail--held em { top: auto; right: auto; bottom: -3.4cqi; left: 50%; translate: -50% 0; background: var(--ah-blue); color: var(--ah-ink); rotate: -4deg; }
.em-cab__pile { position: absolute; z-index: 2; left: 6cqi; right: 6cqi; bottom: 6cqi; height: 30cqi; }
.em-pmail--1 { left: 0; bottom: 1cqi; rotate: -12deg; }
.em-pmail--2 { left: 8cqi; bottom: 12cqi; rotate: 9deg; }
.em-pmail--4 { right: 0; bottom: 2cqi; rotate: 13deg; }
.em-cab__bin { position: absolute; left: 50%; bottom: 0; width: 32cqi; height: 14cqi; margin-left: -16cqi; border: 2px solid var(--ah-950); border-radius: 2px 2px 3cqi 3cqi; background: linear-gradient(180deg, #4a1a24, #2a0f16); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 63, 134, 0.35); }
.em-cab__bin .em-pmail--bad { left: 50%; bottom: 7cqi; margin-left: -11.5cqi; rotate: 4deg; }
.em-cab__binlabel { position: absolute; z-index: 2; left: 50%; bottom: 2.2cqi; translate: -50% 0; padding: 0.6cqi 1.8cqi 0.4cqi; border-radius: 2px; background: #11151d; color: #ffd6e5; font: 900 max(0.56rem, 3cqi)/1 var(--ah-display); letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 0 5px rgba(255, 63, 134, 0.9); }
.em-cab__score { position: relative; display: flex; align-items: center; gap: 3cqi; margin: 0 2.4cqi; padding: 3.4cqi 4cqi; border: 2px solid var(--ah-950); border-top: 0; background: linear-gradient(180deg, #1a2d52, #0e1a31); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5); }
.em-cab__meter { flex: 1 1 auto; height: 5cqi; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 3px; background: #04060b; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8); }
.em-cab__fill { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, var(--ah-neon-blue) 0 5px, transparent 5px 7px); }
.em-cab__num { padding: 1.4cqi 2.2cqi 1cqi; font-size: max(0.82rem, 4.4cqi); letter-spacing: 0.08em; }
.em-cab__base { position: relative; display: grid; place-items: center; height: 13cqi; margin: 0 2.4cqi; border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 3cqi 3cqi; background: linear-gradient(180deg, #13213d, #0b1424); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5); }
.em-cab__coin { width: 11cqi; height: 6.4cqi; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(var(--ah-950), var(--ah-950)) 50% 50% / 14% 62% no-repeat, linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); }
/* the beats: a ledger, every entry lit at rest */
.em-beats { max-width: 560px; width: 100%; margin: 0 auto; padding-top: 10px; }
.em-beat { transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.em-beat .ah-entry__name { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); }
.em-beat__stamp { grid-area: auto; justify-self: auto; display: inline-block; margin: 6px 0 0 4px; vertical-align: middle; }
/* live: the scene steps through its beats (theme-free state classes set by the page script) */
.em-claw.is-live .em-beat { opacity: 0.38; transform: translateY(6px); }
.em-claw.is-live .em-beat.on { opacity: 1; transform: none; }
.em-claw.is-live .em-beat__stamp { opacity: 0; transform: scale(1.6); transition: opacity 0.2s, transform 0.35s var(--ease-back); }
.em-claw.is-live .em-beat.on .em-beat__stamp { opacity: 1; transform: none; }
.em-claw.is-live:not(.is-held) .em-pmail--held { visibility: hidden; }
.em-claw:not(.is-live) .em-cab__bin .em-pmail--bad, .em-claw.is-held .em-cab__bin .em-pmail--bad { visibility: hidden; }
.em-claw:not(.is-live) .em-cab__prong--l, .em-claw.is-grab .em-cab__prong--l { rotate: -3deg; }
.em-claw:not(.is-live) .em-cab__prong--r, .em-claw.is-grab .em-cab__prong--r { rotate: 3deg; }
@media (max-width: 979px) { .em-beats { max-width: 520px; } }

/* --------------------------------------------------------------------------
   BURIED ALIVE: the envelope that was dug out, its three causes cancelled like
   old stamps in red, and the customer's phone with the same email opened,
   first in the inbox
   -------------------------------------------------------------------------- */
.em-buried__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
@media (min-width: 980px) { .em-buried__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); } }
.em-buried__h { margin-bottom: 26px; }
.em-buried__cap { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 0 0 16px; padding: 8px 14px 7px; border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3; font: 700 0.8rem/1.35 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ah-blue); rotate: -1deg; }
.em-buried__cap::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ah-neon-pink); box-shadow: 0 0 0 2px #11151d, 0 0 8px var(--ah-neon-pink); }
/* the mailing schedule: one slim printed strip */
.em-sched { display: grid; width: min(100%, 460px); margin: 0 0 28px; border: 2px solid var(--ah-950); border-radius: 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 4px 4px 0 var(--ah-blue); }
.em-sched__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 10px 16px; }
.em-sched__row + .em-sched__row { border-top: 2px dashed rgba(11, 20, 36, 0.22); }
.em-sched__row b { font: 900 1.25rem/1 var(--ah-display); letter-spacing: 0.1em; text-transform: uppercase; }
.em-sched__row span { color: var(--ah-ink-2); font: 700 0.95rem/1.3 var(--ah-mono); letter-spacing: 0.02em; }
.em-sched__row--hot b { color: #b3124f; } .em-sched__row--warm b { color: var(--ah-blue-ink); } .em-sched__row--cold b { color: #4b5873; }
.em-buried__body p { max-width: 30em; }

.em-dug { position: relative; width: min(100%, 560px); margin: 0 auto; padding: 0 0 30px; container-type: inline-size; }
.em-dug > .ah-sample { bottom: 14px; right: 6px; }
@container (max-width: 430px) {
  .em-cancel__ring { width: 19cqi; font-size: max(0.62rem, 2.85cqi); border-width: 2.5px; }
  .em-cancel__bars { width: 14cqi; height: 7.5cqi; }
  .em-cancel--2 { right: 26cqi; top: 22cqi; }
  .em-cancel--3 { right: 4cqi; top: 38cqi; }
}
.em-dug__env {
  position: relative; display: block; width: 92cqi; margin-left: auto; aspect-ratio: 3 / 2.05;
  border: 2px solid var(--ah-950); border-radius: 5px;
  background-color: #fbf7ec; background-image: var(--ah-fiber);
  box-shadow: 8px 8px 0 var(--ah-blue); rotate: -2.5deg;
}
.em-dug__flap { position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1.4px), rgba(52, 66, 91, 0.45) calc(50% - 1.4px) calc(50% + 1.4px), transparent calc(50% + 1.4px)) left top / 50.5% 44% no-repeat, linear-gradient(to top left, transparent calc(50% - 1.4px), rgba(52, 66, 91, 0.45) calc(50% - 1.4px) calc(50% + 1.4px), transparent calc(50% + 1.4px)) right top / 50.5% 44% no-repeat; }
.em-dug__stampsq { position: absolute; right: 5cqi; top: 4.5cqi; width: 13cqi; height: 16cqi; border: 2px solid var(--ah-950); background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.4) 0 22%, transparent 23%), var(--ah-blue); box-shadow: 0 0 0 3px #fbf7ec, 0 0 0 4.5px rgba(11, 20, 36, 0.35); }
.em-dug__from { position: absolute; left: 37cqi; top: 4.5cqi; display: grid; gap: 1cqi; max-width: 30cqi; }
.em-dug__from b { color: var(--ah-ink); font: 800 max(0.62rem, 2.4cqi)/1.15 var(--ah-body); }
.em-dug__from i { display: block; width: 70%; height: 1.4cqi; border-radius: 2px; background: rgba(11, 20, 36, 0.2); }
.em-dug__to { position: absolute; right: 30cqi; bottom: 7cqi; display: grid; gap: 1.8cqi; width: 30cqi; }
.em-dug__to i { display: block; height: 1.6cqi; border-radius: 2px; background: rgba(11, 20, 36, 0.22); }
.em-dug__to i:nth-child(2) { width: 84%; } .em-dug__to i:nth-child(3) { width: 58%; }
/* the cancellation marks: a ring with the cause in it and the wavy killer bars */
.em-cancel { position: absolute; display: flex; align-items: center; color: var(--ah-red-ink); -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px; }
.em-cancel__ring { display: grid; place-items: center; width: max(76px, 17cqi); aspect-ratio: 1; padding: 0.5em; border: 3px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 3px #fbf7ec, inset 0 0 0 4.5px currentColor; font: 900 max(0.78rem, 2.5cqi)/0.98 var(--ah-display); letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
.em-cancel__bars { width: max(64px, 15cqi); height: max(34px, 8cqi); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M0 6c7-5 13 5 20 0s13 5 20 0 13 5 20 0 13 5 20 0M0 16c7-5 13 5 20 0s13 5 20 0 13 5 20 0 13 5 20 0M0 26c7-5 13 5 20 0s13 5 20 0 13 5 20 0 13 5 20 0M0 36c7-5 13 5 20 0s13 5 20 0 13 5 20 0 13 5 20 0' fill='none' stroke='%23b42318' stroke-width='3'/%3E%3C/svg%3E") 0 50% / 100% 100% no-repeat; }
.em-cancel--1 { right: 13cqi; top: 2cqi; flex-direction: row-reverse; rotate: -8deg; }
.em-cancel--2 { right: 22cqi; top: 22cqi; rotate: 6deg; }
.em-cancel--3 { right: 2cqi; top: 39cqi; flex-direction: row-reverse; rotate: -4deg; }
/* the phone in front: the opened email */
.em-dug__phone { position: absolute; z-index: 2; left: 0; bottom: 0; width: 40cqi; height: 74cqi; font-size: max(7.4px, 2.3cqi); rotate: 3deg; }
.em-phone__screen--open { padding-top: 2.4em; }
.em-phone__back { display: flex; align-items: center; justify-content: space-between; margin: 0 0 0.9em; color: var(--ah-blue-deep); font-size: 1.05em; font-weight: 800; }
.em-phone__back b { padding: 0.2em 0.55em 0.15em; border: 1.5px solid var(--ah-950); border-radius: 1em; background: var(--ah-sky); color: var(--ah-ink); font: 900 0.95em/1 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase; }
.em-phone__from { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 0.6em; align-items: center; margin: 0 0 0.9em; }
.em-phone__av { display: grid; place-items: center; width: 2.4em; height: 2.4em; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); color: var(--ah-ink); font: 900 1.2em/1 var(--ah-display); font-style: normal; }
.em-phone__from span { display: grid; min-width: 0; }
.em-phone__from b { overflow: hidden; font-size: 1.05em; font-weight: 900; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.em-phone__from small { color: var(--ah-ink-2); font-size: 0.9em; font-weight: 600; }
.em-phone__subj { margin: 0 0 0.35em; color: var(--ah-ink); font: 900 1.7em/1 var(--ah-display); letter-spacing: 0.01em; }
.em-phone__body { color: var(--ah-ink-2); font-size: 1.02em; font-weight: 600; line-height: 1.35; }
.em-phone__banner { display: grid; place-items: center; gap: 0.1em; margin-top: 0.9em; padding: 0.9em 0.5em; border: 1.5px solid var(--ah-950); border-radius: 0.5em; background: radial-gradient(circle, rgba(242, 182, 50, 0.5) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--ah-ink); color: var(--ah-gold); text-align: center; }
.em-phone__banner b { font: 900 1.9em/0.95 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
.em-phone__banner i { color: var(--ah-cream); font: 800 0.9em/1 var(--ah-body); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; }
.em-phone__opened { position: absolute; right: 0.7em; bottom: 0.8em; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3em 0.6em 0.25em; border: 1.5px solid var(--ah-950); border-radius: 1em; background: #d6f5e0; color: #145c2c; font: 800 0.86em/1 var(--ah-body); letter-spacing: 0.06em; text-transform: uppercase; }
.em-phone__opened::before { content: ""; width: 0.9em; height: 0.9em; background: currentColor; -webkit-mask: var(--ah-check) center / contain no-repeat; mask: var(--ah-check) center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .em-dug:not(.is-play) .em-cancel { opacity: 0; scale: 1.6; }
  html.motion .em-dug:not(.is-play) .em-dug__phone { translate: 0 18px; opacity: 0; }
  .em-cancel { transition: opacity 0.12s, scale 0.32s var(--ease-back); }
  .em-cancel--1 { transition-delay: 0.35s; } .em-cancel--2 { transition-delay: 0.65s; } .em-cancel--3 { transition-delay: 0.95s; }
  .em-dug__phone { transition: translate 0.7s var(--ease-back) 1.35s, opacity 0.4s 1.35s; }
}

/* --------------------------------------------------------------------------
   PRICING: the statement of mailing. Part 1 is the crew (six items, starting
   at $2,000/mo), Part 2 is the postage (about $10 per ~6,000, only when you
   send), with the red meter mark and the Apply button.
   -------------------------------------------------------------------------- */
.em-stmt {
  position: relative; max-width: 1040px; margin-top: 8px; padding: clamp(20px, 3vw, 34px);
  border: 2px solid var(--ah-950); border-radius: 6px; color: var(--ah-ink);
  background-color: var(--ah-cream); background-image: var(--ah-fiber), repeating-linear-gradient(180deg, transparent 0 31px, rgba(21, 101, 192, 0.07) 31px 32px);
  box-shadow: 8px 8px 0 var(--ah-blue); rotate: -0.3deg;
}
.em-stmt :focus-visible { outline-color: var(--ah-ink); }
.em-stmt__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-bottom: 16px; border-bottom: 4px double var(--ah-ink); }
.em-stmt__head img { width: 64px; height: auto; }
.em-stmt__title { color: var(--ah-ink); font: 900 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase; }
.em-stmt__sub { margin-top: 4px; color: var(--ah-ink-2); font: 800 0.78rem/1.3 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.em-stmt__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 20px; }
@media (min-width: 900px) { .em-stmt__body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 48px); } }
.em-stmt__partlabel { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--ah-ink); font: 900 1.25rem/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; }
.em-stmt__partlabel b { padding: 4px 8px 3px; border-radius: 3px; background: var(--ah-ink); color: var(--ah-cream); font-size: 0.82em; letter-spacing: 0.12em; }
.em-stmt__rows { display: grid; }
.em-stmt__row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 0; border-top: 1.5px solid rgba(11, 20, 36, 0.16); }
.em-stmt__row:last-child { border-bottom: 1.5px solid rgba(11, 20, 36, 0.16); }
.em-stmt__box { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border: 2px solid var(--ah-ink); border-radius: 4px; background: #fffdf6; }
.em-stmt__box svg { width: 22px; height: 22px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.em-stmt__txt h3 { color: var(--ah-ink); font-size: clamp(1.04rem, 1rem + 0.3vw, 1.16rem); font-weight: 800; line-height: 1.25; }
.em-stmt__txt p { margin-top: 2px; color: var(--ah-ink-2); font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
.em-stmt__side { display: grid; align-content: start; gap: 20px; }
.em-stmt__price { position: relative; padding: 16px 18px 18px; border: 2px solid var(--ah-ink); border-radius: 6px; background: #fffdf6; }
.em-stmt__field { color: var(--ah-ink-2); font: 800 0.78rem/1 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.em-stmt__num { margin-top: 8px; color: var(--ah-ink); font: 900 clamp(3rem, 2.3rem + 2.2vw, 4.2rem)/0.9 var(--ah-display); letter-spacing: 0.005em; text-shadow: 0.05em 0.05em 0 var(--ah-blue); }
.em-stmt__num small { margin-left: 4px; color: var(--ah-ink-2); font-size: 0.38em; letter-spacing: 0.04em; text-shadow: none; }
.em-stmt .em-stmt__stamp { position: absolute; right: 12px; top: 14px; grid-area: auto; font-size: 1rem; rotate: 6deg; }
.em-stmt__part--post { position: relative; padding: 14px 16px 16px; border: 2px dashed rgba(11, 20, 36, 0.45); border-radius: 6px; }
.em-stmt__part--post .em-stmt__partlabel { margin-bottom: 8px; }
.em-stmt__post { max-width: 58%; color: var(--ah-ink); font: 900 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem)/1.05 var(--ah-display); letter-spacing: 0.02em; }
.em-stmt__postnote { max-width: 58%; margin-top: 6px; color: var(--ah-ink-2); font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.em-stmt__mark { position: absolute; right: 8px; bottom: 12px; width: min(42%, 170px); height: auto; rotate: -7deg; }
.em-stmt__btn { width: 100%; white-space: normal; }
.em-stmt__fine p + p { margin-top: 4px; }
.em-stmt__fine { max-width: 52em; margin-top: 22px; padding-top: 14px; border-top: 2px dashed rgba(11, 20, 36, 0.3); color: var(--ah-ink-2); font-size: 0.92rem; font-weight: 600; line-height: 1.45; }
.em-price__after { max-width: 40em; margin: clamp(34px, 5vw, 50px) auto 0; text-align: center; color: var(--ah-fog); font-size: 1.1rem; }
.em-price__after strong { color: var(--ah-paper); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .em-stmt:not(.is-play) .em-stmt__box svg { stroke-dasharray: 30; stroke-dashoffset: 30; }
  .em-stmt__box svg { transition: stroke-dashoffset 0.35s var(--ease-out); }
  .em-stmt__row:nth-child(1) .em-stmt__box svg { transition-delay: 0.3s; } .em-stmt__row:nth-child(2) .em-stmt__box svg { transition-delay: 0.5s; }
  .em-stmt__row:nth-child(3) .em-stmt__box svg { transition-delay: 0.7s; } .em-stmt__row:nth-child(4) .em-stmt__box svg { transition-delay: 0.9s; }
  .em-stmt__row:nth-child(5) .em-stmt__box svg { transition-delay: 1.1s; } .em-stmt__row:nth-child(6) .em-stmt__box svg { transition-delay: 1.3s; }
  html.motion .em-stmt:not(.is-play) .em-stmt__stamp, html.motion .em-stmt:not(.is-play) .em-stmt__mark { opacity: 0; scale: 1.6; }
  .em-stmt__stamp, .em-stmt__mark { transition: opacity 0.12s 1.6s, scale 0.32s var(--ease-back) 1.6s; }
  .em-stmt__mark { transition-delay: 1.9s; }
}
@media (max-width: 520px) {
  .em-stmt__post, .em-stmt__postnote { max-width: none; }
  .em-stmt__mark { position: relative; right: auto; bottom: auto; width: 150px; margin: 12px 0 -4px auto; }
  .em-stmt .em-stmt__stamp { position: relative; right: auto; top: auto; display: inline-block; margin-top: 12px; rotate: -3deg; }
}
/* --------------------------------------------------------------------------
   THE REQUIREMENT: the house rule card taped up by the register, Shmello on it
   as a sticker (a mascot is a sticker, never hero-sized)
   -------------------------------------------------------------------------- */
.em-req { --deco-at: 0 100%; --deco-size: 40% 60%; }
.em-req__head .ah-h2 { max-width: 15em; margin-inline: auto; }
.em-rule {
  position: relative; width: min(100%, 680px); margin: 0 auto; padding: 32px clamp(20px, 4.4vw, 44px) 30px;
  border: 2px solid var(--ah-950); border-radius: 6px; color: var(--ah-ink);
  background-color: var(--ah-cream); background-image: var(--ah-fiber), linear-gradient(180deg, transparent 0 14px, var(--ah-red-ink) 14px 16px, transparent 16px 19px, var(--ah-red-ink) 19px 21px, transparent 21px);
  box-shadow: 7px 7px 0 var(--ah-blue); rotate: -0.6deg;
}
.em-rule .ah-masking--l { left: -22px; top: -12px; }
.em-rule__tape { right: 26%; top: auto; bottom: -14px; rotate: 6deg; }
.em-rule__tag { display: inline-block; margin: 10px 0 18px; padding: 6px 12px 5px; border: 3px solid var(--ah-red-ink); border-radius: 7px; color: var(--ah-red-ink); font: 900 1.3rem/1 var(--ah-display); letter-spacing: 0.16em; text-transform: uppercase; rotate: -2deg; box-shadow: inset 0 0 0 2px var(--ah-cream), inset 0 0 0 3.5px var(--ah-red-ink); }
.em-rule__shmello { position: absolute; top: -40px; right: -16px; width: clamp(88px, 16vw, 116px); height: auto; aspect-ratio: 1; padding: 6px; border: 2px solid var(--ah-950); border-radius: 50%; background: #fff; box-shadow: 3px 3px 0 var(--ah-950); rotate: 4deg; object-fit: contain; }
.em-rule__body p { color: var(--ah-ink); font-size: 1.1rem; font-weight: 500; line-height: 1.55; }
.em-rule__body p + p { margin-top: 12px; }
.em-rule__btn { margin-top: 24px; }
.em-rule :focus-visible, .em-case :focus-visible, .em-drawer :focus-visible { outline-color: var(--ah-ink); }
.em-rule__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) { .em-rule__shmello { top: -34px; right: -6px; } .em-rule__body p { font-size: 1.04rem; } }

/* --------------------------------------------------------------------------
   THE BOOKING BAND: a business-reply envelope addressed to Pawn Leads with the
   old email bill sticking out the top; the card words on its face, Book Your
   Call where the stamp goes, the red meter mark
   -------------------------------------------------------------------------- */
.em-book__actions { margin-top: 28px; }
.em-brm { position: relative; width: min(100%, 520px); margin: 0 auto; padding-top: 112px; }
.em-brm__bill {
  position: absolute; z-index: 0; left: 9%; top: 0; width: 64%; height: 170px; padding: 14px 16px;
  border: 2px solid var(--ah-950); border-radius: 3px; background: #fbf9f2; color: var(--ah-ink);
  font: 600 0.8rem/1.4 var(--ah-mono); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); rotate: -5deg;
}
.em-brm__billhead { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px dashed rgba(11, 20, 36, 0.35); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.em-brm__billrow { display: flex; justify-content: space-between; gap: 10px; }
.em-brm__billrow b { color: var(--ah-red-ink); font-weight: 800; white-space: nowrap; }
.em-brm__env {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label stamp" "card stamp" "mark to";
  gap: 14px 18px; align-items: start; padding: 22px clamp(16px, 4vw, 26px) 20px;
  border: 2px solid var(--ah-950); border-radius: 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 8px 8px 0 var(--ah-neon-pink); rotate: 0.8deg;
}
.em-brm__env :focus-visible { outline-color: var(--ah-ink); }
.em-brm__label { grid-area: label; padding-bottom: 8px; border-bottom: 5px solid var(--ah-ink); color: var(--ah-ink); font: 900 clamp(1.15rem, 1rem + 0.7vw, 1.5rem)/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 4px 0 var(--ah-cream), 0 7px 0 var(--ah-ink); }
.em-brm__stamp { grid-area: stamp; display: grid; justify-items: center; gap: 8px; padding: 10px; border: 2px dashed rgba(11, 20, 36, 0.55); border-radius: 4px; }
.em-brm__nopost { color: var(--ah-ink-2); font: 800 0.66rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }
.em-brm__btn { white-space: nowrap; }
.em-brm__card { grid-area: card; padding-top: 6px; }
.em-brm__h { color: var(--ah-ink); font: 900 clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem)/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.em-brm__p { max-width: 20em; margin-top: 10px; color: var(--ah-ink-2); font-size: 1.02rem; font-weight: 600; line-height: 1.45; }
.em-brm__to { grid-area: to; align-self: end; display: grid; justify-items: end; gap: 2px; padding-right: 30px; text-align: right; }
.em-brm__to b { font: 900 1.35rem/1 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase; }
.em-brm__to span { color: var(--ah-ink-2); font: 700 0.78rem/1.3 var(--ah-mono); letter-spacing: 0.06em; }
.em-brm__mark { grid-area: mark; align-self: end; width: min(100%, 170px); height: auto; rotate: -6deg; }
/* the facing marks down the right edge */
.em-brm__bars { position: absolute; right: 10px; bottom: 16px; width: 14px; height: 74px; background: repeating-linear-gradient(180deg, var(--ah-ink) 0 5px, transparent 5px 10px); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .em-brm:not(.is-play) .em-brm__bill { translate: 0 70px; }
  html.motion .em-brm:not(.is-play) .em-brm__mark { opacity: 0; scale: 1.6; }
  .em-brm__bill { transition: translate 0.8s var(--ease-back) 0.25s; }
  .em-brm__mark { transition: opacity 0.12s 1s, scale 0.32s var(--ease-back) 1s; }
}
@media (max-width: 460px) {
  /* the old bill sticks out far enough to read both of its lines; the address and the meter mark share the bottom row */
  .em-brm { padding-top: 104px; }
  .em-brm__bill { left: 4%; width: 88%; rotate: -3.5deg; font-size: 0.74rem; }
  .em-brm__env { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "stamp stamp" "card card" "to mark"; column-gap: 10px; }
  .em-brm__stamp { justify-self: start; }
  .em-brm__to { justify-items: start; text-align: left; padding-right: 0; }
  .em-brm__mark { justify-self: end; width: 112px; }
  .em-brm__bars { display: none; }
}
@media (max-width: 360px) { .em-brm { padding-top: 124px; } .em-brm__mark { width: 92px; } }

/* --------------------------------------------------------------------------
   THE CLOSING BAND: the neon envelope sign. Tap it: the outline lights, the
   flap lights, then the 1 new badge flickers on.
   -------------------------------------------------------------------------- */
.em-neon { position: relative; display: block; width: min(100%, 460px); margin: 0 auto 50px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.em-neon:focus-visible { outline: none; }
.em-neon:focus-visible .em-neon__svg { outline: 3px solid var(--ah-sky); outline-offset: 6px; border-radius: 16px; }
.em-neon__svg { display: block; width: 100%; height: auto; overflow: visible; }
.em-neon__glass path { fill: none; stroke: rgba(220, 235, 255, 0.14); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.em-neon__lit path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.em-neon__halo { stroke-width: 20; opacity: 0.85; }
.em-neon__tube { stroke-width: 8; }
.em-neon__core { stroke-width: 2.8; }
.em-neon__lit--body .em-neon__halo, .em-neon__lit--body .em-neon__tube { stroke: var(--ah-neon-blue); }
.em-neon__lit--body .em-neon__core { stroke: var(--ah-neon-blue-core); }
.em-neon__lit--flap .em-neon__halo, .em-neon__lit--flap .em-neon__tube, .em-neon__lit--badge .em-neon__halo, .em-neon__lit--badge .em-neon__tube { stroke: var(--ah-neon-pink); }
.em-neon__lit--flap .em-neon__core, .em-neon__lit--badge .em-neon__core { stroke: var(--ah-neon-pink-core); }
.em-neon__text { fill: var(--ah-neon-pink-core); font: 900 29px/1 var(--ah-display); letter-spacing: 0.04em; text-anchor: middle; }
.em-neon__text--halo { fill: var(--ah-neon-pink); stroke: var(--ah-neon-pink); stroke-width: 6; opacity: 0.9; }
.em-neon__hw circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 2; }
.em-neon.is-off .em-neon__lit { opacity: 0.05 !important; animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .em-final:not(.is-play) .em-neon__lit { opacity: 0.05; }
  .em-final.is-play .em-neon__lit--body { animation: ah-ignite 1.1s 0.15s both; }
  .em-final.is-play .em-neon__lit--flap { animation: ah-ignite 1.1s 0.75s both; }
  .em-final.is-play .em-neon__lit--badge { animation: em-flicker 1.3s 1.4s both; }
  .em-neon.relight .em-neon__lit--body { animation: ah-ignite2 0.8s 0.05s both !important; }
  .em-neon.relight .em-neon__lit--flap { animation: ah-ignite2 0.8s 0.5s both !important; }
  .em-neon.relight .em-neon__lit--badge { animation: em-flicker 1.2s 1s both !important; }
  .em-neon:hover .em-neon__svg { animation: em-buzz 0.9s ease-in-out; }
}
@keyframes em-flicker { 0% { opacity: 0; } 10% { opacity: 0.9; } 14% { opacity: 0.1; } 26% { opacity: 1; } 30% { opacity: 0.2; } 36% { opacity: 0.85; } 40% { opacity: 0.15; } 52%, 100% { opacity: 1; } }
@keyframes em-buzz { 30% { transform: translateY(-2px); } 60% { transform: translateY(1px); } }