@charset "UTF-8";

/* Geist and Geist Mono, self-hosted (OFL-1.1, fonts/OFL.txt); no remote font requests (ADR-196). */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  font-family: var(--landing-font);
  font-size: 100%;
  line-height: 1.6;
  color: var(--landing-ink);
  background: var(--landing-paper);
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  font-size: var(--landing-text-16);
}
h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}
p {
  text-wrap: pretty;
}
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: var(--landing-transparent);
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
:focus-visible {
  outline: 2px solid var(--landing-focus);
  outline-offset: 3px;
}
::selection {
  background: var(--landing-selection);
}

h1 {
  font-size: var(--landing-text-72);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h2 {
  font-size: var(--landing-text-40);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 {
  font-size: var(--landing-text-18);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.shell {
  width: min(1200px, 100% - 64px);
  margin-inline: auto;
}
.section-space {
  padding-block: 112px;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--landing-ink);
  color: var(--landing-paper);
  font-weight: 500;
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
}

/* Header */
.site-header {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--landing-text-18);
  font-weight: 600;
  letter-spacing: -0.02em;
}
a.brand:hover {
  text-decoration: none;
}
.mark {
  flex: none;
  width: 28px;
  height: 28px;
  /* Optical alignment: the 24-unit grid leaves about 4 units of air left of the stroke. */
  margin-left: -4px;
  color: var(--landing-brand);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: var(--landing-text-14);
  font-weight: 500;
}
.nav-link {
  padding-block: 12px;
  color: var(--landing-muted);
}
.nav-link:hover {
  color: var(--landing-ink);
}

/* Actions */
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid var(--landing-transparent);
  border-radius: var(--landing-radius-6);
  font-size: var(--landing-text-16);
  font-weight: 500;
  line-height: 1.2;
}
.button:hover {
  text-decoration: none;
}
.button-primary {
  background: var(--landing-primary);
  color: var(--landing-on-primary);
}
.button-primary:hover {
  background: var(--landing-primary-hover);
}
.button-quiet {
  min-height: 40px;
  padding: 0 16px;
  border-color: var(--landing-ink);
  font-size: var(--landing-text-14);
}
.button-quiet:hover {
  background: var(--landing-ink);
  color: var(--landing-paper);
}
.text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, var(--landing-transparent));
  text-underline-offset: 0.3em;
}
.text-link:hover {
  text-decoration-color: currentColor;
}
/* The two short labels the page allows (LP3): the hero line and "Why fifty1". Sentence case. */
.label {
  font-size: var(--landing-text-14);
  font-weight: 500;
  color: var(--landing-brand);
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 64px;
  padding-block: 40px 32px;
}
.hero .label {
  margin-bottom: 20px;
}
.lead {
  max-width: 30em;
  margin-top: 24px;
  font-size: var(--landing-text-18);
  color: var(--landing-muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 40px;
}
.access-note {
  margin-top: 16px;
  font-size: var(--landing-text-14);
  color: var(--landing-muted);
}
/* The figures: real core output on the demo project, each on its own sheet, captioned below. */
.street-figure {
  overflow: hidden;
  border: 1px solid var(--landing-art-frame);
  border-radius: var(--landing-radius-10);
  background: var(--landing-art-panel);
}
.figure-caption {
  padding: 12px 20px;
  border-top: 1px solid var(--landing-art-rule);
  font-size: var(--landing-text-14);
  color: var(--landing-art-muted);
}

/* visuals:styles:start */
/* The generated SVGs (scripts/landing/visuals.ts) carry classes only, coloured here by the art tokens. */
.visual {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--landing-font);
  font-variant-numeric: tabular-nums;
}
.v-canvas {
  fill: var(--landing-art-canvas);
}
.v-panel {
  fill: var(--landing-art-panel);
}
/* Each lane fill is stroked in its own colour, a hairline that closes the anti-aliased seam between two
   lanes of one fill; the markings are drawn over it. */
.v-plan-travel,
.v-pavement {
  fill: var(--landing-art-plan-travel);
  stroke: var(--landing-art-plan-travel);
}
.v-plan-bike {
  fill: var(--landing-art-plan-bike);
  stroke: var(--landing-art-plan-bike);
}
.v-plan-bus {
  fill: var(--landing-art-plan-bus);
  stroke: var(--landing-art-plan-bus);
}
.v-plan-parking {
  fill: var(--landing-art-plan-parking);
  stroke: var(--landing-art-plan-parking);
}
.v-plan-sidewalk {
  fill: var(--landing-art-plan-sidewalk);
  stroke: var(--landing-art-plan-sidewalk);
}
.v-plan-median {
  fill: var(--landing-art-plan-median);
  stroke: var(--landing-art-plan-median);
}
.v-plan-buffer {
  fill: var(--landing-art-plan-buffer);
  stroke: var(--landing-art-plan-buffer);
}
[class^="v-plan-"],
.v-pavement {
  stroke-width: 0.75;
  stroke-linejoin: round;
}
.v-paint-white,
.v-hatch {
  fill: var(--landing-art-paint-white);
}
.v-paint-yellow {
  fill: var(--landing-art-paint-yellow);
}
.v-curb {
  fill: none;
  stroke: var(--landing-art-curb);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.v-north {
  fill: none;
  stroke: var(--landing-art-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v-north text {
  fill: var(--landing-art-muted);
  stroke: none;
  font-size: 13px;
  font-weight: 600;
}
.v-station {
  fill: none;
  stroke: var(--landing-art-ink);
  stroke-opacity: 0.6;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.v-section-travel {
  fill: var(--landing-art-section-travel);
}
.v-section-bike {
  fill: var(--landing-art-section-bike);
}
.v-section-bus {
  fill: var(--landing-art-section-bus);
}
.v-section-parking {
  fill: var(--landing-art-section-parking);
}
.v-section-sidewalk,
.v-curb-top {
  fill: var(--landing-art-section-sidewalk);
}
.v-section-median {
  fill: var(--landing-art-section-median);
}
.v-section-buffer {
  fill: var(--landing-art-section-buffer);
}
.v-seam {
  fill: none;
  stroke: var(--landing-art-ink);
  stroke-opacity: 0.22;
  stroke-width: 1;
}
.v-mark,
.v-mark-raised,
.v-hatch {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v-mark {
  stroke: var(--landing-art-section-label);
}
.v-mark-raised {
  stroke: var(--landing-art-section-label-raised);
}
.v-hatch {
  stroke: var(--landing-art-paint-white);
}
.v-curb-face {
  fill: var(--landing-art-curb);
}
.v-dimension {
  fill: none;
  stroke: var(--landing-art-muted);
  stroke-width: 1;
}
.v-ticks {
  stroke-width: 1.25;
}
.v-dimension-text {
  fill: var(--landing-art-ink);
  font-size: 12px;
  text-anchor: middle;
}
.v-check-card {
  fill: var(--landing-art-card);
}
.v-check-edge,
.v-check-rule,
.v-check-pill {
  fill: none;
  stroke: var(--landing-art-card-edge);
  stroke-width: 1;
}
.v-check-error {
  fill: var(--landing-art-error);
}
.v-check-warning {
  fill: var(--landing-art-warning);
}
.v-check-info,
.v-check-none {
  fill: var(--landing-art-card-edge);
}
.v-check-icon-error,
.v-check-icon-warning,
.v-check-icon-info,
.v-check-icon-none,
.v-check-shield {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v-check-icon-error {
  stroke: var(--landing-art-error);
}
.v-check-icon-warning {
  stroke: var(--landing-art-warning);
}
.v-check-icon-info,
.v-check-icon-none {
  stroke: var(--landing-art-muted);
}
.v-check-shield {
  stroke: var(--landing-art-ink);
}
.v-check-title {
  fill: var(--landing-art-ink);
  font-size: 15px;
  font-weight: 600;
}
.v-check-text,
.v-check-strong {
  fill: var(--landing-art-ink);
  font-size: 13px;
}
.v-check-strong {
  font-weight: 500;
}
.v-check-muted {
  fill: var(--landing-art-muted);
  font-size: 13px;
}
.v-check-note {
  fill: var(--landing-art-muted);
  font-size: 12px;
}
.v-check-small {
  fill: var(--landing-art-ink);
  font-size: 12px;
}
/* visuals:styles:end */

/* How it works */
.workflow {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: 64px;
}
.section-intro p {
  max-width: 26em;
  margin-top: 20px;
  font-size: var(--landing-text-18);
  color: var(--landing-muted);
}
.steps {
  padding: 0;
  list-style: none;
}
.steps li {
  padding-block: 24px;
  border-top: 1px solid var(--landing-line);
}
.steps li:first-child {
  padding-top: 4px;
  border-top: 0;
}
.steps li:last-child {
  padding-bottom: 0;
}
.steps p {
  margin-top: 4px;
  color: var(--landing-muted);
}

/* What you get */
.outputs {
  background: var(--landing-band);
}
.outputs h2 {
  max-width: 14em;
}
/* Two figures side by side, each with its words below; the plan sheet runs the full width. No row gap:
   the cards' rows are shared with them (subgrid), so the space between cards is a margin. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  margin-top: 48px;
}
.card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}
.card-figure {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--landing-art-frame);
  border-radius: var(--landing-radius-10);
  background: var(--landing-art-panel);
}
.card-panel {
  display: grid;
  flex: 1;
  place-items: center;
}
.card-panel .visual-check {
  max-width: 392px;
}
.card h3 {
  margin-top: 24px;
}
.card > p {
  max-width: 30em;
  margin-top: 6px;
  color: var(--landing-muted);
}
/* The plan sheet: a wider figure with its words beside it. */
.card-sheets {
  grid-column: 1 / -1;
  grid-row: auto;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto;
  column-gap: 32px;
  align-items: center;
  margin-top: 72px;
}
.card-sheets .card-figure {
  grid-row: 1 / span 2;
}
.card-sheets h3 {
  align-self: end;
  margin-top: 0;
}
.card-sheets > p {
  align-self: start;
}
.visual-section-narrow {
  display: none;
}

.sources {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 16px;
  font-size: var(--landing-text-14);
}
.sources > p {
  color: var(--landing-muted);
}
.sources ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0;
  list-style: none;
}
.sources li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.edition {
  color: var(--landing-muted);
  white-space: nowrap;
}
.doc-icon {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--landing-muted);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

/* Why fifty1: a still wordmark beside two short passages; no stroked mark here (D4), no motion (D10). */
.why {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 48px 64px;
}
.wordmark {
  font-size: var(--landing-text-wordmark);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}
.wordmark span {
  color: var(--landing-brand);
}
.why-copy h2 {
  margin-top: 16px;
}
.why-copy > p:not(.label) {
  max-width: 30em;
  margin-top: 16px;
  font-size: var(--landing-text-18);
  color: var(--landing-muted);
}
.why-copy h2 + p {
  margin-top: 24px;
}

/* Closing: the heading, then the access line and its action, on a hairline */
.closing {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: end;
  gap: 32px 64px;
  border-top: 1px solid var(--landing-line);
}
.closing h2 {
  max-width: 16em;
}
.closing-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.closing-note {
  font-size: var(--landing-text-18);
  color: var(--landing-muted);
}

/* Footer */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  padding-block: 32px;
  border-top: 1px solid var(--landing-line);
  font-size: var(--landing-text-14);
  color: var(--landing-muted);
}
.signature {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
}
.signature strong {
  font-weight: 600;
  color: var(--landing-ink);
}
.footer-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--landing-ink);
}
.site-footer .mark {
  width: 24px;
  height: 24px;
  margin-left: -3px;
}
.nowrap {
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .hero,
  .workflow,
  .why,
  .closing {
    column-gap: 40px;
  }
  .hero,
  .workflow {
    row-gap: 40px;
  }
  .cards {
    column-gap: 20px;
  }
}
/* Two narrow figures side by side: the cross-section as the editor lays it out in a narrow panel. */
@media (max-width: 1024px) and (min-width: 861px) {
  .visual-section-wide {
    display: none;
  }
  .visual-section-narrow {
    display: block;
  }
}
@media (max-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    padding-block: 32px 16px;
  }
  .lead {
    max-width: 32em;
  }
  .workflow,
  .why,
  .closing {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps li:first-child {
    padding-top: 24px;
    border-top: 1px solid var(--landing-line);
  }
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .card,
  .card-sheets {
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .card + .card {
    margin-top: 56px;
  }
  .card-sheets .card-figure {
    grid-row: auto;
  }
  .card-sheets h3 {
    margin-top: 24px;
  }
  .card-panel .visual-section-wide {
    max-width: 600px;
  }
}
@media (max-width: 760px) {
  .shell {
    width: min(1200px, 100% - 40px);
  }
  .section-space {
    padding-block: 80px;
  }
  .site-header {
    min-height: 72px;
  }
  .nav-link {
    display: none;
  }
  .cards {
    margin-top: 40px;
  }
  .card + .card {
    margin-top: 48px;
  }
}
/* A phone: the cross-section relaid narrow, and the plan sheet cropped to its middle at its own scale. */
@media (max-width: 600px) {
  .visual-section-wide {
    display: none;
  }
  .visual-section-narrow {
    display: block;
  }
  .card-panel .visual-sheet {
    width: 600px;
    max-width: none;
    margin-inline: calc(50% - 300px);
  }
}
@media (max-width: 480px) {
  .site-header nav {
    gap: 0;
  }
  .button-quiet {
    min-height: 36px;
    padding: 0 14px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 32px;
  }
  .access-note {
    margin-top: 8px;
  }
  .closing-action {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .button-primary {
    align-self: stretch;
  }
  .figure-caption {
    padding: 12px 16px;
  }
  .section-space {
    padding-block: 72px;
  }
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-block: 24px 32px;
  }
  .signature {
    margin-right: 0;
  }
}

/* Motion is opt-in: nothing moves unless the viewer allows it. The drawings are still (D10). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .button {
    transition:
      background-color var(--landing-duration-fast),
      border-color var(--landing-duration-fast),
      color var(--landing-duration-fast);
  }
}