.home-page { cursor: auto; }
.home-page :is(a, button, summary, label, select, [role="button"]) { cursor: pointer; }
.home-page .nav { background: transparent; border-bottom-color: transparent; }
.home-page .nav.scrolled { background: var(--h-paper); border-bottom-color: var(--h-rule-soft); }
.home-page .nav-links { gap: 48px; }
.home-page :is(.nav-link, .nav-sub) { font-size: var(--h-small); }
.home-page .nav-cta { border-color: var(--h-indigo); color: var(--h-indigo); padding-inline: 20px; }
.home-page .btn-primary { background: var(--h-indigo); }
.home-page :is(.btn-primary, .btn-secondary) { font-size: 1rem; font-weight: 450; }
.home-page .btn-secondary { color: var(--h-indigo); border-bottom-color: transparent; }
.home-page .btn-secondary:hover { border-bottom-color: currentColor; }
.home-page :focus-visible { outline: 2px solid var(--h-indigo); outline-offset: 4px; }

.home-page .hero {
  position: relative;
  isolation: isolate;
  padding: 0;
  overflow: clip;
}
.home-page .hero-wrap {
  position: relative;
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  align-items: center;
  gap: 48px;
  min-height: min(960px, 100svh);
  padding-top: 112px;
  padding-bottom: 40px;
}
.home-page .hero-lead { position: relative; z-index: 1; padding-bottom: 24px; }
.home-page .hero-eyebrow { margin-bottom: 40px; color: var(--h-indigo); letter-spacing: .035em; }
.home-page .live-dot { background: var(--h-indigo); width: 5px; height: 5px; }
.home-page .hero-h1 {
  font: 400 clamp(3rem, 4.1vw, 4rem)/1.065 var(--h-sans);
  letter-spacing: -.055em;
  max-width: none;
  margin-bottom: 32px;
  text-wrap: initial;
}
.home-page .hero-h1 > span { display: block; }
.home-page .hero-h1 em { font-style: normal; color: var(--h-indigo); font-weight: inherit; }
.home-page .hero-sub {
  font-size: var(--h-lead);
  line-height: 1.65;
  color: var(--h-gray);
  max-width: 43ch;
  margin-bottom: 32px;
}
.home-page .hero-ctas { gap: 24px; margin-bottom: 72px; }
.home-page .hero-ctas :is(.btn-primary, .btn-secondary) { font-size: var(--h-small); }
.home-page .hero-note {
  max-width: 43ch;
  font-size: var(--h-caption);
  color: var(--h-light);
  padding-left: 40px;
  border: 0;
  position: relative;
}
.home-page .hero-note::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 24px;
  height: 1px;
  background: var(--h-ink);
}
.freight-atlas {
  --atlas-sea: #123c89;
  --atlas-grid: #688bb8;
  --atlas-suspended: #eab08d;
  position: relative;
  min-width: 0;
  margin: 0;
}
.atlas-heading, .atlas-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--h-light);
  font: 400 var(--h-label)/1.5 var(--h-mono);
}
.atlas-heading { padding-bottom: 12px; border-top: 1px solid var(--h-rule); padding-top: 16px; }
.atlas-plate { position: relative; aspect-ratio: 1; width: min(100%, 60svh, 640px); margin: 8px auto 0; }
.atlas-map { position: relative; width: 100%; height: 100%; }
.atlas-map > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 12px #09245312); }
.atlas-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atlas-route { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: opacity 180ms ease; }
.atlas-route--suez { stroke: var(--atlas-suspended); opacity: .4; stroke-dasharray: .003 .007; }
.atlas-route--cape { stroke: var(--h-sheet); opacity: 1; }
[data-route="suez"] .atlas-route--suez { opacity: 1; stroke-width: 4; }
[data-route="suez"] .atlas-route--cape { opacity: .18; }
.atlas-port circle { fill: var(--atlas-sea); stroke: var(--h-sheet); stroke-width: 3; }
.atlas-label { fill: var(--h-ink); font: 400 20px var(--h-mono); }
.atlas-label rect { fill: var(--h-paper); }
.atlas-geography { font: 400 13px var(--h-mono); letter-spacing: 3px; fill: var(--h-gray); }
.atlas-geography text:not(:first-child) { fill: var(--h-blue-light); font-size: 11px; letter-spacing: 2px; }
.atlas-suez-mark { stroke: #9e482d; stroke-width: 2; }
.atlas-suez-mark text { fill: var(--h-ink); stroke: none; font: 400 17px var(--h-mono); }
.atlas-annotation {
  position: absolute;
  bottom: 19%;
  left: 12%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--h-paper);
  color: var(--h-ink);
  box-shadow: 0 4px 12px #09245314;
  font: 400 var(--h-label)/1.7 var(--h-mono);
}
.atlas-annotation__index { color: var(--h-indigo); border-right: 1px solid var(--h-rule); padding-right: 12px; }
.atlas-annotation strong { font-weight: 400; color: var(--h-gray); }
.freight-atlas figcaption { font: 400 1rem/1.5 var(--h-sans); letter-spacing: -.02em; margin: 12px 0 24px; }
.freight-atlas figcaption > span:first-child { font: 400 var(--h-label)/1.5 var(--h-mono); color: var(--h-gray); margin-right: 24px; }
.atlas-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.atlas-controls[hidden] { display: none; }
.atlas-controls button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--h-rule);
  background: transparent;
  color: var(--h-light);
  font: 400 var(--h-small)/1.5 var(--h-sans);
  transition: border-color 160ms ease, color 160ms ease;
}
.atlas-controls button > span:first-child { font: 400 var(--h-label)/1.5 var(--h-mono); }
.atlas-controls button > span:first-child span { font: 400 1rem/1.5 var(--h-sans); margin-left: 16px; }
.atlas-controls button[aria-pressed="true"], .atlas-controls button:hover { color: var(--h-indigo); border-color: var(--h-indigo); }
.atlas-controls button[aria-pressed="true"] { box-shadow: 0 -1px 0 var(--h-indigo); }
.atlas-footnote { padding-top: 12px; }
.freight-atlas[data-interactive] .atlas-plate { cursor: crosshair; touch-action: pan-y; }
.atlas-probe { opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.atlas-probe circle:first-child { fill: var(--atlas-sea); fill-opacity: .4; stroke: var(--h-sheet); stroke-width: 1.5; }
.atlas-probe circle:last-child { fill: var(--h-sheet); }
.freight-atlas[data-inspecting] .atlas-probe { opacity: 1; }
.atlas-annotation { pointer-events: none; transform-origin: 50% 100%; }
.home-page #newsletter { scroll-margin-top: 112px; }

.decision-spread { background: var(--h-sheet); border-top: 1px solid var(--h-rule-soft); padding-block: var(--section-y); }
.decision-spread__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 96px;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
}
.transit-study { min-width: 0; }
.transit-study .eyebrow { color: var(--h-indigo); margin-bottom: 24px; }
.transit-study h2 { font: 400 var(--h-h3)/1.15 var(--h-sans); letter-spacing: -.035em; margin-bottom: 20px; }
.transit-study__caption { font-size: var(--h-small); line-height: 1.7; color: var(--h-gray); }
.transit-chart { margin-top: 32px; }
.transit-chart svg { width: 100%; overflow: visible; }
.transit-chart__grid { stroke: var(--h-rule-soft); stroke-width: 1; }
.transit-chart__original { stroke: var(--h-etch); stroke-width: 2; stroke-dasharray: 4 5; }
.transit-chart__cape { stroke: var(--h-indigo); stroke-width: 2; }
.transit-chart__point { fill: var(--h-etch); }
.transit-chart__point--cape { fill: var(--h-indigo); }
.transit-chart__labels { fill: var(--h-ink); font: 400 13px var(--h-mono); }
.transit-chart__ticks { fill: var(--h-light); font: 400 12px var(--h-mono); }
.transit-chart figcaption { margin-top: 8px; font: 400 var(--h-label)/1.5 var(--h-mono); color: var(--h-light); }
.decision-spread__sheet { min-width: 0; }
.home-page .decision { box-shadow: none; }
.home-page .decision__col--rec { background: var(--h-paper); }
.home-page .decision__col-days-num { font-family: var(--h-sans); font-size: var(--h-h2); }
.home-page .proof-stat-num { font-family: var(--h-sans); letter-spacing: -.045em; }
.home-page :is(.proof-lead, .card-body, .integrate-body, .cta-sub) { font-size: var(--h-lead); line-height: 1.7; }
.home-page .sourceline { background: var(--h-sheet); }
.home-page .voice-avatar { border-radius: 2px; }

@media (max-width: 1040px) {
  .home-page .nav-links { gap: 24px; }
  .home-page .hero { padding: 0; }
  .home-page .hero-h1 { max-width: none; }
  .home-page .hero-wrap { padding-top: 128px; gap: 32px; min-height: auto; }
  .home-page .hero-h1 { font-size: clamp(2.75rem, 5.1vw, 3.5rem); }
  .home-page .hero-ctas { gap: 12px; margin-bottom: 40px; }
  .home-page .hero-ctas .btn-primary { padding-inline: 16px; }
  .atlas-plate { width: 100%; margin-inline: auto; }
  .atlas-annotation { left: 5%; bottom: 14%; }
  .decision-spread__wrap { gap: 40px; }
}
@media (max-width: 768px) {
  .home-page .nav { background: var(--h-paper); }
  .home-page .nav-links { gap: 0; }
  .home-page .hero-wrap { padding-top: 128px; padding-bottom: 48px; grid-template-columns: 1fr; gap: 48px; }
  .home-page .hero-lead { width: 100%; padding-bottom: 0; }
  .home-page .hero-eyebrow { margin-bottom: 24px; }
  .home-page .hero-h1 { max-width: 14ch; font-size: clamp(2.75rem, 7.5vw, 4rem); text-wrap: initial; }
  .home-page .hero-sub { max-width: 45ch; }
  .home-page .hero-ctas { margin-bottom: 32px; gap: 24px; }
  .home-page .hero-note { padding-left: 32px; max-width: 42ch; }
  .freight-atlas { width: 100%; max-width: 600px; margin-inline: auto; }
  .atlas-plate { width: 100%; margin-inline: 0; }
  .atlas-annotation { left: 8%; bottom: 16%; }
  .decision-spread__wrap { grid-template-columns: 1fr; gap: 48px; }
  .transit-study { max-width: 560px; }
  .transit-chart { max-width: 500px; }
}
@media (max-width: 560px) {
  .home-page .hero-wrap { padding-top: 112px; gap: 40px; }
  .home-page .hero-h1 { max-width: none; font-size: clamp(2.5rem, 10.8vw, 3.5rem); }
  .home-page .hero-h1 > span { display: inline; }
  .home-page .hero-sub { max-width: 36ch; margin-bottom: 24px; }
  .home-page .hero-ctas { gap: 8px; margin-bottom: 24px; }
  .home-page .btn-primary, .home-page .btn-secondary { justify-content: space-between; }
  .home-page .hero-note { max-width: 38ch; }
  .home-page .hero-note::before { width: 20px; }
  .atlas-heading { font-size: 12px; }
  .atlas-plate { width: calc(100% + 40px); margin: 0 -20px; }
  .atlas-annotation { left: 4%; bottom: 4%; padding: 8px 12px; }
  .atlas-geography, .atlas-suez-mark text { display: none; }
  .atlas-label { font-size: 36px; }
  .atlas-label rect { height: 44px; transform-box: fill-box; transform-origin: left; transform: translateY(-12px) scaleX(1.8); }
  .freight-atlas figcaption { margin-top: 24px; font-size: 15px; }
  .freight-atlas figcaption > span:first-child { margin-right: 12px; }
  .atlas-controls { gap: 16px; }
  .atlas-controls button > span:first-child span { margin-left: 8px; }
  .atlas-footnote { flex-wrap: wrap; gap: 4px 16px; }
  .transit-chart__labels { font-size: 19px; }
  .transit-chart__ticks { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .freight-atlas, .freight-atlas * { transition-property: none !important; }
}