/* Broadcast hero, stage 1 (TW #3631): the fictional Local 1 Teachers Union in Westfield, MA sends
   "Take the contract survey" to All Members. Layered on the existing .hero rules in application.css.
   Copy left; a canvas street map full-bleed behind; the send card and office label pinned to the
   office by script; the big phone right (below on narrow screens). Site palette: navy, deep navy,
   orange, white. The fictional union's app uses its own blue, as a client's app would. */
.hero.hb {
  --hb-navy: #1a3a5c;
  --hb-deep: #0a1628;
  --hb-orange: #e8a838;
  --hb-brand: #1d4f9a;
  --hb-phone-w: clamp(280px, 23vw, 336px);
  background: var(--hb-deep);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  isolation: isolate;
}
.hero.hb::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  filter: none;
  opacity: 1;
  animation: none;
  background: linear-gradient(90deg, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0.74) 27%, rgba(10, 22, 40, 0) 41%);
  z-index: 1;
  pointer-events: none;
}
.hero.hb::after { display: none; }
.hb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hb-inner { position: relative; z-index: 2; gap: 2.5rem; }
.hb-copy { flex: 0 0 clamp(380px, 33vw, 490px); min-width: 0; position: relative; z-index: 3; }
@media (min-width: 1081px) {
  .hb-copy h1 { font-size: clamp(2.3rem, 3.25vw, 3.1rem); }
}
.hb-stage { position: relative; flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; }
/* Where the map's story happens. Script reads the custom properties: the office sits at
   (--hb-office-x, --hb-office-y) of this box, and the box spans --hb-span-km kilometres. */
.hb-focus {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: calc(var(--hb-phone-w) + 2rem);
  --hb-span-scale: 1;
  --hb-office-x: 0.48;
  --hb-office-y: 0.63;
  --hb-card-pos: top;
  pointer-events: none;
}
/* The chapter title for the scale being shown ("For Small Locals") and the steps to jump between them. */
.hb-chapter {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.hb-chapter-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hb-chapter.is-swap .hb-chapter-title { opacity: 0; transform: translateY(-6px); }
.hb-chapter-title::before {
  content: '';
  width: 1.6rem;
  height: 3px;
  border-radius: 2px;
  background: var(--hb-orange);
}
.hb-chapter-title span {
  font: 800 1.35rem/1.1 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(10, 22, 40, 0.8);
  white-space: nowrap;
}
.hb-controls { display: flex; align-items: center; gap: 0.9rem; padding-left: 2.2rem; }
.hb-steps { display: flex; gap: 5px; }
.hb-sound {
  all: unset;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.hb-sound svg { width: 14px; height: 14px; display: block; }
.hb-sound .hb-sound-on { display: none; }
.hb-sound.is-on { border-color: var(--hb-orange); color: var(--hb-orange); background: rgba(232, 168, 56, 0.12); }
.hb-sound.is-on .hb-sound-on { display: block; }
.hb-sound.is-on .hb-sound-off { display: none; }
.hb-sound:hover { border-color: rgba(255, 255, 255, 0.7); }
.hb-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The music's credit (TW #3676), shown while it plays. */
.hb-credit { display: none; margin-top: 0.5rem; padding-left: 2.2rem; font-size: 0.72rem; line-height: 1.3; color: rgba(255, 255, 255, 0.62); }
.hb.is-sound .hb-credit { display: block; }
@media (max-width: 1080px) { .hb-credit { padding-left: 0; text-align: center; } }
.hb-steps button {
  all: unset;
  position: relative;
  width: 20px;
  height: 16px;
  cursor: pointer;
  transition: width 0.3s ease;
}
.hb-steps button::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s ease;
}
.hb-steps button:hover::before { background: rgba(255, 255, 255, 0.6); }
.hb-steps button.is-on { width: 34px; }
.hb-steps button.is-on::before { background: var(--hb-orange); }
.hb-steps button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }

/* ---- Labels pinned to the office -------------------------------------------------------- */
.hb-office {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(10, 22, 40, 0.95), 0 0 12px rgba(10, 22, 40, 0.9);
}
.hb-office-name {
  display: block;
  font: 700 0.74rem/1.25 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.hb-office-place { display: block; font-size: 0.74rem; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }

.hb-card {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 15.5rem;
  pointer-events: none;
}
.hb-card-in {
  padding: 0.8rem 0.95rem 0.85rem;
  border-radius: 12px;
  background: rgba(10, 22, 40, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hb-card.is-on .hb-card-in { opacity: 1; transform: none; }
.hb-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font: 700 0.68rem/1.2 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-orange);
}
.hb-card-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hb-orange); }
.hb-card.is-sending:not(.is-done) .hb-card-dot { animation: hb-dot 0.9s ease-out infinite; }
@keyframes hb-dot {
  0% { box-shadow: 0 0 0 0 rgba(232, 168, 56, 0.8); }
  100% { box-shadow: 0 0 0 7px rgba(232, 168, 56, 0); }
}
.hb-card-to { margin-top: 0.45rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); }
.hb-card-to strong { color: #fff; }
.hb-card-msg { margin-top: 0.15rem; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.hb-card-foot { position: relative; margin-top: 0.6rem; min-height: 4rem; }
.hb-card-send {
  position: absolute;
  right: 0;
  bottom: 0.2rem;
  padding: 0.4rem 1.1rem;
  border-radius: 6px;
  background: var(--hb-orange);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  transition: transform 0.15s ease, opacity 0.25s ease;
}
.hb-card-send.is-pressed { transform: scale(0.92); }
.hb-card.is-sending .hb-card-send { opacity: 0; }
.hb-card-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hb-card.is-sending .hb-card-stat { opacity: 1; }
.hb-card-num {
  font: 800 2.3rem/1 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  color: var(--hb-orange);
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
}
.hb-card-label {
  font: 700 0.7rem/1.2 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.hb-card-label small { margin-left: 0.4em; font-size: 1em; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.55); }
.hb-card-check { display: none; color: var(--hb-orange); }
.hb-card.is-done .hb-card-check { display: inline; }
.hb-card-bar {
  margin-top: 0.45rem;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hb-card.is-sending .hb-card-bar { opacity: 1; }
.hb-card-bar span {
  display: block;
  height: 100%;
  background: var(--hb-orange);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- The phone ---------------------------------------------------------------------------
   Sizes inside are in em so one font-size scales the whole device. */
.hb-phone {
  position: relative;
  flex: 0 0 var(--hb-phone-w);
  width: var(--hb-phone-w);
  font-size: calc(var(--hb-phone-w) / 20.7);
  perspective: 1600px;
  z-index: 3;
  --hb-pop-x: -30%;
  --hb-pop-y: -8%;
}
.hb-shake { position: relative; }
.hb-phone.is-buzz .hb-shake { animation: hb-buzz 0.55s linear; }
@keyframes hb-buzz {
  0%, 100% { transform: none; }
  10%, 50%, 90% { transform: translateX(-0.25em) rotate(-0.8deg); }
  30%, 70% { transform: translateX(0.25em) rotate(0.8deg); }
}
.hb-body {
  --rx: 3deg;
  --ry: -8deg;
  position: relative;
  aspect-ratio: 290 / 606;
  border-radius: 3.3em;
  padding: 0.7em;
  background: linear-gradient(145deg, #2a2a2e 0%, #1d1d1f 45%, #111113 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 0.25em #0c0c0d,
    0 2.4em 5em rgba(0, 0, 0, 0.55);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: box-shadow 0.6s ease;
}
/* The charge (Steve 2026-10-18): the phone's frame crackles white, brighter and brighter, then snaps to full white and
   lets go as the beam leaves (is-discharged fades the afterglow). Drawn by a ring just outside the frame. */
.hb-body::after {
  content: '';
  position: absolute;
  inset: -0.12em;
  border-radius: inherit;
  border: 0.14em solid rgba(255, 255, 255, 0);
  pointer-events: none;
  opacity: 0;
}
.hb-phone.is-charging .hb-body::after { animation: hb-charge 0.36s linear both; }
.hb-phone.is-discharged .hb-body::after { animation: hb-discharge 0.45s ease-out both; }
@keyframes hb-charge {
  0% { opacity: 0.25; border-color: rgba(220, 238, 255, 0.5); box-shadow: 0 0 0.4em 0.05em rgba(200, 230, 255, 0.45), inset 0 0 0.3em rgba(200, 230, 255, 0.3); }
  12% { opacity: 0.8; border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0.9em 0.15em rgba(210, 236, 255, 0.75), inset 0 0 0.5em rgba(210, 236, 255, 0.45); }
  20% { opacity: 0.35; }
  34% { opacity: 0.95; border-color: #fff; box-shadow: 0 0 1.2em 0.25em rgba(215, 238, 255, 0.85), inset 0 0 0.6em rgba(215, 238, 255, 0.5); }
  44% { opacity: 0.5; }
  58% { opacity: 1; box-shadow: 0 0 1.6em 0.35em rgba(220, 240, 255, 0.9), inset 0 0 0.8em rgba(220, 240, 255, 0.55); }
  66% { opacity: 0.6; }
  80% { opacity: 1; box-shadow: 0 0 2.2em 0.5em rgba(230, 244, 255, 0.95), inset 0 0 1em rgba(230, 244, 255, 0.6); }
  88% { opacity: 0.75; }
  100% { opacity: 1; border-color: #fff; box-shadow: 0 0 3em 0.8em rgba(240, 248, 255, 1), inset 0 0 1.4em rgba(240, 248, 255, 0.75); }
}
@keyframes hb-discharge {
  0% { opacity: 1; border-color: #fff; box-shadow: 0 0 3em 0.8em rgba(240, 248, 255, 1), inset 0 0 1.4em rgba(240, 248, 255, 0.75); }
  100% { opacity: 0; border-color: rgba(255, 255, 255, 0); box-shadow: 0 0 0.5em 0 rgba(240, 248, 255, 0); }
}
.hb-phone.is-charging .hb-shake { animation: hb-crackle 0.36s steps(6) both; }   /* a tremor as it builds */
@keyframes hb-crackle {
  0%, 100% { transform: none; }
  20% { transform: translate(0.04em, -0.03em); }
  40% { transform: translate(-0.05em, 0.02em); }
  60% { transform: translate(0.06em, 0.04em); }
  80% { transform: translate(-0.04em, -0.05em); }
}
@media (prefers-reduced-motion: reduce) {
  .hb-phone.is-charging .hb-body::after, .hb-phone.is-discharged .hb-body::after, .hb-phone.is-charging .hb-shake { animation: none; }
}
.hb-body::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #0b0b0c;
  transform: translateZ(-0.7em);
}
.hb-phone.is-awake .hb-body {
  box-shadow:
    inset 0 0 0 1px rgba(232, 168, 56, 0.55),
    inset 0 0 0 0.25em #0c0c0d,
    0 2.4em 5em rgba(0, 0, 0, 0.55),
    0 0 4em 0.3em rgba(232, 168, 56, 0.28);
}
.hb-screen {
  position: relative;
  height: 100%;
  border-radius: 2.65em;
  overflow: hidden;
  background: #0a1628;
  transform: translateZ(0.01px);
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', sans-serif;
  color: #111;
}
/* The site styles every paragraph in .hero white and large; the phone's screens set their own. */
.hb-screen p { margin: 0; font-size: 1em; line-height: 1.45; color: #2c313a; }
.hb-island {
  position: absolute;
  top: 0.65em;
  left: 50%;
  width: 5.8em;
  height: 1.7em;
  margin-left: -2.9em;
  border-radius: 1em;
  background: #000;
  z-index: 8;
}
.hb-glare {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

/* "Tap to unmute" (TW #3664): sound is off until the visitor asks, and the small speaker toggle by
   the step bars was easy to miss on a phone. This glows on the phone's own screen, above the dimmed
   lock screen and the app, until sound is on. The phone is aria-hidden, so the toggle stays the
   keyboard and screen-reader control (and the way to turn sound back off). */
.hb-unmute {
  all: unset;
  position: absolute;
  left: 50%;
  bottom: 1.2em;   /* halfway down from 2.4em to the screen's foot (Steve 2026-10-18) */
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.75em 1.15em;
  border-radius: 2em;
  background: rgba(10, 22, 40, 0.84);
  border: 1.5px solid var(--hb-orange);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', sans-serif;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  animation: hb-unmute 1.8s ease-in-out infinite;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hb-unmute::before { content: ''; position: absolute; inset: -0.6em; }   /* room for a thumb */
.hb-unmute span { display: inline-flex; align-items: center; gap: 0.45em; }
.hb-unmute .hb-unmute-on { display: none; }
.hb-unmute svg { flex: none; width: 1.2em; height: 1.2em; color: var(--hb-orange); }
.hb-unmute:hover { background: rgba(10, 22, 40, 0.95); }
@keyframes hb-unmute {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 168, 56, 0.7), 0 0 1em rgba(232, 168, 56, 0.45); }
  60% { box-shadow: 0 0 0 0.9em rgba(232, 168, 56, 0), 0 0 2.2em rgba(232, 168, 56, 0.85); }
}
/* Once sound is on (TW #3677) the same spot offers "Tap to mute": calm, no glow. */
/* The opening beat: the copy of the button that starts mid-hero and drops onto the phone (Steve 2026-10-18). */
.hb-unmute.hb-unmute-intro { z-index: 30; bottom: auto !important; transform: translate(-50%, -50%); }   /* placed by top only: the
   phone layouts' own bottom on .hb-unmute pinned it top and bottom, a tall rectangle (Steve 2026-10-19) */
.hb-unmute.is-waiting { visibility: hidden; }
.hb-phone.is-sound .hb-unmute {
  animation: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(10, 22, 40, 0.72);
  font-weight: 600;
}
.hb-phone.is-sound .hb-unmute-off { display: none; }
.hb-phone.is-sound .hb-unmute .hb-unmute-on { display: inline-flex; }
.hb-phone.is-sound .hb-unmute svg { color: #fff; }

/* Lock screen */
.hb-lock {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(77, 132, 214, 0.55) 0%, rgba(77, 132, 214, 0) 70%),
    linear-gradient(170deg, var(--hb-brand) 0%, #10305c 55%, #0a1628 100%);
  color: #fff;
  text-align: center;
}
.hb-lock-mark {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 6.5em;
  height: 6.5em;
  margin-left: -3.25em;
  opacity: 0.16;
}
.hb-lock-clock {
  position: absolute;
  left: 0;
  right: 0;
  top: 3.3em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hb-lock-date { font-size: 0.95em; font-weight: 500; opacity: 0.88; }
.hb-lock-time { font-size: 4.6em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.hb-sleep {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: #000;
  opacity: 0.55;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.hb-phone.is-awake .hb-sleep { opacity: 0; }

/* Notification card (in the screen, and the copy that pops out) */
.hb-notif,
.hb-pop {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  padding: 0.8em 0.9em;
  border-radius: 1.3em;
  background: rgba(244, 245, 248, 0.92);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 0.6em 1.8em rgba(0, 0, 0, 0.3);
  color: #111;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', sans-serif;
}
.hb-notif {
  position: absolute;
  top: 11.4em;
  left: 0.6em;
  right: 0.6em;
  z-index: 6;
  opacity: 0;
  transform: translateY(-1.4em) scale(0.94);
  transition: transform 0.6s cubic-bezier(0.2, 1.3, 0.35, 1), opacity 0.3s ease;
}
.hb-phone.is-notified .hb-notif { opacity: 1; transform: none; }
.hb-notif.is-pressed { transform: scale(0.96); transition-duration: 0.15s; }
.hb-notif-icon { flex: 0 0 auto; width: 2.7em; height: 2.7em; }
.hb-notif-icon svg { display: block; width: 100%; height: 100%; }
.hb-notif-text { min-width: 0; flex: 1; }
.hb-notif-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  font-size: 0.74em;
  line-height: 1.3;
  color: #5d6370;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hb-notif-title { margin-top: 0.15em; font-size: 1.02em; font-weight: 700; line-height: 1.25; color: #0d1117; }
.hb-notif-body { margin-top: 0.1em; font-size: 0.9em; line-height: 1.3; color: #2c313a; }

/* Played up: the alert pops out of the phone, bigger, then settles back in. */
.hb-pop {
  position: absolute;
  top: 12.1em;
  left: 1.3em;
  right: 1.3em;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 1.4em 3.4em rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(232, 168, 56, 0.85), 0 0 2.4em rgba(232, 168, 56, 0.5);
}
.hb-phone.is-pop .hb-pop { animation: hb-pop 1.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes hb-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(0.9); }
  16% { opacity: 1; transform: translate(var(--hb-pop-x), var(--hb-pop-y)) scale(var(--hb-pop-s, 1.32)); }
  72% { opacity: 1; transform: translate(var(--hb-pop-x), var(--hb-pop-y)) scale(var(--hb-pop-s, 1.32)); }
  100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
.hb-rings { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hb-rings span {
  position: absolute;
  inset: 0;
  border-radius: 3.3em;
  border: 2px solid rgba(232, 168, 56, 0.85);
  opacity: 0;
}
.hb-phone.is-ring .hb-rings span { animation: hb-ring 1.3s ease-out both; }
.hb-phone.is-ring .hb-rings span:nth-child(2) { animation-delay: 0.22s; }
.hb-phone.is-ring .hb-rings span:nth-child(3) { animation-delay: 0.44s; }
@keyframes hb-ring {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22, 1.12); }
}

/* The app: the contract survey */
.hb-app {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #eef1f5;
  opacity: 0;
  transform: scale(0.84);
  transform-origin: 50% 32%;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hb-app:not(.is-current) { display: none; }
.hb-phone.is-app .hb-app.is-current { opacity: 1; transform: none; }
.hb-app-status {
  height: 2.75em;
  padding: 0 1.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hb-brand);
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
}
.hb-appbar {
  height: 3.1em;
  padding: 0 0.9em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  background: var(--hb-brand);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.hb-back { font-size: 1.6em; line-height: 1; opacity: 0.9; }
.hb-appbar-title { flex: 1; font-size: 1.02em; font-weight: 600; text-align: center; }
.hb-appbar-logo { width: 1.8em; height: 1.8em; }
.hb-appbar-logo svg { display: block; width: 100%; height: 100%; }
.hb-survey { padding: 0.85em 0.9em; }
.hb-survey-intro {
  padding: 0.7em 0.8em;
  border-radius: 0.8em;
  background: #fff;
  font-size: 0.8em;
  line-height: 1.4;
  color: #39414d;
}
.hb-survey-intro b { display: block; color: #0d1117; font-size: 1.08em; }
.hb-q { margin-top: 0.85em; }
.hb-q-label { font-size: 0.8em; font-weight: 700; line-height: 1.3; color: #1b2430; }
.hb-opt {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.35em;
  padding: 0.5em 0.65em;
  border-radius: 0.6em;
  background: #fff;
  border: 1.5px solid transparent;
  font-size: 0.8em;
  color: #1b2430;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hb-radio {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  border: 2px solid #a3adbc;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hb-opt.is-on { background: #e8f0fb; border-color: var(--hb-brand); }
.hb-opt.is-on .hb-radio { border-color: var(--hb-brand); box-shadow: inset 0 0 0 0.2em #fff, inset 0 0 0 1em var(--hb-brand); }
.hb-scale { display: flex; gap: 0.35em; margin-top: 0.4em; }
.hb-scale span {
  flex: 1;
  padding: 0.45em 0;
  border-radius: 0.5em;
  background: #fff;
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
  color: #1b2430;
  transition: background 0.2s ease, color 0.2s ease;
}
.hb-scale span.is-on { background: var(--hb-brand); color: #fff; }
.hb-scale-ends { display: flex; justify-content: space-between; margin-top: 0.25em; font-size: 0.66em; color: #6b7482; }
.hb-submit {
  margin-top: 0.95em;
  padding: 0.62em;
  border-radius: 0.7em;
  background: var(--hb-brand);
  color: #fff;
  text-align: center;
  font-size: 0.88em;
  font-weight: 700;
  transition: transform 0.15s ease, background 0.15s ease;
}
.hb-submit.is-pressed { transform: scale(0.97); background: #163f7b; }
.hb-thanks {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.35;
  color: #1f6b3e;
  text-align: center;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
}
.hb-thanks.is-on { opacity: 1; max-height: 4em; margin-top: 0.6em; }
.hb-tap {
  position: absolute;
  z-index: 8;
  width: 2.8em;
  height: 2.8em;
  margin: -1.4em 0 0 -1.4em;
  border-radius: 50%;
  background: rgba(10, 22, 40, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.85);
  opacity: 0;
  pointer-events: none;
}
.hb-tap.is-on { animation: hb-tap 0.55s ease-out; }
@keyframes hb-tap {
  0% { opacity: 0; transform: scale(1.4); }
  35% { opacity: 1; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* The app: the night shift's overtime sign-up (Local 2, Boston), TW #3663 */
.hb-ot { padding: 0.85em 0.9em; }
.hb-shift {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.45em;
  padding: 0.5em 0.65em;
  border-radius: 0.6em;
  background: #fff;
  border: 1.5px solid transparent;
  font-size: 0.78em;
  line-height: 1.3;
  color: #5d6370;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hb-shift b { display: block; font-size: 1.05em; color: #0d1117; }
.hb-box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 0.3em;
  border: 2px solid #a3adbc;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hb-box::after {
  content: '';
  width: 0.3em;
  height: 0.55em;
  margin-top: -0.12em;
  border: solid #fff;
  border-width: 0 0.13em 0.13em 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hb-shift.is-on { background: #e9f3ee; background: color-mix(in srgb, var(--hb-brand) 11%, #fff); border-color: var(--hb-brand); }
.hb-shift.is-on .hb-box { background: var(--hb-brand); border-color: var(--hb-brand); }
.hb-shift.is-on .hb-box::after { opacity: 1; }
.hb-ot .hb-submit.is-pressed { background: var(--hb-brand); filter: brightness(0.85); }

/* The app: the union's event calendar (lobby day) */
.hb-events { padding: 0.8em 0.9em; }
.hb-cal { padding: 0.65em 0.7em 0.55em; border-radius: 0.8em; background: #fff; }
.hb-cal-head { font-size: 0.82em; font-weight: 700; color: #1b2430; margin-bottom: 0.4em; }
.hb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 0.18em; text-align: center; }
.hb-cal-grid span { font-size: 0.66em; line-height: 1.9; color: #39414d; border-radius: 50%; }
.hb-cal-grid .hb-dow { font-weight: 700; color: #8a93a1; }
.hb-cal-grid .hb-day-event { position: relative; font-weight: 700; color: var(--hb-brand); }
.hb-cal-grid .hb-day-event::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.1em;
  width: 0.35em;
  height: 0.35em;
  margin-left: -0.175em;
  border-radius: 50%;
  background: var(--hb-brand);
}
.hb-cal-grid .is-sel { background: var(--hb-brand); color: #fff; }
.hb-cal-grid .is-sel::after { background: #fff; }
.hb-event {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.5em;
  padding: 0.55em 0.65em;
  border-radius: 0.7em;
  background: #fff;
}
.hb-event.is-featured { box-shadow: inset 0 0 0 1.5px var(--hb-brand); }
.hb-event-date {
  flex: 0 0 2.6em;
  padding: 0.25em 0;
  border-radius: 0.5em;
  background: #eef1f5;
  text-align: center;
  line-height: 1.1;
  color: var(--hb-brand);
}
.hb-event-date b { display: block; font-size: 1.05em; }
.hb-event-date span { display: block; font-size: 0.6em; font-weight: 700; text-transform: uppercase; }
.hb-event-text { flex: 1; min-width: 0; font-size: 0.74em; line-height: 1.3; color: #5d6370; }
.hb-event-text b { display: block; font-size: 1.08em; color: #0d1117; }
.hb-event-go {
  flex: 0 0 auto;
  padding: 0.4em 0.6em;
  border-radius: 0.6em;
  border: 1.5px solid var(--hb-brand);
  color: var(--hb-brand);
  font-size: 0.7em;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.hb-event-go .hb-go-on { display: none; }
.hb-event-go.is-on { background: var(--hb-brand); color: #fff; }
.hb-event-go.is-on .hb-go-off { display: none; }
.hb-event-go.is-on .hb-go-on { display: inline; }

/* The app: a news story (joint bargaining update) */
.hb-article { position: absolute; top: 5.3em; left: 0; right: 0; bottom: 0; overflow: hidden; }
.hb-article-inner { transition: transform 1.8s cubic-bezier(0.3, 0.1, 0.2, 1); }
.hb-article.is-scrolled .hb-article-inner { transform: translateY(-5.5em); }
.hb-article-hero {
  position: relative;
  overflow: hidden;
  height: 9em;
  display: flex;
  align-items: flex-end;
  padding: 0.8em 0.9em;
  background:
    radial-gradient(90% 120% at 85% 10%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, var(--hb-brand) 0%, #2a0f1a 100%);
  color: #fff;
}
/* The photo (TW #3656) fills the banner; a dark fade at the foot keeps the label readable. */
.hb-article-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hb-article-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%); }
.hb-article-hero span {
  position: relative;
  z-index: 1;
  padding: 0.25em 0.6em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hb-article-body { padding: 0.8em 0.95em 1em; background: #fff; }
.hb-article-meta { font-size: 0.66em; font-weight: 600; color: #6b7482; text-transform: uppercase; letter-spacing: 0.04em; }
.hb-article-body h4 { margin: 0.3em 0 0.4em; font-size: 1.15em; line-height: 1.2; color: #0d1117; font-family: inherit; }
.hb-article-body p { margin: 0 0 0.6em; font-size: 0.8em; line-height: 1.45; color: #2c313a; }

/* The app: the searchable contract (national agreement) */
.hb-contract { padding: 0.8em 0.9em; }
.hb-search {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 0.7em;
  border-radius: 0.7em;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--hb-brand);
  font-size: 0.8em;
  color: #0d1117;
}
.hb-search svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; color: #6b7482; }
.hb-search-text:empty::before { content: 'Search the contract'; color: #8a93a1; }
.hb-caret { width: 1.5px; height: 1.1em; background: var(--hb-brand); animation: hb-caret 1s steps(1) infinite; }
@keyframes hb-caret { 50% { opacity: 0; } }
.hb-contract-note { margin: 0.7em 0 0.2em; font-size: 0.66em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6b7482; }
.hb-art {
  margin-top: 0.35em;
  padding: 0.5em 0.7em;
  border-radius: 0.6em;
  background: #fff;
  font-size: 0.78em;
  line-height: 1.35;
  color: #39414d;
  max-height: 3.2em;
  overflow: hidden;
  transition: max-height 0.45s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease, box-shadow 0.2s ease;
}
.hb-art b { display: block; color: #0d1117; }
.hb-art p { margin: 0.15em 0 0; font-size: 1em; line-height: 1.35; color: #39414d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-contract.is-searched .hb-art[data-match] p { white-space: normal; }
.hb-art mark { background: rgba(232, 168, 56, 0.35); color: inherit; border-radius: 0.2em; padding: 0 0.1em; }
.hb-contract.is-searched .hb-art:not([data-match]) { max-height: 0; opacity: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
.hb-contract.is-searched .hb-art[data-match] { max-height: 4.6em; }
.hb-art.is-open { max-height: 9em !important; box-shadow: inset 0 0 0 1.5px var(--hb-brand); }

/* The app: a message with a PDF guide (the Canadian national's labour law) */
.hb-guide { position: absolute; top: 5.3em; left: 0; right: 0; bottom: 0; overflow: hidden; }
.hb-msg { padding: 0.85em 0.95em; }
.hb-msg-card { padding: 0.8em 0.85em; border-radius: 0.8em; background: #fff; }
.hb-msg-meta { font-size: 0.64em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7482; }
.hb-msg h4 { margin: 0.3em 0 0.4em; font-size: 1.02em; line-height: 1.25; color: #0d1117; font-family: inherit; }
.hb-msg p { margin: 0 0 0.55em; font-size: 0.78em; line-height: 1.45; color: #2c313a; }
.hb-pdf-link {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.3em;
  padding: 0.55em 0.65em;
  border-radius: 0.7em;
  background: #f4f5f8;
  box-shadow: inset 0 0 0 1.5px var(--hb-brand);
  transition: transform 0.15s ease;
}
.hb-pdf-link.is-pressed { transform: scale(0.97); }
.hb-pdf-icon {
  flex: 0 0 auto;
  width: 2.2em;
  height: 2.6em;
  display: grid;
  place-items: center;
  border-radius: 0.35em;
  background: var(--hb-brand);
  color: #fff;
  font-size: 0.62em;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.hb-pdf-text { font-size: 0.74em; line-height: 1.3; color: #5d6370; }
.hb-pdf-text b { display: block; color: #0d1117; font-size: 1.05em; }
.hb-pdf {
  position: absolute;
  inset: 0;
  background: #4a4d52;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.hb-guide.is-pdf .hb-pdf { transform: none; }
.hb-pdf-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 0.8em;
  background: #2f3236;
  color: #fff;
  font-size: 0.7em;
  font-weight: 600;
}
.hb-pdf-page {
  margin: 0.8em;
  padding: 0 0 1em;
  background: #fff;
  box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.35);
  color: #2c313a;
}
.hb-pdf-band { padding: 0.55em 0.8em; background: var(--hb-brand); color: #fff; font-size: 0.56em; font-weight: 800; letter-spacing: 0.1em; }
.hb-pdf-title { padding: 0.7em 0.8em 0.1em; font-size: 1.05em; font-weight: 800; line-height: 1.15; color: #0d1117; }
.hb-pdf-sub { padding: 0 0.95em 0.5em; font-size: 0.66em; color: #5d6370; }
.hb-pdf-h { padding: 0.5em 0.95em 0.15em; font-size: 0.66em; font-weight: 800; color: var(--hb-brand); text-transform: uppercase; letter-spacing: 0.05em; }
.hb-pdf-page p { margin: 0; padding: 0 0.95em; font-size: 0.62em; line-height: 1.45; color: #2c313a; }

/* The app: the convention schedule (the international) */
.hb-sched { padding: 0.8em 0.9em; }
.hb-sched-head { padding: 0.7em 0.8em; border-radius: 0.8em; background: #fff; }
.hb-sched-head b { display: block; font-size: 0.95em; color: #0d1117; }
.hb-sched-head span { font-size: 0.7em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hb-brand); }
.hb-sched-item {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 0.45em;
  padding: 0.6em 0.75em;
  border-radius: 0.7em;
  background: #fff;
}
.hb-sched-item time { flex: 0 0 4.4em; font-size: 0.74em; font-weight: 800; color: var(--hb-brand); }
.hb-sched-item div { flex: 1; min-width: 0; font-size: 0.72em; line-height: 1.3; color: #6b7482; }
.hb-sched-item div b { display: block; font-size: 1.12em; color: #0d1117; }
.hb-sched-item.is-live { box-shadow: inset 0 0 0 1.5px var(--hb-brand); }
.hb-live {
  flex: 0 0 auto;
  padding: 0.2em 0.45em;
  border-radius: 0.35em;
  background: #c62828;
  color: #fff;
  font-size: 0.56em;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.hb-sched-break { background: #f4f5f8; }
.hb-sched-break div b { font-weight: 600; color: #5d6370; }
.hb-watch {
  margin-top: 0.7em;
  padding: 0.62em;
  border-radius: 0.7em;
  background: var(--hb-brand);
  color: #fff;
  text-align: center;
  font-size: 0.85em;
  font-weight: 700;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.hb-watch.is-pressed { transform: scale(0.97); filter: brightness(0.9); }
.hb-watch .hb-watch-on { display: none; }
.hb-watch.is-on .hb-watch-off { display: none; }
.hb-watch.is-on .hb-watch-on { display: inline; }

/* ---- Tablets and phones: copy, then the map band, then the phone just below it ----------- */
@media (max-width: 1080px) {
  .hero.hb { --hb-phone-w: min(64vw, 290px); padding-bottom: 2.5rem; }
  .hero.hb::before {
    background: linear-gradient(180deg, rgba(10, 22, 40, 0.88) 0%, rgba(10, 22, 40, 0.55) 22%, rgba(10, 22, 40, 0) 34%);
  }
  .hb-inner { flex-direction: column; align-items: center; gap: 1.25rem; }
  .hb-copy { flex: none; max-width: 640px; text-align: center; }
  .hb-stage { flex: none; width: 100%; flex-direction: column; align-items: center; }
  .hb-chapter { position: relative; align-items: center; margin-bottom: 0.25rem; }
  .hb-chapter-title span { font-size: 1.15rem; }
  .hb-controls { padding-left: 0; }
  .hb-focus {
    position: relative;
    inset: auto;
    width: 100%;
    height: 360px;
    --hb-span-scale: 1.4;
    --hb-office-x: 0.6;
    --hb-office-y: 0.58;
    --hb-card-pos: corner;
  }
  .hb-phone { flex: none; margin-top: -2.5rem; --hb-pop-x: 0%; --hb-pop-y: -34%; }
  /* A compact strip across the top of the map: the message left, the count right. */
  .hb-card-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0.75rem;
  }
  .hb-card-eyebrow, .hb-card-to, .hb-card-msg { grid-column: 1; }
  .hb-card-to { margin-top: 0.2rem; font-size: 0.75rem; }
  .hb-card-msg { font-size: 0.85rem; }
  .hb-card-foot { grid-column: 2; grid-row: 1 / span 3; margin: 0; min-height: 0; text-align: right; }
  /* The Send button sits over the count it turns into, so the card keeps one size (it used to start tall and then
     jump, Steve 2026-10-18). */
  .hb-card-send { top: 50%; bottom: auto; transform: translateY(-50%); }
  .hb-card-send.is-pressed { transform: translateY(-50%) scale(0.92); }
  .hb-card-stat { align-items: flex-end; }
  .hb-card-num { font-size: 1.6rem; }
  .hb-card-label { font-size: 0.62rem; }
  .hb-card-label small { display: block; margin-left: 0; }
  .hb-card-bar { margin-top: 0.3rem; }
}

/* ---- Phone layouts for Steve to choose from (2026-10-18). A class on the hero picks one; none = today's. ---------- */
@media (max-width: 1080px) {
  /* Story first: the chapter, the map and the phone on top, then the headline and the button. */
  .hero.hb.hb-story-first { padding-top: 1.25rem; }
  .hero.hb.hb-story-first .hb-stage { order: 1; }
  .hero.hb.hb-story-first .hb-copy { order: 2; margin-top: 0.25rem; }
  .hero.hb.hb-story-first::before {
    background: linear-gradient(0deg, rgba(10, 22, 40, 0.94) 0%, rgba(10, 22, 40, 0.72) 32%, rgba(10, 22, 40, 0) 50%);
  }
  /* The small phone, about half size, beside the map: the send card across the top, the map left, the phone right. */
  .hero.hb.hb-mini { --hb-phone-w: 36vw; }
  .hero.hb.hb-mini .hb-focus {
    --hb-mini: 1;
    --hb-office-x: 0.5;
    --hb-office-y: 0.56;
    height: calc(var(--hb-phone-w) * 606 / 290 + 7.75rem);
  }
  .hero.hb.hb-mini .hb-phone {
    position: absolute;
    left: -0.25rem;   /* left, and close to the edge: the site's floating trial button sits bottom right */
    bottom: 0.4rem;
    margin-top: 0;
    --hb-pop-x: 80%;
    --hb-pop-y: 8%;
    --hb-pop-s: 2.2;
  }
  /* Narrow enough to clear the site's floating trial button, which shares the bottom of the first screen. */
  .hero.hb.hb-mini .hb-unmute { font-size: 10px; bottom: 1.1em; padding: 0.7em 0.85em; gap: 0.35em; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-card-in, .hb-card-send, .hb-card-stat, .hb-card-bar, .hb-sleep, .hb-notif, .hb-app, .hb-body { transition: none; }
  .hb-card-dot { animation: none; }
  .hb-phone.is-pop .hb-pop, .hb-phone.is-ring .hb-rings span, .hb-phone.is-buzz .hb-shake { animation: none; }
  .hb-unmute { display: none; }   /* a still frame has nothing to hear */
}
.hb-lock-status { position: absolute; top: 1.15em; right: 1.8em; color: #fff; line-height: 0; }
.hb-contract:not(.is-searched) mark { background: none; padding: 0; }

/* ---- Phone layout E (Steve 2026-10-18: "put the phone and map side-by-side with push notification box above"): on
   the small-phone layout (.hb-mini .hb-e), the send card on top, then one framed row: the phone, smaller (30vw), on the
   left (clear of the site's floating trial button) and the map beside it, level with the phone. ---------------------- */
@media (max-width: 1080px) {
  .hero.hb.hb-e { --hb-phone-w: 33vw; padding-top: 1.5rem; }   /* pops out of the map panel above and below */
  .hero.hb.hb-e .hb-focus {
    --hb-frame: 1;
    --hb-office-x: 0.5;
    --hb-office-y: 0.48;   /* the union's name stays above the site's floating trial button */
    --hb-span-scale: 1.15;
    height: calc(var(--hb-phone-w) * 606 / 290 + 8.85rem);   /* the card, then the phone close under it (Steve 2026-10-19) */
  }
  .hero.hb.hb-e .hb-phone { left: 0.6rem; bottom: 0.6rem; --hb-pop-x: 72%; --hb-pop-y: 6%; --hb-pop-s: 2.1; }
  .hero.hb.hb-e .hb-chapter-title span { font-size: clamp(2.6rem, 9vw, 3.4rem); }   /* much bigger on phones; fitTitle() fits it to the width (Steve 2026-10-19) */
  .hero.hb .hb-office.is-compact { display: none; }   /* seven locals on a phone's map: their markers only, the labels piled up */
  /* The label across the card's top, about 1.6x the To line (Steve 2026-10-18); the count beside To and the message. */
  .hero.hb.hb-e .hb-card-eyebrow { grid-column: 1 / -1; grid-row: 1; font-size: 1.35rem; letter-spacing: 0.08em; gap: 0.45em; margin-bottom: 0.1rem; }
  .hero.hb.hb-e .hb-card-to { font-size: 0.9rem; }   /* bigger (Steve 2026-10-18) */
  .hero.hb.hb-e .hb-card-dot { width: 0.42em; height: 0.42em; }
  .hero.hb.hb-e .hb-card-to { grid-column: 1; grid-row: 2; }
  .hero.hb.hb-e .hb-card-msg { grid-column: 1; grid-row: 3; }
  .hero.hb.hb-e .hb-card-foot { grid-row: 2 / span 2; }
  /* The music credit goes under the band; the chapter title and its controls stay on top. */
  .hero.hb.hb-e .hb-chapter { display: contents; }
  .hero.hb.hb-e .hb-chapter-title { order: 1; }
  .hero.hb.hb-e .hb-controls { order: 2; margin-bottom: 0.5rem; }
  .hero.hb.hb-e .hb-focus { order: 3; }
  .hero.hb.hb-e .hb-credit { order: 4; margin-top: 0.75rem; padding-left: 0; text-align: center; }
  .hero.hb.hb-e .hb-unmute { font-size: 9px; bottom: 1em; padding: 0.7em 0.8em; gap: 0.3em; }
  .hero.hb.hb-e::after {   /* the row's panel edge; the script measures where */
    content: '';
    display: block;
    position: absolute;
    left: var(--hb-frame-x, 0);
    top: var(--hb-frame-y, 0);
    width: var(--hb-frame-w, 0);
    height: var(--hb-frame-h, 0);
    border: 1px solid rgba(232, 168, 56, 0.35);
    border-radius: 16px;
    z-index: 1;
    pointer-events: none;
    /* Only the edge: the site styles this ::after as a dark blurred orb drifting on a loop (application.css
       .hero::after); left on, it rolled back and forth across the map (Steve 2026-10-18). */
    right: auto;
    bottom: auto;
    background: none;
    filter: none;
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/* ---- Tablets and narrow desktop windows, 640 to 1080px (Steve 2026-10-19: "improve this layout for smaller browser
   width. shorten the push alert box and put the for ___ text to the right of it"): one row, the card (shorter) on the
   left, the chapter's title and steps on the right, centred on it; the phone and map below; the credit under the map. */
@media (min-width: 640px) and (max-width: 1080px) {
  .hero.hb.hb-e { --hb-card-w2: clamp(300px, 44vw, 420px); }
  .hero.hb.hb-e .hb-focus { --hb-card-row: 1; height: calc(var(--hb-phone-w) * 606 / 290 + 1.2rem); }
  .hero.hb.hb-e .hb-card { width: var(--hb-card-w2); }
  .hero.hb.hb-e .hb-chapter {
    display: flex;
    position: static;
    order: 1;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 7rem;
    padding-left: calc(var(--hb-card-w2) + 1.25rem);
    box-sizing: border-box;
    margin-bottom: 0.75rem;
  }
  .hero.hb.hb-e .hb-chapter-title span { font-size: clamp(2rem, 4.6vw, 3rem); }   /* bigger (Steve: "could go bigger") */
  .hero.hb.hb-e .hb-controls { margin-bottom: 0; }
  .hero.hb.hb-e .hb-credit { position: absolute; left: auto; right: 0; top: calc(100% + 0.6rem); margin: 0; text-align: right; }
}

/* ---- Phone layout F (Steve 2026-10-18): E with the headline first, then the story, then the paragraph and the button.
   The copy's box steps aside (display: contents) so its parts can sit on either side of the story. ------------------ */
@media (max-width: 1080px) {
  .hero.hb.hb-f .hb-copy { display: contents; }
  .hero.hb.hb-f .hb-copy h1 { order: 1; margin-bottom: 0; }
  .hero.hb.hb-f .hb-stage { order: 2; }
  .hero.hb.hb-f .hb-copy p { order: 3; max-width: 640px; margin: 0.5rem 0 1.5rem; }
  .hero.hb.hb-f .hb-copy .btn { order: 4; }
}

/* ---- Layout G on desktops (Steve 2026-10-18: "mimic this layout for desktop ... put the type of locals above the map
   on the right. and place the sending box to the left above the phone"). The story first, in two columns: the send card
   over the phone on the left, the chapter title over the map panel on the right, the music credit under them; then the
   headline, the paragraph and the button, centred. The phone pops out of the panel above and below. ---------------- */
@media (min-width: 1081px) {
  /* A bigger phone whose top is level with the push box (Steve 2026-10-18: "you can make the phone taller/bigger. make
     the top of the phone so it's even with the push indicator"). */
  .hero.hb.hb-desk-g { --hb-phone-w: clamp(280px, 20vw, 360px); --hb-card-w: clamp(330px, 30vw, 480px); padding-top: 2rem; padding-bottom: 3rem; }
  .hero.hb.hb-desk-g::before { background: none; }
  .hero.hb.hb-desk-g .hb-inner { flex-direction: column; align-items: stretch; gap: 1.5rem; max-width: min(1600px, 92vw); }   /* room for the big title beside the card */
  .hero.hb.hb-desk-g .hb-stage {
    order: 1;
    flex: none;
    width: 100%;
    display: grid;
    grid-template-columns: max(calc(var(--hb-phone-w) + 3rem), 310px) minmax(0, 1fr);
    grid-template-rows: minmax(9.25rem, auto) auto;
    column-gap: 2.25rem;
    row-gap: 0.9rem;
  }
  /* Over the map's right end, one row: the chapter's title, bigger, then its steps and the speaker. The send card sits
     over the map's left end (placed by the script). The music credit goes under the phone and the map. */
  /* The chapter's title, big, with its steps and the speaker under it, at the right end over the map (Steve 2026-10-18:
     "move slide indicator underneath for ___ and make for bigger"). Static, so the music credit below is placed by the
     stage, under the map on the right. */
  .hero.hb.hb-desk-g .hb-chapter {
    position: static;
    grid-area: 1 / 2;
    justify-self: end;
    align-self: end;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
    max-width: calc(100% - var(--hb-card-w) - 1.5rem);
  }
  .hero.hb.hb-desk-g .hb-chapter-title span { font-size: clamp(2rem, 3.6vw - 0.8rem, 3.6rem); line-height: 1; }   /* much bigger (Steve 2026-10-18) */
  .hero.hb.hb-desk-g .hb-controls { padding-left: 0; }
  .hero.hb.hb-desk-g .hb-credit { position: absolute; left: auto; right: 0; top: calc(100% + 0.6rem); padding-left: 0; margin: 0; text-align: right; }   /* under the map, right */
  .hero.hb.hb-desk-g .hb-phone { grid-area: 1 / 1 / 3 / 2; align-self: start; justify-self: center; --hb-pop-x: 78%; --hb-pop-y: 8%; }
  .hero.hb.hb-desk-g .hb-focus {
    position: relative;
    inset: auto;
    grid-area: 2 / 2;
    align-self: start;
    /* From under the push box's row to 5% above the phone's foot, so the phone still stands out below. */
    height: calc(var(--hb-phone-w) * 606 / 290 * 0.95 - 10.15rem);
    --hb-frame: 1;
    --hb-panel: 1;
    --hb-card-pos: map;
    --hb-office-x: 0.5;
    --hb-office-y: 0.5;
    --hb-span-scale: 1.45;   /* zoomed out: each place fits the panel's height with room (Westfield was cut off) */
  }
  .hero.hb.hb-desk-g .hb-copy { order: 2; flex: none; max-width: 780px; margin: 0 auto; text-align: center; }
  .hero.hb.hb-desk-g::after {   /* the map panel's edge; the script measures where */
    content: '';
    display: block;
    position: absolute;
    left: var(--hb-frame-x, 0);
    top: var(--hb-frame-y, 0);
    width: var(--hb-frame-w, 0);
    height: var(--hb-frame-h, 0);
    border: 1px solid rgba(232, 168, 56, 0.35);
    border-radius: 16px;
    z-index: 1;
    pointer-events: none;
    /* Only the edge: the site styles this ::after as a dark blurred orb drifting on a loop (application.css
       .hero::after); left on, it rolled back and forth across the map (Steve 2026-10-18). */
    right: auto;
    bottom: auto;
    background: none;
    filter: none;
    opacity: 1;
    animation: none;
    transform: none;
  }
  /* The send card, compact: the message left, the count right, the Send button over the count. */
  .hero.hb.hb-desk-g .hb-card { width: var(--hb-card-w); }
  .hero.hb.hb-desk-g .hb-card-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center; padding: 0.75rem 1rem; }
  /* The label across the card's top, about 1.7x the To line (Steve 2026-10-18); the count beside To and the message. */
  .hero.hb.hb-desk-g .hb-card-eyebrow { grid-column: 1 / -1; grid-row: 1; font-size: 1.6rem; letter-spacing: 0.08em; gap: 0.5em; margin-bottom: 0.15rem; }
  .hero.hb.hb-desk-g .hb-card-dot { width: 0.42em; height: 0.42em; }
  .hero.hb.hb-desk-g .hb-card-to { grid-column: 1; grid-row: 2; }
  .hero.hb.hb-desk-g .hb-card-msg { grid-column: 1; grid-row: 3; }
  .hero.hb.hb-desk-g .hb-card-to { margin-top: 0.25rem; font-size: 1.05rem; }   /* bigger (Steve 2026-10-18) */
  .hero.hb.hb-desk-g .hb-card-msg { font-size: 1.05rem; }
  .hero.hb.hb-desk-g .hb-card-foot { grid-column: 2; grid-row: 2 / span 2; margin: 0; min-height: 0; text-align: right; }
  .hero.hb.hb-desk-g .hb-card-send { top: 50%; bottom: auto; transform: translateY(-50%); }
  .hero.hb.hb-desk-g .hb-card-send.is-pressed { transform: translateY(-50%) scale(0.92); }
  .hero.hb.hb-desk-g .hb-card-stat { align-items: flex-end; }
  .hero.hb.hb-desk-g .hb-card-num { font-size: clamp(2rem, 2.4vw, 2.8rem); }   /* the counter, big (Steve: "too small"), with room for the message */
  .hero.hb.hb-desk-g .hb-card-label { font-size: 0.72rem; }
  .hero.hb.hb-desk-g .hb-card-label small { display: block; margin-left: 0; }
  .hero.hb.hb-desk-g .hb-card-bar { margin-top: 0.3rem; }
}

/* Desktop G in narrow desktop windows: the card's label and To line one step smaller, still 1.5x apart, so the label
   stays on one line and the card clears the map. */
@media (min-width: 1081px) and (max-width: 1200px) {
  .hero.hb.hb-desk-g .hb-card-eyebrow { font-size: 1.25rem; }
  .hero.hb.hb-desk-g .hb-card-to { font-size: 0.85rem; }
  .hero.hb.hb-desk-g .hb-card-msg { font-size: 0.95rem; }
}

/* ---- Wide browsers (Steve 2026-10-18: "pick the widest one and have it adapt as the browser size grows/shrinks").
   Every size is continuous, so nothing jumps: up to 1440px this is today's layout exactly; wider, the content widens
   with the window, reaching the widest option (94% of the window) at 1920px and stopping at 1840px; the phone keeps
   today's size to 1680px, then grows to 420px (never taller than the window leaves room for); the headline and the
   paragraph grow a little past 1900px. ------------------------------------------------------------------------------- */
@media (min-width: 1081px) {
  .hero.hb { --hb-phone-w: clamp(280px, max(min(23vw, 336px), min(20vw, calc((100vh - 290px) * 0.4785))), 420px); }
  .hero.hb .hb-inner { max-width: clamp(1200px, calc(1200px + (100vw - 1440px) * 1.26), 1840px); }
  .hero.hb .hb-copy { flex-basis: clamp(380px, max(min(33vw, 490px), 29vw), 600px); }
  .hero.hb .hb-copy h1 { font-size: clamp(2.3rem, max(min(3.25vw, 3.1rem), 2.6vw), 3.9rem); }
  .hero.hb .hb-copy p { font-size: clamp(1.25rem, 0.7rem + 0.45vw, 1.4rem); }
}