/* ==========================================================================
   AFTER HOURS: facebook-ads.html (prefix fb-)
   This page's own shop: the Facebook feed at night. The neon sign of ten
   people and the sponsored ad that lights it (hero), the survey replies piling
   up, the TV and the handheld, the back-office monitor, the tapes that play in
   the feed, one neighbor across three screens, a ship in a bottle on a shelf,
   the ledger, the pegboard, the tube from the ad to Shmello, the PL-50 scope,
   the padlock and take-a-number, the territory board, the register tape, the
   ad's own lead form (booking) and the sign fully lit (closing).
   The ad interrupts the scroll in flow (up to 1679px) and rides in the side
   gutter where one really exists (1680px and up). No lamp, no shop door, no
   OPEN sign: those belong to the homepage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Page-wide
   -------------------------------------------------------------------------- */
#main .fb-pk .ah-pkg :focus-visible, .fb-side__legend :focus-visible, .fb-reg :focus-visible, .fb-lead__sheet :focus-visible { outline-color: var(--ah-ink); }

/* --------------------------------------------------------------------------
   0b. The sponsored ad (the page's signature): one drawing used in the hero,
   in the flow, in the side gutter and in the booking band
   -------------------------------------------------------------------------- */
.fb-ap {
  position: relative; display: block; width: 100%; padding: 12px 11px 10px; overflow: hidden;
  border: 3px solid var(--ah-950); border-radius: 24px; background: #fbfaf6; color: var(--ah-ink); text-align: left;
  font: inherit; box-shadow: 0 0 0 5px #232b39, 0 0 0 7px var(--ah-950), 7px 7px 0 7px var(--ah-blue);
}
button.fb-ap, .fb-intr__post { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: translate 0.2s var(--ease-out); }
button.fb-ap:hover, .fb-intr__post:hover { translate: 0 -2px; }
button.fb-ap:focus-visible, .fb-intr__post:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 10px; }
.fb-ap__sample { position: absolute; z-index: 3; top: 4px; right: 6px; padding: 0.3em 0.5em 0.25em; font-size: 0.6rem; --tilt: 6deg; }
.fb-ap__notch { display: block; width: 56px; height: 6px; margin: 0 auto 10px; border-radius: 999px; background: #232b39; }
.fb-ap__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fb-ap__av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); color: var(--ah-ink); font: 900 0.9rem/1 var(--ah-display); }
.fb-ap__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.fb-ap__meta b { font-size: 0.8rem; font-weight: 800; }
.fb-ap__meta i { color: var(--ah-ink-2); font-style: normal; font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.fb-ap__body { display: block; margin-bottom: 8px; color: var(--ah-ink); font-size: 0.8rem; font-weight: 600; line-height: 1.4; }
.fb-ap__img { position: relative; display: block; height: 64px; margin-bottom: 8px; border: 2px solid var(--ah-950); border-radius: 8px; background: radial-gradient(circle, rgba(47, 155, 255, 0.45) 1.2px, transparent 1.7px) 0 0 / 8px 8px, linear-gradient(160deg, #22385f, #0b1424); }
.fb-ap__play { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); }
.fb-ap__play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--ah-ink); }
.fb-ap__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--ah-ink-2); font-size: 0.7rem; font-weight: 800; }
/* the reaction row never breaks: three emojis on one line, like the real feed */
.fb-ap__foot > span:first-child { flex: none; white-space: nowrap; }
.fb-ap__boost { color: var(--ah-blue-ink); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.fb-ap__burst { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fb-ap__burst span { position: absolute; bottom: 10px; font-size: 1.05rem; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fb-ap.is-boost, .fb-intr__post.is-boost { animation: fb-squish 0.55s var(--ease-back); }
  .fb-ap__body.is-swap { animation: fb-type 0.5s ease; }
  .fb-ap__burst span { animation: fb-burst 1s ease-out forwards; }
  html.motion [data-boost] .fb-ap__boost { animation: fb-blink 1.3s ease-in-out 1.4s 3; }
}
@keyframes fb-squish { 30% { transform: scale(1.08, 0.84); } 60% { transform: scale(0.95, 1.07); } }
@keyframes fb-type { from { opacity: 0; transform: translateY(6px); } }
@keyframes fb-burst { 0% { transform: translateY(0) scale(0.7); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-110px) scale(1.25); opacity: 0; } }
@keyframes fb-blink { 50% { opacity: 0.25; } }

/* --------------------------------------------------------------------------
   1. HERO: the 1-in-10 neon sign, with the sponsored ad docked to it
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .fb-hero .ah-phero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
}
.fb-hero .ah-phero__copy { max-width: 720px; }
.fb-hero .ah-phero__lead + .ah-phero__lead { margin-top: -18px; }
.fb-hero .ah-phero__object { flex-direction: column; align-items: center; }
.fb-hero__note { max-width: 34em; }
/* two copies of the zone button, one shown at a time (display: none takes the other out of the tab order too) */
.fb-hero__zone--phone { display: none; }

/* the stage: the sign across the top, the ad docked under its left corner, the caption to its right */
.fb-stage {
  --lit: 1; --ap-w: 204px;
  position: relative; display: grid; grid-template-columns: var(--ap-w) minmax(0, 1fr); grid-template-areas: "sign sign" "ad cap";
  column-gap: 16px; width: min(100%, 560px); margin: 0 auto;
}
.fb-sign { grid-area: sign; position: relative; padding-top: 66px; }
/* the light the sign throws on the bricks: printed dots, brighter as more people light up */
.fb-sign__spot {
  position: absolute; z-index: 0; left: -34%; right: -34%; top: -6%; bottom: -40%; pointer-events: none;
  background: radial-gradient(circle, rgba(47, 155, 255, 0.75) 1.3px, transparent 1.8px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, rgba(0, 0, 0, 0.55) 66%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, rgba(0, 0, 0, 0.55) 66%, transparent 100%);
  opacity: calc(0.34 + var(--lit) * 0.066); transition: opacity 0.5s ease;
}
.fb-sign__chain { position: absolute; z-index: 1; top: 0; width: 8px; height: 74px; background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 52%, #9aa7b8 58%, #5d6a7d 85%, transparent 90%) 0 0 / 100% 10px repeat-y; }
.fb-sign__chain--l { left: 18%; } .fb-sign__chain--r { right: 18%; }
.fb-sign__box {
  position: relative; z-index: 2; display: block; padding: 14px clamp(12px, 3%, 18px) 44px;
  border: 3px solid var(--ah-950); border-radius: 18px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px), linear-gradient(180deg, #3a4456, #1a202c 60%, #151a24);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.16);
  rotate: -1deg;
}
.fb-sign__bolt { position: absolute; z-index: 3; width: 12px; height: 12px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); }
.fb-sign__bolt--tl { left: 7px; top: 7px; } .fb-sign__bolt--tr { right: 7px; top: 7px; } .fb-sign__bolt--bl { left: 7px; bottom: 7px; } .fb-sign__bolt--br { right: 7px; bottom: 7px; }
/* a painted plate across the top of the frame */
.fb-sign__plate { margin: 0 14px 12px; padding: 5px 10px 4px; border: 2px solid var(--ah-950); border-radius: 3px; background: var(--ah-cream); color: var(--ah-ink); font: 800 clamp(0.6rem, 0.5rem + 0.3vw, 0.7rem)/1.25 var(--ah-mono); letter-spacing: 0.05em; text-align: center; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ah-950); }
.fb-sign__wall {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 2px; padding: 18px 8px 16px;
  border: 2px solid var(--ah-950); border-radius: 10px;
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(200, 230, 255, 0.05) 18% 26%, transparent 26% 100%),
    linear-gradient(rgba(26, 34, 50, 0.9), rgba(26, 34, 50, 0.9)) 50% 50% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent calc(20% - 1px), #1a2232 calc(20% - 1px) 20%, transparent 20% calc(40% - 1px), #1a2232 calc(40% - 1px) 40%, transparent 40% calc(60% - 1px), #1a2232 calc(60% - 1px) 60%, transparent 60% calc(80% - 1px), #1a2232 calc(80% - 1px) 80%, transparent 80%),
    #060a14;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.6);
}
.fb-npc {
  position: relative; display: grid; place-items: center; min-width: 44px; min-height: 92px; padding: 6px 0 4px;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
span.fb-npc { cursor: default; }
.fb-npc svg { display: block; width: min(84%, 78px); height: auto; overflow: visible; }
.fb-npc use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fb-npc .np-glass { stroke: rgba(226, 238, 255, 0.2); stroke-width: 6; transition: stroke 0.2s, opacity 0.2s; }
.fb-npc .np-lit { opacity: 0; transition: opacity 0.2s; }
.fb-npc .np-halo { stroke: var(--ah-neon-blue); stroke-width: 13; opacity: 0.5; }
.fb-npc .np-tube { stroke: var(--ah-neon-blue); stroke-width: 5.4; }
.fb-npc .np-core { stroke: var(--ah-neon-blue-core); stroke-width: 1.9; }
button.fb-npc:hover .np-glass { stroke: rgba(226, 238, 255, 0.4); }
.fb-npc:focus-visible { outline-offset: 0; }
.fb-npc.is-lit .np-lit { opacity: 1; }
.fb-npc.is-lit .np-glass { opacity: 0; }
/* the tube's own halo: neon tubes are the one sanctioned glow */
.fb-npc.is-lit svg { filter: drop-shadow(0 0 6px rgba(47, 155, 255, 0.85)); }
@media (prefers-reduced-motion: no-preference) {
  .fb-npc.is-igniting .np-lit { animation: ah-ignite2 0.8s both; }
  /* the hum: a dark person buzzes and dies again (never rests lit, so the LED count always matches the lights) */
  .fb-npc.is-flash:not(.is-lit) .np-lit { animation: fb-flicker 1.5s linear both; }
  html.motion .fb-hero .fb-npc.is-lit .np-lit { animation: ah-ignite 1.1s 0.5s both; }
  .fb-npc.is-igniting { animation: fb-pop 0.5s var(--ease-back); }
}
@keyframes fb-pop { 40% { transform: scale(1.12); } }
@keyframes fb-flicker { 0% { opacity: 0; } 8% { opacity: 0.7; } 12% { opacity: 0.08; } 22% { opacity: 0.55; } 30% { opacity: 0.05; } 44% { opacity: 0.4; } 58%, 100% { opacity: 0; } }
/* the LED counter built into the bottom of the frame, and a vent */
.fb-sign__led { position: absolute; right: 30px; bottom: 9px; display: flex; align-items: baseline; gap: 2px; padding: 3px 8px 2px; border: 2px solid var(--ah-950); border-radius: 4px; background: #04060b; color: #6fb6ff; font: 800 0.78rem/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; }
.fb-sign__led b { color: var(--ah-neon-sky); font-size: 1.15rem; text-shadow: 0 0 6px var(--ah-neon-blue); }
.fb-sign__led.is-blink b { animation: fb-blink 0.5s ease 2; }
.fb-sign__vent { position: absolute; left: 30px; bottom: 13px; width: 30%; height: 12px; background: repeating-linear-gradient(90deg, var(--ah-950) 0 3px, transparent 3px 7px); opacity: 0.8; }

/* the docked ad and its power cord up into the sign */
.fb-ad { grid-area: ad; position: relative; z-index: 5; width: calc(var(--ap-w) + 6px); margin: -46px 0 0 -14px; rotate: -3deg; }
.fb-ad__cord { grid-area: ad; position: relative; z-index: 1; align-self: start; width: 90px; height: 50px; margin: -12px 0 0 calc(var(--ap-w) - 22px); overflow: visible; }
.fb-ad__cord path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fb-ad__ink { stroke: var(--ah-950); stroke-width: 10; }
.fb-ad__wire { stroke: #5d6a7d; stroke-width: 5; }
.fb-ad__pulse { stroke: var(--ah-neon-sky); stroke-width: 5; stroke-dasharray: 20 100; stroke-dashoffset: 20; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fb-stage.is-pulse .fb-ad__pulse { animation: fb-pulse 0.55s linear both; }
}
/* the spark a boost sends from the ad to the next dark person (built and flown by the page script, motion only) */
.fb-spark { position: absolute; z-index: 7; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ah-neon-blue-core); box-shadow: 0 0 0 3px var(--ah-neon-sky), 0 0 12px 4px var(--ah-neon-blue); pointer-events: none; }
/* paused (or off screen) the sign's taps still work: the toys inside skip their animation and land on the finished state */
.fb-stage.is-paused .fb-npc, .fb-stage.is-paused .np-lit, .fb-stage.is-paused .fb-ad__pulse, .fb-stage.is-paused .fb-ap, .fb-stage.is-paused .fb-ap__burst span, .fb-stage.is-paused .fb-sign__led b, .fb-stage.is-paused .fb-ap__boost,
.fb-stage.is-idle .fb-npc, .fb-stage.is-idle .np-lit, .fb-stage.is-idle .fb-ad__pulse, .fb-stage.is-idle .fb-ap, .fb-stage.is-idle .fb-ap__burst span, .fb-stage.is-idle .fb-sign__led b, .fb-stage.is-idle .fb-ap__boost { animation: none !important; }
@keyframes fb-pulse { 0% { opacity: 1; stroke-dashoffset: 20; } 92% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -100; } }

.fb-sign__cap { grid-area: cap; position: relative; z-index: 2; display: grid; justify-items: center; align-content: start; gap: 14px; margin: 34px 0 0; }
.fb-sign__string { position: absolute; left: 50%; top: -38px; width: 120px; height: 40px; margin-left: -60px; border-left: 2px solid #e8dcc0; border-right: 2px solid #e8dcc0; }
.fb-sign__chip {
  position: relative; display: block; max-width: 22em; padding: 11px 16px 10px; border: 2px solid var(--ah-950); border-radius: 6px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink-2);
  font-size: 1rem; font-weight: 600; line-height: 1.4; text-align: center; box-shadow: 4px 4px 0 var(--ah-blue); rotate: 0.6deg;
}
.fb-sign__chip b { color: var(--ah-ink); font-weight: 800; }
.fb-ad__hand { justify-self: start; margin-left: -6px; font-size: 1.08rem; rotate: -3deg; }
.fb-ad__hand .ah-hand__arrow { width: 42px; height: 32px; margin-top: 2px; }
.fb-ad__note { text-wrap: balance; }
.fb-sign__pause { position: absolute; z-index: 6; left: 0; top: 4px; }
/* stacked layouts: the button stays on the sign's top-right corner (the stage is centered, at most 560px wide) */
@media (max-width: 999px) { .fb-sign__pause { left: auto; right: max(0px, calc(50% - 280px)); } }

/* phones: the kit's hero order, page-scoped (headline, one lead line and the Apply button, then the sign and the ad,
   then the rest of the lead and the second button) so the first iPhone screen holds the headline, the CTA and the sign */
@media (max-width: 767px) {
  .fb-hero .ah-phero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .fb-hero .ah-crumbs, .fb-hero .ah-kicker { align-self: flex-start; }
  .fb-hero .ah-phero__copy, .fb-hero__actions { display: contents; }
  .fb-hero .ah-crumbs { order: 1; }
  .fb-hero .ah-kicker { order: 2; margin-bottom: 16px; }
  .fb-hero .ah-phero__h { order: 3; margin-bottom: 16px; }
  .fb-hero .fb-hero__lead1 { order: 4; margin: 0 0 18px; }
  .fb-hero__apply { order: 5; align-self: flex-start; }
  .fb-hero__object { order: 6; margin-top: 26px; }
  .fb-hero .ah-phero__lead.fb-hero__lead2 { order: 7; margin: 30px 0 22px; }
  .fb-hero__actions .fb-hero__zone { display: none; }
  .fb-hero__zone--phone { display: inline-flex; order: 8; align-self: flex-start; }
  .fb-hero__note { order: 9; }
  .fb-stage { --ap-w: 158px; column-gap: 12px; }
  .fb-sign { padding-top: 34px; }
  .fb-sign__chain { height: 40px; }
  .fb-sign__box { padding: 10px 8px 40px; rotate: -0.6deg; }
  .fb-sign__plate { margin: 0 10px 10px; letter-spacing: 0.04em; }
  .fb-sign__wall { padding: 10px 4px 8px; gap: 4px 0; }
  .fb-npc { min-height: 60px; }
  .fb-sign__led { right: 24px; }
  .fb-sign__vent { left: 24px; width: 26%; }
  .fb-ad { margin: -38px 0 0 -6px; rotate: -2deg; }
  .fb-ap--hero { padding: 10px 9px 8px; border-radius: 20px; box-shadow: 0 0 0 4px #232b39, 0 0 0 6px var(--ah-950), 5px 5px 0 6px var(--ah-blue); }
  .fb-ap--hero .fb-ap__notch { margin-bottom: 8px; }
  .fb-ap--hero .fb-ap__av { width: 26px; height: 26px; font-size: 0.8rem; }
  .fb-ap--hero .fb-ap__meta b { font-size: 0.74rem; }
  .fb-ap--hero .fb-ap__meta i { font-size: 0.6rem; white-space: normal; }
  .fb-ap--hero .fb-ap__body { font-size: 0.72rem; line-height: 1.35; }
  .fb-ap--hero .fb-ap__img { height: 46px; }
  .fb-ap--hero .fb-ap__foot { font-size: 0.64rem; }
  .fb-ad__cord { margin-top: -10px; margin-left: calc(var(--ap-w) - 26px); }
  .fb-sign__cap { margin-top: 30px; gap: 10px; }
  .fb-sign__string { width: 90px; margin-left: -45px; }
  .fb-sign__chip { padding: 10px 12px 9px; font-size: 0.95rem; }
  .fb-ad__hand { font-size: 0.92rem; margin-left: -8px; }
  .fb-ad__note { max-width: 7.5em; }
  .fb-ad__hand .ah-hand__arrow { width: 32px; height: 26px; }
  .fb-ap--hero .fb-ap__foot { gap: 4px; }
  /* the one-line reaction row is a touch smaller here, so "tap to boost" keeps its last letters on the narrowest phones */
  .fb-ap--hero .fb-ap__foot > span:first-child { font-size: 0.56rem; letter-spacing: -0.08em; }
  .fb-ap--hero .fb-ap__boost { font-size: 0.54rem; letter-spacing: 0.02em; white-space: nowrap; }
}
@media (max-width: 380px) {
  .fb-hero .ah-kicker { gap: 8px; font-size: 0.8rem; letter-spacing: 0.1em; }
  .fb-stage { --ap-w: 146px; }
  /* the narrowest ad: "tap to boost" folds onto two short lines instead of losing its end */
  .fb-ap--hero .fb-ap__boost { max-width: 4.2em; white-space: normal; text-align: right; line-height: 1.1; }
}

/* --------------------------------------------------------------------------
   2. THE SURVEY: the chat keeps going, and the replies pile up in two buckets
   -------------------------------------------------------------------------- */
.fb-survey__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "chat" "piles"; gap: 34px; }
@media (min-width: 900px) {
  .fb-survey__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head chat" "piles piles"; column-gap: clamp(40px, 6vw, 96px); row-gap: 56px; align-items: start; }
  .fb-survey__head { align-self: center; }
}
.fb-survey__head { grid-area: head; margin-bottom: 0; }
.fb-survey__chat { grid-area: chat; width: min(100%, 470px); }
.fb-piles { grid-area: piles; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 1040px; }
@media (min-width: 700px) { .fb-piles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); } }
@media (min-width: 900px) { .fb-piles { margin-left: clamp(0px, 4vw, 60px); } }
.fb-pile { position: relative; }
/* a fanned stack of faded replies, the loudest one on top */
.fb-pile__stack { position: relative; display: flex; align-items: flex-start; min-height: 132px; padding: 30px 0 0 14px; }
.fb-pile__ghost {
  position: absolute; display: grid; gap: 7px; width: min(64%, 230px); padding: 14px 16px; border: 2px solid var(--ah-950);
  border-radius: 22px 22px 22px 6px; background: var(--ah-cream); box-shadow: 3px 3px 0 var(--ah-950);
}
.fb-pile__ghost i { display: block; height: 7px; border-radius: 4px; background: rgba(11, 20, 36, 0.3); }
.fb-pile__ghost i + i { width: 58%; }
.fb-pile__ghost--a { left: 60px; top: 0; rotate: 7deg; opacity: 0.28; }
.fb-pile__ghost--b { left: 0; top: 8px; rotate: -8deg; opacity: 0.4; }
.fb-pile__ghost--c { left: 34px; top: 18px; rotate: 3deg; opacity: 0.55; }
.fb-pile__top {
  position: relative; z-index: 2; display: inline-block; margin-top: 18px; padding: 14px 20px 13px;
  border: 2px solid var(--ah-950); border-radius: 26px 26px 26px 6px; background: var(--ah-cream); color: var(--ah-ink);
  font-size: 1.16rem; font-weight: 800; line-height: 1.25; box-shadow: 4px 4px 0 var(--ah-blue); rotate: -1deg;
}
.fb-pile--wrong .fb-pile__top { box-shadow: 4px 4px 0 var(--ah-neon-pink); rotate: 0.8deg; }
.fb-pile__label {
  display: inline-block; margin: 22px 0 12px; padding: 6px 12px 5px; border: 2px solid var(--ah-950); border-radius: 4px;
  background: #11151d; color: var(--ah-sky); font: 800 0.76rem/1.3 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 var(--ah-blue);
}
.fb-pile--wrong .fb-pile__label { color: #ffb3cd; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 var(--ah-neon-pink); }
.fb-pile__lines p { max-width: 30em; color: var(--ah-fog); font-size: 1.06rem; line-height: 1.55; }
.fb-pile__lines p + p { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .fb-piles:not(.is-play) .fb-pile__ghost, html.motion .fb-piles:not(.is-play) .fb-pile__top { transform: translateY(26px); opacity: 0; }
  .fb-pile__ghost, .fb-pile__top { transition: transform 0.55s var(--ease-back), opacity 0.3s ease; }
  .fb-pile__ghost--b { transition-delay: 0.08s; } .fb-pile__ghost--c { transition-delay: 0.16s; } .fb-pile__top { transition-delay: 0.28s; }
  .fb-pile--wrong .fb-pile__ghost--a { transition-delay: 0.3s; } .fb-pile--wrong .fb-pile__ghost--b { transition-delay: 0.38s; } .fb-pile--wrong .fb-pile__ghost--c { transition-delay: 0.46s; } .fb-pile--wrong .fb-pile__top { transition-delay: 0.58s; }
}

/* --------------------------------------------------------------------------
   3. POP CULTURE: the TV, the handheld, the rap sheet on a clipboard
   -------------------------------------------------------------------------- */
.fb-pop { --deco-at: 100% 0; --deco-size: 38% 50%; }
.fb-pop__head .ah-h2 { max-width: 15em; margin-inline: auto; }
.fb-screens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: end; max-width: 1060px; margin: 0 auto; }
@media (min-width: 880px) { .fb-screens { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(40px, 5vw, 72px); } }
.fb-screen { margin: 0; }
.fb-screen__cap { margin-top: 22px; text-align: center; }
.fb-screen__cap h3 { font: 900 clamp(1.5rem, 1.2rem + 0.9vw, 2rem)/1 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ah-paper); }
.fb-screen__cap p { max-width: 28em; margin: 10px auto 0; color: var(--ah-fog); font-size: 1.05rem; }
.fb-tv { --video-w: 600px; }
/* the movie: a neon PAWN sign over a dark alley door, rain on the glass */
.fb-movie { background: #05070d; }
.fb-movie__bricks { position: absolute; inset: 0; background-color: #0a0d17; background-image: linear-gradient(180deg, rgba(5, 7, 13, 0.2), rgba(5, 7, 13, 0.85)), var(--ah-brick-dim); background-size: auto, 90px 33px; }
.fb-movie__door { position: absolute; left: 50%; bottom: 0; width: 26%; height: 50%; margin-left: -13%; border: 2px solid #000; border-bottom: 0; background: linear-gradient(180deg, #161b26, #0b0e15); box-shadow: inset 0 0 0 5px #10141d; }
.fb-movie__bars { position: absolute; left: 50%; bottom: 0; width: 26%; height: 50%; margin-left: -13%; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(120, 130, 150, 0.55) 9px 12px); }
.fb-movie__sign {
  position: absolute; left: 50%; top: 24%; translate: -50% -50%; padding: 4px 6px 4px 18px;
  font: 900 clamp(1.7rem, 1rem + 2.6vw, 3rem)/1 var(--ah-display); letter-spacing: 0.3em; color: #ffd6d6;
  text-shadow: 0 0 4px #ff3b4e, 0 0 12px #ff2d45, 0 0 26px rgba(255, 45, 69, 0.7);
}
.fb-movie__rain { position: absolute; inset: 0; background: repeating-linear-gradient(104deg, transparent 0 14px, rgba(173, 229, 255, 0.07) 14px 15px); }
@media (prefers-reduced-motion: no-preference) {
  .fb-screens.is-play .fb-movie__sign { animation: fb-buzz 2.4s linear 2; }
  .fb-screens.is-play .fb-hud__new { animation: fb-blink 1.2s ease-in-out 4; }
}
@keyframes fb-buzz { 0%, 18%, 22%, 62%, 68%, 100% { opacity: 1; } 19%, 21% { opacity: 0.3; } 63%, 66% { opacity: 0.55; } }
@keyframes fb-blink { 50% { opacity: 0.25; } }

/* the handheld game console with the quest popup */
.fb-console {
  position: relative; width: min(100%, 330px); margin: 0 auto; padding: 22px 20px 92px;
  border: 3px solid var(--ah-950); border-radius: 24px 24px 54px 24px;
  background: linear-gradient(160deg, #46526e, #2a3142 60%, #232b39);
  box-shadow: 8px 8px 0 var(--ah-blue), inset 0 2px 0 rgba(255, 255, 255, 0.16);
  rotate: 2deg;
}
.fb-console__screen { position: relative; overflow: hidden; aspect-ratio: 4 / 3.3; border: 3px solid var(--ah-950); border-radius: 8px; background: radial-gradient(115% 88% at 50% 12%, rgba(27, 141, 246, 0.16), transparent 62%), #050b16; box-shadow: 0 0 0 7px #11151d, 0 0 0 9px var(--ah-950); }
.fb-console__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.28) 2px 4px); }
.fb-hud { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 16px 0 26px; }
.fb-hud::before { content: ""; position: absolute; left: 13px; top: 24%; bottom: 24%; width: 3px; border-radius: 2px; background: var(--ah-neon-sky); }
.fb-hud__label { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--ah-neon-sky); font: 800 0.66rem/1 var(--ah-mono); letter-spacing: 0.2em; text-transform: uppercase; }
.fb-hud__label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fb-hud__new { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--ah-neon-sky); }
.fb-hud__obj { display: flex; align-items: flex-start; gap: 9px; color: var(--ah-paper); font-size: 0.98rem; font-weight: 700; line-height: 1.25; }
.fb-hud__obj b { color: var(--ah-neon-sky); font-weight: 800; }
.fb-hud__check { flex: none; width: 16px; height: 16px; margin-top: 1px; border: 2px solid var(--ah-neon-sky); border-radius: 4px; }
.fb-hud__reward { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #f2d48a; font: 800 0.7rem/1 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.fb-hud__coin { width: 13px; height: 13px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--ah-brass-hi), var(--ah-gold) 60%, var(--ah-brass-lo)); }
.fb-console__dpad { position: absolute; left: 30px; bottom: 26px; width: 48px; height: 48px; background: linear-gradient(var(--ah-950), var(--ah-950)) 50% 50% / 16px 100% no-repeat, linear-gradient(var(--ah-950), var(--ah-950)) 50% 50% / 100% 16px no-repeat; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5)); }
.fb-console__ab { position: absolute; right: 30px; bottom: 30px; display: flex; gap: 8px; rotate: -24deg; }
.fb-console__ab i { width: 24px; height: 24px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.fb-console__ab i + i { background: var(--ah-sky); translate: 0 -12px; }
.fb-console__grille { position: absolute; left: 50%; bottom: 18px; width: 44px; height: 14px; margin-left: -22px; background: repeating-linear-gradient(110deg, var(--ah-950) 0 3px, transparent 3px 8px); opacity: 0.7; }

/* the rap sheet: a case file on a clipboard */
.fb-rap { position: relative; max-width: 820px; margin: clamp(64px, 8vw, 104px) auto 0; padding: 30px 0 0; }
.fb-rap::before { content: ""; position: absolute; z-index: 0; left: -14px; right: -14px; top: 8px; bottom: -16px; border: 2px solid var(--ah-950); border-radius: 16px; background: radial-gradient(circle, rgba(0, 0, 0, 0.16) 1px, transparent 1.4px) 0 0 / 7px 7px, linear-gradient(180deg, #8a6644, #6a4a2e); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55); }
.fb-rap__clip { position: absolute; z-index: 3; left: 50%; top: -6px; width: 168px; height: 52px; margin-left: -84px; border: 2px solid var(--ah-950); border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, #e3e9f0, #9aa7b8 55%, #6f7c90); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.fb-rap__clip::before { content: ""; position: absolute; left: 50%; top: 9px; width: 54px; height: 14px; margin-left: -27px; border: 2px solid var(--ah-950); border-radius: 8px; background: #3a4456; }
.fb-rap__paper {
  position: relative; z-index: 2; margin: 0 6px; padding: 46px clamp(16px, 4vw, 40px) 26px;
  border: 2px solid var(--ah-950); border-radius: 4px;
  background-color: #fbf7ec; background-image: var(--ah-fiber), repeating-linear-gradient(180deg, transparent 0 31px, rgba(21, 101, 192, 0.1) 31px 32px);
  color: var(--ah-ink); rotate: -0.5deg;
}
.fb-rap__h { padding-bottom: 14px; border-bottom: 4px double var(--ah-ink); font: 900 clamp(1.25rem, 1rem + 0.9vw, 1.7rem)/1.1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ah-ink); }
.fb-rap__case { display: inline-block; margin: 0 12px 6px 0; padding: 3px 9px 2px; border: 2.5px solid var(--ah-red-ink); border-radius: 4px; color: var(--ah-red-ink); font: 800 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.16em; vertical-align: 4px; rotate: -3deg; }
.fb-rap__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: start; padding: 16px 0; border-bottom: 1.5px dashed rgba(11, 20, 36, 0.28); }
.fb-rap__tag {
  justify-self: start; margin-top: 2px; padding: 6px 10px 5px;
  border: 3px solid currentColor; border-radius: 7px; color: var(--ah-blue-ink);
  font: 900 1.02rem/1 var(--ah-display); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px #fbf7ec, inset 0 0 0 3.5px currentColor; rotate: -5deg;
  -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px;
}
.fb-rap__tag--movie { color: var(--ah-red-ink); rotate: 3deg; }
.fb-rap__tag--disney { color: var(--ah-ink); rotate: -2deg; }
.fb-rap__body b { display: block; font-size: 1.12rem; font-weight: 800; line-height: 1.25; color: var(--ah-ink); }
.fb-rap__body span { display: block; margin-top: 3px; color: var(--ah-ink-2); font-size: 1rem; line-height: 1.5; }
.fb-rap__foot { margin-top: 18px; color: var(--ah-ink-2); font-size: 1.02rem; font-weight: 600; line-height: 1.5; }
.fb-rap__foot strong { color: var(--ah-ink); font-weight: 800; }
.fb-rap__foot + .fb-rap__foot { margin-top: 6px; }
@media (max-width: 560px) {
  .fb-rap__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fb-rap__case { display: table; margin-bottom: 10px; }
}
.fb-disease { margin-top: clamp(56px, 7vw, 84px); }

/* --------------------------------------------------------------------------
   4. THE TRAP: the back-office monitor with the dead search
   -------------------------------------------------------------------------- */
.fb-trap .ah-split__copy .ah-h2 { max-width: 12em; }
.fb-pc { position: relative; width: min(100%, 560px); margin: 0 auto; }
.fb-pc__monitor { position: relative; padding: 18px 18px 34px; border: 3px solid var(--ah-950); border-radius: 18px; background: linear-gradient(180deg, #d6dde6, #a9b4c2 70%, #9aa7b8); box-shadow: 8px 8px 0 var(--ah-blue), inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.fb-pc__screen { position: relative; overflow: hidden; padding: clamp(16px, 3.4vw, 26px) clamp(12px, 3vw, 22px); border: 3px solid var(--ah-950); border-radius: 8px; background: radial-gradient(120% 80% at 50% 0%, rgba(47, 155, 255, 0.12), transparent 60%), #0b1528; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.5); }
.fb-pc__led { position: absolute; right: 26px; bottom: 12px; width: 9px; height: 9px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 2px var(--ah-950), 0 0 6px #35d07f; }
.fb-pc__neck { display: block; width: 74px; height: 34px; margin: 0 auto; border: 3px solid var(--ah-950); border-top: 0; background: linear-gradient(90deg, #8996a8, #cfd7e1 45%, #8996a8); }
.fb-pc__foot { display: block; width: min(60%, 220px); height: 16px; margin: 0 auto; border: 3px solid var(--ah-950); border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, #cfd7e1, #8996a8); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45); }
.fb-ng { position: relative; }
.fb-ng__bar { position: relative; z-index: 2; min-height: 54px; padding: 0 18px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5), 3px 3px 0 var(--ah-blue); }
.fb-ng__bar .ah-search__text { font-size: 1.05rem; }
.fb-ng__panel { position: relative; z-index: 1; margin: -26px 8px 0; padding: 36px 6px 8px; border: 2px solid var(--ah-950); border-radius: 0 0 16px 16px; background: #0e1a30; }
.fb-ng__row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 8px; font-size: 0.98rem; }
.fb-ng__ic { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ah-mute); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fb-ng__q { flex: 1 1 auto; min-width: 0; color: var(--ah-paper); font-weight: 600; }
.fb-ng__row--history .fb-ng__q { color: var(--ah-mute); }
.fb-ng__mark { flex: none; padding: 3px 8px 2px; border: 1.5px solid currentColor; border-radius: 4px; font: 800 0.66rem/1.2 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.fb-ng__mark--down { color: var(--ah-hot); }
.fb-ng__mark--up { color: #4fe39a; }
.fb-ng__row--t1 .fb-ng__ic, .fb-ng__row--t2 .fb-ng__ic, .fb-ng__row--t3 .fb-ng__ic { stroke: #4fe39a; }
.fb-ng__divider { margin: 8px 10px 2px; padding-top: 10px; border-top: 1.5px dashed rgba(173, 229, 255, 0.2); color: var(--ah-sky); font: 800 0.68rem/1.2 var(--ah-mono); letter-spacing: 0.18em; text-transform: uppercase; }
.fb-ng__foot { margin: 8px 10px 4px; color: var(--ah-mute); font-size: 0.78rem; font-weight: 600; }
.fb-ng__cap { margin-top: 26px; text-align: center; color: var(--ah-fog); font-size: 1.12rem; font-weight: 700; }
.fb-ng__cap span { color: #4fe39a; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .fb-pc:not(.is-play) .fb-ng__panel { clip-path: inset(0 0 100% 0); }
  html.motion .fb-pc:not(.is-play) .fb-ng__row, html.motion .fb-pc:not(.is-play) .fb-ng__divider, html.motion .fb-pc:not(.is-play) .fb-ng__foot { opacity: 0; transform: translateY(-6px); }
  .fb-ng__panel { transition: clip-path 0.6s var(--ease-out) 0.15s; }
  .fb-ng__row, .fb-ng__divider, .fb-ng__foot { transition: opacity 0.35s ease, transform 0.35s var(--ease-out); }
  .fb-ng__row--history { transition-delay: 0.25s; } .fb-ng__divider { transition-delay: 0.35s; }
  .fb-ng__row--t1 { transition-delay: 0.45s; } .fb-ng__row--t2 { transition-delay: 0.55s; } .fb-ng__row--t3 { transition-delay: 0.65s; } .fb-ng__foot { transition-delay: 0.8s; }
  /* settled: the old search fades back (still readable) while the new ones stay lit */
  .fb-pc.is-play .fb-ng__row--history { animation: fb-settle 1.6s ease 1.6s both; }
}
@keyframes fb-settle { to { opacity: 0.85; } }
.fb-ng__row--t1:hover, .fb-ng__row--t2:hover, .fb-ng__row--t3:hover { background: rgba(255, 255, 255, 0.05); }

/* --------------------------------------------------------------------------
   5. INTERRUPT: the dictionary card, a stack of VHS tapes, and the feed they
   play in (tap a tape: it slides into the feed between a cat video and a
   friend's barbecue)
   -------------------------------------------------------------------------- */
.fb-int__head { max-width: 1080px; }
.fb-int__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 60px; align-items: start; }
@media (min-width: 1000px) { .fb-int__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(40px, 6vw, 96px); } }
.fb-defn { margin: 0; max-width: 600px; }
.fb-tapes { position: relative; margin-top: 54px; max-width: 580px; }
.fb-tapes__label { text-wrap: balance; margin-bottom: 16px; color: var(--ah-sky); font: 800 0.86rem/1.3 var(--ah-body); letter-spacing: 0.14em; text-transform: uppercase; }
.fb-tapes__hand { position: absolute; right: 0; top: -30px; font-size: 1.02rem; rotate: 4deg; }
.fb-tapes__hand .ah-hand__arrow { width: 40px; height: 30px; margin-top: 10px; }
.fb-tapes__stack { display: grid; gap: 7px; }
.fb-tape {
  --w: 100%; --x: 0px; --r: 0deg;
  position: relative; display: flex; align-items: center; gap: 10px; width: var(--w); min-height: 56px; margin-left: var(--x); padding: 8px 26px 8px 30px;
  border: 2px solid var(--ah-950); border-radius: 5px; text-align: left; font: inherit; cursor: pointer;
  background: linear-gradient(180deg, #2c313c, #15181f 55%, #1d212a);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.08);
  rotate: var(--r); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: translate 0.25s var(--ease-out), box-shadow 0.2s;
}
.fb-tape::before, .fb-tape::after { content: ""; position: absolute; top: 9px; bottom: 9px; width: 8px; background: repeating-linear-gradient(180deg, #3a4150 0 2px, transparent 2px 5px); }
.fb-tape::before { left: 10px; } .fb-tape::after { right: 10px; }
.fb-tape:hover { translate: 6px 0; }
.fb-tape:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 3px; }
.fb-tape__label { flex: 1 1 auto; padding: 5px 14px 3px; border: 1.5px solid var(--ah-950); border-radius: 2px; background: #fbf7ec; color: var(--ah-ink); font: 400 1.08rem/1.25 var(--ah-hand); box-shadow: inset 0 -4px 0 rgba(27, 141, 246, 0.25); }
.fb-tape__on { display: none; flex: none; padding: 3px 7px 2px; border: 1.5px solid var(--ah-950); border-radius: 3px; background: var(--ah-blue); color: var(--ah-ink); font: 800 0.62rem/1.2 var(--ah-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.fb-tape[aria-pressed="true"] { translate: 12px 0; box-shadow: 4px 4px 0 var(--ah-blue), inset 0 2px 0 rgba(255, 255, 255, 0.08); }
.fb-tape[aria-pressed="true"] .fb-tape__on { display: block; }
.fb-tape--1 { --w: 92%; --x: 3%; --r: -0.7deg; }
.fb-tape--2 { --w: 96%; --x: 0px; --r: 0.5deg; }
.fb-tape--2 .fb-tape__label { box-shadow: inset 0 -4px 0 rgba(255, 63, 134, 0.3); }
.fb-tape--3 { --w: 90%; --x: 6%; --r: -0.4deg; }
.fb-tape--3 .fb-tape__label { box-shadow: inset 0 -4px 0 rgba(242, 182, 50, 0.4); }
.fb-tape--4 { --w: 95%; --x: 1%; --r: 0.8deg; }
li.fb-tape--more { min-height: 0; padding: 12px 0 0 10px; }
.fb-tape--more .ah-sticker { white-space: normal; }
.fb-tapes__note { margin-top: 24px; max-width: 32em; color: var(--ah-fog); font-size: 1.08rem; }
@media (max-width: 480px) {
  .fb-tape { padding: 8px 22px 8px 26px; gap: 8px; }
  .fb-tape__on { width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 0; }
  .fb-tape__on::after { content: ""; display: block; margin: 5px 0 0 8px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--ah-ink); }
  .fb-tapes__hand { top: -34px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .fb-tapes:not(.is-play) .fb-tapes__stack li { opacity: 0; transform: translateX(-30px); }
  .fb-tapes__stack li { transition: opacity 0.4s ease, transform 0.6s var(--ease-back); }
  .fb-tapes__stack li:nth-child(2) { transition-delay: 0.08s; } .fb-tapes__stack li:nth-child(3) { transition-delay: 0.16s; } .fb-tapes__stack li:nth-child(4) { transition-delay: 0.24s; } .fb-tapes__stack li:nth-child(5) { transition-delay: 0.34s; }
}

/* the feed phone: a cat video, your sponsored video, a friend's barbecue */
.fb-feed { position: relative; margin: 0; padding-top: 8px; }
.fb-feed__phone { --phone-w: 300px; --tilt: 2deg; }
.fb-feed__phone .ah-sample { top: -10px; right: 4px; }
.fb-feed__phone .ah-phone__screen { background: #e9edf3; }
.fb-feed__track { position: absolute; left: 10px; right: 10px; top: 48px; display: grid; gap: 9px; }
.fb-fp { position: relative; display: block; padding: 10px; border: 2px solid rgba(11, 20, 36, 0.18); border-radius: 10px; background: #fff; }
.fb-fp__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ah-ink); font-size: 0.8rem; }
.fb-fp__av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #d4dbe5; }
.fb-fp__av--you { display: grid; place-items: center; border: 2px solid var(--ah-950); background: var(--ah-blue); color: var(--ah-ink); font: 900 0.86rem/1 var(--ah-display); }
.fb-fp__name { display: grid; flex: 1 1 auto; gap: 5px; }
.fb-fp__name i { display: block; height: 7px; width: 54%; border-radius: 4px; background: #d4dbe5; }
.fb-fp__name i + i { width: 30%; }
.fb-fp__who { display: flex; flex-direction: column; line-height: 1.2; }
.fb-fp__who b { font-weight: 800; }
.fb-fp__who i { color: var(--ah-ink-2); font-style: normal; font-size: 0.66rem; font-weight: 700; }
.fb-fp__media { position: relative; display: block; overflow: hidden; height: 92px; border-radius: 6px; }
.fb-fp__media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fb-fp__media--cat { background: #f3e2c4; }
.cat-head, .cat-ear { fill: #8b8f99; stroke: var(--ah-950); stroke-width: 2; stroke-linejoin: round; }
.cat-ear-in { fill: #f0b8c8; }
.cat-eye { fill: var(--ah-950); }
.cat-nose { fill: #e0708f; }
.cat-whisk { fill: none; stroke: var(--ah-950); stroke-width: 1.2; stroke-linecap: round; }
.cat-yarn { fill: #ff7aa8; stroke: var(--ah-950); stroke-width: 1.6; }
.fb-fp__media--bbq { background: linear-gradient(180deg, #bfe3ff, #e6f4ff 70%); }
.bbq-sun { fill: #ffd36b; stroke: var(--ah-950); stroke-width: 1.5; }
.bbq-smoke { fill: none; stroke: rgba(11, 20, 36, 0.35); stroke-width: 2.4; stroke-linecap: round; }
.bbq-bowl { fill: #2a3142; stroke: var(--ah-950); stroke-width: 2; }
.bbq-lid { stroke: #ff6a3d; stroke-width: 4; stroke-linecap: round; }
.bbq-legs { fill: none; stroke: var(--ah-950); stroke-width: 2.4; stroke-linecap: round; }
.bbq-grass { stroke: #4caf6a; stroke-width: 6; }
.fb-fp__media--vid { display: grid; place-items: end start; padding: 10px; height: 124px; border: 2px solid var(--ah-950); background: radial-gradient(circle, rgba(255, 63, 134, 0.35) 1.2px, transparent 1.7px) 0 0 / 8px 8px, linear-gradient(160deg, #22385f, #0b1424); }
.fb-fp__vtitle { position: relative; z-index: 1; max-width: 78%; color: var(--ah-paper); font: 900 1.12rem/1.02 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 2px 2px 0 var(--ah-950); }
.fb-fp__playbtn { position: absolute; left: 50%; top: 42%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 2px solid var(--ah-950); border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 2px 2px 0 var(--ah-950); }
.fb-fp__playbtn::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -4px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--ah-ink); }
.fb-fp__media--vid .fb-fp__playbtn { background: var(--ah-blue); }
.fb-fp__react { display: flex; gap: 8px; margin-top: 8px; }
.fb-fp__react i { display: block; width: 46px; height: 7px; border-radius: 4px; background: #d4dbe5; }
.fb-fp__react--you { display: block; font-size: 0.86rem; letter-spacing: 0.04em; }
.fb-fp--you { border: 2px solid var(--ah-950); box-shadow: 3px 3px 0 var(--ah-blue); }
@media (prefers-reduced-motion: no-preference) {
  /* the feed settles once when it comes into view, then rests; a new tape slides its video in */
  html.motion .fb-feed:not(.is-play) .fb-feed__track { transform: translateY(120px); }
  .fb-feed__track { transition: transform 1.4s var(--ease-out) 0.2s; }
  .fb-fp--you.is-slide { animation: fb-slide 0.6s var(--ease-out); }
}
@keyframes fb-slide { from { transform: translateX(115%); } }

/* --------------------------------------------------------------------------
   6. WE SHOW THEM IT'S WRONG: the mega quote, then one neighbor across three
   screens (the video, the offer, the text) and through your shop door
   -------------------------------------------------------------------------- */
.fb-wrong { padding-top: calc(var(--pad-y) + 10px); }
.fb-mega { margin-bottom: clamp(60px, 8vw, 104px); }
.fb-walk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; max-width: 1160px; margin: 0 auto; }
/* the door gets its own column only where the three steps still have room beside it; 1000 to 1199 it stands below them */
@media (min-width: 1200px) { .fb-walk { grid-template-columns: minmax(0, 1fr) 170px; align-items: end; gap: clamp(20px, 2.4vw, 36px); } }
.fb-walk__sample.ah-sample--left { left: 150px; top: -14px; }
.fb-walk__steps { display: grid; gap: 40px; }
@media (min-width: 1000px) {
  .fb-walk__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); align-items: start; }
  .fb-walk__step--2 { margin-top: 60px; }
  .fb-walk__step--3 { margin-top: 120px; }
  /* a chalked footpath from one screen to the next */
  .fb-walk__step:not(:last-child)::after { content: ""; position: absolute; left: calc(196px + 18px); right: -12px; top: 120px; height: 60px; border-top: 2.5px dashed rgba(173, 229, 255, 0.4); border-right: 2.5px dashed rgba(173, 229, 255, 0.4); border-radius: 0 26px 0 0; pointer-events: none; }
}
.fb-walk__step { position: relative; display: grid; gap: 20px; justify-items: start; align-content: start; }
/* the same phone, three times */
.fb-scr {
  position: relative; display: block; width: min(100%, 196px); aspect-ratio: 9 / 12.6; overflow: hidden; padding: 24px 10px 10px;
  border: 3px solid var(--ah-950); border-radius: 24px; background: #e9edf3; color: var(--ah-ink);
  box-shadow: 0 0 0 4px #232b39, 0 0 0 6px var(--ah-950), 6px 6px 0 6px var(--ah-blue);
}
.fb-walk__step--2 .fb-scr { box-shadow: 0 0 0 4px #232b39, 0 0 0 6px var(--ah-950), 6px 6px 0 6px var(--ah-sky); rotate: 1deg; }
.fb-walk__step--3 .fb-scr { box-shadow: 0 0 0 4px #232b39, 0 0 0 6px var(--ah-950), 6px 6px 0 6px var(--ah-neon-pink); rotate: -1deg; }
.fb-walk__step--1 .fb-scr { rotate: -1.5deg; }
.fb-scr__notch { position: absolute; left: 50%; top: 9px; width: 30%; height: 6px; margin-left: -15%; border-radius: 999px; background: #232b39; }
.fb-scr__skel { display: grid; gap: 5px; margin-bottom: 8px; padding: 8px; border-radius: 8px; background: #fff; opacity: 0.8; }
.fb-scr__skel i { display: block; height: 6px; border-radius: 3px; background: #d4dbe5; }
.fb-scr__skel i + i { width: 60%; }
.fb-scr__skel--b { margin: 8px 0 0; }
.fb-scr__post { display: block; padding: 8px; border: 2px solid var(--ah-950); border-radius: 9px; background: #fff; box-shadow: 2px 2px 0 var(--ah-blue); }
.fb-scr__head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.fb-scr__av { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); color: var(--ah-ink); font: 900 0.7rem/1 var(--ah-display); }
.fb-scr__who { display: flex; flex-direction: column; line-height: 1.15; }
.fb-scr__who b { font-size: 0.66rem; font-weight: 800; }
.fb-scr__who i { color: var(--ah-ink-2); font-style: normal; font-size: 0.56rem; font-weight: 700; }
.fb-scr__vid { position: relative; display: grid; place-items: end start; height: 76px; padding: 6px; border: 1.5px solid var(--ah-950); border-radius: 6px; background: radial-gradient(circle, rgba(255, 63, 134, 0.35) 1.1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(160deg, #22385f, #0b1424); }
.fb-scr__vt { max-width: 80%; color: var(--ah-paper); font: 900 0.74rem/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 1px 1px 0 var(--ah-950); }
.fb-scr__play { position: absolute; left: 50%; top: 40%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); }
.fb-scr__play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -4.5px 0 0 -2.5px; border-style: solid; border-width: 4.5px 0 4.5px 8px; border-color: transparent transparent transparent var(--ah-ink); }
.fb-scr__react { display: block; margin-top: 6px; font-size: 0.66rem; }
.fb-scr__deal { display: grid; gap: 3px; padding: 10px 8px; border: 1.5px dashed var(--ah-ink); border-radius: 6px; background: var(--ah-cream); text-align: center; }
.fb-scr__deal b { font: 900 1rem/0.98 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ah-ink); }
.fb-scr__deal small { color: var(--ah-blue-ink); font: 800 0.6rem/1.2 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.fb-scr__join { display: block; margin-top: 8px; padding: 6px 4px 5px; border: 1.5px solid var(--ah-950); border-radius: 999px; background: var(--ah-blue); color: var(--ah-ink); font-size: 0.66rem; font-weight: 800; text-align: center; box-shadow: 2px 2px 0 var(--ah-950); }
.fb-scr--text { background: #fbfaf6; }
.fb-scr__thread { display: flex; flex-direction: column; align-items: center; margin: 2px -10px 12px; padding-bottom: 8px; border-bottom: 1.5px solid rgba(11, 20, 36, 0.15); line-height: 1.2; }
.fb-scr__thread b { font-size: 0.72rem; font-weight: 800; }
.fb-scr__thread i { color: var(--ah-ink-2); font-style: normal; font-size: 0.56rem; font-weight: 700; }
.fb-scr__msg { display: block; max-width: 88%; padding: 8px 10px; border: 1.5px solid var(--ah-950); border-radius: 14px 14px 14px 4px; background: var(--ah-cream); font-size: 0.72rem; font-weight: 700; line-height: 1.3; box-shadow: 2px 2px 0 var(--ah-neon-pink); }
.fb-scr__seen { display: block; margin-top: 6px; color: var(--ah-ink-2); font-size: 0.58rem; font-weight: 700; }
.fb-step { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; align-items: start; }
.fb-step__n { display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); color: var(--ah-ink); font: 900 1.6rem/1 var(--ah-display); box-shadow: 3px 3px 0 var(--st, var(--ah-blue)); }
.fb-walk__step--1 { --st: var(--ah-blue); } .fb-walk__step--2 { --st: var(--ah-sky); } .fb-walk__step--3 { --st: var(--ah-neon-pink); }
.fb-step__txt h3 { text-wrap: balance; margin-bottom: 6px; color: var(--ah-paper); font: 900 clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem)/1.05 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; }
.fb-step__txt p { max-width: 34em; color: var(--ah-fog); font-size: 1.04rem; }
.fb-step__txt p + p { margin-top: 6px; }
/* desktop: the number sits beside the heading, and the lines run the full width of the column under both */
@media (min-width: 1000px) {
  .fb-step { column-gap: 14px; row-gap: 0; align-items: center; }
  .fb-step__txt { display: contents; }
  .fb-step__txt h3 { margin-bottom: 0; }
  .fb-step__txt p { grid-column: 1 / -1; }
  .fb-step__txt h3 + p { margin-top: 10px; }
}
/* the shop door at the end of the walk: the neighbor, lit, steps inside */
.fb-walk__door { justify-self: center; width: min(100%, 170px); }
.fb-walk__door svg { display: block; width: 100%; height: auto; overflow: visible; }
.wd-wall { fill: #1a1424; stroke: var(--ah-950); stroke-width: 3; }
.wd-sign { fill: var(--ah-cream); stroke: var(--ah-950); stroke-width: 2.5; }
.wd-sign__t { fill: var(--ah-ink); font: 900 12px/1 var(--ah-display); letter-spacing: 0.14em; text-anchor: middle; }
.wd-frame { fill: var(--ah-cream); stroke: var(--ah-950); stroke-width: 3; }
.wd-glass { fill: #0a1020; stroke: var(--ah-950); stroke-width: 2.5; }
.wd-kick { fill: #d9cfb6; stroke: var(--ah-950); stroke-width: 2; }
.wd-knob { fill: var(--ah-brass); stroke: var(--ah-950); stroke-width: 1.5; }
.wd-walker use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wd-walker__tube { stroke: var(--ah-neon-blue); stroke-width: 7; }
.wd-walker__core { stroke: var(--ah-neon-blue-core); stroke-width: 2.4; }
.wd-walker { filter: drop-shadow(0 0 4px rgba(47, 155, 255, 0.9)); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .fb-walk:not(.is-play) .fb-scr { transform: translateY(30px); opacity: 0; }
  .fb-scr { transition: transform 0.6s var(--ease-back), opacity 0.35s ease; }
  .fb-walk__step--2 .fb-scr { transition-delay: 0.25s; } .fb-walk__step--3 .fb-scr { transition-delay: 0.5s; }
  html.motion .fb-walk:not(.is-play) .wd-walker { transform: translateX(-80px); opacity: 0; }
  .wd-walker { transition: transform 1.4s var(--ease-out) 1s, opacity 0.4s ease 1s; }
}
@media (max-width: 999px) {
  .fb-walk__step { grid-template-columns: 150px minmax(0, 1fr); gap: 18px; justify-items: stretch; }
  .fb-walk__step .fb-scr { width: 150px; }
  .fb-walk__step .fb-step { position: static; grid-template-columns: minmax(0, 1fr); }
  .fb-walk__step .fb-step__n { position: absolute; z-index: 2; left: -8px; top: -16px; width: 42px; height: 42px; font-size: 1.25rem; }
  .fb-walk__sample.ah-sample--left { left: 56px; top: -18px; }
  .fb-scr { aspect-ratio: auto; }
  .fb-scr__skel:not(.fb-scr__skel--b) { display: none; }
  /* the small screens: the play button moves to the corner so the video title stays readable */
  .fb-scr__play { left: auto; right: 6px; top: 6px; margin: 0; }
  .fb-scr__vt { max-width: 76%; }
  .fb-walk__door { width: 150px; }
}
@media (max-width: 420px) {
  .fb-walk__step { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
  .fb-walk__step .fb-scr { width: 124px; padding: 20px 7px 8px; border-radius: 20px; }
  .fb-scr__post { padding: 6px; }
  .fb-scr__vid { height: 58px; }
  .fb-scr__deal b { font-size: 0.86rem; }
  .fb-scr__msg { max-width: 96%; font-size: 0.66rem; }
  .fb-step__txt h3 { font-size: 1.25rem; }
  .fb-step__txt p { font-size: 0.98rem; }
}
/* the smallest phones: the screen sits above its words, so the lines are not squeezed into a ribbon */
@media (max-width: 359px) {
  .fb-walk__step { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fb-walk__step .fb-scr { width: 150px; margin-left: 8px; }
}

/* --------------------------------------------------------------------------
   7. MARKET SHARE: a ship in a bottle on a plain shelf, the lone boat flying
   a Sponsored flag into the open blue water
   -------------------------------------------------------------------------- */
.fb-share__h { font-size: clamp(2.1rem, 1.2rem + 2.3vw, 3.5rem); max-width: 12em; }
.fb-shelf { container-type: inline-size; width: min(100%, 560px); margin: 0 auto; padding-top: 9cqi; }
.fb-bottle { position: relative; margin: 0; }
.fb-bottle__art { position: relative; z-index: 2; display: block; width: 92%; height: auto; margin: 0 auto -2.4cqi; overflow: visible; }
.bt-flag__cloth { fill: var(--ah-sky); stroke: var(--ah-950); stroke-width: 1.5; stroke-linejoin: round; }
/* the condensed display face, so the word stays legible on a phone (about 10px there) */
.bt-flag__t { fill: var(--ah-ink); font: 900 13px/1 var(--ah-display); letter-spacing: 0.05em; text-anchor: middle; }
.bt-cradle { fill: none; stroke: #5a3820; stroke-width: 7; stroke-linecap: round; }
/* the shelf: one wooden plank on two iron brackets */
.fb-shelf__plank {
  position: relative; z-index: 1; display: block; height: max(18px, 4.4cqi); margin: 0 -2cqi;
  border: 2px solid var(--ah-950); border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.28), transparent 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 26px), linear-gradient(180deg, #7a5030, #4a2e18);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45);
}
.fb-shelf__bracket { position: absolute; top: 100%; width: 12px; height: max(34px, 8cqi); border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #5d6a7d, #9aa7b8 45%, #3a4456); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); }
.fb-shelf__bracket::after { content: ""; position: absolute; left: 2px; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--ah-950); }
.fb-shelf__bracket--l { left: 6%; }
.fb-shelf__bracket--r { right: 6%; }
.bt-air { fill: rgba(173, 229, 255, 0.06); }
.bt-blue { fill: #1f6fc4; }
.bt-red { fill: url(#fbRedHatch); }
.bt-split { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; stroke-dasharray: 5 6; }
.bt-waves path { fill: none; stroke: rgba(173, 229, 255, 0.45); stroke-width: 2.4; stroke-linecap: round; }
.bt-boats path { fill: #ffb3b3; stroke: var(--ah-950); stroke-width: 1.2; stroke-linejoin: round; }
.bt-you path { stroke: var(--ah-950); stroke-width: 2.6; stroke-linejoin: round; }
.bt-you__hull { fill: var(--ah-cream); }
.bt-you__sail { fill: #fffdf6; }
.bt-you__jib { fill: var(--ah-sky); }
.bt-you__mast { fill: none; }
.bt-ink { fill: none; stroke: var(--ah-950); stroke-width: 9; stroke-linejoin: round; }
.bt-glass { fill: none; stroke: rgba(226, 238, 255, 0.9); stroke-width: 4; stroke-linejoin: round; }
.bt-shine { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 4; stroke-linecap: round; }
.bt-cork { fill: #a9784a; stroke: var(--ah-950); stroke-width: 2.6; }
.bt-cork-lines { stroke: #6a4428; stroke-width: 1.6; }
.fb-bottle__tags { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3.4cqi; margin: 6.2cqi 10% 0; }
.fb-otag { position: relative; display: grid; gap: 4px; align-content: start; padding: 4cqi 3cqi 3cqi; border: 2px solid var(--ah-950); border-radius: 4px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); rotate: -1deg; }
.fb-otag--blue { rotate: 0.8deg; margin-top: 2cqi; }
.fb-otag::before { content: ""; position: absolute; left: 50%; top: -6.2cqi; width: 2px; height: 6.2cqi; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
.fb-otag::after { content: ""; position: absolute; left: 50%; top: 1.2cqi; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: #090c17; box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 4px var(--ah-brass), 0 0 0 5.5px var(--ah-950); }
.fb-otag__top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 1.4cqi; }
.fb-otag b { font: 900 clamp(1.6rem, 7cqi, 2.4rem)/0.9 var(--ah-display); letter-spacing: 0.01em; }
.fb-otag--red b { color: var(--ah-red-ink); }
.fb-otag--blue b { color: var(--ah-blue-ink); }
.fb-otag i { font: 900 clamp(0.72rem, 3cqi, 0.92rem)/1 var(--ah-display); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.fb-otag small { color: var(--ah-ink-2); font-size: clamp(0.76rem, 2.9cqi, 0.88rem); font-weight: 700; line-height: 1.35; }
.fb-bottle__hand { position: absolute; left: 4cqi; top: -9cqi; z-index: 4; font-size: clamp(0.9rem, 3.4cqi, 1.1rem); color: var(--ah-sky); rotate: -5deg; }
.fb-bottle__hand .ah-hand__arrow { width: 40px; height: 30px; translate: 0 10px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .fb-bottle:not(.is-play) .bt-you { transform: translateX(-60px); }
  .bt-you { transition: transform 1.6s var(--ease-out) 0.6s; }
  .fb-bottle.is-play .bt-you { animation: fb-bob 2.2s ease-in-out 2.3s 1; }
}
@keyframes fb-bob { 50% { transform: translateY(-3px) rotate(-1.5deg); } }

/* --------------------------------------------------------------------------
   8. THE PROVEN PROTOCOL: an open ledger book
   -------------------------------------------------------------------------- */
.fb-proto__head { max-width: 760px; }
.fb-book { max-width: 1120px; margin: 0 auto; rotate: -0.3deg; }
.fb-book__spine { display: none; }
@media (min-width: 1000px) {
  .fb-book {
    background-image: var(--ah-fiber),
      linear-gradient(90deg, transparent 0 46px, rgba(180, 35, 24, 0.25) 46px 48px, transparent 48px calc(50% + 56px), rgba(180, 35, 24, 0.25) calc(50% + 56px) calc(50% + 58px), transparent calc(50% + 58px));
  }
  .fb-book__spine { display: block; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 56px; margin-left: -28px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(11, 20, 36, 0.1) 40%, rgba(11, 20, 36, 0.26) 50%, rgba(11, 20, 36, 0.1) 60%, transparent); }
  .fb-book__list { column-count: 2; column-gap: 76px; }
  .fb-book .ah-entry { break-inside: avoid; }
  .fb-book .ah-entry:nth-child(4) { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   9. THREE WAYS TO MAKE MONEY: a pawn ticket, a price tag and a cash envelope
   hung on the pegboard
   -------------------------------------------------------------------------- */
.fb-ways .ah-wrap { position: relative; z-index: 2; }
.fb-ways__head { margin-bottom: clamp(36px, 5vw, 56px); }
.fb-ways__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 1140px; margin: 0 auto; align-items: start; }
@media (min-width: 900px) { .fb-ways__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px); } }
@media (min-width: 640px) and (max-width: 899px) { .fb-ways__row { max-width: 560px; } }
.fb-way { --hang: 36px; position: relative; padding-top: var(--hang); }
.fb-way--retail { --hang: 74px; }
.fb-way--buy { --hang: 50px; }
@media (max-width: 899px) { .fb-way, .fb-way--retail, .fb-way--buy { --hang: 40px; } }
/* a steel peg hook */
.fb-hook { position: absolute; z-index: 4; left: 50%; top: 0; width: 30px; height: 26px; margin-left: -15px; }
.fb-hook::before { content: ""; position: absolute; left: 50%; top: -6px; width: 16px; height: 16px; margin-left: -8px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); }
.fb-hook::after { content: ""; position: absolute; left: 9px; top: 6px; width: 12px; height: 22px; border: 4px solid #c9d1dc; border-top: 0; border-radius: 0 0 10px 10px; box-shadow: 0 0 0 1px var(--ah-950), inset 0 0 0 1px var(--ah-950); }
/* the small sticker on each item: the kind of ad that grows that line */
.fb-way__ad { position: absolute; z-index: 5; right: 6px; top: calc(var(--hang) + 10px); --tilt: 5deg; }
.fb-way--retail .fb-way__ad { top: calc(var(--hang) + 54px); right: 10px; --tilt: -4deg; }
.fb-way--buy .fb-way__ad { top: calc(var(--hang) + 66px); right: 8px; --tilt: 3deg; }
.fb-way__name { font: 900 clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem)/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ah-ink); }
.fb-way p { color: var(--ah-ink-2); font-size: 1rem; line-height: 1.55; }
.fb-way p + p { margin-top: 8px; }
.fb-way .fb-way__name + p { margin-top: 10px; }
.fb-way__stat.fb-way__stat {
  display: inline-flex; align-items: center; gap: 0.35em; margin-top: 18px; padding: 7px 12px 6px;
  border: 3.5px solid currentColor; border-radius: 9px; color: var(--ah-blue-ink);
  font: 900 clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem)/1 var(--ah-display); letter-spacing: 0.05em; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px var(--stamp-bg, var(--ah-cream)), inset 0 0 0 3.5px currentColor; rotate: -4deg;
  -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px;
}
.fb-way__stat svg { width: 0.9em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fb-way__stat small { font-size: 0.55em; letter-spacing: 0.06em; }
/* each stamp its own ink and angle (doubled class: the base rule above is doubled too) */
.fb-way__stat.fb-way__stat--retail { color: var(--ah-red-ink); rotate: 3deg; }
.fb-way__stat.fb-way__stat--buy {
  display: inline-grid; justify-items: start; gap: 3px; padding: 8px 12px 7px;
  color: var(--ah-ink); --stamp-bg: #d6b37a; font-size: clamp(1.15rem, 0.92rem + 0.55vw, 1.45rem); rotate: -2.5deg;
}
.fb-way__stat-main { white-space: nowrap; }
.fb-way__stat--buy small { font-size: 0.6em; letter-spacing: 0.1em; }

/* Loans: a pawn loan ticket with a tear-off stub */
.fb-loan { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 54px; filter: var(--ah-outline) drop-shadow(6px 6px 0 var(--ah-blue)); rotate: -1deg; }
.fb-loan__main { position: relative; padding: 0 20px 24px; border-radius: 10px 0 0 10px; background-color: var(--ah-cream); background-image: var(--ah-guilloche); background-position: 0 6px; }
.fb-loan__head { display: flex; align-items: center; gap: 10px; margin: 0 -20px 16px; padding: 30px 20px 12px; border-radius: 10px 0 0 0; background: var(--ah-ink); border-bottom: 5px solid var(--ah-blue); }
.fb-loan__head img { width: 42px; height: auto; }
.fb-loan__no { margin-left: auto; color: #ff8a8a; font: 800 0.95rem/1 var(--ah-display); letter-spacing: 0.14em; }
.fb-loan__stub { position: relative; border-left: 2.5px dashed var(--ah-ink); border-radius: 0 10px 10px 0; background-color: var(--ah-cream); background-image: linear-gradient(var(--ah-ink), var(--ah-ink)), linear-gradient(var(--ah-blue), var(--ah-blue)), var(--ah-guilloche); background-size: 100% 74px, 100% 5px, auto; background-position: 0 0, 0 74px, 0 6px; background-repeat: no-repeat, no-repeat, repeat; }
.fb-loan__code { position: absolute; left: 14px; right: 14px; top: 98px; bottom: 18px; background: repeating-linear-gradient(180deg, var(--ah-ink) 0 2px, transparent 2px 4px, var(--ah-ink) 4px 7px, transparent 7px 8px, var(--ah-ink) 8px 9px, transparent 9px 12px); }
/* the eyelet the peg hook goes through */
.fb-loan::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 8px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #0d1527; box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 5px #d6dfea, 0 0 0 7px var(--ah-950); }

/* Retail: a big price tag on a string */
.fb-tag { position: relative; filter: var(--ah-outline) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.6)); rotate: 1.2deg; transform-origin: 50% 0; }
.fb-tag__body { position: relative; padding: 64px 22px 26px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); clip-path: polygon(20% 0, 80% 0, 100% 46px, 100% 100%, 0 100%, 0 46px); }
.fb-tag__hole { position: absolute; z-index: 3; left: 50%; top: 16px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #0d1527; box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 6px var(--ah-brass), 0 0 0 8px var(--ah-950); }
.fb-tag__string { position: absolute; z-index: 4; left: 50%; top: calc(var(--hang, 74px) * -1 + 20px); width: 2.5px; height: calc(var(--hang, 74px) + 6px); margin-left: -1.25px; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
.fb-way--retail .fb-tag__string { top: -56px; height: 82px; }
@media (max-width: 899px) { .fb-way--retail .fb-tag__string { top: -22px; height: 48px; } }
.fb-tag__no, .fb-env__no { display: block; margin-bottom: 8px; color: var(--ah-red-ink); font: 800 0.86rem/1 var(--ah-display); letter-spacing: 0.16em; }

/* Buys: a kraft cash envelope on a binder clip */
.fb-env { position: relative; padding: 72px 22px 26px; border: 2px solid var(--ah-950); border-radius: 6px; background-color: #d6b37a; background-image: var(--ah-fiber), repeating-linear-gradient(90deg, rgba(90, 60, 20, 0.05) 0 2px, transparent 2px 9px); color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-neon-pink); rotate: -0.8deg; }
.fb-env__flap { position: absolute; left: 0; right: 0; top: 0; height: 54px; background: linear-gradient(170deg, #c49a5c, #b88c50); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fb-env__flap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--ah-950), var(--ah-950)) 0 0 / 100% 2px no-repeat; }
.fb-env::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 56px; background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ah-950) calc(50% - 1px), var(--ah-950) calc(50% + 1px), transparent calc(50% + 1.5px)) 0 0 / 50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 1.5px), var(--ah-950) calc(50% - 1px), var(--ah-950) calc(50% + 1px), transparent calc(50% + 1.5px)) 100% 0 / 50% 100% no-repeat; pointer-events: none; }
.fb-env p { color: var(--ah-ink); }
.fb-env .fb-env__no { position: relative; z-index: 3; }
/* the binder clip at the top of the envelope */
.fb-env::after { content: ""; position: absolute; z-index: 3; left: 50%; top: -12px; width: 46px; height: 22px; margin-left: -23px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, #2a3142, #11151d); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }

/* --------------------------------------------------------------------------
   10. PAIRS WITH SHMELLO: the pneumatic tube
   -------------------------------------------------------------------------- */
.fb-pairs__actions { margin-top: 26px; }
.fb-tube { position: relative; display: grid; justify-items: center; width: min(100%, 420px); margin: 0 auto; }
.fb-tube__station {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; width: min(100%, 290px); padding: 18px 14px 16px;
  border: 3px solid var(--ah-950); border-radius: 16px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px), linear-gradient(180deg, #4a5568, #2d3647 60%, #232b39);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.16);
}
.fb-tube__station--top::after, .fb-tube__station--bot::before { content: ""; position: absolute; left: 50%; width: 74px; height: 16px; margin-left: -37px; border: 3px solid var(--ah-950); background: linear-gradient(90deg, var(--ah-brass-lo), var(--ah-brass-hi) 45%, var(--ah-brass)); }
.fb-tube__station--top::after { bottom: -16px; border-radius: 0 0 8px 8px; }
.fb-tube__station--bot::before { top: -16px; border-radius: 8px 8px 0 0; }
/* the top end: a mini of the sponsored ad */
.fb-tube__ad { display: block; width: 168px; padding: 8px 8px 7px; border: 2.5px solid var(--ah-950); border-radius: 12px; background: #fbfaf6; color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-blue); rotate: -3deg; }
.fb-tube__adhead { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fb-tube__adhead .fb-ap__av { width: 24px; height: 24px; font-size: 0.74rem; }
.fb-tube__adwho { display: flex; flex-direction: column; line-height: 1.15; }
.fb-tube__adwho b { font-size: 0.7rem; font-weight: 800; }
.fb-tube__adwho i { color: var(--ah-ink-2); font-style: normal; font-size: 0.58rem; font-weight: 700; }
.fb-tube__adimg { position: relative; display: block; height: 40px; border: 2px solid var(--ah-950); border-radius: 6px; background: radial-gradient(circle, rgba(47, 155, 255, 0.45) 1.2px, transparent 1.7px) 0 0 / 8px 8px, linear-gradient(160deg, #22385f, #0b1424); }
.fb-tube__adimg .fb-ap__play { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
.fb-tube__adimg .fb-ap__play::after { margin: -4.5px 0 0 -2.5px; border-width: 4.5px 0 4.5px 8px; }
.fb-tube__adfoot { display: block; margin-top: 5px; font-size: 0.7rem; }
.fb-tube__sample { top: -14px; right: 4px; }
.fb-tube__plate { 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.12em; text-transform: uppercase; text-align: center; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 var(--ah-blue); }
.fb-tube__station--bot .fb-tube__plate { box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 var(--ah-neon-pink); }
/* the bottom end: Shmello, and the welcome text he sends */
.fb-tube__duo { display: flex; align-items: center; gap: 12px; }
.fb-tube__text { position: relative; max-width: 9.5em; padding: 9px 12px 8px; border: 2px solid var(--ah-950); border-radius: 16px 16px 16px 4px; background: var(--ah-blue); color: var(--ah-ink); font-size: 0.86rem; font-weight: 800; line-height: 1.25; box-shadow: 3px 3px 0 var(--ah-paper); rotate: 2deg; }
.fb-tube__mascot { flex: none; display: block; width: 84px; height: 84px; overflow: hidden; border: 3px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); box-shadow: 0 0 0 4px var(--ah-cream), 0 0 0 6px var(--ah-950), 4px 4px 0 6px var(--ah-neon-pink); rotate: 5deg; }
.fb-tube__mascot img { width: 100%; height: 100%; object-fit: cover; }
.fb-tube__pipe { position: relative; width: 54px; height: clamp(190px, 26vw, 250px); margin: 14px 0; overflow: hidden; }
.fb-tube__glass { position: absolute; inset: 0; z-index: 2; border: 3px solid var(--ah-950); background: linear-gradient(90deg, rgba(173, 229, 255, 0.12), rgba(173, 229, 255, 0.34) 26%, rgba(173, 229, 255, 0.06) 56%, rgba(173, 229, 255, 0.22) 84%, rgba(173, 229, 255, 0.1)); pointer-events: none; }
.fb-tube__glass::after { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 5px; background: rgba(255, 255, 255, 0.45); }
.fb-tube__pipe { background: rgba(11, 21, 40, 0.85); }
.fb-tube__band { position: absolute; z-index: 3; left: -2px; right: -2px; height: 10px; border: 2px solid var(--ah-950); background: linear-gradient(90deg, var(--ah-brass-lo), var(--ah-brass-hi) 45%, var(--ah-brass)); }
.fb-tube__band--1 { top: 22%; } .fb-tube__band--2 { top: 52%; } .fb-tube__band--3 { top: 80%; }
.fb-tube__cap { position: absolute; z-index: 1; left: 9px; right: 9px; height: 46px; border: 2.5px solid var(--ah-950); border-radius: 14px; background: linear-gradient(90deg, var(--ah-brass-lo), var(--ah-brass-hi) 40%, var(--ah-brass) 70%, var(--ah-brass-lo)); }
.fb-tube__cap::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 8px; margin-top: -4px; border: 1.5px solid var(--ah-950); border-radius: 3px; background: var(--ah-cream); }
.fb-tube__cap--1 { top: 8%; } .fb-tube__cap--2 { top: 42%; } .fb-tube__cap--3 { top: 74%; }
@media (prefers-reduced-motion: no-preference) {
  html.js .fb-tube__cap { top: 0; animation: fb-cap 4.5s cubic-bezier(0.55, 0, 0.45, 1) infinite both; }
  html.js .fb-tube__cap--2 { animation-delay: -1.5s; }
  html.js .fb-tube__cap--3 { animation-delay: -3s; }
}
@keyframes fb-cap { 0% { transform: translateY(-60px); } 100% { transform: translateY(clamp(250px, 30vw, 310px)); } }
.fb-tube__pause { position: absolute; z-index: 4; right: 2%; top: 50%; margin-top: -22px; }

/* --------------------------------------------------------------------------
   11. PACKAGES: the kit tickets, with gold bars for the weight class
   -------------------------------------------------------------------------- */
.fb-bars { display: inline-flex; align-items: flex-end; gap: 3px; margin-left: 10px; }
.fb-bars i { width: 17px; height: 10px; border: 1.5px solid var(--ah-950); background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-gold) 55%, var(--ah-brass-lo)); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); }
.fb-pk .ah-pkg__list li.fb-star::before { background: var(--ah-brass-lo); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.8-4.9 4.5 1.3 6.5L12 17l-5.9 3.3 1.3-6.5L2.5 9.3l6.6-.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.8-4.9 4.5 1.3 6.5L12 17l-5.9 3.3 1.3-6.5L2.5 9.3l6.6-.8z'/%3E%3C/svg%3E"); }
.fb-pk__per { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 14px; }
.fb-pk .ah-pkg-note + .ah-pkg-note { margin-top: 14px; }

/* --------------------------------------------------------------------------
   12. WHICH PACKAGE: the PL-50 market scope, rebuilt in steel and brass
   -------------------------------------------------------------------------- */
.fb-dens__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "dz" "foot"; gap: 40px; }
@media (min-width: 1000px) {
  .fb-dens__grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); grid-template-areas: "copy dz" "foot dz"; align-items: start; column-gap: clamp(40px, 5vw, 80px); row-gap: 28px; }
  .fb-dens__copy { align-self: end; }
}
.fb-dens__copy { grid-area: copy; }
.fb-dens__copy .ah-h2 { margin-bottom: 20px; }
.fb-dens__copy p.fb-dens__lead { color: var(--ah-paper); font-size: 1.22rem; font-weight: 600; }
.fb-dens__foot { grid-area: foot; max-width: 32em; color: var(--ah-fog); font-size: 1.08rem; }
.fb-dens__foot p + p { margin-top: 6px; }
.fb-dz { grid-area: dz; position: relative; width: min(100%, 600px); margin: 0 auto; }
.fb-dz__chassis {
  position: relative; padding: 24px clamp(14px, 3vw, 26px) 22px;
  border: 3px solid var(--ah-950); border-radius: 20px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px), linear-gradient(180deg, #3a4456, #232b39 30%, #1a202c);
  box-shadow: 8px 8px 0 var(--ah-blue), inset 0 2px 0 rgba(255, 255, 255, 0.16);
  color: var(--ah-paper);
}
.fb-dz__screw { position: absolute; z-index: 2; width: 13px; height: 13px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ah-brass-hi), var(--ah-brass) 60%, var(--ah-brass-lo)); }
.fb-dz__screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 2px; margin-top: -1px; background: var(--ah-950); rotate: 24deg; }
.fb-dz__screw--1 { top: 10px; left: 10px; } .fb-dz__screw--2 { top: 10px; right: 10px; } .fb-dz__screw--3 { bottom: 10px; left: 10px; } .fb-dz__screw--4 { bottom: 10px; right: 10px; }
.fb-dz__screw--2::after { rotate: -38deg; } .fb-dz__screw--3::after { rotate: 66deg; }
.fb-dz__head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; }
.fb-dz__etch { color: #cfd7e1; font: 800 0.82rem/1 var(--ah-mono); letter-spacing: 0.32em; text-indent: 0.32em; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08); }
.fb-dz__placard { padding: 6px 12px 5px; border: 2px solid var(--ah-950); border-radius: 3px; background: var(--ah-cream); color: var(--ah-ink); font: 800 0.68rem/1.3 var(--ah-mono); letter-spacing: 0.12em; text-align: center; box-shadow: 2px 2px 0 var(--ah-950); rotate: -1deg; }
.fb-dz__scope { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; }
.fb-dz__bezel { position: absolute; inset: 0; border: 3px solid var(--ah-950); border-radius: 50%; background: conic-gradient(from 130deg, #e3e9f0, #6f7c90 22%, #cfd7e1 48%, #5d6a7d 72%, #e3e9f0); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55); }
.fb-dz__glass { position: absolute; inset: 14px; overflow: hidden; border: 3px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 50% 42%, #0b1a30 0%, #060c18 60%, #04080f 100%); }
.fb-dz__glass svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fb-dz__sweep { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, rgba(47, 155, 255, 0) 0deg, rgba(47, 155, 255, 0) 286deg, rgba(47, 155, 255, 0.12) 322deg, rgba(110, 182, 255, 0.3) 357deg, rgba(173, 229, 255, 0.55) 360deg); transform: rotate(211deg); }
@media (prefers-reduced-motion: no-preference) {
  html.js .fb-dz__sweep { animation: fb-sweep 6s linear infinite; }
  html.js .fb-dz__sec { animation: fb-flare 6s linear infinite; }
}
@keyframes fb-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fb-flare { 0% { opacity: 1; } 12% { opacity: 0.98; } 40% { opacity: 0.58; } 100% { opacity: 0.55; } }
.fb-dz__scan { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(173, 229, 255, 0.05) 0 1px, transparent 1px 4px); }
.fb-dz__glare { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(118deg, transparent 0 22%, rgba(200, 230, 255, 0.08) 22% 30%, transparent 30% 100%); }
.fb-dz__grid line { stroke: rgba(173, 229, 255, 0.09); stroke-width: 1; }
.fb-dz__grid line.fb-dz__art { stroke: rgba(173, 229, 255, 0.17); stroke-width: 1.4; }
.fb-dz__hwy { fill: none; stroke: rgba(173, 229, 255, 0.14); stroke-width: 2.4; }
.fb-dz__ring { fill: none; stroke: rgba(173, 229, 255, 0.26); stroke-width: 1; stroke-dasharray: 3 5; }
.fb-dz__rlab { fill: rgba(173, 229, 255, 0.6); font: 700 8px/1 var(--ah-mono); letter-spacing: 0.14em; text-anchor: middle; }
.fb-dz__r50 { fill: rgba(47, 155, 255, 0.04); stroke: var(--ah-neon-blue); stroke-width: 2; }
.fb-dz__tag circle { fill: var(--ah-neon-sky); }
.fb-dz__tag path { stroke: rgba(143, 214, 255, 0.75); stroke-width: 1.2; }
.fb-dz__tag text { fill: var(--ah-neon-sky); font: 800 11px/1 var(--ah-mono); letter-spacing: 0.2em; }
.fb-dz__pin path { fill: #ffd98c; stroke: var(--ah-950); stroke-width: 1.5; }
.fb-dz__pin-halo { fill: none; stroke: rgba(255, 217, 140, 0.5); stroke-width: 1.2; }
.fb-dz__pin text { fill: #ffd98c; font: 800 9.5px/1 var(--ah-mono); letter-spacing: 0.22em; text-anchor: middle; }
.fb-dz__layer { opacity: 0; transition: opacity 0.8s ease; }
.fb-dz__layer.is-on { opacity: 1; }
.fb-dz__sec { opacity: 0.85; }
.fb-dz__layer:not(.is-on) .fb-dz__sec { animation-play-state: paused; }
.fb-dz__pause { position: absolute; z-index: 4; right: -4px; bottom: 4px; }
.fb-dz__panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 2px solid var(--ah-950); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.fb-dz__ro-label { display: block; margin-bottom: 8px; color: #cfd7e1; font: 800 0.68rem/1 var(--ah-mono); letter-spacing: 0.22em; }
.fb-dz__seg { position: relative; display: inline-block; padding: 9px 12px 8px; border: 2px solid var(--ah-950); border-radius: 8px; background: #04060b; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8), 3px 3px 0 rgba(0, 0, 0, 0.5); color: #a9e2ff; font: 700 clamp(1.7rem, 5vw, 2.4rem)/1 var(--ah-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-shadow: 0 0 6px rgba(47, 155, 255, 0.9); }
.fb-dz__seg-ghost { position: absolute; left: 12px; top: 9px; color: rgba(169, 226, 255, 0.08); text-shadow: none; user-select: none; }
.fb-dz__seg-val { position: relative; display: inline-block; min-width: 7ch; text-align: right; }
.fb-dz__math { margin-top: 10px; color: #cfd7e1; font: 700 0.72rem/1.4 var(--ah-mono); letter-spacing: 0.1em; }
.fb-dz__math b { color: #a9e2ff; font-weight: 800; }
.fb-dz__knobwrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fb-dz__dial { position: relative; display: grid; place-items: center; width: 128px; height: 120px; }
.fb-dz__tick { position: absolute; left: 50%; top: 50%; width: 3px; height: 9px; margin: -4.5px 0 0 -1.5px; border-radius: 1px; background: #cfd7e1; transform: rotate(var(--dza)) translateY(-56px); }
.fb-dz__knob { position: relative; width: 94px; height: 94px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.fb-dz__knob:active { cursor: grabbing; }
.fb-dz__knob:focus-visible { outline-offset: 5px; }
.fb-dz__face { position: absolute; inset: 0; display: block; border: 3px solid var(--ah-950); border-radius: 50%; background: repeating-conic-gradient(#5d6a7d 0deg 5deg, #cfd7e1 5deg 10deg); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6); transition: transform 0.5s cubic-bezier(0.3, 1.65, 0.45, 1); }
.fb-dz__face::before { content: ""; position: absolute; inset: 10px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 38% 30%, #f2f5f9, #9aa7b8 55%, #6f7c90); }
.fb-dz__face::after { content: ""; position: absolute; left: 50%; top: 12px; width: 7px; height: 20px; margin-left: -3.5px; border: 1.5px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass)); }
.fb-dz__knob.is-drag .fb-dz__face { transition: none; }
.fb-dz__dets { display: flex; justify-content: center; gap: 4px; }
.fb-dz__det { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 60px; min-height: 44px; padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fb-dz__det b { color: #cfd7e1; font: 800 0.88rem/1 var(--ah-mono); letter-spacing: 0.04em; transition: color 0.3s ease; }
.fb-dz__det small { color: var(--ah-mute); font: 700 0.6rem/1 var(--ah-mono); letter-spacing: 0.16em; }
.fb-dz__det:hover b { color: var(--ah-paper); }
.fb-dz__det.is-cur b { color: var(--dzt); text-shadow: 0 0 10px var(--dzg); }
.fb-dz--t0 { --dzc: #35d07f; --dzt: #6ff0a8; --dzg: rgba(53, 208, 127, 0.45); }
.fb-dz--t1 { --dzc: var(--ah-neon-blue); --dzt: var(--ah-neon-sky); --dzg: rgba(47, 155, 255, 0.5); }
.fb-dz--t2 { --dzc: var(--ah-gold); --dzt: #ffd98c; --dzg: rgba(242, 182, 50, 0.45); }
.fb-dz__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 12px; background: #11151d; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.fb-dz__tier { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 12px 6px 11px; cursor: pointer; opacity: 0.8; transition: opacity 0.4s ease, background-color 0.4s ease; -webkit-tap-highlight-color: transparent; }
.fb-dz__tier + .fb-dz__tier { border-left: 2px solid var(--ah-950); }
.fb-dz__tier:hover:not(.is-on) { opacity: 0.92; }
.fb-dz__tier:focus-visible { outline-offset: -4px; }
.fb-dz__tier.is-on { opacity: 1; background: rgba(255, 255, 255, 0.04); }
.fb-dz__lamp { width: 9px; height: 9px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: #3a4456; transition: background-color 0.4s, box-shadow 0.4s; }
.fb-dz__tier.is-on .fb-dz__lamp { background: var(--dzc); box-shadow: 0 0 8px var(--dzc); }
.fb-dz__tn { color: #cfd7e1; font: 800 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.14em; white-space: nowrap; transition: color 0.4s; }
.fb-dz__tier.is-on .fb-dz__tn { color: var(--dzt); }
.fb-dz__tr { color: var(--ah-mute); font: 700 0.62rem/1.2 var(--ah-mono); letter-spacing: 0.12em; white-space: nowrap; }
.fb-dz__tp { color: var(--ah-paper); font: 700 0.76rem/1.2 var(--ah-mono); white-space: nowrap; }
/* phones: a shorter scope, so the readout, the knob and the tier lamps share one screen with it */
@media (max-width: 520px) {
  .fb-dz__chassis { padding: 18px 12px 14px; border-radius: 16px; }
  .fb-dz__head { gap: 8px; margin-bottom: 12px; }
  .fb-dz__etch { font-size: 0.74rem; letter-spacing: 0.26em; text-indent: 0.26em; }
  .fb-dz__placard { font-size: 0.6rem; letter-spacing: 0.08em; }
  .fb-dz__scope { width: min(100%, 236px); }
  .fb-dz__glass { inset: 9px; }
  .fb-dz__panel { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; padding-top: 12px; }
  .fb-dz__ro-label { margin-bottom: 6px; font-size: 0.6rem; letter-spacing: 0.16em; }
  .fb-dz__seg { padding: 7px 9px 6px; font-size: 1.45rem; }
  .fb-dz__seg-ghost { left: 9px; top: 7px; }
  .fb-dz__math { margin-top: 8px; font-size: 0.62rem; letter-spacing: 0.06em; }
  .fb-dz__dial { width: 96px; height: 92px; }
  .fb-dz__knob { width: 72px; height: 72px; }
  .fb-dz__tick { transform: rotate(var(--dza)) translateY(-44px); }
  .fb-dz__face::before { inset: 8px; }
  .fb-dz__face::after { top: 9px; height: 15px; }
  .fb-dz__det { min-width: 44px; padding: 4px 2px; }
  .fb-dz__det b { font-size: 0.78rem; }
  .fb-dz__legend { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .fb-dz__tier { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 9px 12px; }
  .fb-dz__tier + .fb-dz__tier { border-left: 0; border-top: 2px solid var(--ah-950); }
  .fb-dz__tr { margin-left: auto; }
  .fb-dz__pause { right: -6px; bottom: -6px; }
}

/* --------------------------------------------------------------------------
   13. THE NON-COMPETE: a padlock on a tag, and a take-a-number ticket
   -------------------------------------------------------------------------- */
.fb-nc__scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: 60px; max-width: 900px; margin: 0 auto; align-items: start; }
@media (min-width: 820px) { .fb-nc__scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); } .fb-nc__item--take { margin-top: 40px; } }
.fb-nc__item { position: relative; display: grid; justify-items: center; }
.fb-padlock { position: relative; z-index: 3; width: 108px; height: auto; overflow: visible; filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.55)); }
.pl-shackle { fill: none; stroke: var(--ah-950); stroke-width: 17; stroke-linecap: round; }
.pl-shackle-hi { fill: none; stroke: #cfd7e1; stroke-width: 10; stroke-linecap: round; }
.pl-body { fill: var(--ah-brass); stroke: var(--ah-950); stroke-width: 3.5; }
.pl-shine { stroke: var(--ah-brass-hi); stroke-width: 5; stroke-linecap: round; }
.pl-key { fill: var(--ah-950); }
.fb-nc__string { position: relative; z-index: 2; width: 2.5px; height: 30px; margin-top: -6px; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
.fb-nc__tag, .fb-nc__ticket { position: relative; width: min(100%, 380px); color: var(--ah-ink); text-align: center; }
.fb-nc__tag { padding: 40px 24px 26px; border: 2px solid var(--ah-950); border-radius: 8px; background-color: var(--ah-cream); background-image: var(--ah-fiber); box-shadow: 6px 6px 0 var(--ah-blue); rotate: -0.9deg; }
.fb-nc__tag::before { content: ""; position: absolute; left: 50%; top: 12px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #0b1226; box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 5px var(--ah-brass), 0 0 0 7px var(--ah-950); }
.fb-nc__big { color: var(--ah-ink); font: 900 clamp(2.5rem, 1.7rem + 2.4vw, 3.5rem)/0.95 var(--ah-display); letter-spacing: 0.01em; text-shadow: 0.05em 0.05em 0 var(--ah-blue); }
.fb-nc__rule { display: inline-block; margin: 12px 0 14px; padding: 5px 12px 4px; background: var(--ah-ink); color: var(--ah-sky); font: 900 1.05rem/1.1 var(--ah-display); letter-spacing: 0.12em; text-transform: uppercase; rotate: -1.5deg; clip-path: polygon(0 8%, 3px 30%, 0 52%, 4px 76%, 0 100%, 100% 100%, calc(100% - 4px) 72%, 100% 48%, calc(100% - 3px) 24%, 100% 0); }
.fb-nc__p { color: var(--ah-ink-2); font-size: 1.02rem; line-height: 1.55; }
/* the take-a-number dispenser and the ticket coming out of it */
.fb-take { position: relative; z-index: 3; width: 168px; height: 112px; }
.fb-take__body { position: absolute; left: 0; right: 0; top: 0; height: 96px; border: 3px solid var(--ah-950); border-radius: 50px 50px 16px 16px; background: linear-gradient(180deg, #ff6f9c, #e0306f 60%, #b8205a); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.35); }
.fb-take__sign { position: absolute; left: 50%; top: 22px; translate: -50% 0; padding: 4px 9px 3px; border: 2px solid var(--ah-950); border-radius: 3px; background: var(--ah-cream); color: var(--ah-ink); font: 800 0.66rem/1.15 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.fb-take__slot { position: absolute; left: 22%; right: 22%; bottom: 10px; height: 9px; border: 2px solid var(--ah-950); border-radius: 4px; background: #2a0614; }
.fb-take__post { position: absolute; left: 50%; bottom: 0; width: 20px; height: 18px; margin-left: -10px; border: 3px solid var(--ah-950); border-top: 0; background: linear-gradient(90deg, #6f7c90, #cfd7e1, #6f7c90); }
.fb-nc__ticket {
  margin-top: -20px; padding: 34px 24px 26px;
  border: 2px solid var(--ah-950); border-radius: 4px;
  background-color: #fbf9f2; background-image: linear-gradient(90deg, var(--ah-ink) 0 50%, transparent 50%), var(--ah-fiber);
  background-size: 10px 2px, auto; background-position: 0 18px, 0 0; background-repeat: repeat-x, repeat;
  box-shadow: 6px 6px 0 var(--ah-neon-pink); rotate: 0.9deg;
}
.fb-nc__no { display: block; margin-bottom: 6px; color: var(--ah-red-ink); font: 900 1.4rem/1 var(--ah-display); letter-spacing: 0.1em; }
.fb-nc__note { max-width: 40em; margin: clamp(40px, 5vw, 60px) auto 0; text-align: center; color: var(--ah-fog); font-size: 1.02rem; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .fb-nc__scene:not(.is-play) .fb-nc__ticket { transform: translateY(-40px); opacity: 0; }
  .fb-nc__ticket { transition: transform 0.8s var(--ease-back) 0.3s, opacity 0.3s 0.3s; }
  html.motion .fb-nc__scene:not(.is-play) .fb-padlock .pl-shackle, html.motion .fb-nc__scene:not(.is-play) .fb-padlock .pl-shackle-hi { transform: translateY(-14px); }
  .fb-padlock .pl-shackle, .fb-padlock .pl-shackle-hi { transition: transform 0.35s var(--ease-snap) 0.5s; }
}

/* --------------------------------------------------------------------------
   14. THE TERRITORY MAP: the backlit board, 81 pins, the zone status column
   -------------------------------------------------------------------------- */
.fb-terr__head { max-width: 820px; }
.fb-terr__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
@media (min-width: 1060px) { .fb-terr__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; } }
.fb-lg-open { color: var(--ah-neon-sky); font-weight: 800; }
.fb-lg-taken { color: var(--ah-hot); font-weight: 800; }
.fb-map { max-width: none; }
.fb-map .ah-map__screen { overflow: visible; }
.fb-map__plot { position: relative; }
.fb-map__img { display: block; width: 100%; height: auto; filter: brightness(2.3) saturate(1.25); }
.fb-pin {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); display: grid; place-items: center;
  width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; border-radius: 50%; background: none; /* a 24px tap target; the dot keeps its size */
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.fb-pin__dot { position: relative; display: grid; place-items: center; width: 12px; height: 12px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-blue); box-shadow: 0 0 0 3px rgba(47, 155, 255, 0.25), 0 0 8px 1px rgba(47, 155, 255, 0.7); transition: transform 0.2s var(--ease-back); }
.fb-pin--open .fb-pin__dot::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--ah-neon-sky); border-radius: 50%; opacity: 0; pointer-events: none; }
.fb-pin--taken { z-index: 3; }
.fb-pin--taken .fb-pin__dot { width: 19px; height: 19px; background: var(--ah-neon-pink); box-shadow: 0 0 0 3px rgba(255, 63, 134, 0.28), 0 0 9px 1px rgba(255, 63, 134, 0.65); }
.fb-pin__dot svg { width: 11px; height: 11px; fill: none; stroke: var(--ah-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fb-pin:hover, .fb-pin:focus-visible, .fb-pin.is-active { z-index: 7; }
.fb-pin:hover .fb-pin__dot, .fb-pin:focus-visible .fb-pin__dot, .fb-pin.is-active .fb-pin__dot { transform: scale(1.35); }
.fb-pin:focus-visible { outline-offset: 1px; }
.fb-pin__label {
  position: absolute; left: 50%; bottom: calc(100% + 4px); z-index: 2; translate: -50% 4px; opacity: 0; pointer-events: none;
  padding: 5px 9px 4px; border: 2px solid var(--ah-950); border-radius: 5px; background: var(--ah-cream); color: var(--ah-ink);
  font: 800 0.78rem/1.2 var(--ah-body); white-space: nowrap; text-align: center; box-shadow: 2px 2px 0 var(--ah-950);
  transition: opacity 0.18s, translate 0.18s var(--ease-out);
}
.fb-pin__label b { display: block; margin-top: 2px; color: var(--ah-blue-ink); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; }
.fb-pin--taken .fb-pin__label b { color: var(--ah-red-ink); }
.fb-pin:hover .fb-pin__label, .fb-pin:focus-visible .fb-pin__label { opacity: 1; translate: -50% 0; }
.fb-pin.is-edge-l .fb-pin__label { left: 0; translate: -10px 4px; }
.fb-pin.is-edge-l:hover .fb-pin__label, .fb-pin.is-edge-l:focus-visible .fb-pin__label { translate: -10px 0; }
.fb-pin.is-edge-t .fb-pin__label { bottom: auto; top: calc(100% + 4px); }
.fb-pin.is-edge-r .fb-pin__label { left: auto; right: 0; translate: 10px 4px; }
.fb-pin.is-edge-r:hover .fb-pin__label, .fb-pin.is-edge-r:focus-visible .fb-pin__label { translate: 10px 0; }
@media (prefers-reduced-motion: no-preference) {
  .fb-map.is-play .fb-pin--open .fb-pin__dot::after { animation: fb-ping 1.8s ease-out 2; animation-delay: calc(var(--i, 0) * 30ms); }
  .fb-pin--open:hover .fb-pin__dot::after, .fb-pin--open:focus-visible .fb-pin__dot::after { animation: fb-ping 1.2s ease-out 2; }
}
@keyframes fb-ping { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.8); } }
/* the confirm card on the board is the kit's floating .ah-pop (AH.pop in theme.js; HANDOFF: never straight to the calendar) */
.fb-find { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; }
.fb-find__label { color: var(--ah-sky); font: 800 0.82rem/1.2 var(--ah-body); letter-spacing: 0.14em; text-transform: uppercase; }
.fb-find__select {
  flex: 1 1 220px; max-width: 360px; min-height: 48px; padding: 0 44px 0 16px;
  border: 2px solid var(--ah-950); border-radius: 999px; background: var(--ah-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.8L6 6.2l4.5-4.4' fill='none' stroke='%230b1424' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 14px 10px no-repeat;
  color: var(--ah-ink); font: 700 1rem/1.2 var(--ah-body); box-shadow: 3px 3px 0 var(--ah-blue);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.fb-find__select:disabled { opacity: 0.6; cursor: default; }
html:not(.js) .fb-find { display: none; }
.fb-side { display: grid; gap: 24px; }
@media (min-width: 640px) and (max-width: 1059px) { .fb-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .fb-side__count { grid-column: 1 / -1; } }
.fb-side__count { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.fb-mc { display: grid; justify-items: center; gap: 6px; padding: 14px 10px 12px; border: 3px solid var(--ah-950); border-radius: 12px; background: linear-gradient(180deg, #2d3647, #1a202c); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); text-align: center; }
.fb-mc b { min-width: 2.6ch; padding: 4px 10px 2px; border: 2px solid var(--ah-950); border-radius: 6px; background: #04060b; font: 900 2.5rem/1 var(--ah-display); letter-spacing: 0.04em; }
.fb-mc--taken b { color: #ff8fb8; text-shadow: 0 0 8px rgba(255, 63, 134, 0.85); }
.fb-mc--open b { color: #a9e2ff; text-shadow: 0 0 8px rgba(47, 155, 255, 0.9); }
.fb-mc span { color: #cfd7e1; font: 800 0.7rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.fb-side__legend { padding: 20px 20px 22px; 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: 6px 6px 0 var(--ah-blue); }
.fb-ml { display: flex; align-items: center; gap: 10px; color: var(--ah-ink); font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.fb-ml + .fb-ml { margin-top: 10px; }
.fb-ml__sw { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid var(--ah-950); border-radius: 50%; }
.fb-ml__sw--taken { background: var(--ah-neon-pink); }
.fb-ml__sw--taken svg { width: 12px; height: 12px; fill: none; stroke: var(--ah-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fb-ml__sw--open { width: 16px; height: 16px; margin: 0 3px; background: var(--ah-neon-blue); }
.fb-ml__note { margin-top: 14px; color: var(--ah-ink-2); font-size: 0.92rem; line-height: 1.5; }
.fb-side__cta { width: 100%; margin-top: 18px; }
.fb-side__taken { padding: 18px 16px 18px; border: 3px solid var(--ah-950); border-radius: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px), linear-gradient(180deg, #2d3647, #1a202c); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55); }
.fb-side__taken h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #ff8fb8; font: 800 0.78rem/1.2 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.fb-side__taken h3 svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fb-side__taken ul { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.fb-side__taken li { position: relative; padding: 4px 10px 4px 18px; border: 1.5px solid var(--ah-950); border-radius: 3px 10px 10px 3px; background: var(--ah-cream); color: var(--ah-ink); font-size: 0.8rem; font-weight: 700; line-height: 1.25; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
.fb-side__taken li::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #1a202c; box-shadow: 0 0 0 1px var(--ah-950); }
.fb-side__taken li:nth-child(3n+1) { rotate: -1deg; } .fb-side__taken li:nth-child(3n+2) { rotate: 0.8deg; }

/* --------------------------------------------------------------------------
   15. THE RECEIPTS: a cash register printing its tape (the accordion)
   -------------------------------------------------------------------------- */
.fb-rc__grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "reg" "honest"; gap: 36px; }
@media (min-width: 1000px) {
  /* register on the left: the booking band right after this one puts its copy on the left */
  .fb-rc__grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); grid-template-areas: "reg head" "reg honest"; align-items: start; column-gap: clamp(40px, 6vw, 96px); row-gap: 30px; }
  .fb-rc__head { align-self: end; }
}
.fb-rc__head { grid-area: head; }
.fb-rc__head .ah-h2 { margin: 0; }
.fb-rc__honest { grid-area: honest; margin: 0; }
@media (max-width: 999px) { .fb-rc__honest { margin: 12px auto 0; } }
.fb-reg { grid-area: reg; position: relative; width: min(100%, 580px); margin: 0 auto; }
.fb-reg__top {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px 30px;
  border: 3px solid var(--ah-950); border-radius: 20px 20px 8px 8px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px), linear-gradient(180deg, #46526e, #2a3142 60%, #232b39);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.16);
}
.fb-reg__lcd { padding: 9px 12px 8px; border: 2px solid var(--ah-950); border-radius: 6px; background: #04060b; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8); }
.fb-reg__lcd b { color: #a9e2ff; font: 700 1.05rem/1 var(--ah-mono); letter-spacing: 0.14em; text-shadow: 0 0 6px rgba(47, 155, 255, 0.85); white-space: nowrap; }
.fb-reg__keys { display: grid; grid-template-columns: repeat(4, 22px); gap: 5px; }
.fb-reg__keys i { height: 16px; border: 1.5px solid var(--ah-950); border-radius: 3px; background: var(--ah-cream); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.fb-reg__keys i:nth-child(4) { background: var(--ah-neon-pink); } .fb-reg__keys i:nth-child(8) { background: var(--ah-blue); }
.fb-reg__slot { position: absolute; left: 9%; right: 9%; bottom: 9px; height: 10px; border: 2px solid var(--ah-950); border-radius: 5px; background: #04060b; }
.fb-reg__tape {
  position: relative; padding: 30px clamp(14px, 3.4vw, 26px) 34px;
  background-color: #fbf9f2; background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(11, 20, 36, 0.035) 23px 24px);
  color: var(--ah-ink);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 8px) no-repeat, var(--ah-zigzag) 0 100% / 16px 9px repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 8px) no-repeat, var(--ah-zigzag) 0 100% / 16px 9px repeat-x;
}
.fb-reg__wrap { position: relative; z-index: 1; width: 82%; margin: -16px auto 0; filter: var(--ah-outline) drop-shadow(7px 7px 0 rgba(0, 0, 0, 0.55)); }
.fb-acc { border-bottom: 2px dashed rgba(11, 20, 36, 0.3); }
.fb-acc__h { margin: 0; }
.fb-acc__head {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 2px; border: 0; background: none;
  color: var(--ah-ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fb-acc__num { flex: none; min-width: 4.4ch; color: var(--ah-ink); font: 900 clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem)/1 var(--ah-display); letter-spacing: 0.01em; text-shadow: 0.05em 0.05em 0 var(--ah-blue); }
.fb-acc__num small { margin-left: 2px; font-size: 0.45em; letter-spacing: 0.04em; text-shadow: none; }
.fb-acc__label { flex: 1 1 auto; min-width: 0; color: var(--ah-ink-2); font: 800 0.86rem/1.25 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.fb-acc__arrow { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 2px solid var(--ah-ink); border-radius: 50%; background: var(--ah-sky); color: var(--ah-ink); font: 800 1.05rem/1 var(--ah-body); transition: rotate 0.3s var(--ease-out), background-color 0.2s; }
.fb-acc__head:hover .fb-acc__arrow { background: #d7f1ff; }
.fb-acc.is-open .fb-acc__arrow { rotate: 90deg; background: var(--ah-blue); }
.fb-acc.is-open .fb-acc__num { color: var(--ah-blue-ink); }
.fb-acc__body { padding: 0 2px 18px; }
.fb-acc__body p { color: var(--ah-ink-2); font-size: 0.98rem; font-weight: 600; line-height: 1.55; }
.fb-acc__body p + p { margin-top: 8px; }
.fb-acc__body[hidden] { display: none; }
.fb-reg__foot { display: block; height: 30px; margin: 18px 18% 0; background: repeating-linear-gradient(90deg, var(--ah-ink) 0 2px, transparent 2px 4px, var(--ah-ink) 4px 7px, transparent 7px 8px, var(--ah-ink) 8px 9px, transparent 9px 12px); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .fb-acc__body.is-printing { animation: fb-print 0.7s steps(8) both; }
}
@keyframes fb-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* --------------------------------------------------------------------------
   16. BOOKING BAND: the ad's own lead form slides up (the band's words and
   its Apply button stay as they are)
   -------------------------------------------------------------------------- */
.fb-book__actions { margin-top: 28px; }
@media (min-width: 900px) { .fb-bk .ah-book__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); } }
.fb-lead { position: relative; display: grid; justify-items: center; width: min(100%, 330px); margin: 0 auto; padding-top: 4px; }
.fb-lead__bubble {
  position: relative; z-index: 3; justify-self: start; max-width: 17em; margin: 0 0 22px 4px; padding: 11px 15px 10px;
  border: 2px solid var(--ah-950); border-radius: 16px 16px 16px 4px; background: var(--ah-cream); color: var(--ah-ink);
  font-size: 0.98rem; font-weight: 800; line-height: 1.35; box-shadow: 4px 4px 0 var(--ah-blue); rotate: -1deg;
}
.fb-lead__bubble::after { content: ""; position: absolute; left: 18px; top: 100%; width: 14px; height: 12px; margin-top: -1px; background: var(--ah-cream); border-left: 2px solid var(--ah-950); clip-path: polygon(0 0, 100% 0, 0 100%); box-shadow: inset 2px 0 0 var(--ah-950); }
.fb-ap--lead { width: min(100%, 300px); padding: 14px 13px 0; border-radius: 30px; rotate: 1.5deg; box-shadow: 0 0 0 6px #232b39, 0 0 0 8px var(--ah-950), 9px 9px 0 8px var(--ah-blue); }
.fb-ap--lead .fb-ap__notch { width: 70px; margin-bottom: 12px; }
.fb-lead__body { font-size: 0.86rem; }
.fb-lead__img { height: 84px; }
.fb-lead__foot { margin-bottom: 10px; }
.fb-lead__cta {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 -1px 12px; padding: 8px 14px;
  border: 2px solid var(--ah-950); border-radius: 8px; background: #e9edf3; color: var(--ah-ink); font-size: 0.92rem; font-weight: 800; text-decoration: none;
}
.fb-lead__cta:hover { background: #dfe6ef; }
.fb-lead__cta:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 2px; }
.fb-lead__cta span { font-size: 1.4rem; line-height: 1; }
/* the lead form: a cream sheet from the bottom of the screen */
.fb-lead__sheet {
  position: relative; display: grid; gap: 10px; margin: 0 -13px; padding: 12px 18px 22px;
  border-top: 2.5px solid var(--ah-950); border-radius: 22px 22px 0 0;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 0 -5px 0 rgba(11, 20, 36, 0.12);
}
.fb-lead__grab { justify-self: center; width: 46px; height: 5px; border-radius: 999px; background: rgba(11, 20, 36, 0.3); }
.fb-lead__h { margin: 2px 0 0; color: var(--ah-ink); font: 900 1.5rem/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.fb-lead__p { color: var(--ah-ink-2); font-size: 0.95rem; font-weight: 600; line-height: 1.45; }
.fb-lead__btn { width: 100%; margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .fb-lead:not(.is-play) .fb-lead__sheet { transform: translateY(105%); }
  .fb-lead__sheet { transition: transform 0.7s var(--ease-out) 0.9s; }
  .fb-lead.is-play .fb-lead__cta { animation: fb-press 0.5s ease 0.45s both; }
}
@keyframes fb-press { 50% { background: #c9d5e4; transform: scale(0.97); } }

/* --------------------------------------------------------------------------
   17. The ad interrupting the scroll, in the flow of the page (phones, tablets
   and desktops up to 1679px; wider screens carry it in the side gutter)
   -------------------------------------------------------------------------- */
.fb-intr { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 22px; width: fit-content; max-width: 100%; margin: clamp(52px, 6vw, 80px) 0 0 auto; }
.fb-intr--ways { margin-left: 0; margin-right: auto; flex-direction: row-reverse; }
.fb-intr__bubble {
  position: relative; max-width: 15em; padding: 12px 16px 11px; border: 2px solid var(--ah-950); border-radius: 16px 16px 4px 16px;
  background: var(--ah-cream); color: var(--ah-ink); font-size: 1rem; font-weight: 800; line-height: 1.35; box-shadow: 4px 4px 0 var(--ah-blue); rotate: -1.5deg;
}
.fb-intr__bubble::after { content: ""; position: absolute; right: -14px; bottom: 10px; width: 14px; height: 14px; background: var(--ah-cream); border-top: 2px solid var(--ah-950); clip-path: polygon(0 0, 100% 0, 0 100%); box-shadow: inset 0 2px 0 var(--ah-950); }
.fb-intr--ways .fb-intr__bubble { border-radius: 16px 16px 16px 4px; rotate: 1.5deg; }
.fb-intr--ways .fb-intr__bubble::after { right: auto; left: -14px; clip-path: polygon(0 0, 100% 0, 100% 100%); box-shadow: inset 0 2px 0 var(--ah-950); }
.fb-intr__post {
  position: relative; flex: none; display: block; width: 300px; padding: 14px 14px 12px;
  border: 2.5px solid var(--ah-950); border-radius: 14px; background: #fbfaf6; color: var(--ah-ink); text-align: left; font: inherit;
  box-shadow: 6px 6px 0 var(--ah-blue); rotate: 1.2deg;
}
.fb-intr--ways .fb-intr__post { rotate: -1.2deg; box-shadow: 6px 6px 0 var(--ah-neon-pink); }
.fb-intr__post .ah-sample { top: -12px; right: 12px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .fb-intr:not(.is-play) .fb-intr__post { transform: translateX(80px) rotate(5deg); opacity: 0; }
  html.motion .fb-intr--ways:not(.is-play) .fb-intr__post { transform: translateX(-80px) rotate(-5deg); }
  html.motion .fb-intr:not(.is-play) .fb-intr__bubble { transform: scale(0.6); opacity: 0; }
  .fb-intr__post { transition: transform 0.7s var(--ease-back), opacity 0.3s ease, translate 0.2s var(--ease-out); }
  .fb-intr__bubble { transition: transform 0.45s var(--ease-back) 0.5s, opacity 0.25s ease 0.5s; }
}
@media (max-width: 640px) {
  .fb-intr, .fb-intr--ways { flex-direction: column; align-items: flex-start; gap: 18px; width: min(100%, 340px); margin-inline: auto; }
  .fb-intr__bubble, .fb-intr--ways .fb-intr__bubble { border-radius: 16px 16px 16px 4px; }
  .fb-intr__bubble::after, .fb-intr--ways .fb-intr__bubble::after { left: 18px; right: auto; top: 100%; bottom: auto; margin-top: -1px; border-top: 0; border-left: 2px solid var(--ah-950); clip-path: polygon(0 0, 100% 0, 0 100%); box-shadow: inset 2px 0 0 var(--ah-950); }
  .fb-intr__post { width: 100%; }
}
@media (min-width: 1680px) { html.js .fb-intr { display: none; } }

/* --------------------------------------------------------------------------
   18. CLOSING BAND: the people sign, every light on (10/10 lit)
   -------------------------------------------------------------------------- */
.fb-endsign { position: relative; display: block; width: min(100%, 440px); margin: 0 auto 40px; padding-top: 52px; }
.fb-endsign .fb-sign__chain { height: 60px; }
.fb-endsign .fb-sign__box { padding: 16px clamp(10px, 3%, 16px) 42px; rotate: 0.8deg; }
.fb-endsign .fb-sign__wall { padding: 12px 6px 10px; gap: 4px 2px; }
.fb-endsign .fb-npc { min-height: 66px; min-width: 0; }
.fb-endsign .fb-npc svg { width: min(78%, 58px); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .fb-final:not(.is-play) .fb-endsign .np-lit { opacity: 0; }
  html.motion .fb-final:not(.is-play) .fb-endsign .np-glass { opacity: 1; }
  .fb-final.is-play .fb-endsign .np-lit { animation: ah-ignite 0.9s calc(0.3s + var(--n, 0) * 0.13s) both; }
  .fb-final.is-play .fb-endsign .np-glass { animation: fb-off 0.1s calc(0.3s + var(--n, 0) * 0.13s) both; }
}
@keyframes fb-off { to { opacity: 0; } }
@media (max-width: 520px) {
  .fb-endsign { padding-top: 40px; margin-bottom: 32px; }
  .fb-endsign .fb-sign__chain { height: 46px; }
  .fb-endsign .fb-npc { min-height: 54px; }
}

/* --------------------------------------------------------------------------
   19. The gutter ad phone: rewrites itself per section as you scroll (a Jeff
   KEEP, emojis included). Only from 1680px, where the left gutter really holds
   it (never over content); below that the ad interrupts in the flow instead.
   -------------------------------------------------------------------------- */
.fb-fixed { display: none; }
@media (min-width: 1680px) {
  html.js .fb-fixed {
    display: block; position: fixed; z-index: 50; left: 16px; bottom: 18px; width: min(214px, calc((100vw - 1200px) / 2 - 44px));
    opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.92);
    transition: opacity 0.4s ease, transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
  }
  html.js .fb-fixed.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.fb-fixed__bubble {
  position: absolute; left: 6px; right: 0; bottom: calc(100% + 14px); padding: 10px 13px 9px;
  border: 2px solid var(--ah-950); border-radius: 14px 14px 14px 4px; background: var(--ah-cream); color: var(--ah-ink);
  font-size: 0.84rem; font-weight: 700; line-height: 1.4; box-shadow: 4px 4px 0 var(--ah-blue);
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.fb-fixed__bubble::after { content: ""; position: absolute; left: 16px; top: 100%; width: 14px; height: 12px; margin-top: -1px; background: var(--ah-cream); border-left: 2px solid var(--ah-950); clip-path: polygon(0 0, 100% 0, 0 100%); box-shadow: inset 2px 0 0 var(--ah-950); }
.fb-fixed.is-talk .fb-fixed__bubble { opacity: 1; transform: none; }
.fb-ap--fixed .fb-ap__body { min-height: 4.2em; }

/* --------------------------------------------------------------------------
   20. Phones
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .fb-pile__top { font-size: 1.05rem; }
  .fb-console { padding-bottom: 84px; }
  .fb-way__name { font-size: 2rem; }
  .fb-reg__wrap { width: 90%; }
  .fb-reg__keys { grid-template-columns: repeat(4, 16px); gap: 4px; }
  .fb-reg__keys i { height: 13px; }
  .fb-reg__lcd b { font-size: 0.9rem; letter-spacing: 0.1em; }
  .fb-acc__label { font-size: 0.78rem; }
  .fb-pc__monitor { padding: 12px 12px 28px; }
}
@media (max-width: 380px) {
  .fb-acc__num { font-size: 1.7rem; }
  .fb-acc__head { gap: 9px; }
  .fb-tape { padding: 8px 20px 8px 24px; }
  .fb-tape::before { left: 7px; } .fb-tape::after { right: 7px; }
  .fb-otag { padding-inline: 2cqi; }
  .fb-side__count { gap: 10px; }
  .fb-mc b { font-size: 2.1rem; }
}

/* reduced motion: the scenes rest finished; the loops above only run with motion */
@media (prefers-reduced-motion: reduce) {
  .fb-tube__cap, .fb-dz__sweep, .fb-dz__sec { animation: none !important; }
}

/* --------------------------------------------------------------------------
   21. Small fixes found in review
   -------------------------------------------------------------------------- */
/* the search panel on a phone: the label drops under the query instead of squeezing it */
@media (max-width: 520px) {
  .fb-pc__screen { padding: 12px 8px; }
  .fb-ng__bar { padding: 0 14px; gap: 10px; }
  .fb-ng__panel { margin: -26px 4px 0; padding: 34px 2px 6px; }
  .fb-ng__row { flex-wrap: wrap; gap: 4px 8px; padding: 6px 6px; }
  .fb-ng__q { flex: 1 1 9em; font-size: 0.94rem; }
  .fb-ng__mark { margin-left: 26px; font-size: 0.6rem; }
}
/* a proof badge never leaves its comma at the start of the next line */
.fb-nowrap { white-space: nowrap; }
/* split paragraphs keep their rhythm */
.fb-defn .ah-defn__body + .ah-defn__body { margin-top: 8px; }
.fb-pk .ah-pkg-note.fb-pk__fits2 { margin-top: 6px; }
.fb-ml__note.fb-ml__note--2 { margin-top: 6px; }
.fb-dens__copy p + p { margin-top: 10px; }
.fb-env .fb-env__no { color: var(--ah-ink); }