/* SafeRemit Borderless — marketing site.
   Layered on top of tokens.css + app.css: the product screens shown inside the
   phone frame are the *real* app components, so anything that styles them lives
   in app.css and only gets re-scoped here (see "device"). Everything else is
   marketing-only chrome and stays in this file. */

/* ---------------------------------------------------------------- shell -- */

/* app.css centres a 480px column and warms the page background at >=560px.
   Marketing is full-bleed, so take the body back. */
body.site {
  background: var(--surface-page);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
body.site.is-locked { overflow: hidden; }

.site ::selection { background: var(--gold-300); color: var(--navy-900); }

.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--navy-800);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700;
  transition: top var(--dur-normal) var(--ease-standard);
}
.skip-link:focus { top: 0; }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}
.wrap--narrow { max-width: 780px; }

.section { padding: 96px 0; position: relative; }
.section--tight { padding: 64px 0; }
.section--sunken { background: var(--warm-200); }
.section--ink { background: var(--navy-900); color: var(--navy-200); }
.section--ink h2, .section--ink h3 { color: #fff; }

/* --------------------------------------------------------------- topbar -- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 251, 242, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-normal) var(--ease-standard),
              background var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard);
}
.topbar.is-stuck {
  border-bottom-color: var(--border-soft);
  background: rgba(255, 251, 242, 0.9);
  box-shadow: var(--shadow-sm);
}
.topbar__inner { display: flex; align-items: center; gap: 32px; height: 76px; }
.topbar__brand { display: inline-flex; flex: none; }

.topbar__nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.topbar__nav a {
  position: relative;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-500);
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-standard);
}
.topbar__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-normal) var(--ease-emphasis);
}
.topbar__nav a:hover { color: var(--navy-800); }
.topbar__nav a:hover::after { transform: scaleX(1); }

.topbar__cta { display: flex; align-items: center; gap: 14px; flex: none; }
.topbar__signin { font-size: 14.5px; font-weight: 700; color: var(--navy-700); }
.topbar__signin:hover { color: var(--gold-700); }

.topbar__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  cursor: pointer;
}
.topbar__burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--navy-700);
  transition: transform var(--dur-normal) var(--ease-emphasis),
              opacity var(--dur-fast) var(--ease-standard);
}
.topbar__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.topbar__sheet {
  border-top: 1px solid var(--border-soft);
  background: var(--surface-page);
  padding: 12px 24px 22px;
  animation: site-drop var(--dur-normal) var(--ease-emphasis);
}
.topbar__sheet a {
  display: block;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-700);
  border-bottom: 1px solid var(--border-default);
}
.topbar__sheet-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
@keyframes site-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- buttons -- */

.site .btn { border-radius: var(--r-pill); font-weight: 750; transition: transform .25s var(--ease-standard), box-shadow .25s var(--ease-standard), background .2s; }
.site .btn:hover { transform: translateY(-2px); }
.btn--xl { height: 58px; font-size: 16px; padding: 0 30px; }

/* Ink is the call to action on both products; green marks Borderless, the way
   gold marks Trade. */
.site .btn--primary { background: var(--navy-800); color: #fff; box-shadow: 0 12px 30px rgba(13, 27, 47, .16); }
.site .btn--primary:hover { background: var(--navy-700); filter: none; }
.site .btn--outline { background: rgba(255, 255, 255, .6); border-color: var(--border-default); }
.btn--ink { background: var(--navy-800); color: #fff; box-shadow: 0 12px 30px rgba(13, 27, 47, .16); }
.btn--ink:hover { background: var(--navy-700); }
.btn--on-ink {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.btn--on-ink:hover { background: rgba(255, 255, 255, 0.15); }

/* ------------------------------------------------------- section headers -- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #4a586c;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 1.7rem; height: 1px; background: currentColor; flex: none; }
.eyebrow--ink { color: var(--gold-400); }
.eyebrow--cool { color: var(--blue-600); }

.sec-head { max-width: 720px; }
.sec-head--center { margin: 0 auto; text-align: center; }
.sec-head__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.02;
  margin-top: 18px;
}
.sec-head__sub {
  margin-top: 18px;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--text-muted);
  line-height: 1.65;
}
.section--ink .sec-head__sub { color: var(--navy-300); }

/* ----------------------------------------------------------------- hero -- */

.hero-x {
  position: relative;
  overflow: hidden;
  padding: 72px 0 88px;
  background:
    radial-gradient(1000px 520px at 82% 4%, rgba(98, 198, 112, 0.16), transparent 60%),
    radial-gradient(820px 460px at 8% 10%, rgba(75, 176, 216, 0.14), transparent 58%),
    radial-gradient(700px 420px at 55% 98%, rgba(244, 189, 63, 0.16), transparent 60%),
    var(--surface-page);
}
/* A ruled ground, faint, fading out before it reaches the copy. */
.hero-x::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(13, 27, 47, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 27, 47, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(to bottom, black 8%, transparent 86%);
  mask-image: linear-gradient(to bottom, black 8%, transparent 86%);
}
.hero-x > * { position: relative; }
.hero-x__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 48px;
  align-items: center;
}
@media (min-width: 1240px) {
  .hero-x__grid { gap: 64px; }
}
.hero-x__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.96;
  margin-top: 26px;
  color: var(--navy-800);
}
.hero-x__title .accent { color: var(--green-600); }
.hero-x__sub {
  margin-top: 22px;
  font-size: clamp(16.5px, 1.7vw, 19px);
  color: var(--navy-500);
  max-width: 33ch;
  line-height: 1.6;
}
.hero-x__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-x__trust { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 34px; }
.hero-x__signin {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-500);
}
.hero-x__signin a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: var(--text-link);
  text-decoration: none;
}
.hero-x__signin a:hover { text-decoration: underline; }

.hero-x__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-500);
  list-style: none;
}
.hero-x__trust svg { color: var(--green-600); flex: none; }

.hero-x__stage {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 640px;
  align-items: center;
}

/* Ambient rings behind the phone. */
.hero-x__halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(58,141,243,.28), rgba(47,205,130,.24), rgba(244,192,68,.3), rgba(58,141,243,.28));
  filter: blur(58px);
  opacity: 0.8;
  animation: site-spin 26s linear infinite;
  pointer-events: none;
}
@keyframes site-spin { to { transform: rotate(360deg); } }

/* Currency pills floating around the device. */
.float-pill {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}
.float-pill__mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  flex: none;
}
.float-pill__label { font-size: 12.5px; font-weight: 700; color: var(--navy-800); line-height: 1.25; }
.float-pill__meta { font-size: 11.5px; color: var(--text-muted); }

.float-pill--a { top: 8%;  left: -6%;  animation: site-float-a 7s var(--ease-standard) infinite; }
.float-pill--b { top: 34%; right: -8%; animation: site-float-b 8s var(--ease-standard) infinite; }
.float-pill--c { bottom: 16%; left: -10%; animation: site-float-b 9s var(--ease-standard) infinite; }
.float-pill--d { bottom: 4%; right: -2%; animation: site-float-a 6.5s var(--ease-standard) infinite; }

@keyframes site-float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes site-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(12px); } }

/* -------------------------------------------------------------- marquee -- */

.marquee {
  overflow: hidden;
  padding: 26px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--warm-100);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: site-marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__row { display: flex; align-items: center; gap: 46px; padding-right: 46px; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-400);
  white-space: nowrap;
}
.marquee__item svg { color: var(--navy-300); }
@keyframes site-marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- device -- */
/* The phone frame. Inside it we render the real app markup at its native
   360px width and scale the whole canvas down, so the product shots can never
   drift from the component styles in app.css. */

.device {
  --canvas-w: 360px;
  --canvas-h: 760px;
  --scale: 0.82;
  position: relative;
  z-index: 2;
  flex: none;
  width: calc(var(--canvas-w) * var(--scale) + 20px);
  height: calc(var(--canvas-h) * var(--scale) + 20px);
  padding: 10px;
  border-radius: 52px;
  background: linear-gradient(160deg, #22344f 0%, #0d1b2f 46%, #162842 100%);
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 0 2px rgba(15, 22, 38, 0.5);
}
.device::after {
  /* Screen glare. */
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 44px;
  background: linear-gradient(122deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%);
  pointer-events: none;
  z-index: 5;
}
.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 44px;
  background: var(--surface-page);
}
.device__notch {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 104px; height: 26px;
  border-radius: var(--r-pill);
  background: #0d1b2f;
}

/* One panel per screen; only .is-on is visible. */
.device__view {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.985);
  transition: opacity var(--dur-slow) var(--ease-emphasis),
              transform var(--dur-slow) var(--ease-emphasis),
              visibility 0s linear var(--dur-slow);
}
.device__view.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.device__canvas {
  width: var(--canvas-w);
  height: var(--canvas-h);
  transform: scale(var(--scale));
  transform-origin: top left;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  overflow: hidden;
}

/* --- re-scope app components that assume they own the viewport --- */
.device__canvas .bottom-nav {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: none;
  max-width: none;
  width: 100%;
  padding-bottom: 0;
}
.device__canvas .sr-scroll {
  flex: 1;
  overflow: hidden;
  padding: 12px 18px calc(var(--nav-height) + 12px);
}
.device__canvas .sheet-page__body { overflow: hidden; }
.device__canvas .app-header { padding: 40px 18px 8px; }
.device__canvas .sheet-page__head { padding: 40px 18px 8px; }
.device__canvas .sheet-page__body { padding: 0 18px 20px; }

/* Status bar so the frame reads as a phone. */
.device__status {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 26px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy-700);
  pointer-events: none;
}
.device__status-right { display: flex; align-items: center; gap: 5px; }
.device__bars { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.device__bars i { width: 3px; border-radius: 1px; background: var(--navy-700); }
.device__bars i:nth-child(1) { height: 4px; }
.device__bars i:nth-child(2) { height: 6px; }
.device__bars i:nth-child(3) { height: 8px; }
.device__bars i:nth-child(4) { height: 10px; }
.device__battery {
  width: 20px; height: 10px;
  border: 1.5px solid var(--navy-700);
  border-radius: 3px;
  padding: 1.5px;
}
.device__battery i { display: block; height: 100%; width: 72%; background: var(--navy-700); border-radius: 1px; }

/* ----------------------------------------------------------------- demo -- */

.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
  margin-top: 56px;
}
.demo__steps { display: flex; flex-direction: column; gap: 10px; }

.demo-step {
  position: relative;
  display: flex;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  cursor: pointer;
  color: inherit;
  transition: background var(--dur-normal) var(--ease-standard),
              border-color var(--dur-normal) var(--ease-standard),
              transform var(--dur-normal) var(--ease-emphasis);
}
.demo-step:hover { background: rgba(255, 255, 255, 0.6); }
.demo-step:focus-visible { outline: 3px solid var(--ring-focus); outline-offset: 2px; }
.demo-step.is-on {
  background: var(--surface-card);
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}
.demo-step__icon {
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-50);
  color: var(--navy-500);
  transition: background var(--dur-normal), color var(--dur-normal);
}
.demo-step.is-on .demo-step__icon { background: var(--navy-800); color: var(--gold); }
.demo-step__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--navy-800); }
.demo-step__body {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.55;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-emphasis), opacity var(--dur-normal), margin var(--dur-slow);
}
.demo-step.is-on .demo-step__body { max-height: 120px; opacity: 1; }
.demo-step__bar {
  position: absolute;
  left: 20px; right: 20px; bottom: 10px;
  height: 3px;
  border-radius: 3px;
  background: var(--navy-100);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-normal);
}
.demo-step.is-on .demo-step__bar { opacity: 1; }
.demo-step__bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
}
.demo-step.is-on .demo-step__bar i { animation: site-progress var(--demo-dwell, 6s) linear forwards; }
@keyframes site-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------- features -- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 56px;
}
.feature {
  position: relative;
  overflow: hidden;
  padding: 30px 26px 32px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  transition: transform var(--dur-normal) var(--ease-emphasis),
              box-shadow var(--dur-normal) var(--ease-standard),
              border-color var(--dur-normal);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--warm-500); }
.feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-emphasis);
}
.feature:hover::before { transform: scaleX(1); }
.feature__icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-50);
  color: var(--navy-700);
  margin-bottom: 20px;
}
.feature__icon--gold { background: var(--gold-100); color: var(--gold-700); }
.feature__icon--green { background: var(--green-100); color: var(--green-700); }
.feature__icon--blue { background: var(--blue-100); color: var(--blue-700); }
.feature__title { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.feature__body { margin-top: 10px; font-size: 15px; color: var(--text-muted); line-height: 1.6; }

/* ------------------------------------------------------------ corridors -- */

.corridor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.corridor {
  padding: 24px 22px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background var(--dur-normal), border-color var(--dur-normal), transform var(--dur-normal) var(--ease-emphasis);
}
.corridor:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(244, 192, 68, 0.4); transform: translateY(-4px); }
.corridor__head { display: flex; align-items: center; gap: 12px; }
.corridor__flagmark {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.corridor__code { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #fff; }
.corridor__name { font-size: 12.5px; color: var(--navy-300); }
.corridor__rails { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.corridor__rail {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy-200);
}

/* ----------------------------------------------------------------- band -- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  padding: 44px 40px;
  border-radius: var(--r-2xl);
  background: var(--grad-navy);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}
.stat-band::before {
  content: "";
  position: absolute;
  top: -80px; right: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: var(--grad-brand);
  opacity: 0.18;
}
.stat { position: relative; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat__label { margin-top: 6px; font-size: 14px; color: var(--navy-300); }

/* ---------------------------------------------------------------- steps -- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 56px;
  counter-reset: step;
}
.step-item { position: relative; padding-top: 26px; }
.step-item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -14px; left: 0;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 800;
  color: var(--warm-400);
  line-height: 1;
  z-index: 0;
}
.step-item__title { position: relative; font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.step-item__body { margin-top: 10px; font-size: 15px; color: var(--text-muted); line-height: 1.6; }

/* ---------------------------------------------------------------- split -- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 60px;
  align-items: center;
}
.split--flip .split__media { order: -1; }
.split__list { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
.split__item { display: flex; gap: 14px; }
.split__tick {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.split__item-title { font-weight: 700; color: var(--text-strong); font-size: 15.5px; }
.split__item-body { font-size: 14.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.55; }

.paper {
  position: relative;
  padding: 28px;
  border-radius: var(--r-xl);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}
.paper__head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border-default); }
.paper__rows { display: flex; flex-direction: column; }
.paper__row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; font-size: 14.5px; }
.paper__row + .paper__row { border-top: 1px solid var(--border-default); }
.paper__row dt { color: var(--text-muted); }
.paper__row dd { margin: 0; font-weight: 700; color: var(--text-strong); text-align: right; }

/* ------------------------------------------------------------- timeline -- */

.timeline { margin-top: 56px; border-left: 2px solid var(--border-soft); padding-left: 34px; display: flex; flex-direction: column; gap: 40px; }
.tl-item { position: relative; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -43px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold);
  border: 4px solid var(--surface-page);
  box-shadow: 0 0 0 2px var(--gold-300);
}
.tl-item__when { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--gold-700); letter-spacing: 0.5px; }
.tl-item__title { margin-top: 6px; font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.tl-item__body { margin-top: 8px; font-size: 15px; color: var(--text-muted); line-height: 1.6; max-width: 60ch; }

/* --------------------------------------------------------------- values -- */

.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 48px; }
.value-card {
  padding: 28px 26px;
  border-radius: var(--r-xl);
  background: var(--surface-card-warm);
  border: 1px solid var(--border-soft);
}
.value-card__mark {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--navy-800);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.value-card__title { font-family: var(--font-display); font-size: 17.5px; font-weight: 700; }
.value-card__body { margin-top: 9px; font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }

/* ------------------------------------------------------------------ faq -- */

.faq { margin-top: 48px; max-width: 820px; }
.faq__item {
  border-bottom: 1px solid var(--border-soft);
  padding: 6px 0;
}
.faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--text-strong);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 11px; height: 11px;
  border-right: 2.4px solid var(--navy-400);
  border-bottom: 2.4px solid var(--navy-400);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--dur-normal) var(--ease-emphasis);
}
.faq__item[open] .faq__q::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq__a { padding: 0 40px 24px 0; font-size: 15.5px; color: var(--text-muted); line-height: 1.7; animation: site-drop var(--dur-normal) var(--ease-emphasis); }

/* ------------------------------------------------------------- cta band -- */

.cta-band {
  position: relative;
  overflow: hidden;
  padding: 84px 0;
  background: var(--grad-navy);
}
.cta-band::before {
  content: "";
  position: absolute;
  bottom: -160px; left: 50%;
  transform: translateX(-50%);
  width: 720px; height: 400px;
  border-radius: 50%;
  background: var(--grad-brand);
  opacity: 0.16;
  filter: blur(30px);
}
.cta-band__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: center;
  justify-content: space-between;
}
.cta-band__copy { max-width: 560px; }
.cta-band__title { font-family: var(--font-display); font-size: clamp(27px, 3.6vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1.12; }
.cta-band__sub { margin-top: 16px; font-size: 16.5px; color: var(--navy-300); line-height: 1.6; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-band__ghost { color: #fff; border: 1px solid rgba(255,255,255,.24); }
.cta-band__ghost:hover { background: rgba(255,255,255,.1); }

/* --------------------------------------------------------------- footer -- */

.foot { background: var(--navy-900); color: var(--navy-300); padding: 72px 0 0; }
.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 56px;
}
.foot .sr-wordmark { color: #fff; }
.foot .sr-wordmark .suffix { color: var(--navy-300); }
.foot__pitch { margin-top: 20px; font-size: 14.5px; line-height: 1.65; max-width: 42ch; }
.foot__legal-note { margin-top: 16px; font-size: 12.5px; color: var(--navy-400); line-height: 1.6; max-width: 46ch; }
.foot__col { display: flex; flex-direction: column; gap: 12px; }
.foot__head { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.foot__col a { font-size: 14.5px; color: var(--navy-300); transition: color var(--dur-fast); }
.foot__col a:hover { color: var(--gold); }
.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding-top: 24px;
  padding-bottom: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: var(--navy-400);
}
.foot__bar-links { display: flex; gap: 20px; }
.foot__bar-links a { color: var(--navy-400); }
.foot__bar-links a:hover { color: var(--gold); }

/* ------------------------------------------------------------ long-form -- */

.prose { max-width: 760px; }
.prose h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-top: 44px; }
.prose h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-top: 30px; }
.prose p { margin-top: 14px; font-size: 15.5px; color: var(--text-muted); line-height: 1.75; }
.prose ul { margin: 14px 0 0; padding-left: 22px; }
.prose li { font-size: 15.5px; color: var(--text-muted); line-height: 1.75; margin-top: 8px; }
.prose strong { color: var(--text-strong); font-weight: 700; }
.prose__meta { font-size: 13.5px; color: var(--text-subtle); margin-top: 10px; }

.page-head {
  padding: 68px 0 56px;
  background:
    radial-gradient(760px 380px at 12% 0%, rgba(244, 192, 68, 0.2), transparent 62%),
    radial-gradient(700px 360px at 88% 10%, rgba(58, 141, 243, 0.14), transparent 60%),
    var(--surface-page);
  border-bottom: 1px solid var(--border-soft);
}
.page-head__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin-top: 20px;
}
.page-head__sub { margin-top: 20px; font-size: clamp(16px, 1.7vw, 19px); color: var(--navy-500); max-width: 62ch; line-height: 1.6; }

/* --------------------------------------------------------------- reveal -- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 640ms var(--ease-emphasis), transform 640ms var(--ease-emphasis);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* Stagger children of a revealed group. */
.reveal-group > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* No JS? Never hide the content. */
.no-js .reveal { opacity: 1; transform: none; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1080px) {
  .hero-x__grid { gap: 32px; }
  .demo__grid { gap: 40px; }
  .device { --scale: 0.74; }
}

@media (max-width: 560px) {
  .topbar__cta .btn { display: none; }
  .topbar__inner { gap: 12px; }
}

@media (max-width: 900px) {
  .topbar__nav { display: none; }
  .topbar__burger { display: flex; }
  .topbar__signin { display: none; }
  /* At 375px the wordmark, the call to action and the menu button together
     are wider than the screen, which pushed the whole page sideways. Below
     560px the menu carries the buttons instead. */
  .topbar__inner { justify-content: space-between; }
  .topbar__cta { margin-left: auto; }

  .section { padding: 68px 0; }
  .hero-x { padding: 44px 0 64px; }
  .hero-x__grid { grid-template-columns: 1fr; }
  .hero-x__sub { max-width: none; }
  .hero-x__stage { min-height: 0; margin-top: 24px; }
  .float-pill--a { left: 0; top: 2%; }
  .float-pill--b { right: 0; }
  .float-pill--c { left: 0; }
  .float-pill--d { right: 2%; }

  .demo__grid { grid-template-columns: 1fr; }
  .demo__stage { display: flex; justify-content: center; order: -1; }
  .split--flip .split__media { order: 0; }
  .foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .device { --scale: 0.66; }
  .float-pill--a, .float-pill--c { display: none; }
  .stat-band { padding: 32px 24px; }
  .foot__inner { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .btn--xl { height: 52px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .hero-x__halo,
  .float-pill,
  .demo-step__bar i { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .device__view { transition: opacity 1ms; }
}

/* --------------------------------------------------------------- stores -- */
/* App store badges, on their own row beneath the walkthrough. Drawn in our own
   type and tokens rather than the official raster badges, so they stay crisp at
   any density and cost no extra request.

   Note they live outside .demo__grid. That grid is `minmax(0, 1fr) auto`, and
   the auto track is sized to the device frame; putting a wider element in the
   stage grows the track and takes the width straight out of the step list. */

.demo__get {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border-default);
  text-align: center;
}
.demo__get-line {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-800);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 0 17px;
  height: 58px;
  border-radius: var(--r-md);
  background: var(--navy-800);
  color: var(--warm-white);
  text-decoration: none;
  border: 1px solid var(--navy-800);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.store:hover {
  transform: translateY(-2px);
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
}
.store:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.store__mark { width: 26px; height: 26px; flex: none; }

.store__text { display: flex; flex-direction: column; line-height: 1.15; }
.store__pre {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.72;
}
.store__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Not published yet: reads as a label, not a broken link. */
.store--soon {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  cursor: default;
}
.store--soon:hover { transform: none; box-shadow: none; background: transparent; }
.store--soon .store__mark { opacity: 0.5; }
.store--soon .store__name { color: var(--text-strong); }

@media (max-width: 420px) {
  .stores { flex-direction: column; align-items: stretch; }
  .store { justify-content: center; }
}

/* Money on the marketing pages is set in the brand face with tabular figures,
   the way Trade sets it — the monospace stack reads like a terminal. The
   signed-in app has its own rule for this in app.css. */
.site .balance-card__amount,
.site .row-card__value,
.site .txn-row__amount,
.site .t-mono {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ globe -- */

.globe { position: relative; width: min(100%, 660px); margin-inline: auto; }
.globe svg { width: 100%; height: auto; display: block; overflow: visible; }

/* The surface drifts one dot-cell at a time, so the loop is seamless. */
@keyframes globe-drift { to { transform: translateX(-17px); } }
.globe__dots { animation: globe-drift 2.6s linear infinite; }

/* Meridians sweep round the sphere by flattening and filling out again. */
@keyframes globe-sweep {
  0%   { transform: scaleX(0.04); }
  50%  { transform: scaleX(1); }
  100% { transform: scaleX(0.04); }
}
.globe__meridians ellipse { transform-origin: 220px 220px; animation: globe-sweep 9s ease-in-out infinite; }
.globe__meridians ellipse:nth-child(2) { animation-delay: -3s; }
.globe__meridians ellipse:nth-child(3) { animation-delay: -6s; }

/* Each arc draws itself, holds, then clears for the next payment. */
@keyframes globe-draw {
  0%       { stroke-dashoffset: 300; opacity: 0; }
  12%      { opacity: 1; }
  45%, 72% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100%{ stroke-dashoffset: -300; opacity: 0; }
}
.globe__arc {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: globe-draw 4.4s var(--ease-standard) infinite;
  animation-delay: var(--d, 0s);
}

/* A payment travelling the arc. offset-path is unsupported in a few older
   browsers; there the dot simply sits at the origin, which is harmless. */
@keyframes globe-run {
  0%, 8%    { offset-distance: 0%; opacity: 0; }
  14%       { opacity: 1; }
  62%       { offset-distance: 100%; opacity: 1; }
  70%, 100% { offset-distance: 100%; opacity: 0; }
}
.globe__runners circle { animation: globe-run 4.4s var(--ease-standard) infinite; animation-delay: var(--d, 0s); }

@keyframes globe-pulse {
  0%   { r: 5; opacity: .55; }
  70%  { r: 17; opacity: 0; }
  100% { r: 17; opacity: 0; }
}
.globe__ring { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.4; animation: globe-pulse 2.8s ease-out infinite; animation-delay: var(--d, 0s); }

.globe__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  animation: float-soft 6s ease-in-out infinite;
}
.globe__tag b { color: var(--navy-800); font-weight: 800; }
.globe__tag-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.globe__tag--a { left: 2%;  bottom: 16%; }
.globe__tag--b { right: -2%; top: 18%; animation-delay: -2s; }
.globe__tag--c { right: 6%; bottom: 10%; animation-delay: -4s; }

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@media (max-width: 720px) {
  .globe { width: min(100%, 420px); }
  .globe__tag { font-size: 11.5px; padding: 7px 11px; }
  .globe__tag--b { right: -4%; }
}

/* --------------------------------------------------------------- pictures -- */

.shots { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--navy-800);
  box-shadow: var(--shadow-lg);
}
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-standard);
}
.shot:hover img { transform: scale(1.06); }
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,27,47,0) 38%, rgba(13,27,47,.82) 100%);
}
.shot__label {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 1;
  color: #fff;
}
.shot__label b { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; }
.shot__label span { display: block; margin-top: 3px; font-size: 13px; color: rgba(255,255,255,.72); }
.shot--tall { grid-row: span 2; }
.shot--wide { min-height: 210px; }
.shots__credit { margin-top: 14px; font-size: 12px; color: var(--text-subtle); }
.shots__credit a { color: var(--text-muted); text-decoration: underline; }

@media (max-width: 860px) {
  .shots { grid-template-columns: 1fr; }
  .shot--tall { grid-row: auto; min-height: 260px; }
}

/* Anyone who has asked for less movement gets a still page. */
@media (prefers-reduced-motion: reduce) {
  .globe__dots,
  .globe__meridians ellipse,
  .globe__arc,
  .globe__runners circle,
  .globe__ring,
  .globe__tag { animation: none; }
  .globe__arc { stroke-dashoffset: 0; }
  .shot img { transition: none; }
}

/* The globe needs breathing room the phone mockup did not. */
.hero-x__stage--globe { display: block; padding: 20px 0 8px; }
@media (max-width: 900px) { .hero-x__stage--globe { padding: 8px 0 0; } }

/* A taller hero: the globe is the thing people look at, so it gets the room. */
.hero-x { padding: 92px 0 104px; }
@media (max-width: 900px) { .hero-x { padding: 52px 0 72px; } }

.hero-x__stage--globe { padding: 0; }
/* The glow sits behind the globe rather than the whole hero, which keeps the
   left column's text on flat paper where it is easiest to read. */
.hero-x__stage--globe::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(98,198,112,.18), transparent 62%);
  filter: blur(18px);
  pointer-events: none;
}
.hero-x__stage { position: relative; }

/* The globe drifts a little and casts a soft shadow, so it reads as an object
   in the page rather than a picture pasted onto it. */
@keyframes globe-hover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.globe svg { animation: globe-hover 11s ease-in-out infinite; }
.globe::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 46%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(13,27,47,.22), transparent 70%);
  filter: blur(9px);
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) { .globe svg { animation: none; } }

/* ------------------------------------------------- hero, on film -- */
/* The landing hero plays a container terminal behind it, so everything in it
   has to work on ink instead of on paper. Scoped to a modifier rather than
   applied to .hero-x, because business.html borrows .hero-x__actions and has
   no film behind it — this way that page cannot be reached from here. */

.hero-x.hero-x--cinematic {
  background: var(--navy-900);
  color: #fff;
  isolation: isolate;
}

.hero-x--cinematic .hero-x__film {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-x--cinematic .hero-x__film-clip {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* A slow push, so the loop point does not land as a cut. */
  animation: hero-film 34s ease-in-out infinite alternate;
}

@keyframes hero-film {
  from { transform: scale(1.04); }
  to   { transform: scale(1.16) translate3d(-1.4%, -1%, 0); }
}

/* Two scrims, two jobs. The first drops the left side far enough for white
   type to sit on it; the second closes the bottom so the section ends on its
   own colour and the band below starts clean. */
.hero-x--cinematic .hero-x__film::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(104deg, rgba(8,18,33,.93) 0%, rgba(8,18,33,.84) 34%, rgba(8,18,33,.42) 64%, rgba(8,18,33,.6) 100%),
    linear-gradient(to bottom, rgba(8,18,33,.72) 0%, rgba(8,18,33,0) 24%, rgba(8,18,33,0) 62%, rgba(8,18,33,.9) 100%);
}

/* The ruled ground was drawn in ink for a paper hero. */
.hero-x--cinematic::before {
  z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  -webkit-mask-image: linear-gradient(to bottom, black 6%, transparent 74%);
  mask-image: linear-gradient(to bottom, black 6%, transparent 74%);
}

.hero-x--cinematic > .wrap { z-index: 2; }

.hero-x--cinematic .eyebrow { color: rgba(255,255,255,.62); }
.hero-x--cinematic .hero-x__title { color: #fff; }
/* --green-600 is tuned for contrast against paper and goes muddy on ink. */
.hero-x--cinematic .hero-x__title .accent { color: #7fe08a; }
.hero-x--cinematic .hero-x__sub { color: rgba(255,255,255,.68); }
.hero-x--cinematic .hero-x__trust li { color: rgba(255,255,255,.62); }
.hero-x--cinematic .hero-x__trust svg { color: #7fe08a; }
.hero-x--cinematic .hero-x__signin { color: rgba(255,255,255,.55); }
.hero-x--cinematic .hero-x__signin a { color: #9bdcf4; }

/* Inverted: navy on ink is a button that is not there. */
.hero-x--cinematic .btn--primary {
  background: #fff;
  color: var(--navy-800);
  box-shadow: none;
}
.hero-x--cinematic .btn--primary:hover { background: #e9edf3; }

/* The globe's own sphere bottoms out at --navy-900, the same colour this hero
   now is, so it needs a light behind it or it dissolves into the background. */
.hero-x--cinematic .hero-x__stage--globe::before {
  inset: -16% -12%;
  background: radial-gradient(circle at 50% 45%, rgba(98,198,112,.3), rgba(75,176,216,.12) 45%, transparent 68%);
  filter: blur(26px);
}

/* Its contact shadow was ink on paper; on ink that is an invisible smudge. */
.hero-x--cinematic .globe::after {
  background: radial-gradient(ellipse at center, rgba(98,198,112,.3), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-x--cinematic .hero-x__film-clip { animation: none !important; }
}

/* One column, so the copy crosses the whole frame. The diagonal scrim above
   is shaped for the two-column layout and leaves the end of every line on the
   bright side of it; this one is even across the width instead. */
@media (max-width: 900px) {
  .hero-x--cinematic .hero-x__film::after {
    background: linear-gradient(180deg, rgba(8,18,33,.9) 0%, rgba(8,18,33,.76) 42%, rgba(8,18,33,.92) 100%);
  }
}