/* Share one pair of hero actions between the desktop copy and mobile photo. */
.flow-site .flow-mobile-hero-caption { display: none; }

@media screen and (max-width: 767px) {
  .flow-site .flow-hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .flow-site .flow-hero > .flow-hero-copy { display: contents; }
  .flow-site .flow-hero-copy > p:first-child { grid-area: 2 / 1; justify-self: start; width: fit-content; max-width: calc(100% - 40px); margin: 28px 20px 18px; }
  .flow-site .flow-hero-copy > h1 { grid-area: 3 / 1; width: calc(100% - 40px); max-width: 580px; margin: 0 auto; }
  .flow-site .flow-hero-copy > p.mt-6 { grid-area: 4 / 1; width: calc(100% - 40px); max-width: 580px; margin: 18px auto 36px; }
  .flow-site .flow-hero > .flow-hero-photo { grid-area: 1 / 1; position: relative; isolation: isolate; width: 100%; max-width: none; margin: 0; }
  .flow-site .flow-hero-photo > div:first-child { display: none; }
  .flow-site .flow-hero-photo > img { position: relative; z-index: 0; display: block; width: 100%; height: 440px; height: clamp(420px, calc(100svh - 156px), 500px); max-height: none; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: center 24%; box-shadow: none; }
  .flow-site .flow-hero-photo::after { content: ''; position: absolute; z-index: 1; inset: 0 0 50px; background: linear-gradient(180deg, transparent 20%, #08254b20 34%, #08254bdb 64%, #08254bf5 100%); pointer-events: none; }
  .flow-site .flow-hero-photo > .glass { display: none; }
  .flow-site .flow-mobile-hero-caption { display: grid; gap: 11px; position: absolute; z-index: 2; inset-inline: 24px; bottom: 202px; color: #fff; text-align: start; }
  .flow-site .flow-mobile-hero-caption .flow-mobile-hero-brand { display: none; }
  .flow-site .flow-mobile-hero-caption .flow-mobile-hero-title { margin: 0; color: #fff; font-size: clamp(1.9rem, 7.4vw, 2.7rem); font-weight: 800; line-height: 1.24; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 2px 16px #03152d66; }
  .flow-site .flow-mobile-hero-caption .flow-mobile-hero-description { margin: 0; color: #e1edff; font-size: .93rem; font-weight: 600; line-height: 1.8; }
  .flow-site .flow-hero > .flow-hero-copy > .flow-hero-actions { grid-area: 1 / 1; align-self: end; justify-self: center; position: relative; z-index: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: calc(100% - 40px); max-width: 580px; margin: 0 0 108px; }
  .flow-site .flow-hero .flow-hero-actions > a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 64px; padding: 10px 8px; font-size: .88rem; font-weight: 700; line-height: 1.4; white-space: normal; border-radius: 14px; }
  .flow-site .flow-hero .flow-hero-actions > .btn-ghost-luxe { background: #fff; color: #173b72; border-color: #d5e3fa; }
  .flow-site .flow-hero .flow-hero-actions > a:focus-visible { outline-color: #fff; outline-offset: 4px; }
  .flow-site .flow-hero-flow { position: relative; z-index: 3; margin: -26px 18px 0; border-radius: 16px; box-shadow: 0 12px 30px -20px #123c7866; }
  .flow-site .flow-hero-flow span { font-size: .76rem; }
}

@media screen and (max-width: 767px) and (max-height: 520px) {
  .flow-site .flow-hero-photo > img { height: max(300px, calc(100svh - 110px)); }
  .flow-site .flow-mobile-hero-caption { bottom: 190px; }
  .flow-site .flow-mobile-hero-caption .flow-mobile-hero-title { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .flow-site .flow-mobile-hero-caption .flow-mobile-hero-description { display: none; }
}

@media screen and (max-width: 359px) {
  .flow-site .flow-mobile-hero-caption { inset-inline: 20px; }
  .flow-site .flow-mobile-hero-caption .flow-mobile-hero-title { font-size: 1.85rem; }
  .flow-site .flow-mobile-hero-caption .flow-mobile-hero-description { font-size: .85rem; }
}