/* Selected Wispy hero: a clear offer beside the original illustrated world.
   Scope these rules to the public hero; the account companion is independent. */
.hero-welcome { padding-bottom: 48px; }
@media (min-width: 1101px) {
  html[data-wispy-view=home] .site-header,
  .hero-welcome .journey-intro { width: 91%; max-width: 1540px; }
  html[data-wispy-view=home] .site-header .brand { font-size: 43px; }
  html[data-wispy-view=home] .site-header .brand img { width: 56px; height: 56px; }
  html[data-wispy-view=home] .site-header .main-nav a { font-size: 19px; }
  html[data-wispy-view=home] .site-header .button-small { min-height: 56px; font-size: 16px; padding-inline: 26px; }
}
.hero-welcome .journey-stage {
  height: clamp(750px, calc(62.5vw - 100px), 962px);
  max-width: 1700px;
  overflow: hidden;
}
.hero-welcome .journey-landscape {
  inset: auto 0 0;
  width: 100%;
  height: calc(100% + 100px);
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  transform: none;
  z-index: 0;
}
.hero-welcome .journey-intro { padding-top: clamp(42px, 3.1vw, 54px); z-index: 3; }
.hero-welcome .journey-intro h1 {
  max-width: none;
  width: max-content;
  font-size: clamp(68px, 7.8vw, 124px);
  line-height: 1.04;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.hero-welcome .journey-intro > p { background: none; padding: 0; border-radius: 0; }
.hero-welcome .journey-intro .hero-description {
  font-size: clamp(19px, 2vw, 32px);
  line-height: 1.42;
  margin: 8px 0 0;
  width: max-content;
  max-width: 100%;
  color: #344e7c;
}
.hero-welcome .journey-intro .hero-offer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 30px 0 22px;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.35;
  color: #344e7c;
}
.hero-offer > strong { font-family: 'Nunito', 'Golos Text', sans-serif; font-weight: 1000; font-size: 1.45em; letter-spacing: -.025em; color: var(--blue); }
.hero-welcome .hero-main-cta {
  display: inline-flex;
  width: clamp(350px, 28vw, 450px);
  max-width: 100%;
  min-height: 84px;
  gap: 28px;
  padding: 18px 28px;
  border-radius: 50px;
  font-size: 24px;
  pointer-events: auto;
  box-shadow: inset 0 2px 1px #ffffff65, inset 0 -3px 0 #0b40cb, 0 8px 18px #245be821;
}
.hero-main-cta > img { filter: brightness(0) invert(1); flex-shrink: 0; }
.hero-welcome .hero-how-link { display: flex; align-items: center; width: max-content; min-height: 44px; margin-top: 14px; font-size: 18px; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 6px; pointer-events: auto; }
.hero-welcome .journey-intro .hero-platform-list { margin: 42px 0 0; font-size: 18px; line-height: 1.5; color: #344e7c; }
.hero-welcome .mascot-wrap { left: 37.5%; bottom: 11.3%; width: 40%; height: auto; aspect-ratio: 1; max-width: 640px; z-index: 2; transform: none; }
.hero-welcome[data-company=family] .mascot-wrap { transform: none; }
.hero-welcome .mascot-button { position: relative; width: 100%; height: 100%; left: auto; bottom: auto; }
.hero-welcome .scene-laptop { left: auto; right: 14.5%; bottom: 22%; width: 18%; height: auto; aspect-ratio: 350/230; transform: rotate(-3deg); z-index: 2; }
.hero-welcome .scene-phone { left: auto; right: 4.8%; bottom: 16%; width: 9%; height: auto; aspect-ratio: 200/350; transform: rotate(8deg); z-index: 2; }
.hero-welcome .mascot-bubble {
  left: 60%; top: 3%; bottom: auto;
  width: 240px; max-width: 65%;
  padding: 14px 16px;
  transform: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease;
  z-index: 5;
}
.hero-welcome .mascot-wrap:focus-within .mascot-bubble { opacity: 1; visibility: visible; pointer-events: auto; }
.hero-welcome .mascot-rest { min-height: 44px; }
.hero-welcome .journey-ticket { margin-top: 24px; }
.hero-welcome .hero-note { position: absolute; left: 71%; top: 26%; width: 140px; height: auto; pointer-events: none; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .hero-welcome .mascot-wrap:hover .mascot-bubble { opacity: 1; visibility: visible; pointer-events: auto; }
}
@media (min-width: 1600px) {
  .hero-welcome .journey-intro { padding-top: 50px; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .hero-welcome .journey-stage { height: 720px; }
  .hero-welcome .journey-intro h1 { font-size: 7.3vw; }
  .hero-welcome .journey-intro .hero-description { font-size: 19px; }
  .hero-welcome .journey-intro .hero-offer { margin-top: 26px; font-size: 19px; }
  .hero-welcome .hero-main-cta { width: 310px; min-height: 64px; font-size: 18px; }
  .hero-welcome .hero-how-link { font-size: 16px; }
  .hero-welcome .journey-intro .hero-platform-list { font-size: 14px; background: var(--paper); padding: 4px 10px 4px 0; }
  .hero-welcome .mascot-wrap { left: 35%; bottom: 5%; width: 46%; }
  .hero-welcome .scene-laptop { bottom: 17%; }
  .hero-welcome .scene-phone { bottom: 11%; }
  .hero-welcome .hero-note { top: 32%; left: 78%; width: 120px; }
}
@media (max-width: 820px) {
  .hero-welcome .journey-stage { height: auto; min-height: 0; padding-bottom: 365px; }
  .hero-welcome .journey-intro { padding-top: 28px; }
  .hero-welcome .journey-intro h1 { font-size: clamp(40px, 8.7vw, 70px); line-height: 1.06; letter-spacing: -.045em; }
  .hero-welcome .journey-intro .hero-description { margin-top: 18px; font-size: clamp(16px, 2.8vw, 21px); line-height: 1.55; width: auto; max-width: 650px; }
  .hero-welcome .journey-intro .hero-offer { margin: 22px 0 18px; font-size: 18px; gap: 6px 8px; }
  .hero-welcome .hero-main-cta { min-height: 62px; max-width: 350px; width: 100%; border-radius: 40px; font-size: 18px; }
  .hero-welcome .hero-how-link { margin-top: 11px; font-size: 16px; }
  .hero-welcome .journey-intro .hero-platform-list { margin-top: 16px; font-size: 13px; width: auto; }
  .hero-welcome .journey-landscape { width: 1000px; height: 626px; left: calc(50% - 680px); right: auto; bottom: 0; max-width: none; object-fit: contain; }
  .hero-welcome .mascot-wrap { position: absolute; left: calc(50% - 260px); bottom: 5px; width: 360px; height: 360px; max-width: none; margin: 0; aspect-ratio: 1; }
  .hero-welcome .mascot-wrap > .mascot-button { position: relative; width: 100%; height: 100%; left: auto; bottom: auto; }
  .hero-welcome .scene-laptop { right: calc(50% - 130px); bottom: 69px; width: 145px; height: auto; }
  .hero-welcome .scene-phone { right: calc(50% - 175px); bottom: 18px; width: 80px; height: auto; }
  .hero-welcome .mascot-bubble { left: 50%; top: 0; bottom: auto; width: 220px; max-width: none; padding: 12px 14px; }
  .hero-welcome .hero-note { left: calc(50% + 50px); top: auto; bottom: 230px; width: 115px; }
  .hero-welcome .journey-ticket { margin-top: 18px; }
}
@media (max-width: 420px) {
  .hero-welcome .journey-intro h1 { font-size: clamp(34px, 10.3vw, 43px); }
  .hero-welcome .journey-intro .hero-description { font-size: 15px; }
  .hero-welcome .journey-intro .hero-offer { font-size: 16px; }
  .hero-welcome .journey-intro .hero-platform-list { font-size: 12px; }
  .hero-welcome .journey-stage { padding-bottom: 320px; }
  .hero-welcome .mascot-wrap { left: calc(50% - 250px); bottom: -8px; }
  .hero-welcome .mascot-bubble { left: 36%; width: 210px; }
  .hero-welcome .hero-note { left: calc(50% + 30px); bottom: 226px; width: 105px; }
  .hero-welcome .scene-laptop { right: 13%; width: 135px; bottom: 58px; }
  .hero-welcome .scene-phone { right: 1%; width: 74px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-welcome .mascot-bubble { transition: none; }
}