@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter Variable";
  src: url("./assets/fonts/inter-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/ibm-plex-mono-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #faf9f6;
  --ink: #10182b;
  --body: #515968;
  --subtle: #686d79;
  --border: #dcdddc;
  --accent: #f45108;
  --accent-text: #c34106;
  --accent-soft: #fff0e8;
  --success: #2f7d46;
  --cta-surface: #f0f0ec;
  --white: #fff;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --sans: "Inter", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input {
  color: inherit;
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--accent-text);
}

button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

.frame {
  width: min(1200px, calc(100% - 64px));
  margin-inline: auto;
}

.section-shell {
  position: relative;
}

.mono,
.eyebrow {
  font-family: var(--mono);
  letter-spacing: .035em;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .09em;
}

.section-title {
  margin: 0;
  color: var(--ink);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.045em;
}

.section-intro {
  max-width: 460px;
  margin: 16px 0 0;
  color: var(--body);
  font-size: 16px;
  line-height: 1.65;
}

.subsection-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-150%);
  border-radius: 4px;
  background: var(--ink);
  color: var(--white);
}

.skip-link:focus {
  transform: translateY(0);
}

.icon {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: none;
}

.site-header {
  z-index: 10;
  position: relative;
  height: 88px;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}

.nav {
  display: flex;
  height: 100%;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.brand__mark {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.brand__word {
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.055em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-left: auto;
  margin-right: 46px;
  color: var(--body);
  font-size: 13px;
  font-weight: 600;
}

.nav__links a,
.footer__links a,
.mobile-menu a {
  transition: color 140ms ease;
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
}

.nav__arrow {
  width: 14px;
  height: 14px;
}

.menu-button,
.mobile-menu {
  display: none;
}

.hero {
  min-height: 1160px;
  padding-top: 92px;
  padding-bottom: 76px;
}

.hero__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  align-items: end;
  gap: 80px;
}

.hero__title-column {
  min-width: 0;
}

.hero__heading .eyebrow {
  margin-bottom: 26px;
}

.hero__title {
  max-width: 720px;
  margin: 0;
  color: var(--ink);
  font-size: 76px;
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.075em;
}

.hero__title strong {
  font-weight: 700;
}

.hero__support {
  padding-bottom: 5px;
}

.hero__description,
.hero__follow {
  max-width: 440px;
  margin: 0;
  color: var(--body);
  font-size: 17px;
  line-height: 1.58;
}

.hero__follow {
  margin-top: 13px;
  color: var(--subtle);
  font-size: 15px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 31px;
}

.button {
  display: inline-flex;
  min-height: 50px;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.button--dark {
  background: var(--ink);
  color: var(--white);
}

.button--dark:hover {
  background: var(--accent-text);
  color: var(--white);
}

.button--text {
  padding-inline: 0;
  background: transparent;
  color: var(--ink);
}

.button--text:hover {
  color: var(--accent-text);
}

.button__arrow {
  width: 15px;
  height: 15px;
}

.hero__state {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 66px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.status-badge__icon {
  width: 8px;
  height: 8px;
  object-fit: contain;
  transform-origin: center;
}

.hero__focus {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--body);
  font-size: 12px;
}

.hero__status {
  width: 8px;
  height: 8px;
}

.hero__updated {
  margin-left: auto;
  color: var(--subtle);
  font-size: 10px;
}

.hero__visual {
  position: relative;
  overflow: hidden;
  height: 592px;
  margin: 30px 0 0;
  background: #e9e8e3;
}

.hero__visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

.hero__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(16, 24, 43, .84);
  color: var(--white);
  font-size: 11px;
}

.hero__caption .mono {
  font-size: 10px;
}

.build {
  min-height: 585px;
  padding: 92px 0 94px;
  border-top: 1px solid var(--border);
}

.build .section-heading {
  margin-bottom: 48px;
}

.build__grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 112px;
  align-items: start;
}

.build-summary {
  padding: 27px 28px 23px;
  border: 1px solid var(--border);
  background: var(--white);
}

.build-summary__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.build-summary__product {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.045em;
}

.build-summary__focus {
  margin: 7px 0 0;
  color: var(--body);
  font-size: 13px;
  line-height: 1.5;
}

.build-progress {
  margin-top: 43px;
}

.build-progress__labels,
.build-summary__bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--body);
  font-size: 11px;
}

.build-progress__labels .mono,
.build-summary__bottom {
  color: var(--subtle);
  font-size: 10px;
}

.progress-track {
  overflow: hidden;
  height: 4px;
  margin-top: 13px;
  background: #e9e9e6;
}

.progress-track__fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

.build-summary__bottom {
  margin-top: 17px;
}

.milestones__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border);
}

.milestones__heading .mono {
  color: var(--subtle);
  font-size: 10px;
}

.milestone-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestone {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  min-height: 61px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.milestone__state {
  position: relative;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
}

.milestone--complete .milestone__state {
  border-color: var(--success);
  background: var(--success);
}

.milestone__check {
  width: 10px;
  height: 10px;
}

.milestone__marker {
  color: var(--subtle);
  font-size: 8px;
}

.milestone--active .milestone__state {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.milestone--active .milestone__marker,
.milestone--active .milestone__status {
  color: var(--accent-text);
}

.milestone__title {
  font-size: 12px;
}

.milestone__status {
  color: var(--subtle);
  font-size: 9px;
  white-space: nowrap;
}

.milestone__status--active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.updates {
  min-height: 778px;
  padding: 92px 0 100px;
  border-top: 1px solid var(--border);
}

.section-heading--row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
}

.section-heading__note {
  padding-bottom: 5px;
  color: var(--subtle);
  font-size: 10px;
  white-space: nowrap;
}

.updates__list {
  margin-top: 49px;
}

.update {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 20px;
  min-height: 158px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.update__number {
  padding-top: 3px;
  color: var(--subtle);
  font-size: 10px;
}

.update__meta {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 10px;
  color: var(--subtle);
  font-size: 10px;
}

.update__product {
  color: var(--accent-text);
  font-weight: 500;
}

.update__meta .mono {
  font-size: 10px;
}

.update__title {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.03em;
}

.update__description {
  max-width: 620px;
  margin: 8px 0 14px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.6;
}

.update .status-badge {
  color: var(--subtle);
  font-size: 9px;
}

.update--featured {
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr);
  gap: 55px;
  align-items: center;
  padding: 28px 0;
}

.update--featured .update__figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--white);
}

.update__image {
  display: block;
  width: 100%;
  aspect-ratio: 1.52;
  object-fit: cover;
  object-position: top;
}

.update__figure figcaption {
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  color: var(--subtle);
  font-size: 9px;
}

.inside {
  min-height: 2637px;
  overflow: hidden;
  padding: 99px 0 110px;
  border-top: 1px solid var(--border);
}

.inside__heading {
  max-width: 700px;
}

.inside__heading .section-intro {
  margin-top: 18px;
}

.snapshot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 940px 700px;
  gap: 62px 32px;
  margin-top: 92px;
}

.snapshot {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.snapshot--hero {
  grid-column: 1 / -1;
}

.snapshot__hero-media {
  position: relative;
  overflow: hidden;
  display: flex;
  height: 775px;
  align-items: center;
  justify-content: center;
  background: #f0f0ec;
}

.snapshot__hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.phone-frame {
  z-index: 1;
  position: absolute;
  right: 9%;
  bottom: -1px;
  width: 218px;
  padding: 9px;
  border: 1px solid rgba(16, 24, 43, .35);
  border-radius: 31px 31px 0 0;
  background: #111725;
  box-shadow: 0 20px 56px rgba(16, 24, 43, .21);
}

.phone-frame__bezel {
  position: relative;
  overflow: hidden;
  height: 426px;
  border-radius: 23px 23px 0 0;
  background: #fff;
}

.phone-frame__screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.phone-frame__camera {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  width: 46px;
  height: 11px;
  transform: translateX(-50%);
}

.snapshot__caption {
  display: flex;
  min-height: 144px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  padding: 21px 0 0;
}

.snapshot__product {
  color: var(--subtle);
  font-size: 9px;
}

.snapshot__title {
  margin: 8px 0 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.04em;
}

.snapshot__note {
  max-width: 420px;
  margin: 9px 0 0;
  color: var(--body);
  font-size: 12px;
  line-height: 1.6;
}

.snapshot__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-top: 2px;
}

.snapshot__status .mono {
  color: var(--subtle);
  font-size: 9px;
}

.snapshot__screen {
  position: relative;
  overflow: hidden;
  height: 520px;
  background: #f0f0ec;
}

.snapshot__swatch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.snapshot__image {
  position: absolute;
  inset: 8% 6% auto;
  width: 88%;
  height: 84%;
  object-fit: contain;
  object-position: center top;
}

.snapshot--3 .snapshot__image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.products {
  min-height: 541px;
  padding: 93px 0 95px;
  border-top: 1px solid var(--border);
}

.products .section-heading--row {
  align-items: end;
}

.products .section-intro {
  max-width: 240px;
  margin: 0 0 3px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 47px;
  border: 1px solid var(--border);
  background: var(--white);
}

.product-card {
  display: flex;
  min-height: 224px;
  flex-direction: column;
  padding: 22px 24px 19px;
}

.product-card + .product-card {
  border-left: 1px solid var(--border);
}

.product-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.product-card__eyebrow {
  color: var(--subtle);
  font-size: 9px;
}

.product-card__top .status-badge {
  font-size: 9px;
}

.product-card__title {
  margin: 32px 0 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.product-card__description {
  max-width: 290px;
  margin: 8px 0 17px;
  color: var(--body);
  font-size: 12px;
  line-height: 1.55;
}

.product-card__domain {
  margin-top: auto;
  color: var(--subtle);
  font-size: 9px;
}

.roadmap {
  min-height: 415px;
  padding: 88px 0 96px;
  border-top: 1px solid var(--border);
}

.roadmap .section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
}

.roadmap .section-intro {
  max-width: 330px;
  margin: 0 0 3px;
}

.roadmap__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 42px;
  border: 1px solid var(--border);
}

.roadmap-card {
  min-height: 165px;
  padding: 17px 20px 20px;
  background: var(--paper);
}

.roadmap-card + .roadmap-card {
  border-left: 1px solid var(--border);
}

.roadmap-card--now {
  background: var(--accent-soft);
}

.roadmap-card__top {
  display: flex;
  justify-content: space-between;
  color: var(--subtle);
  font-size: 9px;
}

.roadmap-card--now .roadmap-card__period {
  color: var(--accent);
}

.roadmap-card__title {
  margin: 18px 0 13px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.025em;
}

.roadmap-card__items {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 17px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--body);
  font-size: 10px;
}

.roadmap-card__items li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.roadmap-card__arrow {
  width: 10px;
  height: 10px;
}

.follow {
  min-height: 525px;
  padding: 97px 0 96px;
  border-top: 1px solid var(--border);
  background: var(--cta-surface);
}

.follow__inner {
  display: grid;
  grid-template-columns: minmax(0, 700px) 1fr;
  gap: 80px;
  align-items: center;
}

.follow__content .eyebrow {
  margin-bottom: 19px;
}

.follow__description {
  max-width: 500px;
  margin: 16px 0 25px;
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
}

.follow-form {
  display: flex;
  max-width: 530px;
  gap: 9px;
}

.follow-form input {
  min-width: 0;
  min-height: 50px;
  flex: 1;
  padding: 0 15px;
  border: 1px solid #c9cbc8;
  border-radius: 3px;
  background: var(--paper);
  font-size: 13px;
}

.follow-form input::placeholder {
  color: #858a92;
}

.follow-form .button {
  min-width: 184px;
}

.follow__note {
  margin: 12px 0 0;
  color: var(--subtle);
  font-size: 9px;
}

.follow__message {
  min-height: 20px;
  margin: 9px 0 0;
  color: var(--accent-text);
  font-size: 12px;
}

.follow__message:not(.follow__message--visible) {
  visibility: hidden;
}

.follow__aside {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px 0;
  color: var(--subtle);
  font-size: 9px;
}

.follow__arrow {
  width: 28px;
  height: 28px;
}

.footer {
  padding: 54px 0 23px;
  border-top: 1px solid var(--border);
  background: var(--paper);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  padding-bottom: 51px;
}

.footer__summary {
  max-width: 220px;
  margin: 15px 0 0;
  color: var(--body);
  font-size: 12px;
}

.footer__links {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  color: var(--body);
  font-size: 11px;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
  color: var(--subtle);
  font-size: 10px;
}

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

@media (max-width: 1100px) {
  .frame {
    width: calc(100% - 56px);
  }

  .hero__intro {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
    gap: 40px;
  }

  .hero__title {
    font-size: clamp(56px, 6vw, 72px);
  }

  .build__grid {
    gap: 54px;
  }

  .milestone-list {
    column-gap: 20px;
  }

  .snapshot__screen {
    height: 450px;
  }
}

@media (max-width: 700px) {
  html {
    scroll-padding-top: 78px;
  }

  body {
    font-size: 15px;
  }

  .frame {
    width: calc(100% - 40px);
  }

  .section-title {
    font-size: 28px;
    line-height: 1.16;
    letter-spacing: -.045em;
  }

  .section-intro {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
  }

  .eyebrow {
    margin-bottom: 15px;
    font-size: 9px;
  }

  .site-header {
    height: 72px;
  }

  .brand {
    gap: 8px;
  }

  .brand__mark {
    width: 24px;
    height: 24px;
  }

  .brand__word {
    font-size: 17px;
  }

  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav {
    justify-content: space-between;
  }

  .menu-button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .menu-button__icon {
    display: block;
    width: 22px;
    height: 22px;
  }

  .mobile-menu:not([hidden]) {
    position: absolute;
    top: 71px;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 20px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--paper);
    box-shadow: 0 12px 20px rgba(16, 24, 43, .06);
  }

  .mobile-menu a {
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    color: var(--body);
    font-size: 14px;
  }

  .mobile-menu a:last-child {
    border-bottom: 0;
    color: var(--ink);
    font-weight: 500;
  }

  .hero {
    min-height: 929px;
    padding-top: 64px;
    padding-bottom: 50px;
  }

  .hero__intro {
    display: block;
  }

  .hero__heading .eyebrow {
    margin-bottom: 19px;
  }

  .hero__title {
    max-width: 370px;
    font-size: 44px;
    line-height: 1.04;
    letter-spacing: -.07em;
  }

  .hero__support {
    margin-top: 27px;
    padding: 0;
  }

  .hero__description {
    font-size: 15px;
    line-height: 1.55;
  }

  .hero__follow {
    margin-top: 9px;
    font-size: 13px;
  }

  .hero__actions {
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 20px;
  }

  .button {
    min-height: 46px;
    gap: 14px;
    padding-inline: 15px;
    font-size: 12px;
  }

  .button--text {
    padding-inline: 0;
  }

  .hero__state {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 14px;
    margin-top: 32px;
    padding: 13px 0;
  }

  .hero__state .status-badge {
    grid-column: 1 / -1;
  }

  .hero__focus {
    font-size: 10px;
  }

  .hero__updated {
    font-size: 8px;
    text-align: right;
  }

  .hero__visual {
    height: 322px;
    margin-top: 20px;
  }

  .hero__image {
    object-position: center top;
  }

  .hero__caption {
    min-height: 38px;
    padding-inline: 11px;
    font-size: 9px;
  }

  .hero__caption .mono {
    font-size: 8px;
  }

  .build {
    min-height: 842px;
    padding: 68px 0 72px;
  }

  .build .section-heading {
    margin-bottom: 27px;
  }

  .build__grid {
    display: flex;
    flex-direction: column;
    gap: 34px;
  }

  .build-summary {
    width: 100%;
    padding: 19px 17px 18px;
  }

  .build-summary__product {
    font-size: 19px;
  }

  .build-summary__focus {
    max-width: 200px;
    font-size: 11px;
  }

  .build-summary__top .status-badge {
    font-size: 10px;
  }

  .build-progress {
    margin-top: 30px;
  }

  .build-progress__labels {
    font-size: 10px;
  }

  .build-progress__labels .mono,
  .build-summary__bottom {
    font-size: 9px;
  }

  .milestones__heading {
    padding-bottom: 11px;
  }

  .subsection-title {
    font-size: 16px;
  }

  .milestone-list {
    display: block;
  }

  .milestone {
    min-height: 50px;
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
  }

  .milestone__title {
    font-size: 11px;
  }

  .milestone__status {
    font-size: 8px;
  }

  .updates {
    min-height: 1002px;
    padding: 67px 0 72px;
  }

  .section-heading--row {
    display: block;
  }

  .section-heading__note {
    display: block;
    margin-top: 15px;
    padding: 0;
    font-size: 8px;
  }

  .updates__list {
    margin-top: 27px;
  }

  .update {
    grid-template-columns: 29px 1fr;
    gap: 10px;
    min-height: 177px;
    padding: 20px 0;
  }

  .update__number {
    font-size: 8px;
  }

  .update__meta {
    flex-wrap: wrap;
    gap: 7px 13px;
    margin-bottom: 9px;
    font-size: 9px;
  }

  .update__meta .mono {
    font-size: 9px;
  }

  .update__title {
    font-size: 16px;
  }

  .update__description {
    margin: 7px 0 12px;
    font-size: 12px;
  }

  .update--featured {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
  }

  .update--featured .update__figure {
    width: 100%;
  }

  .update__image {
    aspect-ratio: 1.4;
  }

  .update__figure figcaption {
    padding: 9px 10px;
    font-size: 8px;
  }

  .inside {
    min-height: 2551px;
    padding: 69px 0 75px;
  }

  .inside__heading {
    max-width: 365px;
  }

  .snapshot-grid {
    display: flex;
    flex-direction: column;
    gap: 42px;
    margin-top: 38px;
  }

  .snapshot--hero {
    order: 1;
  }

  .snapshot--2 {
    order: 2;
  }

  .snapshot--3 {
    order: 3;
  }

  .snapshot__hero-media {
    height: 460px;
    justify-content: flex-start;
    background: #f0f0ec;
  }

  .snapshot__hero-image {
    inset: 0 auto 0 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }

  .phone-frame {
    right: 15px;
    bottom: 0;
    width: 126px;
    padding: 5px;
    border-radius: 20px 20px 0 0;
  }

  .phone-frame__bezel {
    height: 246px;
    border-radius: 15px 15px 0 0;
  }

  .phone-frame__camera {
    top: 5px;
    width: 32px;
    height: 8px;
  }

  .snapshot__caption {
    min-height: 132px;
    gap: 12px;
    padding-top: 15px;
  }

  .snapshot__product {
    font-size: 8px;
  }

  .snapshot__title {
    margin-top: 6px;
    font-size: 17px;
  }

  .snapshot__note {
    max-width: 245px;
    margin-top: 7px;
    font-size: 11px;
  }

  .snapshot__status {
    gap: 9px;
  }

  .snapshot__status .status-badge {
    font-size: 9px;
  }

  .snapshot__status .mono {
    font-size: 8px;
  }

  .snapshot__screen {
    height: 340px;
  }

  .snapshot__image {
    inset: 7% 5% auto;
    width: 90%;
    height: 86%;
    object-fit: contain;
    object-position: center top;
  }

  .snapshot--3 .snapshot__image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .products {
    min-height: 1047px;
    padding: 68px 0 75px;
  }

  .products .section-heading--row {
    display: block;
  }

  .products .section-intro {
    max-width: 250px;
    margin-top: 12px;
  }

  .product-grid {
    grid-template-columns: 1fr;
    margin-top: 27px;
  }

  .product-card {
    min-height: 226px;
    padding: 19px 17px 17px;
  }

  .product-card + .product-card {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .product-card__title {
    margin-top: 29px;
    font-size: 19px;
  }

  .product-card__description {
    max-width: 280px;
    font-size: 11px;
  }

  .roadmap {
    min-height: 693px;
    padding: 67px 0 74px;
  }

  .roadmap .section-heading {
    display: block;
  }

  .roadmap .section-intro {
    max-width: 300px;
    margin-top: 12px;
  }

  .roadmap__grid {
    grid-template-columns: 1fr;
    margin-top: 27px;
  }

  .roadmap-card {
    min-height: 151px;
    padding: 15px 16px 17px;
  }

  .roadmap-card + .roadmap-card {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .roadmap-card__title {
    margin: 15px 0 12px;
  }

  .roadmap-card__items {
    gap: 8px 15px;
    font-size: 10px;
  }

  .follow {
    min-height: 666px;
    padding: 73px 0 70px;
  }

  .follow__inner {
    display: block;
  }

  .follow__description {
    max-width: 350px;
    margin: 13px 0 22px;
    font-size: 13px;
  }

  .follow-form {
    flex-direction: column;
    gap: 9px;
  }

  .follow-form input {
    min-height: 48px;
    flex: auto;
    font-size: 12px;
  }

  .follow-form .button {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }

  .follow__note {
    font-size: 8px;
  }

  .follow__message {
    font-size: 11px;
  }

  .follow__aside {
    display: flex;
    height: 153px;
    align-items: flex-start;
    margin-top: 45px;
    padding: 13px 0;
    border-top: 1px solid #d5d6d2;
  }

  .follow__arrow {
    align-self: flex-end;
    width: 22px;
    height: 22px;
  }

  .footer {
    padding: 36px 0 20px;
  }

  .footer__top {
    display: block;
    padding-bottom: 28px;
  }

  .footer__summary {
    max-width: 250px;
    margin-top: 11px;
    font-size: 11px;
  }

  .footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
    margin-top: 29px;
    font-size: 10px;
  }

  .footer__bottom {
    flex-wrap: wrap;
    gap: 11px 20px;
    padding-top: 15px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Layout refinements from the approved Landing Page frames. */
.brand__word {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.05em;
}

.nav__links {
  gap: 32px;
  margin-right: 32px;
}

.nav__cta {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.nav__mobile-cta {
  display: none;
}

.hero {
  min-height: 1160px;
  padding: 0;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.hero__state {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.hero__state .status-badge {
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--accent-soft);
  font-size: 12px;
}

.hero__state .status-badge__icon,
.hero__state > .mono {
  display: none;
}

.hero__state > span:last-child {
  color: var(--body);
  font-family: "Inter Variable", Arial, sans-serif;
  font-size: 12px;
}

.hero__intro {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}

.hero__title {
  max-width: 700px;
  font-size: 76px;
  line-height: 1.05;
  letter-spacing: -.07em;
}

.hero__title strong {
  font-weight: 700;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}

.hero__description,
.hero__follow {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.55;
}

.hero__follow {
  color: var(--body);
  font-size: 16px;
}

.hero__actions {
  justify-content: flex-start;
  gap: 26px;
  margin: -8px 0 0;
}

.hero__actions .button--dark {
  min-height: 48px;
  border-radius: 6px;
  padding-inline: 20px;
  font-size: 14px;
}

.hero__visual {
  overflow: visible;
  height: auto;
  margin: -8px 0 0;
  background: transparent;
}

.hero__window-context {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 500;
}

.hero__window-domain {
  font-weight: 400;
}

.hero__visual picture {
  overflow: hidden;
  height: 618px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
}

.hero__image {
  object-position: center top;
}

.hero__caption {
  position: static;
  min-height: 0;
  padding: 12px 0 0;
  background: transparent;
  color: var(--subtle);
  font-size: 11px;
}

.hero__caption .mono {
  color: var(--subtle);
  font-size: 11px;
}

.hero__caption--mobile {
  display: none;
}

.snapshot--intake .snapshot__view-hint {
  align-self: stretch;
  width: 100%;
}

.build {
  min-height: 585px;
  padding: 80px 0;
}

.build .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 40px;
}

.build .section-heading__note {
  color: var(--subtle);
}

.build__grid {
  display: grid;
  grid-template-columns: minmax(0, 510px) minmax(0, 1fr);
  gap: 120px;
}

.current-build {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.product-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.product-badge__separator,
.product-badge__testing {
  color: var(--subtle);
}

.product-badge__state,
.update__status {
  color: var(--accent-text);
}

.current-build__focus {
  max-width: 510px;
  margin: 0;
  font-size: 32px;
  line-height: 1.22;
  letter-spacing: -.045em;
}

.current-build > .status-badge {
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--accent-soft);
  font-size: 12px;
}

.current-build > .status-badge__icon,
.current-build .status-badge__icon {
  width: 5px;
  height: 5px;
}

.build-count {
  padding-top: 10px;
}

.build-count__number {
  margin: 0;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.05em;
}

.build-count__total {
  color: var(--subtle);
  font-weight: 400;
}

.build-count__note {
  margin: 4px 0 0;
  color: var(--body);
  font-size: 13px;
  line-height: 1.55;
}

.build-metadata {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.55;
}

.build-metadata p {
  margin: 0;
}

.milestones {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.milestones__eyebrow {
  margin: 0;
  color: var(--subtle);
  font-size: 11px;
}

.milestone-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestone {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  min-height: 52px;
  gap: 16px;
  border: 0;
}

.milestone__state {
  z-index: 1;
  position: relative;
  width: 20px;
  height: 52px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.milestone:not(:last-child) .milestone__state::after {
  z-index: 0;
  position: absolute;
  top: 33px;
  left: 9px;
  width: 1px;
  height: 19px;
  background: var(--border);
  content: "";
}

.milestone__check {
  z-index: 1;
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  background: var(--success);
  object-fit: contain;
}

.milestone--complete .milestone__state {
  background: transparent;
}

.milestone--active .milestone__state,
.milestone--next .milestone__state {
  background: transparent;
}

.milestone--next .milestone__state::before {
  z-index: 2;
  position: absolute;
  top: 19px;
  left: 4px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
  content: "";
}

.milestone--next .milestone__state::before {
  border-color: var(--border);
}

.milestone__marker {
  display: none;
}

.milestone__title {
  font-size: 14px;
}

.milestone__status {
  color: var(--subtle);
  font-size: 11px;
}

.milestone--active .milestone__status {
  color: var(--accent-text);
}

.updates {
  min-height: 778px;
  padding: 80px 0;
}

.updates__layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 96px;
}

.updates__layout > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.updates__layout .eyebrow {
  margin: 0;
}

.updates__layout .section-intro {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.updates__list {
  margin: 0;
}

.update {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 40px;
  min-height: 0;
  padding: 26px 0;
}

.update__date {
  padding-top: 1px;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 500;
}

.update__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.update__details .product-badge {
  font-size: 11px;
}

.update__title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

.update__description {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.update__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  margin: 1px 0 0;
  padding-top: 10px;
}

.update__image {
  display: block;
  width: min(100%, 640px);
  height: 160px;
  border: 1px solid var(--border);
  border-radius: 8px;
  object-fit: cover;
  object-position: center 50%;
}

.update__figure figcaption {
  padding: 0;
  border: 0;
  color: var(--subtle);
  font-size: 11px;
}

.inside {
  min-height: 2637px;
  padding: 80px 0;
}

.inside .frame {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.inside__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: none;
}

.inside__heading .eyebrow,
.inside__heading .section-intro {
  margin: 0;
}

.inside__heading .section-intro {
  font-size: 15px;
  line-height: 1.55;
}

.snapshot-grid {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin: 0;
}

.snapshot {
  display: grid;
  grid-template-columns: minmax(0, 880fr) minmax(0, 264fr);
  align-items: start;
  gap: 56px;
}

.snapshot--intake {
  grid-template-columns: minmax(0, 264fr) minmax(0, 880fr);
}

.snapshot__media,
.snapshot__caption {
  min-width: 0;
}

.snapshot__media--screen {
  overflow: hidden;
  height: 718px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
}

.snapshot__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.snapshot__view-hint {
  display: none;
}

.snapshot__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 24px;
}

.snapshot__title {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

.snapshot__note {
  max-width: none;
  margin: 0;
  color: var(--body);
  font-size: 15px;
  line-height: 1.55;
}

.snapshot__date {
  color: var(--subtle);
  font-size: 12px;
  line-height: 1.55;
}

.snapshot__media--intake {
  display: flex;
  height: auto;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  background-color: var(--paper);
  background-image: radial-gradient(circle, #c6c8c6 .7px, transparent .8px);
  background-position: center;
  background-size: 8px 8px;
}

.snapshot__phone-stack {
  position: relative;
  width: 760px;
  max-width: 100%;
  height: 740px;
  margin-inline: auto;
}

.phone-frame {
  position: absolute;
  top: 74px;
  width: 280px;
  height: 592px;
  padding: 8px;
  overflow: visible;
  border: 1px solid #525252;
  border-radius: 39px;
  background: #151515;
  box-shadow: 0 7px 9px rgba(0, 0, 0, .08), 0 21px 21px rgba(0, 0, 0, .15);
}

.phone-frame--left {
  left: 0;
  transform: rotate(-10deg);
}

.phone-frame--right {
  right: 0;
  transform: rotate(10deg);
}

.phone-frame--center {
  z-index: 2;
  left: calc(50% - 140px);
}

.phone-frame__screen-window {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 31px;
  background: var(--white);
}

.phone-frame__screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.phone-frame__dynamic-island {
  z-index: 2;
  position: absolute;
  top: 6px;
  left: 50%;
  width: 75px;
  height: 17px;
  transform: translateX(-50%);
  border-radius: 12px;
  background: #080808;
}

.phone-frame__camera {
  z-index: 3;
  position: absolute;
  top: 11px;
  left: calc(50% + 29px);
  width: 7px;
  height: 7px;
}

.phone-frame__home {
  z-index: 3;
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 88px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: #151515;
}

.phone-frame__volume,
.phone-frame__side-button {
  position: absolute;
  width: 3px;
  border-radius: 1px;
  background: #393939;
}

.phone-frame__volume {
  left: -3px;
  height: 28px;
}

.phone-frame__volume--up {
  top: 100px;
}

.phone-frame__volume--down {
  top: 137px;
}

.phone-frame__side-button {
  top: 118px;
  right: -3px;
  height: 42px;
}

.snapshot--intake .snapshot__caption {
  order: -1;
}

.products {
  min-height: 541px;
  padding: 80px 0;
}

.product-family {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 96px;
}

.product-family__about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.product-family__about .eyebrow,
.product-family__about .section-intro {
  margin: 0;
}

.product-family__title {
  white-space: pre-line;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.045em;
}

.product-family__about .section-intro {
  font-size: 15px;
  line-height: 1.55;
}

.product-family__promise {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.product-family__list {
  display: flex;
  flex-direction: column;
}

.product-summary {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 36px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
}

.product-summary__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.product-summary__name {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.55;
}

.product-summary__identity .status-badge {
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--cta-surface);
  font-size: 12px;
}

.product-summary:last-child .status-badge {
  background: var(--accent-soft);
}

.product-summary__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
}

.product-summary__description,
.product-summary__domain {
  margin: 0;
}

.product-summary__description {
  color: var(--ink);
}

.product-summary__domain {
  color: var(--subtle);
  font-size: 12px;
}

.roadmap {
  min-height: 415px;
  padding: 80px 0;
}

.roadmap .section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.roadmap .section-heading .eyebrow {
  margin: 0;
}

.roadmap .section-title {
  font-weight: 600;
}

.roadmap__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 40px;
  border: 0;
}

.roadmap-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
  border-left: 0 !important;
  background: transparent;
}

.roadmap-card--now {
  border-color: var(--accent);
  background: transparent;
}

.roadmap-card__period {
  color: var(--subtle);
  font-size: 11px;
}

.roadmap-card--now .roadmap-card__period {
  color: var(--accent-text);
}

.roadmap-card__items {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.4;
}

.roadmap-card__items li {
  display: block;
}

.follow {
  min-height: 0;
  padding: 80px 0;
}

.follow__inner {
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  align-items: center;
  gap: 120px;
}

.follow__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.follow__content .section-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.045em;
}

.follow__description {
  max-width: none;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

.follow-form {
  max-width: none;
  gap: 8px;
}

.follow-form input {
  min-height: 48px;
  border-radius: 6px;
  background: var(--white);
  font-size: 14px;
}

.follow-form .button {
  min-height: 48px;
  min-width: 186px;
  gap: 16px;
  border-radius: 6px;
  padding-inline: 20px;
  font-size: 14px;
}

.follow__reassurance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: var(--subtle);
  font-size: 11px;
}

.follow__legal {
  display: flex;
  gap: 14px;
  color: var(--body);
}

.follow__message {
  min-height: 0;
  margin: 2px 0 0;
  font-size: 12px;
}

.follow__message:not(.follow__message--visible) {
  display: none;
}

.footer {
  padding: 48px 0;
}

.footer__top {
  align-items: flex-start;
  padding-bottom: 0;
}

.footer__identity {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 460px;
}

.footer__identity .footer__summary,
.footer__domain {
  margin: 0;
}

.footer__domain {
  color: var(--subtle);
  font-size: 12px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.footer__page-links {
  display: flex;
  gap: 28px;
  color: var(--body);
  font-size: 12px;
}

.footer__email {
  color: var(--ink);
  font-size: 13px;
}

.footer__bottom {
  padding-top: 20px;
  font-size: 11px;
}

.brand__mark {
  width: 28px;
  height: 28px;
}

.hero__state .status-badge__icon {
  display: block;
  width: 5px;
  height: 5px;
}

.hero__state > .mono {
  display: inline;
}

.build .section-title,
.updates__layout .section-title,
.inside__heading .section-title,
.roadmap .section-title {
  font-weight: 600;
}

.snapshot__media--screen {
  position: relative;
}

.snapshot__image {
  position: static;
  inset: auto;
}

.snapshot--intake .snapshot__view-hint {
  display: block;
}

@media (max-width: 1100px) and (min-width: 701px) {
  .hero__intro {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 40px;
  }

  .build__grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 50px;
  }

  .product-family {
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 48px;
  }

  .product-summary {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 700px) {
  .brand__word {
    font-size: 24px;
    font-weight: 400;
  }

  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__mobile-cta {
    display: inline-flex;
    margin-left: auto;
    margin-right: 20px;
    font-size: 12px;
    font-weight: 500;
  }

  .hero {
    min-height: 0;
  }

  .hero__inner {
    gap: 28px;
    padding-top: 34px;
    padding-bottom: 40px;
  }

  .hero__state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hero__state .status-badge {
    font-size: 12px;
  }

  .hero__state > span:last-child {
    display: inline;
    font-size: 11px;
  }

  .hero__intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .hero__title {
    max-width: none;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -.06em;
  }

  .hero__title strong {
    font-weight: 400;
  }

  .hero__copy {
    gap: 12px;
    padding: 0;
  }

  .hero__description {
    font-size: 17px;
  }

  .hero__follow {
    font-size: 15px;
  }

  .hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 0;
  }

  .hero__actions .button--dark {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 14px;
  }

  .hero__actions .button--text {
    justify-content: flex-start;
    min-height: 24px;
    font-size: 14px;
  }

  .hero__window-context {
    justify-content: flex-start;
    margin-bottom: 12px;
    font-size: 9px;
  }

  .hero__window-domain {
    display: none;
  }

  .hero__visual picture {
    height: 365px;
    border-radius: 8px;
  }

  .hero__caption {
    align-items: flex-start;
    padding-top: 10px;
    font-size: 10px;
  }

  .hero__caption .mono {
    display: none;
  }

  .hero__caption--desktop {
    display: none;
  }

  .hero__caption--mobile {
    display: block;
  }

  .build {
    min-height: 0;
    padding: 48px 0;
  }

  .build .section-heading {
    margin-bottom: 28px;
  }

  .build .section-heading__note {
    display: none;
  }

  .build__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .current-build {
    gap: 20px;
  }

  .current-build__focus {
    font-size: 26px;
    line-height: 1.22;
  }

  .build-count__number {
    font-size: 44px;
  }

  .milestones {
    width: 100%;
    gap: 12px;
    padding-top: 8px;
  }

  .milestone {
    min-height: 52px;
  }

  .milestone__title {
    font-size: 14px;
  }

  .updates {
    min-height: 0;
    padding: 48px 0;
  }

  .updates__layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .updates__layout > div:first-child {
    gap: 18px;
  }

  .updates__layout .section-title {
    font-size: 28px;
    font-weight: 600;
  }

  .updates__layout .section-intro {
    font-size: 15px;
  }

  .update {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 0;
  }

  .update__details {
    gap: 9px;
  }

  .update__title {
    font-size: 20px;
  }

  .update__description {
    font-size: 15px;
  }

  .update__image {
    height: auto;
    aspect-ratio: 4 / 1;
  }

  .inside {
    min-height: 0;
    padding: 48px 0;
  }

  .inside .frame {
    gap: 28px;
  }

  .inside__heading {
    gap: 12px;
  }

  .inside__heading .section-title {
    font-size: 28px;
    font-weight: 600;
  }

  .inside__heading .section-intro {
    font-size: 15px;
  }

  .snapshot-grid {
    gap: 44px;
  }

  .snapshot,
  .snapshot--intake {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .snapshot__media--screen {
    height: 390px;
    border-radius: 8px;
  }

  .snapshot--dispatch .snapshot__media--screen {
    height: 385px;
  }

  .snapshot--overview .snapshot__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
  }

  .snapshot--dispatch .snapshot__image {
    object-fit: cover;
    object-position: center 42%;
  }

  .snapshot__view-hint {
    display: block;
    margin: 10px 0 0;
    color: var(--subtle);
    font-size: 11px;
    line-height: 1.55;
  }

  .snapshot__media--screen {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .snapshot__media--screen .snapshot__image {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
  }

  .snapshot__media--intake {
    height: auto;
    width: min(310px, 100%);
    gap: 12px;
    padding: 0;
    background-position: center;
    background-size: 8px 8px;
  }

  .snapshot__phone-stack {
    display: flex;
    width: 100%;
    height: 670px;
    justify-content: center;
    align-items: center;
  }

  .phone-frame {
    display: none;
  }

  .phone-frame--center {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: min(310px, 100%);
    height: auto;
    aspect-ratio: 310 / 646;
    padding: 8px;
    transform: none;
    border-radius: 44px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .05), 0 12px 12px rgba(0, 0, 0, .1);
  }

  .phone-frame__screen-window {
    border-radius: 35px;
  }

  .phone-frame__dynamic-island {
    top: 6px;
    width: 86px;
    height: 19px;
    border-radius: 12px;
  }

  .phone-frame__camera {
    top: 12px;
    left: calc(50% + 35px);
  }

  .phone-frame__home {
    bottom: 6px;
    width: 100px;
    height: 4px;
  }

  .snapshot__caption {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
  }

  .snapshot__title {
    font-size: 24px;
    line-height: 1.55;
  }

  .snapshot__note {
    font-size: 15px;
  }

  .snapshot__date {
    font-size: 12px;
  }

  .products {
    min-height: 0;
    padding: 48px 0;
  }

  .product-family {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .product-family__about {
    gap: 18px;
  }

  .product-family__title {
    font-size: 28px;
  }

  .product-family__about .section-intro {
    font-size: 15px;
  }

  .product-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 0;
  }

  .product-summary__identity {
    gap: 10px;
  }

  .product-summary__details {
    gap: 10px;
    font-size: 15px;
  }

  .roadmap {
    min-height: 0;
    padding: 48px 0;
  }

  .roadmap .section-heading {
    gap: 12px;
  }

  .roadmap .section-title {
    font-size: 28px;
  }

  .roadmap__grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 28px;
  }

  .roadmap-card {
    gap: 20px;
    min-height: 0;
    padding: 18px 0 8px;
  }

  .roadmap-card__items {
    gap: 9px;
    font-size: 17px;
  }

  .follow {
    min-height: 0;
    padding: 48px 0;
  }

  .follow__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
  }

  .follow__content {
    gap: 16px;
  }

  .follow__content .section-title {
    font-size: 28px;
  }

  .follow__description {
    font-size: 16px;
  }

  .follow__subscription,
  .follow-form {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .follow-form input {
    width: 100%;
    min-height: 48px;
  }

  .follow-form .button {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .follow__reassurance {
    width: 100%;
    margin-top: 16px;
    font-size: 11px;
  }

  .footer {
    padding: 36px 0;
  }

  .footer__top {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .footer__identity {
    width: 100%;
  }

  .footer__summary {
    max-width: 460px;
    margin: 0;
    font-size: 13px;
  }

  .footer__links {
    gap: 24px;
    width: 100%;
    min-width: 0;
  }

  .footer__page-links {
    flex-wrap: wrap;
    gap: 14px 20px;
    width: 100%;
    min-width: 0;
    font-size: 12px;
  }

  .footer__email {
    font-size: 13px;
  }

  .footer__bottom {
    padding-top: 20px;
    font-size: 11px;
  }
}

.milestone__pulse {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
}

.milestone__pulse::before,
.milestone__pulse::after {
  position: absolute;
  inset: -2px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.milestone__spinner {
  display: inline-block;
  transform-origin: center;
}

@keyframes status-dot-pulse {
  0%,
  100% {
    opacity: .65;
    transform: scale(.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}

@keyframes milestone-slash-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes milestone-ripple {
  0% {
    opacity: .55;
    transform: scale(.65);
  }

  80%,
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

@media (min-width: 701px) {
  .milestone__pulse {
    top: 24px;
    left: 9px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__state .status-badge__icon,
  .current-build .status-badge__icon {
    animation: status-dot-pulse 1.8s ease-in-out infinite;
  }

  .milestone__spinner {
    animation: milestone-slash-spin 1s linear infinite;
  }

  .milestone__pulse::before,
  .milestone__pulse::after {
    animation: milestone-ripple 1.8s ease-out infinite;
  }

  .milestone__pulse::after {
    animation-delay: .9s;
  }
}

/* Full-bleed hero map: keep the routes legible on the right and fade them before the copy. */
.hero__inner {
  position: relative;
}

.hero__state,
.hero__intro,
.hero__actions {
  z-index: 2;
}

.hero__visual.hero-map {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  height: 100%;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  background: var(--paper);
}

.hero-map__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-map__base {
  display: block;
  pointer-events: none;
}

.hero-map__routes,
.hero-map__route-casing,
.hero-map__route {
  fill: none;
  pointer-events: none;
}

.hero-map__route-casing,
.hero-map__route {
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hero-map__route-casing {
  stroke: #f6f7f4;
  stroke-width: 8;
  opacity: .92;
}

.hero-map__route {
  stroke-width: 3;
  stroke-dasharray: 2 9;
  opacity: .9;
}

.hero-map__route--rider {
  stroke: #c66e4c;
}

.hero-map__hub-halo {
  fill: #fff;
  opacity: .76;
}

.hero-map__warehouse-radius {
  fill: #f45108;
  fill-opacity: .055;
  stroke: #f45108;
  stroke-opacity: .52;
  stroke-width: 1.8;
  stroke-dasharray: 6 7;
  vector-effect: non-scaling-stroke;
}

.hero-map__hub-pin {
  fill: #f45108;
}

.hero-map__hub-icon {
  color: #fff;
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-map__dropoff-pulse {
  fill: none;
  stroke: #11843e;
  stroke-width: 1.8;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-map-customer-pulse 2.8s ease-out infinite;
  vector-effect: non-scaling-stroke;
}

.hero-map__dropoff-pulse--inner {
  animation-delay: 1.4s;
}

.hero-map__dropoff-halo {
  fill: #11843e;
  opacity: .08;
  stroke: #11843e;
  stroke-width: 1.5;
  stroke-opacity: .5;
  vector-effect: non-scaling-stroke;
}

.hero-map__dropoff-disc {
  fill: #11843e;
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.hero-map__dropoff-icon {
  color: #fff;
  stroke: currentColor;
}

@keyframes hero-map-customer-pulse {
  0% { opacity: .4; transform: scale(.66); }
  78%, 100% { opacity: 0; transform: scale(1.2); }
}

.hero-map__rider-shadow {
  fill: #fff;
  opacity: .68;
}

.hero-map__rider-disc {
  fill: transparent;
  stroke: #fff;
  stroke-width: 3;
}

.hero-map__rider-avatar {
  pointer-events: none;
}

.hero-map__marker-shadow {
  fill: #fff;
  opacity: .68;
}

.hero-map__truck-disc {
  fill: #172239;
  stroke: #fff;
  stroke-width: 3;
}

.hero-map__marker-icon {
  color: #fff;
  stroke: currentColor;
}

.hero-map__ship-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-map__ship {
  pointer-events: none;
}

.hero-map__ship--reduced-fallback {
  display: none;
}

.hero-map__ship--coral { color: #ec593e; }
.hero-map__ship--teal { color: #089e9a; }
.hero-map__ship-disc {
  fill: currentColor;
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.hero-map__car-disc {
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.hero-map__car-disc--moving {
  fill: #10182b;
  opacity: 1;
  animation: hero-map-car-moving-state 66s steps(1, end) infinite;
}

.hero-map__car-disc--parked {
  fill: #f45108;
  opacity: 1;
  animation: hero-map-car-parked-state 42s steps(1, end) infinite;
}

.hero-map__car-disc--armed {
  fill: #11843e;
  opacity: 0;
  animation: hero-map-car-armed-state 42s steps(1, end) infinite;
}

.hero-map__car-icon {
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-map__shield-state {
  opacity: 0;
}

.hero-map__shield-state circle {
  stroke: #fff;
  stroke-width: 2;
}

.hero-map__shield-state use {
  color: #fff;
  stroke: currentColor;
}

.hero-map__shield-state--parked {
  animation: hero-map-car-parked-state 42s steps(1, end) infinite;
}

.hero-map__shield-state--armed {
  animation: hero-map-car-armed-state 42s steps(1, end) infinite;
}

.hero-map__shield-state--parked circle { fill: #e79b22; }
.hero-map__shield-state--armed circle { fill: #11843e; }

.hero-map__update rect {
  fill: #fff;
  filter: drop-shadow(0 5px 10px rgb(16 24 43 / 12%));
}

.hero-map__update {
  opacity: 0;
  animation: hero-map-status 19s ease-in-out infinite;
}

.hero-map__vehicle-status {
  opacity: 0;
  animation: hero-map-vehicle-status-card 42s ease-in-out infinite;
}

.hero-map__security-status--parked {
  opacity: 1;
  animation: hero-map-car-parked-state 42s steps(1, end) infinite;
}

.hero-map__security-status--moving {
  opacity: 1;
  animation: hero-map-car-moving-state 66s steps(1, end) infinite;
}

.hero-map__security-status--armed {
  opacity: 0;
  animation: hero-map-car-armed-state 42s steps(1, end) infinite;
}

.hero-map__card-body rect {
  fill: #fff;
  stroke: #edf0f3;
  stroke-width: 1;
}

.hero-map__ship-card--dock {
  opacity: 0;
  animation: hero-map-dock-status 28s ease-in-out infinite;
}

.hero-map__ship-card--arrival {
  opacity: 0;
  animation: hero-map-arrival-status 5s ease-in-out 7s 1 both;
}

.hero-map__card-body {
  transform-box: fill-box;
  transform-origin: center;
}

.hero-map__ship-title,
.hero-map__security-title {
  fill: #10182b;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
}

.hero-map__ship-detail,
.hero-map__security-detail {
  fill: #11843e;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
}

@keyframes hero-map-dock-status {
  0%, 36% { opacity: 0; }
  42%, 72% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

@keyframes hero-map-arrival-status {
  0%, 12% { opacity: 0; }
  24%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

.hero-map--paused .hero-map__update,
.hero-map--paused .hero-map__ship-card--dock,
.hero-map--paused .hero-map__ship-card--arrival,
.hero-map--paused .hero-map__dropoff-pulse,
.hero-map--paused .hero-map__vehicle-status,
.hero-map--paused .hero-map__security-status,
.hero-map--paused .hero-map__car-disc,
.hero-map--paused .hero-map__shield-state {
  animation-play-state: paused;
}

@keyframes hero-map-status {
  0%, 10%, 34%, 100% {
    opacity: 0;
  }

  14%, 28% {
    opacity: 1;
  }
}

@keyframes hero-map-car-parked-state {
  0%, 28.56% { opacity: 1; }
  28.57%, 100% { opacity: 0; }
}

@keyframes hero-map-car-armed-state {
  0%, 28.56% { opacity: 0; }
  28.57%, 100% { opacity: 1; }
}

@keyframes hero-map-vehicle-status-card {
  0%, 7.14% { opacity: 0; }
  8.1%, 15.7% { opacity: 1; }
  16.67%, 28.57% { opacity: 0; }
  29.52%, 37.14% { opacity: 1; }
  38.1%, 100% { opacity: 0; }
}

.hero-map__update .hero-map__status-shield {
  color: #fff;
  stroke: currentColor;
}

.hero-map__credit {
  fill: #687482;
  font-family: var(--sans);
  font-size: 12px;
  opacity: .78;
  pointer-events: auto;
  text-decoration: none;
}

.hero-map__credit:hover {
  opacity: 1;
  text-decoration: underline;
}

@media (min-width: 701px) and (max-width: 1199px) {
  .hero__visual.hero-map {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: 50%;
    align-self: auto;
    width: 100vw;
    height: clamp(440px, 48vw, 570px);
    flex: 0 0 auto;
    margin: 0;
    transform: translateX(-50%);
  }
}

@media (max-width: 700px) {
  .hero__visual.hero-map {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: 50%;
    align-self: auto;
    width: 100vw;
    height: clamp(320px, 88vw, 390px);
    flex: 0 0 auto;
    margin: 0;
    transform: translateX(-50%);
  }

  .hero-map__card-body { transform: scale(1.5); }
  .hero-map__credit { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-map__update,
  .hero-map__ship-card--dock,
  .hero-map__ship-card--arrival,
  .hero-map__dropoff-pulse,
  .hero-map__vehicle-status,
  .hero-map__security-status,
  .hero-map__car-disc,
  .hero-map__shield-state { animation: none; }

  .hero-map__update { opacity: 1; }
  .hero-map__dropoff-pulse { display: none; }
  .hero-map__security-status--parked,
  .hero-map__car-disc--parked,
  .hero-map__shield-state--parked { opacity: 1; }
  .hero-map__security-status--armed,
  .hero-map__car-disc--armed,
  .hero-map__shield-state--armed { opacity: 0; }
  .hero-map__ship--arriving { display: none; }
  .hero-map__ship--reduced-fallback { display: block; }
  .hero-map__vehicle-status { opacity: 0; }
  .hero-map__ship-card--dock { opacity: 1; }
  .hero-map__ship-card--arrival { opacity: 1; }
}

/* Let the hero map meet the dark build band without a paper-colored gap. */
.build {
  margin-top: 0;
}

@media (min-width: 701px) and (max-width: 1199px) {
  .hero__inner {
    padding-bottom: 0;
  }
}

@media (max-width: 700px) {
  .hero__inner {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__state .status-badge__icon,
  .current-build .status-badge__icon,
  .milestone__spinner {
    animation: none;
  }

  .milestone__pulse::before,
  .milestone__pulse::after {
    display: none;
  }
}

/* Inside Navvia: a self-contained route illustration with no map service dependency. */
.snapshot--intake {
  background-color: var(--paper);
  background-image: radial-gradient(circle, #e3e4e1 .6px, transparent .8px);
  background-position: center;
  background-size: 8px 8px;
}

.snapshot__media--intake {
  position: relative;
  background: transparent;
}

.snapshot__media--dispatch-map {
  position: relative;
  height: 718px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--paper);
}

.snapshot__media--dispatch-map::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 65%, rgb(250 249 246 / .72) 82%, var(--paper) 100%);
  content: "";
  pointer-events: none;
}

.dispatch-map {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dispatch-map__radius-outline {
  fill: #f45108;
  fill-opacity: .035;
  stroke: #f45108;
  stroke-opacity: .3;
  stroke-width: 1.5;
}

.dispatch-map__pulse {
  fill: #f45108;
  fill-opacity: .08;
  stroke: #f45108;
  stroke-opacity: .42;
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.dispatch-map__waypoint-pulse {
  fill: transparent;
  opacity: 0;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.dispatch-map__waypoint-pulse--pickup {
  stroke: #f45108;
}

.dispatch-map__waypoint-pulse--dropoff {
  stroke: #11843e;
}

.dispatch-map__waypoint-pulse--two {
  animation-delay: 1.1s;
}

.dispatch-map.is-dropoff-active .dispatch-map__waypoint-pulse--dropoff,
.dispatch-map.is-pickup-active .dispatch-map__waypoint-pulse--pickup {
  animation: dispatch-waypoint-pulse 2.2s cubic-bezier(.2, 0, 0, 1) infinite;
}

.dispatch-map.is-dropoff-active .dispatch-map__waypoint-pulse--dropoff.dispatch-map__waypoint-pulse--two,
.dispatch-map.is-pickup-active .dispatch-map__waypoint-pulse--pickup.dispatch-map__waypoint-pulse--two {
  animation-delay: 1.1s;
}

@keyframes dispatch-waypoint-pulse {
  0% {
    opacity: .58;
    stroke-width: 1.5;
    transform: scale(.8);
  }

  100% {
    opacity: 0;
    stroke-width: .75;
    transform: scale(2.3);
  }
}

.dispatch-map.is-active .dispatch-map__pulse {
  animation: dispatch-radius-pulse 2.5s ease-out infinite;
}

.dispatch-map.is-active .dispatch-map__pulse--delayed {
  animation-delay: 1.25s;
}

@keyframes dispatch-radius-pulse {
  0% {
    opacity: .55;
    transform: scale(.72);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

.navvia-cursor {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}

.navvia-cursor.is-visible {
  opacity: 1;
}

.navvia-cursor__pointer,
.navvia-cursor__trail {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.navvia-cursor__pointer {
  z-index: 2;
  display: block;
  width: 18px;
  height: 23px;
  filter: drop-shadow(0 1px 1.5px rgb(16 24 43 / .18));
}

.navvia-cursor__pointer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.navvia-cursor__trail {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 4px;
  border: 1px solid #cdd9f7;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 14px rgb(16 24 43 / .14);
  color: var(--ink);
}

.navvia-cursor__avatar {
  display: block;
  width: 24px;
  height: 24px;
  padding: 2px;
  border: 1px solid #cdd9f7;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

.navvia-cursor__name {
  padding-right: 1px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

@media (max-width: 1100px) {
  .snapshot--dispatch .snapshot__media--dispatch-map {
    height: 385px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .snapshot__media--intake.has-navvia-cursor,
  .snapshot__media--intake.has-navvia-cursor * {
    cursor: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dispatch-map__pulse {
    opacity: .18;
    transform: none;
  }

  .navvia-cursor {
    display: none;
  }
}

/* Polish: quieter labels, more readable supporting text, and crisp feedback. */
:root {
  --text-meta: 12px;
  --motion-fast: 160ms;
  --motion-curve: cubic-bezier(.2, 0, 0, 1);
}

.section-title {
  text-wrap: balance;
}

.hero__description,
.hero__follow,
.section-intro,
.update__description,
.snapshot__note,
.product-summary__description,
.follow__description {
  text-wrap: pretty;
}

.nav__links,
.nav__cta {
  font-size: 14px;
}

.nav__cta,
.nav__mobile-cta {
  transition:
    color var(--motion-fast) var(--motion-curve),
    transform var(--motion-fast) var(--motion-curve);
}

.nav__links a,
.footer__page-links a,
.footer__email,
.follow__legal a {
  position: relative;
}

.nav__links a::after,
.footer__page-links a::after,
.footer__email::after,
.follow__legal a::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: currentColor;
  content: "";
  transition: transform var(--motion-fast) var(--motion-curve);
}

.button {
  transition:
    background-color var(--motion-fast) var(--motion-curve),
    border-color var(--motion-fast) var(--motion-curve),
    color var(--motion-fast) var(--motion-curve),
    transform var(--motion-fast) var(--motion-curve);
}

.button__arrow,
.nav__arrow {
  transition: transform var(--motion-fast) var(--motion-curve);
}

.button:active {
  transform: scale(.97);
}

.nav__cta:active,
.nav__mobile-cta:active {
  transform: scale(.98);
}

.status-badge,
.product-badge,
.update__details .product-badge {
  font-size: var(--text-meta);
}

.hero__window-context,
.hero__caption,
.hero__caption .mono,
.milestone__status,
.update__date,
.update__figure figcaption,
.snapshot__view-hint,
.snapshot__date,
.roadmap-card__period,
.follow__reassurance,
.footer__bottom {
  font-size: var(--text-meta);
}

.milestones {
  gap: 16px;
}

.milestones__title {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.milestone__title {
  font-size: 15px;
}

.update__details {
  gap: 12px;
}

.update__title {
  font-size: 21px;
  line-height: 1.35;
  text-wrap: balance;
}

.update__description,
.snapshot__note,
.product-summary__details {
  font-size: 16px;
  line-height: 1.6;
}

.update__figure figcaption,
.snapshot__view-hint {
  line-height: 1.45;
}

.product-family__promise {
  font-size: 15px;
}

.product-summary__domain {
  font-size: 13px;
}

.follow-form {
  gap: 12px;
}

.follow-form input {
  font-size: 16px;
  transition:
    border-color var(--motion-fast) var(--motion-curve),
    box-shadow var(--motion-fast) var(--motion-curve);
}

.follow__reassurance {
  gap: 20px;
  margin-top: 20px;
}

.footer__summary {
  font-size: 14px;
  line-height: 1.6;
}

.footer__page-links {
  font-size: 13px;
}

.menu-button {
  border-radius: 6px;
  transition:
    background-color var(--motion-fast) var(--motion-curve),
    transform var(--motion-fast) var(--motion-curve);
}

.menu-button:active {
  transform: scale(.97);
}

.follow-form input:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgba(195, 65, 6, .12);
}

.snapshot__view-hint a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-underline-position: from-font;
}

@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover::after,
  .nav__links a:focus-visible::after,
  .footer__page-links a:hover::after,
  .footer__page-links a:focus-visible::after,
  .footer__email:hover::after,
  .footer__email:focus-visible::after,
  .follow__legal a:hover::after,
  .follow__legal a:focus-visible::after {
    transform: scaleX(1);
  }

  .nav__cta:hover .nav__arrow,
  .nav__cta:focus-visible .nav__arrow,
  .button:not(.button--text):hover .button__arrow,
  .button:not(.button--text):focus-visible .button__arrow {
    transform: translateX(3px);
  }

  .hero__actions .button--text:hover .button__arrow,
  .hero__actions .button--text:focus-visible .button__arrow {
    transform: translateY(3px);
  }

  .menu-button:hover {
    background-color: var(--cta-surface);
  }
}

@media (max-width: 700px) {
  body {
    font-size: 16px;
  }

  .nav__mobile-cta {
    font-size: 14px;
  }

  .section-intro,
  .updates__layout .section-intro,
  .inside__heading .section-intro,
  .product-family__about .section-intro {
    font-size: 16px;
  }

  .hero__window-context,
  .hero__caption {
    font-size: var(--text-meta);
  }

  .update__description,
  .snapshot__note,
  .product-summary__details,
  .follow__description {
    font-size: 16px;
  }

  .follow-form {
    gap: 10px;
  }

  .follow__reassurance {
    gap: 16px;
    margin-top: 20px;
  }

  .footer__page-links {
    font-size: 13px;
  }
}

/* Desktop V2 source, adapted to the existing mobile reading order. */
.hero {
  min-height: 0;
  padding: 0;
}

.hero__inner {
  min-height: 529px;
  gap: 40px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.hero__state .status-badge {
  background: var(--accent-soft);
}

.hero__focus {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--subtle);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
}

.hero__focus strong {
  color: var(--body);
  font-weight: 600;
}

.hero__actions {
  margin: 0;
}

.build .section-heading {
  margin-bottom: 40px;
}

.build .section-heading__note {
  margin: 0;
  color: var(--subtle);
  font-size: 12px;
}

.build__updated-mobile {
  display: none;
}

.build__grid {
  grid-template-columns: minmax(0, 510px) minmax(0, 1fr);
  gap: 120px;
}

.current-build {
  gap: 20px;
}

.current-build__focus {
  font-size: 32px;
  line-height: 1.22;
}

.build-count__note {
  margin-top: 4px;
}

.build-count__total {
  font-size: 32px;
  font-weight: 300;
}

.milestones__title {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.updates__layout > div:first-child {
  gap: 12px;
}

.updates__layout > div:first-child > .eyebrow,
.product-family__about > .eyebrow,
.inside__heading > .eyebrow,
.roadmap .section-heading > .eyebrow {
  margin: 0;
}

.update {
  border-top: 0;
}

.update + .update {
  border-top: 1px solid var(--border);
}

.update__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.55;
}

.product-family__title {
  font-weight: 400;
}

.product-family__title strong {
  font-weight: 700;
}

.product-summary__name {
  font-weight: 700;
}

.product-summary__statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-summary__identity .status-badge--field-testing {
  background: #eadef7;
}

.product-summary__identity .status-badge--building {
  background: var(--accent-soft);
}

.product-summary__identity .status-badge--planned {
  background: var(--cta-surface);
}

.status-badge--field-testing .status-badge__icon,
.roadmap__visual .status-badge__icon {
  width: 5px;
  height: 5px;
}

.roadmap {
  overflow: visible;
}

.roadmap .section-heading {
  gap: 12px;
}

.roadmap__grid {
  width: calc(100% - 338px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
  margin-top: 40px;
}

.roadmap__visual {
  z-index: 1;
  position: absolute;
  top: 32px;
  right: max(32px, calc((100% - 1200px) / 2));
  width: 238px;
  height: 391px;
  overflow: hidden;
  margin: 0;
  background: var(--paper);
}

.roadmap__phone-image {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 125%;
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center top;
}

.roadmap__visual > .status-badge {
  position: absolute;
  top: 47px;
  left: -123px;
  padding: 5px 8px;
  border-radius: 4px;
  background: #eadef7;
  font-size: 12px;
}

.roadmap .section-heading .eyebrow {
  margin: 0;
}

.follow {
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgb(113 119 131 / 12%) .5px, transparent .8px);
  background-position: top left;
  background-size: 8px 8px;
}

.snapshot--intake {
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgb(113 119 131 / 12%) .5px, transparent .75px);
  background-position: center;
  background-size: 8px 8px;
}

.snapshot__media--intake {
  background: transparent;
}

.follow__reassurance {
  justify-content: flex-end;
  margin-top: 12px;
}

.footer {
  padding: 48px 0 0;
}

.footer__main {
  padding-bottom: 52px;
}

.footer__top {
  padding-bottom: 0;
}

.footer__brand-band {
  overflow: hidden;
  background: var(--ink);
  color: #dcdddc;
}

.footer__brand-inner {
  position: relative;
  padding-top: 20px;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0;
  border: 0;
  color: #dcdddc;
  font-size: 11px;
}

.footer__wordmark {
  position: relative;
  display: flex;
  height: 276px;
  align-items: flex-end;
  overflow: visible;
  color: transparent;
  font-size: clamp(112px, 19.2vw, 276px);
  font-weight: 500;
  letter-spacing: -.085em;
  line-height: .78;
  white-space: nowrap;
  -webkit-text-stroke: 1px #1c2942;
}

.footer__brand-dot {
  position: absolute;
  top: 44px;
  right: 17%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 1100px) and (min-width: 701px) {
  .build__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .follow__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .roadmap__grid {
    width: calc(100% - 250px);
    gap: 24px;
  }

  .roadmap__visual {
    top: 48px;
    right: 28px;
    width: 190px;
    height: 314px;
  }

  .roadmap__visual > .status-badge {
    left: -95px;
  }
}

@media (max-width: 700px) {
  .hero__inner {
    min-height: 0;
    gap: 28px;
    padding-top: 34px;
    padding-bottom: 40px;
  }

  .hero__state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hero__focus {
    font-size: 12px;
  }

  .hero__actions {
    margin: 0;
  }

  .build .section-heading {
    margin-bottom: 28px;
  }

  .build .section-heading__note {
    display: none;
  }

  .build__updated-mobile {
    display: block;
    margin: -8px 0 0;
    color: var(--subtle);
    font-size: 12px;
  }

  .build__grid {
    gap: 24px;
  }

  .current-build__focus {
    font-size: 26px;
  }

  .build-count__total {
    font-size: 26px;
  }

  .updates__layout > div:first-child {
    gap: 12px;
  }

  .roadmap__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .roadmap__grid {
    width: 100%;
    gap: 28px;
    margin-top: 28px;
  }

  .roadmap__visual {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    width: min(297px, 84vw);
    height: auto;
    aspect-ratio: 297 / 391;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    overflow: visible;
  }

  .roadmap__phone-image {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    transform: none;
    object-fit: contain;
  }

  .roadmap__visual > .status-badge {
    position: relative;
    top: auto;
    left: auto;
    order: -1;
    margin-bottom: 8px;
  }

  .follow__reassurance {
    justify-content: flex-end;
    margin-top: 12px;
  }

  .footer {
    padding-top: 36px;
  }

  .footer__main {
    padding-bottom: 36px;
  }

  .footer__brand-inner {
    padding-top: 18px;
  }

  .footer__bottom {
    font-size: 10px;
  }

  .footer__wordmark {
    height: 132px;
    font-size: clamp(96px, 26vw, 112px);
  }

  .footer__brand-dot {
    top: 22px;
    right: 13%;
    width: 22px;
    height: 22px;
  }

  .snapshot--intake {
    background-color: var(--paper);
    background-image: radial-gradient(circle, rgb(113 119 131 / 12%) .5px, transparent .75px);
    background-position: center;
    background-size: 8px 8px;
  }

  .snapshot__media--intake {
    background: transparent;
  }
}

/* V2 corrections: restore the approved product mockups and align the supporting UI. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 503px);
  grid-template-rows: auto 1fr auto;
  align-items: center;
  column-gap: 40px;
  row-gap: 22px;
}

.hero__state,
.hero__intro,
.hero__actions {
  grid-column: 1;
}

.hero__state {
  grid-row: 1;
  align-self: end;
}

.hero__intro {
  grid-row: 2;
  display: block;
}

.hero__actions {
  grid-row: 3;
  align-self: start;
}

.hero__visual {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: visible;
  background: transparent;
}

.hero__window-context,
.hero__caption {
  display: none;
}

.hero__picture {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  line-height: 0;
  background: var(--white);
}

.hero__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero__focus-label--mobile {
  display: none;
}

.build-count__number {
  display: flex;
  align-items: baseline;
  gap: .16em;
}

.milestone:not(:last-child) .milestone__state::after {
  top: 37px;
  left: 9.5px;
  height: 30px;
}

.milestone__pulse {
  top: 50%;
  left: 50%;
}

.milestone__status--active {
  gap: 4px;
  font-weight: 700;
}

.milestone__spinner {
  margin-left: 1px;
}

.update__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.55;
}

.update__description {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

.update:last-child {
  border-top: 0;
}

.snapshot--overview {
  min-width: 0;
}

.snapshot__media--overview {
  height: 428px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.snapshot--overview .snapshot__image {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: cover;
  object-position: top center;
}

.snapshot--intake {
  position: relative;
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgb(113 119 131 / 8%) .65px, transparent .9px);
  background-position: 0 0;
  background-size: 8px 8px;
}

.snapshot__route {
  z-index: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.package-route {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.package-route__line {
  fill: none;
  stroke: #cfd1d0;
  stroke-width: 2;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.package-route__pulse {
  fill: none;
  stroke: #2463e9;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.package-route__disc {
  fill: #2463e9;
  stroke: var(--paper);
  stroke-width: 5;
}

.package-route__box {
  fill: none;
  stroke: #f7d477;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.snapshot__route.is-active .package-route__pulse {
  animation: package-route-ripple 2s cubic-bezier(.2, 0, 0, 1) infinite;
}

.snapshot__route.is-active .package-route__pulse--delayed {
  animation-delay: 1s;
}

@keyframes package-route-ripple {
  0% { opacity: .4; transform: scale(.72); }
  100% { opacity: 0; transform: scale(2.25); }
}

.snapshot--intake > :not(.snapshot__route) {
  z-index: 1;
  position: relative;
}

.snapshot__media--intake {
  background: transparent;
}

.snapshot__media--dispatch-map {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 880 / 760;
  overflow: hidden;
  border: 0;
  border-radius: 15px;
  background: #f0f2f1;
}

.dispatch-map__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.dispatch-map__base {
  display: block;
}

.dispatch-map__motion {
  z-index: 1;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dispatch-map__motion svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dispatch-map__rider-card,
.dispatch-map__notification {
  z-index: 3;
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 5px 12px rgb(16 24 43 / 12%));
}

.dispatch-map__rider-card {
  top: 16px;
  right: 16px;
  width: min(39.8%, 350px);
}

.dispatch-map__notification {
  bottom: 18px;
  left: 16px;
  width: min(41.3%, 363px);
}

.snapshot__media--dispatch-map::after {
  z-index: 2;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 120% 110% at 50% 50%, transparent 74%, rgb(250 249 246 / 22%) 91%, var(--paper) 105%);
  content: "";
  pointer-events: none;
}

.roadmap {
  min-height: 770px;
  overflow: visible;
}

.roadmap__visual {
  top: 186px;
  right: max(32px, calc((100% - 1200px) / 2));
  width: 238px;
  height: 503px;
  overflow: visible;
  background: transparent;
}

.roadmap__phone-image {
  position: relative;
  top: auto;
  left: auto;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  transform: none;
  object-fit: contain;
}

.roadmap__badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.roadmap__badges .status-badge {
  position: absolute;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
}

.roadmap__badges .status-badge:first-child {
  top: 48px;
  left: -123px;
  background: #eadef7;
}

.roadmap__badges .status-badge:last-child {
  top: 202px;
  right: -92px;
  background: var(--accent-soft);
}

.roadmap__badges .status-badge__icon {
  width: 5px;
  height: 5px;
  animation: status-dot-pulse 1.8s ease-in-out infinite;
}

.follow {
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgb(113 119 131 / 17%) .65px, transparent .9px);
  background-position: top left;
  background-size: 8px 8px;
}

.follow__subscription {
  min-width: 0;
}

.follow-form {
  display: flex;
  max-width: none;
  flex-direction: column;
  gap: 8px;
}

.follow-form__label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.follow-form__control {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid #dcdddc;
  border-radius: 6px;
  background: var(--white);
  transition: border-color var(--motion-fast) var(--motion-curve), box-shadow var(--motion-fast) var(--motion-curve);
}

.follow-form__control:focus-within {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgb(195 65 6 / 12%);
}

.follow-form__control input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  flex: 1;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  outline: 0;
  background: transparent;
  font-size: 15px;
}

.follow-form__control input:focus {
  box-shadow: none;
}

.follow-form__submit {
  display: grid;
  width: 40px;
  min-width: 40px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease-out;
}

.follow-form__submit:active {
  transform: scale(.97);
}

.follow-form__submit:focus-visible {
  outline: 3px solid rgb(36 99 233 / 45%);
  outline-offset: 3px;
}

.follow-form__send-icon {
  display: block;
  width: 17px;
  height: 17px;
}

.follow__reassurance {
  justify-content: flex-end;
  gap: 16px;
  margin-top: 14px;
  color: var(--subtle);
  font-size: 12px;
}

.follow__reassurance a {
  position: relative;
  text-decoration: none;
}

.footer__wordmark {
  position: relative;
  display: block;
  width: max-content;
  min-width: 100%;
  height: 281px;
  overflow: visible;
  color: transparent;
  font-size: clamp(250px, 31vw, 446px);
  font-weight: 400;
  letter-spacing: -.085em;
  line-height: .78;
  white-space: nowrap;
  -webkit-text-stroke: 1px #1c2942;
}

.footer__i {
  position: relative;
}

.footer__i::before {
  position: absolute;
  top: .18em;
  left: calc(50% + .03em);
  width: .095em;
  height: .095em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--accent);
  content: "";
  -webkit-text-stroke: 0;
}

.footer__brand-band {
  height: 281px;
  overflow: hidden;
}

.footer__brand-inner {
  height: 281px;
  overflow: hidden;
}

.footer__bottom {
  z-index: 2;
  position: relative;
}

.footer__wordmark {
  z-index: 1;
  position: absolute;
  top: 78px;
  left: 0;
  width: max-content;
  min-width: 0;
  height: auto;
}

@media (max-width: 1200px) and (min-width: 701px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 28px;
  }

  .hero__title {
    font-size: clamp(44px, 5.2vw, 58px);
  }

  .roadmap {
    min-height: 710px;
  }

  .roadmap__visual {
    top: 183px;
    right: 28px;
    width: 190px;
    height: 402px;
  }

  .roadmap__badges .status-badge:first-child {
    left: -104px;
  }

  .roadmap__badges .status-badge:last-child {
    right: -8px;
  }
}

@media (max-width: 700px) {
  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-top: 34px;
    padding-bottom: 38px;
  }

  .hero__state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hero__focus-label--desktop {
    display: none;
  }

  .hero__focus-label--mobile {
    display: inline;
  }

  .hero__visual {
    width: 100%;
    margin-top: 10px;
  }

  .hero__window-context {
    display: block;
    margin: 0 0 10px;
    color: var(--subtle);
    font-size: 10px;
    line-height: 1.4;
  }

  .hero__picture {
    height: auto;
    max-height: 354px;
    aspect-ratio: 338 / 354;
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .hero__caption {
    display: block;
    padding-top: 8px;
    color: var(--subtle);
    font-size: 11px;
    line-height: 1.45;
  }

  .snapshot__media--overview {
    height: auto;
    aspect-ratio: 338 / 260;
  }

  .snapshot--overview .snapshot__image {
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .snapshot--intake {
    background-image: radial-gradient(circle, rgb(113 119 131 / 8%) .65px, transparent .9px);
  }

  .snapshot__route {
    overflow: hidden;
  }

  .snapshot__media--dispatch-map {
    width: 100%;
    aspect-ratio: 390 / 340;
    border-radius: 10px;
  }

  .snapshot__media--dispatch-map .dispatch-map__rider-card {
    top: 8px;
    right: 6px;
    width: min(42%, 160px);
  }

  .dispatch-map__notification {
    bottom: 8px;
    left: 6px;
    width: min(48%, 186px);
  }

  .roadmap {
    min-height: 0;
    padding-bottom: 64px;
  }

  .roadmap__visual {
    position: relative;
    top: auto;
    right: auto;
    width: min(297px, 84vw);
    height: auto;
    margin: 4px auto 0;
    aspect-ratio: 297 / 503;
  }

  .roadmap__phone-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .roadmap__badges .status-badge:first-child {
    top: 12%;
    left: -10%;
  }

  .roadmap__badges .status-badge:last-child {
    top: 52%;
    right: -6%;
  }

  .roadmap__badges .status-badge {
    padding: 5px 7px;
    font-size: 11px;
  }

  .follow {
    background-image: radial-gradient(circle, rgb(113 119 131 / 17%) .65px, transparent .9px);
  }

  .follow-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .follow-form__control {
    width: 100%;
  }

  .follow__reassurance {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
  }

  .footer__brand-inner {
    height: 230px;
    overflow: hidden;
  }

  .footer__wordmark {
    top: 72px;
    width: max-content;
    height: 150px;
    font-size: clamp(145px, 39vw, 178px);
  }

  .footer__i::before {
    width: .11em;
    height: .11em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snapshot__route.is-active .package-route__pulse,
  .roadmap__badges .status-badge__icon {
    animation: none;
  }
}

/* Desktop V2 hero: match the compact browser frame and clipped Hub workspace. */
.hero__visual {
  height: auto;
}

.hero__visual picture {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.hero__picture.hero-browser {
  position: relative;
  container-type: inline-size;
  height: auto;
  aspect-ratio: 503.731 / 375;
  overflow: hidden;
  border: 1px solid #d8dadd;
  border-radius: 8px;
  background: #202124;
  box-shadow: 0 1px 2px rgb(16 24 43 / 5%);
}

.hero-browser__bar {
  display: flex;
  width: 100%;
  height: 16.8px;
  height: 3.33cqw;
  min-height: 12px;
  max-height: 16.8px;
  align-items: center;
  gap: 1.1cqw;
  padding: 0 1.25cqw;
  overflow: hidden;
  background: #202124;
}

.hero-browser__left,
.hero-browser__right,
.hero-browser__address {
  display: flex;
  min-width: 0;
  height: 100%;
  align-items: center;
}

.hero-browser__left,
.hero-browser__right {
  flex: 0 0 auto;
  gap: .7cqw;
}

.hero-browser__window-controls {
  width: 8.5cqw;
  height: auto;
  flex: 0 0 auto;
}

.hero-browser__tabs {
  width: 10.7cqw;
  height: auto;
  flex: 0 0 auto;
}

.hero-browser__arrow {
  width: 2.3cqw;
  height: auto;
  flex: 0 0 auto;
}

.hero-browser__address {
  gap: .5cqw;
  width: 100%;
  max-width: 39cqw;
  padding: 0 1.25cqw;
  border: 1px solid #3b3d42;
  border-radius: 3px;
  background: #303238;
}

.hero-browser__domain {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #e5e6e8;
  font-family: var(--sans);
  font-size: 7px;
  font-size: 1.45cqw;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-browser__small-icon,
.hero-browser__site-icon,
.hero-browser__security {
  width: 2.2cqw;
  height: auto;
  flex: 0 0 auto;
}

.hero-browser__right {
  margin-left: auto;
}

.hero-browser__viewport {
  width: 100%;
  height: calc(100% - 16.8px);
  height: calc(100% - 3.33cqw);
  overflow: hidden;
  background: #fff;
}

.hero-browser__viewport picture {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-browser__viewport .hero__image {
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Keep each timeline connector centered on its marker. */
.milestone__state {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 52px;
}

.milestone:not(:last-child) .milestone__state::after {
  top: 26px;
  left: 9.5px;
  width: 1px;
  height: 52px;
}

.milestone--next .milestone__state::before {
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-color: #717783;
  background: #10182b;
}

.milestone--complete .milestone__state {
  display: grid;
  width: 20px;
  height: 52px;
  place-items: center;
  border-radius: 0;
  background: transparent;
}

.milestone--complete .milestone__check {
  display: block;
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  background: #168044;
  object-fit: contain;
}

.milestone--active .milestone__state {
  border-color: var(--accent-text);
}

.milestone--active .milestone__marker {
  width: 8px;
  height: 8px;
}

.milestone--active .milestone__pulse::before,
.milestone--active .milestone__pulse::after {
  display: block;
}

.milestone--active .milestone__status--active {
  flex-direction: row;
  gap: 5px;
  font-weight: 700;
}

.milestone__spinner {
  display: inline-block;
  margin: 0;
  animation: milestone-slash-spin 1s linear infinite;
}

/* One separator between shipped updates; the final row stays open. */
.update {
  border-bottom: 0;
}

.update + .update {
  border-top: 1px solid var(--border);
}

.update:last-child {
  border-top: 0;
}

/* Desktop V2 places both overlays beyond the map viewport for intentional bleed. */
.snapshot__media--dispatch-map {
  z-index: 2;
  height: auto;
  aspect-ratio: 880 / 760;
  overflow: visible;
  border-radius: 15px;
  background: transparent;
}

.dispatch-map__viewport {
  isolation: isolate;
  border-radius: inherit;
  background: #edf0ef;
}

.dispatch-map__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.dispatch-map__rider-status {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: max-content;
  max-width: min(280px, calc(100% - 16px));
  gap: 4px;
  padding: 9px 13px;
  border: 1px solid #d7dfeb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 12px rgb(16 24 43 / 15%);
  color: #10182b;
  font-family: var(--sans);
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: opacity 120ms ease-out;
  will-change: transform, opacity;
}

.dispatch-map__rider-status.is-positioned {
  opacity: 1;
}

.dispatch-map__rider-status-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.dispatch-map__rider-status-detail {
  color: #11843e;
  font-size: 12px;
  font-weight: 500;
}

.dispatch-map__mobile-label {
  display: none;
}

.dispatch-map__filters {
  z-index: 1;
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  max-width: calc(100% - 64px);
  gap: 6px;
  overflow: hidden;
}

.dispatch-map__filter {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid #dce2ec;
  border-radius: 8px;
  background: #fff;
  color: #354157;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.dispatch-map__filter--active {
  border-color: #10182b;
  background: #10182b;
  color: #fff;
}

.dispatch-map__controls {
  z-index: 1;
  position: absolute;
  top: 76px;
  left: 12px;
  display: grid;
  gap: 6px;
}

.dispatch-map__control-icon {
  display: block;
  width: 38px;
  height: 38px;
  border: 1px solid #dce2ec;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(16 24 43 / 8%);
}

.dispatch-map__rider-card {
  z-index: 4;
  top: 33.289%;
  right: -320px;
  display: flex;
  width: min(350px, calc(100vw - 40px));
  min-height: 548px;
  flex-direction: column;
  gap: 12px;
  padding: 19px;
  border: 1px solid #e0e5ee;
  border-radius: 13px;
  background: #fff;
  color: #10182b;
  filter: drop-shadow(0 7px 14px rgb(16 24 43 / 13%));
  font-family: var(--sans);
}

.dispatch-rider__heading,
.dispatch-rider__identity,
.dispatch-rider__vehicle,
.dispatch-rider__metrics,
.dispatch-rider__estimate,
.dispatch-rider__reliability,
.dispatch-rider__eta,
.dispatch-rider__eta > div,
.dispatch-rider__person,
.dispatch-rider__contact {
  display: flex;
  min-width: 0;
  align-items: center;
}

.dispatch-rider__heading,
.dispatch-rider__identity,
.dispatch-rider__metrics,
.dispatch-rider__estimate,
.dispatch-rider__reliability,
.dispatch-rider__eta > div {
  justify-content: space-between;
}

.dispatch-rider__heading {
  height: 17px;
  color: #6c7f9d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.dispatch-rider__close {
  width: 13px;
  height: 13px;
}

.dispatch-rider__identity {
  height: 78px;
  align-items: flex-start;
  gap: 8px;
}

.dispatch-rider__person {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.dispatch-rider__person strong {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.dispatch-rider__person > span:not(.dispatch-rider__availability) {
  color: #6c7f9d;
  font-size: 12px;
  line-height: 1.4;
}

.dispatch-rider__availability {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ddf5e7;
  color: #087d3d;
  font-size: 9px;
  font-weight: 600;
}

.dispatch-rider__avatar {
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.dispatch-rider__vehicle {
  min-height: 18px;
  gap: 8px;
  color: #354157;
  font-size: 12px;
}

.dispatch-rider__bike {
  width: 17px;
  height: 17px;
}

.dispatch-rider__contact {
  gap: 12px;
  margin-left: auto;
}

.dispatch-rider__action-icon,
.dispatch-rider__star,
.dispatch-rider__history,
.dispatch-rider__share-icon {
  display: block;
  width: 14px;
  height: 14px;
}

.dispatch-rider__divider {
  flex: 0 0 1px;
  height: 1px;
  background: #e1e6ef;
}

.dispatch-rider__metrics {
  min-height: 53px;
  gap: 8px;
}

.dispatch-rider__metrics > div,
.dispatch-rider__estimate > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.dispatch-rider__metrics strong {
  font-size: 24px;
  line-height: 1.1;
}

.dispatch-rider__metrics span:not(.dispatch-rider__rating) {
  color: #6c7f9d;
  font-size: 11px;
  line-height: 1.3;
}

.dispatch-rider__rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dispatch-rider__estimate {
  min-height: 77px;
  box-sizing: border-box;
  gap: 12px;
  padding: 14px;
  border-radius: 9px;
  background: #edf2ff;
}

.dispatch-rider__estimate strong {
  font-size: 22px;
  line-height: 1.27;
}

.dispatch-rider__estimate span {
  color: #6c7f9d;
  font-size: 11px;
}

.dispatch-rider__reliability > div {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #46566f;
  min-height: 18px;
  font-size: 12px;
}

.dispatch-rider__reliability {
  min-height: 44px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.dispatch-rider__reliability > div:first-child {
  justify-content: space-between;
}

.dispatch-rider__reliability strong {
  color: #10182b;
  font-size: 11px;
}

.dispatch-rider__eta {
  min-height: 123px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 14px;
  border-radius: 9px;
  background: #edf2ff;
}

.dispatch-rider__eta > div:first-child {
  color: #10182b;
  font-size: 12px;
}

.dispatch-rider__eta p {
  margin: 0;
  color: #6c7f9d;
  font-size: 11px;
  line-height: 1.35;
}

.dispatch-rider__share {
  display: flex;
  height: 44px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid #dee6f2;
  border-radius: 10px;
  background: #fff;
  color: #10182b;
  font-size: 15px;
  font-weight: 500;
}

.dispatch-map__notification-stack {
  z-index: 4;
  position: absolute;
  top: 85.658%;
  bottom: auto;
  left: -6.932%;
  width: min(323px, calc(100vw - 40px));
  aspect-ratio: 323 / 130;
  filter: drop-shadow(0 6px 13px rgb(16 24 43 / 13%));
}

.dispatch-notice {
  position: absolute;
  inset: auto;
  box-sizing: border-box;
  border: 1px solid #dee6f2;
  border-radius: 15px;
  background: #fff;
}

.dispatch-notice--back-small {
  top: 30.769%;
  left: 9.907%;
  width: 78.947%;
  height: 69.231%;
  opacity: .8;
}

.dispatch-notice--back-medium {
  top: 15.385%;
  left: 4.334%;
  width: 89.783%;
  height: 79.231%;
  opacity: .92;
}

.dispatch-notice--front {
  top: 0;
  left: 0;
  width: 100%;
  height: 86.923%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  box-shadow: 0 6px 20px rgb(16 24 43 / 11%);
}

.dispatch-notice__heading,
.dispatch-notice__share {
  display: flex;
  align-items: center;
}

.dispatch-notice__heading {
  justify-content: space-between;
  gap: 8px;
  color: #10182b;
  font-size: 14px;
}

.dispatch-notice__heading strong {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-notice__heading span {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #dcf8e8;
  color: #11843e;
  font-size: 12px;
  font-weight: 500;
}

.dispatch-notice__front p,
.dispatch-notice--front p {
  margin: 0;
  color: #46566f;
  font-size: 13px;
  line-height: 1.4;
}

.dispatch-notice__share {
  gap: 7px;
  color: #10182b;
  font-size: 13px;
  font-weight: 600;
}

.dispatch-notice__check {
  width: 14px;
  height: 14px;
}

.snapshot__media--dispatch-map::after {
  background: radial-gradient(ellipse 120% 110% at 50% 50%, transparent 74%, rgb(250 249 246 / 24%) 91%, var(--paper) 105%);
}

.snapshot--intake {
  background-image: radial-gradient(circle, rgb(113 119 131 / 9%) .6px, transparent .85px);
  background-size: 8px 8px;
}

.navvia-cursor__pointer {
  width: 16px;
  height: 20px;
}

.update__date {
  color: var(--subtle);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.follow-form__label {
  font-size: 14px;
  font-weight: 600;
}

/* Keep the roadmap device clipped to the section's lower rule as in V2. */
.roadmap {
  height: auto;
  min-height: 415px;
  padding: 80px 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.roadmap__visual {
  top: 33px;
  right: max(32px, calc((100% - 1200px) / 2));
  width: 238px;
  height: 503px;
  overflow: visible;
  background: transparent;
}

.roadmap__phone-image {
  position: absolute;
  top: 0;
  left: 50%;
  width: 125%;
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center top;
}

/* The supplied artwork carries the intentional cropped Navvia wordmark. */
.footer__brand-band {
  height: 281px;
  overflow: hidden;
}

.footer__brand-inner {
  position: relative;
  height: 281px;
  padding-top: 0;
  overflow: hidden;
}

.footer__bottom {
  position: absolute;
  top: 44px;
  right: 0;
  left: 0;
  padding: 0;
}

.footer__wordmark {
  position: absolute;
  top: 89px;
  left: 50%;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: translateX(-50%);
  isolation: isolate;
}

.footer__wordmark-art {
  display: block;
  width: 100%;
  height: auto;
}

.follow {
  position: relative;
  isolation: isolate;
  background-color: var(--paper);
  background-image: none;
}

.follow::before {
  z-index: 0;
  position: absolute;
  inset: 0;
  background-image: url("./assets/follow-grid-raw-2.png");
  background-position: top left;
  background-size: 490px 490px;
  content: "";
  opacity: .06;
  pointer-events: none;
}

.follow__inner {
  z-index: 1;
  position: relative;
}

.legal-header {
  height: 88px;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}

.legal-header__inner {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.legal-nav,
.legal-footer nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
  color: var(--body);
  font-size: 13px;
}

.legal-nav a,
.legal-footer a {
  transition: color 140ms ease;
}

.legal-nav a[aria-current="page"],
.legal-footer a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.legal-main {
  width: min(820px, calc(100% - 64px));
  padding-top: 76px;
  padding-bottom: 104px;
}

.legal-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(44px, 6vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.06em;
}

.legal-updated {
  margin: 18px 0 0;
  color: var(--subtle);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .015em;
}

.legal-intro {
  max-width: 690px;
  margin: 24px 0 0;
  color: var(--body);
  font-size: 18px;
  line-height: 1.65;
}

.legal-body {
  display: grid;
  gap: 30px;
  margin-top: 56px;
}

.legal-section h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.legal-section p {
  margin: 10px 0 0;
  color: var(--body);
  font-size: 16px;
  line-height: 1.75;
}

.legal-section p + p {
  margin-top: 12px;
}

.legal-section a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.legal-section a:hover,
.legal-section a:focus-visible {
  color: var(--accent-text);
  text-decoration-color: currentColor;
}

.legal-footer {
  border-top: 1px solid var(--border);
  color: var(--subtle);
  font-size: 12px;
}

.legal-footer__inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

@media (max-width: 700px) {
  .legal-header {
    height: 72px;
  }

  .legal-header__inner {
    gap: 14px;
  }

  .legal-nav,
  .legal-footer nav {
    gap: 14px;
    font-size: 12px;
  }

  .legal-main {
    width: calc(100% - 40px);
    padding-top: 50px;
    padding-bottom: 72px;
  }

  .legal-title {
    font-size: 44px;
  }

  .legal-intro {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.6;
  }

  .legal-body {
    gap: 25px;
    margin-top: 40px;
  }

  .legal-section h2 {
    font-size: 18px;
  }

  .legal-section p {
    font-size: 15px;
    line-height: 1.7;
  }

  .legal-footer__inner {
    min-height: 72px;
    flex-wrap: wrap;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

@media (max-width: 380px) {
  .legal-header__inner {
    gap: 8px;
  }

  .legal-nav {
    gap: 10px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .current-build .product-badge__separator {
    display: inline-block;
    transform-origin: center;
    animation: status-dot-pulse 1.8s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .current-build .product-badge__separator {
    animation: none;
  }
}

@media (max-width: 1200px) and (min-width: 701px) {
  .snapshot--dispatch .snapshot__media--dispatch-map {
    height: auto;
  }

  .snapshot__media--dispatch-map .dispatch-map__rider-card {
    right: calc(-56px - 30%);
    width: min(350px, calc(100vw - 40px));
  }

  .snapshot__media--dispatch-map .dispatch-map__notification-stack {
    left: max(-6.932%, -28px);
    width: min(323px, calc(100vw - 40px));
  }

  .snapshot__media--dispatch-map {
    margin-bottom: clamp(76px, calc(604px - 44vw), 210px);
  }

  .snapshot .product-badge {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .roadmap__visual {
    top: 33px;
    right: 28px;
    width: 190px;
    height: 402px;
  }

  .roadmap__badges .status-badge:first-child {
    left: -104px;
  }

  .roadmap__badges .status-badge:last-child {
    right: -8px;
  }
}

@media (max-width: 900px) and (min-width: 701px) {
  .snapshot {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: 32px;
  }

  .snapshot--intake {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  }

  .snapshot--intake .snapshot__route {
    transform: translateY(130px);
  }

  .snapshot--dispatch .snapshot__media--dispatch-map {
    z-index: 2;
    display: block;
    height: auto;
    aspect-ratio: 880 / 760;
    overflow: visible;
    border-radius: 15px;
    background: transparent;
    margin-bottom: clamp(247px, calc(584px - 37.5vw), 322px);
  }

  .snapshot__media--dispatch-map::after {
    display: block;
  }

  .dispatch-map__viewport {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    flex: none;
    overflow: hidden;
    border-radius: inherit;
  }

  .snapshot__media--dispatch-map .dispatch-map__rider-card {
    position: absolute;
    top: 33.289%;
    right: calc(-32px - 53.846%);
    width: min(350px, calc(100vw - 40px));
  }

  .snapshot__media--dispatch-map .dispatch-map__notification-stack {
    position: absolute;
    top: 85.658%;
    bottom: auto;
    left: max(-6.932%, -28px);
    width: min(323px, calc(100vw - 40px));
    margin: 0;
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hero__actions > a {
    width: max-content;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .hero__state {
    width: max-content;
    max-width: 100%;
    align-self: flex-start;
    margin-left: 0;
  }

  .hero__state > span.hero__focus {
    display: flex;
    align-items: baseline;
    gap: 6px;
    width: auto;
    font-size: 12px;
    line-height: 1.4;
  }

  .roadmap {
    height: auto;
    min-height: 0;
    padding: 64px 0 0;
    overflow: visible;
  }

  .roadmap__visual {
    top: auto;
    right: auto;
    width: min(297px, 84vw);
    height: auto;
    aspect-ratio: 297 / 391;
  }

  .roadmap__phone-image {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    transform: none;
    object-fit: contain;
  }

  .footer__brand-band,
  .footer__brand-inner {
    height: 230px;
  }

  .footer__brand-inner {
    padding-top: 0;
  }

  .footer__bottom {
    top: 36px;
  }

  .footer__wordmark {
    top: 112px;
    left: 50%;
    width: 100%;
    max-width: none;
    transform: translateX(-50%);
  }

  .follow::before {
    background-size: 490px 490px;
  }
}

@media (max-width: 1200px) and (min-width: 701px) {
  .snapshot__phone-stack {
    width: calc(100% - 44px);
    height: auto;
    aspect-ratio: 760 / 740;
  }

  .phone-frame {
    top: 50%;
    width: clamp(190px, 24vw, 280px);
    height: auto;
    aspect-ratio: 280 / 592;
    transform: translateY(-50%);
  }

  .phone-frame--left {
    left: 10px;
    transform: translateY(-50%) rotate(-10deg);
  }

  .phone-frame--right {
    right: 10px;
    transform: translateY(-50%) rotate(10deg);
  }

  .phone-frame--center {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 700px) {
  .hero__inner {
    grid-template-rows: none;
  }

  .hero__picture.hero-browser {
    height: auto;
    max-height: 354px;
    aspect-ratio: 338 / 354;
    border-color: var(--border);
    background: #fff;
  }

  .hero-browser__bar {
    display: none;
  }

  .hero-browser__viewport {
    height: 100%;
  }

  .hero-browser__viewport picture {
    height: 100%;
  }

  .hero-browser__viewport .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .snapshot--dispatch .snapshot__media--dispatch-map {
    display: flex;
    height: auto;
    aspect-ratio: auto;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }

  .dispatch-map__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 390 / 340;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 10px;
  }

  .dispatch-map__filters {
    top: 8px;
    left: 8px;
    max-width: calc(100% - 44px);
    gap: 4px;
  }

  .dispatch-map__filter {
    min-height: 25px;
    padding-inline: 7px;
    font-size: 9px;
  }

  .dispatch-map__controls {
    top: 46px;
    left: 8px;
    gap: 4px;
  }

  .dispatch-map__control-icon {
    width: 30px;
    height: 30px;
  }

  .snapshot__media--dispatch-map .dispatch-map__rider-card {
    position: relative;
    top: auto;
    right: auto;
    width: min(350px, 100%);
    max-width: 350px;
    flex: 0 0 auto;
    gap: 12px;
    align-self: flex-end;
    margin-top: -52px;
  }

  .dispatch-rider__person strong {
    font-size: 16px;
  }

  .dispatch-rider__avatar {
    width: 58px;
    height: 58px;
  }

  .snapshot__media--dispatch-map .dispatch-map__notification-stack {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(323px, calc(100% - 12px));
    max-width: 323px;
    aspect-ratio: 323 / 130;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-inline-start: -12px;
  }

  .snapshot__media--dispatch-map::after {
    display: block;
  }

  .snapshot--intake {
    background-image: radial-gradient(circle, rgb(113 119 131 / 9%) .6px, transparent .85px);
    background-size: 8px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .milestone__spinner {
    animation: none;
  }
}

/* Figma V2 showcase route and section-wide cursor. */
.inside .frame {
  position: relative;
  z-index: auto;
}

.inside .snapshot__media--overview,
.inside .snapshot__media--intake,
.inside .snapshot__media--dispatch-map,
.inside__heading,
.inside .snapshot__caption {
  position: relative;
  z-index: 2;
}

.package-route__art {
  position: absolute;
  display: block;
  max-width: none;
  overflow: visible;
  transform: none;
}

.package-route__art image {
  display: block;
}

.package-route__art--transition {
  visibility: hidden;
  pointer-events: none;
}

.package-route__marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 54px;
  aspect-ratio: 1;
  will-change: transform, opacity;
}

.package-route__icon {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.package-route__pulse {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 2px solid #0f1729;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.88);
}

.package-route__pulse--two {
  animation-delay: 1.05s;
}

.package-route-layer.is-active .package-route__pulse {
  animation: package-figma-pulse 2.1s cubic-bezier(.2, 0, 0, 1) infinite;
}

@keyframes package-figma-pulse {
  0% { opacity: .28; transform: scale(.92); }
  100% { opacity: 0; transform: scale(2.35); }
}

.package-route__status {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(.96);
  transition: opacity 220ms ease-out;
  will-change: transform, opacity;
}

.package-route__status.is-visible {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.package-route__status-label {
  display: block;
  padding: 7px 10px;
  border: 1px solid rgb(15 23 41 / 9%);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 16px rgb(16 24 43 / 13%);
  color: #10182b;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.navvia-cursor {
  z-index: 20;
}

.package-route__status,
.package-route__marker {
  contain: layout style;
}

/* The full path needs the wide 1200px content frame to stay clear of copy and cards. */
@media (max-width: 1199px) {
  .package-route-layer {
    display: block !important;
  }

  .package-route__motion-path--mobile,
  .package-route__motion-path--mobile-return {
    stroke: #c8cdd0;
    stroke-width: 2.5px;
    stroke-dasharray: 4 7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .inside > .package-route__status {
    display: none !important;
  }
}

.snapshot--intake {
  background-color: transparent;
  background-image: radial-gradient(circle, rgb(113 119 131 / 9%) .6px, transparent .85px);
  background-size: 8px 8px;
}

.dispatch-map__control {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #dce2ec;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(16 24 43 / 8%);
  color: #10182b;
}

.dispatch-map__control-icon {
  display: block;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  stroke-width: 1.8;
}

.dispatch-map__feature-icon {
  color: #fff;
}

.milestone__check {
  color: #fff;
}

.dispatch-rider__close,
.dispatch-rider__bike,
.dispatch-rider__action-icon,
.dispatch-rider__history,
.dispatch-rider__share-icon,
.dispatch-notice__check,
.follow__submit-icon,
.hero__link-icon {
  display: block;
  flex: 0 0 auto;
}

.dispatch-rider__star {
  color: #e68700;
  fill: currentColor;
  stroke: none;
  width: 17px;
  height: 17px;
}

.dispatch-rider__share-icon {
  width: 18px;
  height: 18px;
}

.dispatch-notice__check {
  color: #168044;
}

@media (hover: hover) and (pointer: fine) {
  .inside.has-navvia-cursor,
  .inside.has-navvia-cursor * {
    cursor: none !important;
  }
}

@media (max-width: 700px) {
  .navvia-cursor {
    display: none;
  }

  .package-route__marker {
    width: 48px;
    height: 48px;
  }

  .package-route__status-label {
    padding: 6px 8px;
    font-size: 11px;
  }

  .dispatch-map__control {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .dispatch-map__control-icon {
    width: 14px;
    height: 14px;
  }

  .dispatch-map__viewport {
    aspect-ratio: 390 / 450;
  }

  .dispatch-map__filters,
  .dispatch-map__controls,
  .dispatch-map__place-labels,
  .dispatch-map__nearby-drivers,
  .dispatch-map__rider-status,
  .dispatch-map__label-card,
  .dispatch-map__label-copy {
    display: none;
  }

  .dispatch-map__mobile-label {
    display: inline;
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .package-route-layer.is-active .package-route__pulse {
    animation: none;
  }

  .package-route__status {
    transition: none;
  }
}

/* Mobile navigation and dispatch-map refinements. */
@media (max-width: 700px) {
  .site-header {
    position: sticky;
    top: 0;
    transform: translateY(0);
    transition: transform 210ms cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
  }

  .site-header.is-hidden {
    transform: translateY(calc(-100% - 1px));
  }

  .menu-button__icon {
    transition: transform 190ms cubic-bezier(.16, 1, .3, 1);
  }

  .menu-button.is-open .menu-button__icon {
    transform: rotate(90deg);
  }

  .mobile-menu:not([hidden]) {
    max-height: 0;
    overflow: hidden;
    padding-block: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    border-bottom-color: transparent;
    box-shadow: none;
    transition: max-height 280ms cubic-bezier(.16, 1, .3, 1), padding 220ms cubic-bezier(.16, 1, .3, 1), opacity 220ms cubic-bezier(.16, 1, .3, 1), transform 220ms cubic-bezier(.16, 1, .3, 1), border-color 220ms ease-out, box-shadow 220ms ease-out;
  }

  .mobile-menu:not([hidden]).is-open {
    max-height: 280px;
    padding: 12px 20px 18px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    border-bottom-color: var(--border);
    box-shadow: 0 12px 20px rgba(16, 24, 43, .06);
  }

  .snapshot__media--dispatch-map .dispatch-map__rider-card,
  .snapshot__media--dispatch-map .dispatch-map__notification-stack {
    display: none;
  }

}

.dispatch-map__driver-radius {
  fill: #75818a;
  fill-opacity: .075;
  stroke: #7d8991;
  stroke-opacity: .32;
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  vector-effect: non-scaling-stroke;
}

.dispatch-map__route-underlay,
.dispatch-map__route-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dispatch-map__route-underlay {
  stroke: #f7f7f3;
  stroke-width: 8;
  opacity: .94;
}

.dispatch-map__route-line {
  stroke: #f45108;
  stroke-width: 3;
  stroke-dasharray: 1 8;
}

.dispatch-map__attribution {
  z-index: 3;
  position: absolute;
  right: 7px;
  bottom: 6px;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgb(255 255 255 / 78%);
  color: #536474;
  font-size: 9px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.dispatch-map__attribution:hover,
.dispatch-map__attribution:focus-visible {
  background: #fff;
  color: #10182b;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .mobile-menu:not([hidden]),
  .menu-button__icon {
    transition: none;
  }
}

/* Match the final shipped row and product list separators to the Figma layout. */
.updates {
  min-height: 0;
  padding-block: 80px;
}

#main {
  overflow-x: clip;
  overflow-y: visible;
}

.updates > .frame {
  position: relative;
  z-index: 2;
}

.package-route-layer {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.inside {
  position: relative;
  z-index: auto;
  isolation: auto;
  overflow: visible;
}

.package-route-cover {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--paper);
  pointer-events: none;
}

.update:last-child {
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.update {
  padding-block: 22px;
  border-bottom: 0;
}

.update:first-child {
  border-top: 0;
}

.update + .update {
  border-top: 1px solid var(--border);
}

.product-summary:first-child {
  border-top: 0;
}

.dispatch-rider__eta > .dispatch-rider__share {
  justify-content: center;
}

@media (min-width: 701px) {
  .roadmap__phone-image {
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    transform: none;
    object-fit: contain;
    object-position: center top;
  }
}

/* Final Desktop V2 details and deliberate mobile adaptation. */
.brand__mark--desktop {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: #0f1729;
  color: #dee6f2;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.brand__mark--mobile {
  display: none;
}

.brand__mark--footer {
  display: block;
}

.brand__word {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.04em;
}

.brand__symbol {
  display: block;
  width: 28px;
  height: auto;
  flex: 0 0 28px;
}

.brand__wordmark {
  display: block;
  width: 104px;
  height: auto;
  flex: 0 0 104px;
}

.footer__brand {
  gap: 8px;
}

.footer__brand .brand__symbol {
  width: 31px;
  flex-basis: 31px;
}

.footer__brand .brand__wordmark {
  width: 116px;
  flex-basis: 116px;
}

.hero__focus {
  display: none !important;
}

.build {
  position: relative;
  isolation: isolate;
  min-height: 499px;
  margin-top: 80px;
  padding: 80px 0;
  border-top: 1px solid var(--border);
  background: #10182b;
  color: #eaf0ff;
}

.build::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("./assets/follow-grid-raw-2.png");
  background-position: top left;
  background-size: 490px 490px;
  content: "";
  opacity: .16;
  pointer-events: none;
}

.build > .frame {
  position: relative;
  z-index: 1;
}

.build .section-title,
.build .milestones__title {
  color: #eaf0ff;
}

.build .section-heading__note {
  display: none;
}

.current-build .product-badge {
  color: #eaf0ff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
}

.current-build .product-badge > span:first-child {
  color: #eaf0ff;
  font-size: 12px;
  font-weight: 700;
}

.current-build .product-badge__separator {
  color: #717783;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}

.current-build .product-badge__state {
  color: #f45108;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
}

.current-build__focus {
  color: #eaf0ff;
  font-weight: 600;
}

.build-count__number {
  color: #eaf0ff;
}

.build-count__number > span:first-child {
  font-weight: 700;
}

.build-count__total {
  color: #eaf0ff;
}

.build-count__note,
.milestone__title,
.milestone__status {
  color: #faf9f6;
}

.milestone__title {
  font-size: 14px;
  font-weight: 400;
}

.milestone--active .milestone__title {
  color: #eaf0ff;
  font-weight: 600;
}

.milestone--active .milestone__status {
  color: #f45108;
}

.roadmap-card__period {
  color: var(--subtle);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
}

.roadmap-card--now .roadmap-card__period {
  color: var(--accent);
}

.update__figure--mobile-only {
  display: none;
}

.dispatch-rider__heading {
  font-size: 12px;
  line-height: 1.4;
}

.dispatch-rider__availability {
  font-size: 12px;
  line-height: 1.4;
}

.dispatch-rider__metrics span:not(.dispatch-rider__rating),
.dispatch-rider__estimate span,
.dispatch-rider__eta p {
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .brand__mark--desktop {
    display: none;
  }

  .brand__mark--mobile {
    display: block;
    width: 28px;
    height: 28px;
  }

  .brand__symbol {
    width: 26px;
    flex-basis: 26px;
  }

  .brand__wordmark {
    width: 90px;
    flex-basis: 90px;
  }

  .footer__brand .brand__symbol {
    width: 30px;
    flex-basis: 30px;
  }

  .footer__brand .brand__wordmark {
    width: 112px;
    flex-basis: 112px;
  }

  .build {
    min-height: 0;
    margin-top: 48px;
    padding: 48px 0;
  }

  .roadmap-card__period {
    font-family: var(--sans);
    font-weight: 700;
  }

  .update__figure--mobile-only {
    display: flex;
    width: 100%;
    padding-top: 10px;
  }

  .update__image-frame {
    width: 100%;
    height: 140px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
  }

  .update__figure--mobile-only .update__image {
    width: 100%;
    max-width: none;
    height: auto;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: top center;
    transform: translateY(-45.17%);
  }
}

/* Match the V2 desktop hero's fixed art direction and exact vertical rhythm. */
.hero__title-tail {
  display: block;
}

.build .section-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.045em;
}

@media (min-width: 1200px) {
  .hero {
    position: relative;
    z-index: 2;
    height: 620px;
    min-height: 0;
    overflow: visible;
  }

  .hero__inner {
    position: relative;
    display: block;
    height: 620px;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .hero__state {
    position: absolute;
    top: 64px;
    left: 0;
    display: flex;
    height: 25px;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .hero__intro {
    position: absolute;
    top: 129px;
    left: 0;
    display: flex;
    width: min(700px, calc(100% - 543.731px));
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
  }

  .hero__title {
    max-width: 700px;
    font-size: 76px;
    line-height: 1.05;
    letter-spacing: -.07em;
  }

  .hero__copy {
    width: min(478px, 100%);
    max-width: none;
    gap: 16px;
    padding-top: 8px;
  }

  .hero__description {
    max-width: none;
    margin: 0;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.55;
  }

  .hero__follow {
    max-width: none;
    margin: 0;
    color: var(--body);
    font-size: 16px;
    line-height: 1.55;
  }

  .hero__actions {
    position: absolute;
    top: 448px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
  }

  .hero__actions .button--dark {
    gap: 16px;
  }

  .hero__visual {
    position: absolute;
    top: 245px;
    right: 0;
    z-index: 3;
    width: min(503.731px, calc(100% - 543.731px));
    min-width: 0;
    margin: 0;
  }
}

@media (min-width: 701px) and (max-width: 1199px) {
  .hero {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .hero__inner {
    display: flex;
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 48px 0;
  }

  .hero__state,
  .hero__intro,
  .hero__actions {
    position: static;
    grid-column: auto;
    grid-row: auto;
  }

  .hero__state {
    align-self: flex-start;
  }

  .hero__intro {
    display: flex;
    width: min(700px, 100%);
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hero__title {
    font-size: clamp(52px, 6.2vw, 72px);
  }

  .hero__copy {
    width: min(478px, 100%);
    padding-top: 8px;
  }

  .hero__actions {
    align-self: flex-start;
    margin: 0;
  }

  .hero__visual {
    position: relative;
    top: auto;
    right: auto;
    align-self: flex-end;
    width: min(503.731px, 100%);
    margin: 0;
  }

  .build {
    margin-top: 56px;
  }
}

@media (max-width: 700px) {
  .build .section-title {
    font-size: 28px;
    line-height: 1.18;
  }

  .build {
    margin-top: 0;
  }

  .hero__title {
    font-size: 44px;
    line-height: 1.05;
  }

  .hero__intro {
    gap: 20px;
  }

  .hero__copy {
    padding-top: 0;
  }

  .hero__actions .button--dark {
    gap: 16px;
  }
}

/* Desktop V2 fidelity corrections, retaining the established mobile composition. */
.build {
  min-height: 499px;
  padding: 80px 0 75px;
}

.build__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 40px;
}

.build__primary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.build .section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.build__primary > .current-build {
  width: min(510px, 100%);
}

.build-count__gap {
  font-size: 56px;
  font-weight: 500;
}

.build-count__total {
  font-weight: 300;
}

.milestones {
  gap: 12px;
}

.update {
  position: relative;
}

.update:last-child {
  border-bottom: 0;
}

@media (min-width: 701px) {
  .update {
    padding: 26px 0;
    border: 0;
  }

  .update + .update {
    border: 0;
  }

  .update + .update::before {
    position: absolute;
    inset: 0 0 auto;
    border-top: 1px solid var(--border);
    content: "";
  }

  .update__details {
    gap: 9px;
  }

  .update__details .product-badge {
    font-size: 11px;
    line-height: 15px;
  }

  .update__details .product-badge__date {
    color: var(--subtle);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
  }

  .update__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 31px;
  }

  .update__description {
    font-size: 15px;
    line-height: 23px;
  }

  .updates {
    padding-bottom: 79px;
  }
}

@media (min-width: 1200px) {
  .inside {
    min-height: 0;
    padding-bottom: 81px;
  }

  .inside__heading {
    max-width: none;
  }

  .inside__heading .section-intro {
    max-width: none;
  }

  .snapshot-grid {
    gap: 64px;
  }

  .snapshot--overview {
    padding-bottom: 150px;
  }

  .snapshot__media--overview {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .snapshot__view-hint,
  .snapshot--intake .snapshot__view-hint {
    display: none;
  }

  .snapshot__date--intake,
  .snapshot__date--dispatch {
    display: none;
  }

  .snapshot__caption .product-badge {
    gap: 8px;
    font-size: 11px;
    line-height: 15px;
  }

  .snapshot__caption .product-badge > span,
  .snapshot__caption .product-badge__date {
    white-space: nowrap;
  }

  .snapshot__media--intake {
    height: 740px;
    box-sizing: border-box;
    gap: 0;
    padding: 32px;
  }

  .snapshot__phone-stack {
    width: 760px;
    height: 676px;
    flex: 0 0 676px;
  }

  .phone-frame {
    top: 34px;
  }

  .phone-frame--left {
    left: 65px;
  }

  .phone-frame--right {
    right: auto;
    left: 415px;
  }

  .phone-frame--center {
    left: 240px;
  }

  .phone-frame {
    width: 280px;
    height: 591.5px;
    padding: 0;
    border-width: .875px;
    border-radius: 38.5px;
  }

  .phone-frame__screen-window {
    position: absolute;
    top: 7.88px;
    left: 7px;
    width: 264.25px;
    height: 574px;
    border-radius: 30.625px;
  }

  .phone-frame__dynamic-island {
    top: 5.25px;
    width: 75.25px;
    height: 16.625px;
  }

  .phone-frame__camera {
    left: calc(50% + 23.625px);
    width: 6.125px;
    height: 6.125px;
  }

  .phone-frame__home {
    bottom: 3px;
    width: 87.5px;
    height: 3.5px;
  }
}

.product-summary {
  position: relative;
  padding-block: 26px;
  border-top: 0;
}

.product-summary + .product-summary::before {
  position: absolute;
  inset: 0 0 auto;
  border-top: 1px solid var(--border);
  content: "";
}

.product-summary__name {
  font-weight: 700;
}

.product-summary__details {
  gap: 8px;
  font-size: 15px;
  line-height: 1.55;
}

.product-summary__description {
  color: var(--ink);
}

.roadmap {
  overflow: visible;
}

.roadmap-card__items {
  font-weight: 500;
}

.roadmap-card__period {
  line-height: 1.4;
}

@media (min-width: 1200px) {
  .roadmap {
    height: 415px;
    min-height: 415px;
  }

  .roadmap .section-title,
  .inside .section-title {
    line-height: 1.18;
  }

  .roadmap__visual {
    top: 32px;
  }
}

@media (min-width: 701px) and (max-width: 1199px) {
  .roadmap {
    height: auto;
    min-height: 415px;
  }
}

.follow__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.follow__content {
  max-width: 540px;
}

.follow__subscription {
  width: min(420px, 100%);
}

.follow-form {
  width: min(360px, 100%);
  max-width: 100%;
}

.follow__reassurance {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.footer__identity {
  gap: 12px;
}

.footer__brand .brand__word {
  line-height: 1.2;
}

.footer__summary {
  max-width: 460px;
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

.footer__domain {
  line-height: 18px;
}

@media (max-width: 700px) {
  .build {
    min-height: 0;
    padding: 48px 0;
  }

  .build__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .build__primary {
    gap: 24px;
  }

  .build .section-heading {
    gap: 12px;
    margin: 0;
  }

  .snapshot__view-hint {
    display: block;
  }

  .snapshot__date--intake,
  .snapshot__date--dispatch {
    display: block;
  }

  .snapshot--intake .snapshot__view-hint {
    display: block;
  }

  .product-badge__date-separator,
  .product-badge__date {
    display: none;
  }

  .follow__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .follow__subscription {
    width: 100%;
  }

  .follow-form {
    width: min(420px, 100%);
  }

  .footer__summary {
    max-width: 100%;
    white-space: normal;
  }
}

/* Roadmap phone: reproduce the clipped screen and device frame from Desktop V2. */
.roadmap__visual {
  width: 238px;
  height: 503px;
  overflow: visible;
  background: transparent;
}

.roadmap-device {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: .744px solid #525252;
  border-radius: 32.725px;
  background: #151515;
  box-shadow: 0 5.95px 7.438px rgb(0 0 0 / 8%), 0 17.85px 17.85px rgb(0 0 0 / 15%);
}

.roadmap-device__screen {
  position: absolute;
  top: 1.33%;
  left: 2.5%;
  width: 94.38%;
  height: 97.04%;
  overflow: hidden;
  border-radius: 26.031px;
  background: #f1f5ff;
}

.roadmap__visual .roadmap__phone-image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transform: none;
  object-fit: cover;
  object-position: top;
}

.roadmap-device__dynamic-island {
  position: absolute;
  top: 2.22%;
  left: 36.25%;
  width: 26.88%;
  height: 2.81%;
  border-radius: 999px;
  background: #080808;
}

.roadmap-device__camera {
  position: absolute;
  top: 3.1%;
  left: 58.13%;
  width: 2.19%;
  height: auto;
}

.roadmap-device__home {
  position: absolute;
  top: 97.19%;
  left: 34.06%;
  width: 31.25%;
  height: .59%;
  border-radius: 999px;
  background: #151515;
}

.roadmap-device__volume,
.roadmap-device__side-button {
  position: absolute;
  width: .94%;
  border-radius: 1px;
  background: #393939;
}

.roadmap-device__volume {
  left: -1.25%;
  height: 4.74%;
}

.roadmap-device__volume--up {
  top: 17%;
}

.roadmap-device__volume--down {
  top: 23.23%;
}

.roadmap-device__side-button {
  top: 20%;
  right: -.94%;
  height: 7.1%;
}

@media (max-width: 700px) {
  .roadmap__visual {
    position: relative;
    top: auto;
    right: auto;
    width: min(238px, 75vw);
    height: auto;
    aspect-ratio: 238 / 503;
    align-self: center;
    margin: 32px auto 0;
  }
}

/* Mobile hero follows the original phone-first composition with Desktop V2 content. */
@media (max-width: 700px) {
  .hero__inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 34px;
    padding-bottom: 40px;
  }

  .hero__intro {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .hero__copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    padding-top: 0;
  }

  .hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .hero__actions .button--dark {
    width: 100%;
  }

  .hero__actions .button--text {
    align-self: flex-start;
    gap: 8px;
    line-height: 17px;
  }

  .hero__visual {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    margin: 0;
  }

  .hero__window-context {
    display: flex;
    height: 15px;
    align-items: center;
    margin: 0;
    font-size: 11px;
    line-height: 15px;
  }

  .hero__picture.hero-browser {
    height: 365px;
    max-height: none;
    aspect-ratio: auto;
  }

  .hero__caption {
    font-size: 11px;
    line-height: 14px;
  }
}

/* Let the blue build section crop the desktop Hub preview at the section edge. */
@media (min-width: 1200px) {
  .build {
    z-index: 3;
  }
}

/* Keep the compact Figma field and label; use a blue paper-plane send action. */
.follow-form__control:focus-within {
  border-color: #2463e9;
  box-shadow: 0 0 0 3px rgb(36 99 233 / 14%);
}

.follow-form__submit {
  background: transparent;
  color: #2463e9;
  transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease-out;
}

.follow-form__submit:hover {
  background: #edf2ff;
}

/* Code-built Hub feature cards replace full-screen app captures. */
.hero-browser__viewport {
  background: #f3f6fc;
}

.dashboard-bento {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  gap: 12px;
  padding: 14px;
  background: #f3f6fc;
}

.dashboard-bento--hero {
  grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr));
}

.dashboard-bento--overview {
  grid-template: minmax(0, 1.04fr) minmax(0, .86fr) / minmax(0, 1.28fr) minmax(0, 1fr);
}

.hub-feature-card {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #e5e9f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 5px rgb(16 24 43 / 4%);
  color: #10182b;
}

.hub-feature-card__title {
  margin: 0 0 10px;
  color: #283249;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.dashboard-bento__tile--summary {
  grid-area: 1 / 1 / 2 / 2;
}

.dashboard-bento__tile--ready {
  grid-area: 1 / 2 / 2 / 3;
}

.dashboard-bento__tile--activity {
  grid-area: 2 / 1 / 3 / 2;
}

.dashboard-bento__tile--revenue:not(.dashboard-bento__tile--compact) {
  grid-area: 2 / 2 / 3 / 3;
}

.dashboard-summary {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.dashboard-summary__label,
.dashboard-summary__stats .dashboard-metric span,
.dashboard-activity__topline span,
.dashboard-revenue__caption {
  color: #71809b;
  font-size: 10px;
  line-height: 1.35;
}

.dashboard-summary__value {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.dashboard-summary__value strong {
  font-size: clamp(22px, 2.5vw, 31px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.dashboard-summary__change {
  padding: 3px 5px;
  border-radius: 99px;
  background: #d7f4e5;
  color: #16834c;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
}

.dashboard-summary__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #edf0f5;
}

.dashboard-metric {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.dashboard-metric strong {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dashboard-ready,
.dashboard-activity,
.dashboard-revenue {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.dashboard-ready {
  justify-content: space-between;
}

.dashboard-ready__count {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.dashboard-ready__count strong {
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.dashboard-ready__count span {
  color: #46546b;
  font-size: 12px;
}

.dashboard-ready__action {
  display: flex;
  min-height: 31px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border-radius: 6px;
  background: #111a2e;
  color: #fff;
  font-size: 10px;
  font-weight: 550;
}

.dashboard-ready__arrow,
.intake-scan__arrow,
.intake-manual__arrow,
.intake-activity__arrow {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.dashboard-activity__topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.dashboard-activity__topline strong {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.hub-activity-bars {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 7px;
  overflow: visible;
}

.dashboard-activity__legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  color: #687790;
  font-size: 10px;
}

.dashboard-activity__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dashboard-activity__legend strong {
  color: #26344a;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.dashboard-activity__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2463e9;
}

.dashboard-revenue__value {
  overflow: hidden;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dashboard-revenue__caption {
  margin-top: 2px;
}

.hub-revenue-chart {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: auto;
  overflow: visible;
}

.snapshot__media--overview {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: transparent;
}

.dashboard-bento--overview .dashboard-bento__tile--package-overview {
  grid-area: 1 / 1 / 3 / 2;
}

.dashboard-bento--overview .dashboard-bento__tile--shipments {
  grid-area: 1 / 2 / 2 / 3;
}

.dashboard-bento--overview .dashboard-bento__tile--revenue {
  grid-area: 2 / 2 / 3 / 3;
}

.hub-package-table-wrap,
.hub-package-table {
  width: 100%;
  min-width: 0;
}

.hub-package-table {
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}

.hub-package-table th {
  padding: 7px 5px;
  border-bottom: 1px solid #e9edf3;
  color: #78859b;
  font-size: 10px;
  font-weight: 500;
}

.hub-package-table td {
  padding: 10px 5px;
  border-bottom: 1px solid #eef1f5;
  color: #4c5a70;
  font-size: 11px;
  line-height: 1.35;
  vertical-align: middle;
}

.hub-package-table tbody tr:last-child td {
  border-bottom: 0;
}

.hub-package-table td:first-child {
  width: 34%;
}

.hub-package-table td:nth-child(2) {
  width: 36%;
}

.hub-package-table td:nth-child(3) {
  width: 30%;
}

.hub-package-table td:first-child strong,
.hub-package-table td:first-child span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-package-table td:first-child strong {
  color: #27334a;
  font-size: 10px;
  font-weight: 600;
}

.hub-package-table td:first-child span {
  margin-top: 2px;
  color: #8290a7;
  font-size: 8px;
}

.hub-package-status {
  display: inline-block;
  max-width: 100%;
  padding: 3px 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #e8f5ee;
  color: #248452;
  font-size: 9px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-package-status--customs,
.hub-package-status--in-transit {
  background: #e9efff;
  color: #365fbc;
}

.hub-shipments {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.hub-shipment {
  display: grid;
  min-width: 0;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
}

.hub-shipment + .hub-shipment {
  border-top: 1px solid #eef1f5;
}

.hub-shipment__mode {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: #edf2ff;
  color: #365fbc;
  font-size: 9px;
  font-weight: 700;
}

.hub-shipment__details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.hub-shipment__details strong {
  overflow: hidden;
  color: #28354b;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-shipment__details span,
.hub-shipment__state {
  color: #7b879b;
  font-size: 9px;
  line-height: 1.3;
}

.hub-shipment__state--delayed {
  color: #ba6034;
}

.dashboard-bento__tile--compact .hub-feature-card__title {
  margin-bottom: 5px;
}

.dashboard-bento__tile--compact .dashboard-revenue__value {
  font-size: 15px;
}

.dashboard-bento__tile--compact .hub-revenue-chart {
  height: 40px;
}

.snapshot__media--intake {
  min-height: 0;
}

.intake-feature-grid {
  display: grid;
  width: min(100%, 760px);
  height: min(100%, 520px);
  min-height: 0;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  grid-template-rows: minmax(190px, .96fr) minmax(205px, 1.04fr);
  gap: 14px;
  align-content: center;
  margin: auto;
}

.intake-feature-card {
  padding: 16px;
}

.intake-feature-card--scan {
  grid-area: 1 / 1 / 2 / 2;
  border-color: #2459df;
  background: #2459df;
  color: #fff;
}

.intake-feature-card--scan .hub-feature-card__title {
  color: #fff;
  font-size: 15px;
}

.intake-scan {
  display: flex;
  min-height: 0;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.intake-scan__copy p {
  margin: 0 0 8px;
  color: #e5ecff;
  font-size: 11px;
}

.intake-scan__copy > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
}

.intake-scan__illustration {
  display: block;
  width: 88px;
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 7px 12px rgb(10 25 75 / 22%));
}

.intake-feature-card--manual {
  grid-area: 1 / 2 / 2 / 3;
  justify-content: space-between;
}

.intake-manual {
  display: grid;
  min-height: 56px;
  grid-template-columns: 36px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #e7ebf3;
  border-radius: 8px;
  background: #fbfcff;
}

.intake-manual__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: #fff2df;
  color: #a7651d;
}

.intake-manual__package {
  width: 18px;
  height: 18px;
}

.intake-manual > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.intake-manual > div strong {
  color: #2e3b52;
  font-size: 10px;
  font-weight: 600;
}

.intake-manual > div span {
  color: #7c889c;
  font-size: 9px;
  line-height: 1.35;
}

.intake-manual__arrow {
  color: #2463e9;
}

.intake-feature-card--recent {
  grid-area: 2 / 1 / 3 / 3;
}

.intake-activity {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.intake-activity__row {
  display: grid;
  min-width: 0;
  grid-template-columns: 29px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.intake-activity__row + .intake-activity__row {
  border-top: 1px solid #edf0f5;
}

.intake-activity__avatar {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #edf2ff;
  color: #365fbc;
  font-size: 9px;
  font-weight: 700;
}

.intake-activity__details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.intake-activity__heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.intake-activity__heading strong {
  overflow: hidden;
  color: #2b3850;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.intake-activity__heading span {
  padding: 2px 5px;
  border-radius: 99px;
  background: #e2f5eb;
  color: #288655;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
}

.intake-activity__details > span {
  overflow: hidden;
  color: #7c899f;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intake-activity__arrow {
  color: #8290a7;
}

.update__figure {
  width: 170px;
  padding-top: 5px;
}

.update__image {
  width: 170px;
  height: 104px;
  object-position: top center;
}

@media (max-width: 700px) {
  .hero-browser__viewport {
    height: 100%;
  }

  .dashboard-bento--hero {
    grid-template: minmax(0, 1.08fr) minmax(0, .88fr) minmax(0, .88fr) / repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 8px;
  }

  .dashboard-bento--hero .dashboard-bento__tile--summary {
    grid-area: 1 / 1 / 2 / 3;
  }

  .dashboard-bento--hero .dashboard-bento__tile--ready {
    grid-area: 2 / 1 / 3 / 2;
  }

  .dashboard-bento--hero .dashboard-bento__tile--activity {
    grid-area: 2 / 2 / 3 / 3;
  }

  .dashboard-bento--hero .dashboard-bento__tile--revenue {
    grid-area: 3 / 1 / 4 / 3;
  }

  .hub-feature-card {
    padding: 10px;
    border-radius: 8px;
  }

  .hub-feature-card__title {
    margin-bottom: 5px;
    font-size: 10px;
  }

  .dashboard-summary__value strong {
    font-size: 25px;
  }

  .dashboard-summary__stats {
    gap: 5px;
    padding-top: 7px;
  }

  .dashboard-summary__stats .dashboard-metric strong {
    font-size: 15px;
  }

  .dashboard-summary__stats .dashboard-metric span,
  .dashboard-summary__label {
    font-size: 9px;
  }

  .dashboard-ready__count strong {
    font-size: 25px;
  }

  .dashboard-ready__count span,
  .dashboard-ready__action,
  .dashboard-activity__legend {
    font-size: 9px;
  }

  .dashboard-activity__topline strong {
    font-size: 21px;
  }

  .hub-activity-bars {
    height: 32px;
    margin-top: 2px;
  }

  .dashboard-revenue__value {
    font-size: 16px;
  }

  .dashboard-revenue__caption {
    font-size: 9px;
  }

  .hub-revenue-chart {
    height: 38px;
  }

  .snapshot__media--overview {
    height: auto;
    aspect-ratio: 338 / 260;
  }

  .dashboard-bento--overview {
    grid-template: minmax(0, 1.1fr) minmax(0, .9fr) / repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 7px;
  }

  .dashboard-bento--overview .dashboard-bento__tile--package-overview {
    grid-area: 1 / 1 / 2 / 3;
  }

  .dashboard-bento--overview .dashboard-bento__tile--shipments {
    grid-area: 2 / 1 / 3 / 2;
  }

  .dashboard-bento--overview .dashboard-bento__tile--revenue {
    grid-area: 2 / 2 / 3 / 3;
  }

  .dashboard-bento--overview .hub-feature-card {
    padding: 8px;
  }

  .dashboard-bento--overview .hub-feature-card__title {
    margin-bottom: 2px;
    font-size: 9px;
  }

  .dashboard-bento--overview .hub-package-table th {
    padding: 3px 4px;
    font-size: 8px;
  }

  .dashboard-bento--overview .hub-package-table td {
    padding: 5px 4px;
    font-size: 9px;
  }

  .dashboard-bento--overview .hub-package-table td:first-child strong {
    font-size: 8px;
  }

  .dashboard-bento--overview .hub-package-table td:first-child span {
    display: none;
  }

  .dashboard-bento--overview .hub-package-status {
    padding: 3px 4px;
    font-size: 7px;
  }

  .dashboard-bento--overview .hub-shipment {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 5px;
    padding: 4px 0;
  }

  .dashboard-bento--overview .hub-shipment__mode {
    width: 21px;
    height: 21px;
    font-size: 7px;
  }

  .dashboard-bento--overview .hub-shipment__details strong {
    font-size: 8px;
  }

  .dashboard-bento--overview .hub-shipment__details span {
    font-size: 7px;
  }

  .dashboard-bento--overview .hub-shipment__state {
    display: none;
  }

  .dashboard-bento--overview .dashboard-bento__tile--compact .dashboard-revenue__value {
    font-size: 11px;
  }

  .dashboard-bento--overview .dashboard-revenue__caption {
    font-size: 8px;
  }

  .dashboard-bento--overview .hub-revenue-chart {
    height: 30px;
  }

  .intake-feature-grid {
    width: min(100%, 440px);
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 96px 86px auto;
    gap: 8px;
    padding: 0 8px;
  }

  .intake-feature-card {
    padding: 10px 12px;
  }

  .intake-feature-card--scan {
    grid-area: 1 / 1 / 2 / 2;
  }

  .intake-feature-card--manual {
    grid-area: 2 / 1 / 3 / 2;
  }

  .intake-feature-card--recent {
    grid-area: 3 / 1 / 4 / 2;
  }

  .intake-feature-card--scan .hub-feature-card__title {
    font-size: 12px;
  }

  .intake-scan__illustration {
    width: 58px;
  }

  .intake-scan__copy p {
    margin-bottom: 4px;
    font-size: 9px;
  }

  .intake-scan__copy > span {
    font-size: 9px;
  }

  .intake-manual {
    min-height: 38px;
    grid-template-columns: 30px minmax(0, 1fr) 13px;
    gap: 7px;
    padding: 5px 7px;
  }

  .intake-manual__icon {
    width: 28px;
    height: 28px;
  }

  .intake-manual > div strong {
    font-size: 9px;
  }

  .intake-manual > div span {
    font-size: 8px;
  }

  .intake-activity__row {
    grid-template-columns: 25px minmax(0, 1fr) 12px;
    gap: 7px;
    padding: 7px 0;
  }

  .intake-activity__avatar {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }

  .intake-activity__heading strong {
    font-size: 9px;
  }

  .intake-activity__details > span {
    font-size: 8px;
  }

  .update__figure {
    width: 142px;
  }

  .update__image {
    width: 142px;
    height: 88px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hub-feature-card,
  .intake-feature-card {
    transition: box-shadow 180ms ease-out, transform 180ms ease-out;
  }

  @media (hover: hover) and (pointer: fine) {
    .hub-feature-card:hover,
    .intake-feature-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 7px 18px rgb(16 24 43 / 9%);
    }
  }
}

/* Kingston map and the restored fanned package-intake screens. */
.inside .snapshot__media--intake {
  position: relative;
  display: flex;
  width: 100%;
  height: 680px;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgb(113 119 131 / 9%) .62px, transparent .82px);
  background-size: 8px 8px;
}

.inside .snapshot__phone-stack {
  position: relative;
  width: min(100%, 880px);
  max-width: none;
  height: 680px;
  flex: 0 0 auto;
  margin-inline: auto;
}

.inside .phone-frame {
  box-sizing: border-box;
  top: 34px;
  width: 350px;
  height: auto;
  aspect-ratio: 815 / 1532;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.inside .phone-frame--left {
  left: 48px;
  z-index: 1;
  transform: rotate(-9deg);
}

.inside .phone-frame--right {
  right: 48px;
  z-index: 1;
  transform: rotate(9deg);
}

.inside .phone-frame--center {
  top: 34px;
  left: calc(50% - 140px);
  z-index: 3;
  transform: none;
}

.inside .phone-frame__screen-window {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 31px;
  background: #f1f5ff;
}

.inside .phone-frame__screen {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 815 / 1532;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 700px) {
  .inside .snapshot__media--intake {
    width: 100%;
    height: 520px;
    padding: 0;
  }

  .inside .snapshot__phone-stack {
    left: 50%;
    width: 480px;
    max-width: none;
    height: 520px;
    flex: 0 0 520px;
    transform: translateX(-50%);
  }

  .inside .phone-frame {
    top: 42px;
    width: min(245px, 64vw);
    height: auto;
    aspect-ratio: 815 / 1532;
  }

  .inside .phone-frame--left {
    left: 0;
  }

  .inside .phone-frame--right {
    right: auto;
    left: 260px;
  }

  .inside .phone-frame--center {
    top: 26px;
    left: 130px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .hero-map__update {
    animation: none;
    opacity: 1;
  }
}

/* Keep the hero map flush with the dark build band at every breakpoint. */
.build {
  margin-top: 0;
}

@media (min-width: 701px) and (max-width: 1199px), (max-width: 700px) {
  .hero__inner {
    padding-bottom: 0;
  }
}

/* Keep hero-map motion continuous and sequence its status cues. */
.hero-map__hub-pulse {
  fill: none;
  stroke: #f45108;
  stroke-width: 1.8;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-map-customer-pulse 2.8s ease-out infinite;
  vector-effect: non-scaling-stroke;
}

.hero-map__hub-pulse--inner {
  animation-delay: 1.4s;
}

.hero-map__hub-pulses {
  opacity: 0;
  animation: hero-map-return-pulse-window 48s steps(1, end) infinite;
}

.hero-map__dropoff-pulses {
  animation: hero-map-outbound-pulse-window 48s steps(1, end) infinite;
}

.hero-map__update {
  animation: hero-map-status 66s ease-in-out infinite;
}

.hero-map__vehicle-status {
  animation: hero-map-vehicle-status-card 72s ease-in-out infinite;
}

.hero-map__security-status--parked {
  animation: hero-map-car-parked-state 66s steps(1, end) infinite;
}

.hero-map__security-status--armed {
  animation: hero-map-car-armed-state 66s steps(1, end) infinite;
}

.hero-map__car-disc--parked,
.hero-map__shield-state--parked {
  animation: hero-map-car-parked-state 66s steps(1, end) infinite;
}

.hero-map__car-disc--armed,
.hero-map__shield-state--armed {
  animation: hero-map-car-armed-state 66s steps(1, end) infinite;
}

.hero-map__ship-card--dock {
  animation: hero-map-dock-status 66s ease-in-out infinite;
}

.hero-map__ship-card--arrival {
  animation: hero-map-arrival-status 5.5s ease-in-out 14s 1 both;
}

.hero-map--paused .hero-map__hub-pulses,
.hero-map--paused .hero-map__dropoff-pulses,
.hero-map--paused .hero-map__hub-pulse {
  animation-play-state: paused;
}

@keyframes hero-map-outbound-pulse-window {
  0%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes hero-map-return-pulse-window {
  0%, 49.99% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes hero-map-status {
  0%, 39.39% { opacity: 0; }
  40%, 46.36% { opacity: 1; }
  46.97%, 100% { opacity: 0; }
}

@keyframes hero-map-vehicle-status-card {
  0%, 4.55% { opacity: 0; }
  5.15%, 8.48% { opacity: 1; }
  9.09%, 16.67% { opacity: 0; }
  17.27%, 20.61% { opacity: 1; }
  21.21%, 100% { opacity: 0; }
}

@keyframes hero-map-car-parked-state {
  0%, 16.66% { opacity: 1; }
  16.67%, 100% { opacity: 0; }
}

@keyframes hero-map-car-armed-state {
  0%, 16.66% { opacity: 0; }
  16.67%, 100% { opacity: 1; }
}

@keyframes hero-map-dock-status {
  0%, 57.58% { opacity: 0; }
  58.18%, 64.55% { opacity: 1; }
  65.15%, 100% { opacity: 0; }
}

@keyframes hero-map-arrival-status {
  0%, 10% { opacity: 0; }
  22%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-map__update,
  .hero-map__ship-card--dock,
  .hero-map__ship-card--arrival,
  .hero-map__vehicle-status,
  .hero-map__hub-pulses,
  .hero-map__dropoff-pulses,
  .hero-map__hub-pulse,
  .hero-map__dropoff-pulse {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 700px) {
  .hero-map__svg {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 8%) 8%, rgb(0 0 0 / 28%) 12%, rgb(0 0 0 / 58%) 16%, rgb(0 0 0 / 88%) 20%, #000 24%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 8%) 8%, rgb(0 0 0 / 28%) 12%, rgb(0 0 0 / 58%) 16%, rgb(0 0 0 / 88%) 20%, #000 24%);
  }

  .inside .phone-frame--center {
    left: 0;
  }

  .roadmap__visual {
    transform: translateY(50px);
  }

  .follow {
    z-index: 2;
  }

  .follow-form__submit {
    background: var(--ink);
    color: var(--white);
  }

  .follow-form__submit:hover {
    background: var(--ink);
  }

  .follow-form__send-icon path:first-child {
    fill: currentColor;
  }
}

/* Give the intake canvas one full-bleed dotted layer and let its phone screens float above it. */
.inside .snapshot--intake {
  position: relative;
  background: transparent;
}

.inside .snapshot--intake::before {
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgb(113 119 131 / 5%) .62px, transparent .82px);
  background-size: 8px 8px;
  content: "";
  pointer-events: none;
}

.inside .snapshot__media--intake {
  overflow: visible;
  background: transparent;
}

.inside .snapshot__phone-stack {
  overflow: visible;
}

.inside .snapshot--intake .phone-frame {
  transition: transform 720ms cubic-bezier(.22, 1, .36, 1);
}

.inside .snapshot--intake .phone-frame--left {
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(0deg) scale(.98);
}

.inside .snapshot--intake .phone-frame--right {
  left: 50%;
  right: auto;
  transform: translateX(-50%) rotate(0deg) scale(.98);
  transition-delay: 70ms;
}

.inside .snapshot--intake .phone-frame--center {
  left: 50%;
  transform: translateX(-50%) scale(.985);
  transition-delay: 120ms;
}

.inside .snapshot--intake .phone-frame {
  width: 350px;
  height: auto;
  aspect-ratio: 815 / 1532;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.inside .snapshot--intake .phone-frame__screen {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 815 / 1532;
  object-fit: contain;
}

.inside .snapshot--intake.is-phones-fanned .phone-frame--left {
  transform: translateX(calc(-50% - clamp(160px, 17vw, 240px))) rotate(-9deg) scale(.92);
}

.inside .snapshot--intake.is-phones-fanned .phone-frame--right {
  transform: translateX(calc(-50% + clamp(160px, 17vw, 240px))) rotate(9deg) scale(.92);
}

.inside .snapshot--intake.is-phones-fanned .phone-frame--center {
  transform: translateX(-50%) scale(1);
}

@media (min-width: 701px) and (max-width: 1199px) {
  .inside .snapshot--intake .phone-frame {
    width: clamp(270px, 30vw, 340px);
    height: auto;
    aspect-ratio: 815 / 1532;
  }

  .inside .snapshot--intake.is-phones-fanned .phone-frame--left {
    transform: translateX(calc(-50% - clamp(82px, 14vw, 150px))) rotate(-7deg) scale(.9);
  }

  .inside .snapshot--intake.is-phones-fanned .phone-frame--right {
    transform: translateX(calc(-50% + clamp(82px, 14vw, 150px))) rotate(7deg) scale(.9);
  }
}

@media (max-width: 700px) {
  .inside .snapshot--intake::before {
    background-image: radial-gradient(circle, rgb(113 119 131 / 9%) .55px, transparent .78px);
  }

  .inside .snapshot__media--intake {
    height: 520px;
    padding: 0;
  }

  .inside .snapshot__phone-stack {
    left: auto;
    width: 100%;
    height: 520px;
    flex-basis: 520px;
    transform: none;
  }

  .inside .snapshot--intake .phone-frame {
    top: 52px;
    width: min(245px, 64vw);
    height: auto;
    aspect-ratio: 815 / 1532;
  }

  .inside .snapshot--intake .phone-frame--left,
  .inside .snapshot--intake .phone-frame--right {
    top: 52px;
  }

  .inside .snapshot--intake .phone-frame--center {
    top: 26px;
  }

  .inside .snapshot--intake.is-phones-fanned .phone-frame--left {
    transform: translateX(calc(-50% - clamp(38px, 12vw, 58px))) rotate(-6deg) scale(.88);
  }

  .inside .snapshot--intake.is-phones-fanned .phone-frame--right {
    transform: translateX(calc(-50% + clamp(38px, 12vw, 58px))) rotate(6deg) scale(.88);
  }

  .inside .snapshot--intake.is-phones-fanned .phone-frame--center {
    left: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inside .snapshot--intake .phone-frame {
    transition: none;
  }
}

/* Keep the send action visually consistent across desktop and mobile. */
.follow-form__submit {
  background: var(--ink);
  color: var(--white);
}

.follow-form__submit:hover {
  background: #1b2740;
}

.follow-form__send-icon path:first-child {
  fill: currentColor;
}

@media (min-width: 701px) and (max-width: 1199px) {
  .inside .snapshot--intake .phone-frame {
    width: clamp(270px, 30vw, 340px);
  }
}

@media (max-width: 700px) {
  .inside .snapshot--intake .phone-frame {
    top: 28px;
    width: min(245px, 64vw);
  }

  .inside .snapshot--intake .phone-frame--left,
  .inside .snapshot--intake .phone-frame--right {
    top: 42px;
  }

  .inside .snapshot--intake .phone-frame--center {
    top: 20px;
  }
}

/* Dashboard feature group reproduced from the Figma bento composition. */
.inside .snapshot__media--overview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 880 / 442;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.snapshot--overview .snapshot__view-hint {
  display: none;
}

.dashboard-bento--figma {
  position: relative;
  display: block;
  width: 100%;
  max-width: 880px;
  height: auto;
  min-width: 0;
  min-height: 0;
  gap: 0;
  padding: 0;
  aspect-ratio: 880 / 442;
  container-type: inline-size;
  background: transparent;
  color: #10182b;
  font-family: inherit;
  isolation: isolate;
}

.figma-bento-card {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #dee6f2;
  border-radius: 15px;
  background: #fff;
  color: #10182b;
}

.figma-bento-card h3,
.figma-bento-card p {
  margin: 0;
}

.figma-bento-card--deliveries {
  top: 7.5cqw;
  left: 0;
  width: 44.2614cqw;
  height: 40.1136cqw;
  padding: 3.4091cqw;
  border-radius: 1.7045cqw;
  box-shadow: 0 8px 24px rgb(16 24 43 / 15%);
}

.figma-bento-deliveries__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.figma-bento-deliveries__heading h3,
.figma-bento-deliveries__heading > strong {
  font-size: 2.7273cqw;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.figma-bento-deliveries__heading p {
  margin-top: .4545cqw;
  color: #7185a6;
  font-size: 2.0455cqw;
  line-height: 1.35;
}

.figma-bento-chart {
  position: absolute;
  top: 13.0682cqw;
  left: 3.4091cqw;
  width: 37.2727cqw;
  height: 15.9091cqw;
  overflow: visible;
}

.figma-bento-chart__asset {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  overflow: visible;
}

.figma-bento-chart__asset--portmore-area {
  top: 4.4318cqw;
  left: 0;
  width: 37.2727cqw;
  height: 8.6364cqw;
}

.figma-bento-chart__asset--kingston-area {
  top: 1.333cqw;
  left: 9.2614cqw;
  width: 22.7273cqw;
  height: 10.7307cqw;
}

.figma-bento-chart__asset--kingston-trend {
  top: 1.25cqw;
  left: 0;
  width: 37.3868cqw;
  height: 10.965cqw;
}

.figma-bento-chart__asset--portmore-trend {
  top: 4.4318cqw;
  left: 0;
  width: 37.4485cqw;
  height: 7.7842cqw;
}

.figma-bento-chart__weekdays {
  position: absolute;
  top: 14.0909cqw;
  left: 0;
  display: grid;
  width: 37.2727cqw;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  color: #7185a6;
  font-size: 1.7045cqw;
  line-height: 1.2;
}

.figma-bento-chart__weekdays span {
  text-align: left;
}

.figma-bento-chart__weekdays span:not(:first-child) {
  text-align: center;
}

.figma-bento-chart__weekdays span:last-child {
  text-align: right;
}

.figma-bento-deliveries__legend {
  position: absolute;
  top: 34cqw;
  left: 3.4091cqw;
  display: flex;
  align-items: center;
  gap: 1.8182cqw;
}

.figma-bento-deliveries__legend-item {
  display: flex;
  align-items: center;
  gap: 1.4773cqw;
  white-space: nowrap;
}

.figma-bento-deliveries__legend-item strong {
  font-size: 2.0455cqw;
  font-weight: 600;
  line-height: 1.25;
}

.figma-bento-deliveries__swatch {
  display: block;
  width: 2.8409cqw;
  height: 1.4773cqw;
  border-radius: 99px;
}

.figma-bento-deliveries__swatch--kingston {
  background: #11843e;
}

.figma-bento-deliveries__swatch--portmore {
  background: #f45108;
}

.figma-bento-card--activity {
  top: .6818cqw;
  left: 46.9318cqw;
  width: 44.1477cqw;
  height: 24.4318cqw;
  border-radius: 1.7045cqw;
  box-shadow: 0 8px 24px rgb(16 24 43 / 15%);
}

.figma-bento-activity__heading {
  position: absolute;
  top: 3.4091cqw;
  left: 3.4091cqw;
  display: flex;
  align-items: center;
  gap: 1.25cqw;
}

.figma-bento-activity__heading h3,
.figma-bento-activity__percentage {
  font-size: 2.7273cqw;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.figma-bento-activity__info {
  display: block;
  width: 1.9318cqw;
  height: 1.9318cqw;
}

.figma-bento-activity__percentage {
  position: absolute;
  top: 3.4091cqw;
  right: 3.4091cqw;
  margin: 0;
}

.figma-bento-activity__period,
.figma-bento-activity__change {
  position: absolute;
  top: 8.2955cqw;
  margin: 0;
  font-size: 2.0455cqw;
  line-height: 1.35;
}

.figma-bento-activity__period {
  left: 3.4091cqw;
  color: #7185a6;
}

.figma-bento-activity__change {
  top: 8.0682cqw;
  right: 3.4091cqw;
  padding: .4545cqw 1.25cqw;
  border-radius: 99px;
  background: #11843e;
  color: #fff;
  font-size: 1.5909cqw;
  line-height: 1.3;
}

.figma-bento-activity__meter {
  position: absolute;
  top: 12.3864cqw;
  left: 3.4091cqw;
  display: grid;
  width: 37.2727cqw;
  height: 1.9318cqw;
  grid-template-columns: repeat(34, minmax(0, 1fr));
  gap: .4545cqw;
}

.figma-bento-activity__bar {
  display: block;
  min-width: 0;
  border-radius: .4545cqw;
  background: #10182b;
}

.figma-bento-activity__bar.is-active {
  background: #00be83;
}

.figma-bento-activity__row {
  position: absolute;
  left: 3.4091cqw;
  display: grid;
  width: 37.2727cqw;
  height: 2.5cqw;
  grid-template-columns: 2.8409cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1364cqw;
  font-size: 2.0455cqw;
  line-height: 1.2;
  white-space: nowrap;
}

.figma-bento-activity__row:nth-last-child(2) {
  top: 15.9091cqw;
}

.figma-bento-activity__row:last-child {
  top: 18.8636cqw;
}

.figma-bento-activity__legend {
  display: block;
  width: 2.8409cqw;
  height: 1.7045cqw;
  border-radius: 99px;
}

.figma-bento-activity__legend--active {
  background: #00be83;
}

.figma-bento-activity__legend--total {
  background: #10182b;
}

.figma-bento-activity__row strong {
  font-weight: 400;
}

.figma-bento-card--shipment {
  top: 28.6364cqw;
  left: 46.9318cqw;
  width: 33.4091cqw;
  height: 21.5909cqw;
  padding: 2.2727cqw;
  border-radius: 1.7045cqw;
  box-shadow: 0 8px 24px rgb(16 24 43 / 15%);
}

.figma-bento-shipment__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
}

.figma-bento-shipment__heading h3 {
  font-size: 2.0455cqw;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.figma-bento-shipment__status {
  padding: .4545cqw 1.25cqw;
  border-radius: 99px;
  background: #d8f8e8;
  color: #008b62;
  font-size: 1.3636cqw;
  line-height: 1.2;
  white-space: nowrap;
}

.figma-bento-shipment__route {
  margin-top: .9091cqw !important;
  color: #526784;
  font-size: 1.8182cqw;
  line-height: 1.35;
}

.figma-bento-shipment__details {
  display: grid;
  gap: 0;
  margin-top: 1.3636cqw;
}

.figma-bento-shipment__details > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.5909cqw;
  line-height: 1.4;
}

.figma-bento-shipment__details span {
  color: #7185a6;
}

.figma-bento-shipment__details strong {
  font-weight: 500;
}

.figma-bento-shipment__map {
  display: flex;
  height: 3.9773cqw;
  align-items: center;
  justify-content: center;
  gap: 1.25cqw;
  margin-top: 1.1364cqw;
  border: 1px solid #dee6f2;
  border-radius: 1.1364cqw;
  box-shadow: 0 2px 4px rgb(16 24 43 / 8%);
  font-size: 1.5909cqw;
  font-weight: 500;
  line-height: 1;
}

.figma-bento-shipment__arrow {
  display: block;
  width: 2.0455cqw;
  height: 2.0455cqw;
}

/* Keep the dispatch map overlays in the tablet reading flow. */
@media (max-width: 900px) and (min-width: 701px) {
  .snapshot--dispatch .snapshot__media--dispatch-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    aspect-ratio: auto;
    margin-bottom: 0;
  }

  .snapshot--dispatch .dispatch-map__viewport {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 880 / 760;
    flex: 0 0 auto;
  }

  .snapshot--dispatch .dispatch-map__rider-card {
    position: relative;
    top: auto;
    right: auto;
    width: min(350px, 100%);
    max-width: 350px;
    align-self: center;
    flex: 0 0 auto;
  }

  .snapshot--dispatch .dispatch-map__notification-stack {
    position: relative;
    inset: auto;
    width: min(323px, 100%);
    max-width: 323px;
    align-self: center;
    flex: 0 0 auto;
    margin: 0;
  }
}

/* Keep dispatch overlays in their map column until there is room to clear the caption. */
@media (min-width: 701px) and (max-width: 1399px) {
  .snapshot--dispatch .snapshot__media--dispatch-map {
    display: flex;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    aspect-ratio: auto;
    margin-bottom: 0;
  }

  .snapshot--dispatch .dispatch-map__viewport {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 880 / 760;
    flex: 0 0 auto;
  }

  .snapshot--dispatch .dispatch-map__rider-card {
    position: relative;
    inset: auto;
    width: min(350px, 100%);
    max-width: 350px;
    align-self: center;
    flex: 0 0 auto;
    margin: 0;
  }

  .snapshot--dispatch .dispatch-map__notification-stack {
    position: relative;
    inset: auto;
    width: min(323px, 100%);
    max-width: 323px;
    align-self: center;
    flex: 0 0 auto;
    margin: 0;
  }

  .roadmap__badges .status-badge:last-child {
    right: 8px;
  }
}

/* Use the map's full width for both dispatch cards on compact laptop screens. */
@media (min-width: 1100px) and (max-width: 1399px) {
  .snapshot--dispatch .snapshot__media--dispatch-map {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
  }

  .snapshot--dispatch .dispatch-map__viewport {
    width: 100%;
    flex: 0 0 100%;
  }

  .snapshot--dispatch .dispatch-map__rider-card,
  .snapshot--dispatch .dispatch-map__notification-stack {
    width: 100%;
    align-self: start;
  }
}

/* Reveal editorial lists once as they enter view; keep their layout stable. */
@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
      opacity 340ms cubic-bezier(.23, 1, .32, 1),
      transform 340ms cubic-bezier(.23, 1, .32, 1);
    transition-delay: var(--scroll-reveal-delay, 0ms);
  }

  .scroll-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 701px) and (max-width: 1199px) {
  .hero {
    min-height: 0;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(280px, .92fr) minmax(0, 1.08fr);
    grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: 16px 28px;
    min-height: 540px;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hero__state {
    grid-column: 1;
    grid-row: 1;
  }

  .hero__intro {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    grid-column: 1;
    grid-row: 2;
  }

  .hero__title {
    font-size: clamp(40px, 5.2vw, 58px);
  }

  .hero__copy {
    gap: 12px;
    padding-top: 0;
  }

  .hero__description {
    font-size: 16px;
  }

  .hero__follow {
    font-size: 14px;
  }

  .hero__actions {
    grid-column: 1;
    grid-row: 3;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
  }

  .hero__visual.hero-map {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    align-self: stretch;
    width: calc(100% + 32px);
    height: clamp(420px, 55vw, 570px);
    grid-column: 2;
    grid-row: 1 / 4;
    margin: 0 -32px 0 0;
    transform: none;
  }

  .hero-map__svg {
    transform-origin: center;
    animation: hero-map-tablet-pan 28s ease-in-out infinite alternate;
  }

  .hero-map--paused .hero-map__svg {
    animation-play-state: paused;
  }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .inside .snapshot__media--intake {
    height: clamp(520px, 58vw, 594px);
  }

  .inside .snapshot__phone-stack {
    height: 100%;
  }
}

@keyframes hero-map-tablet-pan {
  0% { transform: translate3d(1.5%, 0, 0) scale(1.14); }
  50% { transform: translate3d(-1.5%, 1.2%, 0) scale(1.2); }
  100% { transform: translate3d(.5%, -1%, 0) scale(1.16); }
}

@media (max-width: 1024px) {
  .inside {
    min-height: 0;
  }

  .snapshot--dispatch .dispatch-map__rider-card,
  .snapshot--dispatch .dispatch-map__notification-stack {
    display: none;
  }

  .package-route__status {
    display: none;
  }

  .snapshot--dispatch .snapshot__media--dispatch-map {
    margin-bottom: 0;
  }
}

/* Keep dispatch content balanced on compact laptop widths. */
@media (min-width: 1025px) and (max-width: 1399px) {
  .snapshot--dispatch {
    grid-template-columns: minmax(0, 1.42fr) minmax(300px, .78fr);
    gap: 16px 32px;
  }

  .snapshot--dispatch .snapshot__media--dispatch-map {
    display: block;
    height: auto;
    aspect-ratio: 880 / 760;
    margin: 0;
    overflow: hidden;
  }

  .snapshot--dispatch .dispatch-map__viewport {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    flex: none;
  }

  .snapshot--dispatch .snapshot__media--dispatch-map::after {
    display: block;
  }

  .inside .snapshot--dispatch .snapshot__caption {
    position: relative;
    z-index: 2;
    gap: 14px;
    padding-top: 16px;
  }

  .snapshot--dispatch .dispatch-map__rider-card {
    position: relative;
    inset: auto;
    width: min(350px, 100%);
    max-width: 350px;
    min-height: 0;
    gap: 8px;
    margin: 2px 0 0;
    padding: 16px;
  }

  .snapshot--dispatch .dispatch-map__notification-stack {
    position: absolute;
    top: auto;
    right: 16px;
    bottom: 12px;
    left: auto;
    width: min(323px, calc(100% - 32px));
    aspect-ratio: 323 / 122;
    margin: 0;
  }
}

/* Preserve the wide desktop rider overlay after moving its markup into the caption. */
@media (min-width: 1400px) {
  .snapshot--dispatch {
    position: relative;
  }

  .inside .snapshot--dispatch .snapshot__caption {
    position: static;
  }

  .snapshot--dispatch .dispatch-map__rider-card {
    position: absolute;
    top: 33.289%;
    right: 0;
    width: min(350px, calc(100vw - 40px));
    min-height: 548px;
    margin: 0;
    padding: 19px;
  }
}

.package-route__art--mobile {
  display: none;
}

@media (max-width: 700px) {
  .hero-map__svg {
    animation: none;
    transform: none;
  }

  .hero-map__credit {
    transform: translateX(-24px);
  }

  .inside .snapshot__phone-stack {
    left: 0;
    width: 100%;
    margin-inline: auto;
    transform: none;
  }

  .inside .snapshot--intake .phone-frame--center,
  .inside .snapshot--intake.is-phones-fanned .phone-frame--center {
    position: absolute;
    left: 50%;
    transform: translateX(calc(-50% + 7px)) scale(1);
  }

  .follow-form {
    width: 100%;
  }

  .package-route__status {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-map__svg {
    animation: none;
    transform: none;
  }
}

html {
  overflow-x: clip;
}

.footer__wordmark::after {
  z-index: 1;
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 29.9% 81.2%,
    rgba(244, 81, 8, .22) 0%,
    rgba(244, 81, 8, .22) 22%,
    rgba(244, 81, 8, .42) 36%,
    rgba(255, 145, 77, .68) 48%,
    rgba(255, 239, 216, .52) 56%,
    rgba(244, 81, 8, .48) 66%,
    rgba(255, 176, 112, .32) 78%,
    rgba(244, 81, 8, .18) 88%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 2% 4%;
  background-position: 29.9% 81.2%;
  -webkit-mask-image: url("./assets/navvia-wordmark-dark-outline.svg");
  mask-image: url("./assets/navvia-wordmark-dark-outline.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  animation: footer-wordmark-pulse 8s cubic-bezier(.22, .61, .36, 1) infinite;
}

.footer__wordmark-art {
  position: relative;
  z-index: 0;
}

.footer__wordmark::after {
  animation-play-state: paused;
}

.footer__wordmark--in-view::after {
  animation-play-state: running;
}

.footer__wordmark--restart::after {
  animation: none;
}

@keyframes footer-wordmark-pulse {
  0% {
    opacity: 0;
    background-size: 2% 4%;
  }

  .5% {
    opacity: .18;
    background-size: 6% 10%;
  }

  1.5% {
    opacity: .62;
    background-size: 18% 30%;
  }

  3.5% {
    opacity: .82;
    background-size: 42% 76%;
  }

  8% {
    opacity: .82;
    background-size: 90% 160%;
  }

  44% {
    opacity: .72;
    background-size: 320% 480%;
    animation-timing-function: linear;
  }

  46% {
    opacity: 0;
    background-size: 320% 480%;
  }

  50%, 100% {
    opacity: 0;
    background-size: 340% 500%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer__wordmark::after {
    animation: none;
    opacity: 0;
    background-size: 2% 4%;
  }

}

/* Keep cursor particles behind the navigation controls and inside the header. */
.site-header__cursor-trail {
  z-index: 1;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.site-header .nav {
  z-index: 2;
  position: relative;
}

.site-header .mobile-menu {
  z-index: 3;
}

/* At tablet widths, keep the map beside its explanation and rider details. */
@media (min-width: 701px) and (max-width: 1024px) {
  .inside .snapshot--dispatch {
    grid-template-columns: minmax(0, 1.12fr) minmax(248px, .78fr);
    gap: 16px 24px;
  }

  .inside .snapshot--dispatch .snapshot__media--dispatch-map {
    position: relative;
    display: block;
    height: auto;
    aspect-ratio: 880 / 760;
    overflow: hidden;
    margin: 0;
  }

  .inside .snapshot--dispatch .dispatch-map__viewport {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    flex: none;
  }

  .inside .snapshot--dispatch .snapshot__media--dispatch-map::after {
    display: block;
  }

  .inside .snapshot--dispatch .snapshot__caption {
    position: relative;
    z-index: 2;
    gap: 12px;
    padding-top: 0;
  }

  .inside .snapshot--dispatch .dispatch-map__rider-card {
    position: relative;
    inset: auto;
    display: flex;
    width: min(350px, 100%);
    max-width: 350px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 15px;
  }

  .inside .snapshot--dispatch .dispatch-map__notification-stack {
    position: absolute;
    display: block;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: auto;
    width: min(280px, calc(100% - 24px));
    aspect-ratio: 323 / 122;
    margin: 0;
  }
}

/* Phones retain the map as the visual anchor, with details below the map. */
@media (max-width: 700px) {
  .inside .snapshot--dispatch .snapshot__media--dispatch-map {
    position: relative;
    display: block;
    height: auto;
    aspect-ratio: 390 / 450;
    overflow: hidden;
    margin: 0;
  }

  .inside .snapshot--dispatch .dispatch-map__viewport {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    flex: none;
  }

  .inside .snapshot--dispatch .snapshot__media--dispatch-map::after {
    display: block;
  }

  .inside .snapshot--dispatch .dispatch-map__notification-stack {
    display: none;
  }

  .inside .snapshot--dispatch .snapshot__caption {
    align-items: flex-start;
  }

  .inside .snapshot--dispatch .dispatch-map__rider-card {
    position: relative;
    inset: auto;
    display: flex;
    align-self: flex-start;
    width: min(350px, 100%);
    max-width: 350px;
    min-height: 0;
    margin-top: 2px;
  }
}

@media (min-width: 1400px) {
  .inside .snapshot--dispatch {
    grid-template-columns: minmax(0, 2.2fr) minmax(350px, 1fr);
    gap: 16px 40px;
  }

  .inside .snapshot--dispatch .snapshot__media--dispatch-map {
    height: auto;
    aspect-ratio: 880 / 760;
  }

  .inside .snapshot--dispatch .snapshot__caption {
    position: relative;
    z-index: 2;
    gap: 14px;
    padding-top: 16px;
  }

  .inside .snapshot--dispatch .dispatch-map__rider-card {
    position: relative;
    inset: auto;
    display: flex;
    width: min(350px, 100%);
    max-width: 350px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 17px;
  }

  .inside .snapshot--dispatch .dispatch-map__notification-stack {
    top: auto;
    right: 16px;
    bottom: 12px;
    left: auto;
    width: min(323px, calc(100% - 32px));
    margin: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .roadmap__badges .status-badge:first-child {
    animation: secure-badge-drift-one 5.6s ease-in-out .2s infinite;
  }

  .roadmap__badges .status-badge:last-child {
    animation: secure-badge-drift-two 6.4s ease-in-out .8s infinite;
  }
}

@keyframes secure-badge-drift-one {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

@keyframes secure-badge-drift-two {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 4px, 0); }
}

/* Let the arrival approach slowly, then show its status before it docks. */
.hero-map__security-car--static {
  display: none;
}

.hero-map__ship-card--arrival {
  animation: hero-map-arrival-status 10s ease-in-out 4.5s 1 both;
}

@keyframes hero-map-arrival-status {
  0%, 7% { opacity: 0; }
  15%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

.hero-map__vehicle-status {
  animation: hero-map-vehicle-status-card 72s ease-in-out infinite;
}

.hero-map__vehicle-status--static {
  display: none;
}

.hero-map__security-status--moving,
.hero-map__car-disc--moving {
  animation: hero-map-car-moving-state 72s steps(1, end) infinite;
}

.hero-map__security-status--parked,
.hero-map__car-disc--parked,
.hero-map__shield-state--parked {
  animation: hero-map-car-parked-state 72s steps(1, end) infinite;
}

.hero-map__security-status--armed {
  animation: hero-map-car-shield-status-state 72s steps(1, end) infinite;
}

.hero-map__security-status--engine-on {
  animation: hero-map-car-engine-state 72s steps(1, end) infinite;
}

.hero-map__car-disc--armed,
.hero-map__shield-state--armed {
  animation: hero-map-car-armed-state 72s steps(1, end) infinite;
}

@keyframes hero-map-vehicle-status-card {
  0%, 15% { opacity: 0; }
  15.4%, 20.1% { opacity: 1; }
  20.55%, 35.99% { opacity: 0; }
  36%, 36.4% { opacity: 0; }
  36.4%, 41.1% { opacity: 1; }
  41.55%, 42.99% { opacity: 0; }
  43%, 43.4% { opacity: 0; }
  43.4%, 48.1% { opacity: 1; }
  48.55%, 49.99% { opacity: 0; }
  50%, 50.4% { opacity: 0; }
  50.4%, 55.1% { opacity: 1; }
  55.55%, 59.99% { opacity: 0; }
  60%, 60.4% { opacity: 0; }
  60.4%, 65.1% { opacity: 1; }
  65.55%, 100% { opacity: 0; }
}

@keyframes hero-map-car-moving-state {
  0%, 35.99% { opacity: 1; }
  36%, 59.99% { opacity: 0; }
  60%, 100% { opacity: 1; }
}

@keyframes hero-map-car-parked-state {
  0%, 35.99% { opacity: 0; }
  36%, 42.99% { opacity: 1; }
  43%, 100% { opacity: 0; }
}

@keyframes hero-map-car-armed-state {
  0%, 42.99% { opacity: 0; }
  43%, 100% { opacity: 1; }
}

@keyframes hero-map-car-engine-state {
  0%, 49.99% { opacity: 0; }
  50%, 59.99% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes hero-map-car-shield-status-state {
  0%, 42.99% { opacity: 0; }
  43%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-map__security-car--animated {
    display: none;
  }

  .hero-map__security-car--static {
    display: block;
  }

  .hero-map__vehicle-status--animated {
    display: none;
  }

  .hero-map__vehicle-status--static {
    display: block;
    animation: hero-map-reduced-status-card 4s linear both;
  }

  .site-header__cursor-trail {
    display: none;
  }

  .roadmap__badges .status-badge:first-child,
  .roadmap__badges .status-badge:last-child {
    animation: none;
    transform: none;
  }

  .hero-map__ship-card--arrival {
    animation: none;
    opacity: 1;
  }

  .hero-map__vehicle-status,
  .hero-map__security-status--moving,
  .hero-map__security-status--parked,
  .hero-map__security-status--armed,
  .hero-map__security-status--engine-on,
  .hero-map__car-disc--moving,
  .hero-map__car-disc--parked,
  .hero-map__shield-state--parked {
    animation: none;
    opacity: 0;
  }

  .hero-map__security-status--parked,
  .hero-map__car-disc--parked,
  .hero-map__shield-state--parked { opacity: 1; }

  .hero-map__security-status--armed,
  .hero-map__car-disc--armed,
  .hero-map__shield-state--armed {
    animation: none;
    opacity: 0;
  }

  .hero-map__vehicle-status--static {
    display: block;
    animation: hero-map-reduced-status-card 4s linear both;
  }
}

@keyframes hero-map-reduced-status-card {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 700px) {
  .hero-map__dropoff-pulse--outer { r: 26px; }
  .hero-map__dropoff-pulse--inner { r: 20px; }
}

/* Keep rider updates in the same two-line card system as vehicle and ship statuses. */
.hero-map__update--rider {
  opacity: 1;
  animation: none;
}

.hero-map__update--rider rect {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-map__update--rider {
    opacity: 0;
  }
}

/* On phones, keep the camera still and show only Alex's hub-to-customer route. */
@media (max-width: 700px) {
  .hero-map__svg .hero-map__vehicle--truck,
  .hero-map__svg .hero-map__ship,
  .hero-map__svg .hero-map__ship-card,
  .hero-map__svg .hero-map__security-car,
  .hero-map__svg .hero-map__vehicle-status--animated,
  .hero-map__svg .hero-map__vehicle-status--static {
    display: none !important;
  }
}

/* Tech Text canvas stage includes a gutter for the selected-letter frame and dimension readout. */
.tech-text {
  position: relative;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  user-select: none;
}

.tech-text-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.tech-text__measurement {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
  width: max-content;
  max-width: none;
  overflow: visible;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.tech-text__measurement[hidden] {
  display: none;
}

.hero__title .hero__title-emphasis {
  position: relative;
  display: inline-block;
  font-weight: 600;
  letter-spacing: -.05em;
}

.build__title-tech {
  position: relative;
  display: inline-block;
  font-weight: 600;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.build__title-tech-stage {
  position: absolute;
  z-index: 1;
  top: -40.909%;
  left: -11.111%;
  display: none;
  width: 122.222%;
  height: 181.818%;
  overflow: visible;
}

.build__title-tech-stage.tech-text--ready {
  display: block;
}

.build__title-tech-label.tech-text-label--enhanced {
  color: transparent;
}

@media (forced-colors: active) {
  .build__title-tech-label.tech-text-label--enhanced {
    color: CanvasText;
  }

  .build__title-tech-stage.tech-text--ready {
    display: none;
  }
}

/* Scroll the roadmap screen image inside the stationary phone frame. */
@media (prefers-reduced-motion: no-preference) {
  .roadmap__visual .roadmap__phone-image {
    animation: roadmap-phone-screen-tour 24s infinite;
    will-change: transform;
  }
}

@keyframes roadmap-phone-screen-tour {
  0%, 8% {
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  }
  42%, 54% {
    transform: translate3d(0, -38.7%, 0);
    animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  }
  88%, 100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .roadmap__visual .roadmap__phone-image {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* Keep the development badge outside the roadmap phone at every viewport. */
@media (min-width: 701px) {
  .roadmap__badges .status-badge:last-child {
    right: calc(100% + 8px);
    left: auto;
  }
}

@media (max-width: 700px) {
  .roadmap__badges {
    top: -36px;
    right: 0;
    bottom: auto;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .roadmap__badges .status-badge {
    position: relative;
    flex: 0 0 auto;
  }

  .roadmap__badges .status-badge:first-child,
  .roadmap__badges .status-badge:last-child {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
}