.home-page {
  min-height: 100vh;
  padding: var(--dc-topbar-height) 0 0 var(--dc-rail-width);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--dc-bg);
}

.home-main {
  position: relative;
  z-index: 1;
}

.home-container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: clamp(30px, 6vw, 76px);
  align-items: center;
  min-height: min(700px, calc(100vh - var(--dc-topbar-height)));
  padding: clamp(56px, 9vw, 110px) 0;
}

.home-kicker,
.section-kicker,
.feature-index {
  margin: 0;
  color: var(--dc-muted);
  font-family: var(--dc-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.home-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--dc-green);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(74, 209, 126, 0.1);
}

/* Three short lines rather than one long one, so the type can stay large while
   sharing the hero with the live demo. Sized to keep "KNOW THE GLIDE." on a
   single line in the hero's left column. */
.home-title {
  max-width: 790px;
  margin: 14px 0 18px;
  font-family: var(--dc-font-display);
  font-size: clamp(42px, 5.4vw, 74px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.88;
  text-transform: uppercase;
}

.home-title span {
  color: var(--dc-blue-bright);
}

.home-editorial {
  max-width: 560px;
  margin: 0;
  color: var(--dc-muted-strong);
  font-family: var(--dc-font-editorial);
  font-size: clamp(17px, 1.9vw, 21px);
  font-style: italic;
  line-height: 1.4;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px 18px;
  color: var(--dc-text);
  background: transparent;
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.home-button:hover {
  color: var(--dc-blue-bright);
  background: var(--dc-blue-soft);
  border-color: rgba(65, 105, 225, 0.44);
}

.home-button.primary {
  color: #fff;
  background: var(--dc-blue);
  border-color: var(--dc-blue);
}

.home-button.primary:hover {
  color: #fff;
  background: #3f67dc;
  border-color: #3f67dc;
}

.home-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
  color: var(--dc-muted);
  font-size: 13px;
}

.home-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.home-trust span::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--dc-blue);
  border-radius: 50%;
}

/* Hero column two. The map keeps its own square geometry (see .route-map);
   this wrapper only sizes it into the hero and hangs the accuracy note under
   it. Replaced a static "drop brief" card that showed invented route steps. */
.hero-demo {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.demo-note {
  max-width: 470px;
  margin: 0;
  color: var(--dc-muted);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.demo-note strong {
  color: var(--dc-muted-strong);
  font-weight: 600;
}

/* Live readouts sit on the map rather than in a side panel. pointer-events are
   off throughout so a chip can never swallow a marker drag or a map pan. */
.demo-readout {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.demo-chip {
  display: grid;
  gap: 3px;
  padding: 7px 11px;
  background: rgba(16, 16, 17, 0.86);
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-sm);
}

.demo-chip-label {
  color: var(--dc-muted);
  font-family: var(--dc-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Tabular figures: the value changes on every pointer move while dragging, and
   proportional digits make the chip jitter. */
.demo-chip-value {
  font-family: var(--dc-font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.demo-status {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  color: var(--dc-green);
  background: rgba(74, 209, 126, 0.12);
  border: 1px solid rgba(74, 209, 126, 0.3);
  border-radius: 999px;
  font-family: var(--dc-font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.demo-status::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

/* Out of reach: the glide path already turns amber, so the pill follows it
   rather than relying on the wording alone. */
.route-map.is-unreachable .demo-status {
  color: var(--dc-amber);
  background: rgba(229, 202, 126, 0.12);
  border-color: rgba(229, 202, 126, 0.32);
}

.home-band {
  border-top: 1px solid var(--dc-border);
  border-bottom: 1px solid var(--dc-border);
}

.home-band-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-band-item {
  padding: 20px clamp(18px, 3vw, 34px);
  border-right: 1px solid var(--dc-border);
}

.home-band-item:first-child {
  padding-left: 0;
}

.home-band-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.home-band-item strong,
.home-band-item span {
  display: block;
}

.home-band-item strong {
  font-family: var(--dc-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.home-band-item span {
  margin-top: 4px;
  color: var(--dc-muted);
  font-size: 13px;
}

/* Stat variant: the figures animate up via [data-count] in js/home-reveal.js. */
.home-band.is-stats .home-band-item {
  padding-top: 26px;
  padding-bottom: 26px;
}

.home-band.is-stats .home-band-item strong {
  color: var(--dc-blue-bright);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.home-band.is-stats .home-band-item span {
  max-width: 260px;
  margin-top: 8px;
}

.home-section {
  padding: clamp(72px, 10vw, 120px) 0;
}

.home-section + .home-section {
  padding-top: 0;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr);
  gap: 30px;
  align-items: end;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--dc-border);
}

.section-heading h2 {
  max-width: 760px;
  margin: 8px 0 0;
  font-family: var(--dc-font-display);
  font-size: clamp(39px, 6.4vw, 72px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.94;
  text-transform: uppercase;
}

.section-heading .section-note {
  margin: 0;
  color: var(--dc-muted-strong);
  font-family: var(--dc-font-editorial);
  font-size: 20px;
  font-style: italic;
  line-height: 1.35;
}

.route-desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  margin-top: 24px;
}

/* The demo solves in the calculator's 2048x2048 pixel space and positions
   markers as percentages of the stage, so the stage must stay square and must
   not crop or scale the image independently — otherwise marker positions drift
   from the math. Zoom is a transform on the stage; markers counter-scale so
   they stay calculator-sized on screen. */
.route-map {
  --demo-zoom: 1;
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  background: var(--dc-bg-deep);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  touch-action: none;
}

.route-map-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
}

.route-map.is-zoomed .route-map-viewport {
  cursor: grab;
}

.route-map-viewport.is-panning {
  cursor: grabbing;
}

.route-map-stage {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.route-map-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 42px 42px;
}

.route-map-stage img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: fill;
  filter: saturate(0.85) contrast(1.04) brightness(0.78);
  pointer-events: none;
  user-select: none;
}

.route-line {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  color: var(--dc-blue-bright);
  pointer-events: none;
}

.route-line path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Bus line: solid and muted — it is the input, not the answer. */
.route-line-bus {
  color: var(--dc-muted);
  opacity: 0.75;
}

/* Air route (drop -> deploy glider -> land): the computed answer. */
.route-line-air {
  color: #7bf1d1;
  stroke-dasharray: 8 7;
}

.route-map.is-unreachable .route-line-air {
  color: var(--dc-amber);
}

/* Calculator-matching phase pins: colored dots + floating labels. */
.route-marker {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(calc(1 / var(--demo-zoom, 1)));
  transform-origin: center center;
}

.route-marker-dot {
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}

.route-marker-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  color: #f5f9ff;
  background: rgba(13, 31, 52, 0.94);
  border: 1px solid rgba(146, 187, 225, 0.3);
  border-radius: 7px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.46);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  pointer-events: none;
}

.route-marker.is-draggable {
  z-index: 4;
  cursor: grab;
  touch-action: none;
}

.route-marker.is-draggable:focus-visible {
  outline: 2px solid var(--dc-blue-bright);
  outline-offset: 3px;
}

.route-marker.is-draggable.is-dragging {
  z-index: 5;
  cursor: grabbing;
}

/* Computed markers are output, not controls — never intercept a drag. */
.route-marker.is-computed {
  z-index: 3;
  pointer-events: none;
}

.route-marker.is-bus-start .route-marker-dot,
.route-marker.is-bus-end .route-marker-dot {
  border-color: #dffcff;
  background: #f7fdff;
  box-shadow: 0 0 0 4px rgba(85, 231, 255, 0.28), 0 2px 9px rgba(0, 0, 0, 0.72);
}

.route-marker.is-bus-start .route-marker-label,
.route-marker.is-bus-end .route-marker-label {
  padding: 4px 7px;
  color: #bdf7ff;
  background: rgba(13, 31, 52, 0.82);
  border-color: rgba(85, 231, 255, 0.36);
  font-size: 9px;
}

.route-marker.is-bus-start .route-marker-label {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.route-marker.is-bus-end .route-marker-label {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.route-marker.is-drop .route-marker-dot {
  background: #e72f58;
  box-shadow: 0 0 0 3px rgba(231, 47, 88, 0.3), 0 2px 8px rgba(0, 0, 0, 0.72);
}

.route-marker.is-drop .route-marker-label {
  bottom: calc(100% + 8px);
  right: calc(100% - 2px);
  border-color: rgba(231, 47, 88, 0.48);
}

.route-marker.is-deploy .route-marker-dot {
  background: #2acb96;
  box-shadow: 0 0 0 3px rgba(42, 203, 150, 0.3), 0 2px 8px rgba(0, 0, 0, 0.72);
}

.route-marker.is-deploy .route-marker-label {
  top: calc(100% + 8px);
  right: calc(100% - 2px);
  border-color: rgba(42, 203, 150, 0.48);
}

.route-marker.is-land .route-marker-dot {
  background: #287ff0;
  box-shadow: 0 0 0 3px rgba(40, 127, 240, 0.32), 0 2px 8px rgba(0, 0, 0, 0.72);
}

.route-marker.is-land .route-marker-label {
  top: calc(100% + 10px);
  left: calc(100% - 2px);
  border-color: rgba(71, 148, 248, 0.58);
}

.route-map-zoom {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius-sm);
  background: rgba(29, 29, 31, 0.92);
  box-shadow: var(--dc-shadow);
}

.route-map-zoom-btn {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  color: var(--dc-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dc-border);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.route-map-zoom-btn:last-child {
  border-bottom: 0;
}

.route-map-zoom-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.route-map-zoom-btn:focus-visible {
  outline: 2px solid var(--dc-blue-bright);
  outline-offset: -2px;
}

.route-map-zoom-btn:disabled {
  color: var(--dc-muted);
  cursor: default;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
  border-top: 1px solid var(--dc-border);
  border-left: 1px solid var(--dc-border);
}

.feature-item {
  min-height: 230px;
  padding: clamp(22px, 4vw, 38px);
  background: rgba(29, 29, 31, 0.45);
  border-right: 1px solid var(--dc-border);
  border-bottom: 1px solid var(--dc-border);
}

.feature-item h3 {
  margin: 34px 0 8px;
  font-family: var(--dc-font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.feature-item p:last-child {
  max-width: 500px;
  margin: 0;
  color: var(--dc-muted);
}

.proof-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
  border-top: 1px solid var(--dc-border);
  border-left: 1px solid var(--dc-border);
}

.proof-item {
  padding: clamp(22px, 3.4vw, 34px);
  background: rgba(29, 29, 31, 0.45);
  border-right: 1px solid var(--dc-border);
  border-bottom: 1px solid var(--dc-border);
}

.proof-item h3 {
  margin: 0 0 10px;
  font-family: var(--dc-font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.proof-item p {
  max-width: 520px;
  margin: 0;
  color: var(--dc-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* The strongest claim on the page — no competitor tells you when their answer
   is unreliable — so it gets accented rather than reading as item three of four. */
.proof-item.is-key {
  background: rgba(65, 105, 225, 0.1);
}

.proof-item.is-key h3 {
  color: var(--dc-blue-bright);
}

.proof-item.is-key p {
  color: var(--dc-muted-strong);
}

.proof-quote {
  margin: 26px 0 0;
  padding: clamp(22px, 3.4vw, 34px);
  background: rgba(29, 29, 31, 0.45);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
}

.proof-quote[hidden] {
  display: none;
}

.proof-quote blockquote {
  margin: 0;
  font-family: var(--dc-font-editorial);
  font-size: clamp(19px, 2.2vw, 25px);
  font-style: italic;
  line-height: 1.35;
}

.proof-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--dc-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.proof-quote-name {
  color: var(--dc-text);
}

/* Attribution links out so the claim is checkable rather than asserted. */
.proof-quote-handle {
  color: var(--dc-blue-bright);
  text-decoration: none;
}

.proof-quote-handle:hover {
  text-decoration: underline;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
  border-top: 1px solid var(--dc-border);
}

.step {
  position: relative;
  padding: 28px 22px;
  border-right: 1px solid var(--dc-border);
  border-bottom: 1px solid var(--dc-border);
}

.step:first-child {
  border-left: 1px solid var(--dc-border);
}

.step-number {
  color: var(--dc-blue-bright);
  font-family: var(--dc-font-display);
  font-size: 34px;
  font-weight: 600;
}

.step h3 {
  margin: 28px 0 8px;
  font-family: var(--dc-font-display);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}

.step p {
  margin: 0;
  color: var(--dc-muted);
  font-size: 14px;
}

.home-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: end;
  padding: clamp(42px, 8vw, 78px) 0;
  border-top: 1px solid var(--dc-border);
}

.home-cta h2 {
  max-width: 850px;
  margin: 8px 0 0;
  font-family: var(--dc-font-display);
  font-size: clamp(44px, 7vw, 82px);
  font-weight: 700;
  line-height: 0.92;
  text-transform: uppercase;
}

.home-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0 calc(22px + env(safe-area-inset-bottom));
  color: var(--dc-muted);
  border-top: 1px solid var(--dc-border);
  font-size: 13px;
}

.home-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.home-footer-identity {
  display: grid;
  gap: 5px;
}

.home-footer-disclaimer {
  max-width: 560px;
  font-size: 11px;
  line-height: 1.45;
}

.home-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--dc-muted);
  text-decoration: none;
}

.home-footer a:hover,
.home-footer a:focus-visible {
  color: var(--dc-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 360ms ease, transform 360ms ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .home-hero,
  .section-heading,
  .route-desk {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-hero {
    min-height: auto;
  }

  .section-heading .section-note {
    max-width: 620px;
  }

  .route-map {
    width: min(620px, 100%);
  }

  .proof-list,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step:nth-child(3) {
    border-left: 1px solid var(--dc-border);
  }
}

@media (max-width: 760px) {
  .home-page {
    padding: var(--dc-topbar-height) 0 var(--dc-mobile-nav-height);
  }

  .home-container {
    width: min(100% - 28px, 680px);
  }

  .home-hero {
    padding: 52px 0 62px;
  }

  .home-title {
    font-size: clamp(38px, 11.5vw, 60px);
  }

  .home-band-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-band-item,
  .home-band-item:first-child,
  .home-band-item:last-child {
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid var(--dc-border);
  }

  .home-band-item:last-child {
    border-bottom: 0;
  }

  .feature-list,
  .proof-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .home-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 540px) {
  .home-actions,
  .home-actions .home-button {
    width: 100%;
  }

  .home-trust {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .demo-readout {
    right: 8px;
    bottom: 8px;
    left: 8px;
  }

  .demo-chip {
    padding: 6px 9px;
  }

  .demo-chip-value {
    font-size: 18px;
  }

  .route-marker-label {
    padding: 4px 7px;
    font-size: 10px;
  }

  .route-marker.is-bus-start .route-marker-label,
  .route-marker.is-bus-end .route-marker-label {
    font-size: 9px;
  }

  .feature-list,
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .step,
  .step:first-child,
  .step:nth-child(3) {
    border-left: 1px solid var(--dc-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}