/* Public introduction: spacious navigation and editorial hero. */
.is-landing .landing-view {
  background: #fbfcff;
}

.is-landing .landing-header {
  position: sticky;
  top: 18px;
  z-index: 80;
  width: calc(100% - 48px);
  max-width: 1760px;
  height: 74px;
  margin: 0 auto -74px;
  padding: 7px 9px 7px 12px;
  gap: clamp(22px, 3vw, 48px);
  border: 1px solid rgba(25, 36, 58, .07);
  border-radius: 50px;
  color: #192333;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 44px rgba(30, 43, 79, .09);
  backdrop-filter: blur(18px);
}

.is-landing .landing-header .landing-brand { gap: 11px; }
.is-landing .landing-header .landing-brand img {
  width: 51px;
  height: 51px;
  padding: 9px;
  border-radius: 50%;
  background: #17202f;
}
.is-landing .landing-header .landing-brand strong {
  color: #17202f;
  font-size: 19px;
  font-weight: 750;
}
.is-landing .landing-header .landing-nav {
  position: relative;
  top: auto;
  left: auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.1vw, 35px);
  transform: none;
}
.is-landing .landing-header .landing-nav .landing-nav-link,
.is-landing .landing-header .landing-login {
  color: #273145;
  font-size: 15px;
  font-weight: 520;
  white-space: nowrap;
}
.is-landing .landing-header .landing-nav .landing-nav-link:hover,
.is-landing .landing-header .landing-login:hover { color: #2457da; }
.is-landing .landing-header-actions { gap: 18px; }
.is-landing .landing-header .landing-login { padding-inline: 4px; }
.is-landing .landing-header .landing-primary.compact {
  display: inline-flex;
  justify-content: space-between;
  gap: 24px;
  min-height: 58px;
  padding: 6px 7px 6px 25px;
  border: 0;
  border-radius: 40px;
  color: #fff;
  background: #17202f;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
}
.is-landing .landing-header .landing-primary.compact:hover { background: #293c62; }
.is-landing .landing-button-arrow,
.is-landing .landing-hero-action-primary span,
.is-landing .landing-hero-action-secondary span {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #162032;
  background: #fff;
  font-size: 21px;
  font-weight: 400;
}
.is-landing .landing-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: 48px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  color: #273145;
  background: transparent;
  font-size: 15px;
  font-weight: 520;
}
.is-landing .landing-menu-toggle:hover,
.is-landing .landing-menu-toggle[aria-expanded="true"] { color: #2457da; background: transparent; transform: none; }
.is-landing .landing-menu-chevron {
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.is-landing .landing-menu-bars { display: none; }
.is-landing .landing-menu-panel {
  top: 57px;
  left: -15px;
  width: 300px;
  border-radius: 17px;
  box-shadow: 0 20px 48px rgba(25, 40, 73, .16);
  transform: none;
}

.is-landing .landing-page > .landing-hero {
  position: relative;
  display: block;
  min-height: min(900px, 100svh);
  padding: 0;
  overflow: hidden;
  color: #17202f;
  background: radial-gradient(ellipse 50% 64% at 94% 73%, #7e98e8 0%, #d4ddfa 55%, transparent 100%), #fbfcff;
}
.is-landing .landing-hero-copy {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.17fr) minmax(320px, .83fr);
  align-content: end;
  column-gap: clamp(30px, 5vw, 90px);
  width: 100%;
  max-width: none;
  min-height: min(900px, 100svh);
  margin: 0;
  padding: clamp(230px, 28svh, 330px) clamp(26px, 6vw, 120px) 98px;
  text-align: left;
  animation: landing-rise .7s ease both;
}
.is-landing .landing-hero .landing-eyebrow {
  grid-column: 1 / -1;
  color: #2d384d;
  font-size: 14px;
  font-weight: 530;
}
.is-landing .landing-hero .landing-eyebrow::before { display: none; }
.is-landing .landing-hero h1 {
  grid-column: 1 / -1;
  max-width: 940px;
  margin: 32px 0 48px;
  color: #17202f;
  font-size: clamp(64px, 6.3vw, 112px);
  font-weight: 500;
  line-height: 1.01;
}
.is-landing .landing-hero-cta {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 11px;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.is-landing .landing-hero-cta button,
.is-landing .landing-hero-action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 6px 7px 6px 25px;
  border: 0;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 570;
  white-space: nowrap;
  box-shadow: 0 9px 25px rgba(28, 41, 75, .07);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.is-landing .landing-hero-cta button { color: #fff; background: #2758d8; }
.is-landing .landing-hero-cta button:hover { background: #1746c2; transform: translateY(-2px); }
.is-landing .landing-hero-action-secondary { color: #182236; background: #fff; }
.is-landing .landing-hero-action-secondary:hover { color: #204ed0; transform: translateY(-2px); }
.is-landing .landing-hero-action-secondary span { width: 24px; height: 24px; font-size: 18px; }
.is-landing .landing-hero-summary { grid-column: 2; align-self: center; }
.is-landing .landing-hero .landing-hero-lead {
  max-width: 510px;
  margin: 0;
  color: #243047;
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 470;
  line-height: 1.4;
}
.is-landing .landing-hero-platforms { gap: 19px; margin-top: 20px; }
.is-landing .landing-hero-platforms span {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #53627e;
  background: transparent;
  font-size: 12px;
}
.is-landing .landing-hero-media {
  position: absolute;
  top: 110px;
  right: clamp(34px, 5vw, 90px);
  z-index: 2;
  width: 225px;
  height: 486px;
  overflow: visible;
  animation: landing-media-in .8s .12s ease both;
}
.is-landing .landing-phone {
  width: 225px;
  border-color: #182337;
  box-shadow: 0 32px 70px rgba(33, 59, 111, .19);
  transform: rotate(4deg);
}
.is-landing .landing-video-toggle { right: -24px; bottom: 20px; }
.is-landing .landing-hero-bottom {
  position: absolute;
  right: clamp(26px, 6vw, 120px);
  bottom: 27px;
  left: clamp(26px, 6vw, 120px);
  padding: 16px 0 0;
  border-top: 1px solid rgba(43, 61, 101, .17);
  color: #53627e;
  font-size: 11px;
}
.is-landing .landing-hero-bottom a { color: #233856; }

@media (min-width: 1600px) {
  .is-landing .landing-hero h1 { max-width: 1300px; }
}

@media (max-width: 1150px) {
  .is-landing .landing-header { gap: 18px; }
  .is-landing .landing-header .landing-nav { gap: 15px; }
  .is-landing .landing-header .landing-nav .landing-nav-link,
  .is-landing .landing-menu-toggle { font-size: 13px; }
  .is-landing .landing-header .landing-primary.compact { gap: 8px; padding-left: 17px; }
  .is-landing .landing-hero-media { right: 9vw; }
}

@media (max-width: 850px) {
  .is-landing .landing-header {
    top: 10px;
    width: calc(100% - 20px);
    height: 62px;
    margin-bottom: -62px;
    padding: 5px 7px;
    gap: 8px;
  }
  .is-landing .landing-header .landing-brand img { width: 45px; height: 45px; padding: 8px; }
  .is-landing .landing-header .landing-brand strong { font-size: 15px; }
  .is-landing .landing-header .landing-nav { position: static; margin-left: auto; }
  .is-landing .landing-header .landing-nav .landing-nav-link,
  .is-landing .landing-menu-toggle > .landing-menu-label,
  .is-landing .landing-menu-toggle > .landing-menu-chevron { display: none; }
  .is-landing .landing-menu-toggle {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    padding: 0;
    border: 1px solid #dce2ee;
    border-radius: 50%;
    background: #fff;
  }
  .is-landing .landing-menu-bars { display: grid; gap: 4px; }
  .is-landing .landing-menu-toggle i { width: 17px; background: #17202f; }
  .is-landing .landing-menu-panel { top: 58px; right: 0; left: auto; }
  .is-landing .landing-header-actions { margin-left: 0; }
  .is-landing .landing-header .landing-login { display: none; }
  .is-landing .landing-header .landing-primary.compact {
    min-height: 43px;
    padding: 5px 5px 5px 14px;
    font-size: 12px;
  }
  .is-landing .landing-button-arrow { width: 33px; height: 33px; font-size: 17px; }
  .is-landing .landing-page > .landing-hero { min-height: 760px; }
  .is-landing .landing-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    min-height: 760px;
    padding: 330px 24px 78px;
    text-align: left;
  }
  .is-landing .landing-hero h1 { margin: 18px 0 20px; font-size: clamp(49px, 8vw, 69px); }
  .is-landing .landing-hero-cta { order: 3; margin-top: 20px; }
  .is-landing .landing-hero-summary { order: 2; }
  .is-landing .landing-hero-media { top: 91px; right: 8vw; width: 136px; height: 288px; margin: 0; }
  .is-landing .landing-phone { width: 136px; padding: 5px; border-radius: 30px; }
  .is-landing .landing-phone-screen { border-radius: 22px; }
  .is-landing .landing-phone-island { top: 11px; width: 54px; height: 14px; }
  .is-landing .landing-video-toggle { right: -21px; bottom: 8px; }
}

@media (max-width: 520px) {
  .is-landing .landing-header .landing-brand { gap: 4px; }
  .is-landing .landing-header .landing-brand strong { font-size: 14px; }
  .is-landing .landing-header .landing-primary.compact { font-size: 0; gap: 0; padding: 5px; }
  .is-landing .landing-button-arrow { font-size: 17px; }
  .is-landing .landing-page > .landing-hero { min-height: 810px; }
  .is-landing .landing-hero-copy { min-height: 810px; padding: 315px 21px 80px; }
  .is-landing .landing-hero .landing-eyebrow { font-size: 11px; }
  .is-landing .landing-hero h1 { margin: 15px 0 18px; font-size: clamp(43px, 11vw, 56px); line-height: 1.04; }
  .is-landing .landing-hero .landing-hero-lead { font-size: 16px; }
  .is-landing .landing-hero-cta { display: flex; gap: 8px; margin-top: 18px; padding: 0; }
  .is-landing .landing-hero-cta button,
  .is-landing .landing-hero-action-secondary { width: auto; min-height: 50px; padding: 5px 5px 5px 11px; gap: 5px; font-size: 11px; }
  .is-landing .landing-hero-action-primary span { width: 38px; height: 38px; font-size: 18px; }
  .is-landing .landing-hero-action-secondary span { width: 24px; }
  .is-landing .landing-hero-platforms { gap: 12px; margin-top: 10px; }
  .is-landing .landing-hero-platforms span { font-size: 10px; }
  .is-landing .landing-hero-media { top: 86px; right: 12vw; width: 112px; height: 244px; }
  .is-landing .landing-phone { width: 112px; }
  .is-landing .landing-hero-bottom { right: 21px; bottom: 20px; left: 21px; font-size: 10px; }
}