/* RailWise home: a field scene, then the data behind it. */
body.page-home-v4 {
  --home-ink: #15262e;
  --home-muted: #596a72;
  --home-blue: #0665d5;
  --home-shell: 1440px;
  --home-gutter: clamp(24px, 5vw, 96px);
  background: #fff;
  color: var(--home-ink);
}
@supports (overflow: clip) {
  html:has(body.page-home-v4), body.page-home-v4 { overflow-x: clip; }
  body.page-home-v4 .rw-platform__pin { overflow: clip; }
}
body.page-home-v4 .nav-header-spacer { display: none; }
body.page-home-v4 #main-content { overflow: visible; }
body.page-home-v4 .rw-site-header .rw-site-nav { width: 100%; max-width: 1632px; padding-inline: var(--home-gutter); }
body.page-home-v4 .rw-site-header { transition: background 250ms ease, color 250ms ease; }
body.page-home-v4 .rw-site-header:not(.scrolled) { backdrop-filter: none !important; }
body.page-home-v4 .rw-home { font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
.rw-home *, .rw-home *::before, .rw-home *::after { box-sizing: border-box; }
.rw-home h1, .rw-home h2, .rw-home h3, .rw-home p, .rw-home figure { margin: 0; }
.rw-home h1, .rw-home h2, .rw-home h3 { text-wrap: balance; }
.rw-home a { text-decoration: none; }
.rw-home button { font: inherit; cursor: pointer; }
.rw-home-shell { width: min(var(--home-shell), calc(100% - var(--home-gutter) * 2)); margin-inline: auto; }
.rw-home a:focus-visible, .rw-home button:focus-visible { outline: 3px solid #32c6ed; outline-offset: 6px; }
.rw-home .rw-home-label { margin-bottom: 28px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.rw-home .rw-home-button { display: inline-flex; min-height: 54px; padding: 0 24px; gap: 32px; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 550; border: 1px solid transparent; transition: background 180ms ease, color 180ms ease; }
.rw-home .rw-home-button--white { background: #fff; color: #15262e; }
.rw-home .rw-home-button--white:hover { background: #dcecf1; }
.rw-home .rw-home-text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 28px; font-size: 15px; font-weight: 550; color: inherit; border-bottom: 1px solid currentColor; }
.rw-home .rw-home-text-link:hover { color: var(--home-blue); }

/* The viewport is deliberately left to the scene and two lines of type. */
body.page-home-v4 .rw-hero { position: relative; height: 100svh; min-height: 720px; padding: 0; color: #fff; background: #172328; }
.rw-hero__frame { position: relative; height: 100%; min-height: 720px; overflow: hidden; isolation: isolate; }
.rw-hero__image, .rw-hero__shade { position: absolute; inset: 0; pointer-events: none; }
.rw-hero__image { z-index: -2; }
.rw-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.rw-hero__shade { z-index: -1; background: linear-gradient(90deg, rgba(6,16,20,.77) 0%, rgba(6,16,20,.48) 37%, rgba(6,16,20,.04) 74%), linear-gradient(0deg, rgba(4,13,17,.6), transparent 30%, transparent 75%, rgba(4,13,17,.26)); }
.rw-hero__content { position: relative; display: flex; height: 100%; flex-direction: column; justify-content: center; padding-top: 30px; padding-bottom: 70px; }
.rw-home .rw-hero__eyebrow { margin-bottom: 32px; color: #e5ecef; font-size: 14px; font-weight: 450; letter-spacing: 0; }
.rw-home .rw-hero h1 { max-width: 1000px; font-size: clamp(54px, 5.3vw, 100px); font-weight: 530; line-height: 1.22; letter-spacing: 0; color: #fff; }
.rw-hero h1 span { display: block; }
.rw-hero__details { margin-top: 36px; }
.rw-home .rw-hero__details p { color: #e0e6e9; font-size: 16px; line-height: 1.9; font-weight: 400; }
.rw-hero__details .rw-home-button { margin-top: 30px; }
.rw-hero__foot { position: absolute; left: 0; right: 0; bottom: 35px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #e6edf0; font-size: 12px; }
.rw-hero__foot a { color: inherit; }
.rw-scroll-cue { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; }
.rw-scroll-cue__icon { display: grid; place-items: center; width: 35px; height: 45px; border: 1px solid #a1adb4; border-radius: 24px; font-size: 20px; }
.rw-hero__note { margin-left: auto; opacity: .76; font-size: 11px; }
.rw-hero__product { display: flex; min-height: 44px; align-items: center; gap: 20px; }
.rw-hero__progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #ffffff30; }
.rw-hero__progress span { display: block; height: 100%; background: #d6f3fa; transform: scaleX(0); transform-origin: left; }

/* The first breath after the tunnel. */
body.page-home-v4 .rw-intro { position: relative; z-index: 1; padding: clamp(90px, 9vw, 150px) 0 0; background: #fff; scroll-margin-top: 100px; }
.rw-intro__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(40px, 8vw, 130px); align-items: end; }
.rw-home .rw-intro h2 { color: var(--home-ink); font-size: clamp(36px, 3.65vw, 65px); font-weight: 500; line-height: 1.28; letter-spacing: 0; }
.rw-intro__right { padding-bottom: 4px; }
.rw-home .rw-intro__right p { max-width: 430px; color: var(--home-muted); font-size: 17px; line-height: 1.95; }
.rw-intro__right a { margin-top: 24px; }
.rw-intro__routes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 80px; border-top: 1px solid #d7dfe3; }
.rw-intro__routes a { display: grid; grid-template-columns: 1fr auto; row-gap: 14px; padding: 32px 28px 36px; border-right: 1px solid #d7dfe3; color: var(--home-ink); transition: background 180ms ease; }
.rw-intro__routes a:first-child { padding-left: 0; }
.rw-intro__routes a:last-child { border: 0; }
.rw-intro__routes a:hover { background: #f3f7f9; }
.rw-intro__routes a > span:first-child { grid-column: 1 / -1; color: var(--home-muted); font-size: 12px; }
.rw-intro__routes a strong { font-size: 19px; font-weight: 500; }
.rw-intro__routes a > span:last-child { font-size: 22px; }

/* Real software graphics advance with the document's native scroll. */
body.page-home-v4 .rw-platform { position: relative; padding: 0; color: #fff; background: #102730; }
.rw-platform__pin { position: relative; display: flex; align-items: center; min-height: 850px; padding: 110px 0; overflow: hidden; }
.rw-platform__layout { display: grid; grid-template-columns: minmax(240px, .74fr) minmax(0, 1.7fr); gap: clamp(35px, 5vw, 80px); align-items: center; }
.rw-platform__copy { min-width: 0; }
.rw-platform .rw-home-label { color: #abc8d3; }
.rw-home .rw-platform h2 { color: #fff; font-size: clamp(40px, 3.5vw, 64px); font-weight: 500; line-height: 1.2; letter-spacing: 0; }
.rw-home .rw-platform__lead { max-width: 310px; margin-top: 25px; font-size: 15px; color: #b9c9ce; line-height: 1.85; }
.rw-platform__steps { display: grid; margin: 35px 0 28px; }
.rw-platform__steps button { position: relative; display: flex; align-items: center; gap: 17px; min-height: 86px; padding: 17px 0; border: 0; border-top: 1px solid #ffffff24; color: #c3d4d9; background: transparent; text-align: left; }
.rw-platform__steps button:last-child { border-bottom: 1px solid #ffffff24; }
.rw-platform__steps button[aria-selected="true"] { color: #fff; }
.rw-platform__steps button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #a5d3e3; }
.rw-platform__steps button > span:first-child { color: #d7e5e9; font-size: 11px; opacity: 1; }
.rw-platform__steps button strong, .rw-platform__steps button small { display: block; }
.rw-platform__steps button strong { font-size: 17px; font-weight: 500; }
.rw-platform__steps button small { color: #b7cbd2; font-size: 12px; margin-top: 5px; opacity: 1; }
.rw-platform__steps button i { margin-left: auto; font-style: normal; font-size: 19px; }
.rw-platform .rw-home-text-link { color: #fff; font-size: 14px; }
.rw-platform__visual { min-width: 0; }
.rw-platform__screens { position: relative; display: grid; }
.rw-home .rw-platform__screen { width: 100%; border: 1px solid #ffffff26; background: #fff; box-shadow: 0 30px 60px #03111744; }
.rw-home .rw-platform__screen { grid-area: 1 / 1; opacity: 0; transform: translateY(12px) scale(.99); transition: opacity 220ms ease-out, transform 260ms cubic-bezier(.2, .75, .2, 1); }
.rw-home .rw-platform__screen.is-active { opacity: 1; transform: translateY(0) scale(1); }
.rw-platform__screen-bar { display: flex; align-items: center; gap: 9px; min-height: 39px; padding: 8px 13px; background: #f4f7f8; color: #445e6a; font-size: 11px; }
.rw-platform__screen-bar b { font-weight: 550; }
.rw-platform__screen-bar > span:last-child { margin-left: auto; color: #6f838c; font-size: 10px; }
.rw-platform__dot { width: 6px; height: 6px; background: #0773a0; border-radius: 50%; }
.rw-platform__screen img { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: contain; background: #edf3f8; }
.rw-platform__screen figcaption { padding: 9px 13px; color: #596e7a; font-size: 10px; }
.rw-platform__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; color: #a3bbc5; font-size: 11px; gap: 12px; }
.rw-platform__scroll-hint { display: none; }
.rw-platform__progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #ffffff1a; }
.rw-platform__progress span { display: block; width: 100%; height: 100%; background: #9ccdda; transform: scaleX(0); transform-origin: left; }

/* Sticky behavior is enabled only after JS has initialized and when motion is welcome. */
@media (min-width: 1000px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  body.page-home-v4.rw-motion-enabled .rw-hero { height: 135svh; }
  .rw-motion-enabled .rw-hero__frame { position: sticky; top: 0; height: 100svh; }
  body.page-home-v4.rw-motion-enabled .rw-platform { height: 240svh; }
  .rw-motion-enabled .rw-platform__pin { position: sticky; top: 0; height: 100svh; min-height: 700px; padding-block: 100px 70px; }
  .rw-motion-enabled .rw-platform__scroll-hint { display: inline; }
  .rw-motion-enabled .rw-hero__image { will-change: transform; }
  .rw-motion-enabled .rw-platform__visual { will-change: transform; }
  .rw-motion-enabled .rw-platform__screen { transition-duration: 180ms, 220ms; }
}
@media (min-width: 1600px) {
  .rw-platform__layout { grid-template-columns: .7fr 1.7fr; }
  .rw-platform__visual { margin-right: -25px; }
}
@media (max-width: 1100px) {
  .rw-home .rw-hero h1 { font-size: clamp(49px, 6.2vw, 70px); }
  .rw-hero__image img { object-position: 70% 50%; }
  .rw-platform__layout { grid-template-columns: 260px minmax(0, 1fr); gap: 35px; }
  .rw-platform__screen-bar > span:last-child { display: none; }
}
@media (max-width: 767px) {
  body.page-home-v4 { --home-gutter: 24px; }
  body.page-home-v4 .rw-hero { height: 940px; min-height: 0; max-height: none; }
  .rw-hero__frame { min-height: 0; height: 100%; }
  .rw-hero__image { inset: 330px 0 0; }
  .rw-hero__image img { object-position: 78% center; }
  .rw-hero__shade { background: linear-gradient(180deg, #142329 0%, #142329 31%, #142329ee 36%, transparent 61%, #101b22aa 100%); }
  .rw-hero__content { height: auto; justify-content: flex-start; padding-top: 126px; padding-bottom: 0; }
  .rw-home .rw-hero__eyebrow { margin-bottom: 24px; font-size: 11px; letter-spacing: 0; }
  .rw-home .rw-hero h1 { max-width: 100%; font-size: clamp(33px, 7.8vw, 57px); line-height: 1.3; letter-spacing: 0; }
  .rw-hero__details { margin-top: 22px; }
  .rw-home .rw-hero__details p { font-size: 13px; line-height: 1.85; }
  .rw-hero__details .rw-home-button { margin-top: 22px; min-height: 46px; padding-inline: 18px; font-size: 13px; gap: 22px; }
  .rw-hero__foot { bottom: 20px; gap: 15px; font-size: 10px; }
  .rw-hero__product { display: none; }
  .rw-hero__note { max-width: 170px; font-size: 9px; text-align: right; }
  .rw-scroll-cue__icon { width: 28px; height: 38px; font-size: 17px; }
  body.page-home-v4 .rw-intro { padding-top: 75px; }
  .rw-intro__grid { grid-template-columns: 1fr; gap: 32px; }
  .rw-home .rw-home-label { margin-bottom: 23px; font-size: 12px; }
  .rw-home .rw-intro h2 { font-size: clamp(31px, 7vw, 48px); }
  .rw-home .rw-intro__right p { font-size: 15px; }
  .rw-intro__routes { grid-template-columns: 1fr; margin-top: 45px; }
  .rw-intro__routes a, .rw-intro__routes a:first-child { border-right: 0; border-bottom: 1px solid #d7dfe3; padding: 23px 0; row-gap: 8px; }
  .rw-intro__routes a strong { font-size: 18px; }
  .rw-intro__routes a:last-child { border-bottom: 0; }
  .rw-platform__pin { min-height: 0; padding: 70px 0; }
  .rw-platform__layout { grid-template-columns: 1fr; gap: 32px; }
  .rw-home .rw-platform h2 { font-size: 42px; }
  .rw-home .rw-platform__lead { max-width: 100%; font-size: 14px; }
  .rw-platform__steps { grid-template-columns: 1fr 1fr; margin: 25px 0 15px; gap: 22px; }
  .rw-platform__steps button { gap: 8px; min-height: 75px; border-bottom: 1px solid #ffffff24; }
  .rw-platform__steps button strong { font-size: 14px; }
  .rw-platform__steps button small { font-size: 10px; }
  .rw-platform__steps button i { display: none; }
  .rw-platform__screen-bar { min-height: 32px; font-size: 10px; padding: 7px 9px; }
  .rw-platform__screen figcaption { padding: 8px 9px; font-size: 9px; }
  .rw-platform__footer { margin-top: 15px; font-size: 10px; }
}
@media (max-width: 374px) {
  body.page-home-v4 { --home-gutter: 20px; }
  .rw-home .rw-hero h1 { font-size: 31px; }
  .rw-home .rw-hero__eyebrow { font-size: 10px; }
}
@supports not (overflow: clip) {
  @media (min-width: 1000px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
    body.page-home-v4.rw-motion-enabled .rw-hero { height: 100vh; }
    body.page-home-v4.rw-motion-enabled .rw-platform { height: auto; }
    .rw-motion-enabled .rw-hero__frame { position: relative; top: auto; height: 100vh; }
    .rw-motion-enabled .rw-platform__pin { position: relative; top: auto; height: auto; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .rw-home *, .rw-home *::before, .rw-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
