/*
 * The marketing site's rebuilt sections (Sep 2026), shared by the home page,
 * /business and /organisers. styles.css still owns the shared chrome (nav,
 * buttons, phone frame, chips, the cream chapters, pricing, the close); this
 * file owns the heroes, the three-step vignettes, the bento tiles, and the
 * motion laid over the sections that stayed.
 *
 * Every loop here is CSS, so it costs nothing off screen, and every one stops
 * under reduced motion (the block at the foot).
 */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Hero: the thesis, running ─────────────────────────────────────────── */

.hx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(100svh, 960px);
  margin-top: -58px;
  padding: calc(58px + clamp(40px, 6vw, 72px)) 0 clamp(64px, 8vw, 96px);
}
/* The constellation, centred on the phone: the map's reach going out from
   where you are standing. It holds still (only its own dashes travel along
   their lines) and fades evenly into the ground on every side, so it reads as
   the phone's signal rather than a pattern laid over the page. */
.hx-hub {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: -1;
  width: 1150px;
  height: 1150px;
  background: url("/op-bg-vendor.svg") center / cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-mask: radial-gradient(circle closest-side, #000 18%, rgba(0, 0, 0, 0.55) 45%, transparent 72%);
  mask: radial-gradient(circle closest-side, #000 18%, rgba(0, 0, 0, 0.55) 45%, transparent 72%);
  animation: hx-hub-in 1600ms 300ms var(--ease) both;
}
@keyframes hx-hub-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } }

.hx-copy { position: relative; z-index: 2; }
.hx-stage { z-index: 1; }
.hx-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

.hx-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.06em;
  max-width: none;
  margin: 0;
  font-family: var(--sign-face);
  font-size: clamp(58px, 7.4vw, 118px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-shadow: 0.035em 0.04em 0 rgba(0, 0, 0, 0.55);
}
.hx-line { display: block; white-space: nowrap; animation: hx-rise 700ms var(--ease) both; }
.hx-line:last-child { animation-delay: 240ms; }
@keyframes hx-rise { from { opacity: 0; transform: translateY(0.25em); } }

/* The word, on a painted plate that is lettered again every few seconds. */
.hx-plate {
  --pb: color-mix(in srgb, var(--c) 58%, #0b0b0b);
  display: inline-block;
  padding: 0.04em 0.16em 0.02em;
  border-radius: 0.14em;
  background: var(--pb);
  color: var(--sign-cream);
  text-shadow: 0.04em 0.045em 0 color-mix(in srgb, var(--c) 25%, #000);
  box-shadow:
    inset 0 0 0 0.05em var(--pb),
    inset 0 0 0 0.065em rgba(243, 236, 217, 0.38),
    0 0.2em 0.4em -0.2em rgba(0, 0, 0, 0.6);
  transform: rotate(-2deg);
  transform-origin: 30% 0;
  transition: background 420ms var(--ease);
  animation: hx-rise 700ms 120ms var(--ease) both;
}
.hx-plate.ink { --pb: color-mix(in srgb, var(--c) 94%, #000); color: #16140f; text-shadow: none; }
.hx-plate.swing { animation: hx-swing 900ms var(--ease); }
@keyframes hx-swing {
  0% { transform: rotate(-2deg); }
  30% { transform: rotate(3deg); }
  60% { transform: rotate(-3.5deg); }
  100% { transform: rotate(-2deg); }
}
.hx-plate-word { display: inline-block; }
.hx-plate-word .ch { display: inline-block; animation: hx-letter 320ms var(--ease) both; animation-delay: calc(var(--k) * 34ms); }
@keyframes hx-letter { from { clip-path: inset(-10% 100% -10% 0); transform: translateY(0.05em); } to { clip-path: inset(-10% -20% -10% 0); } }

.hx-lede { max-width: 34ch; margin-top: 28px; color: var(--text-2); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; animation: hx-rise 700ms 360ms var(--ease) both; }
.hx-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; animation: hx-rise 700ms 460ms var(--ease) both; }
.hx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 22px; color: var(--text-3); font-size: 13.5px; animation: hx-rise 700ms 560ms var(--ease) both; }
.hx-meta strong { color: var(--text-2); font-weight: 600; }
.hx-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }

/* The phone, with what people post landing on it and leaving again. */
.hx-stage { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 560px; }
.hx-phone { width: min(300px, 78%); transform: rotate(3deg); animation: hx-phone 1100ms 200ms var(--ease) both; }
@keyframes hx-phone { from { opacity: 0; transform: rotate(8deg) translateY(40px) scale(0.96); } }
.hx-cards { position: absolute; inset: 0; pointer-events: none; }
.hx-card {
  position: absolute;
  left: 50%;
  top: var(--y);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  width: 232px;
  padding: 12px 14px 14px;
  border-radius: 16px;
  background: #18181c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 20px 40px -18px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translate3d(calc(-50% + var(--x) * 1.1), 0, 0);
  animation: hx-card 16s var(--ease) infinite;
}
.hx-card:nth-child(2) { animation-delay: 4s; }
.hx-card:nth-child(3) { animation-delay: 8s; }
.hx-card:nth-child(4) { animation-delay: 12s; }
/* Opacity and a small slide only: no scale and no blur, so the text is
   never re-rasterised mid-move and reads sharp for the whole time it shows. */
@keyframes hx-card {
  0% { opacity: 0; transform: translate3d(calc(-50% + var(--x) * 1.1), 10px, 0); }
  4%, 36% { opacity: 1; transform: translate3d(calc(-50% + var(--x) * 1.1), 0, 0); }
  42%, 100% { opacity: 0; transform: translate3d(calc(-50% + var(--x) * 1.1), -8px, 0); }
}
.hx-card-k { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.hx-card-k::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.hx-card b { grid-column: 1; color: var(--text); font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.hx-card-t { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--c); font-size: 12px; font-weight: 700; white-space: nowrap; }
.hx-card-life { grid-column: 1 / -1; display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--c); transform-origin: left; animation: hx-life 16s linear infinite; animation-delay: inherit; }
.hx-card:nth-child(2) .hx-card-life { animation-delay: 4s; }
.hx-card:nth-child(3) .hx-card-life { animation-delay: 8s; }
.hx-card:nth-child(4) .hx-card-life { animation-delay: 12s; }
@keyframes hx-life { 0%, 4% { transform: scaleX(1); } 38%, 100% { transform: scaleX(0); } }
.hx-note { position: absolute; bottom: -8px; left: 0; right: 0; color: var(--text-3); font-size: 12px; text-align: center; }

.hx-cue { position: absolute; left: 50%; bottom: 22px; width: 24px; height: 38px; margin-left: -12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.hx-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--text-2); animation: hx-cue 1.8s var(--ease) infinite; }
@keyframes hx-cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

@media (max-width: 900px) {
  .hx { min-height: 0; }
  .hx-in { grid-template-columns: minmax(0, 1fr); }
  .hx-stage { min-height: 520px; margin-top: 12px; }
  .hx-card { width: 200px; transform: translate3d(calc(-50% + var(--x) * 0.5), 0, 0); }
  @keyframes hx-card {
    0% { opacity: 0; transform: translate3d(calc(-50% + var(--x) * 0.5), 10px, 0); }
    4%, 36% { opacity: 1; transform: translate3d(calc(-50% + var(--x) * 0.5), 0, 0); }
    42%, 100% { opacity: 0; transform: translate3d(calc(-50% + var(--x) * 0.5), -8px, 0); }
  }
  .hx-cue { display: none; }
}

/* ── How it works: three moves, each shown running ─────────────────────── */

.how-head,
.bento-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: clamp(32px, 4.4vw, 52px); }
.how-head h2,
.bento-head h2 { margin: 0; max-width: 22ch; }
.how-head .body,
.bento-head .body { margin: 0; max-width: 60ch; }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.how-step { display: flex; flex-direction: column; gap: 10px; }
.js .how-step[data-reveal] { transition-delay: calc(var(--k) * 120ms); }
.how-art {
  position: relative;
  overflow: hidden;
  height: 220px;
  margin-bottom: 10px;
  border-radius: 22px;
  background: #141414;
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.5);
}
.how-n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #168253;
  color: var(--sign-cream);
  font-family: var(--sign-face);
  font-size: 18px;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px #168253, inset 0 0 0 3px rgba(243, 236, 217, 0.4);
}
.how-step h3 { margin: 0; font-family: var(--sign-face); font-size: clamp(28px, 2.6vw, 36px); font-weight: 800; line-height: 0.95; color: var(--text); }
.how-step p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; max-width: 38ch; }

/* 1: a tap on Busy. */
.how-sheet { position: absolute; left: 50%; top: 50%; display: flex; flex-wrap: wrap; gap: 8px; width: 240px; padding: 18px; border-radius: 18px; background: #1f1f23; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.how-sheet-t { width: 100%; margin-bottom: 4px; color: #aeaeb2; font-size: 12px; font-weight: 600; }
.how-chip { padding: 6px 10px; border-radius: 9px; background: #2a2a2f; color: #d1d1d6; font-size: 13px; font-weight: 600; }
.how-chip.on { animation: how-chip 4s var(--ease) infinite; }
@keyframes how-chip { 0%, 30% { background: #2a2a2f; color: #d1d1d6; } 40%, 90% { background: #f08a00; color: #16140f; } 100% { background: #2a2a2f; color: #d1d1d6; } }
.how-tap { position: absolute; left: 102px; top: 56px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); animation: how-tap 4s var(--ease) infinite; }
@keyframes how-tap { 0%, 22% { opacity: 0; transform: scale(1.4); } 32% { opacity: 1; transform: scale(0.8); } 44%, 100% { opacity: 0; transform: scale(1.6); } }

/* 2: it reaches the people around it. */
.how-origin { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #ff9500; box-shadow: 0 0 0 4px #141414, 0 0 0 6px #ff9500; }
.how-ring { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border: 1.5px solid rgba(255, 149, 0, 0.6); border-radius: 50%; animation: how-ring 3.6s var(--ease) infinite; }
.how-ring:nth-child(2) { animation-delay: 1.2s; }
.how-ring:nth-child(3) { animation-delay: 2.4s; }
@keyframes how-ring { from { transform: scale(0.08); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
.how-dot { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; border-radius: 50%; background: #3a3a3f; animation: how-dot 3.6s var(--ease) infinite; }
@keyframes how-dot { 0%, 35% { background: #3a3a3f; box-shadow: none; } 45%, 85% { background: #f3ecd9; box-shadow: 0 0 0 5px rgba(243, 236, 217, 0.18); } 100% { background: #3a3a3f; } }

/* 3: and then it leaves. */
.how-report { position: absolute; left: 50%; top: 50%; display: grid; gap: 4px; width: 220px; padding: 16px; border-radius: 16px; background: #1f1f23; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); transform: translate(-50%, -50%); animation: how-report 5s var(--ease) infinite; }
@keyframes how-report {
  0% { opacity: 0; transform: translate(-50%, -40%); }
  8%, 72% { opacity: 1; transform: translate(-50%, -50%); }
  84%, 100% { opacity: 0; transform: translate(-50%, -58%) scale(0.96); filter: blur(3px); }
}
.how-report-k { color: #85858b; font-size: 11.5px; font-weight: 600; }
.how-report b { color: #fff; font-size: 16px; }
.how-report-bar { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: #2a2a2f; overflow: hidden; }
.how-report-bar i { display: block; height: 100%; background: #ff3b30; transform-origin: left; animation: how-drain 5s linear infinite; }
@keyframes how-drain { 0%, 8% { transform: scaleX(1); } 72%, 100% { transform: scaleX(0); } }
.how-report-t { margin-top: 4px; color: #85858b; font-size: 11.5px; }

@media (max-width: 860px) {
  .how { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* ── The five things, as a bento ───────────────────────────────────────── */


.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "pins pins reports alerts"
    "events reviews reviews alerts";
  gap: 16px;
}
.tile-pins { grid-area: pins; }
.tile-reports { grid-area: reports; }
.tile-alerts { grid-area: alerts; }
.tile-events { grid-area: events; }
.tile-reviews { grid-area: reviews; }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "pins pins" "reports alerts" "events alerts" "reviews reviews"; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pins" "reports" "alerts" "events" "reviews"; }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 24px;
  border-radius: 24px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, var(--hairline)), 0 24px 48px -30px rgba(0, 0, 0, 0.8); }
}
.tile-art { position: relative; flex: 1; min-height: 150px; margin-bottom: 10px; border-radius: 16px; background: var(--surface); overflow: hidden; }
.tile h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--sign-face); font-size: clamp(30px, 2.6vw, 38px); font-weight: 800; line-height: 0.95; color: var(--text); }
.tile h3 svg { color: var(--c); }
.tile p { color: var(--text-3); font-size: 15px; line-height: 1.6; max-width: 46ch; }

/* Pins dropping onto the ground, one with its label. */
.pinmark { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; border-radius: 50% 50% 50% 0; background: var(--c); transform: rotate(-45deg); box-shadow: 0 0 0 3px var(--surface); animation: pin-drop 4.8s var(--ease) infinite; animation-delay: var(--d); }
@keyframes pin-drop { 0% { opacity: 0; translate: 0 -24px; } 10%, 80% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; } }
.pinlabel { position: absolute; left: var(--x); top: var(--y); padding: 5px 9px; border-radius: 8px; background: var(--high); color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap; transform: translate(-40%, -150%); animation: pin-label 4.8s var(--ease) infinite; animation-delay: 0.6s; }
@keyframes pin-label { 0%, 12% { opacity: 0; } 20%, 76% { opacity: 1; } 88%, 100% { opacity: 0; } }
.tile-pins .tile-art { background-image: linear-gradient(115deg, transparent 47%, var(--high) 47%, var(--high) 50%, transparent 50%), linear-gradient(15deg, transparent 58%, var(--high) 58%, var(--high) 61%, transparent 61%); }

/* A report and the time it has left. */
.mini-report { position: absolute; left: 50%; top: 50%; width: 78%; padding: 14px; border-radius: 14px; background: var(--high); transform: translate(-50%, -50%); }
.mini-report b { display: block; color: var(--text); font-size: 14px; }
.mini-bar { display: block; height: 4px; margin-top: 10px; border-radius: 2px; background: var(--surface); overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--c); transform-origin: left; animation: how-drain 4.4s linear infinite; }

/* A circle over the ground an alert covers. */
.tile-alerts .tile-art { min-height: 260px; }
.zone { position: absolute; left: 50%; top: 48%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent); animation: zone 3.6s var(--ease) infinite; }
@keyframes zone { 0% { transform: scale(0.6); } 50% { transform: scale(1); } 100% { transform: scale(0.6); } }
.zone-pin { position: absolute; left: 50%; top: 48%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--surface); }

/* An event and who is going. */
.mini-event { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 12px; width: 84%; padding: 12px; border-radius: 14px; background: var(--high); transform: translate(-50%, -50%); }
.mini-date { display: grid; place-items: center; width: 44px; height: 48px; border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 700; font-size: 18px; line-height: 1; }
.mini-date i { color: var(--safety); font-size: 10px; font-style: normal; }
.mini-event b { display: block; color: var(--text); font-size: 14px; }
.mini-going { display: flex; align-items: center; margin-top: 4px; color: var(--text-3); font-size: 12px; }
.mini-going span { width: 18px; height: 18px; margin-right: -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--high); animation: going 3s var(--ease) infinite; }
.mini-going span:nth-child(2) { background: var(--accent); animation-delay: 0.3s; }
.mini-going span:nth-child(3) { background: var(--gold); margin-right: 8px; animation-delay: 0.6s; }
@keyframes going { 0%, 10% { transform: scale(0); } 25%, 85% { transform: scale(1); } 100% { transform: scale(0); } }

/* Stars filling, then the sentence. */
.stars { position: absolute; left: 24px; top: 34px; display: flex; gap: 6px; }
.stars i { width: 24px; height: 24px; background: var(--high); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.8l2.6 5.4 5.9.85-4.25 4.15 1 5.9L12 17.3l-5.25 2.8 1-5.9L3.5 10.05l5.9-.85L12 3.8Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.8l2.6 5.4 5.9.85-4.25 4.15 1 5.9L12 17.3l-5.25 2.8 1-5.9L3.5 10.05l5.9-.85L12 3.8Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: star 4s var(--ease) infinite; }
.stars i:nth-child(2) { animation-delay: 0.15s; }
.stars i:nth-child(3) { animation-delay: 0.3s; }
.stars i:nth-child(4) { animation-delay: 0.45s; }
.stars i:nth-child(5) { animation-delay: 0.6s; }
@keyframes star { 0%, 8% { background: var(--high); } 18%, 86% { background: var(--c); } 100% { background: var(--high); } }
.mini-quote { position: absolute; left: 24px; right: 24px; top: 78px; color: var(--text); font-family: var(--sign-face); font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.05; animation: pin-label 4s var(--ease) infinite; animation-delay: 0.8s; }

/* Who it is for, as one quiet row under the tiles. */
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin-top: clamp(28px, 3.6vw, 44px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--hairline); }
.who-row { display: flex; gap: 12px; align-items: flex-start; }
.who-row svg { flex: none; margin-top: 3px; color: var(--text-3); }
.who-row p { color: var(--text-3); font-size: 14.5px; line-height: 1.6; }
.who-row b { color: var(--text); font-weight: 600; }
@media (max-width: 860px) { .who { grid-template-columns: minmax(0, 1fr); } }

/* ── Motion over the sections that stayed ──────────────────────────────── */

/* Status: one plate in each set is lit at a time, as the day goes. */
.states[data-cycle] .chip { transition: transform 360ms var(--ease), box-shadow 360ms var(--ease), filter 360ms var(--ease); }
.states[data-cycle].cycling .chip { filter: saturate(0.55) brightness(0.8); }
.states[data-cycle].cycling .chip.lit { filter: none; transform: translateY(-2px) scale(1.06); box-shadow: inset 0 0 0 2px var(--c), inset 0 0 0 3px rgba(243, 236, 217, 0.5), 0 10px 22px -12px #000; }

/* Campus: the code is typed, then read. */
.decoder[data-decoder] .query span::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.js .decoder[data-decoder] .seg { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.js .decoder[data-decoder].read .seg { opacity: 1; transform: none; }
.js .decoder[data-decoder].read .seg:nth-child(2) { transition-delay: 140ms; }
.js .decoder[data-decoder].read .seg:nth-child(3) { transition-delay: 280ms; }
.js .decoder[data-decoder] .decoded { opacity: 0; transition: opacity 420ms 420ms var(--ease); }
.js .decoder[data-decoder].read .decoded { opacity: 1; }

/* Screens: the three phones fan out as they arrive. */
@supports (animation-timeline: view()) {
  .gallery-move .shot .phone { animation: fan linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  .gallery-move .shot:nth-child(1) .phone { --r: -5deg; --ty: 40px; }
  .gallery-move .shot:nth-child(2) .phone { --r: 0deg; --ty: 80px; }
  .gallery-move .shot:nth-child(3) .phone { --r: 5deg; --ty: 40px; }
  @keyframes fan { from { transform: translateY(var(--ty)) rotate(var(--r)) scale(0.94); opacity: 0.4; } to { transform: none; opacity: 1; } }
}

/* ── Reduced motion: every loop above stands still, finished ──────────── */

@media (prefers-reduced-motion: reduce) {
  .hx-hub, .hx-line, .hx-plate, .hx-lede, .hx-cta, .hx-meta, .hx-phone, .hx-cue span,
  .how-chip.on, .how-tap, .how-ring, .how-dot, .how-report, .how-report-bar i,
  .pinmark, .pinlabel, .mini-bar i, .zone, .mini-going span, .stars i, .mini-quote,
  .gallery-move .shot .phone { animation: none !important; }
  .hx-card { animation: none; opacity: 1; transform: translate3d(calc(-50% + var(--x) * 1.1), 0, 0); }
  .hx-card:nth-child(n + 3) { display: none; }
  .hx-card-life { animation: none; transform: scaleX(0.6); }
  .how-ring { opacity: 0.5; transform: scale(0.7); }
  .how-tap { display: none; }
  .stars i { background: var(--c); }
}

/* ══ /business ═════════════════════════════════════════════════════════════ */

/* The hero, in the home page's frame: the claim left, the sign running right. */
.hx-biz .duo { align-items: center; }
.hx-biz-title {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(50px, 5.4vw, 86px);
  line-height: 0.88;
  animation: hx-rise 700ms var(--ease) both;
}
.hx-biz-side { position: relative; isolation: isolate; animation: hx-phone 1000ms 200ms var(--ease) both; }
.hx-biz-stage { display: grid; justify-items: end; }
.hx-biz-side .hx-hub { top: 50%; }

/* Four tiles, two by two, the status widest. */
.bento-4 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "a a b"
    "c d d";
}
.tile-a { grid-area: a; }
.tile-b { grid-area: b; }
.tile-c { grid-area: c; }
.tile-d { grid-area: d; }
@media (max-width: 860px) {
  .bento-4 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d"; }
}

/* The status plate, flipping through what a counter says in a day. */
.flip-plate {
  position: absolute;
  left: 28px;
  top: 50%;
  display: grid;
  height: 76px;
  overflow: hidden;
  padding: 0 20px;
  border-radius: 14px;
  background: #168253;
  box-shadow: inset 0 0 0 4px #168253, inset 0 0 0 5.5px rgba(243, 236, 217, 0.35);
  transform: translateY(-50%) rotate(-2deg);
}
.flip-plate span {
  grid-area: 1 / 1;
  align-self: center;
  color: var(--sign-cream);
  font-family: var(--sign-face);
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0.04em 0.05em 0 #06241a;
  opacity: 0;
  animation: flip 8s var(--ease) infinite;
}
.flip-plate span:nth-child(2) { animation-delay: 2s; }
.flip-plate span:nth-child(3) { animation-delay: 4s; }
.flip-plate span:nth-child(4) { animation-delay: 6s; }
.flip-plate { animation: flip-paint 8s steps(1) infinite; }
@keyframes flip { 0% { opacity: 0; transform: translateY(40%); } 5%, 22% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; transform: translateY(-40%); } }
@keyframes flip-paint {
  0% { background: #168253; box-shadow: inset 0 0 0 4px #168253, inset 0 0 0 5.5px rgba(243, 236, 217, 0.35); }
  25% { background: #e5ab1c; box-shadow: inset 0 0 0 4px #e5ab1c, inset 0 0 0 5.5px rgba(243, 236, 217, 0.35); }
  50% { background: #c42638; box-shadow: inset 0 0 0 4px #c42638, inset 0 0 0 5.5px rgba(243, 236, 217, 0.35); }
  75% { background: #168253; box-shadow: inset 0 0 0 4px #168253, inset 0 0 0 5.5px rgba(243, 236, 217, 0.35); }
}
.flip-left { position: absolute; right: 24px; top: 50%; padding: 8px 12px; border-radius: 10px; background: var(--sign-cream); color: #16140f; font-size: 12px; font-weight: 700; transform: translateY(-50%) rotate(2deg); }
.flip-left b { font-family: var(--sign-face); font-size: 24px; font-weight: 900; }

/* A week of hours, filling in. */
.week { position: absolute; inset: 22px 22px 18px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; }
.week span { position: relative; height: 100%; border-radius: 8px; background: var(--high); }
.week span::before { content: ''; position: absolute; left: 0; right: 0; bottom: 18px; height: calc(var(--h) * (100% - 18px)); border-radius: 8px; background: var(--c); transform-origin: bottom; animation: week 4s var(--ease) infinite; }
.week span:nth-child(2)::before { animation-delay: 0.1s; }
.week span:nth-child(3)::before { animation-delay: 0.2s; }
.week span:nth-child(4)::before { animation-delay: 0.3s; }
.week span:nth-child(5)::before { animation-delay: 0.4s; }
.week span:nth-child(6)::before { animation-delay: 0.5s; }
.week span:nth-child(7)::before { animation-delay: 0.6s; }
@keyframes week { 0%, 6% { transform: scaleY(0); } 26%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.week i { position: absolute; left: 0; right: 0; bottom: 2px; color: var(--text-3); font-size: 11px; font-style: normal; font-weight: 700; text-align: center; }

/* The feed, one message at a time, the last one the owner's own. */
.feed { position: absolute; inset: 18px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.feed-msg { display: flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--high); color: var(--text); font-size: 13.5px; font-weight: 550; animation: feed 5s var(--ease) infinite; animation-delay: var(--d); }
.feed-msg i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.feed-msg.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #168253; color: var(--sign-cream); }
@keyframes feed { 0% { opacity: 0; transform: translateY(8px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* The three steps, on the dark ground this time. */
.how-dark .how-art { background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline); }
.how-dark .how-step h3 { color: var(--text); }

/* 1: typing the name, and the place turning up. */
.find { position: absolute; left: 50%; top: 50%; width: 240px; transform: translate(-50%, -50%); }
.find-q { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--high); color: var(--text); font-size: 14px; font-weight: 600; }
.find-q svg { color: var(--text-3); }
.find-typed { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--accent); width: 0; animation: type 4.5s steps(10) infinite; }
@keyframes type { 0% { width: 0; } 40%, 90% { width: 10ch; } 100% { width: 0; } }
.find-row { display: flex; flex-direction: column; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 650; animation: find-row 4.5s var(--ease) infinite; }
.find-row small { color: var(--text-3); font-size: 12px; font-weight: 500; }
@keyframes find-row { 0%, 42% { opacity: 0; transform: translateY(6px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 2: a person reads it, and stamps it. */
.claim-card { position: absolute; left: 50%; top: 50%; display: grid; gap: 4px; width: 240px; padding: 16px; border-radius: 14px; background: var(--sign-cream); color: #16140f; transform: translate(-50%, -50%) rotate(-1deg); }
.claim-k { justify-self: start; padding: 2px 8px; border-radius: 6px; background: #e5ab1c; font-family: var(--sign-face); font-size: 13px; font-weight: 800; text-transform: uppercase; }
.claim-card b { font-size: 17px; }
.claim-card small { color: rgba(22, 20, 15, 0.6); font-size: 12px; }
.claim-stamp { position: absolute; right: 14px; top: 50%; padding: 2px 10px 0; border: 3px solid #168253; border-radius: 8px; color: #168253; font-family: var(--sign-face); font-size: 26px; font-weight: 900; text-transform: uppercase; transform: translateY(-50%) rotate(-10deg) scale(1.6); opacity: 0; animation: stamp 4s cubic-bezier(0.2, 1.4, 0.4, 1) infinite; }
@keyframes stamp { 0%, 40% { opacity: 0; transform: translateY(-50%) rotate(-10deg) scale(1.6); } 48%, 90% { opacity: 0.95; transform: translateY(-50%) rotate(-10deg) scale(1); } 100% { opacity: 0; } }

/* 3: the first sign goes up. */
.first-status { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: 16px; background: #168253; box-shadow: inset 0 0 0 4px #168253, inset 0 0 0 5.5px rgba(243, 236, 217, 0.35), 0 20px 40px -20px #000; transform: translate(-50%, -50%); animation: first 4s var(--ease) infinite; }
@keyframes first { 0%, 10% { opacity: 0; transform: translate(-50%, -30%) rotate(4deg); } 22%, 88% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg); } 100% { opacity: 0; } }
.first-word { color: var(--sign-cream); font-family: var(--sign-face); font-size: 56px; font-weight: 900; line-height: 1; text-transform: uppercase; text-shadow: 0.04em 0.05em 0 #06241a; }
.first-tag { display: grid; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--sign-cream); color: #16140f; font-size: 10px; font-weight: 700; text-transform: uppercase; transform: rotate(3deg); }
.first-tag b { font-family: var(--sign-face); font-size: 22px; font-weight: 900; }

@media (prefers-reduced-motion: reduce) {
  .hx-biz-title, .hx-biz-side, .flip-plate, .flip-plate span, .week span::before, .feed-msg, .find-typed, .find-row, .claim-stamp, .first-status { animation: none !important; }
  .flip-plate span:first-child { opacity: 1; }
  .find-typed { width: 10ch; }
  .claim-stamp { opacity: 0.95; transform: translateY(-50%) rotate(-10deg); }
}

/* ══ /organisers ═══════════════════════════════════════════════════════════ */

.org-for { max-width: 46ch; margin-top: 18px; color: var(--text-3); font-size: 15px; line-height: 1.6; animation: hx-rise 700ms 460ms var(--ease) both; }

/* The door, running: the count climbs and each scan lands on the board. */
.gate-demo {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  padding: 24px;
  border-radius: 26px;
  background: #101114;
  box-shadow: 0 0 0 1px var(--hairline), 0 30px 60px -30px #000;
}
.gate-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.gate-event { color: var(--text-3); font-size: 13.5px; font-weight: 600; }
.gate-count { display: flex; align-items: baseline; gap: 8px; }
.gate-count b { color: var(--sign-cream); font-family: var(--sign-face); font-size: 72px; font-weight: 900; line-height: 0.85; font-variant-numeric: tabular-nums; }
.gate-count small { color: var(--text-3); font-size: 14px; font-weight: 600; }
.gate-board {
  display: grid;
  gap: 4px;
  padding: 20px 24px;
  border-radius: 18px;
  background: #168253;
  color: var(--sign-cream);
  box-shadow: inset 0 0 0 5px #168253, inset 0 0 0 6.5px rgba(243, 236, 217, 0.35);
}
.gate-board.pop { animation: gate-pop 420ms var(--ease); }
@keyframes gate-pop { from { transform: scale(0.96); } }
.gate-word { font-family: var(--sign-face); font-size: 64px; font-weight: 900; line-height: 0.9; text-transform: uppercase; text-shadow: 0.04em 0.05em 0 #06241a; }
.gate-name { font-family: var(--sign-face); font-size: 24px; font-weight: 700; }
.gate-scan { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 14px; background: var(--accent); color: #062014; font-weight: 700; }
.gate-scan span { width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 4px; }
.gate-note { color: var(--text-3); font-size: 12px; text-align: center; }

/* Four caps, each struck through and replaced. */
.limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .limits { grid-template-columns: minmax(0, 1fr); } }
.limit { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 24px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline); }
.js .limit[data-reveal] { transition-delay: calc(var(--k) * 90ms); }
.limit-fig { display: flex; align-items: baseline; gap: 16px; margin: 0 0 6px; font-family: var(--sign-face); font-weight: 900; line-height: 0.9; }
.limit-fig s { position: relative; color: var(--text-3); font-size: 56px; text-decoration: none; }
.limit-fig s::after { content: ''; position: absolute; left: -6%; right: -6%; top: 50%; height: 5px; border-radius: 3px; background: var(--c); transform: rotate(-8deg) scaleX(0); transform-origin: left; transition: transform 600ms 300ms var(--ease); }
.limit.in .limit-fig s::after,
html:not(.js) .limit-fig s::after { transform: rotate(-8deg) scaleX(1); }
.limit-fig span { color: var(--c); font-size: 56px; text-transform: uppercase; opacity: 0; transform: translateX(-10px); transition: opacity 500ms 700ms var(--ease), transform 500ms 700ms var(--ease); }
.limit.in .limit-fig span,
html:not(.js) .limit-fig span { opacity: 1; transform: none; }
.limit h3 { margin: 0; font-family: var(--sign-face); font-size: clamp(28px, 2.4vw, 34px); font-weight: 800; line-height: 0.95; color: var(--text); }
.limit p { color: var(--text-3); font-size: 15px; line-height: 1.6; }

/* Two taps: the settings list, the plan sheet, the account it lands on. */
.set-list { position: absolute; left: 50%; top: 50%; display: grid; width: 230px; overflow: hidden; border-radius: 14px; background: var(--high); transform: translate(-50%, -50%); }
.set-list span { padding: 11px 14px; color: var(--text-2); font-size: 13.5px; box-shadow: inset 0 -1px 0 var(--hairline); }
.set-list span.on { color: var(--text); font-weight: 650; animation: set-on 3.6s var(--ease) infinite; }
@keyframes set-on { 0%, 30% { background: transparent; } 40%, 90% { background: rgba(61, 220, 145, 0.16); } 100% { background: transparent; } }
.plan-sheet { position: absolute; left: 50%; top: 50%; display: grid; gap: 6px; width: 230px; padding: 16px; border-radius: 16px; background: var(--high); transform: translate(-50%, -50%); animation: sheet-up 3.6s var(--ease) infinite; }
@keyframes sheet-up { 0% { transform: translate(-50%, -30%); opacity: 0; } 12%, 88% { transform: translate(-50%, -50%); opacity: 1; } 100% { opacity: 0; } }
.plan-sheet b { color: var(--text); font-size: 15px; }
.plan-sheet span { color: var(--text-3); font-size: 12.5px; }
.plan-go { margin-top: 6px; padding: 9px; border-radius: 10px; background: var(--accent); color: #062014 !important; font-weight: 700; text-align: center; }
.acct { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 10px; width: 250px; padding: 14px; border-radius: 16px; background: var(--high); transform: translate(-50%, -50%); }
.acct-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--campus); }
.acct b { display: block; color: var(--text); font-size: 14px; }
.acct small { color: var(--text-3); font-size: 11.5px; }
.acct-badge { margin-left: auto; padding: 3px 8px; border-radius: 6px; background: #e5ab1c; color: #16140f; font-family: var(--sign-face); font-size: 13px; font-weight: 800; text-transform: uppercase; animation: badge 3.6s var(--ease) infinite; }
@keyframes badge { 0%, 30% { transform: scale(0); } 42%, 90% { transform: scale(1); } 100% { transform: scale(0); } }

@media (prefers-reduced-motion: reduce) {
  .org-for, .set-list span.on, .plan-sheet, .acct-badge { animation: none !important; }
  .limit-fig s::after { transform: rotate(-8deg) scaleX(1); transition: none; }
  .limit-fig span { opacity: 1; transform: none; transition: none; }
}

/* /business: organisations, as three tiles on the cream chapter. */
.org-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
@media (max-width: 860px) { .org-tiles { grid-template-columns: minmax(0, 1fr); } }
.org-tile { display: flex; flex-direction: column; gap: 8px; }
.js .org-tile[data-reveal] { transition-delay: calc(var(--k) * 120ms); }
.org-tile h3 { margin: 6px 0 0; font-family: var(--sign-face); font-size: clamp(28px, 2.6vw, 36px); font-weight: 800; line-height: 0.95; color: var(--text); }
.org-tile p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.org-talk { margin-top: clamp(28px, 3.6vw, 44px); color: var(--text-2); font-size: 16px; }

/* A campus: its pins lighting up together, one owner speaking for them. */
.org-campus span { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; border-radius: 50%; background: #3a3a3f; animation: org-lit 4s var(--ease) infinite; animation-delay: var(--d); }
@keyframes org-lit { 0%, 20% { background: #3a3a3f; box-shadow: none; } 35%, 80% { background: #5856d6; box-shadow: 0 0 0 5px rgba(88, 86, 214, 0.25); } 100% { background: #3a3a3f; } }

/* A chain: every branch set at once. */
.org-chain { position: absolute; inset: 22px; display: grid; gap: 8px; align-content: center; }
.org-chain span { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: #1f1f23; color: #fff; font-size: 13px; font-weight: 600; }
.org-chain i { padding: 2px 8px; border-radius: 6px; font-family: var(--sign-face); font-size: 15px; font-style: normal; font-weight: 800; text-transform: uppercase; color: #f3ecd9; animation: org-set 4s steps(1) infinite; }
@keyframes org-set { 0% { background: #3a3a3f; color: #85858b; } 30% { background: #168253; color: #f3ecd9; } 70% { background: #e5ab1c; color: #16140f; } }
.org-origin { background: #ff3b30; box-shadow: 0 0 0 4px #141414, 0 0 0 6px #ff3b30; }
#organisations .how-ring { border-color: rgba(255, 59, 48, 0.6); }

@media (prefers-reduced-motion: reduce) {
  .org-campus span, .org-chain i { animation: none !important; }
  .org-chain i { background: #168253; }
}

/* ── The App Store shelf: the ten uploaded panels, scrolled like the store ─ */

.store-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 3.6vw, 40px); }
.store-head h2 { margin: 0; max-width: 20ch; }
.store-head .body { margin-top: 14px; max-width: 52ch; }
.store-nav { display: flex; gap: 8px; }
.store-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text);
  cursor: pointer;
  transition: background 160ms var(--ease), transform 120ms var(--ease), opacity 160ms var(--ease);
}
.store-btn:hover { background: var(--high); }
.store-btn:active { transform: scale(0.94); }
.store-btn:disabled { opacity: 0.35; cursor: default; }

/* Full bleed, but the first card lines up with the page's own margin. */
.store-track {
  --edge: max(28px, calc((100vw - var(--page)) / 2 + 28px));
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 6px var(--edge) 24px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.store-track::-webkit-scrollbar { display: none; }
.store-track:focus-visible { outline: none; }
.store-card {
  flex: none;
  width: 264px;
  overflow: hidden;
  border-radius: 22px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -28px #000;
  scroll-snap-align: start;
  transition: transform 300ms var(--ease);
}
.store-card img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .store-card:hover { transform: translateY(-6px); }
}
@media (max-width: 600px) {
  .store-card { width: 62vw; }
  .store-nav { display: none; }
}
.store-foot { margin-top: 8px; }

/* Arriving: the cards come in one after another from the right. */
.js .store-shelf[data-reveal] .store-card { opacity: 0; transform: translateX(40px); transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
.js .store-shelf[data-reveal].in .store-card { opacity: 1; transform: none; }
.js .store-shelf.in .store-card:nth-child(2) { transition-delay: 70ms; }
.js .store-shelf.in .store-card:nth-child(3) { transition-delay: 140ms; }
.js .store-shelf.in .store-card:nth-child(4) { transition-delay: 210ms; }
.js .store-shelf.in .store-card:nth-child(5) { transition-delay: 280ms; }
.js .store-shelf.in .store-card:nth-child(n + 6) { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .js .store-shelf[data-reveal] .store-card { opacity: 1; transform: none; transition: none; }
}

/* ── The shelf's doodles, drawn in the panels' own hand ─────────────────── */

@font-face { font-family: 'Caveat'; src: url('/vendor/caveat.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

.store-sec { position: relative; isolation: isolate; overflow: hidden; }
.store-topo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/site/topo.svg') center / cover no-repeat;
  opacity: 0.9;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}
.store-head { position: relative; }
.store-foot { position: relative; display: flex; align-items: center; gap: 18px; }

.doodle { position: absolute; overflow: visible; pointer-events: none; }
.doodle .ink { fill: none; stroke: #3ddc91; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: url(#pencil); }
.doodle-spark { left: min(440px, 38%); top: -14px; width: 96px; }
.doodle-spark .ink { stroke-width: 2.5; }

.doodle-note { position: absolute; right: 124px; top: 8px; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; }
.doodle-note span { font-family: 'Caveat', cursive; font-size: 30px; font-weight: 700; color: #3ddc91; transform: rotate(-6deg); white-space: nowrap; }
.doodle-arrow { position: relative; width: 120px; height: 96px; margin-top: 26px; transform: scaleX(-1) rotate(8deg); }

.doodle-route { position: relative; flex: none; order: 2; width: 300px; height: 80px; }
.doodle-route .dash { stroke-dasharray: 2 12; stroke-width: 3.5; }
.doodle-route .pin { stroke-width: 2.5; }
.doodle-live { order: 3; margin-left: -8px; font-family: 'Caveat', cursive; font-size: 28px; font-weight: 700; color: #3ddc91; transform: rotate(-8deg) translateY(-18px); }

/* Drawn in as the section arrives, stroke by stroke. */
.js .store-head .doodle .ink,
.js .store-foot .doodle .ink:not(.dash) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease); }
.js .store-head.in .doodle .ink,
.js .store-foot.in .doodle .ink { stroke-dashoffset: 0; }
.js .store-head .doodle-note span,
.js .doodle-live { opacity: 0; transition: opacity 600ms 500ms var(--ease); }
.js .store-head.in .doodle-note span,
.js .store-foot.in .doodle-live { opacity: 1; }
.store-foot .dash { animation: route 6s linear infinite; }
@keyframes route { to { stroke-dashoffset: -140; } }

@media (max-width: 860px) {
  .doodle-note { display: none; }
  .doodle-spark { left: auto; right: 0; top: -30px; width: 70px; }
  .doodle-route { display: none; }
  .doodle-live { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .store-head .doodle .ink, .js .store-foot .doodle .ink:not(.dash) { stroke-dashoffset: 0; transition: none; }
  .js .store-head .doodle-note span, .js .doodle-live { opacity: 1; }
  .store-foot .dash { animation: none; }
}