/* Hero-only refinement. All following sections keep their existing styles. */
.landing-redesign .hero-panel {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 74px 24px 82px;
  overflow: hidden;
}
.landing-redesign .hero-panel::before,
.landing-redesign .hero-panel::after { inset: 0; }
.landing-redesign .hero-copy {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 800px);
  margin-inline: auto;
  text-align: center;
}
.landing-redesign .hero-copy h1 {
  max-width: 780px;
  margin: 22px auto 25px;
  font-size: 60px;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: 0;
}
.landing-redesign .hero-copy h1 .headline-highlight { display: block; }
.landing-redesign .hero-copy > p { max-width: 685px; margin-inline: auto; font-size: 17px; line-height: 1.85; }
.landing-redesign .hero-actions { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; margin-top: 31px; }
.landing-redesign .hero-actions .primary-button { min-height: 56px; margin-inline: auto; padding: 16px 28px; font-size: 14px; }
.landing-redesign .hero-purchase-note { display: block; max-width: 460px; margin: 19px auto 0; font-size: 11px; line-height: 1.65; }
.hero-flows { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.hero-flow { position: absolute; top: 120px; width: 314px; height: 380px; }
.hero-flow-left { left: calc(50% - 864px); }
.hero-flow-right { right: calc(50% - 864px); transform: scaleX(-1); top: 95px; }
.flow-node { position: absolute; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid #41648785; border-radius: 8px; background: #122536; box-shadow: inset 0 1px #92ceff16; }
.flow-node svg { display: block; width: 25px; height: 25px; fill: none; stroke: #83bcdf; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-flow-right .flow-node svg { transform: scaleX(-1); }
.flow-node-five svg { stroke: #d97587; }
.flow-node-one { left: 0; top: 0; }
.flow-node-two { left: 128px; top: 0; }
.flow-node-three { left: 128px; top: 145px; background: #102f4d; border-color: #258bdf; }
.flow-node-four { left: 252px; top: 145px; }
.flow-node-five { left: 252px; top: 290px; border-color: #93404e; background: #251c29; }
.flow-link { position: absolute; display: block; color: #34628b; }
.flow-link-one { left: 62px; top: 30px; width: 66px; border-top: 1px solid currentColor; }
.flow-link-two { left: 158px; top: 62px; height: 83px; border-left: 1px solid currentColor; }
.flow-link-three { left: 190px; top: 175px; width: 62px; border-top: 1px solid currentColor; }
.flow-link-four { left: 282px; top: 207px; height: 83px; border-left: 1px solid currentColor; color: #5c465e; }
.flow-link::after { content: ""; position: absolute; width: 16px; height: 2px; top: -1px; left: 0; background: #62ceff; animation: signalAcross 4s linear infinite; animation-play-state: paused; }
.hero-motion-active .flow-link::after { animation-play-state: running; }
.flow-link-two::after, .flow-link-four::after { width: 2px; height: 16px; top: 0; left: -1px; animation-name: signalDown; }
.flow-link-two::after { animation-delay: 1s; }
.flow-link-three::after { animation-delay: 2s; }
.flow-link-four::after { background: #eb6879; animation-delay: 3s; }
.hero-flow-right .flow-link::after { animation-delay: 1.5s; }
@keyframes signalAcross { 0% { transform: translateX(0); opacity: 0; } 20%,70% { opacity: 1; } 100% { transform: translateX(46px); opacity: 0; } }
@keyframes signalDown { 0% { transform: translateY(0); opacity: 0; } 20%,70% { opacity: 1; } 100% { transform: translateY(66px); opacity: 0; } }
@media (min-width: 1700px) { .landing-redesign .hero-panel { padding-top: 84px; padding-bottom: 92px; } }
@media (max-width: 1200px) {
  .hero-flow-left { left: -200px; }
  .hero-flow-right { right: -200px; }
}
@media (max-width: 980px) {
  .landing-redesign .hero-panel { padding-top: 54px; padding-bottom: 58px; }
  .landing-redesign .hero-copy { max-width: 670px; }
  .landing-redesign .hero-copy h1 { font-size: 48px; }
  .landing-redesign .hero-copy > p { max-width: 610px; font-size: 16px; }
  .hero-flows { opacity: .4; }
  .hero-flow-left { left: -260px; }
  .hero-flow-right { right: -260px; }
}
@media (max-width: 680px) {
  .landing-redesign .hero-panel { padding: 36px 22px 48px; }
  .landing-redesign .hero-copy h1 { margin-top: 19px; font-size: 38px; line-height: 1.13; }
  .landing-redesign .hero-copy h1 .headline-highlight { display: inline; }
  .landing-redesign .hero-copy > p { font-size: 15px; line-height: 1.8; }
  .landing-redesign .hero-actions { margin-top: 26px; }
  .landing-redesign .hero-actions .primary-button { width: 100%; max-width: 380px; min-height: 54px; padding: 15px; font-size: 13px; }
  .landing-redesign .hero-purchase-note { max-width: 310px; margin-top: 16px; font-size: 10px; }
  .hero-flows { opacity: .18; }
  .hero-flow-left { left: -295px; top: 100px; }
  .hero-flow-right { right: -295px; top: 150px; }
  .flow-node { visibility: hidden; }
  .flow-link::after { animation: none; }
}
@media (max-width: 360px) {
  .landing-redesign .hero-copy h1 { font-size: 33px; }
  .landing-redesign .hero-copy > p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .flow-link::after { animation: none !important; } }
@media (forced-colors: active) { .hero-flows { display: none; } }
