/* ==========================================================================
   PigeonRace — brand layer on top of Bootstrap 5
   ========================================================================== */

:root {
  --pr-navy-950: #0A1B33;
  --pr-navy-900: #102A43;
  --pr-navy-800: #1B3A5C;
  --pr-blue: #2563EB;
  --pr-blue-dark: #1D4ED8;
  --pr-blue-accent: #3B82F6;
  --pr-blue-soft: #EFF6FF;
  --pr-blue-tint: #DBEAFE;
  --pr-border: #D9E2EC;
  --pr-amber: #F59E0B;
  --pr-amber-light: #FEF3C7;
  --pr-success: #16A34A;
  --pr-success-bg: #DCFCE7;
  --pr-error: #DC2626;
  --pr-error-bg: #FEE2E2;
  --pr-bg: #FAF9F6;
  --pr-surface: #fff;
  --pr-text: #486581;
  --pr-heading: #102A43;
  --pr-muted: #486581;
  --pr-muted-2: #829AB1;
  --pr-gradient: linear-gradient(135deg, var(--pr-blue), var(--pr-blue-dark));

  --bs-body-font-family: 'Manrope', system-ui, sans-serif;
  --bs-body-color: var(--pr-text);
  --bs-body-bg: var(--pr-bg);
  --bs-link-color: var(--pr-blue);
  --bs-link-hover-color: var(--pr-blue-dark);
  --bs-primary: var(--pr-blue);
  --bs-primary-rgb: 37, 99, 235;
}

/* ---- dark mode (Bootstrap 5.3 color mode) ---- */
[data-bs-theme="dark"] {
  --pr-bg: #0A1B33;
  --pr-surface: #102A43;
  --pr-text: #B7C4D9;
  --pr-heading: #F3F6FB;
  --pr-muted: #93A5BD;
  --pr-muted-2: #6E84A0;
  --pr-border: rgba(255,255,255,.14);
}
[data-bs-theme="dark"] .pr-eyebrow { color: var(--pr-blue-accent); }
[data-bs-theme="dark"] .pr-navbar { background: rgba(10,27,51,.85); }
[data-bs-theme="dark"] .pr-navbar .nav-link { color: #E2E8F0; }
[data-bs-theme="dark"] .btn-pr-outline { border-color: rgba(255,255,255,.16); }
[data-bs-theme="dark"] .pr-card { border-color: rgba(255,255,255,.08); box-shadow: 0 2px 14px rgba(0,0,0,.35); }
[data-bs-theme="dark"] .pr-card.pr-hover:hover { box-shadow: 0 16px 36px rgba(0,0,0,.45); }
[data-bs-theme="dark"] .pr-filter-chip { border-color: rgba(255,255,255,.14); }
[data-bs-theme="dark"] .pr-step-dot { background: rgba(255,255,255,.18); }
[data-bs-theme="dark"] #roleLabel { color: var(--pr-blue-accent); }

body {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .pr-display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--pr-heading);
  letter-spacing: -0.01em;
}

a { text-decoration: none; }

.pr-container { max-width: 1280px; }

.pr-eyebrow {
  display: inline-block;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pr-blue-dark);
  margin-bottom: .75rem;
}
.pr-eyebrow.text-on-dark { color: #4ADE80; }

/* ---- buttons ---- */
.btn-pr-primary {
  background: var(--pr-gradient);
  border: none;
  color: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  border-radius: .75rem;
  padding: .85rem 1.75rem;
  box-shadow: 0 6px 18px rgba(29, 78, 216, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-pr-primary:hover, .btn-pr-primary:focus {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(29, 78, 216, .3);
}
.btn-pr-secondary {
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.24);
  color: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 600;
  border-radius: .75rem;
  padding: .78rem 1.6rem;
}
.btn-pr-secondary:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-pr-outline {
  background: var(--pr-surface);
  border: 1.5px solid rgba(16,42,67,.14);
  color: var(--pr-heading);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 600;
  border-radius: .65rem;
  padding: .7rem 1.4rem;
}
.btn-pr-outline:hover { border-color: var(--pr-blue); color: var(--pr-blue-dark); }
.btn-pr-white {
  background: #fff;
  border: none;
  color: var(--pr-navy-900);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  border-radius: .75rem;
  padding: .85rem 1.75rem;
}

/* ---- surfaces ---- */
.pr-card {
  background: var(--pr-surface);
  border-radius: 1.1rem;
  border: 1px solid rgba(16,42,67,.07);
  box-shadow: 0 2px 10px rgba(16,42,67,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pr-card.pr-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(16,42,67,.08);
}
.pr-card.pr-featured { border: 1.5px solid rgba(29,78,216,.35); }

.pr-icon-badge {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: .85rem;
  background: var(--pr-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pr-icon-badge.pr-soft {
  background: rgba(37,99,235,.1);
}
.pr-icon-badge.pr-soft svg { stroke: var(--pr-blue-dark); }

/* ---- dark sections ---- */
.pr-dark {
  background: radial-gradient(120% 100% at 50% 0%, var(--pr-navy-800) 0%, var(--pr-navy-900) 55%, var(--pr-navy-950) 100%);
  color: #fff;
}
.text-muted-light { color: rgba(255,255,255,.62) !important; }
.text-muted-2 { color: var(--pr-muted-2) !important; }
.pr-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pr-photo-bg.pr-screen {
  mix-blend-mode: screen;
}
.pr-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ---- nav ---- */
.pr-navbar {
  background: rgba(250,249,246,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pr-navbar .nav-link {
  white-space: nowrap;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 600;
  color: #102A43;
}
.pr-navbar .nav-link:hover { color: var(--pr-blue-dark); }
.pr-logo-badge {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .7rem;
  background: var(--pr-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(29,78,216,.24);
}
.pr-logo-mark {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  flex-shrink: 0;
}
.pr-wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  color: var(--pr-heading);
}
.pr-dark .pr-wordmark, .pr-wordmark.text-light-mark { color: #fff; }

/* ---- hero ---- */
.pr-hero { position: relative; overflow: hidden; padding: 6.5rem 0; }
.pr-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 100px; padding: .45rem 1rem; margin-bottom: 1.6rem;
}
.pr-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pr-success);
  box-shadow: 0 0 0 4px rgba(22,163,74,.25);
}

/* Pins a subtree to the light-mode token values regardless of data-bs-theme —
   used for elements (like a floating card) that must stay a fixed light
   surface on top of an always-dark section such as the hero photo. */
.pr-force-light {
  --pr-bg: #FAF9F6;
  --pr-surface: #fff;
  --pr-text: #486581;
  --pr-heading: #102A43;
  --pr-muted: #486581;
  --pr-muted-2: #829AB1;
  --pr-border: #D9E2EC;
}

/* ---- flying pigeon SVG ---- */
@keyframes flyAcross {
  0% { transform: translate(-180px, 30px); }
  25% { transform: translate(220px, -50px); }
  50% { transform: translate(680px, 15px); }
  75% { transform: translate(1120px, -45px); }
  100% { transform: translate(1620px, 20px); }
}
@keyframes flyAcrossSlow {
  0% { transform: translate(-160px, -20px) scale(.9); }
  30% { transform: translate(280px, 40px) scale(.9); }
  60% { transform: translate(760px, -25px) scale(.9); }
  100% { transform: translate(1600px, 30px) scale(.9); }
}
@keyframes wingUp { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wingDown { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
.fly-lead { animation: flyAcross 13s ease-in-out infinite; }
.fly-mid { animation: flyAcross 13s ease-in-out infinite; animation-delay: -5.5s; }
.fly-trail { animation: flyAcrossSlow 19s ease-in-out infinite; }
.wing-a { animation: wingUp .65s steps(1) infinite; }
.wing-b { animation: wingDown .65s steps(1) infinite; }
.fly-trail .wing-a, .fly-trail .wing-b { animation-duration: .85s; }
@media (prefers-reduced-motion: reduce) {
  .fly-lead, .fly-mid, .fly-trail, .wing-a, .wing-b { animation: none; }
}

/* ---- loading screen ---- */
@keyframes orbit {
  0% { transform: translate(0,0) rotate(-4deg); }
  25% { transform: translate(58px,-26px) rotate(7deg); }
  50% { transform: translate(0,-50px) rotate(-2deg); }
  75% { transform: translate(-58px,-26px) rotate(-9deg); }
  100% { transform: translate(0,0) rotate(-4deg); }
}
@keyframes barSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(220%); } }
@keyframes dotPulse { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }
.loading-pigeon { animation: orbit 4.2s ease-in-out infinite; }
.bar-fill { animation: barSlide 1.6s ease-in-out infinite; }
.pr-dot { animation: dotPulse 1.4s ease-in-out infinite; }
.pr-dot:nth-child(2) { animation-delay: .18s; }
.pr-dot:nth-child(3) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .loading-pigeon, .bar-fill, .pr-dot { animation: none; }
}


/* ---- animated RTC pigeon (loading screen hero) ---- */
.pr-load-stage {
  position: relative;
  width: min(480px, 86vw);
  aspect-ratio: 3 / 2;
}
.pr-load-stage > * { position: absolute; }

/* soft blue bloom behind the bird */
.pr-load-glow {
  left: 50%; top: 54%;
  width: 82%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.45) 0%, rgba(37,99,235,.16) 42%, transparent 70%);
  filter: blur(10px);
  z-index: 0;
  animation: prGlowPulse 3.4s ease-in-out infinite;
}
@keyframes prGlowPulse {
  0%, 100% { opacity: .6;  transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.12); }
}

/* dashed flight-path ellipse */
.pr-load-ring { left: -6%; top: 7%; width: 112%; height: 86%; z-index: 1; opacity: .45; }
.pr-load-ring ellipse { animation: prDash 9s linear infinite; }
@keyframes prDash { to { stroke-dashoffset: -120; } }

/* speed streaks sweeping in behind the wing */
.pr-load-streak {
  left: 0; height: 2px; width: 46%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(147,197,253,.5), transparent);
  filter: blur(1.2px);
  transform-origin: 50% 50%;
  z-index: 1;
  animation: prStreak 2.8s ease-in-out infinite;
}
.pr-load-streak:nth-of-type(1) { top: 56%; animation-delay: 0s; }
.pr-load-streak:nth-of-type(2) { top: 64%; width: 34%; animation-delay: .7s; }
.pr-load-streak:nth-of-type(3) { top: 48%; width: 28%; animation-delay: 1.5s; }
@keyframes prStreak {
  0%       { opacity: 0; transform: translateX(-30%) rotate(-7deg) scaleX(.5); }
  35%      { opacity: .85; }
  100%     { opacity: 0; transform: translateX(70%) rotate(-7deg) scaleX(1.15); }
}

/* the bird itself: entrance + endless soar, with a subtle wing beat */
.pr-load-flight {
  inset: 0;
  z-index: 2;
  transform-origin: 62% 60%;
  animation: prBirdIn 1.15s cubic-bezier(.2,.75,.25,1) both,
             prSoar 4.6s ease-in-out 1.15s infinite;
  will-change: transform;
}
.pr-load-beat {
  position: absolute; inset: 0;
  transform-origin: 62% 60%;
  animation: prWingBeat 1.6s ease-in-out infinite;
}
.pr-load-bird {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 42px rgba(37,99,235,.45));
}
@keyframes prBirdIn {
  0%   { opacity: 0; transform: translate(-16%, 18%) scale(.84) rotate(-9deg); }
  100% { opacity: 1; transform: translate(0,0) scale(1) rotate(0); }
}
@keyframes prSoar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-4%) rotate(1.8deg); }
  50%      { transform: translateY(-1.2%) rotate(0deg); }
  75%      { transform: translateY(2.6%) rotate(-1.8deg); }
}
@keyframes prWingBeat {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50%      { transform: scaleY(.955) scaleX(1.012); }
}

/* RTC leg-band broadcasting rings (ride along with the bird) */
.pr-load-ping {
  position: absolute;
  left: 56.5%; top: 72%;
  width: 9%; aspect-ratio: 1;
  margin: -4.5% 0 0 -4.5%;
  border-radius: 50%;
  border: 1.5px solid rgba(96,165,250,.75);
  opacity: 0;
  z-index: 3;
  animation: prPing 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.pr-load-ping:nth-of-type(2) { animation-delay: .8s; }
.pr-load-ping:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes prPing {
  0%   { opacity: 0;   transform: scale(.4); }
  15%  { opacity: .8; }
  100% { opacity: 0;   transform: scale(2.7); }
}

/* drifting feathers shed behind the flight path */
.pr-load-feather {
  z-index: 4;
  opacity: 0;
  animation: prFeather 6s ease-in-out infinite;
}
.pr-load-feather.pr-f1 { left: 30%; top: 46%; animation-delay: .6s; }
.pr-load-feather.pr-f2 { left: 38%; top: 60%; animation-delay: 2.4s; }
.pr-load-feather.pr-f3 { left: 24%; top: 68%; animation-delay: 4.1s; }
@keyframes prFeather {
  0%   { opacity: 0;   transform: translate(0,0) rotate(0deg) scale(.9); }
  12%  { opacity: .85; }
  70%  { opacity: .35; }
  100% { opacity: 0;   transform: translate(-90px, 58px) rotate(-150deg) scale(.65); }
}

@media (prefers-reduced-motion: reduce) {
  .pr-load-glow, .pr-load-ring ellipse, .pr-load-streak,
  .pr-load-flight, .pr-load-beat, .pr-load-ping, .pr-load-feather { animation: none; }
  .pr-load-streak, .pr-load-feather, .pr-load-ping { opacity: 0; }
}
/* ---- misc components ---- */
.pr-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .85rem;
  padding: 1rem;
}
.pr-filter-chip {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  border-radius: 100px;
  padding: .5rem 1.1rem;
  border: 1.5px solid rgba(16,42,67,.12);
  background: var(--pr-surface);
  color: var(--pr-heading);
}
.pr-filter-chip.active { background: var(--pr-navy-900); color: #fff; border-color: var(--pr-navy-900); }

.pr-medal { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: .8rem; }
.pr-medal-1 { background: linear-gradient(135deg,#E8B65E,#C99A46); color: #3A2E1C; }
.pr-medal-2 { background: #E4E1DA; color: #5B615C; }
.pr-medal-3 { background: #EFDCC4; color: #6B4B34; }

.pr-progress { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.pr-progress .bar { height: 100%; background: linear-gradient(90deg, var(--pr-blue-accent), var(--pr-blue)); border-radius: 4px; }

.pr-phone {
  width: 290px;
  background: var(--pr-navy-900);
  border-radius: 2.5rem;
  padding: .875rem;
  box-shadow: 0 30px 60px rgba(16,42,67,.25);
}
.pr-phone-screen { background: var(--pr-bg); border-radius: 1.75rem; overflow: hidden; }

.accordion-button:not(.collapsed) {
  color: var(--pr-blue-dark);
  background-color: rgba(37,99,235,.06);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(37,99,235,.2); }

.pr-role-select {
  cursor: pointer;
  border-radius: 1rem;
  padding: 1.4rem 1rem;
  text-align: center;
  border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pr-role-select:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.4); }
.pr-role-select.selected { border-color: var(--pr-blue); background: rgba(37,99,235,.08); }

.pr-onb-card { cursor: pointer; }
.pr-onb-card.selected { border: 1.5px solid var(--pr-blue) !important; box-shadow: 0 14px 28px rgba(37,99,235,.14); }

.pr-step-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(16,42,67,.15); }
.pr-step-dot.active { background: var(--pr-blue); width: 24px; border-radius: 4px; }

footer.pr-footer a { color: rgba(255,255,255,.5); }
footer.pr-footer a:hover { color: #fff; }

.form-control:focus { border-color: var(--pr-blue); box-shadow: 0 0 0 .2rem rgba(37,99,235,.15); }

/* ---- theme toggle ---- */
.pr-theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(16,42,67,.14);
  background: var(--pr-surface);
  color: var(--pr-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.pr-theme-toggle:hover { border-color: var(--pr-blue); color: var(--pr-blue-dark); }
[data-bs-theme="dark"] .pr-theme-toggle { border-color: rgba(255,255,255,.16); }
.pr-theme-toggle .pr-icon-moon { display: block; }
.pr-theme-toggle .pr-icon-sun { display: none; }
[data-bs-theme="dark"] .pr-theme-toggle .pr-icon-moon { display: none; }
[data-bs-theme="dark"] .pr-theme-toggle .pr-icon-sun { display: block; }

/* ==========================================================================
   HERO v2 — light photo hero
   The hero photo is always bright, so the readability veil, its pills and the
   headline accent are tokenised and flipped by color mode rather than being
   hardcoded white/navy.
   ========================================================================== */
:root {
  --pr-veil-1: rgba(255,255,255,.97);
  --pr-veil-2: rgba(255,255,255,.88);
  --pr-veil-3: rgba(255,255,255,.44);
  --pr-veil-0: rgba(255,255,255,0);
  --pr-veil-pill: rgba(255,255,255,.92);
  --pr-veil-pill-bd: rgba(16,42,67,.10);
  --pr-hero-accent: var(--pr-blue);
  --pr-hero-flock: rgba(16,42,67,.34);
}
[data-bs-theme="dark"] {
  --pr-veil-1: rgba(10,27,51,.96);
  --pr-veil-2: rgba(10,27,51,.88);
  --pr-veil-3: rgba(10,27,51,.50);
  --pr-veil-0: rgba(10,27,51,0);
  --pr-veil-pill: rgba(16,42,67,.74);
  --pr-veil-pill-bd: rgba(255,255,255,.18);
  --pr-hero-accent: var(--pr-blue-accent);
  --pr-hero-flock: rgba(255,255,255,.36);
}

/* The hero is exactly one screen: nav + hero == the visible viewport, never
   more. `--pr-nav-h` is measured by js/main.js; the literal is the fallback.
   svh (smallest viewport) keeps mobile honest while the URL bar is showing. */
.pr-hero-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: calc(100vh - var(--pr-nav-h, 84px));
  height: calc(100svh - var(--pr-nav-h, 84px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  background: var(--pr-bg);
  color: var(--pr-text);
}
.pr-hero-photo > .container { width: 100%; }

/* The photo is deliberately wider than the hero and anchored to the right so
   the bird drifts left of the live-race card — its head and the iridescent
   neck stay in the clear gap between the copy and the card. */
.pr-hero-photo .pr-hero-img {
  left: auto; right: -3%;
  width: 122%;
  object-position: 50% 30%;
  transform-origin: 58% 40%;
  /* no white wash over the bird — just more colour and bite in the plumage */
  filter: saturate(1.3) contrast(1.1) brightness(1.01);
  animation: prHeroPan 32s ease-in-out infinite alternate;
}

/* specular highlight that travels across the bird every few seconds; the
   radial mask keeps it off the headline so the copy never washes out */
.pr-hero-sheen {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 38% 56% at 60% 40%, #000 0%, rgba(0,0,0,.7) 44%, transparent 76%);
          mask-image: radial-gradient(ellipse 38% 56% at 60% 40%, #000 0%, rgba(0,0,0,.7) 44%, transparent 76%);
}
.pr-hero-sheen::after {
  content: "";
  position: absolute; top: -25%; bottom: -25%; left: -35%; width: 27%;
  background: linear-gradient(100deg,
              transparent 0%,
              rgba(255,255,255,.5) 44%,
              rgba(239,246,255,.85) 50%,
              rgba(255,255,255,.5) 56%,
              transparent 100%);
  transform: skewX(-14deg);
  filter: blur(7px);
}
.pr-hero-sheen { --sheen-play: prSheenSweep 9s cubic-bezier(.4,0,.2,1) 1.8s infinite; }
.pr-hero-sheen::after { animation: var(--sheen-play); }
@keyframes prSheenSweep {
  0%        { left: -35%; opacity: 0; }
  10%       { opacity: 1; }
  44%, 100% { left: 116%; opacity: 0; }
}
@keyframes prHeroPan {
  0%   { transform: scale(1.01) translate3d(0, 0, 0); }
  100% { transform: scale(1.05) translate3d(-1%, -1.2%, 0); }
}

/* Readability shade sits behind the copy ONLY — an elliptical scrim anchored
   to the left edge that has fully faded out before it reaches the bird. */
.pr-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(112% 118% at -14% 52%,
      var(--pr-veil-1) 0%,
      var(--pr-veil-1) 26%,
      var(--pr-veil-2) 40%,
      var(--pr-veil-3) 52%,
      var(--pr-veil-0) 64%);
}

/* drifting silhouette flock across the open sky */
.pr-hero-flock-layer {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.pr-hero-flock-layer svg { position: absolute; fill: var(--pr-hero-flock); }

/* ---- hero layout ------------------------------------------------------
   copy | live-race card on top, feature strip docked across the base. The
   rail wrapper is `display: contents` here so its two children drop straight
   into this grid; on mobile it becomes a real horizontal snap slider. */
.pr-hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr);
  grid-template-areas: "copy aside" "bar bar";
  align-items: center;
  column-gap: clamp(1.25rem, 3vw, 3rem);
  row-gap: clamp(.75rem, 2.4vh, 2rem);
  padding-top: clamp(1rem, 4vh, 3rem);
}
.pr-hero-rail { display: contents; }
.pr-hero-copy { grid-area: copy; }
.pr-hero-aside { grid-area: aside; }
.pr-hero-bar  { grid-area: bar; }
.pr-rail-dots { display: none; }

.pr-hero-title {
  margin: clamp(.9rem, 2.4vh, 1.6rem) 0 0;
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: 15ch;
  /* the vh term shrinks the headline on short laptop screens so the whole
     hero keeps fitting inside one viewport */
  font-size: clamp(2rem, min(5.2vw, 7.4vh), 4.15rem);
}
.pr-hero-lead {
  margin: clamp(1rem, 2.6vh, 1.75rem) 0 0;
  max-width: 460px;
  color: var(--pr-heading);
  font-size: clamp(1rem, min(1.35vw, 2.1vh), 1.25rem);
}
.pr-hero-sub {
  margin: clamp(.5rem, 1.6vh, 1rem) 0 0;
  max-width: 460px;
  color: var(--pr-muted);
}
.pr-hero-cta {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: clamp(1rem, 2.8vh, 1.75rem);
}
.pr-hero-note {
  margin: clamp(.9rem, 2.4vh, 1.5rem) 0 0;
  font-size: .8125rem; font-weight: 600;
  color: var(--pr-muted-2);
}

/* short viewports: drop the secondary paragraph rather than let the hero
   spill past the fold */
@media (min-width: 992px) and (max-height: 760px) {
  .pr-hero-sub, .pr-hero-note { display: none; }
  .pr-hero-card { padding: 1.25rem !important; }
  .pr-hero-card .mb-4 { margin-bottom: .9rem !important; }
  .pr-hero-card .mt-4 { margin-top: 1rem !important; }
}

/* pill above the headline */
.pr-hero-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--pr-veil-pill);
  border: 1px solid var(--pr-veil-pill-bd);
  border-radius: 100px;
  padding: .5rem 1.1rem;
  box-shadow: 0 6px 20px rgba(16,42,67,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pr-hero-pill span {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--pr-heading);
}
.pr-hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pr-hero-accent);
  animation: prBluePulse 2.2s ease-out infinite;
}
@keyframes prBluePulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.5); }
  70%  { box-shadow: 0 0 0 9px rgba(37,99,235,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}

/* flourish that draws itself in under the headline */
.pr-hero-rule { display: flex; align-items: center; gap: .55rem; margin-top: 1.15rem; }
.pr-hero-rule i {
  display: block; height: 3px; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--pr-hero-accent), rgba(37,99,235,0));
  animation: prRuleGrow .9s cubic-bezier(.2,.7,.25,1) .6s forwards;
}
@keyframes prRuleGrow { to { width: 96px; } }
.pr-hero-glyph { fill: var(--pr-hero-accent); opacity: .75; animation: prGlyphBob 4.5s ease-in-out infinite; }
@keyframes prGlyphBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-3deg); }
}

/* staggered entrance — per-element delays are set inline */
.pr-rise { opacity: 0; animation: prRise .85s cubic-bezier(.2,.7,.25,1) both; }
@keyframes prRise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
.pr-rise-side { opacity: 0; animation: prRiseSide 1s cubic-bezier(.2,.7,.25,1) both; }
@keyframes prRiseSide {
  from { opacity: 0; transform: translate3d(36px, 26px, 0) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* live race card */
.pr-hero-card {
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  border-radius: 1.25rem;
  box-shadow: 0 30px 70px rgba(10,27,51,.28);
  animation: prCardFloat 7.5s ease-in-out 1.4s infinite;
}
@keyframes prCardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.pr-chip-live {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--pr-gradient);
  border-radius: 100px; padding: .45rem 1rem;
  color: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  box-shadow: 0 6px 16px rgba(29,78,216,.28);
}
.pr-wave { animation: prWave 1.8s ease-in-out infinite; }
.pr-wave-2 { animation-delay: .35s; }
@keyframes prWave {
  0%, 100% { opacity: .35; }
  45%      { opacity: 1; }
}

/* ripple rings on the latest-arrival avatar */
.pr-ping-wrap { position: relative; }
.pr-ping-wrap::before, .pr-ping-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid rgba(37,99,235,.5);
  animation: prRipple 2.8s cubic-bezier(.2,.6,.3,1) infinite;
}
.pr-ping-wrap::after { animation-delay: 1.4s; }
@keyframes prRipple {
  0%   { opacity: .75; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2); }
}

/* light-surface secondary button (the hero sits on a bright photo) */
.btn-pr-light {
  background: var(--pr-surface);
  border: 1.5px solid var(--pr-border);
  color: var(--pr-heading);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  border-radius: .75rem;
  padding: .85rem 1.6rem;
  box-shadow: 0 6px 18px rgba(16,42,67,.10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.btn-pr-light:hover, .btn-pr-light:focus {
  color: var(--pr-blue-dark);
  border-color: rgba(37,99,235,.45);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16,42,67,.14);
}

/* light sweep across the primary CTA */
.pr-shine { position: relative; overflow: hidden; }
.pr-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
  animation: prShine 6s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes prShine {
  0%        { left: -45%; }
  24%, 100% { left: 130%; }
}

/* bottom feature strip, docked to the base of the hero */
.pr-hero-bar {
  position: relative; z-index: 2;
  display: flex;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: clamp(.9rem, 2vh, 1.5rem);
  /* the leaf cluster owns the left corner */
  padding-left: clamp(9rem, 13vw, 12.5rem);
  background: linear-gradient(100deg, rgba(10,27,51,.95), rgba(23,55,102,.93));
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -12px 44px rgba(10,27,51,.24);
}
.pr-bar-item {
  display: flex; align-items: center; gap: .85rem;
  flex: 1 1 0; min-width: 0;
}
.pr-bar-item + .pr-bar-item {
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: clamp(.75rem, 1.6vw, 1.25rem);
}
.pr-bar-title { font-weight: 700; color: #fff; font-size: .875rem; }
.pr-bar-text  { font-size: .875rem; color: rgba(255,255,255,.58); }
.pr-bar-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--pr-gradient);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .2s ease;
}
.pr-bar-item:hover .pr-bar-icon { transform: translateY(-2px) scale(1.06); }

/* leafy branch layered in front of the feature strip's left corner */
.pr-hero-leaves {
  position: absolute; z-index: 3;
  /* tracks the container edge so the cluster always straddles the strip's
     left corner instead of drifting into the gutter on wide screens */
  left: max(0px, calc(50% - 652px)); bottom: 0;
  width: clamp(140px, 13vw, 190px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(6,26,14,.42));
}
.pr-leaf-sway {
  transform-origin: 8% 100%;
  animation: prLeafSway 7s ease-in-out infinite alternate;
}
.pr-leaf-back { animation-duration: 9s; animation-delay: -2s; opacity: .9; }
@keyframes prLeafSway {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--sway, 2deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .pr-hero-photo .pr-photo-bg, .pr-rise, .pr-rise-side, .pr-hero-card,
  .pr-hero-rule i, .pr-hero-dot, .pr-hero-glyph, .pr-wave,
  .pr-leaf-sway { animation: none; }
  .pr-rise, .pr-rise-side { opacity: 1; }
  .pr-hero-rule i { width: 96px; }
  .pr-shine::after, .pr-ping-wrap::before, .pr-ping-wrap::after,
  .pr-hero-sheen::after { display: none; }
}

/* ---- RTC hardware illustrations ---- */
/* Broadcasting arcs on the ring and the reader, plus the reader link LED.
   These animate the `opacity` presentation attributes set inline on the SVG. */
.pr-rtc-wave { animation: prRtcWave 2.6s ease-in-out infinite; }
.pr-rtc-wave.pr-w2 { animation-delay: .4s; }
.pr-rtc-wave.pr-w3 { animation-delay: .8s; }
@keyframes prRtcWave {
  0%, 100% { opacity: .12; }
  40%      { opacity: .85; }
}
.pr-rtc-led { animation: prRtcLed 2s ease-in-out infinite; }
@keyframes prRtcLed {
  0%, 100% { opacity: .35; }
  45%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-rtc-wave, .pr-rtc-led { animation: none; }
}

/* ==========================================================================
   HERO — tablet & phone
   The hero stays exactly one screen tall, so instead of stacking (and
   overflowing) the live-race card and the four feature items become slides of
   one horizontal snap rail docked to the base. The bird keeps the top band to
   itself; the copy sits on a scrim that only covers the copy.
   ========================================================================== */
@media (max-width: 991.98px) {
  .pr-hero-photo .pr-hero-img {
    left: 0; right: auto;
    width: 100%;
    object-position: 56% 24%;
    /* zoomed in on the bird so it still reads big on a phone */
    transform-origin: 94% 96%;
    animation-name: prHeroPanPhone;
    /* a touch cooler and punchier so the bird still reads on a small screen */
    filter: saturate(1.34) contrast(1.12) brightness(1.02);
  }
  @keyframes prHeroPanPhone {
    0%   { transform: scale(1.2) translate3d(0, 0, 0); }
    100% { transform: scale(1.26) translate3d(-1.5%, -1%, 0); }
  }

  /* the photo keeps the whole top band; only the base is washed so the
     docked rail has something to sit on */
  .pr-hero-scrim {
    background: linear-gradient(to bottom,
      var(--pr-veil-0)  0%,
      var(--pr-veil-0) 42%,
      var(--pr-veil-3) 66%,
      var(--pr-veil-2) 82%,
      var(--pr-veil-1) 100%);
  }
  .pr-hero-sheen { opacity: .35; }

  .pr-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding-top: clamp(.75rem, 2.5vh, 1.5rem);
    padding-bottom: 0;
    row-gap: 0;
  }
  /* the bird gets the space above the copy; the copy carries its own shade so
     the readability wash follows the text instead of covering the photo */
  .pr-hero-copy {
    position: relative;
    margin: auto -.75rem 0;
    padding: 2.75rem .75rem .5rem;
    background: linear-gradient(to bottom,
      var(--pr-veil-0) 0%,
      var(--pr-veil-3) 22%,
      var(--pr-veil-2) 44%,
      var(--pr-veil-1) 68%);
  }
  .pr-hero-title { max-width: 100%; font-size: clamp(1.75rem, min(9vw, 5.6vh), 2.6rem); }
  .pr-hero-lead  { max-width: 100%; font-size: 1rem; }
  .pr-hero-sub, .pr-hero-note, .pr-hero-rule { display: none; }
  .pr-hero-cta { gap: .6rem; }
  .pr-hero-cta .btn { flex: 1 1 auto; padding: .8rem 1rem; font-size: .95rem; }

  /* rail */
  .pr-hero-rail {
    display: flex;
    align-items: stretch;
    gap: .75rem;
    margin: clamp(.5rem, 2vh, 1.25rem) -.75rem 0;
    padding: .25rem .75rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .pr-hero-rail::-webkit-scrollbar { display: none; }
  .pr-hero-aside, .pr-bar-item {
    flex: 0 0 min(84%, 340px);
    scroll-snap-align: center;
  }
  .pr-hero-aside { display: flex; }
  .pr-hero-card {
    width: 100%;
    padding: 1.15rem !important;
    border-radius: 1.15rem 1.15rem 0 0;
    animation: none;
  }
  .pr-hero-card .mb-4 { margin-bottom: .85rem !important; }
  .pr-hero-card .mt-4 { margin-top: .9rem !important; }
  .pr-hero-card h3 { font-size: 1.15rem !important; }
  /* the latest-arrival panel lives in full in the live-tracking section */
  .pr-card-extra { display: none; }

  /* the strip stops being a bar and its items become individual slides */
  .pr-hero-bar { display: contents; }
  .pr-bar-item {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: .6rem;
    padding: 1.15rem;
    border: 1px solid rgba(255,255,255,.1);
    border-bottom: none;
    border-radius: 1.15rem 1.15rem 0 0;
    background: linear-gradient(150deg, rgba(10,27,51,.95), rgba(23,55,102,.93));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -12px 44px rgba(10,27,51,.24);
  }
  .pr-bar-item + .pr-bar-item { border-left: 1px solid rgba(255,255,255,.1); padding-left: 1.15rem; }

  /* rail position dots — a translucent pill so they read on both the white
     race card and the dark feature slides */
  .pr-rail-dots {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    position: static;
    order: 1;                 /* sits between the copy and the rail */
    align-self: center;
    margin: .55rem 0 .1rem;
    padding: .25rem 0;
    z-index: 4; pointer-events: none;
  }
  .pr-hero-rail { order: 2; }
  .pr-rail-dots i {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(16,42,67,.3);
    box-shadow: 0 0 0 2px rgba(255,255,255,.55);
    transition: width .2s ease, background .2s ease;
  }
  .pr-rail-dots i.on { width: 16px; border-radius: 100px; background: var(--pr-hero-accent); }

  .pr-hero-leaves { width: clamp(96px, 26vw, 132px); left: -.5rem; bottom: -.5rem; opacity: .95; }
}

/* phones */
@media (max-width: 575.98px) {
  .pr-hero-aside, .pr-bar-item { flex-basis: 86%; }
  .pr-hero-cta { flex-direction: row; flex-wrap: nowrap; }
  .pr-hero-cta .btn { flex: 1 1 0; min-width: 0; font-size: .875rem; padding: .75rem .5rem; }
  .pr-hero-pill { padding: .4rem .85rem; }
  .pr-hero-pill span { font-size: .68rem; }
}

/* very short phones — protect the bird band by trimming the copy further */
@media (max-width: 991.98px) and (max-height: 700px) {
  .pr-hero-lead { display: none; }
  .pr-hero-card { padding: .95rem !important; }
  .pr-hero-card .mb-4 { margin-bottom: .6rem !important; }
  .pr-hero-card .mt-4 { margin-top: .65rem !important; }
}

/* ==========================================================================
   MOBILE RAILS — card rows that would otherwise stack into a long column
   become horizontal snap sliders on phones. Applied to a Bootstrap row, so
   the desktop grid is untouched; only the phone breakpoint swaps behaviour.
   ========================================================================== */
@media (max-width: 767.98px) {
  .pr-rail-sm {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: .75rem;
    padding-bottom: .5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .pr-rail-sm::-webkit-scrollbar { display: none; }
  .pr-rail-sm > * {
    flex: 0 0 min(84%, 330px);
    scroll-snap-align: start;
  }
}

/* dots for the section rails (the hero's own rules live with the hero) */
@media (min-width: 768px) {
  .pr-rail-dots { display: none !important; }
}
@media (max-width: 767.98px) {
  .pr-rail-dots { margin-top: 1rem; }
}

/* ---- phone density: two-up grids instead of a single tall column ---- */
@media (max-width: 575.98px) {
  .pr-grid-2-sm > .col { flex: 0 0 auto; width: 50%; }
  .pr-grid-2-sm .pr-card { padding: 1rem !important; }
  .pr-grid-2-sm .pr-card h3 { font-size: .95rem !important; }
  .pr-grid-2-sm .pr-icon-badge { width: 2.5rem; height: 2.5rem; border-radius: .7rem; }
  .pr-grid-2-sm .pr-icon-badge svg { width: 18px; height: 18px; }
}

/* icons in a flex row must never be squeezed by the label beside them */
.d-flex > svg { flex-shrink: 0; }

/* a badge that sits above a card must not be clipped by the rail */
@media (max-width: 767.98px) {
  .pr-rail-sm { padding-top: .9rem; }
  /* let the table scroll sideways instead of squeezing every column */
  .table-responsive > table th,
  .table-responsive > table td { white-space: nowrap; }
}

/* a 3rem horizontal gutter is wider than the container's own padding, so on
   phones those rows hang 12px past the viewport — keep the vertical gutter */
@media (max-width: 767.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* From 768px up the container is still edge-to-edge on many laptops, so its
   padding has to be at least half of the widest row gutter (g-5 = 3rem) or
   those rows hang past the viewport. */
@media (min-width: 768px) {
  .pr-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Landscape phones: a ~340px-tall viewport cannot hold the bird, the copy and
   the rail at once, so here the hero is allowed to grow past one screen rather
   than clipping content away. */
@media (max-width: 991.98px) and (max-height: 520px) {
  .pr-hero-photo { height: auto; min-height: calc(100svh - var(--pr-nav-h, 84px)); }
  .pr-hero-inner { padding-top: 1.25rem; }
  .pr-hero-copy { margin-top: 1.5rem; }
  .pr-hero-aside, .pr-bar-item { flex-basis: min(58%, 320px); }
}