/*
  commuted.app

  The road at first light. The top of the page is asphalt running to
  signal teal, the app's own arc; below it, cream paper. Archivo, which
  narrows like road signage, for everything set; DM Mono for figures and
  labels; Fraunces only inside the copy of the app, where the app uses it.

  The asphalt-to-signal palette is brand identity and carries no state, as
  in the app: nothing on this page should suggest a color means anything.

  No analytics. The privacy policy says the site collects nothing, so keep
  it that way.
*/

:root {
  --cream: #f8f5f0;
  --cream-2: #efeae2;
  --card: #ffffff;
  --ink: #2a2622;
  --soft: #6b655d;
  --dim: #b9b2a8;
  --hair: rgba(42, 38, 34, 0.12);

  --asphalt: #0e1620;
  --slate: #1e3040;
  --steel: #33546b;
  --channel: #3e829b;
  --signal: #5fbfcf;

  --sans: Archivo, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --app-serif: Fraunces, "New York", Georgia, serif;

  --page: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; background: var(--asphalt); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.08rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--channel); text-underline-offset: 0.2em; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3 { margin: 0; font-weight: 700; font-stretch: 72%; letter-spacing: -0.01em; line-height: 0.98; text-wrap: balance; }

p { margin: 0 0 1rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 1.25rem;
}

.eyebrow.dark { color: var(--channel); }

.button {
  display: inline-block;
  background: linear-gradient(135deg, var(--asphalt), var(--steel));
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border-radius: 12px;
}

.road .button { background: var(--signal); color: var(--asphalt); }

.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2rem; }
.buy span { font-size: 0.98rem; opacity: 0.75; }

/* ---------- The road: bar and hero ---------- */

.road {
  color: #eef3f5;
  background: linear-gradient(160deg, var(--asphalt) 0%, var(--slate) 45%, var(--steel) 80%, var(--channel) 115%);
}

.bar-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.4rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mark { display: flex; align-items: center; gap: 0.65rem; font-weight: 700; font-stretch: 80%; font-size: 1.45rem; text-decoration: none; }
.mark img { border-radius: 8px; }

.bar nav { display: flex; align-items: center; gap: 1.5rem; font-weight: 500; font-size: 1rem; }
.bar nav a { text-decoration: none; }
.bar-cta { border: 1px solid rgba(255, 255, 255, 0.5); padding: 0.35rem 0.95rem; border-radius: 10px; }

.hero {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter) clamp(4rem, 8vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.hero h1 { font-size: clamp(3.2rem, 6.6vw, 5.8rem); font-stretch: 68%; font-weight: 800; }

.lede { margin-top: 1.75rem; max-width: 32rem; font-size: 1.22rem; color: rgba(238, 243, 245, 0.82); }

/* The trip */

.trip { margin: 0; max-width: 25rem; justify-self: end; width: 100%; }

.route {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.4rem 1.6rem;
  margin-bottom: 0.6rem;
}

.stop-dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--signal); background: var(--asphalt); }
.stop-dot.to.is-reached { background: var(--signal); }

.line { position: relative; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.lit { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: var(--signal); box-shadow: 0 0 12px rgba(95, 191, 207, 0.6); }

.car {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(95, 191, 207, 0.35), 0 0 18px rgba(95, 191, 207, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.trip.is-running .car { opacity: 1; }

.stop-name { position: absolute; bottom: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.stop-name.from { left: 0; }
.stop-name.to { right: 0; }

/* A copy of the app's home screen, in the app's own type. */

.phone {
  border-radius: 30px;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.week-head {
  padding: 1.4rem 1.4rem 1.3rem;
  color: #fff;
  background: linear-gradient(150deg, var(--asphalt), var(--slate) 45%, var(--channel) 120%);
}

.week-head p { margin: 0; }
.week-head .small { font-size: 0.85rem; opacity: 0.75; }
.week-head .big { font-family: var(--app-serif); font-size: 2.9rem; line-height: 1.1; margin: 0.35rem 0 0.4rem; font-variant-numeric: tabular-nums; }
.week-head .money { font-size: 0.95rem; }
.week-head .fuel { font-size: 0.8rem; opacity: 0.75; }
.week-head .flash { animation: flash 1.2s ease; }

@keyframes flash { 0% { color: var(--signal); } 100% { color: inherit; } }

.card { margin: 0.7rem 0.7rem 0; background: var(--card); border-radius: 18px; padding: 1rem 1.1rem; }
.card:last-child { margin-bottom: 0.7rem; }

.control { text-align: center; }
.clock { font-family: var(--app-serif); font-size: 2.6rem; line-height: 1; margin: 0.2rem 0 0.3rem; font-variant-numeric: tabular-nums; }
.since { font-size: 0.8rem; color: var(--soft); margin-bottom: 0.8rem; }

.go {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 0.85rem;
  cursor: pointer;
  background: linear-gradient(135deg, var(--asphalt), var(--steel));
  transition: transform 0.12s ease;
}

.go:active, .go.is-pressed { transform: scale(0.97); }

.which { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--soft); }

.today-head { display: flex; justify-content: space-between; align-items: baseline; }
.today-head p { margin: 0; font-size: 0.85rem; color: var(--soft); }
.today-head .serif { font-family: var(--app-serif); font-size: 1.4rem; color: var(--ink); }

.legs { display: grid; gap: 0.5rem; margin-top: 0.4rem; }

.leg { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.92rem; animation: arrive 0.5s ease-out; }
.leg span:last-child { color: var(--soft); }
.leg small { display: block; font-size: 0.75rem; color: var(--soft); }

@keyframes arrive { from { opacity: 0; transform: translateY(-6px); } }

.trip figcaption { margin-top: 1rem; font-size: 0.95rem; opacity: 0.75; text-align: center; }

/* ---------- Sections ---------- */

.how, .number, .app, .refuse, .private {
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6rem) var(--gutter);
}

.number, .app, .refuse, .private { border-top: 1px solid var(--hair); }

h2 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); }

.lede-dark { margin-top: 1.5rem; max-width: 38rem; font-size: 1.18rem; color: var(--soft); }

/* How it works: three stations on a line */

.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }

.stations { list-style: none; margin: 0; padding: 0 0 0 2.25rem; position: relative; }

.stations::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--asphalt), var(--steel), var(--signal));
}

.stations li { position: relative; padding-bottom: 2.25rem; }
.stations li:last-child { padding-bottom: 0; }

.stations li::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: 0.15rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--cream);
  border: 4px solid var(--steel);
}

.stations li:first-child::before { border-color: var(--asphalt); }
.stations li:last-child::before { border-color: var(--signal); background: var(--signal); }

.when { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--channel); margin-bottom: 0.3rem; }
.stations h3 { font-size: 1.9rem; margin-bottom: 0.4rem; }
.stations p:last-child { color: var(--soft); margin: 0; }

/* The number */

.cost { margin-top: 2.75rem; }

.cost-bar {
  display: flex;
  height: clamp(5.5rem, 12vw, 7.5rem);
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-2);
  box-shadow: inset 0 0 0 1px var(--hair);
}

.part {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.8rem 0;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  flex: 0 0 0;
  transition: flex-basis 1.1s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.part b, .part i { margin: 0 1rem; }
.part b { font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
.part i { font-style: normal; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }

.p-fuel { background: linear-gradient(135deg, var(--channel), var(--signal)); }
.p-rest { background: linear-gradient(135deg, var(--asphalt), var(--steel)); }

.number.is-fuel .p-fuel, .number.is-all .p-fuel { flex-basis: 20%; }
.number.is-all .p-rest { flex-basis: 80%; }

.cost-scale { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.8rem; font-family: var(--mono); font-size: 0.85rem; color: var(--soft); }
.cost-total { font-family: var(--sans); font-size: 1.05rem; color: var(--ink); }
.cost-total #cost-num { font-weight: 800; font-stretch: 72%; font-size: 2rem; }

.note { margin-top: 2rem; max-width: 38rem; color: var(--soft); }

/* The app */

.shots { margin-top: 2.75rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.shots figure { margin: 0; }
.shots img { border-radius: clamp(16px, 2vw, 28px); box-shadow: 0 18px 40px rgba(14, 22, 32, 0.16), 0 0 0 1px var(--hair); }
.shots figcaption { margin-top: 0.9rem; font-weight: 600; }

.duo { margin: clamp(3rem, 6vw, 4.5rem) 0 0; }
.duo img { border: 10px solid #0b0f14; border-radius: 26px; box-shadow: 0 30px 60px rgba(14, 22, 32, 0.22); }
.duo figcaption { margin-top: 1rem; color: var(--soft); max-width: 36rem; }

/* Refusals, as signs */

.refuse { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; }
.refuse .eyebrow { color: var(--channel); }
.refuse-text p:last-child { margin-top: 1.25rem; color: var(--soft); font-size: 1.15rem; }

.signs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

.signs li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--hair);
  font-weight: 600;
  font-stretch: 85%;
  line-height: 1.2;
}

/* A no-entry roundel, drawn rather than an icon. */
.signs li::before {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 3px solid var(--steel);
  background: linear-gradient(135deg, transparent calc(50% - 1.5px), var(--steel) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}

.close { grid-column: 1 / -1; margin-top: 1rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; font-stretch: 80%; line-height: 1.25; max-width: 44rem; }

/* Privacy */

.private { text-align: center; }
.private p { max-width: 38rem; margin: 1.5rem auto 0; color: var(--soft); font-size: 1.15rem; }
.private .buy { justify-content: center; }

/* ---------- Footer ---------- */

.foot { background: var(--asphalt); color: rgba(238, 243, 245, 0.75); }

.foot-inner { max-width: var(--page); margin: 0 auto; padding: 2.5rem var(--gutter) 3rem; font-size: 0.95rem; }

.foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 0.75rem; font-weight: 600; color: #fff; }
.foot nav a { text-decoration: none; }
.foot p { margin: 0 0 0.4rem; max-width: 44rem; }

/* ---------- Document pages: privacy, support, event ---------- */

.doc-page .road { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

.doc-head { max-width: 44rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) 0; }
.doc-head h1 { font-size: clamp(3rem, 8vw, 5rem); font-stretch: 68%; font-weight: 800; }
.doc-head .lede, .doc-head .updated { margin-top: 1.25rem; color: rgba(238, 243, 245, 0.8); }

.doc { max-width: 44rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(4rem, 8vw, 6rem); }
.doc h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); margin: 2.5rem 0 0.6rem; }
.doc h2:first-child { margin-top: 0; }
.doc .qa { margin-bottom: 2.25rem; }
.doc p, .doc li { color: #4d4740; }
.doc ul, .doc ol { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.4rem; }
.doc .duo { margin: 0 0 2.5rem; }

.card-accent, .contact-card {
  margin-top: 1.75rem;
  padding: 1.1rem 1.3rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.card-accent p, .contact-card p { margin: 0; color: #eef3f5; }
.contact-card .label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.3rem; }
.contact-card a { font-size: 1.25rem; font-weight: 600; }

/* ---------- Small screens ---------- */

@media (max-width: 56rem) {
  .hero, .how, .refuse { grid-template-columns: minmax(0, 1fr); }
  .trip { justify-self: center; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo img { border-width: 6px; border-radius: 16px; }
}

@media (max-width: 34rem) {
  .bar nav { gap: 1rem; }
  .signs { grid-template-columns: minmax(0, 1fr); }
  .part b { margin: 0 0.7rem; }
  .part b { font-size: 0.85rem; }
  .part i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .part, .car, .go { transition: none !important; }
  .leg, .week-head .flash { animation: none !important; }
}