/* Pawperwork cinematic welcome. Deliberately limited to the first-visit hero.
   The existing dimensional crew assets, actual planner, rules and account flow stay intact.
   The crew floats within the page; this is not a video or screenshot overlay. */
body.onboarding .board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f7f8ff !important;
  background:
    radial-gradient(ellipse at 80% 30%, rgba(120,94,203,.38), transparent 35%),
    radial-gradient(ellipse at 93% 84%, rgba(238,131,119,.34), transparent 33%),
    linear-gradient(120deg, #080f22 5%, #111c3c 58%, #1a2446) !important;
}
body.onboarding .board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .75;
  background:
    linear-gradient(0deg, rgba(5,11,26,.9), transparent 47%),
    repeating-linear-gradient(90deg, transparent 0 172px, rgba(160,181,241,.12) 174px, transparent 176px),
    linear-gradient(180deg, transparent 42%, rgba(158,180,248,.15) 42.3%, transparent 42.8%);
}
body.onboarding .board::after {
  content: "";
  position: absolute;
  inset: auto -14% -75px;
  z-index: -1;
  height: 200px;
  pointer-events: none;
  opacity: .44;
  filter: blur(26px);
  background: radial-gradient(ellipse, #5269aa, transparent 73%);
}
body.onboarding .board .topnav.wrap { position: relative; z-index: 4; border-bottom: 1px solid rgba(216,223,255,.15) !important; }
body.onboarding .board .home-brand,
body.onboarding .board .home-brand .wm,
body.onboarding .board .home-brand .wm span { color: #fff !important; }
body.onboarding .board .home-brand .wm .paw { color: #97b6ff !important; }
body.onboarding .board .topnav .navlink { color: #e5eaff !important; }
body.onboarding .board .topnav .navlink:hover,
body.onboarding .board .topnav .navlink:focus-visible { background: rgba(255,255,255,.14) !important; color: #fff !important; }
body.onboarding .board .lang-control { background: rgba(12,20,43,.75) !important; border-color: rgba(210,222,255,.33) !important; color: #fff !important; }
body.onboarding .board .lang-switch { color: #fff !important; }
body.onboarding .board .nav-start,
body.onboarding .board .hero-cta .go { color: #fff !important; background: linear-gradient(112deg, #657aff, #7666ef) !important; border-color: transparent !important; box-shadow: 0 10px 28px rgba(32,44,129,.34) !important; }
body.onboarding .board .nav-start:hover,
body.onboarding .board .hero-cta .go:hover { filter: brightness(1.08); transform: translateY(-1px); }
body.onboarding .board .tag { background: rgba(139,159,240,.14) !important; border: 1px solid rgba(183,199,255,.3) !important; color: #b7c8ff !important; }
body.onboarding .board .hero-copy > h1 {
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: clamp(39px, 5vw, 68px) !important;
  font-weight: 780 !important;
  letter-spacing: -.055em !important;
  line-height: 1.08 !important;
  max-width: 14ch;
}
body.onboarding .board .hero-copy h1 em {
  color: #8da8ff !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}
body.onboarding .board .hero-copy .lede { color: #e6e9fa !important; max-width: 47ch; }
body.onboarding .board .cta-note,
body.onboarding .board .trust,
body.onboarding .board .trust-line,
body.onboarding .board .trust-line a { color: #c4cee9 !important; }
body.onboarding .board .trust { border-top-color: rgba(220,226,255,.24); }
body.onboarding .board .trust li::before { background: rgba(146,164,255,.18) !important; color: #a8beff !important; }
body.onboarding .board .hero-visual { position: relative; justify-self: stretch; align-self: center; }
body.onboarding .board .hero-visual .mascot {
  width: min(100%, 490px) !important;
  max-width: 490px;
  margin-bottom: -25px !important;
  filter: drop-shadow(0 24px 28px rgba(0,4,20,.43));
}
body.onboarding .board .hero-visual .crew3d-art { filter: drop-shadow(0 5px 10px rgba(0,0,0,.2)); }
body.onboarding .board .pv-card {
  background: rgba(12,21,45,.88) !important;
  border: 1px solid rgba(191,205,255,.28) !important;
  color: #f4f6ff !important;
  box-shadow: 0 24px 60px rgba(3,8,28,.48) !important;
  backdrop-filter: blur(12px);
}
body.onboarding .board .pv-card .pv-who span,
body.onboarding .board .pv-card .pv-meter,
body.onboarding .board .pv-card .pv-days,
body.onboarding .board .pv-card .pv-foot { color: #b8c7eb !important; }
body.onboarding .board .pv-card .pv-days b { color: #a5baff !important; }
body.onboarding .board .pv-card .pv-list li { border-top-color: rgba(191,205,255,.16) !important; }
body.onboarding .board .pv-card .pv-list em { background: rgba(148,164,225,.14) !important; color: #d6e0ff !important; }
body.onboarding .board .pv-card .pv-bar { background: rgba(165,184,243,.24) !important; }
body.onboarding .board .pv-card .pv-bar i { background: linear-gradient(90deg, #728cff, #b08dff) !important; }
body.onboarding .board .mascot-replay { background: rgba(11,18,40,.8) !important; border-color: rgba(193,209,255,.34) !important; color: #eef2ff !important; }
body.onboarding .board .mascot-replay:hover { background: rgba(31,42,81,.95) !important; }
/* Match the conversation visually, without changing its states or behavior. */
.a-chat .panel-h { background: linear-gradient(120deg, rgba(112,132,251,.14), var(--surface) 76%) !important; }
.a-chat .composer:focus-within { border-color: #7188ef !important; box-shadow: 0 0 0 3px rgba(113,136,239,.14) !important; }
.a-chat .crew-avatar-photo, .crew-faces .crew-avatar-photo { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px #8997e7 !important; }
@media (max-width: 760px) {
  body.onboarding .board > .wrap:not(.topnav) { gap: 18px !important; }
  body.onboarding .board .hero-copy > h1 { font-size: clamp(36px, 9vw, 52px) !important; }
  body.onboarding .board .hero-visual .mascot { max-width: 430px; width: min(94%, 430px) !important; margin-bottom: -14px !important; }
  body.onboarding .board::before { opacity: .46; }
  body.onboarding .board .pv-card { backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.onboarding .board .nav-start,
  body.onboarding .board .hero-cta .go { transition: none !important; transform: none !important; }
}
@media print {
  body.onboarding .board { background: #fff !important; color: #111 !important; }
  body.onboarding .board::before, body.onboarding .board::after { display: none !important; }
}