/* Page layout and the illustration's paint. Values come from system/tokens.css only. */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

/* Atoms set display, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--g-25);
  color: var(--g-900);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  background: var(--m-700);
  color: var(--g-0);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  text-decoration: none;
  transform: var(--skip-hide);
}
.skip:focus-visible { transform: none; outline: var(--focus-ring) solid var(--m-700); outline-offset: var(--focus-gap); }

/* Header */

.site-header {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  height: var(--header-h);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s-8);
}

.brand { display: inline-flex; border-radius: var(--s-1); }
.brand:focus-visible { outline: var(--focus-ring) solid var(--m-700); outline-offset: var(--s-1); }
.brand img { display: block; height: var(--logo-h); width: auto; }

/* Header text is set once here; the menu items inherit it. */
.site-header { font-size: var(--t-ui); }
.site-header .split { margin-left: auto; }

/* Hero */

.hero {
  display: grid;
  /* Even halves: the copy column keeps the 60px line to two lines down to tablet widths. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--s-8);
  max-width: var(--content-max);
  min-height: calc(100vh - var(--header-h));
  margin-inline: auto;
  padding: var(--s-6) var(--s-8) var(--s-8);
}

.hero-copy .display { margin-bottom: var(--s-5); }
.hero-copy .lede { margin-bottom: var(--s-6); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.hero-copy .hero-note { margin-top: var(--s-4); }

.proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin: var(--s-7) 0 0;
  padding: var(--s-5) 0 0;
  list-style: none;
  border-top: var(--hairline) solid var(--g-100);
}

.proof li {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.proof .meta { color: var(--g-600); }

.hero-art {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: var(--art-max-lg);
}

.art-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: var(--z-art-control);
}
.art-toggle .icon-play { display: none; }
.art-toggle[aria-pressed="true"] .icon-play { display: block; }
.art-toggle[aria-pressed="true"] .icon-pause { display: none; }

/* Illustration paint. Strokes stay one screen pixel at any size. */

.art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--art-ratio);
  overflow: visible;
}

.art * { vector-effect: non-scaling-stroke; }

.art .face { fill: var(--g-0); }
.art .side-l { fill: var(--g-0); }
.art .side-r { fill: var(--g-50); }
.art .edge { fill: none; stroke: var(--g-700); stroke-width: var(--hairline); stroke-linejoin: round; }
.art .face.edge { fill: var(--g-0); }
.art .side-l.edge { fill: var(--g-0); }
.art .side-r.edge { fill: var(--g-50); }
.art .inset { fill: none; stroke: var(--g-200); stroke-width: var(--hairline); }
.art .grid { fill: none; stroke: var(--g-100); stroke-width: var(--hairline); }
.art .ghost { fill: none; stroke: var(--g-400); stroke-width: var(--hairline); stroke-dasharray: var(--dash-ghost); }

.art .orbit { fill: none; stroke: var(--g-400); stroke-width: var(--hairline); stroke-dasharray: var(--dash-orbit); }
.art .route { fill: none; stroke: var(--g-300); stroke-width: var(--hairline); stroke-dasharray: var(--dash-orbit); }
.art .link { fill: none; stroke: var(--g-400); stroke-width: var(--hairline); }
.art .route-on { fill: none; stroke: var(--m-600); stroke-width: var(--stroke-glyph); stroke-linecap: round; stroke-linejoin: round; }

.art .glyph { fill: none; stroke: var(--g-900); stroke-width: var(--stroke-glyph); stroke-linecap: round; stroke-linejoin: round; }
.art .glyph-on { stroke: var(--m-700); }
.art .glyph-inverse { fill: none; stroke: var(--g-0); stroke-width: var(--stroke-glyph); stroke-linecap: round; stroke-linejoin: round; }

.art .knock { fill: var(--g-0); }
.art .tile { fill: var(--g-0); stroke: var(--g-300); stroke-width: var(--hairline); }
.art .tile-on { fill: var(--m-50); stroke: var(--m-600); stroke-width: var(--hairline); }
.art .halo { fill: var(--m-100); }
.art .hub { fill: var(--m-400); }
.art .mark { fill: var(--g-900); }
.art .glow { fill: var(--m-50); stroke: var(--m-200); stroke-width: var(--hairline); }

.art .bar { fill: var(--g-200); }
.art .bar-on { fill: var(--m-400); }
.art .dot { fill: var(--m-600); }
.art .badge { fill: var(--m-600); }

/* Stacked layout */

@media (max-width: 960px) {
  .site-header { padding-inline: var(--s-5); }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7);
    min-height: 0;
    padding: var(--s-6) var(--s-5) var(--s-8);
  }

  .hero-art {
    justify-self: center;
    max-width: var(--art-max-sm);
  }
}

@media (max-width: 560px) {
  .site-header { padding-inline: var(--s-4); }

  .hero { padding: var(--s-5) var(--s-4) var(--s-7); }
  .hero-copy .display { margin-bottom: var(--s-4); }
  .hero-copy .lede { margin-bottom: var(--s-5); }
  /* Three columns leave "carrier and logistics integrations" on three lines; rows read cleaner. */
  .proof { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-4); }
  .proof li { display: grid; grid-template-columns: var(--figure-col) minmax(0, 1fr); align-items: baseline; gap: var(--s-3); }
}